/* 공통적용 */
img { max-width: 100%; }
input,select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea { border: 0; border-bottom: 1px solid #ddd; padding: 15px 7px; }
select {
    padding: 15px 30px 15px 15px;
    border: 1px solid #ddd;
    background:url('/static/img/select_arrow.png') no-repeat #fff calc(100% - 10px) 50%/13px auto;

}
input::placeholder,
textarea::placeholder { color: #ccc; }
input[type="button"] { border: 1px solid #202020; max-width: 215px; padding: 15px; font-size: 0.9375rem; text-align: center; display: block; background: #333; color: #fff; transition: 0.3s ease-in-out; cursor: pointer; }
input[type="radio"] { border-radius: 10px; margin-top: -1px;}input[type="checkbox"] { margin-top: 0px; }
input[type="checkbox"],
input[type="radio"] { margin-right: 7px; border: 1px solid #ddd; background: #fff; vertical-align: middle; width: 20px; height: 20px; }
input[type="checkbox"]:checked,
input[type="radio"]:checked { border: 5px solid #333; }
label { margin-right: 20px; }
label:last-child { margin-right: 0; }

.lock_scroll { overflow: hidden; }
.inner { width: 90%; margin: 0 auto; max-width: 1600px; }
.btn_st1 { background: var(--mainGreen); border: 1px solid var(--mainGreen); display: block; color: #fff; padding: 15px; text-align: center; font-size: 1rem; }
.btn_st1:hover { background: unset; border: 1px solid var(--mainGreen); color: var(--mainGreen); transition: 0.3s ease-in-out; }
.btn_st2 { background: #333; border: 1px solid #333; display: block; color: #fff; padding: 15px; text-align: center; font-size: 1rem; }
.btn_st2:hover { background: unset; border: 1px solid #333; color: #333; transition: 0.3s ease-in-out; }
.btn_icon {background: var(--mainGreen); border-radius: 20px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; transition: all .3s; z-index: 1;}
.btn_icon:hover {background: var(--mainBlue);}
.btn_icon .icon {width: 30px; height: 30px;}
.btn_icon .icon img {width: 100%; height: 100%; object-fit: contain;}
.btn_icon .text {color: #fff; font-size: 0.9375rem; line-height: 1.2; text-align: center;}
.txtRed { color: var(--mainRed); }
.txtGrn { color: var(--mainGreen); }
.txtBold { font-weight: 700}.txtUnl { text-decoration: underline; }
.txt18 { font-size: 1.125rem;}

.btnIco {padding: 10px 15px; height: 55px; display: flex; justify-content: space-between; min-width: 100px; width: max-content; max-width: 100%; gap: 10px; align-items: center; font-size: 1rem; line-height: 1; border-radius: 10px;}
.btnIco::after {display: block; content: ""; width: 20px; aspect-ratio: 1/1; flex-shrink: 0;}

.btnIco.search {background: var(--mainGreen); color: #fff;}
.btnIco.search::after {
    background: url('/static/img/icon_search_white.png') no-repeat center center / contain;
} 

/* popup */
/* .popup { overflow: hidden; display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .5); }
.popup.on { display: block; }
.popup .popup_inner { width: 100%; height: 100%; padding: 15px; margin: 0 auto; box-sizing: border-box; position: relative; }
.popup .popup_wrap { position: absolute; width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; }
.popup .pop_tit { background: #202020; position: relative; }
.popup .pop_tit .tit { text-align: center; padding: 15px 70px; color: #fff; font-size: 1rem; font-weight: 500; }
.popup .pop_tit .close { width: 18px; position: absolute; right: 15px; top: 53%; transform: translateY(-50%)}.popup .pop_box { padding: 15px; word-break: break-all; max-height: 70vh; overflow-x: hidden; overflow-y: auto; font-size: 1rem; font-weight: 500; } */


/* padding · margin style*/
.padding_tb { padding: 120px 0; }
.padding_t { padding-top: 120px; }
.padding_b { padding-bottom: 120px; }
.margin_tb { margin: 120px 0; }
.margin_t { margin-top: 120px; }
.margin_b { margin-bottom: 120px; }


/* 게시판 형태 */
.paging { text-align: center; }
.paging a { display: inline-block; vertical-align: middle;}
.paging a img {mix-blend-mode: darken; }
.paging ol { display: inline-block; vertical-align: middle; }
.paging ol li { display: inline-block; font-size: 1rem; line-height: 1; margin: 0 2px; }
.paging ol li a {
    display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 1px solid #eee; border-radius: 50px;
    width: 40px; height: 40px; background: #fff; }
.paging ol li a.this { background: var(--mainGreen); color: #fff;}


/* floating */
#floating {position: fixed; z-index: 998; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 20px;}
#floating .fltFaq {
    background: var(--mainGreen); aspect-ratio: 1/1; width: 100px; border-radius: 100px; color: #fff;
    display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
#floating .fltFaq .icon {width: 40px; font-size: 0;}

/* popup */
.pop_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.8); z-index: 999; display: none;}
.pop_wrap.on {display: block;}
.pop_wrap .pop_inner {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.pop_wrap .layer {width: 90%; max-height: calc(100vh - 80px); height: auto; background: #fff; position: relative;}
.pop_wrap .layer > .close {
    display: block; width: 24px; height: 24px; background: url('/static/img/icon_popup_close.png') no-repeat center center / cover;
    position: absolute; right: 0; top: -30px; cursor: pointer;
}
.pop_wrap .layer .pop_box {max-height: calc(100vh - 80px); height: auto; overflow-y: auto;}




/* footer */
#footer { background: #121212; padding: 50px 0; }
#footer .footer_inner { width: 90%; max-width: 1200px; margin: 0 auto; color: #CCCCCC; display: flex; gap: 40px; }
#footer .footer_inner .name { font-size: 1.25rem; font-weight: 700; }
#footer .footer_inner .info { font-size: 0.875rem; line-height: 1.4; margin-top: 10px; }
#footer .footer_inner .info p { display: block; margin: 2px 0; }
#footer .footer_inner .copy { font-size: 0.8125rem; line-height: 1; margin-top: 20px; }


/* header */
#header {position: fixed; top:0; width: 100%; height: 100px; z-index: 998; transition: all .3s;}
#header .inner { width: calc(100% - 80px); height: 100%;} 
#header .hd_wrap { display: flex; align-items: center; justify-content: space-between; gap: 60px; width: 100%; height: 100%; } 
#header .hd_logo h1 a {display: flex; align-items: center;} 
#header .nav_wrap { display: flex; margin:0 auto; flex: 1 0 0; height: 100%; gap: 60px;} 
#header .nav { display: flex; justify-content: center; flex: 1 0 0; justify-content: flex-end;} 
#header .menu {max-width: 1000px; width: 100%; display: flex; justify-content: flex-end; gap: 60px;}
#header .menu > li {position: relative;}
#header .menu > li > a {font-size: 1.125rem; width: 100%; height: 100%; font-weight: 600; display: flex; align-items: center; justify-content: center; position: relative;  color: #000;}
#header .menu > li > a::after {
    display: block; content: ""; position: absolute; width: 0; height: 2px; background: #000;
    bottom: 28px; transition: all .3s; left: 0;
}
#header .menu > li > a:hover::after {width: 100%;}
#header .submenu {
    color: #000; background: #ededed; border-radius: 20px; padding: 15px;
    position: absolute; top:80px; left: 50%; transform: translateX(-50%); width:150px; display: none;
} 
#header .submenu a {display: block; text-align: center; font-size: 1rem; padding: 5px;}
#header .submenu a:hover {font-weight: 700;}

#header .lang {display: flex; align-items: center; position: relative;}
#header .lang > a {border: 1px solid #000; padding:10px 15px; border-radius: 100px; font-size: 0.9375rem; line-height: 1; color: #000; transition: all .3s;}
#header .lang > a::after {
    display: inline-block; content: ""; background: url('/static/img/select_arrow.png') no-repeat center center / cover; width: 10px; height: 10px; margin-left: 4px;
}
#header .lang .langmenu {
    background: #ededed; border-radius: 20px; padding: 10px;
    position: absolute; top: 75px; left: 50%; transform: translateX(-50%); display: none;
}
#header .lang .langmenu a {display: block; width: 80px; padding: 5px; color: #333; text-align: center; font-size: 0.875rem; line-height: 1;}
#header .lang .langmenu a:hover {font-weight: 700;}
#header .hamberg { display: none; } 


/* header white */
#header.white .hd_logo h1 a img {opacity: 0;}
#header.white .hd_logo h1 a {background: url('/static/img/logo_white.png') no-repeat center center / contain;}
#header.white .menu > li > a {color: #fff;}
#header.white .menu > li > a::after {background: #fff;}
#header.white .lang > a {color: #fff; border-color:#fff}
#header.white .lang > a::after {background-image: url('/static/img/select_arrow_w.png');}
#header.white .lang .langmenu {background: rgba(255,255,255,.95);}
#header.white .submenu {background: rgba(255,255,255,.95); }

/* header active */
#header.active {background: rgba(255,255,255,.8);}
#header.white.active {background: rgba(0,0,0,.8);}



/* sub */
.sub_bnn {height: 400px; overflow: hidden; background: #000; position: relative; display: flex; align-items: center; justify-content: center;}
.sub_bnn .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .5;}
.sub_bnn .bg img {width: 100%; height: 100%; object-fit: cover;}
.sub_bnn .inner {position: relative; z-index: 1; color: #fff; padding-top: 90px;}
.sub_bnn .title {text-align: center;}
.sub_bnn .title .big {font-size: 4rem; font-weight: 700;}


.sec_tit { display: flex; margin-bottom: 30px; justify-content: space-between; align-items: flex-end; }
.sec_tit .txt { font-size: 3rem; font-weight: 300; letter-spacing: -1px; }
.sec_tit .txt .bold { font-weight: 700; }



@media screen and (max-width:1199px) {

    /* header */
    #header {color:#000 }
    #header .hamberg {
        width: 32px; height: 32px; font-size: 0; flex-shrink: 0;
        display: flex;align-items: center; cursor: pointer; position: relative; z-index: 2;
    }
    #header .hamberg span {width: 100%; height: 2px; background: #000; display: block; position: relative; transition: all .3s;}
    #header .hamberg span::before,
    #header .hamberg span::after {display: block; content: ""; width: 100%; height: 2px; background: #000; position: absolute; transition: all .3s;}
    #header .hamberg span::before {top: -10px;}
    #header .hamberg span::after {top: 10px;}
    #header .hamberg span.on {background: transparent !important;}
    #header .hamberg span.on::before {top: 0; transform: rotate(-45deg); }
    #header .hamberg span.on::after {top: 0; transform: rotate(45deg); }    
    #header .lang {order: 1; height: 80px; padding:0 40px;}
    #header .lang > a {display: none;}
    #header .lang .langmenu {display: flex; align-items: center; gap: 10px; position: unset; transform: unset; padding: 0; background: transparent;}
    #header .lang .langmenu a {width: auto; padding: 5px 0; color: #767676}
    #header .lang .langmenu a.active {border-bottom: 2px solid #000; color: #000; font-weight: 700;}
    #header .nav_wrap {
        position: fixed; flex-direction: column; width: 80%; max-width: 500px; height: 100vh; top: 0; left: -500px;
        background: #fff; gap: 0; transition: all .3s; z-index: 1;
    }
    #header .nav_wrap.on {left: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 0px 20px;}
    #header .nav {order: 2; overflow-y: auto; border-top: 1px solid var(--border);}
    #header .menu {flex-direction: column; margin: 0 40px; padding-top: 60px; justify-content: flex-start; gap: 20px;}
    #header .menu > li > a {justify-content: flex-start; height: auto; padding-bottom: 10px;}
    #header .menu > li > a::after {display: none;}
    #header .submenu {
        width: 100%; position: unset; transform: unset; border-radius: 0; padding:10px 0;
        border-top: 1px solid var(--border); background: none;
    }
    #header .submenu a {text-align: left; color: #555;}

    /* header white */
    #header.white .hamberg span,
    #header.white .hamberg span::before,
    #header.white .hamberg span::after {background: #fff;}
    #header.white .menu > li > a {color: #000;}
    

}

@media screen and (max-width:899px) {
    
    .btn_icon {width: 60px; height: 60px;}
    .btn_icon .icon {width: 24px; height: 24px;}
    .btn_icon .text {font-size: 0.8125rem;}

    /* padding · margin style*/
    .padding_tb { padding: 90px 0;}
    .padding_t { padding-top: 90px;}
    .padding_b { padding-bottom: 90px;}
    .margin_tb { margin: 90px 0;}
    .margin_t { margin-top: 90px;}
    .margin_b { margin-bottom: 90px;}


    /* hedaer */
    #header {height: 60px;}
    #header .inner {width: 90%; margin: 0 auto;}
    #header .hd_logo img {height: 45px;}
    #header .hamberg {width: 24px; height: 24px;}
    #header .hamberg span::before {top: -8px;}
    #header .hamberg span::after {top: 8px;}
    #header .aside {height: 60px; padding: 0 60px 0 20px;}
    #header .menu {margin: 0 20px;}
    #header .lang {height: 60px; padding: 0 20px;}


    #footer .footer_inner {flex-direction: column; gap: 20px;}
    #footer .footer_inner .name {font-size: 1.125rem;}

    /* sub */
    .sub_bnn .inner {padding-top: 60px;}
    .sub_bnn .title .big {font-size: 3rem;}

    .sec_tit { margin-bottom: 15px;  }
    .sec_tit .txt { font-size:2rem;}

}

@media screen and (max-width:599px) {

    /* floating */
    #floating .fltFaq {width: 80px;}
    #floating .fltFaq .icon {width: 32px; font-size: 0;}
    #floating .fltFaq .text {font-size: 0.875rem;}


    /* sub */
    .sub_bnn {height: 250px;}
    .sub_bnn .title .big {font-size: 2rem;}
    
    
    /* padding · margin style*/ 
    .padding_tb { padding: 60px 0;  }
    .padding_t { padding-top: 60px;  }
    .padding_b { padding-bottom: 60px;  }
    .margin_tb { margin: 60px 0;  }
    .margin_t { margin-top: 60px;  }
    .margin_b { margin-bottom: 60px;  }

    /* header */
    #header .hd_wrap {gap: unset;}
    #header .hd_logo img {max-height: 40px; height: auto; max-width: 160px;}

    .sec_tit .txt { font-size: 1.5rem; font-weight: 500;  }

}