@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Bungee&family=Monoton&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Teko:wght@300..700&display=swap');

@font-face {
    font-family:'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight:500;
    font-style:normal;
}

@font-face {
    font-family:'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight:300;
    font-style:normal;
}

@font-face {
    font-family:'GmarketSans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight:800;
    font-style:normal;
}

/* CSS Reset */
body,html,
header,footer,aside,nav,section,article,details,figure,figcaption,menu,command,
div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td, /* Block Element */
h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist,
img,embed,object,canvas,audio,video,meter,progress,keygen, /* Inline Block Element */
a,label,output,dialog, /* Inline Element */
address,blockquote, /* Text Block Element */
p,pre,/* Text Inline Block Element */
span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp, /* Text Inline Element */
acronym,big,frame,frameset,noframes,tt, /* Not HTML5 Used Element */
map,option,hr,*{border:0;padding:0;margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;}
header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block} /* HTML5 Block Element */
applet,basefont,center,dir,font,strike{display:none} /* XHTML4, HTML5 Element Not Used Remove */
q,blockquote{quotes:none;content:none}
li,menu{list-style:none;word-break:break-all}

table{width:100%;border-spacing:0;border-collapse:separate;} /* Table Border (separate) */
caption{text-align:left}
th,td{text-align:center;vertical-align:middle}

address{font-style:normal}
label{display:inline-block;}
a{text-decoration:none;display:inline-block;} /* A Attribute  */

/* Common Setting */
html{overflow-y:auto;}
html,body{height:100%;} /* Horizen Scroll */
body {color:#333;font-size:17px;font-family:"GmarketSans", "Montserrat", 'Noto Sans KR',  Pretendard, -apple-system, BlinkMacSystemFont, 'GmarketSans', 'Noto Sans KR', sans-serif, "Nanum Gothic";font-weight:400;min-width:320px;background-color:#fafafa;}
div{outline:0}
img {vertical-align:middle;}

::selection {background-color:#af1c1c;color:#fff;}

.warp {position:relative;width:600px;margin:30px auto;padding:0;text-align:center;}

.top {position:relative;padding:50px 0;}
.top p {font-family:"Montserrat";font-size:21px;font-weight:600;}
.top p b {font-weight:600;color:#dd0000;}
.top h1 {font-size:52px;}
.top h1 b {color:#dd0000;}
.top span {font-size:17px;}

.gnb {position:relative;padding:22px 0;background-color:#000;border-radius:50px;}
.gnb a {font-size:15px;color:white;padding:10px 15px 8px 15px;margin:0 10px;}
.gnb a:hover, .gnb .on {color:#dd0000;background-color:white;border-radius:20px;}

.gnb_fixed {position:fixed;top:0;z-index:100;width:600px;}

.box {position:relative;margin:30px 0;background-color:white;border-radius:40px;padding:45px 30px;text-align:left;}
.box h1 {font-size:28px;color:#dd0000;padding-bottom:5px;}
.box p {font-size:15px;padding:3px 0;}
.box .des {position:relative;padding-top:20px;}
.box .des li {font-size:14px;color:#999;padding:3px 0;}
.box .photo {position:relative;clear:both;padding:40px 0 0 0;}
.box .photo p {font-size:15px;background-color:#f2f2f2;border-radius:10px;padding:15px 20px;margin-bottom:7px;}
.box .photo span {font-size:13px;color:#999;padding:0 0 7px 0;display:block;}
.box .photo li {float:left;width:calc(33.33% - 5px);margin:0 7px 0 0;}
.box .photo li:last-child {margin-right:0;}
.box .photo li img {width:100%;border-radius:10px;}
.box .photo .all {width:100%;}
.box .photo .all img {border:solid 1px #e5e5e5;}

.box .clear {position:relative;clear:both;}


@media only screen and (max-width:600px) {

.warp {width:auto;margin:0 auto;}

.top {padding:35px 0 25px 0;}
.top p {font-size:16px;}
.top h1 {font-size:30px;}
.top span {font-size:15px;}

.gnb {padding:15px 0;border-radius:0px;}
.gnb a {font-size:14px;padding:8px 10px 6px 10px;margin:0 0;}
.gnb a:hover, .gnb .on {border-radius:10px;}

.gnb_fixed {width:100%;}

.box {margin:20px 0;border-radius:0px;padding:30px 10px 20px 10px;border-top:solid 10px #000;margin:0;}
.box h1 {font-size:20px;line-height:24px;}
.box p {font-size:14px;padding:2px 0;}
.box .des {padding-top:10px;}
.box .des li {font-size:13px;padding:2px 0;}
.box .photo {padding:30px 0 0 0;}
.box .photo p {font-size:14px;border-radius:0px;padding:12px 10px 10px 10px;margin-bottom:5px;line-height:18px;}
.box .photo li {width:calc(50% - 5px);margin:0 5px 5px 0;}
.box .photo li img {border-radius:0px;}

}