@import url("common.css");

#visual{position:relative; width:100%; height:399px; overflow:hidden;}

#visual .slick-slider {position: relative; display: block;}
#visual .slick-list {position: relative; display: block; overflow: hidden;}
#visual .slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
#visual .slick-initialized .slick-slide{display: block;}
#visual .slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;}

#visual .slick-prev, #visual .slick-next{ /*font-size: 0; line-height: 0; position: absolute; top: 53%; display: block; cursor: pointer; color: transparent; border: none; outline: none; background: transparent;*/ display:none !important;}
/*
#visual .cover01{background-image:url('/img/visual_img09.jpg');}
#visual .cover02{background-image:url('/img/visual_img08.jpg');}
#visual .cover03{background-image:url('/img/visual_img07.jpg');}
*/

#visual .sub_imgbox{height:100%;}
#visual .section{margin-bottom:2px;width:100%;height:100%;min-height:400px;position:relative;overflow:hidden;background-position:center;background-size:cover; border:0;}
#visual .sub_imgbox .slick-list ,
#visual .sub_imgbox .slick-track {height:100%;}

.slick-dots{position: absolute; bottom:25px; overflow:hidden; width:100%; margin:0 auto; text-align:center; z-index:9}
.slick-dots li{/*float:left;*/ display:inline-block; margin-right:10px;}
.slick-dots li:last-child {margin-right:0;}
.slick-dots li button{width:18px; height:18px; /*border-radius:16px;*/ font-size:0; cursor:pointer; /*border:2px solid rgba(255,255,255,.4);*/ border:none; background:url('/img/navi_off.png') center center no-repeat; box-sizing:border-box;}
.slick-dots li.slick-active button{/*background-color:#a3c52f; border:2px solid #a3c52f*/background:url('/img/navi_on.png') center center no-repeat; border:none;}

#visual .txt_area{position:absolute; top:169px; text-align:center; z-index:9; width:100%}
#visual .txt_area h3 {font-family:'NotoKR-Thin', sans-serif; font-weight:normal; font-size:43px; letter-spacing:-1.3pt; color:#fff; margin:0 0 30px 0; text-shadow:rgba(0,0,0,.2) 0 0 9px;}
#visual .txt_area span {font-family:'NotoKR-Bold', sans-serif; letter-spacing:-1.3pt;}


#contents {position:relative; overflow:hidden; width:100%;}
#contents h3.con_tit {font-weight:100; font-family:'NotoKR-Thin', sans-serif; font-size:31px; letter-spacing:-2pt; }
#contents span.green_color {color:#8cab24; font-weight:100; font-family:'NotoKR-Bold', sans-serif; letter-spacing:-1pt;}
#contents span.bold {font-weight:100; font-family:'NotoKR-Bold', sans-serif; letter-spacing:-1pt; color:#333;}
#contents p.sub_tit {font-size:18px; color:#999; letter-spacing:-0.5pt;}
#contents p.sub_txt {font-size:14px; color:#888; letter-spacing:-0.5pt; line-height:160%}
#contents a.read_more {font-family:'Montserrat', sans-serif;}
#contents a.more {font-family:'Montserrat', sans-serif;}

