@charset "utf-8"; 
/**********************************************************************
* Descript : 전체 페이지에 적용되는 레이아웃 스타일 정의
-----------------------------------------------------------------------
* 최초작성일 : 2018.04.04
* 최초작성자 : 더웹 유대경
***********************************************************************/



/**********************************************************************
* Descript : ★★★★★★★★★★★★주의 #wrap .inner 클래스 (전체 페이지에 적용됩며, 모든 하위메뉴의 레이아웃사이즈가 변경될 수 있습니다.)★★★★★★★★★★★★★★★★★★
***********************************************************************/
html{background:#000;}
body{background:#000;} /* header position이 fixed되어 header height값만큼 padding값을 추가했습니다. */
#wrap{position:relative; width:100%; padding-top:70px; background:#fff; min-height:100%; font-family: 'Open Sans', 'Nanum Gothic', '나눔고딕',  sans-serif;}
#main-container{}
#sub-container{padding-bottom:100px;}

.full{position:relative; width:100%; min-width:320px; max-width:640px; margin:0 auto; box-sizing:border-box;}
.inner{position:relative; width:100%; min-width:320px; max-width:640px; margin:0 auto; box-sizing:border-box;}
@media (min-width:0) and (max-width:640px){.inner{padding:0 10px;}}
/**********************************************************************/



/**********************************************************************
* Descript : Header 스타일(로고, GNB)
***********************************************************************/
#header{position:absolute; background:#fff; top:0; width:100%; height:70px; z-index:10;}
#header .inner{height:inherit;}

#header a.btn-call{position:absolute; left:10px; top:50%; transform:translate(0, -50%);}
#header a.btn-call img{}
#header a.logo{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#header a.logo img{vertical-align:middle;}



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

.spin .bar {-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; 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 {background-color:#fff; transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.spin.active .bar::before {background-color:#fff; top:0; opacity:0; transition:top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.spin.active .bar::after {background-color:#fff; 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); }


/* 1차 카테고리 */
.gnb-dim{display:none; position:fixed; z-index:5; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.7);}


#header .gnb-member{position:relative; width:100%; max-width:640px; height:70px; margin:0 auto; box-sizing:border-box; padding:0 20px;}
#header .gnb-member a{float:left; display:inline-block; font-size:1em; height:70px; line-height:70px; color:#fff;}
#header .gnb-member i.line{float:left; display:inline-block; margin:0 10px; font-size:12px; height:70px; line-height:70px; color:#fff;}

#header .gnb-quick{width:100%; display:inline-block; max-width:640px; margin:0 auto;}
#header .gnb-quick a{position:relative; float:left; display:inline-block; width:33%; padding:5em 0; text-align:center; color:#fff; font-weight:700; font-size:1.1em; background:rgba(255,255,255,0.1);}
#header .gnb-quick a:nth-child(3n + 2){width:cacl(34% - 2px); margin:0 1px;}
#header .gnb-quick a img{display:block; margin:0 auto 15px auto; width:3em;}
#header .gnb-quick a span{position:absolute; display:inline-block; width:100%; left:50%; top:50%; transform:translate(-50%, -50%);}

#header #gnb{position:fixed; top:0; width:100%; box-sizing:border-box; z-index:9; display:none; background:#687095; padding-bottom:50px; text-align:center;}
#header #gnb .gnb-wrap{position:relative; width:100%; max-width:640px; margin:0 auto; box-sizing:border-box;}
#header #gnb .gnb-wrap > ul{}
#header #gnb .gnb-wrap > ul > li{position:relative; text-align:left;}
#header #gnb .gnb-wrap > ul > li > button{position:relative; display:block; width:100%; line-height:60px; height:60px; font-size:1.1em; font-weight:700; color:#fff; box-sizing:border-box; padding-left:20px; border-bottom:1px solid rgba(255,255,255,0.3); text-align:left;}
#header #gnb .gnb-wrap > ul > li:hover > button::before{width:calc(100% + 30px);}


#header #gnb ul li.gnb:hover button{text-decoration:none;}

/* 2차 카테고리 */
#header #gnb ul li.gnb button + ul.lnb-wrap{position:relative; width:100%; background:#4d547a; display:none; z-index:10;}
#header #gnb ul li.gnb button + ul.lnb-wrap li.lnb{width:100%; padding:0 10px; box-sizing:border-box;}
#header #gnb ul li.gnb button + ul.lnb-wrap li.lnb a{display:inline-block; width:100%; font-size:1em; line-height:3.5em; font-weight:400; padding:0 25px; color:#fff; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.1); background:url(../../img/m/common/lnb_bg.png) no-repeat 10px center;}
#header #gnb ul li.gnb button + ul.lnb-wrap li.lnb.active{}
#header #gnb ul li.gnb button + ul.lnb-wrap li.lnb.active a{}

/**********************************************************************/



/**********************************************************************
* Descript : 메인, 서브 레이아웃
***********************************************************************/
#wrap #main-container{position:relative; width:100%;}
#wrap #sub-container{position:relative; width:100%;}
/**********************************************************************/



/**********************************************************************
* Descript : 페이지 비주얼 스타일(페이지 타이틀, 이전페이지, 다음페이지)
***********************************************************************/
#sub-visual{width:100%; background:#ddd; }
#sub-visual .inner{height:200px; background-size:cover; background-position:left top; background-repeat:no-repeat;}

#sub-visual[data-menu="병원소개"] .inner{background-image:url(../../img/m/contents/visual_bg0101.jpg);}
#sub-visual[data-menu="진료안내"] .inner{background-image:url(../../img/m/contents/visual_bg0201.jpg); }
#sub-visual[data-menu="특성화 진료"] .inner{background-image:url(../../img/m/contents/visual_bg0301.jpg); background-position:right top;}
#sub-visual[data-menu="외과 질환 센터"] .inner{background-image:url(../../img/m/contents/visual_bg0401.jpg); }
#sub-visual[data-menu="내과 질환 센터"] .inner{background-image:url(../../img/m/contents/visual_bg0501.jpg); }
#sub-visual[data-menu="건강검진"] .inner{background-image:url(../../img/m/contents/visual_bg0601.jpg); background-position:right top;}
#sub-visual[data-menu="커뮤니티"] .inner{background-image:url(../../img/m/contents/visual_bg0701.jpg); background-position:right top;}
#sub-visual[data-menu="멤버쉽"] .inner{background-image:url(../../img/m/contents/visual_bg0701.jpg); background-position:right top;}
#sub-visual[data-menu="멤버십"] .inner{background-image:url(../../img/m/contents/visual_bg0701.jpg); background-position:right top;}

/**********************************************************************/



/**********************************************************************
* Descript : 페이지 네비게이션(Bread Crumb)
***********************************************************************/
#breadcrumb{position:relative; width:100%; background:#f0f0f0; height:60px; z-index:5;}
#breadcrumb a, #breadcrumb button{display:inline-block; height:inherit; vertical-align:middle;}
#breadcrumb .full > ul > li{float:left; width:50%; box-sizing:border-box;}
#breadcrumb li.gnb{position:relative;}
#breadcrumb li.gnb button{width:100%; height:60px; line-height:60px; padding:0 15px; box-sizing:border-box; text-align:left; color:#757575; font-size:14px; letter-spacing:-0.4px; background:url(../../img/m/common/arrow.png) no-repeat 95% center;}
#breadcrumb li.gnb button.active{background:url(../../img/m/common/arrow_up.png) no-repeat 95% center;}
#breadcrumb li.gnb:nth-child(2){background:#fff;}
#breadcrumb li.gnb ul{display:none; position:absolute; width:100%; top:60px; background:#f9f9f9; box-sizing:border-box;}
#breadcrumb li.gnb ul li{}
#breadcrumb li.gnb ul li > a{display:block; padding:0 15px; height:50px; line-height:50px; font-size:13px; letter-spacing:-0.4px; color:#222; cursor:pointer;}
#breadcrumb li.gnb ul li:last-child > a{border-bottom:0;}

#breadcrumb li.lnb{position:relative;}
#breadcrumb li.lnb ul{display:none; position:absolute; width:200px; left:-1px; top:80px; background:#fff; border:1px solid #ddd; box-sizing:border-box;}

/**********************************************************************/



/**********************************************************************
* Descript : 서브 공통영역 타이틀 스타일
***********************************************************************/
.sub-title{text-align:center; margin:70px 0 50px 0;}
.sub-title h5{font-size:2em; color:#222; font-weight:700; background:none;}
/**********************************************************************/



/**********************************************************************
* Descript : 풋터 스타일
***********************************************************************/
#footer{position:relative; width:100%; background:#c5c7cc url(../../img/common/logo.png) no-repeat center 25px; color:#222; text-align:center; font-size:1em; letter-spacing:-0.5px; padding:100px 0 25px 0;}
#footer span{display:inline-block; line-height:2em; font-size:0.85em;}
#footer i.line{display:inline-block; margin:0 10px; line-height:2em; font-size:12px;}
#footer p.copyright{font-size:0.8em; margin-top:25px;}

.fnb{height:50px; text-align:center; background:#a8a9ae;}
.fnb a{display:inline-block; float:left; width:33%; line-height:50px; color:#fff; font-size:1.1em;}
.fnb a:hover{text-decoration:none;}
.fnb a:nth-child(2){width:calc(34% - 2px); border-left:1px solid #fff; border-right:1px solid #fff;}
/**********************************************************************/



.scroll-top{position:fixed; opacity:0; right:10px; bottom:35px; z-index:8; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.scroll-top img{width:4em;}