@charset "utf-8";
:root {
	--vh: 100%;
}

html.lock{overflow:hidden;}
.lock body{overflow: hidden;}
.lock #app{overflow: hidden;}
.container{padding-top:22.4rem; padding-bottom:10rem}
.cmm-inner{max-width:127.6rem; padding:0 2.4rem; margin:0 auto;}

/* 공용 컴포넌트 : 외부링크 */
.link-list{display:flex; font-size:1.4rem; color:#686767}
.link-list img{height:1.3rem; width:auto;}
.link-list li:not(li:last-child){margin-right:1.8rem; padding-right:1.8rem; position:relative;}
.link-list li:not(li:last-child):before{content:""; display:block; width:1px; height:12px; background:#ddd; position:absolute; right:0; top:50%; transform:translateY(-50%)}
.link-list .link-btn{display:flex; align-items:center; gap:0.6rem;}

/* 공용 컴포넌트 : 톡 버튼 */
.talk-list{display:flex;}
.talk-list li:first-child{padding-right:2rem; margin-right:2rem; position:relative;}
.talk-list li:first-child:before{content:""; display:block; width:1px; height:12px; background:#ddd; position:absolute; right:0; top:50%; transform:translateY(-50%)}
.talk-list .talk-btn{font-weight:bold; position:relative;}
.safari .talk-list .talk-btn:before{left:2px}
.talk-list .talk-btn img{position:absolute; top:-30px; left:-12px; filter:drop-shadow(0 4px 4px rgba(0,0,0,0.08))}

#header{padding:4.7rem 0 1rem; border-bottom:1px solid #EAEDF4; position:fixed; top:0; left:0; right:0; width:100%; z-index: 1000; background:#fff;}
#header .header-top{display:flex; gap:5rem; margin-bottom:2.6rem;}
#header .header-logo{width:15.6rem;}
#header .header-logo a{display:block;}
#header .header-logo img{max-width:100%;}
#header .header-search{flex:1; padding-right:1rem;}
#header .search-bar{background: rgb(30,159,226); background: linear-gradient(118deg, rgba(30,159,226,1) 0%, rgba(18,192,198,1) 51%, rgba(8,30,175,1) 100%); padding:3px; border-radius:10px; width:100%; height:5rem; margin-top:1.3rem;}
#header .search-bar .bar-inner{background:#fff; display:flex; align-items:center; width:100%; height:100%; border-radius:8px; overflow:hidden; position:relative; }
#header .search-bar .bar-inner:before{content:""; display:block; width:2rem; height:2rem; position:absolute; left:1.4rem; top:50%; transform:translateY(-50%); background:url('../img/common/icon-search.svg') no-repeat center; z-index:1;}
#header .search-bar input[type="text"]{flex:1; padding:0 1rem 0 5rem; font-size:1.5rem; font-weight:bold;}
#header .search-bar input[type="text"]::placeholder{color:#888;}
#header .search-bar .submit-btn{font-size:1.5rem; font-weight:bold; color:#000; padding:0.4em 1em; border-radius:8px; margin-right:0.4rem; display:none;}
#header .search-keyword{display:flex; margin-top:1.5rem;font-size:1.4rem;font-weight:bold;}
#header .search-keyword .label{color:#004EBB; margin-right:1.6rem; padding-right:1.6rem; position:relative;}
#header .search-keyword .label:after{content:""; display:block; width:1px; height:12px; background:#ddd; position:absolute; right:0; top:50%; transform:translateY(-50%)}
#header .keyword-list{display:flex; gap:1.6rem;}
#header .header-link{margin-top:2.8rem;}
#header .header-bottom{display:flex;}
#header .all-menu-btn, #header .nav-btn{font-size:1.6rem; font-weight:bold;}
#header .all-menu-btn{display:flex; align-items:center; gap:2rem; height:4.8rem;}
#header .gnb{position:relative; padding-left:2.4rem; margin-left:2.4rem;}
#header .gnb:before{content:""; display:block; width:1px; height:12px; background:#ddd; position:absolute; left:0; top:50%; transform:translateY(-50%)}
#header .nav-list{display:flex; gap:3rem;}
#header .nav-list > li{position:relative;}
#header .nav-btn{display:inline-flex; align-items:center; height:4.8rem;}
#header .sub-nav-list{position:absolute; left:50%; top:4.2rem; transform:translateX(-50%); min-width:11.6rem; padding:2.4rem 2rem; background:#fff; border:1px solid #333; border-radius:4px; white-space:nowrap; text-align:center; font-weight:bold; box-shadow:0 10px 30px rgba(0,0,0,0.1); display:none;}
#header .sub-nav-list li + li{margin-top:1em;}
#header .talk-wrapper{flex:none; margin:16px 0 0 auto;}
#header .talk-list{flex:none; margin-left:auto; opacity:0; visibility: hidden; transition: opacity 0.2s linear, visibility 0.2s linear;}

#footer .cmm-inner{max-width:122.8rem; background:#f8f9fa; display:flex; flex-direction: column; align-items: center; padding:6rem 0 6rem; border-radius: 29px 29px 0 0;}
#footer .f-logo{margin-bottom:0.8rem;}
#footer .f-copy{margin-bottom:3rem; }
#footer .f-copy br{display:none;}
#footer .f-copy p{text-align: center; line-height:1.5; color:#888}
#footer .f-copy p + p{margin-top:0.4em;}
#footer .f-copy strong{color:#0757CE;}
#footer .f-menu{margin-bottom:4rem;}
#footer .f-menu-item{font-size:1.5rem; font-weight:bold;}
#footer .f-sns{margin-bottom:2rem;}

.f-sns{display:flex; gap:0.2rem; }
.f-sns .sns-btn{display:block; width:4rem; height:4rem;}
.f-sns .sns-btn.blog{background:url('../img/common/icon-pr-blog.svg') no-repeat center / 100% auto;}
.f-sns .sns-btn.instagram{background:url('../img/common/icon-pr-instagram.png') no-repeat center / 100% auto;}

.m-menu-wrapper{background:rgba(0,0,0,0.1); position: fixed; top:0; left:0; right:0; bottom:0; z-index: 1000; display:none; width:100vw; width:100dvw; overflow:hidden;}
.m-menu-wrapper .m-menu{height:100%; background:#fff; max-width:40rem; position: relative; transform: translateX(-100%); transition: transform 0.2s;}
.m-menu-wrapper .cmm-inner{padding:4rem 1.5rem; height:100%; overflow-y:auto; overflow-x: hidden;}
.m-menu-wrapper .m-menu-header{display:flex; justify-content: space-between; align-items: center; margin-bottom: 28px;}
.m-menu-wrapper .menu-logo img{height:50px;}
.m-menu-wrapper .close-btn img{width:40px;}
.m-menu-wrapper .m-menu-link{background:#f8f9fa; border:1px solid #eee; border-radius:5px; display:flex; align-items:center; justify-content:center; height:50px; margin-bottom:32px;}
.m-menu-wrapper .m-menu-link .link-list li:not(li:last-child){margin-right:10px; padding-right:10px; letter-spacing:-0.07em; font-size:13px;}
.m-menu-wrapper .m-menu-link .link-list .link-btn{font-size:1.2rem;}
.m-menu-wrapper .nav-list .title{font-size:1.5rem; color:#888; font-weight:bold; margin-bottom:1.6em;}
.m-menu-wrapper .nav-list > li{padding:0 1rem;}
.m-menu-wrapper .nav-list > li + li{margin-top:3rem; padding-top:3rem; border-top:1px solid #eee;}
.m-menu-wrapper .sub-nav-list{display:flex; flex-wrap:wrap; gap:1em 0; font-size:1.8rem; font-family:'Pretendard', sans-serif;}
.m-menu-wrapper .sub-nav-list li{font-weight:600; width:50%; padding-right:1em;}
.m-menu-wrapper .m-menu-footer{background:#f8f9fa; position: absolute; bottom:0; left:0; width:100%; height:10rem; display:flex; justify-content: space-between; align-items: center; padding:0 3.2rem;}
/* .m-menu-wrapper .sub-nav-list.col-3 li{width:33.333%} */


@media screen and (max-width:1400px){
    #header .talk-list{opacity: 1; visibility: visible;}
}

@media screen and (max-width:1024px){
    .container{padding-top:16.4rem;}
    #header{padding:2.2rem 0 6rem;}
    #header .gnb,
    #header .header-link,
    #header .search-keyword{display:none;}
    #header .cmm-inner{display:flex;}
    #header .header-top{flex:1; margin-bottom:2.6rem;}
    #header .header-logo{width:10rem;}
    #header .talk-wrapper{margin-top:3rem;}
    #header .header-search{position: absolute; bottom:2rem; left:0; margin:0; width:100%; background:none; padding:0;}
    #header .search-bar{background:none; padding:0 2.4rem;}
    #header .search-bar .bar-inner{background:#eee;}
    #header .search-bar .bar-inner input[type="text"]{background:transparent; padding-left:1em;}
    #header .search-bar .bar-inner:before{display:none;}
    #header .search-bar .submit-btn{text-indent: -9999px; display:block !important; background:url('../img/common/icon-search-m.svg') no-repeat center; width:5.6rem; height:4rem;}
    #header .header-bottom{flex-direction: row-reverse;}
    #header .all-menu-btn{width:3.4rem; height:3.4rem; display:flex; align-items: center; justify-content: center; margin:2.2rem -0.4rem 0 2rem;}
    #header .all-menu-btn span{display:none; }
    #footer .f-copy br{display:block;}
    #footer .link-list{display:none;}    

}

@media screen and (max-width:800px){
	.container:has(.page-sub){padding-bottom:4rem;}
	.container{padding-top:16rem;}
	#header{padding-top:2rem;}
	#header .search-bar input[type="text"]{font-size:14px; font-weight:normal; letter-spacing: -0.05em;}
    #footer .f-copy p{font-size:1.5rem;}
}


@media screen and (max-width:500px){
    .m-menu-wrapper .m-menu{max-width:100%}
    .m-menu-wrapper .m-menu-link{width:calc(100% + 3rem); margin-left:-1.5rem; border-radius: 0; border:none; padding:0 1.5rem;}
    .m-menu-wrapper .link-list{transform: scale(0.9);}
    .m-menu-wrapper .m-menu-link .link-list .link-btn{gap:3px; font-size:1.4rem;}
    .m-menu-wrapper .sub-nav-list{font-size:1.8rem;}

	.m-menu-wrapper .m-menu-link .link-list li:not(li:last-child){margin-right:6vw; padding-right:6vw;}
}

@media screen and (max-width:360px){
    .m-menu-wrapper .m-menu-link{width:calc(100% + 3rem); margin-left:-1.5rem; border-radius: 0; border:none; padding:0 1.5rem;}
    .m-menu-wrapper .link-list{transform: scale(0.9);}
    .m-menu-wrapper .link-list .link-btn{gap:3px;}
    .m-menu-wrapper .sub-nav-list{font-size:1.6rem;}
    #header .talk-wrapper{display:none;}
    #header .all-menu-btn{margin-top:2rem;}
    #header .header-top{margin-bottom:1.6rem;}
}

@media screen and (min-width:1024px){
    #header .sub-nav-list a:hover{text-decoration:underline}
    #header .search-bar .submit-btn:hover{background-color:#eee;}
    #header .keyword-list a:hover{text-decoration:underline;}
    #header .nav-list li:hover .nav-btn{color:#004EBB}
    #header .nav-list li:hover .sub-nav-list{display:block;}
    .link-list .link-btn:hover{text-decoration: underline;}
}