@charset "utf-8";
@import "/support/fontawesome-free-5.0.13/fontawesome.min.css";
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
@font-face{font-family: "FontAwesome5"; font-style: normal; font-weight: 900; src: url("/support/fontawesome-free-5.0.13/solid-900.eot"); src: url("/support/fontawesome-free-5.0.13/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/support/fontawesome-free-5.0.13/fa-solid-900.woff2") format("woff2"), url("/support/fontawesome-free-5.0.13/fa-solid-900.woff") format("woff"), url("/support/fontawesome-free-5.0.13/fa-solid-900.ttf") format("truetype"), url("/support/fontawesome-free-5.0.13/fa-solid-900.svg#fontawesome") format("svg"); }
@font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Thin/notokr-thin.eot'); src: url('/support/notosans-kr/NotoKR-Thin/notokr-thin.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.woff') format('woff'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Thin/notokr-thin.svg#notokr-thin') format('svg'); font-weight: 100; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Light/notokr-light.eot'); src: url('/support/notosans-kr/NotoKR-Light/notokr-light.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Light/notokr-light.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Light/notokr-light.woff') format('woff'), url('/support/notosans-kr/NotoKR-Light/notokr-light.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Light/notokr-light.svg#notokr-light') format('svg'); font-weight: 200; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.eot'); src: url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.woff') format('woff'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-DemiLight/notokr-demilight.svg#notokr-demilight') format('svg'); font-weight: 300; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Regular/notokr-regular.eot'); src: url('/support/notosans-kr/NotoKR-Regular/notokr-regular.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.woff') format('woff'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Regular/notokr-regular.svg#notokr-regular') format('svg'); font-weight: 400; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Medium/notokr-medium.eot'); src: url('/support/notosans-kr/NotoKR-Medium/notokr-medium.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.woff') format('woff'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Medium/notokr-medium.svg#notokr-medium') format('svg'); font-weight: 500; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Bold/notokr-bold.eot'); src: url('/support/notosans-kr/NotoKR-Bold/notokr-bold.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.woff') format('woff'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Bold/notokr-bold.svg#notokr-bold') format('svg'); font-weight: 700; font-style: normal; } @font-face {font-family: 'Noto Sans KR'; src: url('/support/notosans-kr/NotoKR-Black/notokr-black.eot'); src: url('/support/notosans-kr/NotoKR-Black/notokr-black.eot?#iefix') format('embedded-opentype'), url('/support/notosans-kr/NotoKR-Black/notokr-black.woff2') format('woff2'), url('/support/notosans-kr/NotoKR-Black/notokr-black.woff') format('woff'), url('/support/notosans-kr/NotoKR-Black/notokr-black.ttf') format('truetype'), url('/support/notosans-kr/NotoKR-Black/notokr-black.svg#notokr-black') format('svg'); font-weight: 900; font-style: normal; }
/**
 * reset
 */
