@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
:root {
    --top-height:100px; /* 메뉴높이 */
	--menu-bg-h:500px; /* 마우스오버 배경 높이 */
}

#top { position: fixed; left:0; right:0; top:0; transition:all 1s, background 0ms; z-index: 190; height:var(--top-height); }
body.scrolled:not(.fullpage):not(.m-menu-on) #top,
body:not(.m-menu-on) .is-subpage #top,
body:not(.m-menu-on) #top.bg { background:#fff; transition-duration:400ms; }

#top:before { content:""; position:absolute; left:0; top:0; height:0; right:0; backdrop-filter:blur(12px); background:rgba(255,255,255,.6); z-index:-1; }
.menu-on #top:before { height:var(--menu-bg-h); transition-duration:400ms; }

#top .top-wrap { position:relative; height:100%; padding:0 var(--top-padding); display:flex; align-items:center; justify-content: space-between; z-index:3; transition-duration:700ms; }

#top .top-wrap .left { width:200px; height:50px; }
#top .top-wrap .left .logo { display:block; height:100%; background: url("../img/logo-white.png") left center/contain no-repeat; transition-duration: 200ms; }
body.scrolled:not(.fullpage):not(.m-menu-on) #top .top-wrap .left .logo,
body:not(.m-menu-on) .is-subpage #top .top-wrap .left .logo,
body:not(.m-menu-on).no-bg #top .top-wrap .left .logo { background-image: url("../img/logo.png"); }

#top .top-wrap .right { position:relative; display: flex; align-items: center; transition-duration:200ms; }
#top .top-wrap .right section { position: relative; margin-right: 20px; padding:20px 0; }
#top .top-wrap .right section:hover { z-index:3; }
#top .top-wrap .right section span[class*="-btn"] { display:block; width:20px; height:20px; background:none no-repeat center/contain; filter:invert(92%) sepia(79%) saturate(2%) hue-rotate(128deg) brightness(106%) contrast(101%); cursor:pointer; }
body.scrolled:not(.fullpage):not(.m-menu-on) #top .top-wrap .right section span[class*="-btn"],
body:not(.m-menu-on) .is-subpage #top .top-wrap .right section span[class*="-btn"],
body:not(.m-menu-on).no-bg #top .top-wrap .right section span[class*="-btn"] { filter:none; }


#top .top-wrap .right .top-search .search-btn { background-image:url('../img/top-icon-search.png'); }
#top .top-wrap .right .langs .sub { width:110px; text-align:left !important; }
#top .top-wrap .right .langs .sub img { width:20px; border:1px solid #ddd; border-radius:3px; }
#top .top-wrap .right .langs .lang-btn { background-image:url('../img/top-icon-language.png'); }
#top .top-wrap .right .links .member-btn { background-image:url('../img/top-icon-login.png'); }
#top .top-wrap .right .sns .sns-btn { background-image:url('../img/top-icon-sns.png'); }


#top .top-wrap .right .sns .sub a { position:relative; text-align:left; transition:all 400ms, opacity 400ms var(--sns-delay); width:110px; display:block; padding:5px 0 5px 35px; z-index:1; }
#top .top-wrap .right .sns .sub a:before,
#top .top-wrap .right .sns .sub a:after { content:""; position:absolute; left:0; top:calc(50% - 15px); width:30px; height:30px; border-radius:99px; }
#top .top-wrap .right .sns .sub a:before { z-index:-1; }
#top .top-wrap .right .sns .sub a:after { background:none no-repeat center/22px; opacity:.5; }


#top .top-wrap .right .sns .sub a.kakao:after { background-image:url('../img/sns_icon_kakao_gray.png'); }
#top .top-wrap .right .sns .sub a.instagram:after { background-image:url('../img/sns_icon_instagram_gray.png'); }
#top .top-wrap .right .sns .sub a.naver:after { background-image:url('../img/sns_icon_naver_gray.png'); }
#top .top-wrap .right .sns .sub a.facebook:after { background-image:url('../img/sns_icon_facebook_gray.png'); }
#top .top-wrap .right .sns .sub a.youtube:after { background-image:url('../img/sns_icon_youtube_gray.png'); }
#top .top-wrap .right .sns .sub a.twiter:after { background-image:url('../img/sns_icon_twiter_gray.png'); }

