/*AOS관련 -> 모바일에서는 애니메이션 효과가 안나타나게 선언 후, 그로인해 화면이 안나오는 문제 해결을 위한 css 추가*/
@media screen and (max-width: 767px) { 
  [data-aos] {
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 메인 비주얼 슬라이드 */
.idx_vis{ width: 100%; padding-top: 143px;}
.slider-wrap{ width:100%; height: 700px;}
.slider-wrap .mvisual{ width:100%; height: 700px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; }
.slider-wrap .mvisual01{ background-image: url(../img/main/visual.jpg);}
.slider-wrap .mvisual02{ background-image: url(../img/main/visual02.jpg);}
.slider-wrap .mvisual03{ background-image: url(../img/main/visual03.jpg);}

.idx_vis .main_text{ position: absolute; left: 50%; margin-left: -600px; top: 50%; transform: translateY(-50%); z-index: 20;}
.idx_vis .main_text h2{ font-size: 32px; font-weight: normal; font-weight: 700; letter-spacing: -1.3px; color: #152a4f;}
.idx_vis .main_text h2 strong{ color: #01abf9;}
.idx_vis .main_text h1{ font-size: 80px; font-weight: 900; letter-spacing: -1.3px; color: #152a4f; margin: 15px 0 25px 0;}
.idx_vis .main_text h1.h1d{ font-size: 70px;}
.idx_vis .main_text h1 span{ font-family: 'SBAggro'; font-weight: 300; font-size: 30px; letter-spacing: 1.2px; text-transform: uppercase;}
.idx_vis .main_text p{ font-size: 20px; line-height: 1.7; color: #777;}
.idx_vis .main_text .view{ margin-top: 50px; width: 200px;}
.idx_vis .main_text .view a{ display: block; background-color: #01abf9; line-height: 50px; text-align: center; letter-spacing: 0px; color: #fff; text-transform: uppercase;}
.idx_vis .mt_white h2, .idx_vis .mt_white  h1, .idx_vis .mt_white p{ color: #fff ;}
.idx_vis .vs_doctor{ position: absolute; left: 50%; margin-left: 100px; bottom: 0; z-index: 19;}

.idx_vis .slick-dots{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 18; display: flex;}
.idx_vis .slick-dots li{ margin: 0 8px;}
.idx_vis .slick-dots li > button{ width: 12px; height: 12px; border-radius: 50%; border: 0; text-indent: -9999px; background-color: rgba(0,0,0,.2);}
.idx_vis .slick-dots li.slick-active > button{ background-color: #152a4f;}
.idx_vis .arrows{ z-index: 21;}
.idx_vis .arrows ul{}
.idx_vis .arrows li{ color: #fff; opacity:.2; position: absolute !important; top: 50% !important; margin-top: 50px !important;}
.idx_vis .arrows #prevArrow{ left: 2%;}
.idx_vis .arrows #nextArrow{ transform: rotateY(-180deg); right: 2%;}
.idx_vis .arrows li span{ display: block; width: 35px; height: 4px; background-color: #333; transform: rotate(-45deg);}
.idx_vis .arrows li span:nth-of-type(2){ transform: rotate(45deg); margin-top: 19px;}
.idx_vis .arrows .slick-arrow { width: auto; height: auto; position: relative; top: auto; margin-top: 0px; cursor: pointer;}
.idx_vis .arrows .slick-arrow:hover{ opacity:.8;}

/*작은 데스크탑 & 노트북: 1024px ~ 1279px */
@media screen and (max-width: 1279px) {
  .idx_vis .main_text{ left: 3%; margin-left: 0px;}
}
@media screen and (max-width: 1023px) {
  .idx_vis{ padding-top: 0;}
  .slider-wrap{ height: 450px;}
  .slider-wrap .mvisual{ height: 450px;}
  .idx_vis .main_text h2{ font-size: 22px;}
  .idx_vis .main_text h1{ font-size: 40px;}
  .idx_vis .main_text h1.h1d{ font-size: 40px;}
  .idx_vis .main_text h1 span{ font-size: 20px;}
  .idx_vis .main_text p{ font-size: 15px;}
  .idx_vis .main_text .view{ width: 150px;}
  .idx_vis .main_text .view a{ line-height: 40px; font-size: 13px;}
  .idx_vis .vs_doctor{ left: auto; margin-left: 0; right: 0px;}
  .idx_vis .vs_doctor img{ width: 400px;}
  .idx_vis .slick-dots{ bottom: 10px;}
  .idx_vis .slick-dots li{ margin: 0 5px;}
  .idx_vis .slick-dots li > button{ width: 8px; height: 8px;}
  .idx_vis .arrows{ display: none;}
}
/*모바일 : 480px ~ 767px */
@media screen and (max-width: 767px) { 
  .slider-wrap{ height: 300px;}
  .slider-wrap .mvisual{ height: 300px;}
  .idx_vis .main_text { left: 5%;}
  .idx_vis .main_text h2{ font-size: 16px;}
  .idx_vis .main_text h1{ font-size: 25px; margin: 10px 0 15px 0;}
  .idx_vis .main_text h1.h1d{ font-size: 25px;}
  .idx_vis .main_text h1 span{ font-size: 13px; display: block; margin-top: 10px;}
  .idx_vis .main_text p{ font-size: 12px; line-height: 1.5;}
  .idx_vis .main_text .view{ width: 100px; margin-top: 20px;}
  .idx_vis .main_text .view a{ line-height: 30px; font-size: 11px;}
  .idx_vis .vs_doctor{ right: -2%;}
  .idx_vis .vs_doctor img{ width: 200px;}


    [data-aos] {
    pointer-events: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/*cont01*/
.cont01{ width: 100%; margin-top: 150px;}
.cont01 .cont01_in{ width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.cont01 .c01_box{ width: 335px; height: 335px; background-position:center top; background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; position: relative;}
.cont01 .c01_box > a{ display: block; width: 100%; height: 100%;}

.cont01 .c01_box > a:hover .line::before { width: 100%; }
.cont01 .c01_box > a:hover .line::after { width: 100%; }
.cont01 .c01_box > a:hover .line .line_in::before { height: 100%; }
.cont01 .c01_box > a:hover .line .line_in::after { height: 100%; }
.cont01 .c01_box > a .line::before {
  content: "";
  position: absolute;
  background: rgba(1, 171, 249, 0.7);
  display: inline-block;
  transition: all 0.5s;
  left: 0;
  top: 0;
  width: 0%;
  height: 10px; 
}

.cont01 .c01_box > a .line::after {
content: "";
position: absolute;
background: rgba(1, 171, 249, 0.7);
display: inline-block;
transition: all 0.5s;
left: 0;
top: 325px;
width: 0%;
height: 10px; }

.cont01 .c01_box > a .line .line_in::before {
content: "";
position: absolute;
background: rgba(1, 171, 249, 0.7);
display: inline-block;
transition: all 0.5s;
left: 0;
top: 0;
width: 10px;
height: 0%; }

.cont01 .c01_box > a .line .line_in::after {
content: "";
position: absolute;
background: rgba(1, 171, 249, 0.7);
display: inline-block;
transition: all 0.5s;
left: 325px;
top: 0;
width: 10px;
height: 0%; }

.cont01 .cb01{ background-image: url(../img/main/cont01_img01.jpg); }
.cont01 .cb02{ background-color: #fff;}
.cont01 .cb02 > a{ display: flex; justify-content: center; align-items: center; flex-direction: column; cursor:auto;}
.cont01 .cb03{ width: 690px; background-color: #ebebeb; background-position: 90% 5px; background-size:auto; background-image: url(../img/main/cont01_img06.png);}
.cont01 .cb04{ background-image: url(../img/main/cont01_img02.jpg);}
.cont01 .cb05{ background-image: url(../img/main/cont01_img03.jpg);}
.cont01 .cb06{ background-image: url(../img/main/cont01_img04.jpg);}
.cont01 .cb07{ background-image: url(../img/main/cont01_img05.jpg);}
.cont01 .c01_box p{ font-size: 35px; font-weight: bold; color:#fff; text-align: center; position: absolute; bottom: 40px; left: 0; width: 100%;}
.cont01 .c01_box p > span{ font-family: 'SBAggro'; font-weight: 300; font-size: 12px; letter-spacing: 1px; display: block; opacity: 0.7; text-transform: uppercase; margin-top: 5px;}
.cont01 .cb02 h1{ font-family: 'SBAggro'; font-weight: 500; font-size: 15px; color: #01abf9; text-transform: uppercase;}
.cont01 .cb02 h1::before{ display: block; content: ""; width: 1px; height: 45px; background-color: #01abf9; margin: 0 auto 20px auto;}
.cont01 .cb02 h2{ font-size: 40px; color: #01abf9; letter-spacing: -1.5px; margin: 10px 0 20px 0;}
.cont01 .cb02 h2 > strong{ color: #333;}
.cont01 .cb02 h3{ font-size: 14px; font-weight: 300; color: #777;}
.cont01 .cb03 .cb03_txt{ padding: 70px 0 0 70px;}
.cont01 .cb03 h6{ margin-bottom: 50px;}
.cont01 .cb03 h4{ font-weight:400; font-size: 15px; color: #777; margin: 10px 0 5px 0;}
.cont01 .cb03 h5{ font-weight: 700; font-size: 25px; color: #222; margin-bottom: 20px;}
.cont01 .cb03 h5 > em{ font-size: 20px; font-style: normal;}
.cont01 .cb03 .cb_btn{ font-weight: 500; font-size: 15px; color: #fff; display: inline-block; background-color:#152a4f; padding: 8px 20px; border-radius: 7px; cursor: pointer; transition: all .3s;}
.cont01 .cb03 .cb_btn:hover{ border-radius: 0;}

/*작은 데스크탑 & 노트북: 1024px ~ 1279px */
@media screen and (max-width: 1279px) {
  .cont01 .cont01_in{ width: 100%;}
}
/*태블릿 : 768px ~ 1023px */
@media screen and (max-width: 1023px) {
  .cont01{ margin-top: 0px;}
  .cont01 .cont01_in{ width: 100%;}
  .cont01 .c01_box{ width: 50%; height: 335px; margin-bottom: 0px;}
  .cont01 .c01_box > a:hover .line::before { width: 0%; }
  .cont01 .c01_box > a:hover .line::after { width: 0%; }
  .cont01 .c01_box > a:hover .line .line_in::before { height: 0%; }
  .cont01 .c01_box > a:hover .line .line_in::after { height: 0%; }
  .cont01 .cb03{ display: none;}
  }
/*모바일 : 451px ~ 767px */
@media screen and (max-width:768px) { 
  .cont01 .c01_box{ height:160px;}
  .cont01 .c01_box p{ font-size: 20px; bottom: 20px;}
  .cont01 .c01_box p > span{ font-size: 9px; margin-top: 5px;}
  .cont01 .cb02 h1{ font-size: 10px;}
  .cont01 .cb02 h1::before{ height: 20px; margin: 0 auto 10px auto;}
  .cont01 .cb02 h2{ font-size: 20px; margin: 3px 0 5px 0;}
  .cont01 .cb02 h3{ font-size: 12px;}
}
/*작은 모바일 : ~ 350px */
@media screen and (max-width: 350px) {
}

/*cont02*/
.cont02{ width: 100%; height: 345px; background: url(../img/main/cont02_img.jpg) no-repeat center center/cover; margin-top: 130px; position: relative;}
.cont02 .txt_box{ text-align: center; color: #fff; padding-top: 70px;}
.cont02 .txt_box h1{ font-size: 50px; font-weight: 500;}
.cont02 .txt_box h2{ font-family: 'SBAggro'; font-size: 20px; letter-spacing: 1px; margin: 20px 0 30px 0; font-weight: 300; text-transform: uppercase;}
.cont02 .txt_box p{ font-size: 16px; font-weight: 300; opacity: .7;}
.cont02 .cb_btn02{ position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); text-align: center;}
.cont02 .cb_btn02 > a{ display: block; width: 75px; height: 75px; background-color: #01abf9; font-family: 'SBAggro'; font-size: 15px; font-weight: 700; color: #fff; 
line-height: 1; padding-top: 20px; transition: all 0.5s;}
.cont02 .cb_btn02 > a:hover{ width: 100px; height: 85px; transition: all 0.5s;}
/*작은 데스크탑 & 노트북: 1024px ~ 1279px */
@media screen and (max-width: 1279px) {
}
/*태블릿 : 768px ~ 1023px */
@media screen and (max-width: 1023px) {
  .cont02{ margin-top: 0; height: 230px;}
  .cont02 .txt_box{ padding-top: 30px;}
  .cont02 .txt_box h1{ font-size: 35px;}
  .cont02 .txt_box h2{ font-size: 18px; margin: 10px 0 20px 0;}
  .cont02 .txt_box p{ font-size: 12px;}
  .cont02 .cb_btn02 > a{ width: 55px; height: 55px; font-size: 12px; padding-top: 15px;}
  .cont02 .cb_btn02 > a:hover{ width: 70px; height: 65px;}
}  
/*모바일 : 351px ~ 767px */
@media screen and (max-width:768px) { 
  .cont02{ height: 150px;}
  .cont02 .txt_box{ padding-top: 20px;}
  .cont02 .txt_box h1{ font-size: 25px;}
  .cont02 .txt_box h2{ font-size: 15px;}
  .cont02 .txt_box p{ display: none;}
  .cont02 .cb_btn02 > a:hover{ width: 55px; height: 55px;}
}
/*작은 모바일 : ~ 350px */
@media screen and (max-width: 350px) {
}

/*cont03*/
.cont03{ width: 100%; background-color: #01abf9; padding: 50px 0;}
.cont03 .cont03_in{ width: 1200px; margin: 0 auto;}
.cont03 ul{ display: flex; justify-content:space-between; align-items: center; }
.cont03 li a{ display: block; width: 100%; height: 100%;}
.cont03 li p{ width: 140px; height: 140px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; 
  box-shadow:0 5px 8px rgba(0,0,0,.1); transition: all 0.5s;}
.cont03 li span{ font-size: 22px; font-weight: 500; color: #fff; display: block; margin-top: 20px; text-align: center;}
.cont03 li:hover p { box-shadow:0 5px 15px rgba(0,0,0,.4); transition: all 0.5s;}
.cont03 li:hover span{ font-weight: 700;}

/*작은 데스크탑 & 노트북: 1024px ~ 1279px */
@media screen and (max-width: 1279px) {
  .cont03 .cont03_in{ width: 100%;}
}
/*태블릿 : 768px ~ 1023px */
@media screen and (max-width: 1023px) {
  .cont03{ padding: 40px 0;}
  .cont03 .cont03_in{ width: 100%; padding: 0 2%;}
  .cont03 li p{ width: 90px; height: 90px;}
  .cont03 li span{ font-size: 16px;}
}
/*모바일 : 351px ~ 767px */
@media screen and (max-width:768px) {
  .cont03{ padding: 30px 0 20px 0;}
  .cont03 .cont03_in{ padding: 0 3%;}
  .cont03 ul{ flex-wrap: wrap;}
  .cont03 li { width: 30%; margin-bottom: 15px;}
  .cont03 li p{ width: 90px; height: 90px; margin: 0 auto;}
  .cont03 li p > img{ width: 40px;}
  .cont03 li span{ font-size: 15px; margin-top: 10px;}
  
}
/*작은 모바일 : ~ 350px */
@media screen and (max-width: 350px) {
}

/*cont04*/
.cont04{ width: 100%; margin-top: 150px;}
.cont04 .txt_box{ text-align: center; margin-bottom: 60px;}
.cont04 .txt_box h1{ font-family: 'SBAggro'; font-size: 18px; color: #01abf9; text-transform: uppercase;}
.cont04 .txt_box h2{ font-size: 40px; font-weight: 300; color: #222; margin: 10px 0 20px 0;}
.cont04 .txt_box p{ font-size: 16px; font-weight: 300; color: #666;}

.cont04 .reco_slide li{ margin: 0 40px;}
.cont04 .reco_slide li img{ width: 100%;}

.slick-arrow{ width: 60px; height: 60px; font-size: 1.8rem; color: #999; border: 0; background: none; 
  position:absolute; top: 50%;  margin-top: -60px; z-index: 10;}
.slick-arrow:hover{ color: #222;border: 0; background: none; }
.slick-prev{ left: 50%; margin-left: -502px;}
.slick-next{ left: 50%; margin-left: 440px;}
.slick-prev::before{ display: block; content: "\f053"; font-family: "FontAwesome"; font-weight: 600;}
.slick-next::before{ display: block; content: "\f054"; font-family: "FontAwesome"; font-weight: 600;}
.cont04 .reco_slide .slick-dots{ display: flex; justify-content: center; align-items: center; margin-top: 30px;}
.cont04 .reco_slide .slick-dots li{ margin: 0 10px;}
.cont04 .reco_slide .slick-dots li button{ text-indent: -9999px; width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; border: 0;}
.cont04 .reco_slide .slick-dots li.slick-active button{ background-color: #152a4f;}

/*작은 데스크탑 & 노트북: 1024px ~ 1279px */
@media screen and (max-width: 1279px) {
}
/*태블릿 : 768px ~ 1023px */
@media screen and (max-width: 1023px) {
  .cont04{ margin-top: 80px;}
  .cont04 .txt_box h1{ font-size: 16px;}
  .cont04 .txt_box h2{ font-size: 30px;}
  .cont04 .txt_box p{ font-size: 14px;}
}
/*모바일 : 351px ~ 767px */
@media screen and (max-width:768px) {
  .cont04{ margin-top: 50px;}
  .cont04 .txt_box{ margin-bottom: 40px;}
  .cont04 .txt_box h1{ font-size: 13px;}
  .cont04 .txt_box h2{ font-size: 25px; margin: 5px 0 10px 0;}
  .cont04 .txt_box p{ font-size: 13px;}
  .cont04 .reco_slide li{ margin: 0 10px;}

  .cont04 .reco_slide .slick-dots{ margin-top: 10px;}
  .cont04 .reco_slide .slick-dots li{ margin: 0 5px;}
  .cont04 .reco_slide .slick-dots li button{ width: 8px; height: 8px;}
}
/*작은 모바일 : ~ 350px */
@media screen and (max-width: 350px) { 
}


/*cont05*/
.cont05{ width: 100%; height: 680px; position: relative; margin-top: 150px;}
.cont05 iframe{ height: 690px;}
.cont05 .map_bg{ width: 50%; height: 680px; position: absolute; top: 0px; left: 0px; z-index: 1;
  background: rgb(235,236,237);
  background: linear-gradient(79deg, rgba(235,236,237,1) 55%, rgba(235,236,237,0) 100%);}
.cont05 .cont05_box{ width: 880px; padding: 60px 50px 40px 50px; background-color: #fff; border: 1px solid #ccc; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1); 
  position: absolute; top: 50px; left:2%; z-index: 2;}
.cont05 .cont05_box h1{ font-family: 'SBAggro'; font-size: 13px; color: #ccc; letter-spacing: 0;}
.cont05 .cont05_box h2{ font-size: 25px; font-weight: 500; color: #222; margin-bottom: 25px;}
.cont05 .cont05_box h3{ font-family: 'SBAggro'; font-weight: 500; font-size: 45px; color: #01abf9; margin-bottom: 35px;}
.cont05 .cont05_box p{ font-size: 16px; font-weight: 300; line-height: 1.6; color: #222; padding: 20px 10px; border-top: 1px solid #ddd;}
.cont05 .cont05_box p > span{
    /* color: #f21818; */
    font-size: 12px;
}
.cont05 .cont05_box .open{ display: flex; flex-wrap: wrap;}
.cont05 .cont05_box .open > p { width: 33%; color: #666;}
.cont05 .cont05_box .open > p .--lunch { display: block; padding-left: 5.5em; }
.cont05 .cont05_box p > i{ font-size: 20px; color: #152a4f;}
.cont05 .cont05_box p > strong{ color: #152a4f; display: inline-block; margin-bottom: 10px;}
.cont05 .cont05_box p > b{ display: inline-block; width: 25px;}

/*작은 데스크탑 & 노트북: 1024px ~ 1279px */
@media screen and (max-width: 1279px) {
}
/*태블릿 : 768px ~ 1023px */
@media screen and (max-width: 1023px) {
  .cont05{ height: auto; margin-top: 80px;}
  .cont05 iframe{ height: 300px;}
  .cont05 .map_bg{ display: none;}
  .cont05 .cont05_box{ width: 95%; height: auto; padding: 50px 30px; margin: 20px auto; position: relative; top: auto; left:auto;}
  .cont05 .cont05_box h1{ font-size: 12px;}
  .cont05 .cont05_box h2{ font-size: 20px; margin-bottom: 20px;}
  .cont05 .cont05_box h3{ font-size: 30px; margin-bottom: 20px;}
  .cont05 .cont05_box p{ font-size: 14px; padding: 15px 0px;}
  .cont05 .cont05_box p > i{ font-size: 16px;}
  .cont05 .cont05_box p > b{ width: 20px;}
  }
/*모바일 : 351px ~ 767px */
@media screen and (max-width:768px) {
  .cont05{ margin-top: 50px; background-color: #ebeced; padding: 5% 5%;}
  .cont05 iframe{ height: 200px;}
  .cont05 .cont05_box{ width: 100%; padding: 40px 30px 30px ; margin: 0;}
  .cont05 .cont05_box h3{ margin-bottom: 10px;}
  .cont05 .cont05_box p{ font-size: 13px;}
  .cont05 .cont05_box .open{ display: block;}
  .cont05 .cont05_box .open > p{ width: 100%;}
    .cont05 .cont05_box p > i{ font-size: 16px;}
  .cont05 .cont05_box p > b{ width: 20px;}
    .cont05 .cont05_box .open > p .--lunch { display: inline-block; padding-left: 0; }
}