@charset "utf-8";

/*-------------------------------------------------------------------
적용영역 : 전체영역
속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
최종변경일 : 2025.04.07
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
분류이름 : 건너뛰기
분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#skip {display: block; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; background-color: #1D1D1D; font-size: 1.6rem; text-align: center;}
#skip > a:not(:focus) {overflow: hidden; position: absolute; top: -10000px; left: 0; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
#skip > a:focus {display: block; width: 100%; height: 4rem; line-height: 4rem; font-weight: 400; color: #ffffff; outline: 2px solid #ffffff; outline-offset: -0.3em;}

/*-------------------------------------------------------------------
분류이름 : Common
분류그룹 : 레이아웃
-------------------------------------------------------------------*/
html,body {height:100%;}
body.open-modal {overflow: hidden; height: 100%;}
body.open-sitemap,
body.open-mobile {overflow: hidden; height: 100%;}

#wrap {overflow: hidden; position: relative; min-height: 100%; background: #fff;}
.inner {width:100%; max-width: 141rem; margin:0 auto;}

#container {display: block; position: relative;}

.thumb{position:relative;overflow:hidden;border-radius:.6rem}
.thumb img{width:100%;height:100%;object-fit:cover;vertical-align:top;transition:all .3s}
a:hover .thumb img,
a:focus .thumb img{transform:scale(1.1)}
.thumb.video:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:8.3rem;height:8.8rem;background:url(../../../images/site/kor/common/img_play_btn.png) center no-repeat;z-index:1;background-size:contain}
.swiper-slide a{display:block}
.swiper .controls > button.con_btn,
.swiper + .controls > button.con_btn{display:none}
.swiper .controls > button.con_btn.active,
.swiper + .controls > button.con_btn.active{display:block}