#top .top-wrap .right .sns .sub a:hover { color:#333; }
#top .top-wrap .right .sns .sub a.kakao:hover:before { background:#ffe800; }
#top .top-wrap .right .sns .sub a.instagram:hover:before { background:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b); }
#top .top-wrap .right .sns .sub a.naver:hover:before { background:#06be34; }
#top .top-wrap .right .sns .sub a.facebook:hover:before { background:#435e99; }
#top .top-wrap .right .sns .sub a.youtube:hover:before { background:#d4262c; }
#top .top-wrap .right .sns .sub a.twiter:hover:before { background:#27a9e0; }
#top .top-wrap .right .sns .sub a:hover:after { opacity:1; }
#top .top-wrap .right .sns .sub a:not(.kakao):hover:after { filter:brightness(0) invert(1); }


#top .top-wrap .right .sns:hover .sub a { opacity:1; }
#top .top-wrap .right .sns:hover .sub a:nth-child(1) { --sns-delay:100ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(2) { --sns-delay:200ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(3) { --sns-delay:300ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(4) { --sns-delay:400ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(5) { --sns-delay:500ms; }
#top .top-wrap .right .sns:hover .sub a:nth-child(6) { --sns-delay:600ms; }


#top .top-wrap .top-search-box { align-items: center; display: flex; height: 100%; justify-content: center; }
#top .top-wrap .top-search-box form { border: 1px solid #fff; display: flex; align-items:center; padding: 7px 8px 8px; width: 300px; }
#top .top-wrap .top-search-box form .searchbox { background: transparent; border: 0; flex: 1; }
#top .top-wrap .top-search-box form .searchbox::placeholder { color: #ddd; }
#top .top-wrap .top-search-box form .searchbox:focus { outline: none; }
#top .top-wrap .top-search-box form button { background: transparent; border: 0; color:var(--main-color2); flex: 0 0 25px; margin-left: 5px; }
#top .top-wrap .top-search-box form button:focus { outline: none; }
#top .top-wrap .top-search-box form .x-close { color:#444; font-size:1.8rem; margin-left:5px; cursor:pointer; display: flex; }



#top .top-wrap .right section .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:0 25px; background:#fff; border-radius:10px; border:1px solid transparent; opacity:0; visibility:hidden; max-height:0; transition-duration:300ms; }
#top .top-wrap .right section:hover .sub,
#top .top-wrap .right section .sub:hover { max-height:300px; padding:15px 25px; border-color:#ddd; opacity:1; visibility:visible; transition-duration:600ms; }

#top .top-wrap .right section .sub:before { content:""; position:absolute; bottom:calc(100% - 10px); left:50%; transform:translateX(-50%) rotate(45deg); width:20px; height:20px; border-radius:5px 0 0 0; background:#fff; border-left:1px solid #ddd; border-top:1px solid #ddd; }
#top .top-wrap .right section .sub a { display:block; color:#aaa; padding:2.5px 0; text-align:center; opacity:0; font-size:.875rem; transition-duration:400ms; }
#top .top-wrap .right section:hover .sub a { opacity:1; }



/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { width:25px; height:26px; transition-duration: 300ms; z-index:2; cursor:pointer; }
#top .top-menu-btn div { position:relative; width:5px; height:5px; background:#fff; border-radius:99px; }
#top .top-menu-btn div:before,
#top .top-menu-btn div:after { content:""; position:absolute; top:0; width:100%; height:100%; background:inherit; border-radius:inherit; }
#top .top-menu-btn div:before { left:10px; }
#top .top-menu-btn div:after { left:20px; }
#top .top-menu-btn div:nth-child(2) { margin:5px 0; }

body.scrolled:not(.fullpage):not(.m-menu-on) #top .top-menu-btn div,
body:not(.m-menu-on) .is-subpage #top .top-menu-btn div,
body:not(.m-menu-on).no-bg #top .top-menu-btn div { background:#333; }

