@charset "utf-8";

.inner{position:relative; max-width: var(--width-inner); padding: 0 50px; margin: 0 auto; box-sizing: content-box;}
.inner-m{max-width: var(--width-inner-m);}
.inner-f{max-width:100%; padding:0;}
.set-cont {padding: 100px 0;}
.set-cont:last-child {padding-bottom: 0;}

.top-area{margin-top:-70px; padding:70px 0; }
.top-area.has-bg{background: #EEF0F6;}

/* header */
.header{position: relative;}
.allmenu_w{position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding-top: 150px; display: none; z-index: 999; background-color: rgba(9, 22, 49, 0.9); }

.allmenu_w .flex{padding-top: 50px;}
.allmenu_w .flex a{font-family: var(--font-aggro); font-size: 20px; }

.allmenu_w .flex > li{display:flex; padding: 24px 0; }
.allmenu_w .flex > li > a{position:relative; flex:none; width:200px; color: #fff; font-weight: 500; line-height: 1.3;}
.allmenu_w .flex > li > a:hover,
.allmenu_w .flex > li > a:focus{text-decoration:underline; text-underline-offset: 10px;}
.allmenu_w .dep{ display:flex; flex-wrap:wrap; gap:40px 20px; width:100%;color: #9fa3ad;}
.allmenu_w .dep > li{ position: relative; width:270px; font-weight:300;}
.allmenu_w .dep a:hover,
.allmenu_w .dep a:focus{color: #fff;}

/* #subVisual */
#subVisual{color: #fff; text-align: center; height: 557px; line-height: 1.15; display: none; position: relative; }
#subVisual .bg{background: url('../img/common/sub1.jpg') center center no-repeat; background-size:cover;  position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#subVisual .sub-top{height:100%; position:relative; display:flex; justify-content:center; align-items: center;}
#subVisual .breadcrumb{position:absolute; bottom:0; left:0; width: 100%; background-color: rgba(31, 31, 39, 0.60);}
#subVisual .breadcrumb .sub-depth{display:flex; justify-content: space-between; align-items: center; }

#subT{font-size: 44px; position: relative; z-index: 1}

#subVisual .breadcrumb .sub-btns{display: flex; flex:none; gap:10px;}
#subVisual .breadcrumb .sub-btns a{width: 42px; height: 42px; display:block; background: no-repeat 50% 50%; background-size: 100% auto; border:none;}
#subVisual .breadcrumb .sub-btns a.btn-share{background-image: url('../img/common/ico-share.png')}
#subVisual .breadcrumb .sub-btns a.btn-print{background-image: url('../img/common/ico-print.png')}
#subVisual .breadcrumb .sub-btns a.btn-url{background-image: url('../img/common/ico-url.png')}

#location{display: flex; }
#location > li{position: relative; }
#location > li:first-child::before,
#location > li::after{position: absolute; top:50%; width: 1px; height: 20px; content: ''; margin-top: -10px; background: rgba(208, 215, 224, 0.50);}
#location > li:first-child::before{left: 0; }
#location > li::after{right: 0;}

#location a{display: block; text-align:left;}
#location > li > a{display:flex; justify-content: space-between; align-items: center; width:224px; height: 78px; padding: 10px 28px; }
#location > li:not(.home) > a::after{display: block; width: 10px; height: 10px; content: ''; background: url('../img/common/ico-arrow-down.svg') no-repeat 50% 50%; background-size: 100% auto; }
#location > li.home a{width: 15px; background: url('../img/common/ico-home.png') no-repeat 50% 50%; }

#location .dep{position: absolute; left: 0; top:100%; width: 100%; min-width: 158px; background: #fff; color: #333; border:1px solid #ccc; z-index: 9}
#location .dep{display: none;}
#location .dep li:not(:last-child){border-bottom: 1px solid #ccc;}
#location .dep a{padding: 16px 28px}
#location .dep a:hover,
#location .dep a:focus{background: #f1f1f1}

/* sub_contents */
.sub_contents.sub5,
.sub_contents.sub6{padding-top:150px;}
.sub_contents.sub5 #subPage,
.sub_contents.sub6 #subPage{padding-top:100px;}

/* mypage */
.mypage_renew{margin-top:48px;}

/* #subPage */
#subPage{display: block; padding: 70px 0 130px}
#subPage .breadcrumb-title{font-family: var(--font-aggro); font-weight:500; text-align:center;}
#subPage .breadcrumb-title .dep1{font-size: 1.25rem; color: var(--color-main); }
#subPage .breadcrumb-title .dep2{font-size: 2.75rem; font-weight:700; color: var(--color-black-dark);}
#subPage .breadcrumb-title .dep1 + .dep2{margin-top:30px;}


/* #leftMenu */
/* #leftMenu{width: 240px; margin-right: 80px; display: none; color: #444; flex-shrink: 0;}
#leftMenu .top{background: var(--navy); color: #fff; line-height: 1.15; font-weight: 700; text-align: left; padding: 50px 10px 45px; text-align: center;}
#leftMenu .eng{color: #5b6b86; display: block;margin-top: 10px;}
#leftMenu .t{font-size: 1.375em; letter-spacing: 0;}
#leftMenu .dep > li{border-bottom: 1px solid var(--ddd)}
#leftMenu .dep a{display: block; padding: 20px; position: relative;}
#leftMenu .dep .active a{color: var(--navy); background: #eee; font-weight: 700;}

#leftMenu .dep .active a:after {background: var(--navy);}
#leftMenu .dep .active a:after{width: 10px; height: 2px; top:50%; margin-top: -1px; content: ''; position: absolute; right: 20px}
#pageStart{flex:1;}
 */

.sub1 #subVisual,.sub2 #subVisual,.sub3 #subVisual,.sub4 #subVisual,
.sub1 #leftMenu,.sub2 #leftMenu,.sub3 #leftMenu,.sub4 #leftMenu{display: block;}
/* .sub1 #subPage,.sub2 #subPage,.sub3 #subPage,.sub4 #subPage{display: flex; padding: 50px 80px 100px;} */


.bg-black{background: #333 !important; color: #fff}
.bg-navy{background: var(--navy) !important; color: #fff}
.bg-navy_r{border:1px solid var(--navy); color: var(--navy); background: #fff}
.bg-navy2{background: var(--blue3) !important; color: #fff}
.bg-black_r{background: #fff; border:1px solid #ddd; color: #333}
.bg-grey{background: #eee !important; color: #333}
.bg-orange{background: var(--orange) !important; color: #fff}
.bg-blue{background-color: var(--blue) !important; color: #fff}
.bg-blue_r{border:1px solid var(--blue) !important; color: var(--blue)}
.bg-light{background: #fbfbfb; color: #333; border-radius:3px; border:1px solid #ddd}
.bg-black6{background: #666 !important; color: #fff}
.bg-black6.check {background: #00b4eb !important;}
.bg-white{background: #fff !important}

.color-main{color: var(--color-main);}
.color-red{color: #be3333}
.color-blue{color:var(--blue)}
.color-blue2{color:var(--blue2)}
.color-blue3{color:#2AA7F9}
.color-black{color: #333}
.color-white{color: #fff !important}
.color-link{color: #005BAB; word-break:break-all}
.color-link:hover,
.color-link:focus{text-decoration: underline;}
.color-black6{color: #666}


/* footer */
#footer{background: #272E43; font-family: var(--font-aggro); font-size: 1rem; font-weight:300; color: #fff;}
#footer .top .inner,
#footer .bot .inner {display: flex; align-items:center; flex-wrap:wrap;}
#footer .bot .inner {align-items:flex-start; }

#footer .top {padding: 36px 0; }
#footer .link {flex:1; min-width:0;}
#footer .link > *{position: relative}
#footer .link > *:not(:last-child){margin-right: 14px; padding-right: 15px;}
#footer .link > *:not(:last-child):after{content: ''; width: 1px; height: 12px; background: #64758D; content: ''; right: 0; top:50%; margin-top: -6px; position: absolute;}

#footer .f-sns{display: flex}
#footer .f-sns a{width: 28px; height: 28px; white-space: nowrap; overflow: hidden; text-indent: -999px; background: url('') center center no-repeat;}
#footer .f-sns .f{background-image: url('../img/common/f-f.png')}
#footer .f-sns .i{background-image: url('../img/common/f-i.png')}
#footer .f-sns .b{background-image: url('../img/common/f-b.png')}
#footer .f-sns .y{background-image: url('../img/common/f-y.png')}
#footer .f-sns .k{background-image: url('../img/common/f-k.png')}
#footer .f-sns .in{background-image: url('../img/common/f-in.png')}
#footer .f-sns a:not(:first-child){margin-left: 20px;}

#footer .bot {padding:36px 0 63px; border-top: 1px solid rgba(255, 255, 255, 0.30); }
#footer .logo{margin-right:48px;}
#footer .info{flex:1; min-width:0; margin-right:38px;}
#footer .add{display:flex; flex-wrap:wrap; font-weight:300;}
#footer .add span{position: relative; }
#footer .add span:not(:last-child){margin-right: 10px; padding-right: 13px;}
#footer .add span:not(:last-child):after{content: ''; width: 3px; height: 3px; background: #838a92; content: ''; border-radius:50%; right: 0; top:50%; margin-top: -1px; position: absolute;}
#footer .copy{margin-top: 20px; font-size: 1rem; }

#footer .etc{display: flex; gap:10px; }
#footer .etc > *{display: flex; align-items: center; width: 196px; height: 55px; background: url('') 23px center no-repeat; padding:0 20px 0 51px;border: 1px solid #535c66; border-radius: 5px;}
#footer .etc > *.e{background-image: url('../img/common/foot-e.png')}
#footer .etc > *.d{background-image: url('../img/common/foot-d.png')}


/* quick-menu */
.quick-bar { position: fixed; bottom: 40px; right: 40px; z-index: 100; }
.quick-menu .btn { display: block; width: 70px; height: 70px; border-radius: 10px; background: no-repeat 50% 50%; cursor: pointer; position: relative; }
.quick-menu .btn + .btn { margin-top: 10px; }
.quick-menu .btn-guide { background-color: #192F60; background-image: url('../img/main/ic-quick1.png'); }
.quick-menu .btn-faq { background-color: #50B0B9; background-image: url('../img/main/ic-quick2.png'); }
.quick-menu .btn-loc { background-color: #262626; background-image: url('../img/main/ic-quick3.png'); }
.quick-menu .btn-top { background-color: #fff; background-image: url('../img/main/ic-top.png'); border: 1px solid #D7D7D7;}
.quick-menu .quick-text { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 4px 12px; border-radius: 5px; white-space: nowrap; transition: right 0.3s ease, opacity 0.3s ease; opacity: 0; right: -20px; z-index: -1; }
.quick-menu .btn:hover .quick-text,
.quick-menu .btn:focus .quick-text  { opacity: 1; right: 90px; z-index: 100; }

.scroll-custom::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scroll-custom::-webkit-scrollbar-track {
    background-color: #ddd;
    border-radius: 5px;
}
.scroll-custom::-webkit-scrollbar-thumb {
    background-color: #878787;
    border-radius: 5px;
}

body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
body::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,.5);
    border-radius: 5px;
    display: none;
}
body::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.8);
    border-radius: 5px;
}


.f14{font-size: 14px;}