header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;}
html,body,div,span,applet,object,iframe,video,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,address{margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; list-style:none;}
span,a{display:inline-block;}a{text-decoration:none;font-style:normal;}
html,body{font-family: 'Noto Sans KR'; font-weight:100; margin:0; width:100%; height:100%; line-height:normal; -webkit-overflow-scrolling:touch;}
body{color:#000;letter-spacing:-1px;-webkit-text-size-adjust:none;/*아이폰가로 폰트확대 방지*/vertical-align:top;}img{border:0;max-width:100%;vertical-align:top;}form{display:inline;}fieldset{border:0;}legend{display:none;}input,select,radio,div{vertical-align:top;}input[type=submit],button{cursor:pointer;}input[type=radio]{padding:0;margin:0;vertical-align:middle;}input[type=checkbox]{margin:0; vertical-align:middle;}h1,h2,h3,h4,h5,h6{font-weight:normal;}

/* guide */
.br320{display:block;}.br375,.br412,.br1200{display:none;}
.inner{max-width:85%; margin:0 auto;}

/* font */
html{font-size:62.5%;/*font-size:10px;*/}

@media screen and (min-width:375px){
.br375{display:block;}.br320,.br412,.br1200{display:none;}
    .inner{max-width:90%; margin:0 auto;}
}
@media screen and (min-width:412px){ /*galaxy note9*/
.br412{display:block;}.br320,.br375,.br1200{display:none;}
    .inner{max-width:85%; margin:0 auto;}
}
@media screen and (min-width:415px){
.inner{max-width:41.2rem;}
}
@media screen and (min-width:1200px){
.br1200{display:block;}.br320,.br375,.br412{display:none;}
    .inner{max-width:120rem; position: relative }
}

.left_con { float:left; }
.right_con { float:right; }

.w_100per { width: 100% }
.w_90per { width: 90% }
.w_80per { width: 80% }
.w_70per { width: 70% }
.w_60per { width: 60% }
.w_50per { width: 50% }
.w_40per { width: 40% }
.w_30per { width: 30% }
.w_20per { width: 20% }
.w_10per { width: 10% }


/*=========================start css=============================*/
/*preloader*/
.spinner-wrapper {position: fixed; z-index: 99999999; top: 0; right: 0; bottom: 0; left: 0; background: #9ec9ec;}
.spinner {position: absolute; top: 50%; left: 50%; width: 3.75rem; height: 1.25rem; margin: -0.625rem 0 0 -1.875rem; text-align: center;}
.spinner > div {display: inline-block; width: 1rem; height: 1rem; border-radius: 100%; background-color: #fff; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}

@media screen and (min-width:375px){
}

@media screen and (min-width:412px){
}

@media screen and (min-width:415px){
}

@media screen and (min-width:1200px){
}