@charset "utf-8";
@import url("./font-awesome/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Poppins:wght@100;200;300;400;500;600;700&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
* {-webkit-text-size-adjust:none}
body{background:#fff;font-size:0.81em;font-family:var(--k-font), var(--e-font)}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:var(--k-font), var(--e-font)}
:root{color: #333; --primary:#38b0c9;--black:#111;--main-black:#383838;--k-font:'Pretendard Variable';--e-font:'Marcellus';--main-size:1500px}
#sh_wrapper *{word-break:keep-all}


/* HEADER */
#sh_hd{position:relative;width:100%}

/* MAIN  */
#main_banner{position:relative;width:100%}

/* INDEX */
#sh_section{position:relative;width:100%; line-height:1.5;font-family:var(--k-font), var(--e-font)}
#sh_section .pl{white-space:pre-line}
#sh_section .section_tit{text-align:center}
#sh_section .section_h2{font-size:55px;font-weight:400;font-family:var(--e-font);color:var(--black)}
#sh_section .section_h2 span{color:var(--primary); font-weight: 100;}
#sh_section .section_p{font-size:17px;font-weight:500;}

/* CONTENT */
#sh_container{position:relative;width:100%; overflow: hidden;}
#sh_container_wrapper{position:relative;width:100%}
#sh_content{position:relative;min-height:0px;margin:0 auto}
#sh_content .inner{width: 1200px; margin: 0 auto;padding: 100px 0;}
#sh_content img{width: 100.8%; }
/* SNB */
#sh_aside{display: none; position:relative;width:100%;border-bottom:solid 1px #e5e5e5}
#sh_aside_wrapper{position:relative;max-width:1200px;margin:0 auto;zoom:1}

/* FOOTER */
#sh_ft{position:relative;padding:100px 0 100px;width:100%;line-height:1.5;font-family:var(--k-font), var(--e-font);color:#fff;background-color:#282828;word-break:keep-all}
#sh_ft .top{display:flex;margin:auto;width:80%}
#sh_ft .form_area{width:50%}
#sh_ft .form_area h2{font-size:55px;font-weight:400;font-family:var(--e-font)}
#sh_ft .form_area p{font-size:20px;font-weight:500}
#sh_ft .form_area form{margin-top:50px;width:80%}
#sh_ft .form_area .sh_input:focus{outline:none !important;border:none !important;border-bottom:1px solid rgb(255, 255, 255, 0.3) !important;box-shadow:none !important}
#sh_ft .form_area .sh_input{padding:25px 0;width:100%;font-size:16px;font-weight:600;border:none;outline:none;box-shadow:none;border-bottom:1px solid rgb(255, 255, 255, 0.3);color:#fff;background-color:transparent}
#sh_ft .form_area .sh_input::placeholder {color:rgb(255, 255, 255, 0.3)}
#sh_ft .form_area textarea{padding:25px 0 60px !important}
#sh_ft .form_area .p_info{display:flex;gap:20px}
#sh_ft .form_area .p_info ul{width:50%}
#sh_ft .form_area ul li, #sh_ft .form_area ul input, #sh_ft .form_area ul textarea{width:100%}
#sh_ft .form_area label{display:none}
#sh_ft .form_area .prv_area{display:flex;justify-content:space-between;align-items:start;margin-top:20px}
#sh_ft .form_area .send_btn{display:flex;justify-content:center;align-items:center;width:max-content;padding-top:20px}
#sh_ft .form_area .send_btn button{width:150px;height:58px;border-radius:29px;font-size:17px;font-weight:700;border:2px solid var(--primary);color:#fff;background-color:var(--primary);transition:all .3s}
#sh_ft .form_area .consent{display:flex;align-items:center;gap:5px}
#sh_ft .form_area .consent a{font-size:13px;font-weight:400;color:rgb(255, 255, 255, 0.6)}
#sh_ft .form_area .ck_box{cursor:pointer}
#sh_ft .map_area{overflow:hidden;width:50%;height:400px;border-radius:10px}
#sh_ft iframe{width:100%;height:100%}
#sh_ft .bottom{display:flex;margin:60px auto;width:80%}
#sh_ft .bottom .cate{font-size:20px;font-weight:700;color:#fff}
#sh_ft .bottom .f_point{background-color: #fff; border-radius: 100px; padding: 5px 15px; color: #37b1c9;}
#sh_ft .info_box{width:50%}
#sh_ft .info_box{display:flex;flex-direction:column;gap:20px}
#sh_ft .info_box li{display:flex;gap:32px}
#sh_ft .info_box li:first-child{align-items:center}
#sh_ft .info_box li:last-child ul li+li{margin-top:10px}
#sh_ft .info_box .number{font-size:30px;font-weight:400;font-family:var(--e-font)}
#sh_ft .info_box .day, #sh_ft .bottom .info_box .time{font-size:18px;font-weight:600} 
#sh_ft .info_box .notice{font-size:13px;font-weight:600}
#sh_ft .same_as{width:50%}
#sh_ft .same_as li{display:flex;align-items:center;gap:32px}
#sh_ft .same_as li+li{margin-top:20px}
#sh_ft .same_as address{font-style:unset;font-size:20px;font-weight:700}
#sh_ft .same_as .cate{min-width:65px}
#sh_ft .same_as .youtube{width:24px;height:17px;background:url(../index/ft/youtube.png) no-repeat center / contain} 
#sh_ft .same_as .kakao{width:22px;height:20px;background:url(../index/ft/kakao.png) no-repeat center / contain} 
#sh_ft .same_as a{font-size:16px;font-weight:400;color:#fff;transition:all .3s}
#sh_ft .copy{padding-top:100px;margin-top:100px;border-top:1px solid #777;font-size:15px;font-weight:400;color:#777}
#sh_ft .copy .top{justify-content:space-between}
#sh_ft .copy .top a{font-size:15px;font-weight:400;color:#777;transition:all .3s}
#sh_ft .copy .top a+a{margin-left:25px}
#sh_ft .copy .main_info{margin:40px auto;width:80%}
#sh_ft .copy .bottom{justify-content:space-between;margin:0 auto;font-family:var(--e-font)}
#sh_ft .copy .bottom a{font-size:12px;color:#777;transition:all .3s}
#sh_ft .copy .bottom a+a{margin-left:15px}

/* 반응형 하단 버튼 공통 */
#fix_tel{opacity:0;display:none;position:fixed;right:15px;bottom:120px;z-index:100;width:65px;height:65px;margin-right:-10px;border-radius:50%;font-size:30px;text-align:center;line-height:65px;color:#fff;background-color:var(--primary);box-shadow:5px 5px 5px rgba(0,0,0,.2);-webkit-transition:all .2s;transition:all .2s}
#fix_tel.active{opacity:1;margin-right:0}
#sh_ft_btns{display:none;padding:15px}
#sh_ft_btns .btns{overflow:hidden}
#sh_ft_btns .row2 a{width:50%}
#sh_ft_btns a{float:left;display:block;width:100%;height:55px;font-size:16px;line-height:55px;color:#fff;text-align:center;background-color:var(--primary);font-weight:700;font-family:'Noto Sans KR'}
#sh_ft_btns a.tel{font-size:18px;font-weight:700;letter-spacing:0;font-family:'Poppins'}
#sh_ft_btns a i{padding-right:5px;font-size:18px}
#sh_ft_btns a.kakao{font-weight:normal;color:#402325;background-color:#ffe500}






/*커스텀*/
#sh_content .sub_logo{width: 70px;display: flex;margin: 0 auto; }
#sh_content .equipment .s1__fig{margin-top: 50px;}
#sh_content .equipment .s1__list{display: flex;border-width: 1px 0;flex-wrap: wrap; overflow: hidden;}
#sh_content .equipment .s1__list2{display: flex;border: 1px solid #e3e3e3;border-width: 1px 0;flex-wrap: wrap;}
#sh_content .equipment .s1__item{width: 20%;position: relative;padding:0 0 30px 0;overflow: hidden;}
#sh_content .equipment .s1__item.s1__item2{width: 25%;}
#sh_content .equipment .s1__item-img{width: 100%;padding-top: 30px;}
#sh_content .equipment .s1__item-img img{display: block;width: 100%;}
#sh_content .equipment .s1__item-txt{padding: 0 16px;display: flex;flex-direction: column;margin-top: 24px;text-align: center;justify-content: center;}
#sh_content .equipment .s1__item-txt01{font-size: 17px;font-weight: 400;line-height: 1.6;}
#sh_content .equipment .s1__item-txt02{font-family: var(--e-font);color: var(--primary);font-size: 22px;font-weight: 500;line-height: 1.33;margin-top: 10px;text-transform: uppercase;}
#sh_content .equipment .s1__item-txt02.small{font-size: ;}

#sh_content .equipment .s1__list2 .s1__item{background-color: #fff;border: solid #e3e3e3;border-width: 0px 1px 1px 0;}
#sh_content .equipment .s1__list2 .s1__item-img img{max-width: 120px;margin-left: auto;margin-right: auto;}

#sh_content .equipment .s2__item{width: 25%;position: relative;padding:0 0 30px 0;overflow: hidden;    border: 1px solid #e3e3e3;}

/* 둘러보기 */
#sh_content .hospital{position: relative;}
#sh_content .hospital::before{position: absolute; top: -7%;right: -65%; content:''; width: 100%; height: 380px; background:url(/page/img/round_bg.png) no-repeat center / contain; opacity: .7;}

#sh_content .hospital .tabs {margin-top: 50px;padding-bottom: 40px;}
#sh_content .hospital .navSwiper, #sh_content .hospital .navSwiper2{margin-top: 20px;}
#sh_content .hospital .tab_item {
    width: calc(100%/2);
    height: 50px;
    background-color: #f1f1f1;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #333333;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  #sh_content .hospital .tab_item:hover {
    opacity: 0.75;
  }
  
  /* 라디오 버튼 UI삭제*/
  input[name="tab_item"] {
    display: none;
  }
  
  /* 탭 컨텐츠 스타일 */
  #sh_content .hospital .tab_content {
    display: none;
    padding: 20px 0px 0;
    clear: both;
    overflow: hidden;
  }
  

  /* 선택 된 탭 콘텐츠를 표시 */
  #all:checked ~ #all_content,
  #programming:checked ~ #programming_content,
  #design:checked ~ #design_content {
    display: block;
  }
  
  /* 선택된 탭 스타일 */
  #sh_content .hospital .tabs input:checked + .tab_item {
    background-color: var(--primary);
    color: #fff;
  }
