@charset "UTF-8";

/********************************************************

            리셋 / 공통 / 폰트 css  [BSJ]

********************************************************/
/*@import url(font.css);*/
@import url(layout.css);
@import url(contents.css);
@import url(aos.css);
@import url(slide.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* { font-family:"GongGothicMedium" !important; }

body,html {height:100%;}
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, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;}/*word-break:keep-all;*/ body{position:relative;color:#333} html {-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;} img,fieldset{border:0} table{border-collapse:collapse} img {vertical-align:top;max-width:100%;} em,address{font-style:normal} a {color:inherit;text-decoration:none;} strong {font-weight:500;} .tac {text-align:center;} .tal {text-align:left} .tar {text-align:right;}
body.hidden {overflow:hidden;}
#WRAP {height:100%;font-family: 'GongGothicMedium', 'Sans-serif';font-smoothing: antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: auto !important;font-weight:300;letter-spacing:-1px;word-spacing:1.2px;line-height:1.4}
/*"Malgun Gothic","AppleSDGothcNeo","AppleGothic",*/
/* SKIP */
#SKIP {position:relative;z-index:99999999999;}
#SKIP a {display:block;overflow:hidden;width:1px;height:1px;margin-bottom:-1px;background:#151c2d;font-weight:500;font-size:16px;color:#fff;white-space:nowrap;text-align:center;}
#SKIP a:focus,
#SKIP a:active {position:absolute;width:100%;height:auto;margin-bottom:10px;padding:5px;left:0;top:0;box-sizing:border-box;}
#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 1;
 background-color: #fff;
 z-index: 120;
 text-align: center;
 opacity: 0.8;
 }

#loading-image {
 position: absolute;
 top: 50%;
 left: 49%;
 width: 40px;
 z-index: 130; }


/* layout common */
.maxWidth {max-width:1227px;margin:0 auto;}
.l-table {display:table;table-layout:fixed;width:100%;height:100%;}
.l-cell {display:table-cell;vertical-align:middle;}
.inner--left {float:left;}
.inner--right {float:right !important;}
.ls0 {letter-spacing:0px}
.blind {visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
.row {font-size:0;}
.row > li {display:inline-block;vertical-align:top;position:relative;list-style:none;}
.row.col_3 {margin:-2.5% -1%;}
.row.col_3 > li {width:31.3%;margin:2.5% 1%;}
.row.col_2 {margin:-2.5% -1%;}
.row.col_2 > li {width:47.9%;margin:2.5% 1%;}
.row.col_4 {margin:-0.5% -0.5%;}
.row.col_4 > li {width:23.9%;margin:0.5% 0.5%;}
.overflow {overflow:hidden;}
@media screen and (max-width: 1257px){
    .maxWidth {margin:0 15px;}
}


input[type=text],
input[type=password],
select,
textarea {transition:all .3s ease-out;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;}

input[type=password],
input[type=text],
textarea {appearance:none;-webkit-appearance:none;-moz-appearance:none;-webkit-border-radius:0;border-radius:0;-moz-border-radius:0;resize:none;}
button,
input[type=button],
input[type=submit] { cursor: pointer; vertical-align: middle;appearance:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-webkit-border-radius:0;border-radius:0;-moz-border-radius:0;}

/* input[type=text]:hover,
input[type=text]:focus,
input[type=password]:hover,
input[type=password]:focus,
select:hover,
select:focus,
textarea:hover,
textarea:focus {border-color:#00ac84 !important;} */

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label {font-weight:300;font-size:17.98px;color:#000;}
input[type="checkbox"] + label > span {display:inline-block;width:16px;height:16px;margin:-6px 4px 0 0;vertical-align:middle;background-image:url(../../images/popup/agree_btn.png);background-position:center;cursor:pointer;}
input[type="checkbox"]:checked + label > span {background-image:url(../../images/popup/agree_btn_hover.png);}
a {color:#000;}


select { background: url(../../images/main/select.html) no-repeat 97% center; appearance:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none; -webkit-border-radius:1px;border-radius:1px;-moz-border-radius:1px;}
select::-ms-expand { display: none; }
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
select option {color:#000;}

::placeholder{color:rgba(0,0,0,.4); font:inherit}
::-webkit-input-placeholder{color:rgba(0,0,0,.4); font:inherit}
:-ms-input-placeholder{color:rgba(0,0,0,.4); font:inherit}

.mobileMenu{
	position: fixed;
	z-index:1000;
	top:20px;
	left:200px;
}


.footerInfo_list {
    position: relative;
    display: flex;
    justify-content: right;
    align-items: center;
	margin-right:150px;
	margin-top:-50px;
}

.item {
    position: relative;
    display: inline-block;
}

.viewBox {
    padding: 10px 20px;
    background-color: #f2f2f2;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.footerInfoArrow {
    width: 9px;
    height: 5px;
	margin-left:5px;
    display: inline-block;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path fill="%23000000" d="M1 0l4 4 4-4 1 1-5 5-5-5z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}


.ab_box {
    position: absolute;
    width: 400px;
    padding: 15px;
	z-index:1000;
    border-radius: 10px;
    background-color: white;
    border: 1px solid #ccc;
    top: auto;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.8); /* 초기 크기를 0.8로 줄임 */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                opacity 0.2s ease-in-out;
}

.item.rate:hover .ab_box {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1); /* 튕겨나오는 효과 */
}

.item.rate:hover .footerInfoArrow {
    transform: rotate(180deg);
}

dl {
    display: flex;
    flex-direction: column;
}

dd {
    margin: 10px 0;
}

.key {
    font-weight: bold;
	margin-top:15px
    margin-bottom: 5px;
}

.val {
	margin-top:15px
	margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}