/* 메인비주얼 - 핸드폰 배너 */
.banner_hp {position:relative; width:1180px; margin:0 auto; z-index:99}
.banner_hpin {position:absolute; top:70px; right:0; width:225px; height:330px; box-sizing:border-box; padding:51px 17px 0 18px; background:url('/img/banner_hp.png') center top no-repeat; text-align:center; }
.banner_hp ul.btn {position:relative; overflow:hidden;}
.banner_hp ul.btn li {float:left; margin:0 4px 4px 0}
.banner_hp ul.btn li:nth-child(2n) {margin-right:0}
.banner_hp ul.btn li:nth-child(2) ~ li {margin-bottom:0}
.banner_hp ul.btn li a {display:block; font-size:14px; letter-spacing:-0.5pt; color:#555; line-height:110%; background:#fff url('/img/m_online_icon.gif') center 16px no-repeat; padding-top:63px; width:93px; height:93px; box-sizing:border-box; text-align:center; transition: all 0.3s ease-out;}
.banner_hp ul.btn li.resv a {background:#fff url('/img/m_resv_icon.gif') center 14px no-repeat}
.banner_hp ul.btn li.kakao a {background:#f7e800 url('/img/m_kakao_icon.gif') center 19px no-repeat}
.banner_hp ul.btn li.result a {background:#fff url('/img/m_result_icon.gif') center 14px no-repeat}
.banner_hp ul.btn li a:hover {background-position:center 20px; transition: all 0.3s ease-out;}
.banner_hp ul.btn li.kakao a:hover {background-position:center 25px;}

.banner_hp .bio_family { margin:20px auto 14px auto}

.login_box {position:relative; text-align:center;}
.login_box li {position:relative; display:inline-block;}
.login_box .login {margin-right:25px;}
.login_box .login:after {display:block; content:""; width:1px; height:13px; background:#ccc; position:absolute; top:2px; right:-15px;}
.login_box .join {}
.login_box a {position:relative; font-size:13px; color:#555; letter-spacing:-0.5pt; line-height:110%; transition: all 0.3s ease-out;}
.login_box a:hover {color:#333; transition: all 0.3s ease-out;}




/* 메인 - 배너 */
.banner_con {position:relative; overflow:hidden; width:1180px; margin:50px auto 0 auto}
.banner_con > div {float:left; height:230px; width:32.48%; margin:0 1.27% 1.27% 0; box-sizing:border-box;}
.banner_con > div:nth-child(3n) {margin-right:0}
.banner_con > div:nth-child(3) ~ div {margin-top:0}
.banner_con .ifinder {background:url('/img/ifinder_bg.jpg') center center/cover no-repeat}
.banner_con .result_ex {background: -webkit-gradient(linear, left top, right bottom, color-stop(0.49, #8ac9af), color-stop(0.5, #8ed0b5));
	background: -moz-linear-gradient(-33deg, #8ac9af 49%, #8ed0b5 50%);
	background: -webkit-linear-gradient(-33deg,  #8ac9af 49%, #8ed0b5 50%);
	background: -o-linear-gradient(-33deg,  #8ac9af 49%, #8ed0b5 50%);
	background: -ms-linear-gradient(-33deg,  #8ac9af 49%, #8ed0b5 50%);
	background: linear-gradient(-33deg,  #8ac9af 49%, #8ed0b5 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ac9af', endColorstr='#8ed0b5', gradientType=1);}
.banner_con .health_info {background: -webkit-gradient(linear, left top, right bottom, color-stop(0.49, #91b2d7), color-stop(0.5, #96b8de));
	background: -moz-linear-gradient(-33deg, #91b2d7 49%, #96b8de 50%);
	background: -webkit-linear-gradient(-33deg,  #91b2d7 49%, #96b8de 50%);
	background: -o-linear-gradient(-33deg,  #91b2d7 49%, #96b8de 50%);
	background: -ms-linear-gradient(-33deg,  #91b2d7 49%, #96b8de 50%);
	background: linear-gradient(-33deg,  #91b2d7 49%, #96b8de 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91b2d7', endColorstr='#96b8de', gradientType=1);}
.banner_con .hospital_info {background: -webkit-gradient(linear, left top, right bottom, color-stop(0.49, #8bc8e9), color-stop(0.5, #8fcef1));
	background: -moz-linear-gradient(-33deg, #8bc8e9 49%, #8fcef1 50%);
	background: -webkit-linear-gradient(-33deg,  #8bc8e9 49%, #8fcef1 50%);
	background: -o-linear-gradient(-33deg,  #8bc8e9 49%, #8fcef1 50%);
	background: -ms-linear-gradient(-33deg,  #8bc8e9 49%, #8fcef1 50%);
	background: linear-gradient(-33deg,  #8bc8e9 49%, #8fcef1 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8bc8e9', endColorstr='#8fcef1', gradientType=1);}
.banner_con .location {background:url('/img/location_bg.jpg') center center/cover no-repeat}
.banner_con .clinic {}
.banner_con .clinic h6 {font-size:19px; color:#fff; font-weight:100; font-family:'NotoKR-Regular', sans-serif; letter-spacing:-0.5pt; line-height:110%; padding:20px 30px; box-sizing:border-box; background:#a6b3d3;}

.banner_con a {display:block; font-size:19px; color:#fff; text-align:center; background:url('/img/ifinder_icon.png') center 37px no-repeat; letter-spacing:-0.5pt; line-height:110%; padding-top:160px; box-sizing:border-box; transition: all 0.3s ease-out;}
.banner_con .result_ex a {background:url('/img/result_icon.png') center 40px no-repeat;}
.banner_con .health_info a {background:url('/img/info_icon.png') center 59px no-repeat;}
.banner_con .hospital_info a {background:url('/img/hospital_icon.png') center 48px no-repeat;}
.banner_con .location a {background:url('/img/location_icon.png') center 48px no-repeat;}
.banner_con .clinic a {padding-top:0; font-size:0; background:none;}

.banner_con a:hover {background-position:center 47px; transition: all 0.3s ease-out;}
.banner_con .health_info a:hover {background-position:center 65px;}
.banner_con .hospital_info a:hover {background-position:center 58px;}
.banner_con .location a:hover {background-position:center 58px;}


.slider {width:100%;}
	.slick-slide {position:relative; margin: 0;}
	.slick-prev:before, .slick-next:before {color: black;}
		/* Arrows */
	.slick-prev,.slick-next{position: absolute; top:-40px; margin:0 0 0; display:block; width:11px;height: 18px; padding:0; cursor:pointer; color:transparent; border:none; outline:none; background:transparent; z-index:50}
	.slick-prev{right:63px; background:url('/img/clinic_prev.png') no-repeat left center; background-size:100%;}
	.slick-next{right:30px; background:url('/img/clinic_next.png') no-repeat right center; background-size:100%;}
	.pro_more{display:none !important; position:absolute; top:-46px; right:70px; width:36px; height:36px; background:url('/m/img/main/more.gif') no-repeat left top; background-size:100%; font-size:1px; text-indent:-9999999999px; color:#fff !important}
	.slick-slider{position: relative;display: block;box-sizing: border-box;
		-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
			touch-action: pan-y;-webkit-tap-highlight-color: transparent;	}
	.slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
	.slick-slide{display: none;float: left;height: 100%;min-height: 1px;}
	.slick-initialized .slick-slide{display: block;}


/* 메인 - 온라인예약 */
.m_online {position:relative; width:1180px; overflow:hidden; margin:0 auto; padding:88px 0 70px 0;}
.m_online h3.con_tit {text-align:center;}
.m_online span.green_color {}
.m_online span.bold {}
.m_online p.sub_tit {text-align:center; margin:20px 0 40px 0;}
.m_online .icon {position:relative; overflow:hidden; width:462px; margin:0 auto;}
.m_online .icon li {width:154px; float:left; border-right:1px dashed #ddd; text-align:center; box-sizing:border-box;}
.m_online .icon li.kakao {border-right:none;}
.m_online .icon li a {display:block; position:relative; overflow:hidden; font-size:16px; color:#555; letter-spacing:-0.5pt; background:url('/img/m_quick01.gif') center 9px no-repeat; padding-top:83px; transition: all 0.3s ease-out;}
.m_online .icon li.resv a {background:url('/img/m_quick02.gif') center 9px no-repeat;}
.m_online .icon li.kakao a {background:url('/img/m_quick03.gif') center top no-repeat;}
.m_online .icon li a:hover { background-position:center 18px; transition: all 0.3s ease-out;}
.m_online .icon li.consult a:hover { background-image:url('/img/m_quick01_on.gif'); color:#8cab24;}
.m_online .icon li.resv a:hover { background-image:url('/img/m_quick02_on.gif'); color:#8cab24;}
.m_online .icon li.kakao a:hover {background-position:center 9px; color:#493433;}

/* BIOSTAR */
.biostar {position:relative; width:1180px; margin:0 auto 50px auto; overflow:hidden;}
.biostar_in {float:left; position:relative; width:582px; height:380px; overflow:hidden; background-color:#f0f0f0; margin-right:15px; padding:25px 25px 40px 40px; box-sizing:Border-box;}
.biostar_in .tit_box {position:relative; top:28px; float:left; }
.biostar_in h3 {position:relative; overflow:hidden; font-weight:100; color:#333; font-family:'Montserrat', sans-serif; font-size:36px;}
#contents .biostar_in span.bold {font-size:30px; letter-spacing:0; font-family:'Montserrat', sans-serif; font-weight:700; display:block;}
#contents .biostar_in p.sub_txt {font-size:17px; color:rgba(102,102,102,0.8); margin:25px 0 0 0;}

.biostar_in .list_carousel_01 {float:right; width:275px !important; margin:0 auto !important;}
.biostar_in .list_carousel_01 ul {margin: 0; padding: 0; list-style: none; display: block; overflow:hidden; clear:both;}
.biostar_in .list_carousel_01.responsive {width: auto; margin-left: 0;}
.clearfix {float: none; clear: both;}

#client_list_01 {width:275px; overflow:hidden; margin:0 auto; top:-5px !important;}
#client_list_01 li {float:left; height:auto; display: block;}
#client_list_01 li a {}
#client_list_01 li img {max-width:100%;}
#client_list_01 li p.img{border:1px solid rgba(255,255,255,0.01); width:275px; height:177px; overflow:hidden; text-align:center; margin-bottom:30px; box-sizing:border-box; transition: all 0.3s ease-out; position:relative; top:10px;}
#client_list_01 li p.img img{width:100%; max-height:100%; }
#client_list_01 li p.name {font-size:17px; color:#333; letter-spacing:-0.5pt; font-weight:100; font-family:'NotoKR-Bold', sans-serif; line-height:100%; margin-top:15px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; transition: all 0.3s ease-out;}
#client_list_01 li p.name span {font-family:'NotoKR-Regular', sans-serif; width:117px; height:37px; border-radius:37px; background-color:#a3c52f; line-height:37px; text-align:center; color:#fff; display:inline-block; font-size:15px; letter-spacing:-0.5pt;font-style:normal; margin-right:10px;}
#client_list_01 li div.txt_box {display:block; transition: all 0.3s ease-out;}
#client_list_01 li h5 {font-size:19px; color:#333; letter-spacing:-0.5pt; font-weight:100; font-family:'NotoKR-Bold', sans-serif; line-height:100%; margin-top:15px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; transition: all 0.3s ease-out;}
#client_list_01 li p.txt {font-size:14px; color:#888; letter-spacing:-0.5pt; line-height:160%; height:43px; margin:12px 0 25px 0; overflow:hidden;/*text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; margin:12px 0 20px 0;*/ transition: all 0.3s ease-out;}
#client_list_01 li p.more {font-size:13px; color:#8cab24; font-family:'Montserrat', sans-serif; transition: all 0.3s ease-out;}

#client_list_01 li a:hover p.img {border:1px solid #8cab24; transition: all 0.3s ease-out;}
#client_list_01 li a:hover p.name {color:#8cab24; transition: all 0.3s ease-out;}
#client_list_01 li a:hover p.txt {color:#8cab24; transition: all 0.3s ease-out;}
#client_list_01 li a:hover p.more {text-decoration:underline; transition: all 0.3s ease-out;}

.prev1 {position:absolute; top:252px; left:37px; z-index:999; display:inline-block; width:12px; height:18px; background:url('/img/star_prev.gif') left top no-repeat; text-indent:-9999px;}
.next1 {position:absolute; top:252px; left:68px; z-index:999; display:inline-block; width:12px; height:18px; background:url('/img/star_next.gif') left top no-repeat; text-indent:-9999px;}

/* 비디오영역 */
.video_con{position:relative; float:left; width:582px; height:380px; overflow:hidden; background-color:#f0f0f0; padding:26px 15px 15px 15px; box-sizing:border-box;}
#contents .video_con h3 {position:relative; overflow:hidden; font-weight:100; color:#333; font-family:'Montserrat', sans-serif; font-size:19px; padding-left:20px; box-sizing:border-box; margin-bottom:22px; line-height:110%;}
#contents .video_con h3 span.bold {letter-spacing:0; font-family:'Montserrat', sans-serif; font-weight:700; line-height:110%;}

/* 스마트 암검사, 3개메뉴 */
.con_select {position:relative; width:1180px; margin:0 auto;}

	.left_con {float:left; width:50%; height:320px; position:relative;overflow:hidden; background:url('/img/company_leftbg.gif') center top no-repeat; padding:45px 30px; box-sizing:border-box;}
	.left_con h5 {font-weight:100; font-family:'NotoKR-Light', sans-serif; font-size:24px; color:#fff; letter-spacing:-0.5pt; margin-bottom:56px; line-height:100%;}
	.left_con .icon {position:relative; overflow:hidden;}
	.left_con .icon li {width:25%; float:left;}
	.left_con .icon li a {display:block; position:relative; overflow:hidden; text-align:center; font-size:17px; color:#fff; letter-spacing:-0.5pt; background:url('/img/smart_icon01.png') center top no-repeat; padding-top:83px; transition: all 0.3s ease-out; }
	.left_con .icon li.two a {background-image:url('/img/smart_icon02.png')}
	.left_con .icon li.three a {background:url('/img/smart_icon03.png') center 11px no-repeat;}
	.left_con .icon li.four a {background:url('/img/smart_icon04.png') center 11px no-repeat;}
	.left_con .icon li a:hover {background-image:url('/img/smart_icon01_up.png'); background-position:center 9px; transition: all 0.3s ease-out; color:#d2ff3d}

	.left_con .icon li.two a:hover {background-image:url('/img/smart_icon02_up.png')}
	.left_con .icon li.three a:hover {background-image:url('/img/smart_icon03_up.png'); background-position:center 19px;}
	.left_con .icon li.four a:hover {background-image:url('/img/smart_icon04_up.png'); background-position:center 19px;}

	.right_con {float:left; width:50%; margin-bottom:50px;}
	.right_con .greeting_ceo {text-align:center; }
	.right_con {position:relative; /*overflow:hidden;*/}
	.right_con a {position:relative; top:0; float:left; width:33.33%; height:320px;  background-color:#808284; box-sizing:border-box; transition: all 0.3s ease-out;}
	.right_con a.two {background-color:#66686a}
	.right_con dl {width:100%; text-align:center; padding:43px 0;  height:320px;  box-sizing:border-box; transition: all 0.3s ease-out;}
	.right_con dt {margin-bottom:25px;}
	.right_con dd {color:#fff; font-size:18px; letter-spacing:-0.5pt;}
	.right_con dd p {font-size:14px; letter-spacing:-0.5pt; color:rgba(255,255,255,0.5); margin:10px 0 20px 0;}
	#contents .right_con dd p.more {font-family:'Montserrat', sans-serif; font-size:13px; letter-spacing:0; text-decoration:underline; color:#fff;}
	.right_con a:hover {top:-15px; background-color:#494b4d; transition: all 0.3s ease-out;}


/* 퀵메뉴 */
.quick_menu {position:relative; width:1180px; overflow:hidden; margin:0 auto;}
.quick_menu li {float:left; width:25%; position:relative;}
.quick_menu li a {display:block; position:relative; overflow:hidden; font-size:18px; color:#444; letter-spacing:-0.5pt; background:url('/img/f_quick01.gif') left top no-repeat; padding:20px 0 23px 110px; transition: all 0.3s ease-out;}
.quick_menu li.two a {background-image:url('/img/f_quick02.gif')}
.quick_menu li.three a {background-image:url('/img/f_quick03.gif')}
.quick_menu li.four a {background-image:url('/img/f_quick04.gif')}
.quick_menu li a span {font-size:14px; color:#888; letter-spacing:-0.5pt; margin-top:8px; display:block;transition: all 0.3s ease-out;}

.quick_menu li a:hover { background-position:9px center; color:#8cab24; transition: all 0.3s ease-out; }
.quick_menu li.one a:hover {background-image:url('/img/f_quick01_up.gif');}
.quick_menu li.two a:hover {background-image:url('/img/f_quick02_up.gif')}
.quick_menu li.three a:hover {background-image:url('/img/f_quick03_up.gif')}
.quick_menu li a:hover span {color:#8cab24;transition: all 0.3s ease-out;}
.quick_menu li.four a:hover {color:#493433;}
.quick_menu li.four a:hover span {color:#493433;}

/* Location */
.location {position:relative; width:1180px; overflow:hidden; margin:50px auto 80px auto; height:221px;}
/* 네이버 연동 api 지도 임시 페이지*/
.mapArea{width:100%; /*border:1px solid #ddd; box-sizing:border-box;background:#dedede; padding:10% 2%*/}
	.loca_ready{text-align:center; width:880px;float:left; background:#dedede;/*padding:5%;*/height:221px; box-sizing:border-box;}
	.loca_ready p.tit{font-size:16px; color:#333; letter-spacing:-0.7pt;}
	.loca_ready p.txt{font-size:12px; padding:8px 0 0 0;}
	.loca_ready p.txt a{text-decoration:underline; font-size:13px;}
	.loca_ready .btn{position:relative; overflow:hidden; width:274px; margin:10px auto 0 auto;}
	.loca_ready .btn a{display:block; float:left; width:130px; padding:15px 0; background:rgba(255,255,255,0.4); border-radius:15px; line-height:100%; font-size:12px; letter-spacing:-0.5pt;}
	.loca_ready .btn a:first-child{margin-right:5%;}

	.loca_info {width:300px; height:221px;float:left; padding:48px 30px; box-sizing:border-box; border:1px solid #ddd; border-left:none;}
	.loca_info h4 {font-weight:700; font-family:'Montserrat', sans-serif; font-size:22px; color:#333; line-height:100%;}
	.loca_info p.address {font-size:14px; letter-spacing:-0.5pt; margin:15px 30px 20px 0; line-height:155%}
	.loca_info p.number {font-size:14px; letter-spacing:-0.5pt; color:#999;}
	#contents .loca_info span.green_color {font-family:'Montserrat', sans-serif; font-weight:700; font-size:19px; letter-spacing:0; margin-left:12px; display:inline-block;}