@charset "utf-8";

/* ==========================================================================
    Reset
   ========================================================================== */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
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;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html{scroll-behavior: smooth;}
body{-webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;}
input, textarea, select, button, fieldset, img {border: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size: 100%; line-height: normal;}
img {max-width: 100%; vertical-align:middle; -webkit-tap-highlight-color: rgba(0,0,0,0);}
legend, caption {visibility: hidden; overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after,
q::before, q::after {content: none;}
a, a:hover{color: inherit;}
a:link, a:visited, a:hover, a:active {text-decoration: none;}
select {-webkit-border-radius: 0; appearance:menulist-text;}
input[type=text], input[type=password], input[type=submit], select {-webkit-border-radius: 0; -webkit-appearance: none;}
input[type="checkbox"], input[type="radio"]{-webkit-appearance: none;}
input[type=checkbox], input[type=radio] {vertical-align: middle;}
input[type=image] {height: auto;}
input[type=file] {border: 0; background: none;}
textarea {overflow-y: auto;}
input[type="checkbox"], input[type="radio"], label{cursor:pointer}
ol, ul, li {padding: 0; margin: 0; list-style: none;}
label, select, input, button {font-family: inherit;}
input, textarea, select {color: inherit; font-family: inherit;}
table {border-collapse: collapse; border-spacing: 0;}
a, button, input, select{line-height: normal;}
button {background: none; border: 0; padding: 0; margin:0; color: inherit; text-align: left; cursor: pointer; overflow:visible; white-space:nowrap;}
iframe, video {max-width: 100%; display: block;}

/* ==========================================================================
    Variable
   ========================================================================== */
:root {
    --main-gap: 20px;
    --minus-gap: -20px;
    --main-width: 1560px;
    --basic-color: #222;
    --bg-color: #fff;
    --border-color01: #ddd;
    --border-color0101: #e4e4e4;
    --point-color01: #012e17;
    --point-color0101: #2c712f;
    --point-color02: #475067;
    --on-color: #bbb;
    --header-height: 56px;
    --topbar-height: 41px;
    --radius01: 8px;
    --radius02: 4px;

    --form-dot: #222;
    --form-border: #e7e7e7;
    --form-gray: #f6f7f9;
    --form-focus: #222;
    --form-basic: #222;
    --form-chk: #222;
    --form-fontsize : 16px;
    --form-lineheight : 22px;
    --form-fontcolor : #222;;
    --form-placeholder : #bbb;
    --form-padding : 21px;
    --form-padding1 : 14px 21px;
    --input-height: 54px;
    --input-gap: 14px;
    --input-buttonw : 120px;
    --textarea-height: 144px;
}
@media (width <= 1280px) {
    :root {
        --input-height: 48px;
    }
}
@media (width <= 1024px) {
    :root {
    }
}
@media (width <= 860px) {
    :root {
    }
}
@media (width <= 640px) {
    :root {
        --form-fontsize : 15px;
        --form-padding : 14px;
        --form-padding1 : 10px 14px;
        --input-buttonw : 80px;
    }
}
/* ==========================================================================
    Common Setting
   ========================================================================== */
html {min-width: 320px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px;}
html:lang(ko){word-break: keep-all;}
body {font-family: 'InterPretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; line-height: 1.6; color: var(--basic-color); text-rendering: optimizeLegibility; background-color: var(--bg-color); }
::selection {background: #222; color: #fff; }


/* ==========================================================================
    Button
   ========================================================================== */
.button01{display: inline-flex; justify-content: center; align-items: center; min-width: 150px; height: 54px; padding: 0 20px; border: 1px solid var(--basic-color); font-size: 16px; font-weight: bold; color: var(--basic-color); transition: .2s ease-out;}
.button01.fill,
.button01:hover{color: #fff; background: var(--basic-color);}
@media (width <= 640px) {
    .button01{min-width: 140px; height: 50px; font-size: 15px;}
}
.button02 {
    display: flex; justify-content: center; align-items: center;
    border: 1px solid var(--point-color01);
    width: 100%; height: 54px;
    font-size: 17px; font-weight: bold; color: var(--point-color01);
    padding: 0 20px; border-radius: 4px;
    & span{padding-left: 27px; background: url('/assets/site/img/common/ico_mail01.png') no-repeat 0 center / 20px auto;}
    &:hover{color: var(--bg-color); background-color: var(--basic-color);}
    &.c01{color: var(--bg-color); background-color: var(--basic-color);}
}
/* ==========================================================================
    Form
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"]{width: 100%; outline: none; vertical-align: middle; background: #fff; border: 1px solid #dbdbdb; box-sizing: border-box;}
select{width: 100%; height: 44px; padding: 0 20px 0 14px; border: 1px solid #dbdbdb;
    background: #fff url(/assets/site/img/common/form_sel_arrow.png) no-repeat calc(100% - 20px) center; vertical-align: middle;}
textarea{width: 100%; padding: 12px 14px; resize: none; border-radius: 0; background-color: #fff; border: 1px solid #dbdbdb;box-sizing: border-box;}
select:focus,
textarea:focus,
input[type=text]:focus,
input[type=password]:focus {outline: none; border: 1px solid #222;; box-shadow: none;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset !important;}
input:focus,
input:focus + label,
select:focus,
textarea:focus{border-color: #222; background-color: #fff;}
input::placeholder,
textarea::placeholder{color: #bbb;}

.form-ip{display: block; width: 100%; height: var(--input-height); border: 1px solid var(--form-border); padding: 0 var(--form-padding); font-size: var(--form-fontsize); font-weight: bold; color: var(--form-fontcolor); line-height: var(--form-lineheight); border-radius: 4px;}
.form-ip:focus{border-color: var(--form-focus);}
select.form-ip{background-image: url('../images/common/arr_select01.png'); background-repeat: no-repeat; background-position: calc(100% - 15px) center; background-size: 11px auto;}
select.form-ip option{font-weight: bold; color: #fff; background-color: var(--form-basic);}
.form-ip::-webkit-input-placeholder,
.form-ip:required:invalid{color: var(--form-placeholder);}/*placeholer*/
textarea.form-ip{height: var(--textarea-height); padding: var(--form-padding1);}
textarea.form-ip:focus{border-color: var(--form-focus)}
textarea.term-box{height: 144px; font-size: 14px; font-weight: 300; color: #999; line-height: 22px;}
.form-gray{border: 1px solid var(--form-gray); background-color: var(--form-gray)}
.form-chk01 {
    display: flex; align-items: center;
    .form-check-input{width: 22px; height: 22px; border-color: #eee; border-radius: 0; background: #fff url("/assets/site/img/common/ico_check0102.png?250319") no-repeat center / 11px auto; margin-top: 0;}
    .form-check-input:focus{box-shadow: none}
    .form-check-input:checked{border-color: var(--form-chk); background: var(--form-chk) url("/assets/site/img/common/ico_check0101.png") no-repeat center / 11px auto;}
    .form-check-label{padding-left: 8px; font-size: 15px; color: #222; line-height: 22px; user-select: none}
    .btn-term{position: relative; font-size: 15px; font-weight: bold; color: var(--form-basic); text-decoration: underline; margin-left: 7px;}
}
.anti-spam {
    display: flex;
    > img{width: var(--input-buttonw); height: var(--input-height); border-radius: 0 4px 4px 0}
    > .form-ip{flex: 1;}
}
.attachment {
    display: flex;
    > label{position: relative; display: flex; justify-content: center; align-items: center; width: var(--input-buttonw); height: var(--input-height); background: var(--form-basic); border-radius: 0 4px 4px 0;}
    > label > input{position: absolute; width: 0; height: 0; overflow: hidden; padding: 0; border: 0}
    > label span{font-size: 15px; font-weight: bold; color: #aaa}
    > .form-ip{flex: 1;}
}
/* ==========================================================================
  BOOTSTRAP & PLUGIN SETTING
   ========================================================================== */
.btn:focus,
button:focus{box-shadow: none !important; outline: none !important;}
.form-check-input:focus,
.form-control:focus,
.form-select:focus{box-shadow:none;}
.tab-pane{outline: 0;}
.accordion-button:not(.collapsed)::after{transform: rotate(-180deg);}
/*Swiper*/
.swiper{user-select: none;}
.swiper-wrapper{transition-timing-function: ease-out;}
.swiper-slide{transform: translateZ(0); backface-visibility: hidden;}
.swiper-button-next:after,
.swiper-button-prev:after{content:""}
.swiper-button-next,
.swiper-button-prev{width: 40px; height: 34px;}
.swiper-button-next{right: var(--main-gap); background: url('/assets/site/img/common/arr0102-w.png') no-repeat right center / 18px auto;}
.swiper-button-prev{left: var(--main-gap); background: url('/assets/site/img/common/arr0101-w.png') no-repeat left center / 18px auto;}
.swiper-button-prev:hover,
.swiper-button-prev:focus,
.swiper-button-next:hover,
.swiper-button-next:focus,
.swiper-pagination-bullet,
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet:focus{outline:none}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled{opacity: .5;}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal{bottom: 24px; display: flex; justify-content: center; gap: 8px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0; width: 13px; height: 13px; border: 1px solid #fff; background-color: transparent; opacity: .6;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active{background-color: #fff; opacity: 1;}
.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal{background-color: #ddd; z-index: 1}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: var(--basic-color);}
/*Aos*/
[data-aos=fade-up]{transform:translate3d(0,30px,0)}
[data-aos=fade-left]{transform:translate3d(30px,0,0)}
[data-aos=fade-right]{transform:translate3d(-30px,0,0)}

/* ==========================================================================
    Scroll bar
   ========================================================================== */
.scrollbar-custom{overflow-y: auto;}
.scrollbar-custom::-webkit-scrollbar{width:3px;}
.scrollbar-custom::-webkit-scrollbar-track{background: #eee; border-radius: 2px;}
.scrollbar-custom::-webkit-scrollbar-thumb{background: #000; border-radius: 2px;}
.scrollbar-custom:hover::-webkit-scrollbar-thumb{background: #000;}
/* ==========================================================================
    Title & Text set
   ========================================================================== */
.page-title {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end;
    padding-top: 114px; padding-bottom: 30px;
    .title {font-size: 54px; font-weight: bold; line-height: 1; text-transform: uppercase;}
    .txt-en{font-size: 15px; font-weight: 500; color: #999;}
    .btn-nav{margin-left: 35px;}
    .btn-nav > a{font-size: 18px; font-weight: bold; color: #bbb;}
    .page-subnav {
        margin-left: 37px;
        > ul{display: flex; gap: 20px;}
        > ul > li > a{font-size: 18px; font-weight: bold; color: #bbb; text-transform: uppercase; transition: .2s ease-out;}
        > ul > li > a:hover,
        > ul > li > a.on{color: var(--basic-color);}
    }
    .page-util{margin-left: auto; display: flex; gap: 30px; padding-bottom: 8px;}
    .btn-filter button{height: 100%; font-size: 13px; font-weight: bold; color: #222; padding-left: 26px; background: url('/assets/site/img/common/ico-filter01.png') no-repeat 0 center / 17px auto;}
    @media (width <= 1280px) {
        .title{font-size: 48px;}
        .btn-nav{margin-left: 20px;}
        .btn-nav > a{font-size: 17px;}
        .page-util{padding-bottom: 7px;}
    }
    @media (width <= 1024px) {
        .title{font-size: 40px;}
        .txt-en{font-size: 14px;}
        .page-util{gap: 24px; padding-bottom: 6px;}
        .page-subnav{margin-left: 24px;}
        .page-subnav > ul > li > a{font-size: 17px;}
    }
    @media (width <= 860px) {
        padding-top: 80px;
        .title{font-size: 36px;}
        .btn-nav{position: relative; top: 3px; margin-left: 14px;}
        .btn-nav > a{font-size: 16px;}
        .page-util{padding-bottom: 0; gap: 0;}
        .page-subnav{margin-left: 20px;}
        .page-subnav > ul{gap: 14px;}
    }
    @media (width <= 640px) {
        padding-top: 60px; padding-bottom: 18px;
        .title{font-size: 27px;}
        .txt-en{font-size: 13px;}
        .btn-nav{top: 4px; margin-left: 8px;}
        .btn-nav > a{font-size: 14px;}
        .page-subnav{margin-left: 16px;}
        .page-subnav > ul > li > a{font-size: 14px;}
    }
}
.page-title01 {
    display: flex; align-items: flex-end; gap: 8px;
    padding-top: 90px; padding-bottom: 67px;
    .title {font-size: 38px; font-weight: bold; line-height: 1}
    .sub-title {font-size: 16px; font-weight: bold; color: #999;}
    @media (width <= 860px) {
        padding-top: 80px; padding-bottom: 40px;
    }
    @media (width <= 640px) {
        padding-top: 51px; padding-bottom: 20px;
        .title {font-size: 27px;}
        .sub-title {font-size: 13px;}
    }
}

.tit-sec01 {
    text-align: center;
    .title{font-size: 34px; font-weight: bold; line-height: 1.45; text-transform: uppercase;}
    .txt-en{font-size: 15px; color: #999; line-height: 20px; margin-top: 3px;}
    @media (width <= 1024px) {
        .title{font-size: 30px;}
        .txt-en{font-size: 14px;}
    }
    @media (width <= 860px) {
        .title{font-size: 27px;}
        .txt-en{font-size: 13px; margin-top: 0;}
    }
}
.tit-sec02 {
    .title{font-size: 18px; font-weight: bold;}
    .title::before{content: ""; position: relative; top: 2px; display: inline-block; width: 5px; height: 17px; background-color: var(--basic-color); margin-right: 8px;}

}
.link-btn-more{text-align: center;}
.link-btn-more > a,
.link-btn-more > span{font-size: 14px; font-weight: bold; text-decoration: underline; text-underline-offset: 6px; text-transform: uppercase;}
.empty-data {
    display: flex; justify-content: center; align-items: center;
    height: 400px;
    p{font-size: 15px; color: #999; line-height: 24px; text-align: center;}
    @media (width <= 640px) {
        height: 340px;
    }
}
/* ==========================================================================
   ANIMATION
   ========================================================================== */
.scroll-bounce {
    .stick{position: relative; display: inline-block; width: 1px; height: 60px; background-color: #eae9e9; overflow: hidden;}
    .stick .bar{position: absolute; width: 100%; background-color: #000; animation: scollStickBar .7s linear infinite alternate}
    &.short {
        .stick{height: 40px;}
        .stick .bar{animation: scollStickShort .8s linear infinite alternate}
    }
}


@keyframes scollStickBar {
    from {height: 10px; transform: translateY(0%); opacity: .8;}
    to {height: 15px; transform: translateY(calc(60px - 15px)); opacity: 1;}
}
@keyframes scollStickShort {
    from {height: 10px; transform: translateY(0%); opacity: .8;}
    to {height: 15px; transform: translateY(calc(40px - 15px)); opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeUp {
    from {opacity: 0; transform: translate(0, 15%);}
    to {opacity: 1; transform: translate(0, 0);}
}

@keyframes move01 {
    from {transform: scale(1)}
    to {transform: scale(1.15)}
}
@keyframes move02 {
    from {transform: scale(1.15)}
    to {transform: scale(1)}
}

@keyframes bounce01 {
    from {translate: 0 2px; opacity: .8;}
    to {translate: 0 -2px; opacity: 1;}
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes lds-ellipsis1 {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

@keyframes lds-ellipsis3 {
    0% {transform: scale(1);}
    100% {transform: scale(0);}
}

@keyframes lds-ellipsis2 {
    0% {transform: translate(0, 0);}
    100% {transform: translate(24px, 0);}
}

/* ==========================================================================
  COMMON RESPONSIVE
   ========================================================================== */
.dsp, .p-dsp, .tl-dsp, .tp-dsp, .m-dsp, .m-dspi{display: none}
.show-mobile{display: none;}

@media only screen and (max-width: 1200px) {
    .p-dsp{display: block}
    .p-dspn{display: none;}
}

@media (width <= 1024px) {
    .tl-dsp{display: block}
    .tl-dspn{display: none;}
}

@media (width <= 860px) {
    .tp-dsp{display: block}
    .tp-dspn{display: none;}
}

@media (width <= 640px) {
    .m-dsp{display: block}
    .m-dspn{display: none;}
    .show-mobile{display: block;}
}

/* ==========================================================================
    Utility Class
   ========================================================================== */
html:has(.no-scroll) {
    scrollbar-gutter: stable;
    .no-scroll {overflow: hidden; touch-action: none;}
}
/*Screen Reader Only*/
.sr-only {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}
/* scr-none : 모바일 메뉴 사용 시, body scroll 금지 */
.scr-none {overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; /* Firefox */}
.scr-none::-webkit-scrollbar {display: none;}
[hidden] {display: none;}
.clearfix::after{ content: ''; display: block; clear: both; }
.pre-box{white-space:pre-wrap; word-break:break-all}
.fit-img{width: 100%; height: 100%; object-fit: cover}
.fit-wimg{width: 100%}
/*유튜브 반응형*/
.video-responsive{position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden;}
.video-responsive iframe{position: absolute; left: 0; top: 0; height: 100%; width: 100%;}

.text_c {text-align:center;}
.text_l {text-align:left;}
.text_r {text-align:right;}
.float_r {float:right;}
.float_l {float:left;}

.clear {clear:both !important;}
.pat0{ padding-top:0 !important;}
.pab0{ padding-bottom:0 !important;}
.mat0{ margin-top:0 !important;}
.mab0{ margin-bottom:0 !important;}

.mat5{ margin-top:5px !important;}
.mar5{ margin-right:5px !important;}
.mab5{ margin-bottom:5px !important;}
.mal5{ margin-left:5px !important;}

.mat10{ margin-top:10px !important;}
.mar10{ margin-right:10px !important;}
.mab10{ margin-bottom:10px !important;}
.mal10{ margin-left:10px !important;}

.mat20{ margin-top:20px !important;}
.mar20{ margin-right:20px !important;}
.mab20{ margin-bottom:20px !important;}
.mal20{ margin-left:20px !important;}

.mat30{ margin-top:30px !important;}
.mar30{ margin-right:30px !important;}
.mab30{ margin-bottom:30px !important;}
.mal30{ margin-left:30px !important;}

.mat40{ margin-top:40px !important;}
.mar40{ margin-right:40px !important;}
.mab40{ margin-bottom:40px !important;}
.mal40{ margin-left:40px !important;}

.mat50{ margin-top:50px !important;}
.mar50{ margin-right:50px !important;}
.mab50{ margin-bottom:50px !important;}
.mal50{ margin-left:50px !important;}

.mat60{ margin-top:60px !important;}
.mar60{ margin-right:60px !important;}
.mab60{ margin-bottom:60px !important;}
.mal60{ margin-left:60px !important;}

.mat70{ margin-top:70px !important}
.mar70{ margin-right:70px !important}
.mab70{ margin-bottom:70px !important}
.mal70{ margin-left:70px !important}

.mat80{ margin-top:80px !important}
.mar80{ margin-right:80px !important}
.mab80{ margin-bottom:80px !important}
.mal80{ margin-left:80px !important}

.mat90{ margin-top:90px !important}
.mar90{ margin-right:90px !important}
.mab90{ margin-bottom:90px !important}
.mal90{ margin-left:90px !important}

.mat100{ margin-top:100px !important}
.mar100{ margin-right:100px !important}
.mab100{ margin-bottom:100px !important}
.mal100{ margin-left:100px !important}
@media screen and (max-width:1024px){
    .mat20{ margin-top:10px !important}
    .mab20{ margin-bottom:10px !important}

    .mat30{ margin-top:15px !important}
    .mab30{ margin-bottom:15px !important}

    .mat40{ margin-top:20px !important}
    .mab40{ margin-bottom:20px !important}

    .mat50{ margin-top:20px !important}
    .mab50{ margin-bottom:20px !important}

    .mat60{ margin-top:30px !important}
    .mab60{ margin-bottom:30px !important}

    .mat70{ margin-top:35px !important}
    .mab70{ margin-bottom:35px !important}

    .mat80{ margin-top:40px !important}
    .mab80{ margin-bottom:40px !important}

    .mat90{ margin-top:45px !important}
    .mab90{ margin-bottom:45px !important}

    .mat100{ margin-top:50px !important}
    .mab100{ margin-bottom:50px !important}
}



/* 너비 */
.w100{width:100% !important;}
.w80{width:80% !important;}
.w75{width:75% !important;}
.w70{width:70% !important;}
.w65{width:65% !important;}
.w60{width:60% !important;}
.w55{width:55% !important;}
.w50{width:50% !important;}
.w45{width:45% !important;}
.w40{width:40% !important;}
.w35{width:35% !important;}
.w30{width:30% !important;}
.w25{width:25% !important;}
.w20{width:20% !important;}
.w15{width:15% !important;}
.w10{width:10% !important;}