@charset "UTF-8"; 


body{overflow-x: hidden;height: auto;}
.poppins{font-family: 'Poppins', sans-serif;}
:root{
    --color-orange: #FF5500; 
    --color-orange2: #FDEFE9;
    --color-navy: #1C3550;
    --color-blue: #448FF7;
}



/* header */
header{position: fixed; top: 0; left: 0; width: 100%;  z-index: 111;}
.main header{background-color: rgba(255,255,255,0.95);}
.main header .inner{max-width: calc(1280px + 80px);}
.hd-wrap{height: 60px;}
.gnb{display: flex; align-items: center;}
.gnb ul{display: flex;}
.gnb ul li{margin-right: 40px;}
.gnb ul li.active .gnb-item{text-decoration: underline;}
.gnb-item{font-size: 16px; color: #fff; font-weight: 700; transition: .4s;}
.gnb-item:hover{opacity: .7;}
.gnb .btn-link { width: 100px; height: 30px; border-radius: 15px; background: #FDEFE9; color:#FF5500; text-align: center; font-size: 12px; font-weight: 700; transition: .4s;} 
.gnb .btn-link:hover{opacity: .7;}
.gnb .btn-link.blue{background-color: #fff; color: var(--color-blue);}
.gnb .btn-link.blue .ico-link{background-image: url(/resources/dist/img/cmn/ico-link_blue.svg);}
.gnb .btn-link.navy{background-color: #fff; color: var(--color-navy);}
.gnb .btn-link.navy .ico-link{background-image: url(/resources/dist/img/cmn/ico-link_navy.svg);}
.hd-logo a{background: no-repeat 50% / cover;background-image: url(/resources/dist/img/cmn/hd-logo_w.svg);width: 125px;height: 31px;}
.ico-link{width: 10px; height: 10px; background: no-repeat 50% / cover; background-image: url(/resources/dist/img/cmn/ico-link.svg); margin-left: 5px;}
.inner{max-width: calc(1280px + 80px); width: 100%; padding: 0 40px; margin: 0 auto;}
.gnb .link-btn{display: none;}
.main .hd-logo a{background-image: url(/resources/dist/img/cmn/hd-logo.svg);}
.main .gnb-item{color: #000;}
.gnb_1dli.gnb_on a{text-decoration: underline; text-decoration-line: underline;}
header.active.blue{background-color: rgba(68, 143, 247, 0.95);}
header.active.orange{background-color: rgba(255, 85, 0, 0.95);}
header.active.navy{background-color: rgba(35, 53, 78, 0.95);}
.app-btn.btn{width: 200px; height: 60px; color: #fff; font-size: 18px; font-weight: 700; border-radius: 100px; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 100px; border: 1px solid rgba(255, 85, 0, 0.25); background: #151515; transition: .4s;}
.app-btn.btn:hover{opacity: .7;}
.app-btn.btn i{background-repeat: no-repeat; background-size: cover; margin-right: 6px;}
.app-btn.btn-google i{background-image: url("/resources/dist/img/cmn/ico-google.svg"); width: 20px; height: 22px;}
.app-btn.btn-appStore i{background-image: url("/resources/dist/img/cmn/ico-apple.svg"); width: 20px; height: 24px;}
.app-btn:not(:last-child) { margin-right: 44px; } 
.app-btn.btn::after { content: ''; filter: blur(10px); background: var(--color-orange); border-radius: 50%; position: absolute; bottom: -10px; left: 0; width: 100%; height: 14px; } 
.gnb-bottom {display: flex; align-items: center;}
.gnb-bottom__link{display: flex; align-items: center;}
.sns-btn {margin-left: 20px; display: flex; align-items: center;}
.sns-btn .btn{padding: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--color-orange); transition: .4s;}
.sns-btn .btn:hover{opacity: .7;}
.sns-btn .btn:not(:last-child){margin-right: 10px;}
.sns-btn .btn-instagram i{width: 16px; height: 16px; background-image: url(/resources/dist/img/cmn/ico-instagram_w.svg);}
.sns-btn .btn-blog i{width: 11px; height: 14px; background-image: url(/resources/dist/img/cmn/ico-blog_w.svg);}
.sns-btn .btn-youtube i{margin-left: 3px; width: 11px; height: 12px; background-image: url(/resources/dist/img/cmn/ico-youtube_w.svg);}

.blue .sns-btn .btn{background: #fff;}
.blue .sns-btn .btn-instagram i{background-image: url(/resources/dist/img/cmn/ico-instagram_b.svg);}
.blue .sns-btn .btn-blog i{background-image: url(/resources/dist/img/cmn/ico-blog_b.svg);}
.blue .sns-btn .btn-youtube i{background-image: url(/resources/dist/img/cmn/ico-youtube_b.svg);}
.orange .sns-btn .btn{background: #fff;}
.orange .sns-btn .btn-instagram i{background-image: url(/resources/dist/img/cmn/ico-instagram_og.svg);}
.orange .sns-btn .btn-blog i{background-image: url(/resources/dist/img/cmn/ico-blog_og.svg);}
.orange .sns-btn .btn-youtube i{background-image: url(/resources/dist/img/cmn/ico-youtube_og.svg);}
.navy .sns-btn .btn{background: #fff;}
.navy .sns-btn .btn-instagram i{background-image: url(/resources/dist/img/cmn/ico-instagram_nv.svg);}
.navy .sns-btn .btn-blog i{background-image: url(/resources/dist/img/cmn/ico-blog_nv.svg);}
.navy .sns-btn .btn-youtube i{background-image: url(/resources/dist/img/cmn/ico-youtube_nv.svg);}


/* footer */
footer{background-color: #fff;border-top: 1px solid #E9E9E9;}
.ft-wrap{display: flex;padding: 42px 0;  position: relative;}
.ft-top{flex: none; margin-right: 40px;}
.ft-cont .ft-tit{color: #A8A8A8;font-size: 20px;font-weight: 700;line-height: 30px; margin-bottom: 10px;}
.ft-cont__bottom > div{display: flex; color: #A8A8A8;font-size: 16px;font-weight: 500;line-height: 30px; }
.ft-cont__bottom a{font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit;}
.ft-cont .copyright{margin-top: 16px; color: #BABABA;}
.ft-cont .copyright a{display: inline-block; text-decoration: underline; color: #BABABA; font-size: inherit;}
.top-btn{width: 40px; height: 40px; background: no-repeat 50% / cover; background-image: url(/resources/dist/img/cmn/top-btn.svg); position: absolute; right: 0; top: 40px;}
.menu-btn{display: none;}

/* quick */
.quick{position: fixed;bottom: 15px;right: 10px;z-index: 11;opacity: 0;visibility: hidden;transition: .4s;}
.quick.active{opacity: 1; visibility: visible;}
.quick .btn{width: 80px; height: 60px; border-radius: 10px; background-color: #fff;}
.quick .btn.top-btn{position: static; box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.10); background-image: url(/resources/dist/img/cmn/quick-top.png); transition: .3s;}
.quick .btn.top-btn:hover{background-image: url(/resources/dist/img/cmn/quick-top_hover.png);}
.quick-list .btn{border: 1px solid #E9E9E9;margin-bottom: 10px;display: flex;align-items: center;justify-content: center;position: relative;transition: .4s;}
.quick-list .btn i{width: 28px; height: 28px;}
.quick-list .btn-request i{background-image: url(/resources/dist/img/cmn/ico-doldol.svg);}
.quick-list .btn-appStore i{background-image: url(/resources/dist/img/cmn/ico-apple_org.svg);}
.quick-list .btn-google i{background-image: url(/resources/dist/img/cmn/ico-google_org.svg);}
.quick-list .btn-request span i{background-image: url(/resources/dist/img/cmn/ico-doldol_w.svg);}
.quick-list .btn-google span i{background-image: url(/resources/dist/img/cmn/ico-google.svg);}
.quick-list .btn-appStore span i{background-image: url(/resources/dist/img/cmn/ico-apple.svg);}
.quick-list span {color: #fff;font-size: 18px;font-weight: 700;margin-left: 7px;display: none; transform: translateX(100px); white-space: nowrap;} 
.quick-list .btn.btn-request span{font-size: 16px;}
.quick-list .btn:hover { background-color: var(--color-orange); width: 180px; border: 1px solid transparent; } 
.quick-list .btn:hover span {display: block; transform: translateX(0);} 
.quick-list { align-items: baseline; position: absolute; bottom: 100%; right: 0; display: flex; flex-direction: column; justify-content: right; } 
.quick-list li {display: flex; justify-content: right; width: 100%;}
.quick-list .btn.btn-google:hover i {background-image: url(/resources/dist/img/cmn/ico-google_w.svg);}
.quick-list .btn.btn-appStore:hover i {background-image: url(/resources/dist/img/cmn/ico-apple_w.svg);}
.quick-list .btn.btn-request:hover i {background-image: url(/resources/dist/img/cmn/ico-doldol_w.svg);}
.quick-list .btn.btn-request:hover {background-color: var(--color-blue);}



@media screen and (min-width: 1281px){
    .gnb{display: flex !important; opacity: 1 !important;}
    .gnb .link-btn{display: none !important;}
}

@media screen and (max-width: 1280px){
    
    .inner{max-width: 100%;}
    .hd-wrap{height: 80px;}
    .gnb{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #FF5500;z-index: 1;padding: 40px;padding-top: 80px;}
    .menu-btn{width: 40px;height: 40px;position: relative;border-radius: 10px;z-index: 9;padding: 0;display: block;}
    .menu-btn span{display: block;height: 5px;width: 24px;background: #FF5500;position: absolute;top: 50%;left: 50%;margin-left: -9px;transition: all 0.5s;}
    .menu-btn span:before,
    .menu-btn span:after{content:'';display: block;height: 100%;width: 100%;background: #FF5500;position: absolute;top: -10px;transform: rotate(0deg);transition: all 0.5s;}
    .menu-btn span:after{top: 10px;}
    header.on .menu-btn  span { background: transparent; } 
    header.on .menu-btn span:before { transform: rotate(135deg); top: 0; background: #fff;} 
    header.on .menu-btn  span:after { transform: rotate(-135deg); top: 0; background: #fff;} 
    .blue .menu-btn span {background: #fff;}
    .blue .menu-btn span:before, 
    .blue .menu-btn span:after {background: #fff;}
    .orange .menu-btn span {background: #fff;}
    .orange .menu-btn span:before, 
    .orange .menu-btn span:after {background: #fff;}
    .navy .menu-btn span {background: #fff;}
    .navy .menu-btn span:before, 
    .navy .menu-btn span:after {background: #fff;}
    .blue.on .menu-btn span {background: transparent;}
    .orange.on .menu-btn span {background: transparent;}
    .navy.on .menu-btn span {background: transparent;}
    .blue .gnb {background: var(--color-blue);}
    .blue .gnb-item{color: #fff;}
    .orange .gnb {background: var(--color-orange);}
    .navy .gnb {background: var(--color-navy);}
    .navy .gnb-item{color: #fff;}
    .hd-logo {position: relative; z-index: 11;}
    .ft-wrap { display: block; padding: 50px 0; } 
    .ft-top { margin-right: 0; margin-bottom: 10px; } 
    .gnb .link-btn{display: block;}
    header.on .hd-logo a{ background-image: url(/resources/dist/img/cmn/hd-logo_w.svg);}
    .gnb ul {display: block;overflow-y: auto;height: calc(calc(var(--vh, 1vh) * 100) - 320px);} 
    .gnb ul li { margin-right: 0; text-align: center; padding: 60px 0; border-top: 1px solid rgba(0,0,0,0.1); } 
    .gnb ul li:last-child {border-bottom: 1px solid rgba(0,0,0,0.1);}
    .gnb-item {color: #000;text-align: center;font-size: 38px;font-weight: 700;} 
    .gnb ul::-webkit-scrollbar-thumb { background: #000; } 
    .gnb-bottom {width: 100%;flex-direction: column-reverse;margin-top: 46px;} 
    .gnb .link-btn {display: flex;} 
    .gnb .btn-link { width: 200px; height: 60px; margin-right: 44px; border-radius: 100px; text-align: center; font-size: 24px; font-weight: 700; } 
    .gnb .btn-link .ico-link { width: 20px; height: 20px; } 
    .blue .app-btn.btn {border: 1px solid rgba(68, 144, 247, 0.25);}
    .blue .app-btn.btn::after {background: var(--color-blue);}
    .navy .app-btn.btn{border: 1px solid rgba(28, 53, 80 ,0.2);}
    .navy .app-btn.btn::after {background: var(--color-navy);}
    .sns-btn { margin-left: 0; margin-bottom: 55px; } 
    .sns-btn .btn { width: 40px; height: 40px; background: #fff; } 
    .sns-btn .btn:not(:last-child) { margin-right: 30px; } 
    .sns-btn .btn-instagram i{width: 22px; height: 22px; background-image: url(/resources/dist/img/cmn/ico-instagram_og.svg);}
    .sns-btn .btn-blog i{width: 14px; height: 18px; background-image: url(/resources/dist/img/cmn/ico-blog_og.svg);}
    .sns-btn .btn-youtube i{margin-left: 3px; width: 14px; height: 16px; background-image: url(/resources/dist/img/cmn/ico-youtube_og.svg);}
    
}

@media screen and (max-width: 768px) {
    .inner{padding: 0 20px;}

    .hd-wrap{height: 70px;}
    footer .inner {padding: 0 40px;}
    .ft-wrap {padding: 40px 0;}
    .gnb { padding: 20px; padding-top: 70px; } 
    .gnb-bottom { flex-wrap: wrap;  width: 100%; margin-top: 20px;}
    .gnb ul {height: calc(calc(var(--vh, 1vh) * 100) - 300px); }
    .gnb ul li { padding: 40px 0; } 
    .gnb-item { font-size: 30px; } 
    .app-btn:not(:last-child) {margin-right: 0; margin-bottom: 8px;}
    .app-btn.btn-google i { width: 13px; height: 14px; } 
    .app-btn.btn-appStore i { width: 14px; height: 17px; } 
    .app-btn.btn i { margin-right: 10px; } 
    .gnb .btn-link { width: 100%; height: 40px; font-size: 16px; margin-right: 0; } 
    .gnb .link-btn {margin-top: 30px; width: 100%;}
    .gnb .btn-link .ico-link { width: 13px; height: 13px; } 
    .gnb .link-btn a { width: 50%; height: 40px; font-size: 12px; } 
    .gnb .link-btn a img { width: 100%; height: 40px; } 
    .gnb .link-btn a:not(:last-child) { margin-right: 50px; margin-bottom: 0;} 
    .gnb .link-btn a.google-play i {width: 13px; height: 14px;}
    .gnb .link-btn a.app-store i {width: 14px; height: 16px;}

    .gnb-bottom__link{flex-direction: column;width: 100%;}
    .sns-btn {margin-bottom: 20px;}
    
}