@charset "utf-8"; 
/**********************************************************************
* Descript : 랜딩 사이트의 스타일 정의
-----------------------------------------------------------------------
* 최초작성일 : 2018.04.23
* 최초작성자 : 더웹 유대경
***********************************************************************/



/**********************************************************************
* Descript : 전체영역 레이아웃 관리
***********************************************************************/
body{padding-top:65px; font-family: 'Nanum Gothic', sans-serif;}

.inner{position:relative; max-width:640px; margin:0 auto;}
/**********************************************************************/



/**********************************************************************
* Descript : 해더 스타(로고, GNB)
***********************************************************************/
#header{position:fixed; left:0; top:0; width:100%; height:65px; background:#fff; border-bottom:1px solid #efefef; z-index:999;  box-shadow:0 0 20px rgba(0,0,0,0);-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align:center;}
#header.fixed{box-shadow:0 0 20px rgba(0,0,0,0.1);}
#header .inner{position:relative; max-width:640px; height:inherit;}
#header a.btn-call{position:absolute; top:50%; left:20px; transform:translate(0, -50%);}
#header a.btn-call img{width:35px;}
#header a.logo{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#header a.logo img{width:170px;}

/* 햄버거 버튼 스타일 및 트랜지션 */
.hamburger{position:absolute; top:50%; right:20px; transform:translate(0, -50%); z-index:11; cursor:pointer;}
.hamburger:hover {opacity: 0.7;}
.box {width:30px; height:24px; display:inline-block; position:relative;}
.bar {display:block; top:50%;}
.bar, .bar::before, .bar::after {width:inherit; height:3px; background-color:#0a1d55; position:absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.bar::before, .bar::after {content: ""; display: block; }
.bar::before{top:-10px; }
.bar::after{bottom:-10px; }

.spin .bar {transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.spin .bar::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
.spin .bar::after {transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.spin.active .bar {transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.spin.active .bar::before {top:0; opacity:0; transition:top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.spin.active .bar::after {bottom:0; transform: rotate(-90deg); transition:bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
/**********************************************************************/



/**********************************************************************
* Descript : GNB
***********************************************************************/
.gnb-dim{display:none; position:fixed; z-index:8; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.7);}

#gnb{position:absolute; top:65px; width:100%; background:#fff; border-top:1px solid #cecece; display:none; box-sizing:border-box; padding:20px;}
#gnb ul{ padding:15px; background:#f8f8f8;}
#gnb ul li{width:100%;}
#gnb ul li a{position:relative; display:block; color:#222; font-size:17px; padding:15px 0; text-align:left; box-sizing:border-box; padding-left:20px; border-bottom:1px solid #ddd;}
#gnb ul li:last-child a::before{display:none;}
#gnb ul li a:hover{text-decoration:none; color:#222;}
#gnb ul li a:hover::before{width:100%;}
#gnb ul li.active a{color:#111; font-weight:700;}
#gnb ul li.active a::before{width:100%; height:1px;}
/**********************************************************************/


#doctor{background:#f8f8f8;}
#location{background:#202739;}











/**********************************************************************
* Descript : 우측하단 최상단으로 가기 버튼(jquery.landing.js)
***********************************************************************/
#top{position:fixed; opacity:0; width:50px; right:15px; bottom:25px; z-index:9;-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
#top.fadeIn{opacity:1;}
#top.fadeOut{opacity:0;}
/**********************************************************************/






/**********************************************************************
* Descript : 우측하단 최상단으로 가기 버튼(jquery.landing.js)
***********************************************************************/
#top{position:fixed; opacity:0; width:60px; right:15px; bottom:25px; z-index:9;-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
#top a{display:block; margin:5px 0;}
#top.fadeIn{opacity:1;}
#top.fadeOut{opacity:0;}
/**********************************************************************/
#landing-footer{position:relative; background:#333;}

.wrap_controllers,
.map_border{display:none !important;}



#event .inner p {text-align:center; font-size:18px; font-weight:700; line-height:1.4em; letter-spacing:-1px;margin:30px 0 40px;} 




/* 공통 간편상담신청 시작 */
#quick-inquire{position:fixed; box-sizing:border-box; left:0; bottom:-380px; width:100%; height:380px; padding:15px; z-index:8; text-align:center; background:#333; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#quick-inquire > button{display:inline-block; width:300px; position:fixed; left:50%; bottom:0; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); height:60px; line-height:60px; background:#0a1d55; padding:0 15px; color:#ffc200; font-size:17px; letter-spacing:-1px; font-weight:100; cursor:pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#quick-inquire > button em{font-weight:700; color:#fff; margin-right:10px;}

#quick-inquire.active{bottom:0;}
#quick-inquire > button.active{bottom:380px;}


#quick-inquire .quick-counsel01,
#quick-inquire .quick-counsel02{box-sizing:border-box;}


#quick-inquire .quick-counsel01{}
#quick-inquire .quick-counsel01 li{position:relative; width:100%; margin-bottom:10px;}
#quick-inquire .quick-counsel01 li > label{position:relative; display:block; width:100%; height:45px; line-height:45px; box-sizing:border-box; padding:0 5px; border:1px solid #aaaaaa; color:#fff; text-align:left; font-size:15px;}
#quick-inquire .quick-counsel01 li > label::before{display:inline-block; width:2px; height:15px; left:60px; top:15px; background:#828282;}
#quick-inquire .quick-counsel01 li input[type="text"]{position:absolute; width:100%; height:100%; left:0; top:0; box-sizing:border-box; padding:0 5px 0 80px; color:#fff;}





#quick-inquire .quick-counsel01 li button,
#quick-inquire .quick-counsel01 li .private{display:block; text-align:left; float:left;}
#quick-inquire .quick-counsel01 li button{width:150px; margin-right:10px; box-sizing:border-box; height:32px; line-height:32px; padding:0 15px; background:#444; color:#fff; cursor:pointer; text-align:center;}

#quick-inquire .quick-counsel01 input[type="checkbox"]{display:none;}
#quick-inquire .quick-counsel01 input[type="checkbox"] + label{font-size:14px; position:relative; padding-left:30px; cursor:pointer; height:32px; line-height:32px; color:#e1e1e1;}
#quick-inquire .quick-counsel01 input[type="checkbox"] + label::before{content:""; display:inline-block; left:10px; top:8px; border:1px solid #ddd; width:17px; height:17px; border-radius:17px; box-sizing: border-box;}
#quick-inquire .quick-counsel01 input[type="checkbox"]:checked + label::after{content:""; display:inline-block; width:7px; height:7px; border-radius:7px; left:15px; top:13px; background:#ffc200}

#quick-inquire .quick-counsel02{display:inline-block; width:100%; margin-top:30px;}
#quick-inquire .quick-counsel02 label{display:none;}
#quick-inquire .quick-counsel02 textarea{width:100%; height:100px; background:#fff; max-width:100%; max-height:100px; min-width:100%; min-height:100px; box-sizing:border-box; padding:5px;}

#quick-inquire .quick-counsel02 button{display:block; width:100%; margin-top:10px; height:46px; line-height:50px; font-size:17px; font-weight:700; background:#ffc200 url(/assets/img/common/theme/m_btn_quick_counsel.png) no-repeat center center; cursor:pointer;}


/**********************************************************************
* Descript : 빠른상담 자세히보기 Dim 팝업 스타일
***********************************************************************/
.pop-private{display:none; position:fixed; left:0; top:0; z-index:9999; width:100%; height:100%; background:rgba(0,0,0,0.9);}
.pop-private .pop-inner{width:90%; max-width:640px; margin:50px auto 0 auto; background:#fff; border:5px solid #ffc200; border-radius:5px;}
.pop-private .pop-inner h3{text-align:center; padding:20px 0; background:#ffc200; color:#fff; font-size:17px; font-weight:700;}
.pop-private .pop-inner p{padding:15px; font-size:14px; line-height:24px; height:350px; overflow:auto; color:#333;}
.pop-private .pop-inner p b{display:block; font-weight:700; color:#222;}
.pop-private .pop-inner button{display:block; width:100%; text-align:center; padding:10px 0; font-size:15px; cursor:pointer;}
/**********************************************************************/


/* 공통 간편상담신청 끝 */




#ch-plugin *::before,
#ch-plugin *::after{position:relative;}