/* 둘러보기 */



 
/*오시는길*/
#sh_content .location{position: relative;padding-bottom: 100px;}
#sh_content .location::before{position: absolute; top: -31%;right: -50%; content:''; width: 100%; height: 500px; background:url(/page/img/leaf_bg.png) no-repeat center / contain}
#sh_content h1{font-size: 32px;margin-bottom: 50px; text-align: center;font-weight: 500;letter-spacing: -1.3px;margin-top: 50px;color: #333;}
#sh_content .location .box01 {
	width: 50%;
	float: left
}

#sh_content .location .box01 .map {
	width: 100% !important
}

#sh_content .location .box02 {
	width: 50%;
	float: right;
	background: #E9F5F7;
	height: 600px;
	padding: 100px 30px;
margin-bottom: 100px;
	position: relative;
}


#sh_content .location .box02 .mapcon_box {
	margin-bottom: 40px;
}

#sh_content .location .box02 .mapcon_box:nth-child(3) {

}


#sh_content .location .box02 .mapcon_box ul {
	display: flex;
	gap: 40px;
	font-size: 19px;
	font-weight: 400;
}

#sh_content .location .box02 .mapcon_box ul strong {
	color: var(--primary);
    font-weight: 600;
}

#sh_content .location .box02 .mapcon_box .time_table,
#sh_content .location .box02 .mapcon_box .contact_num {
	display: flex;
	gap: 5px;
	flex-direction: column;
}