::-webkit-scrollbar{background-color: #CE070E; width: 12px; }
::-webkit-scrollbar-thumb{background-color: #000; }
html{scrollbar-track-color: #CE070E; scrollbar-base-color: #CE070E; scrollbar-face-color: #000; scrollbar-shadow-color: #000; scrollbar-arrow-color: #fff; scrollbar-3dlight-color: #CE070E; scrollbar-highlight-color: #CE070E; scrollbar-dark-shadow-color: #CE070E; -ms-overflow-style: scrollbar; }
html{-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; word-break: keep-all; font-weight: 300; background-color: #f9f9f9; }
html, body{width: 100%; height: 100%; }
html, input, button, select, textarea, optgroup{font-family: "Noto Sans KR", "Microsoft Yahei", dotum, sans-serif; line-height: 1.6; }
button{cursor: pointer; }
button, input, select, textarea{outline: none; }
button, img, iframe, input, select, textarea{border: 0; }
button, a{background-color: transparent; }
a{text-decoration: none; -webkit-text-decoration-skip: objects; }
a, input, button, select, textarea{color: inherit; }
textarea{resize: none; }
table{border-collapse: collapse; border-spacing: 0; }
h1{font-size: 1.8em; }
small{font-size: 80%; }
hr{border: 0; border-bottom: 1px dashed #aaa; }
button, input, select, option, textarea{font-size: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, form, iframe{display: block; }
button, input, textarea, option, td, th, ul, ol, li{padding: 0; }
body, p, pre, h1, h2, h3, h4, h5, h6, form, ul, ol, li, input[type="radio"], input[type="checkbox"], textarea{margin: 0; }
ul, li{list-style: none; }
input::-ms-clear {display: none; }
select::-ms-value {background: none; color: inherit; }
select::-ms-expand {display: none; }
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px white inset; }
input, select, button, textarea{appearance: none; -moz-appearance: none; -webkit-appearance: none; }
input, select, textarea{border-radius: 0; }
img{vertical-align: middle; }
button{overflow: visible; }
body{overflow-x: hidden; }
em{font-style: normal; }
svg{margin: 0 auto; }
/**
 * kit
 */
.kit-wrap{overflow: hidden; }
.kit{display: block; width: auto; padding: 0; margin: 0; }
.kit:after{content: ""; display: block; width: 100%; clear: both; }
.kit > li {float: left; list-style-type: none; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/**
 * import
 */
.fa,
.fas,
.fa-after:after,
.fa-before:before{font-family: "FontAwesome5"; font-weight: 900; }
.clear-b:after{content: ""; display: block; width: 100%; clear: both; }
.bs-bb{-webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.bg{background-repeat: no-repeat; background-position: center; background-size: cover; }
.pr{position: relative; }
.ta-c{text-align: center; }
.ta-l{text-align: left; }
.ta-r{text-align: right; }
.f-l{float: left; }
.f-r{float: right; }
.d-n{display: none; }
.d-b{display: block; }
.d-ib{display: inline-block; }
.p-r{position: relative; }
.o-h{overflow: hidden; }
.ws-n{white-space: nowrap; }
.va-m{vertical-align: middle; }
.w100p{width: 100%; }
.h100p{height: 100%; }
.wh100p{width: 100%; height: 100%; }
.tagib a,
.tagib img,
.tagib span{display: inline-block; vertical-align: middle; }
.maximgs img{max-width: 100%; }
.maximgh img{max-height: 100%; }
.mw-170{max-width: 170px; }
.mauto{display: block; margin: 0 auto; }
.to-e{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.dbox{position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; }
.dbox.active{padding-bottom: 100%; }
.dbox.active2{padding-bottom: 39%; }
.dbox.active3{padding-bottom: 137%; }
.dbox > div {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ededed; }
.dbox > iframe {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; }
.dbox img{-webkit-transition: transform .3s ease; transition: transform .3s ease; }
.dbox img:hover{-webkit-transform : scale(1.1, 1.1); transform : scale(1.1, 1.1); }
.nbox{max-width: 570px; margin: 30px auto 15px; text-align: center; font-size: 130%; color: gray; }
.nbox > div{position: relative; margin: 0 auto 30px; text-align: center; }
.nbox > div:before{content: ""; display: inline-block; vertical-align: middle; padding: 12%; border-radius: 100%; border: 3px solid #CE070E; background-color: #fff; }
.nbox > div:after{content: ""; position: absolute; left: 45%; top: 50%; border: 5px solid #CE070E; width: 10%; height: 20%; margin-top: -5%; border-top: 0; border-right: 0; transform : rotate(-45deg); }
.hover1{-webkit-transition: box-shadow .3s ease; transition: box-shadow .3s ease; }
.hover1:hover{-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.hover2:hover{color: #CE070E; text-decoration: underline; }
.trans1{-webkit-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function : ease; -ms-transition-timing-function : ease; transition-timing-function : ease; }
.color-1{color: #CE070E; }
.color-2{color: #aaa; }
#header, #nav, #wrap, #footer{-webkit-transition: transform .4s ease; transition: transform .4s ease; }
/**
 * elements
 */
.el-comment{background-color: #ededed; padding: 20px; }
.el-comment ol{padding-left: 15px; }
.el-comment li{padding-left: 10px; list-style: decimal; }
.el-ico{position: relative; display: block; width: 100%; padding-right: 40px; cursor: pointer; border: 1px solid #ccc; background-color: #fff; }
.el-ico input{width: 100%; height: 40px; line-height: 40px; padding: 0 10px; }
.el-ico a,
.el-ico button{position: absolute; top: 10px; right: 0; height: 20px; line-height: 20px; width: 50px; text-align: center; }
.el-ico i{display: inline-block; vertical-align: middle; margin: -2px 4px 0 0; font-size: 16px; color: #5a6772; }
.el-select{position: relative; display: block; min-width: 100px; height: 40px; padding: 0 10px; background-color: #fff; border: 1px solid #ccc; }
.el-select select {width: 100%; height: 100%; line-height: 36px; background-color: inherit; cursor: pointer; }
.el-select:after{content: "\f063"; position: absolute; right: 0; top: 0; bottom: 0; width: 45px; line-height: 40px; background-color: #fff; text-align: center; pointer-events: none; /*border-left: 2px solid #e0e4eb;*/ }
.el-inline{display: inline-block; vertical-align: middle; max-width: 160px; }
.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next{font-size: 30px; line-height: 44px; color: #CE070E; background-image: none; }


/**
 * footer
 */
.footer{padding: 40px 0 100px; background-color: #fff; border-top: 20px solid #D10707; }
.footer-link{font-size: 18px; font-weight: bold; }
.footer-link a:hover{color: #D10707; }
.footer-link span{display: inline-block; vertical-align: middle; margin: -3px 20px 0 ; height: 10px; border-left: 2px solid #ccc; }
.footer-copyright{margin-top: 10px; color: #aaa; font-size: 14px; }
@media (min-width: 1024px)
{
    .container{max-width: 1300px; margin: 0 auto; /*padding: 0 60px; */}
    .bg{background-attachment: fixed; }
    .lg-12{width: 100%; } .lg-11{width: 91.66666667%; } .lg-10{width: 83.33333333%; } .lg-9{width: 75%; } .lg-8{width: 66.66666667%; } .lg-7{width: 58.33333333%; } .lg-6{width: 50%; } .lg-5{width: 41.66666667%; } .lg-4{width: 33.33333333%; } .lg-3{width: 25%; } .lg-2{width: 16.66666667%; } .lg-1{width: 8.33333333%; }
    .lg-hide-lr{margin-left: 0; } .lg-hide-lr > li{padding-left: 0; }
    .lg-hide-tb{margin-top: 0; } .lg-hide-tb > li{padding-top: 0; }
    .lg-none{display: none; }
    .lg-blank:after{content: "\00a0"; }
    .lg-gap-5{margin: -5px 0 0 -5px; } .lg-gap-5 > li{padding: 5px 0 0 5px; } .lg-gap-10{margin: -10px 0 0 -10px; } .lg-gap-10 > li{padding: 10px 0 0 10px; } .lg-gap-15{margin: -15px 0 0 -15px; } .lg-gap-15 > li{padding: 15px 0 0 15px; } .lg-gap-20{margin: -20px 0 0 -20px; } .lg-gap-20 > li{padding: 20px 0 0 20px; } .lg-gap-25{margin: -25px 0 0 -25px; } .lg-gap-25 > li{padding: 25px 0 0 25px; } .lg-gap-30{margin: -30px 0 0 -30px; } .lg-gap-30 > li{padding: 30px 0 0 30px; }
    /**
     * header
     */
    .header{position: absolute; z-index: 1; top: 100px; left: 0; right: 0; }
    .header-logo,
    .header-logo img{display: block; max-width: 100%; }
    .header-search{position: relative; display: block; float: left; width: 100%; padding-right: 55px; border: 7px solid #CE070E; }
    .header-search input{width: 100%; padding: 0 20px; height: 55px; line-height: 55px; }
    .header-search button{position: absolute; top: 0; right: 0; bottom: 0; width: 55px; }
    .header-search i{font-size: 28px; color: #CE070E; }
    .header-banner a{display: inline-block; vertical-align: middle; width: 100%; max-width: 200px; max-height: 107px; }
    .header-banner img{display: inline-block; vertical-align: middle; max-width: 100%; }
    .header-btn{display: none; }
    /**
     * nav
     */
    /*.nav{background-color: #fff; }*/
    .nav{position: relative; padding-bottom: 224px; background-color: #fff; }
    .nav-title{display: none; }
    .nav-link{line-height: 45px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; font-size: 13px; }
    .nav-link a,
    .nav-link span{display: inline-block; vertical-align: middle; }
    .nav-link span{margin: -3px 5px 0; }
    .nav-link a:hover,
    .nav-link .active{color: #D10707; }
    .nav-link i{font-weight: bold; }
    .nav-link-box1{float: left; }
    .nav-link-box2{float: right; }
    /**
     * menu
     */
    /*.menu{margin-top: 160px; background-color: #D10707; color: #fff; }*/
    .menu{position: absolute; bottom: 0; left: 0; right: 0; background-color: #D10707; color: #fff; }
    .menu-fixed{position: fixed; z-index: 10; bottom: auto; top: 0; }
    .menu-main > li{position: relative; float: left; }
    .menu-main-btn{position: relative; display: block; line-height: 65px; padding: 0 30px; font-weight: 500; transition: color .3s ease; }
    .menu-main-btn:hover{color: #FFDE5F; }
    .menu-main-btn i{color: #910800; }
    .menu-main .home{display: block; width: 70px; height: 65px; line-height: 65px; background-color: #910800; text-align: center; }
    .menu-main .home i{vertical-align: middle; font-size: 25px; }
    .menu-sub{position: absolute; z-index: 6; top: 65px; width: 190px; left: 50%; margin-left: -90px; padding: 15px 0; background-color: #910800; }
    .menu-sub a{display: block; padding: 7px 20px; transition: color .3s ease; }
    .menu-sub a:hover{color: #FFDE5F; }
    /**
     * wrap
     */
    .wrap{padding: 20px 0 100px; }
    .wrap.active{padding: 20px 0 0; }
    /**
     * ad
     */
    .ad-container{max-width: 1740px; margin: 0 auto; }
    .ad-layout1,
    .ad-layout2{float: left; width: 200px; padding-bottom: 20px; }
    .ad-layout-center{float: left; max-width: 1300px; width: 100%; margin: 0 20px; }
}
/* 데스크톱 작은 단계 서포츠*/
@media (max-width: 1739px) and (min-width: 1024px)
{
    .ad-layout1,
    .ad-layout2{display: none; }
    .ad-layout-center{float: none; margin: 0 auto;}
}
@media (max-width: 1250px) and (min-width: 1024px)
{
    body{font-size: 16px; }
}
@media (max-width: 1023px) and (min-width: 640px)
{
    body{font-size: 16px; }
    .container{padding: 0 30px; }
    .layout-toggle{-webkit-transform: translateX(-400px); -ms-transform: translateX(-400px); transform: translateX(-400px); }
    .md-12{width: 100%; } .md-11{width: 91.66666667%; } .md-10{width: 83.33333333%; } .md-9{width: 75%; } .md-8{width: 66.66666667%; } .md-7{width: 58.33333333%; } .md-6{width: 50%; } .md-5{width: 41.66666667%; } .md-4{width: 33.33333333%; } .md-3{width: 25%; } .md-2{width: 16.66666667%; } .md-1{width: 8.33333333%; } .md-hide-lr{margin-left: 0; } .md-hide-lr > li{padding-left: 0; } .md-hide-tb{margin-top: 0; } .md-hide-tb > li{padding-top: 0; } .md-none{display: none; } .md-blank:after{content: "\00a0"; } .md-gap-5{margin: -5px 0 0 -5px; } .md-gap-5 > li{padding: 5px 0 0 5px; } .md-gap-10{margin: -10px 0 0 -10px; } .md-gap-10 > li{padding: 10px 0 0 10px; } .md-gap-15{margin: -15px 0 0 -15px; } .md-gap-15 > li{padding: 15px 0 0 15px; } .md-gap-20{margin: -20px 0 0 -20px; } .md-gap-20 > li{padding: 20px 0 0 20px; } .md-gap-25{margin: -25px 0 0 -25px; } .md-gap-25 > li{padding: 25px 0 0 25px; } .md-gap-30{margin: -30px 0 0 -30px; } .md-gap-30 > li{padding: 30px 0 0 30px; }
    /**
     * header
     */
    .header{position: fixed; z-index: 2; top: 0; left: 0; right: 0; height: 100px; background-color: rgba(255,255,255, 0.75); }
    .header-grp1{width: 180px; padding-top: 10px; }
    .header-grp2{float: none !important; margin-left: 220px; padding-right: 80px; }
    .header-logo,
    .header-search{margin-top: 15px; }
    .header-logo,
    .header-logo img{display: block; max-width: 100%; }
    .header-search{position: relative; display: block; float: left; width: 100%; padding-right: 55px; border: 7px solid #CE070E; }
    .header-search input{width: 100%; padding: 0 20px; height: 55px; line-height: 55px; }
    .header-search button{position: absolute; top: 0; right: 0; bottom: 0; width: 55px; background-color: #fff; }
    .header-search i{font-size: 28px; color: #CE070E; }
    .header-banner{display: none; }
    .header-btn{position: absolute; top: 0; right: 0; width: 100px; height: 100px; background-color: #910800; }
    .header-btn button {width: inherit; height: inherit; border: 0; outline: none; background-color: transparent; transition-duration: 0.5s; }
    .header-btn button div {position: absolute; width: 50%; height: 3px; top: 50%; left: 50%; margin-top: -2%; margin-left: -25%; background-color: #fff; transition-duration: 0.25s; }
    .header-btn button div:before,
    .header-btn button div:after {content: ""; position: absolute; left: 0; width: 100%; height: inherit; background-color: #fff; transition-duration: 0.25s; }
    .header-btn button div:before {top: -10px; }
    .header-btn button div:after {top: 10px; }
    .header-btn-active button {transition-duration: 1s; transform: rotate(180deg); }
    .header-btn-active button > div {transition-duration: 0.5s; background-color: transparent; }
    .header-btn-active button > div:before {top: 0; transition-duration: 0.5s; transform: rotate(45deg); }
    .header-btn-active button > div:after {top: 0; transition-duration: 0.5s; transform: rotate(-45deg); width: 100%; }
    /**
     * nav
     */
    .nav{position: fixed; z-index: 10; top: 0; bottom: 0; right: -400px; width: 400px; overflow-y: scroll; background-color: #222; color: #fff; -ms-overflow-style: none; }
    .nav::-webkit-scrollbar{display: none; }
    .nav-title{display: inline-block; vertical-align: middle; padding: 0 20px; height: 30px; line-height: 30px; margin: 0 0 20px 20px; border: 3px solid gray; color: #eee; border-radius: 30px; font-size: 1.1em; }
    .nav-link > .container{margin-top: 10px; }
    .nav-link{padding: 40px 0; background-color: #000; color: #bbb; }
    .nav-link a{float: left; padding: 3px 0; width: 50%; }
    .nav-link span{display: none; }
    .menu{padding: 40px 0; }
    .menu-main-btn{display: block; padding: 15px 0; }
    .menu-main-btn i{margin-left: 10px; color: #555; }
    .menu-sub{display: none; border-top: 4px solid #CE070E; padding: 10px 0 50px; }
    .menu-sub a{display: block; padding: 8px 0; font-size: 0.9em; }
    .menu-main .home{display: none; }
    /**
     * wrap
     */
    .wrap{padding: 100px 0 0; }
    .wrap.active{padding: 100px 0 0; }
}
@media (max-width: 639px)
{
    body{letter-spacing: -0.5px; }
    .sm-12{width: 100%; } .sm-11{width: 91.66666667%; } .sm-10{width: 83.33333333%; } .sm-9{width: 75%; } .sm-8{width: 66.66666667%; } .sm-7{width: 58.33333333%; } .sm-6{width: 50%; } .sm-5{width: 41.66666667%; } .sm-4{width: 33.33333333%; } .sm-3{width: 25%; } .sm-2{width: 16.66666667%; } .sm-1{width: 8.33333333%; } .sm-hide-lr{margin-left: 0; } .sm-hide-lr > li{padding-left: 0; } .sm-hide-tb{margin-top: 0; } .sm-hide-tb > li{padding-top: 0; } .sm-none{display: none; } .sm-blank:after{content: "\00a0"; } .sm-gap-5{margin: -5px 0 0 -5px; } .sm-gap-5 > li{padding: 5px 0 0 5px; } .sm-gap-10{margin: -10px 0 0 -10px; } .sm-gap-10 > li{padding: 10px 0 0 10px; } .sm-gap-15{margin: -15px 0 0 -15px; } .sm-gap-15 > li{padding: 15px 0 0 15px; } .sm-gap-20{margin: -20px 0 0 -20px; } .sm-gap-20 > li{padding: 20px 0 0 20px; } .sm-gap-25{margin: -25px 0 0 -25px; } .sm-gap-25 > li{padding: 25px 0 0 25px; } .sm-gap-30{margin: -30px 0 0 -30px; } .sm-gap-30 > li{padding: 30px 0 0 30px; }
    /**
     * header
     */
    .header{position: fixed; z-index: 2; top: 0; left: 0; right: 0; height: 64px; background-color: rgba(255,255,255, 0.75); }
    .header-grp1{width: 180px; padding-top: 10px; }
    .header-grp2{float: none !important; margin-left: 220px; padding-right: 80px; }
    .header-logo,
    .header-search{margin-top: 10px; }
    .header-logo,
    .header-logo img{display: block; max-width: 70%; }
    .header-search,
    .header-banner{display: none; }
    .header-btn{position: absolute; top: 0; right: 0; width: 64px; height: 64px; background-color: #910800; }
    .header-btn button {width: inherit; height: inherit; border: 0; outline: none; background-color: transparent; transition-duration: 0.5s; }
    .header-btn button div {position: absolute; width: 50%; height: 3px; top: 50%; left: 50%; margin-top: -2%; margin-left: -25%; background-color: #fff; transition-duration: 0.25s; }
    .header-btn button div:before,
    .header-btn button div:after {content: ""; position: absolute; left: 0; width: 100%; height: inherit; background-color: #fff; transition-duration: 0.25s; }
    .header-btn button div:before {top: -10px; }
    .header-btn button div:after {top: 10px; width: 80%; }
    .header-btn-active button {transition-duration: 1s; transform: rotate(180deg); }
    .header-btn-active button > div {transition-duration: 0.5s; background-color: transparent; }
    .header-btn-active button > div:before {top: 0; transition-duration: 0.5s; transform: rotate(45deg); }
    .header-btn-active button > div:after {top: 0; transition-duration: 0.5s; transform: rotate(-45deg); width: 100%; }
    /**
     * nav
     */
    .nav{position: fixed; z-index: 10; top: 0; bottom: 0; overflow-y: auto; background-color: #222; color: #fff; -ms-overflow-style: none;}
    .nav::-webkit-scrollbar{display: none; }
    .nav-title{display: inline-block; vertical-align: middle; padding: 2px 20px; margin: 0 0 10px 10px; border: 3px solid gray; color: #eee; border-radius: 30px; font-size: 1.1em; }
    .nav-link > .container{margin-top: 10px; }
    .nav-link{padding: 30px 20px; background-color: #000; color: #bbb; }
    .nav-link span{display: none; }
    .nav-link-box1 { margin-bottom: 15px; padding: 15px; text-align: center; background-color: #222222; }
    .nav-link-box1 .active{ display: block; font-size: 1.1em; font-weight: 700; color: #fff; }
    .nav-link-box2 a{float: left; padding: 3px 0; width: 50%; }


    .menu{padding: 30px 20px; }
    .menu-main-btn{display: block; padding: 15px 0; }
    .menu-main-btn i{margin-left: 10px; color: #555; }
    .menu-sub{display: none; border-top: 4px solid #CE070E; padding: 10px 0 30px; }
    .menu-sub a{display: block; padding: 8px 0; font-size: 0.9em; }
    .menu-main .home{display: none; }
    /**
     * wrap
     */
    .wrap{padding: 64px 0 0; }
    .wrap.active{padding: 64px 0 0; }
    /**
     * footer
     */
    .footer{padding: 40px 0 50px; border-top-width: 5px; }
    .footer-link{font-size: inherit; }
    .footer-link a{float: left; width: 140px; margin-bottom: 3px; }
    .footer-link span{display: none;}
}
/**
 * 모바일 헤더 서포트
 */
@media (max-width: 639px) and (min-width: 375px){
    body{font-size: 14px; }
    .container{padding: 0 15px; }
    .layout-toggle{-webkit-transform: translateX(-310px); -ms-transform: translateX(-310px); transform: translateX(-310px); }
    .nav{width: 310px; right: -310px; }
}
@media (max-width: 374px){
    body{font-size: 13px; }
    .container{padding: 0 15px; }
    .layout-toggle{-webkit-transform: translateX(-255px); -ms-transform: translateX(-255px); transform: translateX(-255px); }
    .nav{width: 255px; right: -255px; }
}