/* 언어변경 버튼 */
.btn-lang {display: flex; height: 4.2rem; padding: 0 var(--sp-12); border: 1px solid var(--color-gray-30); border-radius: 999px; background-color: #fff; font-weight: 500; font-size: 1.6rem; color: var(--color-gray-60); align-items: center;}
.btn-lang::before {content:""; display: block; width: var(--sp-20); height: var(--sp-20); margin-right: var(--sp-04); background: url(../../../images/common/i_lang.svg) no-repeat center / contain;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
.btn-lang {transition: border 0.3s, color 0.3s;}
.btn-lang:focus-visible,
.btn-lang:hover {border-color: var(--color-main); color: var(--color-main);}
.btn-lang::before {transition: background 0.3s;}
.btn-lang:focus-visible:before,
.btn-lang:hover:before {background-image: url(../../../images/common/i_lang_active.svg);}



/*-------------------------------------------------------------------
분류이름 : 상단배너
분류그룹 : 레이아웃
-------------------------------------------------------------------*/
.top_banner{display:none;position:relative;overflow:hidden;z-index:9}
.top_banner.active{display:block}
.top_banner .swiper-slide{display:flex;justify-content:center;align-items:center;height:13.9rem;background-size:cover;background-position:center;background-repeat:no-repeat}
.top_banner .swiper-slide img{vertical-align:middle}
.top_banner .top_slide{height:13.9rem}
.top_banner .top_slide .controls button{position:absolute;top:50%;left:4rem;width:5rem;height:5rem;background:rgba(0,0,0,.5);border-radius:50%;transform:translateY(-50%);z-index:1}
.top_banner .top_slide .controls button:before{content:"";position:absolute;left:50%;top:50%;width:1.3rem;height:2rem;background:url(../../../images/site/kor/common/icon_prev_arrow.svg) center no-repeat;background-size:contain;transform:translate(-50%, -50%)}
.top_banner .top_slide .controls button.next{left:auto;right:4rem}
.top_banner .top_slide .controls button.next:before{background-image:url(../../../images/site/kor/common/icon_next_arrow.svg)}
/* .top_banner .swiper-slide .type-mo{display:none} */

/*-------------------------------------------------------------------
분류이름 : Header
분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#header .header-wrap {position:relative;display: block;width: 100%; background-color: #fff;z-index:22}
#header .header-wrap::after {content:""; position: absolute; bottom: 0; left: 0; width: 100%; z-index: -1; border-bottom: 1px solid var(--color-gray-30);}

#header .header-top {display: block; background-color:#125a9b}
#header .header-top:after{content:"";display:block;clear:both}
#header .header-top .banner_open {float:right;display:flex;align-items:center;height:var(--sp-40);padding:0 1.8rem;color:#fff;font-size:1.8rem;background:#00274b;font-weight:500}
#header .header-top .banner_open:after{content:"";position:relative;top:-.1rem; display:inline-block;vertical-align:middle;margin-left:1.4rem;width:1.4rem;height:.8rem;background:url(../../../images/site/kor/common/icon_top_arrow.svg) center no-repeat}
#header .header-top .banner_open.on:after{width:1.4rem;height:1.4rem;background:url(../../../images/site/kor/common/icon_close.svg) center no-repeat}

#header .header-top .inner .link {display: block;}
#header .header-top .inner .quick {display: flex; margin-left: auto; align-items: center;}
#header .header-top .inner .quick > li {display: block; position: relative;}
#header .header-top .inner .quick > li + li {margin-left: var(--sp-20); padding-left: var(--sp-20);}
#header .header-top .inner .quick > li + li::before {content:""; position: absolute; top: calc(50% - 0.6rem); left: 0; width: 1px; height: 1.2rem; background-color: var(--color-gray-30);}
#header .header-top .inner .quick > li .btn-quick {display: block; font-weight: 500; font-size: var(--fz-label-sm);}

#header .header-in {position:relative;display: flex; margin: 0 auto; height:12rem; align-items: center; justify-content: space-between;background:#fff}
#header .header-in #logo {position:absolute;left:4rem;top:50%;transform:translateY(-50%)}
#header .header-in #logo > a {display: block; height: 6rem;}
#header .header-in #logo > a > img {display: block; width: auto; height: 100%;}

#header .header-in #utils {display: flex; height: 100%; margin-left: auto; align-items: center; flex-shrink: 0;}
#header .header-in #utils .btn-sitemap{position:absolute;right:4rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.2rem;background:url(../../../images/site/kor/common/icon_menu.svg) center no-repeat;background-size:contain}
#header .header-in #utils .btn-login{
    position: absolute; top: 50%; right: 9.4rem; width: auto; height: auto; font-weight: 700; color: #151515;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    -webkit-transition: all 0.3s; transition: all 0.3s;
}
#header .header-in #utils .btn-login:hover{color: var(--color-main);}
#header .header-in #utils .btn-sitemap.type-mobile
#header .header-in #utils > .list {display: flex; align-items: center;}
#header .header-in #utils > .list > li {display: block;}
#header .header-in #utils > .list > li + li {margin-left: var(--sp-16);}
#header .header-in #utils > .list > li .btn-sitemap {display: block; position: relative; width: 4.2rem; height: 4.2rem; border-radius: var(--sp-04); background-color: var(--color-main);}
#header .header-in #utils > .list > li .btn-sitemap::before {content: ""; position: absolute; top: calc(50% - 0.8rem); right: 1rem; width: 2.2rem; height: 1.6rem; border-width: 2px 0; border-style: solid; border-color: #fff;}
#header .header-in #utils > .list > li .btn-sitemap::after {content: ""; position: absolute; top: calc(50% - 0.1rem); right: 1rem; width: 2.2rem; height: 0.2rem; background-color: #fff;}
.fixed #header  .header-in {position:fixed;left:0;top:0;width:100%;transform: translateY(0);box-shadow:0 0 1rem rgba(0,0,0,.1)}
.fixed #header .header-in #gnb{box-shadow:0 0 1rem rgba(0,0,0,.1)}
.fixed #container{margin-top:12rem}

/*-------------------------------------------------------------------
@variation
-------------------------------------------------------------------*/
#header .header-in #utils .btn-sitemap {display: block;}
#header .header-in #utils .btn-sitemap.type-mobile {display: none;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
/* scroll down */
@media screen and (min-width: 601px) {
    #header .header-wrap {transition: transform 0.4s;}
}

#header .header-in #utils > .list > li .btn-sitemap::after {transition: width 0.3s, background 0.3s;}
#header .header-in #utils > .list > li .btn-sitemap:focus-visible::after,
#header .header-in #utils > .list > li .btn-sitemap:hover::after {width: 2.2rem;}


/*-------------------------------------------------------------------
분류이름 : GNB
분류그룹 : Header
-------------------------------------------------------------------*/
#header::before{visibility:hidden;opacity:0;content:"";position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:21;backdrop-filter:blur(20px);opacity:0;transition:all .3s}
#header.gnb_on::before{visibility:visible;opacity:1}
#header .header-in #gnb {display: block; width: 100%; padding: 0 var(--sp-32); align-items: center;color:#151515}
#header .header-in #gnb .bg {position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff;}
/* depth01 */
#header .header-in #gnb .depth-01 {display: flex; justify-content: center;padding:0 14rem 0 28rem}
#header .header-in #gnb .depth-01 > li {display: block;}
#header .header-in #gnb .depth-01 > li .menu-01 {display:flex;align-items:center;justify-content:center;height:12rem;padding: 0 4.5rem; font-weight: 700; font-size: var(--fz-title-lg); color:#151515;font-family:"gmarket"}

/* depth02 */
#header .header-in #gnb .depth-01 > li .sub {display: flex; position: absolute; top: 100%; left: 0; z-index: 99; width: 100%; height: auto;overflow:hidden;padding: 0 calc((100% - 140rem) / 2); background-color: #fff; box-shadow: 0 10px 10px 0 rgba(0,0,0,0.05);border-top:1px solid #ddd}
#header .header-in #gnb .depth-01 > li .sub .info {display: block; position: relative; width: 25rem; padding:3rem 6.5rem 0 0; border-right: 1px solid #eee; flex-shrink: 0;}
#header .header-in #gnb .depth-01 > li .sub .info::before {content:"";position:absolute;right:0;top:0;width:100vw;height:100%;background:#fafafa}
#header .header-in #gnb .depth-02 > li:first-child::before {content:"";position :absolute;top:0;right:25%;height:100%;margin-left:-1px;border-left:1px solid #eee}
#header .header-in #gnb .depth-01 > li .sub .info .tit {display: block; position: relative; font-weight: 700; font-size:2.1rem; line-height: 1.2;font-family:'gmarket','Pretendard';z-index:1}
#header .header-in #gnb .depth-02 {display: flex; position: relative;padding:1rem 0;flex-grow: 1; flex-wrap: wrap;border-right:1px solid #eee}
#header .header-in #gnb .depth-02:before,
#header .header-in #gnb .depth-02:after{content:"";position:absolute;left:25%;top:0;height:100%;margin-left:-1px;border-left:1px solid #eee}
#header .header-in #gnb .depth-02:after{left:50%}
#header .header-in #gnb .depth-02 > li{display: block; width: 25%; padding:2rem 0}
#header .header-in #gnb .depth-02 > li .menu-02 {display: flex; position: relative;padding-left:2rem;font-weight:700; font-size: 1.8rem; align-items: center; justify-content: flex-start}
#header .header-in #gnb .depth-02 > li .menu-02:before{content:"";position:absolute;left:0;top:.2rem;height:2rem;width:2px;background:#125A9B}

/* depth03 */
#header .header-in #gnb .depth-03 {display: block; margin-top: var(--sp-08); padding-left: var(--sp-20);}
#header .header-in #gnb .depth-03 > li {width: 100%;}
#header .header-in #gnb .depth-03 > li .menu-03 {display: flex; position: relative; width: 100%; padding:.4rem 0 .4rem 1.2rem; font-size: 1.6rem; color:#151515; align-items: center;}
#header .header-in #gnb .depth-03 > li .menu-03::before {content:'-'; position: absolute; top:.4rem; left: 0}
#header .header-in #gnb .depth-03 > li .menu-03 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}

/*-------------------------------------------------------------------
@variation
-------------------------------------------------------------------*/
#header .header-in #gnb .depth-02 > li .menu-02[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#header .header-in #gnb .depth-03 > li .menu-03[target="_blank"]::after {content:""; display: block; width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
/* 1depth */
#header .header-in #gnb .depth-01 > li .menu-01 {transition: color 0.3s;}
#header .header-in #gnb .depth-01 > li .menu-01:focus-visible,
#header .header-in #gnb .depth-01 > li .menu-01:hover,
#header .header-in #gnb .depth-01 > li.active .menu-01,
#header .header-in #gnb .depth-01 > li[data-open="on"] .menu-01 {color: var(--color-main);}
#header .header-in #gnb .depth-01 > li .menu-01 > span::before {transition: width 0.3s;}
#header .header-in #gnb .depth-01 > li .menu-01:focus-visible > span::before,
#header .header-in #gnb .depth-01 > li .menu-01:hover > span::before,
#header .header-in #gnb .depth-01 > li[data-open="on"] .menu-01 > span::before,
#header .header-in #gnb .depth-01 > li.active .menu-01 > span::before {width: calc(100% + 1.6rem);}

#header .header-in #gnb .depth-01 > li .sub {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s;}
#header .header-in #gnb .depth-01 > li[data-open="on"] .sub {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.3s;}
/* 2depth */
#header .header-in #gnb .depth-02 > li .menu-02 {transition:color 0.3s;font-size:1.8rem;font-weight:700}
#header .header-in #gnb .depth-02 > li:focus-within .menu-02,
#header .header-in #gnb .depth-02 > li:hover .menu-02 {color:var(--color-main)}

#header .header-in #gnb .depth-02 > li .menu-02::before {transition: background 0.3s;}
/* #header .header-in #gnb .depth-02 > li:focus-within .menu-02::before,
#header .header-in #gnb .depth-02 > li:hover .menu-02::before,
#header .header-in #gnb .depth-02 > li .menu-02:focus-visible::before,
#header .header-in #gnb .depth-02 > li .menu-02:hover::before {background-image: url(../../../images/common/i_arr_down_white.svg);} */
/* 3depth */
#header .header-in #gnb .depth-03 > li .menu-03 {transition: color 0.3s}
#header .header-in #gnb .depth-03 > li .menu-03:focus-visible,
#header .header-in #gnb .depth-03 > li .menu-03:hover {color: var(--color-main);text-decoration:underline}

/* accesibility */
#header .header-in #gnb .depth-01 > li .menu-01:focus-visible {outline: 2px dashed #000; outline-offset: -0.4rem;}


/*-------------------------------------------------------------------
분류이름 : 전체메뉴 영역
분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#menuWrap {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#menuWrap.active {visibility: visible; transition: visibility 0s 0s;}
#menuWrap::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}
#menuWrap.active::before {background-color: rgba(0,0,0,0.6);backdrop-filter:blur(20px)}

#menuWrap .btn-menu-close {display: block; position: relative; width: 4.2rem; height: 4.2rem; border-radius: var(--sp-04); cursor: pointer;}
#menuWrap .btn-menu-close::before,
#menuWrap .btn-menu-close::after {content: ""; position: absolute; top: 50%; left: 25%; width: 50%; height: 2px; border-radius: 2px; background-color: #fff;}
#menuWrap .btn-menu-close::before {transform: translateY(-50%) rotate(45deg);}
#menuWrap .btn-menu-close::after {transform: translateY(-50%) rotate(-45deg);}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#sitemap .btn-sitemap-close::before,
#sitemap .btn-sitemap-close::after {transition: transform 0.3s;}
#sitemap .btn-sitemap-close:hover::before {transform: translateY(-50%) rotate(30deg);}
#sitemap .btn-sitemap-close:hover::after {transform: translateY(-50%) rotate(-30deg);}


/*-------------------------------------------------------------------
분류이름 : 사이트맵
분류그룹 : 전체메뉴 영역
-------------------------------------------------------------------*/
#sitemap {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff;}
#sitemap::before {content:""; opacity: 0.05; position: absolute; bottom: 0; right: -2rem; width: 25.5rem; height: 18rem; background: url(../../../images/common/bg_logo.svg) no-repeat right bottom / contain;}
#sitemap .content-wrap {display: flex; position: relative; position: relative; max-width: 140rem; height: 100%; margin: 0 auto; flex-direction: column;}
#sitemap .content-wrap .con-head {display: block; border-bottom: 2px solid var(--color-gray-90); padding-top: var(--sp-64); padding-bottom: var(--sp-32); flex-shrink: 0;}
#sitemap .content-wrap .con-body {display: block; overflow-x: hidden; overflow-y: auto; height: 100%; padding: var(--sp-24) 0; flex-grow: 1;}

#sitemap .content-wrap .depth-01 {display: block;}
#sitemap .content-wrap .depth-01 > li {display: flex; padding: var(--sp-32) 0; border-top: 1px solid var(--color-gray-30); align-items: flex-start;}
#sitemap .content-wrap .depth-01 > li:first-child {padding-top: 0; border-top: 0;}
#sitemap .content-wrap .depth-01 > li .menu-01 {display: block; width: 28rem; margin-bottom: auto; font-weight: 700; font-size: var(--sp-32); flex-shrink: 0;}
#sitemap .content-wrap .depth-01 > li .menu-01 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
#sitemap .content-wrap .depth-01 > li .sub {display: block; min-width: 0; flex-grow: 1;}
#sitemap .content-wrap .depth-01 > li .sub .info {display: none;}
/* depth02 */
#sitemap .content-wrap .depth-02 {display: flex; position: relative; gap: var(--sp-24) 0; flex-grow: 1; flex-wrap: wrap;}
#sitemap .content-wrap .depth-02 > li {display: block; width: 25%; padding: 0 var(--sp-12);}
#sitemap .content-wrap .depth-02 > li .menu-02 {display: flex; position: relative; min-height: var(--sp-52); padding: var(--sp-04) var(--sp-20); border: 1px solid var(--color-gray-30); border-radius: var(--sp-04); background-color: #fff; font-weight: 600; font-size: 1.9rem; align-items: center; justify-content: flex-start;}
#sitemap .content-wrap .depth-02 > li .menu-02 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
/* depth03 */
#sitemap .content-wrap .depth-03 {display: block; margin-top: var(--sp-08); padding-left: var(--sp-08);}
#sitemap .content-wrap .depth-03 > li {width: 100%;}
#sitemap .content-wrap .depth-03 > li .menu-03 {display: flex; position: relative; width: 100%; padding: var(--sp-04) var(--sp-08); font-weight: 500; font-size: 1.5rem; color: var(--color-gray-70); align-items: center;}
#sitemap .content-wrap .depth-03 > li .menu-03::before {content:''; position: absolute; top: calc(0.75em + 1px); left: 0; width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-gray-70);}
#sitemap .content-wrap .depth-03 > li .menu-03 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}

#sitemap .btn-menu-close {position: absolute; top: var(--sp-64); right: 0;}

/*-------------------------------------------------------------------
@variation
-------------------------------------------------------------------*/
/* 외부링크 */
#sitemap .content-wrap .depth-01 > li .menu-01[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#sitemap .content-wrap .depth-02 > li .menu-02[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#sitemap .content-wrap .depth-03 > li .menu-03[target="_blank"]::after {content:""; display: block; width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#sitemap {opacity: 0; transition: opacity 0.4s;}
#sitemap.on {opacity: 1;}

/* 1depth */
#sitemap .content-wrap .depth-01 > li .menu-01 > span::before {transition: width 0.3s;}
#sitemap .content-wrap .depth-01 > li .menu-01:focus-visible > span::before,
#sitemap .content-wrap .depth-01 > li .menu-01:hover > span::before,
#sitemap .content-wrap .depth-01 > li[data-open="on"] .menu-01 > span::before {width: 100%;}
/* 2depth */
#sitemap .content-wrap .depth-02 > li .menu-02 {transition: border 0.3s, background-color 0.3s, color 0.3s}
#sitemap .content-wrap .depth-02 > li:focus-within .menu-02,
#sitemap .content-wrap .depth-02 > li:hover .menu-02 {border-color: var(--color-main); background-color: var(--color-main); color: #fff;}
#sitemap .content-wrap .depth-02 > li .menu-02:focus-visible,
#sitemap .content-wrap .depth-02 > li .menu-02:hover {color: #fff; text-decoration: underline;}

#sitemap .content-wrap .depth-02 > li .menu-02::before {transition: background 0.3s;}
#sitemap .content-wrap .depth-02 > li:focus-within .menu-02::before,
#sitemap .content-wrap .depth-02 > li:hover .menu-02::before,
#sitemap .content-wrap .depth-02 > li .menu-02:focus-visible::before,

/* 3depth */
#sitemap .content-wrap .depth-03 > li .menu-03 {transition: color 0.3s}
#sitemap .content-wrap .depth-03 > li .menu-03:focus-visible,
#sitemap .content-wrap .depth-03 > li .menu-03:hover {color: var(--color-main); text-decoration: underline;}
#sitemap .content-wrap .depth-03 > li .menu-03::before {transition: color 0.3s;}
#sitemap .content-wrap .depth-03 > li .menu-03:focus-visible::before,
#sitemap .content-wrap .depth-03 > li .menu-03:hover::before {background-color: var(--color-main);}

/* accessbility */
#sitemap .content-wrap .depth-01 > li .menu-01:focus-visible {outline: 2px dashed var(--color-main); outline-offset: -2px;}
#sitemap .content-wrap .depth-02 > li .menu-02 :focus-visible {outline: 2px dashed var(--color-main); outline-offset: -4px;}


/*-------------------------------------------------------------------
분류이름 : 모바일 메뉴
분류그룹 : 전체메뉴 영역
-------------------------------------------------------------------*/
#mobileMenu {display: none; position: absolute; top:0; right: -100%; z-index: 100; width: 60%; height: 100%; background-color: #ffffff; flex-direction: column;z-index:99}
#mobileMenu .con-head {display: block; position: relative; z-index: 1; background-color: #ffffff;}
#mobileMenu .con-head .head-top {display: flex; height: var(--sp-80); padding-left: var(--sp-20); padding-right: 7rem; align-items: center; justify-content: space-between;border-bottom:1px solid #333}
#mobileMenu .con-head .head-top .logo {display: block; height: var(--sp-32);}
#mobileMenu .con-head .head-top .logo > img {display: block; height: 100%;}
#mobileMenu .con-head .head-top .utils {display: flex; align-items: center;}

#mobileMenu .con-head .head-quick {display: none; border-bottom: 1px solid var(--color-gray-30);}
#mobileMenu .con-head .head-quick .btn-related {display: flex; min-height: var(--sp-40); padding: 0 var(--sp-20); background-color: var(--color-main-70); font-weight: 600; font-size: var(--fz-label-sm); color: #fff; align-items: center;}
#mobileMenu .con-head .head-quick .btn-related::after {content: ""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: auto; background: url(../../../images/common/i_blank_white.svg) center / contain;}
#mobileMenu .con-head .head-quick .list {display: flex;}
#mobileMenu .con-head .head-quick .list > li {display: block; position: relative; flex-grow: 1; flex-basis: 0;}
#mobileMenu .con-head .head-quick .list > li + li::after {content:""; position: absolute; top: 0; left: 0; z-index: 1; width: 1px; height: 100%; background-color: var(--color-gray-30);}
#mobileMenu .con-head .head-quick .list > li .btn-quick {display: flex; width: 100%; height: var(--sp-40); padding: var(--sp-04); font-weight: 600; font-size: var(--fz-label-sm); color: var(--color-gray-80); word-break: keep-all; overflow-wrap: break-word; align-items: center; justify-content: center;}
#mobileMenu .con-head .head-quick .list > li .btn-quick > span {display: block; position: relative;}
#mobileMenu .con-head .head-quick .list > li .btn-quick > span::before {content:""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--color-main); transform: translateX(-50%);}
/* 닫기 */
#mobileMenu .btn-menu-close {position: absolute; top: 1.9rem; right: var(--sp-20); z-index: 10;width:3rem;height:3rem}
#mobileMenu .btn-menu-close::before,
#mobileMenu .btn-menu-close::after {content: ""; position: absolute; top: 50%; left: 25%; width:60%; height: 2px; border-radius: 2px; background-color: #000;}
#mobileMenu .btn-menu-close::before {transform: translateY(-50%) rotate(45deg);}
#mobileMenu .btn-menu-close::after {transform: translateY(-50%) rotate(-45deg);}

/*-------------------------------------------------------------------
@variation
-------------------------------------------------------------------*/
#mobileMenu .con-head .head-quick .list > li .btn-quick.login::before {background-image: url(../../../images/common/i_login_gray.svg);}
#mobileMenu .con-head .head-quick .list > li .btn-quick.logout::before {background-image: url(../../../images/common/i_logout_gray.svg);}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#mobileMenu {opacity: 0; transition: right 0.4s, opacity 0.4s;}
#mobileMenu.on {opacity: 1; right: 0;}

#mobileMenu .con-head .head-quick .list > li .btn-quick {transition: color 0.3s;}
#mobileMenu .con-head .head-quick .list > li .btn-quick:focus-visible,
#mobileMenu .con-head .head-quick .list > li .btn-quick:hover {color: var(--color-main);}
#mobileMenu .con-head .head-quick .list > li .btn-quick > span::before {transition: width 0.3s;}
#mobileMenu .con-head .head-quick .list > li .btn-quick:focus-visible > span::before,
#mobileMenu .con-head .head-quick .list > li .btn-quick:hover > span::before {width: 100%;}

/* accessibility */
#mobileMenu .con-head .head-quick .list > li .btn-quick:focus-visible {outline: 2px solid var(--color-main); outline-color: #fff;}


/*-------------------------------------------------------------------
분류이름: 메뉴 구조
분류그룹: 모바일 메뉴
-------------------------------------------------------------------*/
#mobileMenu .con-body {display: block; overflow-x: hidden; overflow-y: auto; position: relative; flex-grow: 1;}
/* 1depth */
#mobileMenu .con-body .depth-01 {display:block; position: relative; padding-left:var(--sp-20);}
#mobileMenu .con-body .depth-01 > li > .menu-01 {display: flex; position: relative; z-index: 9;min-height: var(--sp-52); padding: var(--sp-12) var(--sp-16) var(--sp-08) 0; background-color: transparent; font-weight: 600; font-size:1.7rem; color:#151515; word-break: break-all; align-items: center;font-family:'gmarket','Pretendard';border-bottom:1px solid #ddd}
#mobileMenu .con-body .depth-01 > li > .menu-01::after{content:"";position:absolute;right:2rem;top:50%;width:13px;height:13px;background:url(../../../images/site/kor/common/icon_moMenu_arrow.svg) center no-repeat;transform:translateY(-50%);transform-origin:center top;transition:all .3s}
#mobileMenu .con-body .depth-01 > li.active > .menu-01{border-color:var(--color-main)}
#mobileMenu .con-body .depth-01 > li.active > .menu-01::after{transform:rotate(-180deg) translateY(-50%)}
#mobileMenu .con-body .depth-01 > li > .menu-01 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
/* 2depth */
#mobileMenu .con-body .depth-01 > li .sub {position:relative;width: 100%;}
#mobileMenu .con-body .depth-01 > li .sub .info {display: none;}
#mobileMenu .con-body .depth-02 {visibility:hidden;overflow:hidden;height:0;padding:0 0 0 var(--sp-20); background-color: #F6F6F6;transition:all .3s}
#mobileMenu .con-body .active .depth-02 {visibility:visible;height:auto;padding:var(--sp-16) 0 var(--sp-16) var(--sp-20);}
#mobileMenu .con-body .depth-02 > li .menu-02 {display: flex; position: relative;padding:var(--sp-04) 0 var(--sp-04) var(--sp-12);color:#151515; font-weight: 500; font-size: 1.6rem; align-items: center;}
#mobileMenu .con-body .depth-02 > li .menu-02:before {content:"•";position:absolute;left:0;top:.9rem;line-height:1}
#mobileMenu .con-body .depth-02 > li .menu-02 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}
/* 3depth */
#mobileMenu .con-body .depth-03 {padding-left:1.4rem}
#mobileMenu .con-body .depth-03 > li {display: block;}
#mobileMenu .con-body .depth-03 > li .menu-03 {display: flex; position:relative; padding: var(--sp-04) var(--sp-08) var(--sp-04) calc(var(--sp-04) + 0.6em); font-weight: 500; font-size: 1.5rem; color: var(--color-gray-70); align-items: center;}
#mobileMenu .con-body .depth-03 > li .menu-03::before {content: "-"; display: block; position: absolute; top: var(--sp-04); left: 0; min-width: 0.6em; margin-right: var(--sp-04); color: inherit; text-align: center; white-space: nowrap;}
#mobileMenu .con-body .depth-03 > li .menu-03 > span {display: block; overflow: hidden; overflow-wrap: break-word; word-break: keep-all;}

/*-------------------------------------------------------------------
@variation
-------------------------------------------------------------------*/
#mobileMenu .con-body .depth-02 > li.child .menu-02 {padding-right: var(--sp-32);}
/* blank */
#mobileMenu .con-body .depth-01 > li > .menu-01[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#mobileMenu .con-body .depth-02 > li > .menu-02[target="_blank"]::after {content:""; display: block; width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}
#mobileMenu .con-body .depth-03 > li .menu-03[target="_blank"]::after {content:""; display: block; width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-04); background: url(../../../images/common/i_blank.svg) no-repeat right center / contain; flex-shrink: 0;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
/* 1차메뉴 */
#mobileMenu .con-body .depth-01 > li > .menu-01 {box-shadow: 0 0 10px 0 rgba(0,0,0,0); transition: background 0.3s, color 0.3s, box-shadow 0.3s;}

#mobileMenu .con-body .depth-01 > li > .menu-01[target="_blank"]:focus-visible::after,
#mobileMenu .con-body .depth-01 > li > .menu-01[target="_blank"]:hover::after,
#mobileMenu .con-body .depth-01 > li.active > .menu-01[target="_blank"]::after {background-image: url(../../../images/common/i_blank_white.svg);}

/* 2차메뉴 */
#mobileMenu .con-body .depth-01 > li .sub { transition: all 0.3s;}
#mobileMenu .con-body .depth-02 > li .menu-02:focus-visible,
#mobileMenu .con-body .depth-02 > li .menu-02:hover,
#mobileMenu .con-body .depth-02 > li .menu-02.active,
#mobileMenu .con-body .depth-02 > li.open .menu-02 {font-weight: 700; color: var(--color-main);}
#mobileMenu .con-body .depth-02 > li.open .menu-02{text-decoration:underline}

/* 3차메뉴 */
#mobileMenu .con-body .depth-03 > li > .menu-03 {transition: color 0.3s;}
#mobileMenu .con-body .depth-03 > li > .menu-03:focus-visible,
#mobileMenu .con-body .depth-03 > li > .menu-03:hover,
#mobileMenu .con-body .depth-03 > li > .menu-03.active {font-weight: 500; color: var(--color-main);}
#mobileMenu .con-body .depth-03 > li.open .menu-03{font-weight:500;color: var(--color-main);text-decoration:underline}

/* accessibility */
#mobileMenu .con-body .depth-01 > li > .menu-01:focus-visible {outline: 2px dashed #fff; outline-offset: -4px;}
#mobileMenu .con-body .depth-02 > li > .menu-02:focus-visible {outline: 2px dashed var(--color-gray-90); outline-offset: -2px;}
#mobileMenu .con-body .depth-03 > li > .menu-03:focus-visible {outline: 2px dashed var(--color-gray-90); outline-offset: -2px;}


/*-------------------------------------------------------------------
분류이름: Footer
분류그룹: 레이아웃
-------------------------------------------------------------------*/
#footer {overflow: visible; display: block; position: relative; background-color:#232526; color: #aaa;font-size:1.6rem}
#footer #btnTop {display:flex;align-items:center;justify-content:center; position: fixed; bottom: 4rem; right: 4rem; z-index:7; width:7rem; height:7rem; border-radius:100%; background-color: var(--color-white);border:1px solid var(--color-main)}
#footer #btnTop::before {content:"";display:block;width:3.4rem; height:3.4rem; background: url(../../../images/site/kor/common/icon_blue_top.svg) no-repeat center / var(--sp-32);}

#footer .footer-top {display: flex; position: relative; padding-top: var(--sp-20); padding-bottom: var(--sp-20); justify-content: space-between;border-bottom:1px solid #575757}
#footer .footer-top .menus {display: flex; align-items: center}
#footer .footer-top .menus > li {display: block;position:relative;margin-right:3rem;padding-right:3rem}
#footer .footer-top .menus > li:before{content:"";position:absolute;right:0;top:1.1rem;height:1.8rem;border-left:1px solid #575757}
#footer .footer-top .menus > li:last-child{margin-right:0;padding-right:0}
#footer .footer-top .menus > li:last-child:before{display:none}
#footer .footer-top .menus > li .btn-menu {display: block; padding: var(--sp-12) 0; line-height: 1; font-weight: 500; font-size: 1.6rem;}
#footer .footer-top .menus > li .btn-menu:hover,
#footer .footer-top .menus > li .btn-menu:focus{text-decoration:underline}
#footer .footer-top .menus > li .btn-menu.primary {color: var(--color-info-50);}
#footer .footer-content {display: block; padding-top: var(--sp-40); padding-bottom:5.4rem}
#footer .footer-content .inner{position:relative;padding:0 20.5rem 0 33rem}
#footer .footer-content .logo{position:absolute;left:0;top:0}
#footer .footer-content .txt {display: block;font-weight:500;line-height:1.4}
#footer .footer-content .txt.copyright {margin-top: var(--sp-24);font-weight:normal}
#footer .footer-content .txt > span{position:relative;display:inline-block;margin-right:.4rem;padding-right:.9rem}
#footer .footer-content .txt > span:before{content:"";position:absolute;right:0;top:.4rem;height:1.4rem;;border-left:1px solid #aaa}
#footer .footer-content .txt > span:last-of-type{margin-right:0;padding-right:0}
#footer .footer-content .txt > span:last-of-type:before{display:none}
#footer .related{position:absolute;right:0;top:0}
#footer .related .label{position:relative;display:flex;align-items:center;width:18rem;height:5rem;padding:0 3.2rem 0 2rem;background:#232526;color:#aaa;font-size:1.4rem;border:1px solid #999}
#footer .related .label:before{content:"";position:absolute;right:2rem;top:50%;transform:translateY(-50%);width:1.2rem;height:1.2rem;background:url(../../../images/site/kor/common/icon_related_plus.svg) center/contain no-repeat;}
#footer .related .list{visibility:hidden;overflow-y:auto;width:100%;height:0;max-height:50rem;opacity:0;position:absolute;right:0;bottom:100%;background:#232526;font-size:1.4rem;color:#555;z-index:10}
#footer .related .active .list{visibility:visible;height:auto;opacity:1;transition:all 0.2s}
#footer .related .list > li + li{border-top:1px solid #444}
#footer .related .list > li > a{display:block;padding:1rem;font-size:1.4rem;color:#aaa}
#footer .related .list > li > a:hover,
#footer .related .list > li > a:focus{background:#151515;color:#ddd}
#footer .related .active .label:before{background-image:url(../../../images/site/kor/common/icon_gray_close.svg)}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#footer #btnTop.stop {position: absolute; bottom: calc(100% - 3.5rem); transition: bottom 0.3s;}

/*-------------------------------------------------------------------
분류이름 : 비주얼 영역
분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#commonLayout {display: block;}
#commonLayout .visual-area {display: block; background-color: #e8eaee;background-position:center;background-size:cover;background-repeat:no-repeat}
#commonLayout .visual-area.sub01{background-image:url(../../../images/site/kor/sub/bg_sub01.jpg)}
#commonLayout .visual-area.sub02{background-image:url(../../../images/site/kor/sub/bg_sub02.jpg)}
#commonLayout .visual-area.sub03{background-image:url(../../../images/site/kor/sub/bg_sub03.jpg)}
#commonLayout .visual-area.sub04{background-image:url(../../../images/site/kor/sub/bg_sub04.jpg)}
#commonLayout .visual-area.sub05{background-image:url(../../../images/site/kor/sub/bg_sub05.jpg)}
#commonLayout .visual-area .inner {display: flex;height:25rem; position: relative; align-items: center; justify-content: center;}
#commonLayout .visual-area .menu_title{display:block;margin-top:-5.3rem;font-size:4rem;color:#151515;font-family:'gmarket', 'Pretendard'}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#commonLayout .visual-area .inner .visual-content::before {animation: leftAni 0.5s;}


/*-------------------------------------------------------------------
분류이름 : 검색 및 메뉴 영역
분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#commonLayout .utils-area {display: block;position:relative;z-index:2}
#commonLayout .utils-area .inner {display: flex;position:relative;margin-top:-5.4rem;height:5.4rem;background:#fff;border-bottom:1px solid #eee}
#commonLayout .utils-area .inner .home{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:5.3rem;border-right:1px solid #eee}
#commonLayout .utils-area .inner .home:before{content:"";display:block;width:1.8rem;height:1.6rem;background:url(../../../images/site/kor/common/icon_home.svg) center no-repeat;background-size:contain}
#commonLayout .utils_lst{display:flex;margin-left:-1px}
#commonLayout .utils_lst > li{position:relative}
#commonLayout .utils_lst > li > a,
#commonLayout .utils_lst > li > button{display:flex;height:100%;align-items:center;justify-content:center;width:5.3rem;height:100%;border-left:1px solid #eee;transition:all .3s}
#commonLayout .utils_lst > li > a:hover,
#commonLayout .utils_lst > li > button:hover{background-color:#f9f9f9}
#commonLayout .utils_lst > li > a:before,
#commonLayout .utils_lst > li > button:before{content:"";width:2.4rem;height:2.4rem;background-position:center;background-repeat:no-repeat;background-size:contain}
#commonLayout .utils_lst .lang > a:before,
#commonLayout .utils_lst .lang > button:before{background-image:url(../../../images/site/kor/common/icon_global.svg)}
#commonLayout .utils_lst .share > a:before,
#commonLayout .utils_lst .share > button:before{background-image:url(../../../images/site/kor/common/icon_share.svg)}
#commonLayout .utils_lst .print a:before{background-image:url(../../../images/site/kor/common/icon_print.svg)}
#commonLayout .utils_lst .share.active > a:before,
#commonLayout .utils_lst .share.active > button:before{background-image:url(../../../images/site/kor/common/icon_share_close.svg)}
#commonLayout .utils_lst > li .sub_menu{display:flex;flex-direction: column;align-items: center;}
#commonLayout .utils_lst > li.active .sub_menu{visibility:visible;height:auto;padding:1.6rem 0}
/* 메뉴 */
#commonLayout .utils-area #gnb {display: block;position: relative; min-width: 0; border-right: 1px solid rgba(255,255,255,0.3); flex-grow: 1;background:#fff}
#commonLayout .utils-area #gnb .depth-01 {display: flex; flex-grow: 1;}
#commonLayout .utils-area #gnb .depth-01 > li {display: block; position: relative;border-right:1px solid #eee}
#commonLayout .utils-area #gnb .depth-01 > li > .btn-menu {display: flex; position: relative; width:25rem; height:5.3rem; padding:1.7rem 4rem 1.7rem 2rem; background-color: transparent; font-weight:500; font-size:1.6rem; color:#151515; align-items: center;}
#commonLayout .utils-area #gnb .depth-01 > li > .btn-menu::after {content: ""; position: absolute; top: calc(50% - 0.4rem); right: var(--sp-20); width:1.3rem; height:.8rem; background: url(../../../images/site/kor/common/icon_moMenu_arrow.svg) no-repeat center / contain;}
#commonLayout .utils-area #gnb .depth-01 .sub {position: absolute; top: 100%; left: 0; z-index: 99; width: 100%; padding: var(--sp-08) 0; border: 1px solid var(--color-gray-30); background-color: #fff; box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.1);}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 {display: block;}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu {display: flex; position: relative; padding: var(--sp-08) var(--sp-12); background: #ffffff; font-weight: 500; font-size: 1.6rem; color:var(--color-gray-70); align-items: center;}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu::before {content:""; display: block; position: absolute; top: 0; left: 0; width: var(--sp-04); height: 100%; background-color: var(--color-sub-10);}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 .depth-03 {display: none;}
/* LNB */
#lnb{flex:auto}
.lnb_menu{display:flex}
.lnb_menu > li{flex:1;max-width:25rem;position:relative;letter-spacing:-.016rem}
.lnb_menu > li .btn-menu{display:flex;align-items:center;position:relative;width:100%;height:5.3rem;padding:.5rem 4rem .5rem 2rem;border-right:1px solid #eee;font-size:1.6rem;line-height:1.2;color:#151515;transition:color .3s}
.lnb_menu > li .btn-menu span{text-align: left;}
.lnb_menu > li .btn-menu::after {content: ""; position: absolute; top: calc(50% - 0.4rem); right: var(--sp-20); width:1.3rem; height:.8rem; background: url(../../../images/site/kor/common/icon_moMenu_arrow.svg) no-repeat center / contain;transition:all .3s}
.utils-area .sub_menu{visibility:hidden;overflow:hidden;height:0;position:absolute;left:0;top:100%;width:100%;padding:0 2rem;background:#fff;border-width:1px;border-style:solid;border-color:var(--color-main) #eee #eee;box-shadow:.2rem .4rem .4rem 0 rgba(0, 0, 0, 0.05);transition:all .3s}
.utils-area .sub_menu > li + li{margin-top:1rem}
.utils-area .sub_menu > li > a{display:block;font-size:1.6rem;color:#555;transition:all .3s}
.utils-area .sub_menu > li > a:hover,
.utils-area .sub_menu > li > a:focus,
.lnb_menu > li.active .btn-menu{color:var(--color-main)}
.lnb_menu > li.active .btn-menu::after {transform:rotate(180deg)}
.lnb_menu > li.active .sub_menu{visibility:visible;height:auto;padding:1.6rem 2rem}


/*-------------------------------------------------------------------
@variation
-------------------------------------------------------------------*/
#commonLayout .utils-area .search-area .col.grow {flex-grow: 1;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#commonLayout .utils-area #gnb .btn-menu {transition: background 0.3s, color 0.3s}
#commonLayout .utils-area #gnb .depth-01 > li > .btn-menu::after {transition: background 0.3s;}
#commonLayout .utils-area #gnb .depth-01 > li > .btn-menu:focus-visible::after,
#commonLayout .utils-area #gnb .depth-01 > li > .btn-menu:hover::after {}
#commonLayout .utils-area #gnb .depth-01 > li > .btn-menu.active::after { transform: rotate(180deg);}

/* 2depth */
#commonLayout .utils-area #gnb .depth-01 .sub {display: none;}
#commonLayout .utils-area #gnb .depth-01 .sub.active {display: block;}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu:focus-visible,
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu:hover {background-color: var(--color-sub-5); color: var(--color-gray-90);}

#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu::before {opacity: 0; transition: opacity 0.3s;}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu:focus-visible::before,
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu:hover::before {opacity: 1;}

/* btn */
#commonLayout .utils-area .search-area .col .btn-search {transition: background 0.3s;}
#commonLayout .utils-area .search-area .col .btn-search:focus-visible,
#commonLayout .utils-area .search-area .col .btn-search:hover {background-color: var(--color-sub-40);}

/* accessibility */
#commonLayout .utils-area #gnb .depth-01 > li > .btn-menu:focus-visible {outline: 2px dashed #fff; outline-offset: -4px;}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu:focus-visible {outline: none;}
#commonLayout .utils-area #gnb .depth-01 .sub .depth-02 > li > .btn-menu:focus-visible::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: 2px dashed var(--color-sub); outline-offset: -4px;}
#commonLayout .utils-area .search-area .col .f-select {outline-color: #fff;}
#commonLayout .utils-area .search-area .col .f-control:focus-visible {outline: 2px solid #fff; outline-offset: -4px;}


/*-------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
    #header .header-in #gnb .depth-01 > li .menu-01 {padding: 0 var(--sp-20);}
    #header .header-in #gnb .depth-01 > li .sub {padding: 0 var(--sp-20);}
    #header .header-in #gnb .depth-01 > li .sub .info {padding: var(--sp-48) var(--sp-20) var(--sp-48) 0;}
    #header .header-in #gnb .depth-01 > li .sub .info .tit {font-size: var(--fz-title-xxlg);}
    #header .header-in #gnb .depth-02 > li .menu-02 {padding: var(--sp-04) var(--sp-16); font-size: var(--fz-title-sm);}

    #sitemap .content-wrap {padding-left: var(--sp-20); padding-right: var(--sp-20);}
    #sitemap .content-wrap .depth-02 {gap: var(--sp-16) 0;}
    #sitemap .content-wrap .depth-02 > li {padding: 0 var(--sp-08);}
    #sitemap .content-wrap .depth-02 > li .menu-02 {padding: var(--sp-04) var(--sp-16); font-size: var(--fz-title-sm);}
    #sitemap .btn-menu-close {right: var(--sp-20);}

    #commonLayout .utils-area .search-area {width: 36rem;}

    #footer .footer-content{padding:2.5rem 2rem 6rem}
    #footer #btnTop {width:5rem; height:5rem; right: var(--sp-20)}
    #footer .footer-top {padding-right: var(--sp-72);}
}
@media screen and (max-width: 1430px) {
    .inner {padding-left: var(--sp-20); padding-right: var(--sp-20);}
    #commonLayout .utils-area .inner{padding:0}
    #content{padding-left:var(--sp-20);padding-right:var(--sp-20)}
}
@media screen and (max-width: 1200px) {
    #header .header-in #logo > a{height:5rem}
    #header .header-in #gnb {padding: 0 var(--sp-24);}
    #header .header-in #gnb .depth-01 > li .menu-01 {padding: 0 var(--sp-16); font-size:1.8rem}
    #header .header-in #gnb .depth-01 > li .sub .info {width: 20rem; padding: var(--sp-40) var(--sp-20) var(--sp-40) 0;}
    #header .header-in #gnb .depth-01 > li .sub .info .tit {font-size: var(--fz-title-xlg);}

    #sitemap .content-wrap .depth-01 > li .menu-01 {width: 20rem; padding: 0 var(--sp-16); font-size: var(--fz-title-xlg);}
    #sitemap .content-wrap .depth-02 > li .menu-02 {min-height: var(--sp-48); padding: var(--sp-04) var(--sp-12); font-size: var(--fz-title-xsm);}
}
@media screen and (max-width: 1024px) {
    .fixed #container{margin-top:7rem}

    .top_banner .swiper-slide{height:13.7rem}
    .top_banner .swiper-slide .img_info{height:8.5rem}
    .top_banner .banner1{background-size:150% 100%}
    .top_banner .top_slide .controls button{width:4.4rem;height:4.4rem}
    .top_banner .top_slide .controls button{left:1rem}
    .top_banner .top_slide .controls button.next{right:1rem}

    #header .header-top .banner_open{background:none;width:100%;justify-content:center;}

    #header .header-in {height:7rem;}
    #header .header-in #logo{left:2rem}
    #header .header-in #logo > a {height:3.9rem;}
    #header .header-in #utils .btn-sitemap {display:none;right:2rem}
    #header .header-in #utils .btn-sitemap.type-mobile {display:block;}
    #header .header-in #utils .btn-login{right: 7.2rem;}
    #header .header-in #gnb {display: none;}

    #mobileMenu {display: flex;}
    #mobileMenu .con-body .depth-01 > li .menu-01{padding:1.5rem 0;font-size:2.2rem}
    #mobileMenu .con-body .depth-02 > li .menu-02{font-size:2.2rem}
    #mobileMenu .con-body .depth-03 > li .menu-03{font-size:2.1rem}

    #mobileMenu .con-body .depth-01 > li .menu-01.on,
    #mobileMenu .con-body .depth-02 > li .menu-02.on{color:var(--color-main)}
    #mobileMenu .con-body .depth-03 > li .menu-03.on{color:var(--color-main);text-decoration:underline}

    #sitemap {display: none;}

    #commonLayout .visual-area .inner::after {width: 24.7rem; height: 17rem;}
    #commonLayout .visual-area .inner .visual-content::before {width: 19rem; height: 22.3rem;}
    #commonLayout .visual-area .inner .visual-content .txt-box {padding-top: var(--sp-44); padding-left: var(--sp-20);}
    #commonLayout .visual-area .inner .visual-content .txt-box .title {font-size: var(--fz-title-lg);}
    #commonLayout .visual-area .inner .visual-content .txt-box .title > em {padding-right: var(--sp-12); font-size: 3.6rem;}
    #commonLayout .visual-area .inner .visual-content .txt-box .txt {font-size: 1.6rem;}
    #commonLayout .utils-area #gnb {display: none;}
    #commonLayout .utils-area .search-area {width: 100%;}

    #footer .footer-top{padding:1.3rem 0;margin:0 2rem;width:auto}
    #footer .footer-top .menus > li{padding-right:1.5rem;margin-right:1.5rem}
    #footer .footer-content .logo img{height:4rem}
    #footer .footer-content .inner{padding:6.5rem 0 0}
    #footer .related .label{height:4.4rem;padding:0 1.7rem}
    #footer .footer-top .menus > li .btn-menu {font-size: var(--fz-label-md);}
}
@media screen and (max-width: 768px) {
    /* .top_banner .swiper-slide .type-mo{display:block}
    .top_banner .swiper-slide .type-pc{display:none} */

    #header .header-in #logo > a {height:3.5rem;}
    #header .header-in #utils > .list > li.type-pc {display: none;}

    #mobileMenu {width: 100%;}
    #mobileMenu .con-head .head-top {height:6.6rem; padding-right: var(--sp-64);}
    #mobileMenu .con-head .head-top .logo {height: 3.5rem;}
    #mobileMenu .con-head .head-top .utils > li .btn-lang {height: var(--sp-36); padding: 0 var(--sp-08); font-size: var(--fz-label-sm);}
    #mobileMenu .btn-menu-close {top: var(--sp-12); width: var(--sp-36); height: var(--sp-36);}

    #commonLayout .visual-area .inner{height:20rem}
    #commonLayout .visual-area .menu_title{margin-top:0}
    #commonLayout .utils-area .inner{margin-top:0}
    #commonLayout .utils-area .inner{padding-right:0}
    #lnb{flex:auto}
    .lnb_menu > li{flex:1;max-width:inherit}
    .lnb_menu > li .btn-menu{width:100%}
    .lnb_menu > li:last-child .btn-menu{border-right:0}
    #commonLayout .utils-area .utils_lst{flex-shrink:0;position:relative;height:5.3rem}
    #commonLayout .utils-area .inner .home,
    #commonLayout .utils-area .utils_lst .print{display:none}

    #footer #btnTop {bottom: var(--sp-20);}
    #footer .footer-content .txt {font-size: var(--fz-body-sm);}
}
@media screen and (max-width: 640px) {
    #lnb{width:100%}
    .lnb_menu > li{flex:1}
    .lnb_menu > li .btn-menu{width:100%}
    .lnb_menu > li:last-child .btn-menu{border-right:0}
    .lnb_menu > li:nth-child(n+3){display: none;}

    #commonLayout .visual-area .inner{height:14.5rem}
    #commonLayout .visual-area .menu_title{font-size:3rem}

    #footer .related{position:relative;margin-top:2rem}
    #footer .related .label{width:100%}
    #footer .related .list{border-width:1px 1px 0;border-style:solid;border-color:#aaa}
    
}
@media screen and (max-width: 600px) {
    #header .header-in #utils > .list > li + li {margin-left: var(--sp-08);}
    #header .header-in #utils > .list > li .btn-lang {height: var(--sp-36); padding: 0 var(--sp-08); font-size: var(--fz-label-sm);}
    #header .header-in #utils > .list > li .btn-sitemap {width: var(--sp-36); height: var(--sp-36);}
    #header .header-in #utils > .list > li .btn-sitemap::before {top: calc(50% - 0.8rem); right: 0.75rem; width: 2.2rem; height: 1.6rem;}
    #header .header-in #utils > .list > li .btn-sitemap::after {top: calc(50% - 0.1rem); right: 0.75rem; width: 2.2rem; height: 0.2rem;}
    #header .header-in #utils .btn-login{right: 6.5rem;}

    #mobileMenu .con-head .head-quick .list > li .btn-quick {font-size: 1.4rem;}

    #commonLayout .visual-area .inner::after {width: 14.6rem; height: 10.1rem;}
    #commonLayout .visual-area .inner .visual-content::before {width: 13.9rem; height: 16.1rem;}
    #commonLayout .visual-area .inner .visual-content .txt-box {padding-top: var(--sp-12);}
    #commonLayout .visual-area .inner .visual-content .txt-box .title {display: block; font-size: var(--fz-body-lg);}
    #commonLayout .visual-area .inner .visual-content .txt-box .title > em {padding-right: 0; font-size: 2.8rem;}
    #commonLayout .visual-area .inner .visual-content .txt-box .txt {font-size: var(--fz-body-sm);}

    #footer .footer-top {display: block;}
    #footer .footer-top .menus > li .btn-menu {font-size: var(--fz-label-sm);}
}
@media screen and (max-width: 500px) {
    .top_banner .top_slide{height:11rem}
    .top_banner .swiper-slide{padding:0 7rem}
    .top_banner .swiper-slide img,
    .top_banner .swiper-slide .img_info{height:auto}
}
@media screen and (max-width: 425px) {
    #commonLayout .visual-area .inner .visual-content .txt-box {padding-left: var(--sp-16);}
}

@media print {
    html, body {
        width: 1024px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        zoom: 1 !important;
    }
    .photo_view .gallery_main .swiper-slide{max-width: 1024px !important;}
}