@charset "utf-8";
.clear {clear:both}


/**** 헤더기본 *****/
#header{font-size:62.5%; background:#fff; position:relative; width:100%;height:60px;margin:0;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;z-index:99999}
.logo{position:absolute;height:60px;top:50%;left:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);
	z-index:999;transition: all .6s cubic-bezier(.19,1,.22,1);-webkit-transition: all .6s cubic-bezier(.19,1,.22,1);-o-transition: all .6s cubic-bezier(.19,1,.22,1);-moz-transition: all .6s cubic-bezier(.19,1,.22,1);
	-ms-transition: all .6s cubic-bezier(.19,1,.22,1);}
.logo img{height:60px;}


/**** 헤더 스크롤 후 *****/
.popular_nav{position:relative;background:#fff;width:100%;height:0;line-height:0;transition:.3s;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;top:0;z-index:99}
.popular_nav ul{display:flex;justify-content:space-between;width:100%;height:100%;text-align:center;background:#fff}
.popular_nav li{position:relative;width:33%;font-size:1.3rem;font-weight:700;display:none}
.popular_nav li:nth-child(1), .popular_nav li:nth-child(5){display:none}
.popular_nav li:nth-child(5) img{height:100%;width:auto;}




/****** 하단고정메뉴 *****/
.w_popup_close {text-align:right}
.w_popup_close img {height:40px}
.w_popup_img img {width:100%;image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;}
.w_popup {position:fixed; bottom:-1000px; left:0; width:100%;z-index:9998;}
.w_counsel { position:fixed; bottom:-1000px; left:0; width:100%;z-index:9998}
.w_counsel_inner {background:rgba(0,0,0,0.7);}
.w_new_quick {position:fixed; left:0; bottom:0; width:100%; background:#fff; z-index:9999; border-top:solid 1px #dedede}
.w_new_quick ul li {width:20%; float:left;text-align:center}
.w_new_quick ul li img {height:60px}
.click_view_2 {display:none}
.click_view_4 {display:none}




/****** 지점 *****/
.office_open{z-index:99999; }
.office_open:before{content:''; position:absolute; left:-11px; top:3px; width:1px; height:18px;  }
.office_open-whiteicon:before{}
.office_open_1 {position:absolute; right:0; top:0; width:60px; height:60px;background:url(/images/common/m_map.png?ver=1.0) no-repeat;background-size:cover;}
.office_open_2 {}
.gnb_office{position: fixed;right: 0; top: 60px; width:100%; z-index:99999;}
.gnb_office ul{float:right; background-color: #fff;width: 50%; box-sizing: border-box;font-size: 0; display: none;}
.gnb_office ul li{ position: relative; text-align: left;display: block; box-sizing: border-box;border-bottom: 1px solid #dedede;}
.gnb_office ul li:last-child{border-bottom:none;}
.gnb_office ul li a{display: block; font-size: 3.2vw; font-weight:600; color:#000;padding:6.5% 0 6.5% 11%;}
.office_select {background:#f69433; color:#fff !important}


/****** 상담신청 *****/
.counsel_input{display: flex; flex-wrap: wrap;flex-direction: column;padding: 15px;height: 100px;justify-content: center;}
.counsel_input .ff_input {border: none;border-bottom: solid 1px #fff;width: 32vw;background: none; font-size: 12px;color: #fff;height: 32px; margin-right: 10px;}
.counsel_input .label {position: relative; font-family: sans-serif;padding-left: 10px;font-size: 12px;user-select: none;/*margin: 0 30px 0 50px;*/ line-height: 32px;height: 32px;}
.counsel_input .checkbox {display: none;}
.counsel_input .check-mark {width: 16px; height: 16px; background-color: #3a3a3a;  position: absolute;left: 0;display: inline-block; top: 11px;border-radius: 50%;border: 1px solid #999999;}
.counsel_input .label .checkbox:checked + .check-mark { background: linear-gradient(to right, #f7983a, #f76e44); transition: .1s;}
@-webkit-keyframes btn_back_animation { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } 
@-moz-keyframes btn_back_animation { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } 
@-o-keyframes btn_back_animation { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } 
@keyframes btn_back_animation { 0%{background-position:0% 50%} 50%{background-position: 50% 100%} 100%{background-position: 0% 50%} }
.f_btn {width: 22vw; height: 60px;line-height: 60px; border-radius: 5px; text-align: center; background:linear-gradient(-45deg, #f79433, #f76e44, #f18eaa, #5bc4bf);background-size: 400% 400%;
	animation: btn_back_animation 5s ease infinite; font-size: 12px;color: #060c16; display: inline-block;font-family: 'Montserrat';font-weight: bold;}





/****** 햄버거 / 햄버거 열었을시 *****/
.drawer{height:100%;}
.drawer-open{overflow:hidden !important ; width:100%}
.drawer-nav{position:fixed;z-index:2;top:0;overflow-y:scroll;width:80vw;height:100%;color:#222;background-color:#fff;z-index:9999999}
.drawer-brand{font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;color:#222}
.drawer-menu{margin:0;padding:0;list-style:none;letter-spacing:-0.03rem; padding:15px 0 15px 0;	 }
.drawer-menu-item{font-size:17px;display:block;padding:1.2rem 2rem;margin:0;text-decoration:none;color:#222;outline:none; font-weight:600}
.drawer-menu-item:hover{text-decoration:none;color:#1a1a1a;}
.drawer-overlay{position:fixed;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(255,255,255,1);z-index:999999}
.drawer-open .drawer-overlay{display:block}
.drawer--top .drawer-nav{top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);transition:top .6s cubic-bezier(.19,1,.22,1)}
.drawer--top.drawer-open .drawer-nav{top:0}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{right:0}
.drawer--left .drawer-nav{left:-100vw;-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);transition:left .6s cubic-bezier(.19,1,.22,1)}
.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{left:0}
.drawer--left.drawer-open .drawer-hamburger{left:80vw}
.drawer--right .drawer-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}
.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{right:0}
.drawer--right.drawer-open .drawer-hamburger{right:0}
.drawer-hamburger{position:absolute;padding:0 0 0 20px;top:-0.6rem;left:0;display:block;box-sizing:content-box;width:2.8rem; height:100%;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);-webkit-transform:translateZ(0);transform:translateZ(0);border:0;outline:0;background-color:transparent;z-index:9999999;}
.drawer-hamburger:hover{cursor:pointer;background-color:transparent}
.drawer-hamburger-icon{position:relative;display:block;margin-top:15px}
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#fff}
.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{position:absolute;top:-10px;left:0;content:" "}
.drawer-hamburger-icon:after{top:10px}
.drawer-open .drawer-hamburger-icon{background-color:transparent;margin-top:10px}
.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{top:0;background-color:#fff}
.drawer-open .drawer-hamburger-icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.drawer-open .drawer-hamburger-icon:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}
.drawer--sidebar,.drawer--sidebar .drawer-contents{background-color:#fff}
.drawer-dropdown-menu{display:none;box-sizing:border-box;width:90%;margin:1% 5%;padding:0;padding:1.5rem 3rem;}
.drawer-dropdown-menu:after{display:block;clear:both;content:''}
.drawer-dropdown-menu > li{width:50%;float:left;list-style:none}
.drawer-dropdown-menu-item{line-height:3.2rem;font-size:1.4rem;display:block;padding:0;text-decoration:none;color:#222;}
.drawer-dropdown-menu-item:hover{text-decoration:none;background-color:transparent}
.drawer-dropdown.open > .drawer-dropdown-menu{display:block}
.drawer-dropdown .drawer-caret{display:inline-block;	position:absolute;width:0;height:0;margin-top:1rem;right:2rem;-webkit-transition:opacity .5s ease,-webkit-transform .5s ease;transition:opacity .5s ease,-webkit-transform .5s ease;
	transition:transform .5s ease,opacity .5s ease;transition:transform .5s ease,opacity .5s ease,-webkit-transform .5s ease;-webkit-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}
.drawer-dropdown.open .drawer-caret{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.drawer-container{margin-right:auto;margin-left:auto}
.drawer-hamburger{transition:none;}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{background-color:#1a1a1a;width:26px;display:block;}
.drawer--left.drawer-open .drawer-hamburger{left:0;top:0;z-index:999999999;background:#fff;height:70px;position:fixed;transition:none; width:100vw;} /*201215 width:100vw 추가*/
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before{background-color:#1a1a1a}
.drawer-hamburger-icon:after, .drawer-hamburger-icon:before{top:-7px;}
.drawer-hamburger-icon:after{top:7px;}
.drawer-nav{width:100vw;position:fixed;padding-top:80px;}
.overflow-hidden{position:fixed;overflow:hidden;;height:100%}		
.best_icon{border-bottom:1px solid #e2e2e2}
.best_icon ul{}
.best_icon ul:after{clear:both;display:block;content:'';}
.best_icon ul li{float:left;width:20%; text-align:center; }
.best_icon ul li img{width:100%;}



/****************************************** 햄버거 안 이벤트 모션 ************************************************************/
.m_top7{letter-spacing:-0.03rem;}
.m_top7 h2{font-size:2rem;font-weight:bold;padding:1.5rem 2rem;border-bottom:1px solid #e2e2e2;overflow: hidden;}
#lnb_top7{position:relative;}
#lnb_top7 p{position:relative;z-index:999;padding-left:2rem;-webkit-animation-name: ColorAni;animation-name: ColorAni;animation-duration:3s;-webkit-animation-duration:3s;-moz-animation-duration:3s;-o-animation-duration:3s;animation-iteration-count: infinite;}
#lnb_top7 .fa-heart{position:absolute;font-size:10px;left:2rem;top:2.6rem;color:#526cb4;-webkit-animation-name: DotColorAni;animation-name: DotColorAni;animation-duration:3s;-webkit-animation-duration:3s;-moz-animation-duration:3s;-o-animation-duration:3s;animation-iteration-count: infinite;z-index:11;}
#nav_contain #lnb_top7 .fa-heart{left:0;}
#best_heart .fa-heart{font-size:20px;left:50%;color:#526cb4;-webkit-animation-name: DotColorAni;animation-name: DotColorAni;animation-duration:3s;-webkit-animation-duration:3s;-moz-animation-duration:3s;-o-animation-duration:3s;animation-iteration-count: infinite;z-index:11;}
#lnb_top7 span{position:relative;z-index:999;padding-left:8px;}
#lnb_top7 i.back_ani{position:absolute;width:100%;height:100%;background:#526cb4;top:0;left:0;font-style:normal;-webkit-animation-name: lnbPointBack;animation-name: lnbPointBack;animation-duration:3s;-webkit-animation-duration:3s;-moz-animation-duration:3s;
	-o-animation-duration:3s;animation-iteration-count: infinite;z-index:9}

@-webkit-keyframes DotColorAni {
	0% {opacity:0}
	10%{opacity:1}
	20%{opacity:0}
	30%{opacity:1}
	40%{opacity:0}
	50%{opacity:1}
	60%{opacity:0}
	70%{opacity:1}
	80%{opacity:0}
	90%{opacity:1}
	100%{opacity:0}
}
@-webkit-keyframes ColorAni {
	0% {color:#1a1a1a;transform: rotateX(0);}
	25% {color:#fff;transform: rotateX(0);}
	50% {color:#526cb4;transform: rotateX(0);}
	75% {color:#1a1a1a;transform: rotateX(360deg);}
	100% {color:#1a1a1a;transform: rotateX(360deg);}
}
@keyframes ColorAni {
	0% {color:#1a1a1a;transform: rotateX(0);}
	25% {color:#fff;transform: rotateX(0);}
	50% {color:#526cb4;transform: rotateX(0);}
	75% {color:#1a1a1a;transform: rotateX(360deg);}
	100% {color:#1a1a1a;transform: rotateX(360deg);}
}

@-webkit-keyframes lnbPointBack {
	0% {width:0%;}
	25% {width:100%;left:0;}
	50% {left:100%;}
	75% {left:100%;width:0%;}
	100% {width:0%;}
}
@keyframes lnbPointBack {
	0% {width:0%;}
	25% {width:100%;left:0;}
	50% {left:100%;}
	75% {left:100%;width:0%;}
	100% {width:0%;}
}
/****************************************** 햄버거 안 이벤트 모션 ************************************************************/