@charset "utf-8";
html, body, div, span, applet, object, iframe, 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, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;} a {text-decoration: none;color: inherit;} img {vertical-align: top; outline: none;}
input, select, textarea, button {appearance: none; -webkit-appearance: none; outline: none; background: none; border: 1px solid #ccc; border-radius: 0;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{background: transparent; background-clip: text; -webkit-background-clip: text;}
button {cursor: pointer; border:none; padding: 0;margin: 0;} select::-ms-expand {display: none;} ::placeholder {font-family: 'NanumBarunGothic', sans-serif; color: #aaa;}
input[type="text"], textarea {font-family: 'NanumBarunGothic', sans-serif;}
a:visited {background: none;} a:active {background: none;}
br {font-family: 'Dotum';}
* {box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
/* ===============================================================
    * common
=============================================================== */
body {font-family: 'NanumBarunGothic', sans-serif; font-size: 16px; line-height: 1; font-weight: normal; color: #8d9aa8; overflow-x: hidden;}
/* font */
.font1 {font-family: 'NanumBarunGothic', sans-serif;}
.font2 {font-family: 'Oswald', sans-serif;}
.font3 {font-family: 'Heebo', sans-serif;}
.ttu {text-transform: uppercase;} .ttc {text-transform: capitalize;} .tal {text-align: left;} .tac {text-align: center;} .tar {text-align: right;}
.thin {font-weight: 100;} .exlight {font-weight: 200;} .light {font-weight: 300;} .regular {font-weight: 400;}
.medium {font-weight: 500;} .semibold {font-weight: 600;} .bold {font-weight: 700;} .exbold {font-weight: 800;} .fblack {font-weight: 900;}
/* color */
.color1 {color: #263a4f;}
.color2 {color: #a3cc01;}
.color3 {color: #8d9aa8;}
.color4 {color: #819f0a;}
.colorw {color: #fff !important;}
.bg1 {background: #263a4f !important; color: #fff !important; border: 1px solid #263a4f !important;}
.bg2 {background: #a3cc01 !important; color: #fff !important; border: 1px solid #a3cc01 !important;}
.bg3 {background: #8d9aa8 !important; color: #fff !important; border: 1px solid #8d9aa8 !important;}
.h_bg {transition: .3s;}
.h_bg:hover {background: #a3cc01; color: #fff; border-color: #a3cc01;}
.h_ft {transition: .3s;}
.h_ft:hover {color: #af191a;}
/* display */
.width-max {max-width: 1170px; width: 100%; margin: 0 auto;}
.width-bd {position: relative; max-width: 1170px; width: 100%; margin: 0 auto; border: 1px solid rgba(150,150,150,.07); border-top: none; border-bottom: none;}
.width-bd:after, .width-bd:before {content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(150,150,150,.07);}
.width-bd:after {left: calc(100% / 3);}
.width-bd:before {left: calc(100% / 3 * 2);}
.dpb {display: block; width: 100%; height: 100%;}
.dib {display: inline-block;}
.fl {float:left;} .fr {float:right;} .clear:after {content:''; display: block; clear:both;}
/* classed style */
.full-img {width: 100%; height: 100%; object-fit: cover;}
.bg-img {background-repeat: no-repeat; background-position: center; background-size: cover;}
.boxsd {box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);}
.boxis {box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2) inset;}
.bg-dot {background: url(/img/bg/bg-dot.jpg) center / 100%;}
.btn-line {position: relative; font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: bold; text-transform: uppercase; color: #a3cc01;}
.btn-line:after {content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: #a3cc01;}
/* media query */
.none-pc {display: none;}
@media (max-width: 850px){
    .width-bd {border: none;}
    .width-bd:after, .width-bd:before {display: none;}
    .none-pc {display: block;}
    .none-mo {display: none;}
    .btn-line {font-size: 14px;}
    .btn-line:after {bottom: -3px;}
}
/* swiper reset */
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {content: '' !important;}
.swiper-button-next:after, .swiper-button-prev:after {content:'' !important;}
.swiper-button-next, .swiper-button-prev, .nav-btn {outline: none !important;}

/* ===============================================================
    * banner
=============================================================== */
.banner {position: relative; width: 100%; height: 500px;}
.banner:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.7);}
.banner .width-bd {position: relative; height: 100%; z-index: 100;}
.banner-tit {position: absolute; left: 0; bottom: 120px;}
.banner-tit h2 {font-size: 70px; color: #fff;}
.banner-tit h3 {padding-left: 114px; font-size: 18px; color: #fff; opacity: 0.7; margin-bottom: 30px;}
.banner-tit h3:after {content: ''; position: absolute; left: 0; top: 4px; width: 86px; height: 6px; background: #a3cc01;}
@media (max-width: 850px){
    .banner {margin-top: 50px; height: 211px;}
    .banner-tit {bottom: 40px; padding: 0 15px;}
    .banner-tit h2 {font-size: 40px;}
    .banner-tit h3 {padding-left: 65px; font-size: 14px; line-height: 19px; margin-bottom: 15px;}
    .banner-tit h3:after {width: 50px; height: 3px; left: 15px;}
}


/* ===============================================================
    * top slider
=============================================================== */
.top-slider {position: relative; width: 100%; height: 100vh;}
.top-container {position: relative; width: 100%; height: 100%;}
.top-slider .width-bd {position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none;}
.top-ctrl {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.top-pager {font-size: 30px; color: #fff; letter-spacing: -0.1em;}
.top-bar {width: 86px; height: 6px; margin: 50px 0;}
.top-tit h2 {font-size: 44px;}
.top-tit h3 {font-size: 18px; margin: 20px 0 70px;}
.top-nav {display: flex; justify-content: flex-start; align-items: center; font-size: 50px; color: #fff; pointer-events: all; outline: none !important;}
.top-nav i {cursor: pointer; padding-right: 10px;}
.top-slider span.colorw {position: absolute; z-index: 1; left: 50%; bottom: 35px; transform: translateX(-50%); font-size: 30px;}
@media (max-width: 850px){
    .top-slider {height: 211px; margin-top: 50px;}
    .top-slider .width-bd {position: static; transform: none; padding: 15px;}
    .top-ctrl {position: static; transform: none; display: flex; justify-content: flex-start; align-items: center;}
    .top-pager {font-size: 20px; color: #8d9aa8; width: auto;}
    .top-pager .swiper-pagination-current {color: #263a4f;}
    .top-bar {display: inline-block; width: 43px; height: 3px; margin: 0 0 0 10px;}
    .top-nav {margin-left: auto; color: #263a4f; font-size: 30px;}
    .top-nav i {padding: 0 0 0 10px;}
    .top-nav .swiper-button-disabled {color: #8d9aa8;}
}