@charset "UTF-8";
/* 공통 */
body.no-scroll {overflow: hidden; /* 스크롤 비활성화 */}
.hidden-text{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

.index-mobile{position: relative; width: 100%; max-width: 720px; margin: 0 auto;}
.contain{padding: 0 15px; box-sizing: border-box;}

/* 헤더 */
.header{position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; background-color: rgba(0,0,0,0.4); z-index: 50; transition: all 0.3s;}
.header .contain{display: flex; align-items: center; justify-content: space-between; width: 100%; height: 55px;}
.header .logo a{display: block; width: 165px; height: 35px; background: url(../images/main/logo_white.png) no-repeat; background-size: contain;}

.header .btn-wrap{display: flex; gap: 10px; padding: 0;}
.header .btn-wrap button{display: block; width: 28px; height: 28px; background-color: transparent; border: none; cursor: pointer;}
.header .btn-wrap .sch-btn{background: url(../images/main/i_serch.png) no-repeat center; background-size: 24px;}
.header .btn-wrap .menu{background: url(../images/main/i_menu.png) no-repeat center; background-size: 23px;}

/* 스크롤 내릴때 */
.header.on{background-color: #fff; border-bottom: 1px solid #ddd;}
.header.on .logo a{background: url(../images/main/logo.png) no-repeat; background-size: contain;}
.header.on .btn-wrap .sch-btn{background: url(../images/main/i_serch_bk.png) no-repeat center; background-size: 24px;}
.header.on .btn-wrap .menu{background: url(../images/main/i_menu_bk.png) no-repeat center; background-size: 23px;}

/* 서브페이지 헤더 */
.header.sub_header{background-color: #fff; border-bottom: 1px solid #ddd;}
.header.sub_header .logo a{background: url(../images/main/logo.png) no-repeat; background-size: contain;}
.header.sub_header .btn-wrap .sch-btn{background: url(../images/main/i_serch_bk.png) no-repeat center; background-size: 24px;}
.header.sub_header .btn-wrap .menu{background: url(../images/main/i_menu_bk.png) no-repeat center; background-size: 23px;}


/* 검색버튼 눌렀을때 */
.header.open{background-color: #fff; border-bottom: 1px solid #ddd;}
.header.open .logo a{background: url(../images/main/logo.png) no-repeat; background-size: contain;}
.header.open .btn-wrap .sch-btn{background: url(../images/main/i_close_bk.png) no-repeat center; background-size: 20px;}
.header.open .btn-wrap .menu{background: url(../images/main/i_menu_bk.png) no-repeat center; background-size: 23px;}

.sch-wrap{display: none; position: absolute; top: 56px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; padding: 20px; background-color: #f2f4f6; box-sizing: border-box;}
.sch-wrap .sch-bar{display: flex; justify-content: space-between;}
.sch-wrap .sch-bar .ipt{width: calc(100% - 45px); border-radius: 40px; padding: 0 15px; font-size: 14px;}
.sch-wrap .sch-bar .btn{width: 40px; height: 40px; background-color: #0998bc; border-radius: 50%; background-image: url(../images/main/i_serch.png); background-repeat: no-repeat; background-position: center; background-size: 20px;}

/* 사이드바 */
.gnb-wrap{position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background-color: #fff; transition: .3s ease-out; z-index: 50;}
.gnb-wrap.show{right:0;}

.gnb-header{display: flex; align-items: center; justify-content: space-between; height: 55px; padding: 0 15px; border-bottom: 1px solid #ddd;}
.gnb-header .utill{display: flex;}
.gnb-header .utill li{position: relative;}
.gnb-header .utill li:first-child:after{position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ""; display: block; width: 1px; height: 13px; background-color: #d1d1d1;}
.gnb-header .utill li a{padding: 0 13px; font-size: 15px;}
.gnb-header .btns{display: flex;}
.gnb-header .btns li{margin-left: 8px;}
.gnb-header .btns li a{display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center;}
.gnb-header .btns li.home a{background-image: url(../images/main/ico_home.svg);}
.gnb-header .btns li.close a{background-image: url(../images/main/ico_menu_close.svg);}

.gnb-menu{display: flex; width: 100%; height: calc(100vh - 56px);}
.gnb-menu .menu-wrap{width: 130px; height: 100%; background-color: #eef2f7;}
.gnb-menu .menu-wrap li .tab-btn{width: 100%; height: 64px; background-color: transparent; border: 0; font-size: 17px; font-weight: 700; color: #222; cursor: pointer;}
.gnb-menu .menu-wrap li .tab-btn.active{background-color: #fff; color: #11829f; font-weight: 800;}

.gnb-menu .submenu-wrap{width: calc(100% - 130px); height: 100%; overflow-y: auto; padding: 10px 20px; box-sizing: border-box;}
.gnb-sub-list > ul > li{}
.gnb-sub-list > ul > li > a.gnb-sub-trigger{width: 100%; padding: 15px 5px; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px dotted #ccc; box-sizing: border-box;}
.gnb-sub-list > ul > li > a.gnb-sub-trigger.has-depth3:after{ content: ""; display: block; width: 20px; height: 20px; margin-left: auto; transform: rotate(0deg); transition: .3s ease-out; background-image: url(../images/main/ico_angle.svg); background-repeat: no-repeat; background-position: center;}
.gnb-sub-list > ul > li > a.gnb-sub-trigger.has-depth3.over:after{transform: rotate(180deg);}
.gnb-sub-list > ul > li > a.gnb-sub-trigger.over{color: #11829f; border-bottom: 1px dotted #11829f;}

.gnb-sub-list > ul > li > .depth3-wrap{display: none; padding: 10px 0; border-bottom: 1px dotted #11829f;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > a{display: flex; align-items: center; justify-content: flex-start; padding: 8px 10px; font-size: 16px;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > a:before{content: ""; display: block; width: 3px; height: 3px; margin-right: 10px; background-color: #555; border-radius: 50%;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > .depth4-wrap{display: none; padding: 10px 15px; background-color: #eef2f7;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > .depth4-wrap li{margin-bottom: 5px;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > .depth4-wrap li:last-child{margin-bottom: 0;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > .depth4-wrap li a{display: flex; align-items: center; justify-content: flex-start; font-size: 15px; color: #555;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > .depth4-wrap li a:before{content: ""; display: block; width: 6px; height: 1px; margin-right: 10px; background-color: #777; border-radius: 50%;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > a.has-depth4:after{ content: ""; display: block; width: 17px; height: 17px; margin-left: auto; transform: rotate(0deg); transition: .3s ease-out; background-image: url(../images/main/ico_angle.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
.gnb-sub-list > ul > li > .depth3-wrap > ul > li > a.has-depth4.over:after{transform: rotate(180deg);}

/* 푸터 */
.footer{padding: 20px 0 40px 0; background-color: #333333;}
.footer>div{display: flex; flex-direction: column; gap: 15px; align-items: center;}
.footer .f-utill{display: flex; flex-wrap: wrap; justify-content: center;}
.footer .f-utill li{padding: 0 10px;}
.footer .f-utill li a{line-height: 1.7em; color: #fff; font-weight: 300; font-size: 14px;}
.footer .f-utill li:first-child a{color: #f2f012;} 
.footer .f-info{display: flex; flex-direction: column; gap: 15px;}
.footer .f-info li{color: #fff; text-align: center; font-weight: 300; font-size: 14px;}