@charset "utf-8";
/* 
footer 및 header은 기존 responsive.css 및 design.css에 설정되어있음 - 

** 해당css에서 설정시 반영안됨
*/


.swiper-slide img.pc_view {
  display: block;
}
.swiper-slide img.mo_view {
  display: none;
}

/* max-width 1023px ================================================================================================================= */
/* ============================================================================================================================================ */
/* ============================================================================================================================================ */
@media all and (max-width: 1023px) {
  .swiper-slide img.pc_view {
    display: none !important;
  }
  .swiper-slide img.mo_view {
    display: block;
  }
}






/* max-width : 768px ==================================================================================================================== */
/* ============================================================================================================================================ */
/* ============================================================================================================================================ */




@media all and (max-width: 768px) {
  .main_container {
    overflow: hidden;
  }
  /* 나머지 head => responsive.css */
  .btn_call {top: 1.3rem;  right: 3%;  width: 38px;}


  /* sub 공통 ===============================================================*/
  button {outline: none; }



  .sub01_tt_bk {
    background-image: url("../img/sub01/mobile/mo_sub01_bk.jpg");
  }

  
  /* sub0101.php ==================== */
  .s0101_con01_bk { background-image: url("../img/sub01/mobile/mo_sub0101_con01_bk.jpg");}
  .sub0101_con01 { padding:0; height: 300px;}
  .sub0101_con01_txt { width: 83%; padding: 0px 0 5%;}
  .sub0101_con01_li {width: 92%;  padding: 5% 0%;}
  .sub0101_con01_li li { width: 73%; margin-bottom: 3%;}
  .sub0101_con01_li::before { display: none;}



  /* sub0103.php ====== */

  .s0103_con01_bk {background-image: url("../img/sub01/mobile/mo_sub0103_con01_bk.jpg");}
  .sub0103_con01_top {  width: 100%;    padding: 0% 0;}
  .sub0103_con01_btm { padding: 11% 0;}
  .sub0103_con01_btm img { width: 90%; margin: 0 auto;}
  .sub0103_con01_btm::before { background-color: #001c8973;}

  .s0103_con03_bk {background-image: url("../img/sub01/mobile/mo_sub0103_con03_bk.jpg");}
  .sub0103_step_li { width: 90%;}
  .sub0103_step_li li {  width: 46%;}
  .sub0103_con02_mid.on .sub0103_step_li li:nth-child(2) span { animation-delay: 2.2s;}
  .sub0103_con02_btm.on .sub0103_step_li li:nth-child(2) span { animation-delay: 3s; }

  .sub0103_con03 {   padding: 9% 0 10%; }
  .con0103_proc_li { width: 100%; flex-direction: column;}
  .con0103_proc_li li { width: 56%; margin: 8% 0;}
  .con0103_proc_li li:last-child { margin: 8% 0;}
  .con0103_proc_li li::after { top: 100%; right: 50%; transform: translateY(20%);  width: 6vw; height: 10vw;}


  /* sub0105.php ====== */
  .sub0105_con01_bk {background-image: url("../img/sub01/jangbi/m_jangbi_con_bk.png");}
  .sub0105_con01_txt { padding: 8% 0 32%;}
  .sub0105_con01_txt img { width: 80%; margin: 0 auto;}
  .sub0105_jangbi {  width: 95%;  margin: 4% auto;}

  /* sub0106.php ====== */
  .sub0106_con01 { padding: 11% 0;}
  .sub0106_con01_txt { width: 34%; margin: 0 auto 7%;}
  .sub0106_con01_li { width: 90%;}
  .sub0106_con01_li .time_guage { margin-bottom: 4.8%;  flex-direction: column;}
  .sub0106_con01_li .time_guage p:first-child { width: 74%;  margin: 0 auto 2%;}
  .sub0106_con01_li .time_guage p:last-child { width: 75%; height: 6vw;}
  
  .sub0106_con02 { padding: 12% 4% 5%;}
  .sub0106_con02_txt { width: 37%; margin: 0 auto 7%;}
  .sub0106_con02_li { width: 95%; justify-content: center;}
  .sub0106_con02_li li {width: 25%; margin: 2% 4% 7%;}
  .link_to_tel.tel_sub06 { margin-bottom: 8%;}

   /* sub02 - 디지털임플란트 ===============================================*/
   .sub02_tt_bk {
    background-image: url("../img/sub02/mobile/mo_sub02_bk.jpg");
  }

  /* 종합병원 수련,구강외과 전문의가 직접 진료(공통 */
  .sub_doc { padding: 9% 0 10%;}
  .sub_doc_bk { background-image: url("../img/mobile/sub_doc_bk.jpg");}
  .sub_doc_top { width: 85%;}
  .sub_doc_btm { width: 80%;}

  /* 시술과정 서브 텍스트(공통)  */
  .sub_page_p_bk { background-image: url("../img/mobile/sub_page_p_bk.jpg");}
  .sub_page_p img.pc_view {display: none;}
  .sub_page_p img.mo_view {display: block;}
  .sub_page_p img:nth-child(2) {width: 60%; margin: 6% auto 5%;}



  /* sub0401.php ======== */
  .sub04_tt_bk { background-image: url("../img/sub04/mobile/mo_sub04_bk.jpg");}

  .sub0401_con01 {padding: 12% 0;}
  .sub0401_con01_txt {width: 62%; margin: 0 auto 10%;}
  .sub0401_con01 ul {width: 90%;}
  .sub0401_con01 ul::after {height: 3.6vw;}
  .sub0401_con01 .s0401_arr01 { left: 29%;}
  .sub0401_con01 .s0401_arr02 { right: 28.5%;}
  .sub0401_con01 .s0401_arr {width: 8vw; height: 7vw;}

  .sub0401_con02 {padding: 0;}
  .sub0401_con02_bk { background-image: url("../img/sub04/mobile/sub0401_con02_bk.jpg");}
  .sub0401_con02 img {width: 80%; margin: 0 auto;}

  .sub0401_con03 {padding: 10% 0 9%;}
  .sub0401_con03_txt {width: 65%; margin: 0 auto 7%;}
  .sub0401_con03 ul { width: 60%;}
  .sub0401_con03 li { width: 95%; margin: 2% 0 6%;}
  .sub0401_con03 li:nth-child(odd) { margin-right: 0;}

  /* sub0402.php ======== */
  .sub0402_con01 {padding: 12% 0 8%;}
  .sub0402_con01_txt {width: 65%;margin: 0 auto 12%;}
  .sub0402_con01_txt img:first-child {width: 100%; margin: 0 auto 5%;}
  .sub0402_con01 ul { width: 75%; flex-direction: column; flex-wrap: wrap;}
  .sub0402_con01 li { width: 87%;}
  .sub0402_con01 li:nth-child(2) { margin-bottom: 13%;}
  .sub0402_con01 li:not(:last-child)::after {
      width: 7vw;
      height: 7vw;
      top: auto;
      bottom: -4%;
      right: 43%;
      transform: translate(0%, -100%) rotate(90deg);
  }
  .sub0402_con01 li:nth-child(2)::after {bottom: -18%;}

  .sub0402_con02 {padding: 12% 0;}
  .sub0402_con02_txt { width: 65%; margin: 0 auto 6%;}
  .sub0402_con02 .con_wrap > div { width: 65%; flex-direction: column;margin: 0 auto 7%;}
  .sub0402_con02 .con_wrap > div img { width: 75%;}
  .sub0402_con02 .con_wrap > div img:first-child { margin: 0 auto 23%;}
  .sub0402_con02 .con_wrap > div::after {
    top: 53%;
    left: 45%;
    width: 6vw;
    height: 6vw;
    border: 6vw solid #3f3a39;
    border-top: 4vw solid transparent;
    border-bottom: 4vw solid transparent;
    border-right: 4vw solid transparent;
    transform: translate(-20%, -50%) rotate(90deg);
  }
  .sub0402_con02 ul { width: 75%; flex-wrap: wrap; justify-content: space-between;}
  .sub0402_con02 li { width: 47%; margin: 0 0 7%; display: flex;}
  .sub0402_con02 li:not(:last-child) { margin: 0 0 7%;}
  .sub0402_con02 li::after {
    height: 5px;
    right: -17%;
    width: 19%;
    background: url("../img/sub04/sub0402_line.png") repeat-x center/auto 100%;
  }
  .sub0402_con02 li:nth-child(1) { order: 1; }
  .sub0402_con02 li:nth-child(2) { order: 2; }
  .sub0402_con02 li:nth-child(3) { order: 4; }
  .sub0402_con02 li:nth-child(4) { order: 3; }
  .sub0402_con02 li:nth-child(2)::after { 
    top: auto;
    bottom: -7%;
    right: 39%;
    transform: rotate(90deg);
  }
  .sub0402_con02 li:nth-child(3)::after { right: auto; left: -14%;}

  .sub0402_con03 { padding: 15% 0 26%;}
  .sub0402_con03_bk {background-image: url("../img/sub04/mobile/sub0402_con03_bk.jpg");}
  .sub0402_con03_txt {width: 78%; margin: 0 auto 0%;}
  .sub0402_con03 ul { width: 100%; height: 196vw; padding-left: 0;  max-height: none;}
  .sub0402_con03 li:not(.s0402_con03_line) { width: 40%; top: 23%;}
  .sub0402_con03 li:nth-child(1) {left: 6%;}
  .sub0402_con03 li:nth-child(2) { left: 67%;}
  .sub0402_con03 li:nth-child(3) { top: 60%;}
  .sub0402_con03 li:nth-child(4) { top: 31.5%; right: 45%;}
  .sub0402_con03 li:nth-child(5) { left: 27%; top: auto;  bottom: 5%;}
  .sub0402_con03 li:nth-child(6) { left: 40%; top: auto; bottom: 5.5%;}
  .sub0402_con03 .s0402_con03_line::after, .sub0402_con03 .s0402_con03_line::before { display: none;}
  .sub0402_con03 .s0402_con03_line { background: url("../img/sub04/mobile/s0402_step_bk.png") no-repeat center/100% auto;}


  .sub0402_con03 li:not(.s0402_con03_line)::after { top: 25%; right: -15%; width: 9vw; height: 6vw;}
  .sub0402_con03 li:nth-child(2)::after,.sub0402_con03 li:nth-child(4)::after{display: none;}
  .sub0402_con03 li:nth-child(3):after {transform: rotate(0deg) scale(-1) translate(466%, 12%);}
  .sub0402_con03 li:nth-child(5):after {left: 117%; transform: translate(-113%, -12%) scale(-1);}

  /* sub05 - 임플란트 평생 관리 ===============================================*/
  .sub05_tt_bk {background-image: url("../img/sub05/mobile/mo_sub05_bk.jpg");}

  /* sub0501.php ========== */
  .sub0501_con01 { padding: 12% 0 0;}
  .sub0501_con01_txt { width: 65%; margin: 0 auto 10%;}
  .s0501_con01_top { width: 80%; margin: 0 auto 9%; flex-wrap: wrap;}
  .s0501_con01_top li { width: 48%; margin: 0 1% 2%;}
  .s0501_con01_top li:not(:last-child),.s0501_con01_top li:last-child { margin: 0 1% 2%;}
  .s0501_con01_btm {flex-direction: column;}
  .s0501_con01_btm p { padding: 0; margin: 0 auto 5%; text-align: center;}
  .s0501_con01_btm ul, .s0501_con01_btm p { width: 100%;}
  .s0501_con01_btm ul {padding: 5% 0; text-align: center;}
  .s0501_con01_btm li img { width: 85%; margin: 0 auto;}
  .s0501_con01_btm li:first-child img {width: 70%;}


  .sub0501_con02 {padding: 12% 0 8%;}
  .sub0501_con02_txt { width: 68%; margin: 0 auto 20%;}
  .sub0501_con02 ul { width: 100%; height: 285vw; }
  .sub0501_con02 ul::before { width: 4px; left: 50.7%;}
  .sub0501_con02 li:nth-child(1) { width: 100%; top: -2%; transform: translate(-50%, 0%);}
  .sub0501_con02 li:nth-child(2) { width: 100%; top: 16%; transform: translate(-50%, 0%);}
  .sub0501_con02 li:nth-child(3) { width: 100%; top: 46%; transform: translate(-50%, 0%);}
  .sub0501_con02 li:nth-child(4) { width: 100%; top: 64%; transform: translate(-50%, 0%);}
  .sub0501_con02 li:nth-child(5) { width: 100%; top: 82%; transform: translate(-50%, 0%);}

  .sub0501_con03, .sub0501_con04 { padding: 12% 0;}
  .sub0501_con03 .d_flex_c {flex-direction: column;}
  .sub0501_con03_txt, .sub0501_con04_txt { width: 65%; margin: 0 auto;}
  .s0501_con03_lf {margin: 0 auto 6%; width: 55vw; height: 59vw;}
  .sub0501_con03 ul { width: 70%;}
  .sub0501_con03 ul::before {
    top: 11%;
    width: 0.6vw;
    background: url("../img/sub05/s0501_con03_line.png") repeat-y center/100% auto;
    transform: translate(-121%, 0%);
  }
  .sub0501_con03 li { margin: 3% 0 17%;}
  .sub0501_con04 ul { width: 100%;margin: 6% auto 0;justify-content: center;flex-wrap: wrap;}
  .sub0501_con04 li { width: 28%; margin: 4% 2.5%;}

  
  /* community -  커뮤니티 ===============================================*/
  .community_tt_bk {background-image: url("../img/community/mo_community_bk.jpg"); background-size: 125% auto;}
  
}



/* resposive keyfarme===================================== */
@keyframes m_main_con03_ani {
  0% {
    opacity: 0;
    -webkit-transform: translateY(156%);
    -ms-transform: translateY(156%);
    transform: translateY(156%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(65%);
    -ms-transform: translateY(65%);
    transform: translateY(65%);
  }
}

@keyframes mo_s0202Con0404Md {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}