#sh_content .location .box02 .mapcon_box .time_table span {
	font-size: 18px;
	font-weight: 600;
	color: #666;
}

#sh_content .location .box02 .mapcon_box .contact_num b {
	font-size: 40px;
	font-weight: 700;
	color: var(--primary);
    font-family: var(--e-font);
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    color: #fff;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
color: #fff;
}

@media (max-width: 768px) {
	#sh_content .location {
		position: relative;
	}
	} 


	#sh_content .location .leaf02 {
		position: absolute;
		top: 0;
		right: 0;

		width: 20%;
	}

	#sh_content .location .tit_txt {
		margin-bottom: 30px;
	}
/*오시는길*/


/*시력교정*/
.tab_inner{width: 1200px;margin: 0 auto;padding: 100px 0 0;}
.clearfix:before, .clearfix:after { content:" "; display:table; clear:both; height:0;}
* html .clearfix {height:1%}
.clearfix>li{float: left;}
.tab_menu {width:100%;}

.tab_menu ul li{width:25%; text-align:center; line-height: 50px; background:#f1f1f1;  box-sizing:border-box; font-size: 17px;}
.tab_menu_2 ul li{width: 33%;}
.tab_menu_4 ul li{width: 50%;}
.tab_menu ul li.active{background: var(--primary);}
.tab_menu ul li.active a{color: #fff;}
.tab_content{}


.pc_img{display: block;}
.m_img{display: none;}

@media (max-width:1080px){
    .pc_img{display: none;}
    .m_img{display: block;}
    .tab_inner{padding: 50px 0 0;width: 95%;}
    .tab_menu ul li{line-height: 40px; font-size: 11px;}
    .tab_menu_2 ul li{font-size: 11px;}
    .tab_menu_4 ul li{}

    #sh_content img{
        image-rendering: unset;
        width: 100%;
        }
        #sh_content .inner{
            width: 93%;
            padding: 50px 0;
        }
        #sh_content .sub_logo{
            width: 40px;
        }
        #sh_content h1{
            font-size: 16px;
            margin-bottom: 20px;
            margin-top: 20px;
        }
        #sh_content h1 br{
            display: none;
        }
        #sh_content .equipment .s1__fig{
            margin-top: 20px;
        }
        #sh_content .equipment .s2__item{
            width: 50%;
            padding: 0 0 20px 0;
        }
        #sh_content .equipment .s1__item-txt01{
            font-size: 11px;
        }
        #sh_content .equipment .s1__item-txt02{
            font-size: 14px;
            margin-top: 5px;
        }
        #sh_content .equipment .s1__item-img{
            margin-top: 20px;
        }
        #sh_content .hospital::before{
            display: none;
        }
        #sh_content .hospital .tab_item{
            font-size: 11px;
        }
        #sh_content .hospital .tabs{
            margin-top: 20px;
        }
        #sh_content .hospital .tab_item{height: 40px;}
        #sh_content .hospital .tab_item{line-height: 40px;}
        #sh_content .location .box01{width: 100%;}
        #sh_content .location .box01 iframe{height: 300px;}
        #sh_content .location::before{display: none;}
        #sh_content .location .box02{width: 100%;padding: 30px 20px;margin-bottom: 50px;}
        #sh_content .location .box02 .mapcon_box ul{font-size: 11px;}
        #sh_content .location .box02 .mapcon_box ul strong{font-size: 11px;}
        #sh_content .location .box02 .mapcon_box .time_table span{font-size: 11px;}
        #sh_content .location .box02 .mapcon_box .contact_num b{font-size: 11px;}
        #sh_content .location .box02{height: auto;margin-top: 20px;}
        #sh_content .location .box02 .mapcon_box{margin-bottom: 20px;}
}


