@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1720px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}


@media all and (max-width:1719px) {	
    .inner {width:94%;}
}
@media all and (max-width:1399px) {
    .s-inner {width:94%;}
}

/* #header */
#header{height: 100px; position: fixed; top: 0; left: 0; width: 100%; z-index: 99; transition: background-color 0.3s, box-shadow 0.3s, height 0.3s;}
#header.on {background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); height: 80px;}
#header .inner{display: flex; justify-content: space-between; align-items: center; height: 100%;}
#header .inner #logo{}
#header .inner #logo a{display: block; width: 238px; height: 40px; background-image: url(/images/common/logo_w.webp); background-size: contain; background-repeat: no-repeat; background-position: left center; transition: background-image 0.3s;}
#header.on .inner #logo a {background-image: url(/images/common/logo.webp);}
#header .inner .pcGnb{position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);}
#header .inner .pcGnb > ul{display: flex; gap:70px;}
#header .inner .pcGnb > ul > li{position: relative;}
#header .inner .pcGnb > ul > li > div{}
#header .inner .pcGnb > ul > li > div > a{display: block; line-height: 100px; color:#fff; font-size: 18px; font-weight: 600;  transition: color 0.3s, line-height 0.3s;}
#header.on .inner .pcGnb > ul > li > div > a {color: #222; line-height: 80px;}
#header .inner .pcGnb > ul > li:hover > div > a{color:var(--color2);}
#header .inner .pcGnb > ul > li > ul{position: absolute; display: none; background-color: #fff; border-radius: 10px; gap:30px; width: max-content; padding: 12px 30px; top: 85px; left: 50%; transform: translateX(-50%); box-shadow: 2px 6px 8px rgba(0,0,0,0.2);}
#header.on .inner .pcGnb > ul > li > ul {top: 75px;}
#header .inner .pcGnb > ul > li > ul.boxs{gap:0px; padding: 0px 30px;}
#header .inner .pcGnb > ul > li > ul .box{padding: 20px 0;}
#header .inner .pcGnb > ul > li > ul .box + .box{padding-left: 25px; margin-left: 25px; border-left: 1px solid #eee;}
#header .inner .pcGnb > ul > li > ul .box h3{color:#222; font-size: 17px; margin-bottom: 10px;}
#header .inner .pcGnb > ul > li > ul .box h3 span{background-color: var(--color2); color:#fff; display: inline-block; font-size: 12px; padding: 1px 5px 1px; border-radius: 4px; position: relative; top: -2px; margin-left: 3px; font-weight: 500;}
#header .inner .pcGnb > ul > li > ul .box li{}
#header .inner .pcGnb > ul > li > ul .box li + li{margin-top: 10px;}
#header .inner .pcGnb > ul > li > ul .box:hover h3{color:var(--color2);}
#header .inner .pcGnb > ul > li > ul .box li:hover a{color:var(--color2);}
#header .inner .pcGnb > ul > li > ul > li{}
#header .inner .pcGnb > ul > li > ul > li > a{color:#555555; font-size: 16px; font-weight: 600;}
#header .inner .pcGnb > ul > li > ul > li:hover > a{color:var(--color2);}
#header .inner .pcGnb > ul > li > ul > li:hover > a{color:var(--color2);}
#header .inner .r_cont{}
#header .inner .r_cont .btn_box{display: flex; align-items: center; gap:10px;}
#header .inner .r_cont .btn_box a.btn{width: 114px; display: block; line-height: 42px; border-radius: 5px; font-size: 15px; font-weight: 600; text-align: center; transition: all 0.3s;}
#header .inner .r_cont .btn_box a.btn.btn1{color:var(--color1); border: 1px solid var(--color1);}
#header .inner .r_cont .btn_box a.btn.btn2{color:#fff; background: var(--color1);}
#header .inner .r_cont .btn_box a.btn.btn3{color:#fff; background: var(--color2);}
#header.on .inner .r_cont .btn_box a.btn.btn1{color:#111; border: 1px solid #ddd;}
#header.on .inner .r_cont .btn_box a.btn.btn1:hover{border-color: #222; background: #222; color: #fff;}
#header .inner .menuToggle{display: flex; flex-direction: column; height: 17px; justify-content: space-between; width: 32px; display: none; cursor: pointer;}
#header .inner .menuToggle div{ width: 100%; height: 2px; background-color: #fff; display: inline-block;}
#header.on .inner .menuToggle div{background-color: #222;}
#header .inner .menuToggle div.t{}
#header .inner .menuToggle div.m{}
#header .inner .menuToggle div.b{}

.moGnb{display: none;}
.moGnb_bg {display: none;}

