@charset "utf-8";
/* TOUN28-AIX Team. YMJ. 2020727 */

/* HTML초기화 */
@import url("2.0_reset.css"); 

body {-webkit-text-size-adjust:none; -webkit-text-size-adjust:auto; -webkit-text-size-adjust:120%;} 
body, html {min-width:320px; min-height:667px; width:100%; height:100%; margin:0; padding:0; color:#1b1b1b; font-family:"Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:400; background:#fff;}

/* page loader */
.page_loader {position:fixed; top:0; left:0; width:100%; height:100%; background:#1b1b1b; z-index:9999;}
.page_loader dl {position:absolute; top:calc(50% - 50px); left:50%;transform:translate(-50%,-50%);}
.page_loader dl dt {display:block; margin:0 0 7px 0; color:#fff; font-size:12px; font-weight:300; text-align:center; letter-spacing:5px;}
.page_loader dl dd {display:block; overflow:hidden; width:200px; height:30px; text-indent:-999px; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/logo_white.svg") no-repeat center center/auto 100%;}
.page_loader .loader {display:block; position:absolute; top:50%; left:calc(50% - 100px); width:10px; height:10px; margin:15px auto; color:#fff; border-radius:50%; box-sizing:border-box; animation:page_loader 2s linear infinite; transform:translate(-50%,-50%);}
@keyframes page_loader {
0%   {box-shadow:0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0);}
12%  {box-shadow:100px 0 white,0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0);}
25%  {box-shadow:110px 0 white,100px 0 white,0px 0 rgba(255,255,255,0),0px 0 rgba(255,255,255,0);}
36%  {box-shadow:120px 0 white,110px 0 white,100px 0 white,0px 0 rgba(255,255,255,0);}
50%  {box-shadow:130px 0 white,120px 0 white,110px 0 white,100px 0 white;}
62%  {box-shadow:200px 0 rgba(255,255,255,0),130px 0 white,120px 0 white,110px 0 white;}
75%  {box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 white,120px 0 white;}
87%  {box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 white;}
100% {box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0);}
}

/* skipNav */
.skip a {display:block; overflow:hidden; position:absolute; top:0; left:0; width:1px; height:1px; color:#fff; text-align:center; background:#1b1b1b; z-index:1000;}
.skip a:focus,.skip a:active {position:relative; width:100%; height:auto; padding:10px;}

/* header-sample */
#header.sample_code {position:relative; width:100%; background:#fff;}
#header.sample_code .inner {width:100%;}
#header.sample_code .inner .top_banner {display:flex; overflow:hidden; align-items:center; justify-content:center; width:100%; height:36px; padding:0 20px; box-sizing:border-box; background:#1b1b1b;}
#header.sample_code .inner .top_banner p {overflow:hidden; margin:0; color:#fff; font-size:1rem; font-weight:500; line-height:1; white-space:nowrap; text-overflow:ellipsis;}
#header.sample_code .inner .sta {position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:65px; padding:0 20px; box-sizing:border-box; border-bottom:1px solid #f2f2f2; background:#fff;}
#header.sample_code .inner .sta h1 {display:flex; align-items:center; justify-content:center; width:100px; margin:0;}
#header.sample_code .inner .sta h1 img {display:block; width:100%; height:auto;}
#header.sample_code .inner .sta .gnb {position:absolute; top:50%; left:20px; width:22px; height:22px; transform:translateY(-50%); cursor:pointer;}
#header.sample_code .inner .sta .gnb img {display:block; width:100%; height:100%; object-fit:contain;}
#header.sample_code .inner .sta .util {position:absolute; top:50%; right:20px; width:58px; height:24px; transform:translateY(-50%); cursor:pointer;}
#header.sample_code .inner .sta .util img {display:block; width:100%; height:100%; object-fit:contain;}

/* -------------------- mobile -------------------- */
@media screen and (max-width:780px) {
/* header-sample */
#header.sample_code .inner .top_banner {padding:0 16px;}
#header.sample_code .inner .top_banner p {font-size:0.85rem;}
#header.sample_code .inner .sta {height:55px; padding:0 16px;}
#header.sample_code .inner .sta .gnb {left:16px;}
#header.sample_code .inner .sta .util {right:16px;}
}