/*시력교정*/

/* 반응형 [s] */
@media (hover:hover){
#sh_ft .form_area .send_btn button:hover{border:2px solid #fff;color:var(--primary);background-color:#fff}
#sh_ft .same_as a:hover{color:var(--primary)}
#sh_ft .copy .top a:hover{color:#fff}
#sh_ft .copy .bottom a:hover{color:#fff}
}
@media (max-width:1380px){
#sh_section .section_h2{font-size:50px}
#sh_section .section_p{font-size:18px}
#sh_ft{padding:160px 0 40px}
#sh_ft .top{width:90%}
#sh_ft .form_area h2{font-size:50px}
#sh_ft .form_area p{font-size:18px}
#sh_ft .bottom{width:90%}
#sh_ft .bottom .cate{font-size:18px}
#sh_ft .copy .main_info{width:90%}
#sh_ft .info_box li{gap:25px}
#sh_ft .info_box .number{font-size:28px}
#sh_ft .info_box .day, #sh_ft .bottom .info_box .time{font-size:16px}
#sh_ft .same_as li{gap:25px}
#sh_ft .same_as address{font-size:18px}
#sh_ft .same_as a{font-size:16px}
}
@media (max-width:1024px){
#sh_content{padding:50px 2.5%;max-width:unset;width:100%}
#sh_aside{display:none;}
#sh_section .section_h2{font-size:42px}
#sh_section .section_p{font-size:17px}
#sh_ft{padding:120px 0 40px}
#sh_ft .top{width:90%}
#sh_ft .form_area h2{font-size:40px}
#sh_ft .form_area p{font-size:16px}
#sh_ft .form_area form{margin-top:40px;width:95%}
#sh_ft .form_area .sh_input{padding:20px 0}
#sh_ft .form_area textarea{padding:20px 0 55px !important}
#sh_ft .form_area .p_info{gap:15px}
#sh_ft .form_area .send_btn button{width:140px;height:56px}
#sh_ft .bottom{margin:90px auto;width:95%}
#sh_ft .bottom .cate{min-width:52px;font-size:16px}
#sh_ft .bottom svg{width:23px;height:23px}
#sh_ft .copy .main_info{width:95%}
#sh_ft .info_box li{gap:20px}
#sh_ft .info_box .number{font-size:24px}
#sh_ft .same_as li{gap:20px}
#sh_ft .same_as address{font-size:16px}
#sh_ft .same_as a{font-size:15px}
}
@media (max-width:768px){
    #sh_ft_btns a.tel{display: none;}
#sh_content{padding:30px 2.5%}
#sh_section .section_h2{font-size:18px}
#sh_section .section_p{font-size:11px; line-height: 17px;}
#sh_ft{padding:50px 0}
#sh_ft .top{flex-direction:column;align-items:center;text-align:center}
#sh_ft .form_area{width:100%}
#sh_ft .form_area form{width:100%}
#sh_ft .form_area h2{font-size:18px}
#sh_ft .form_area p{font-size:11px}
#sh_ft .form_area .sh_input{font-size:11px}
#sh_ft .form_area .consent a{font-size: 11px;}
#sh_ft .form_area .prv_area{flex-direction:column-reverse;align-items:center;gap:20px; margin-top:15px}
#sh_ft .form_area .consent{margin-left:auto;}
#sh_ft .form_area .send_btn{padding-top:0px}
#sh_ft .form_area .send_btn button{width:100px;height:35px;font-size:12px}
#sh_ft .map_area{margin-top:80px;width:100%}
#sh_ft .info_box{gap:35px}
#sh_ft .info_box li{flex-direction:column;align-items:center;gap:10px}
#sh_ft .info_box li:last-child ul li+li{margin-top:18px}
#sh_ft .info_box li:last-child ul li{gap:5px;margin-top:10px}
#sh_ft .same_as li{flex-direction:column;text-align:center;gap:10px}
#sh_ft .same_as li+li{margin-top:60px}
#sh_ft .same_as address{font-size:15px}
#sh_ft .copy{margin-top:80px;padding-top:80px}
#sh_ft .copy .top{gap:20px}
#sh_ft .copy .main_info{margin:90px auto;text-align:center}
}
@media (max-width:480px){
#sh_content{padding:0px;min-height: 0px;}
#sh_ft{padding:50px 0}
#sh_ft .form_area .sh_input{padding:15px 0;font-size:12px}
#sh_ft .form_area textarea{padding:15px 0 50px !important}
#sh_ft .form_area .p_info{gap:12px}
#sh_ft .space{display: none;}
#sh_ft .form_area .prv_area{margin-top:6px}
#sh_ft .map_area{margin-top:40px;height:300px}
#sh_ft .bottom{margin:40px auto}
#sh_ft .bottom svg{width:21px;height:21px}
#sh_ft .bottom .cate{min-width:unset;font-size:15px}
#sh_ft .info_box li{gap:4px}
#sh_ft .info_box .number{font-size:11px}
#sh_ft .info_box .day, #sh_ft .bottom .info_box .time{font-size:11px}
#sh_ft .info_box li:last-child ul li{gap:0px;margin-top:6px}
#sh_ft .info_box li:last-child ul li+li{margin-top:15px; font-size: 11px;}
#sh_ft .same_as li{gap:7px}
#sh_ft .same_as li+li{margin-top:30px}
#sh_ft .same_as address{font-size:12px}
#sh_ft .same_as .youtube{width:22px;height:15px}
#sh_ft .same_as .kakao{width:20px;height:18px}
#sh_ft .same_as a{font-size:11px}
#sh_ft .copy{margin-top:50px;padding-top:50px}
#sh_ft .copy .top a{font-size:11px}
#sh_ft .copy .top img{width: 35%;}
#sh_ft .copy .main_info{margin:20px auto;font-size: 11px;}
#sh_ft .copy .bottom{flex-direction:column;align-items:center;gap:5px; font-size: 11px;}
#fix_tel{display:none}
#sh_ft_btns{display:none}
#sh_ft dl dt{font-size:16px}
}
/* 반응형 [e] */