@media all and (max-width:1400px) {
    #header{height: 80px;}
    #header.on{height: 70px;}
    #header .inner{flex-direction: row-reverse;}
    #header .inner #logo a{height: 32px; background-position: right center;}
    #header .inner .pcGnb{display: none;}
    #header .inner .r_cont .btn_box a.btn{line-height: 39px; width: 106px;}
    #header .inner .menuToggle{display: flex; z-index: 105;}
    #header .inner .menuToggle div{transition: all 0.3s;}
    #header.on .inner .r_cont .btn_box a.btn.btn1{color:#fff;}
    
    /* 햄버거 아이콘 X 애니메이션 */
    #header .inner .menuToggle.open div.t {transform: translateY(7.5px) rotate(45deg); background-color: #000;}
    #header .inner .menuToggle.open div.m {opacity: 0;}
    #header .inner .menuToggle.open div.b {transform: translateY(-7.5px) rotate(-45deg); background-color: #000;}

    /* 모바일 GNB 화면 우측에서 슬라이드 */
    .moGnb {
        display: block; position: fixed; top: 0; left: -100%; width: 300px; height: 100%;
        background-color: #fff; z-index: 100; transition: left 0.3s ease-in-out;
        padding-top: 40px; overflow-y: auto; box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    .moGnb.open {left: 0;}
    
    .moGnb_bg {
        display: none; position: fixed; top:0; left:0; width: 100%; height: 100%;
        background-color: rgba(0,0,0,0.5); z-index: 98; backdrop-filter: blur(2px);
        opacity: 0; transition: opacity 0.3s ease;
    }
    .moGnb_bg.open {display: block; opacity: 1;}

    /* 모바일 1차, 2차메뉴 아코디언 스타일 */
    .moGnb > ul {padding: 20px;}
    .moGnb > ul > li {border-bottom: 1px solid #f0f0f0;}
    .moGnb > ul > li > a, .moGnb > ul > li > div > a {
        display: block; padding: 18px 0; font-size: 18px; font-weight: 700; color: #222; position: relative;
    }
    .moGnb > ul > li.has_sub > a::after, .moGnb > ul > li.has_sub > div > a::after {
        content: '+'; position: absolute; right: 5px; top: 18px; font-size: 24px; font-weight: 400; color:#888; transition: transform 0.3s;
    }
    .moGnb > ul > li.on > a::after, .moGnb > ul > li.on > div > a::after {
        content: '-';
    }
    
    .moGnb > ul > li > ul {display: none; padding: 0 0 15px; font-family: 'SUIT', sans-serif;}
    .moGnb > ul > li > ul .box {padding-top: 15px;}
    .moGnb > ul > li > ul .box:first-child{padding-top: 5px;}
    .moGnb > ul > li > ul .box h3 {font-size: 15px; color: #000; margin-bottom: 10px; font-weight: 700;}
    .moGnb > ul > li > ul .box h3 span {background: var(--color2); color: #fff; font-size: 11px; padding: 1px 4px; border-radius: 3px; vertical-align: top; margin-left: 3px;}
    .moGnb > ul > li > ul .box li a {display: block; padding: 7px 0; font-size: 15px; color: #666; font-weight: 500; position:relative;}
    .moGnb > ul > li > ul > li{}
    .moGnb > ul > li > ul > li + li{margin-top: 5px;}
    #header .inner .r_cont .btn_box{position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff;gap:0px;}
    #header .inner .r_cont .btn_box a.btn{width: 100%; border: 0px !important; border-radius: 0px !important; line-height: 50px;}
    #header .inner .r_cont .btn_box a.btn.btn1{background-color:#222; color:#fff;}
}
@media all and (max-width:768px) {
    #header{height: 70px;}
    #header .inner #logo a{height: 29px;}
}

/* footer */
#footer {background-color: #222; padding: 70px 0 100px;}
#footer .inner{display: flex; justify-content: space-between;}
#footer .inner .l_cont{}
#footer .inner .l_cont .f_logo{margin-bottom: 40px;}
#footer .inner .l_cont .f_logo img{height: 40px;}
#footer .inner .l_cont .info{}
#footer .inner .l_cont .info span{display: inline-block; font-size: 16px; color:#fff; opacity: 0.6; font-weight: 400; margin-right: 35px; margin-bottom: 12px;}
#footer .inner .l_cont .copy{margin-top: 20px;}
#footer .inner .l_cont .copy span{font-size: 16px; color:#fff; opacity: 0.3; display: inline-block;}
#footer .inner .l_cont .copy span + span{margin-left: 10px;}
#footer .inner .r_cont{display: flex; flex-direction: column; justify-content: space-between;}
#footer .inner .r_cont .list{display: flex; justify-content: flex-end; gap:25px;}
#footer .inner .r_cont .list li{}
#footer .inner .r_cont .list li img{}
#footer .inner .r_cont .link{display: flex; align-items: center;}
#footer .inner .r_cont .link li{}
#footer .inner .r_cont .link li + li{margin-left: 25px;}
#footer .inner .r_cont .link li a{color:#fff; white-space: nowrap;}

@media all and (max-width:1400px) {
    #footer{padding: 60px 0 90px;}
    #footer .inner .l_cont .f_logo{margin-bottom: 35px;}
    #footer .inner .l_cont .f_logo img{height: 32px;}
    #footer .inner .l_cont .info span{ margin-right: 25px; margin-bottom: 10px;}
    #footer .inner .l_cont .copy span{font-size: 15px;}
    #footer .inner .r_cont .link li + li{margin-left: 20px;}
}
@media all and (max-width:1024px) {
    #footer{padding: 55px 0 80px;}
    #footer .inner{flex-direction: column-reverse;}
    #footer .inner .l_cont .copy{margin-top: 15px;}
    #footer .inner .r_cont{ margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1);}
    #footer .inner .r_cont .list{justify-content: flex-start; margin-bottom: 30px;}
    #footer .inner .l_cont .copy{flex-direction: column; display: flex; gap:10px;}
    #footer .inner .l_cont .copy span + span{margin-left: 0;}
}
@media all and (max-width:768px) {
    #footer{padding: 50px 0 75px;}
    #footer .inner .l_cont .f_logo{margin-bottom: 30px;}
    #footer .inner .l_cont .f_logo img{height: 29px;}
    #footer .inner .l_cont .info span{font-size: 15px; margin-right: 18px; margin-bottom: 8px;}
    #footer .inner .r_cont .link li + li{margin-left: 15px;}
    #footer .inner .r_cont .link li a{font-size: 15px;}
    #footer .inner .r_cont .list li img{height: 38px;}
}
@media all and (max-width:500px) {
    #footer{padding: 50px 0 70px;}
    #footer .inner .r_cont .link{justify-content: space-between;}
    #footer .inner .r_cont .link li + li{margin-left: 10px;}
    #footer .inner .l_cont .info span{margin-right: 12px;}
}