.header_tel{position:relative; background:var(--main-color4); border-radius: 10px; margin-right:20px;display:flex; flex-direction: column;     padding: 10px 15px 10px 55px;}
.header_tel:before{position:absolute; content:''; left:15px; top:50%; transform: translateY(-50%); background:url(https://sha119.co.kr/theme/kt002/img/footer-top-icon1.png) no-repeat;     width: 28px;
    height: 28px;
    background-size: contain;}
.header_tel span{font-size:0.9rem; color:#fff; opacity:0.8;}
.header_tel strong{color:#fff; font-size:1.2rem;}
/*#top.bg .header_tel{border:2px solid var(--main-color4);border-radius: 10px; margin-right:20px;display:flex; flex-direction: column;   padding: 10px 15px 10px 50px;}
#top.bg .header_tel:before{background:url(https://sha119.co.kr/theme/kt002/img/footer-top-icon_blue.png) no-repeat;}
#top.bg .header_tel span,
#top.bg .header_tel strong{color:var(--main-color4);}*/



.fixed_inquery{display:flex; justify-content: center; position: fixed; bottom:0; left:50%; transform: translateX(-50%) translateY(0);;width:100%; max-width:1380px; z-index: 9999; transition: transform 0.3s ease; }
  .fixed_inquery.hide {
  transform: translateX(-50%) translateY(100%);
}
.fixed_inquery .fixed_left{background:#163671; display:flex; align-items: center; padding:18px 40px; border-radius:30px 0 0 0; }
.fixed_inquery .fixed_left a{display:flex; flex-direction: column; margin-left:15px;}
.fixed_inquery .fixed_left a span,
.fixed_inquery .fixed_left a strong,
.fixed_inquery .fixed_right p,
.fixed_inquery .fixed_right a{color:#fff; white-space: nowrap;}
.fixed_inquery .fixed_left a strong{font-size:1.5em;}
.fixed_inquery .fixed_right{position:relative; border-radius:0 30px 0 0 ; display:flex; align-items: center; justify-content: space-between; background: #111; padding:18px 40px 18px 30%;}
.fixed_inquery .fixed_right .fixed_lawyers{position:absolute; bottom:0; left:20px;}
.fixed_inquery .fixed_right p{margin-left:30px;}
.fixed_inquery .fixed_right p strong{font-size:1.5em;}
.fixed_inquery .fixed_right .btns{display:flex; margin-left:70px;}
.fixed_inquery .fixed_right .btns .blueBtn,
.fixed_inquery .fixed_right .btns .closeFixBtn{position:relative; padding:10px 40px 10px 20px; border-radius: 30px;}
.fixed_inquery .fixed_right .btns a.blueBtn {
  background-color: #2760c5;
  animation: backgroundLoop 1s infinite alternate ease-in-out;
  margin-right:10px;
}


@keyframes backgroundLoop {
  0% {
    background-color: #2760c5;
  }
  100% {
    background-color: #163671;
  }
}


.fixed_inquery .fixed_right .btns a.blueBtn:after{position:absolute; content:''; top:50%; right:20px; width:8px; height:14px; transform: translateY(-50%); background:url(https://sha119.co.kr/theme/kt002/img/fixed_arrow.png)}
.fixed_inquery .fixed_right .btns .closeFixBtn{border:1px solid #fff; color:#fff;}
.fixed_inquery .fixed_right .btns .closeFixBtn:hover{cursor: pointer;}
.fixed_inquery .fixed_right .btns .closeFixBtn:after{position:absolute; content:''; top:50%; right:20px; width:8px; height:14px; transform: rotate(90deg) translate(-50%);  background:url(https://sha119.co.kr/theme/kt002/img/fixed_arrow.png)}



@media (max-width: 1380px) {
   .fixed_inquery{max-width:100%;}
   .fixed_inquery .fixed_left{padding:18px 20px; width:25%;}
   .fixed_inquery .fixed_left img{width:20%;}
   .fixed_inquery .fixed_left a strong{font-size:1.3em;}
   .fixed_inquery .fixed_right{padding:18px 30px 18px 27%; width:75%;}
   .fixed_inquery .fixed_right .btns{margin-left:40px;}
   .fixed_inquery .fixed_right .fixed_lawyers{left:-10px; width:35%;}
}

@media (max-width: 1024px) {
    :root {
        --top-height:70px;
    }

    .header_tel{padding: 10px 10px 10px 45px; }
	.header_tel:before{width: 26px; height: 26px;}
	.header_tel strong{font-size:1.1rem;}
	#top .top-wrap{margin-top:10px;}
	 .fixed_inquery{display:none;}
}

@media (max-width: 767px) {
	:root {
        --top-height:60px;
    }
    #top:before{content: ""; position: absolute; width: 100%; height: 70px; backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px); background: none; }
	#top .top-wrap .left { height:36px; }

	#top .top-wrap .right section { margin-right:10px; }

    #top .top-wrap .right .sns { display:none; }


    #top .top-wrap .right section .sub { padding:0 15px; }
    #top .top-wrap .right section:hover .sub,
    #top .top-wrap .right section .sub:hover { padding:10px 15px; }

	#top .top-wrap .right .top-search .sub { position:fixed; left:0; top:0; right:0; transform:translateX(0); padding:10px 15px; z-index:999; border-bottom:1px solid #ddd; border-radius:0; transition-duration:600ms; }
	#top .top-wrap .right .top-search .sub:before { display:none; }

	#top .top-wrap .right .top-search:hover .sub,
	#top .top-wrap .right .top-search .sub:hover { max-height:0; opacity:0; visibility:hidden; }

	#top .top-wrap .top-search-box { opacity:0; }
	#top .top-wrap .top-search-box form { width:100%; }

	.on-searchbox #top .top-wrap .right .top-search .sub { max-height:200px; opacity:1; visibility:visible; }
	.on-searchbox #top .top-wrap .top-search-box { opacity:1; transition-duration:300ms; }


    #top .top-menu-btn { margin-left:10px; }

    .header_tel{padding: 5px 10px; margin-right:10px;}
	.header_tel:before{display:none;}
	.header_tel strong{font-size:0.9rem; white-space: nowrap;}

}

@media (max-width: 425px) {
	.header_tel{margin-right:5px; padding:5px 7px;}
    	.header_tel span{font-size:0.75rem;}
    	#top .top-wrap .left{height:30px;}
	}

}
/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { }
body.m-menu-on #menu { display:none; }

#menu .ul { position:relative; width:100%; display: flex; justify-content: center; height:100%; z-index:10; }
#menu .ul .li { position:relative; padding:0 2em; z-index:1; transition-duration:300ms; }
#menu .ul .li:before,
#menu .ul .li:after { content:""; position:absolute; left:0; top:0; right:0; opacity:0; z-index:-1; }
body.menu-on #menu .ul .li { padding:0 3rem; }
body.menu-on #menu .ul .li:before { height:var(--menu-bg-h); }

#menu .ul .li:after { backdrop-filter:blur(10px); background:rgba(115,115,115,.5); height:0; transition:all 400ms 0s, height 400ms 100ms; }
#menu:hover .ul .li:after { height:var(--menu-bg-h); background:var(--main-color1); }
#menu .ul .li:hover:after { opacity:1; }

#menu .ul .li .a { position:relative; display:flex; align-items:center; justify-content:center; height:var(--top-height); font-weight:500; font-size:1.4rem; color:#fff; white-space: nowrap; }
#menu .ul .li .a:before { content:""; position:absolute; left:50%; top:100%; height:2px; background:#fff; width:0; transform:translateX(-50%); transition-duration:400ms; }
body.menu-on #menu .ul .li:hover .a { color:#fff; }
body.menu-on #menu .ul .li:hover .a:before { width:calc(100% + 30px); }

body.scrolled:not(.fullpage):not(.m-menu-on) #menu .ul .li:not(:hover) .a,
body:not(.m-menu-on) .is-subpage #menu .ul .li:not(:hover) .a,
body:not(.m-menu-on).no-bg #menu .ul .li:not(:hover) .a { color:#111; }


#menu .sub-wrap { position: absolute; top:100%; left:50%; transform:translateX(-50%); border-radius:10px; padding:20px; opacity:0; visibility:hidden; }
body.menu-on #menu .sub-wrap { opacity:1; visibility:visible; transition-delay:300ms; }
#menu .sub-wrap .sub-a { color: #fff; display: block; padding: 10px; white-space: nowrap; text-align:center; font-weight:300; }
#menu .sub-wrap .sub-a:hover { font-weight:400; }


body.scrolled:not(.fullpage):not(.m-menu-on) #menu .li:not(:hover) .sub-wrap .sub-a,
.no-bg #menu .li:not(:hover) .sub-wrap .sub-a,
body.fullpage .is-subpage #menu .li:not(:hover) .sub-wrap .sub-a { color:#333; }

#menu .depth2 li { position:relative; transition-duration: 400ms; }



@media (max-width: 1400px) {
	#menu { display:none; }
}