:root {
    /* color */
    --color-base: #f2d129;
    /* font-family */
    --font-tit: 'BoldenVan';
    --font-eng: 'Bremenoff';
    --font-kor: 'Nanum Gothic', sans-serif;
}
/* ===============================================================
    * common
=============================================================== */
body {font-family: var(--font-kor); font-size: 16px; font-weight: normal; line-height: 1; color: #2e2d2b; overflow-x: hidden;}
/* font */
.fontt {font-family: var(--font-tit);}
.font1 {font-family: var(--font-eng);}
.font2 {font-family: var(--font-kor);}
.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;}
.ttu {text-transform: uppercase;} .ttc {text-transform: capitalize;} .tal {text-align: left;} .tac {text-align: center;} .tar {text-align: right;}
/* color */
.color1 {color: var(--color-base);}
.colorf {color: #fff;}
/* display */
.width-max {max-width: 1610px; width: 100%; margin: 0 auto; padding: 0 20px;}
.dpb {display: block; width: 100%; height: 100%;}
.dib {display: inline-block;}
.fl {float:left;} .fr {float:right;} .clear:after {content:''; display: block; clear:both;}
.none-pc {display: none;}
/* classed */
.bg-img {background-repeat: no-repeat; background-size: cover; background-position: center;}
.full-img {width: 100%; height: 100%; object-fit: cover;}
.wrap {padding: 130px 0; overflow: hidden;}
.tsd {text-shadow: 1px 1px 2px rgba(0,0,0,.2);}
@media (max-width: 980px){
    .none-pc {display: block;}
    .none-mo {display: none;}
    .m60 {margin-top: 60px;}
    .wrap {padding: 40px 0;}
}
/* ===============================================================
    * scroll
=============================================================== */
.scroll {position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); cursor: pointer; text-align: center;}
.scroll p {position: relative; font-size: 14px; color: #fff; margin-top: 10px;}
.scroll p:after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 1px; background: #fff;}
.cm-banner .scroll p  {padding-bottom: 50px;}
.cm-banner .scroll p:after {height: 30px;}
.full-slider .scroll p {padding-bottom: 70px;}
.full-slider .scroll p:after {height: 50px; box-shadow: 1px 1px 2px rgba(0,0,0,.2);}

/* ===============================================================
    * cm-banner
=============================================================== */
.cm-banner {position: relative; width: 100%; height: 650px;}
.cm-banner:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(46,45,43,.6);}
.cm-banner .banner-tit {position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center;}
.cm-banner .banner-tit h2 {font-size: 68px; margin-bottom: 20px;}
.cm-banner .banner-tit h3 {font-size: 16px; line-height: 24px; font-weight: normal;}
@media (max-width: 980px){
    .cm-banner {height: 200px;}
    .cm-banner .banner-tit h2 {font-size: 30px; margin-bottom: 10px;}
    .cm-banner .banner-tit h3 {font-size: 12px; line-height: 20px; opacity: 0.6;}
    .scroll {display: none;}
}
/* ===============================================================
    * sec-tit
=============================================================== */
.sub-tit {text-align: center;}
.sub-tit h2 {font-size: 28px; color: #3d3935; margin-top: 20px;}
.sub-tit .eng {font-size: 12px; line-height: 20px; color: #9c9c9c; margin: 30px 0 50px;}
.sub-tit .kor {font-size: 14px; line-height: 22px; color: #9c9c9c; margin: 20px 0 60px; font-weight: normal;}

.detail-tit {text-align: center;}
.detail-tit h2 {font-size: 28px; letter-spacing: 0.05em; color: #3d3935; margin: 15px 0 20px;}
.detail-tit .kor {font-size: 18px; font-weight: bold; color: #3d3935;}
.detail-info {width: 70%; margin: 40px auto 80px; font-size: 14px; line-height: 22px; font-weight: normal; color: #777; text-align: center;}

@media (max-width: 980px){
    .sub-tit h2 {font-size: 20px;}
    .sub-tit .eng {line-height: 12px; line-height: 16px; font-weight: 300; margin: 30px 0 40px;}
    .sub-tit .kor {font-size: 12px; line-height: 22px; margin: 15px 0; color: #9c9c9c;}

    .detail-tit h2 {font-size: 20px; margin: 30px 0 10px;}
    .detail-tit .kor {font-size: 12px;}
    .detail-info {width: calc(100% - 40px); margin: 40px auto; font-size: 12px; font-weight: normal;}

}

/* ===============================================================
    * full-slider
=============================================================== */
.full-slider {position: relative; width: 100%; height: 100vh;}
.full-tit {position: absolute; z-index: 10; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); pointer-events: none;}
.full-tit h2 {font-size: 44px;}
.full-tit h3 {font-size: 24px; margin-top: 20px;}
.full-slider .swiper-slide {width: 100%; height: 100vh;}
.full-slider .full-ctrl {position: absolute; z-index: 10; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; padding: 0 50px; display: flex; justify-content: space-between; align-items: center; pointer-events: none;}
.full-ctrl .nav-btn {position: relative; cursor: pointer; pointer-events: all; opacity: 0.5; transition: .4s;}
.full-ctrl .nav-btn:hover {opacity: 1;}
.full-ctrl span {position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 13px;}
.full-ctrl .prev span {left: 35px;}
.full-ctrl .next span {right: 35px;}
.full-pager {position: absolute; z-index: 10; left: 50%; bottom: 160px; transform: translateX(-50%); font-size: 20px; line-height: 20px; color: #fff; text-align: center;}
@media (max-width: 980px){
    .full-slider {height: auto;}
    .full-slider .swiper-slide {height: 220px;}
    .full-slider .full-ctrl {padding: 0 20px;}
    .full-ctrl .nav-btn {opacity: 1;}
    .full-pager {font-size: 12px; bottom: 20px;}
}

.btns {display: flex; justify-content: center; align-items: center;}
.btns a {position: relative; width: 152px; height: 38px; line-height: 35px; margin: 0 5px; text-align: center; font-size: 14px; border: 1px solid var(--color-base); color: var(--color-base); transition: .4s;}
.btns a:hover {background: var(--color-base); color: #fff;}


/* ===============================================================
    * parallax
=============================================================== */
.parallax {position: relative; width: 100%; height: 1000px; background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; overflow: hidden;}
.parallax .width-max {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; justify-content: flex-end; align-items: center;}
.parallax h2 {font-size: 80px; line-height: 110px; color: #fff; opacity: 0;}
.parallax h2 em {font-size: 100px;}
.parallax.show h2 {animation: reveal 1s forwards;}
@keyframes reveal {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@media (max-width: 980px){
    .parallax {height: 220px; background-attachment: initial;}
    .parallax .width-max {display: none;}
}