/**
 * Created by PhpStorm.
 * Date         : 2021-11-12
 * Developer    : SeHwan Hwang
 * Description  : wp_responsive.css
 * ⓒ 2021. WebPlanet Co. All Rights Reserved.
 */

@charset "utf-8";

/**********************************************************************************************************************/
/* 작성방법 */
/*
1. 모든 스타일은 클래스명 .wp_wrap 을 시작으로 작성한다.
2. 공통 스타일의 클래스명은 cm_ 접두어를 사용한다.
 */
/**********************************************************************************************************************/

@media (max-width: 1400px) {
      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/


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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/

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



      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/

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

}


@media (max-width: 1240px) {
      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/

      .wp_wrap header .header_inner {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
      }



      /* Mobile Button */
      .wp_wrap header .header_inner .mo_btn_box {
            display: flex;
      }

      .wp_wrap header::after {
            display: none;
      }


      /* Logo  */
      .wp_wrap header .header_inner .logo {
            width: 95%;
            display: flex;
            justify-content: center;
            align-items: center;
      }

      /* Navigation  */
      .wp_wrap header .header_inner nav {
            display: none;
      }

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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/

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



      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/
      .wp_wrap footer .footer_inner {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
      }

      .wp_wrap footer .footer_inner .foot_nav .foot_info {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            margin-top: 30px;
      }

      .wp_wrap footer .footer_inner .foot_nav .foot_info li {
            padding: 0;
      }

      .wp_wrap footer .footer_inner .foot_nav .copy p {
            text-align: center;
      }

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


}

@media (max-width: 1200px) {

      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/
      /* 이너 사이즈  */
      .wp_wrap .cm_inner {
            width: 100%;
            padding: 0 20px;
      }

      .wp_wrap main #s_main_content .main_content_inner {
            width: 100%;
      }

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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/

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



      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/

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

}

@media (max-width: 1150px) {

      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/

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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/
      /* - Main content section - ///////////////////////////////////////////////////////////////////////////////////////////////////////////// */
      .wp_wrap main #s_main_content {}

      .wp_wrap main #s_main_content .main_content_inner {
            padding: 30px 0;
      }


      .wp_wrap main #s_main_content .main_content_inner .content_box .content_inner .noti_list {
            display: block;
      }

      .wp_wrap main #s_main_content .main_content_inner .content_box .content_inner .noti_list>li {
            margin-bottom: 20px;
      }

      .wp_wrap main #s_main_content .main_content_inner .content_box .content_inner .noti_list>li:last-child {
            margin: 0;
      }



      /* - Main content section End - //////////////////////////////////////////////////////////////////////////////////////////////////////// */
      /**********************************************************************************************************************/



      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/

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

}


@media (max-width: 1000px) {
      .wp_wrap .cm_inner2 {
            width: 100%;
            padding: 0 20px;
      }
}

@media (max-width: 992px) {

      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/


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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/

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


      /**********************************************************************************************************************/
      /* Sub */
      /**********************************************************************************************************************/
      /* //////////////////////////////// - 프로그램소개 - ///////////////////////////////////////////////// */
      /* ----------------------------------- 치료프로그램 --------------------------------------------------------- */
      .wp_wrap main #s_sub_content .sub_content_inner .program_list li {
            width: 32%;
      }

      /* //////////////////////////// - 프로그램소개 종료- ///////////////////////////////////////////////// */
      
      /* ///////////////////////////////// - 고객센터 - ///////////////////////////////////////////////// */
      .wp_wrap #p_service #s_sub_content .sub_content_inner .sub_content_box form .form_inner {
            display: block;
      }

      /* //////////////////////////// - 고객센터 종료- ///////////////////////////////////////////////// */
      /**********************************************************************************************************************/



      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/

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

}


@media (max-width: 768px) {

      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/
      .wp_wrap header #mo_gnb_box .mo_gnb span img {
            display: none;
      }

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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/

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

      /**********************************************************************************************************************/
      /* Sub */
	  .wp_wrap main #s_sub_content .sub_content_inner .sub_content_box .box_inner .txt_box h2 { font-size:30px;}
      /**********************************************************************************************************************/
      /* //////////////////////////////// - 공통파일  - ///////////////////////////////////////////////// */
      .wp_wrap main #s_sub_content .sub_content_inner .sub_content_tit {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
      }

      /* /////////////////////////// - 공통파일 종료 - ///////////////////////////////////////////////// */


      /* //////////////////////////////// - 플래닛센터 - ///////////////////////////////////////////////// */
      .wp_wrap main #s_sub_content .sub_content_inner .sub_content_box .person_list {
            flex-direction: column;
      }

      .wp_wrap main #s_sub_content .sub_content_inner .sub_content_box .person_list .person_txt {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
      }

      /* /////////////////////////// - 플래닛센터 종료 - ///////////////////////////////////////////////// */

      /* //////////////////////////////// - 프로그램소개 - ///////////////////////////////////////////////// */
      /* ----------------------------------- 치료프로그램 --------------------------------------------------------- */
      .wp_wrap main #s_sub_content .sub_content_inner .program_list li {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
      }

      .wp_wrap main #s_sub_content .sub_content_inner .program_list li img {
            width: 40%;
      }

      .wp_wrap main #s_sub_content .sub_content_inner .program_list li p {
            width: 60%;
            padding: 20px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin: 0;
            background: #333;
      }

      /* //////////////////////////// - 프로그램소개 종료- ///////////////////////////////////////////////// */


      /* ///////////////////////////////// - 고객센터 - ///////////////////////////////////////////////// */
      .wp_wrap #p_service #s_sub_content .sub_content_inner .sub_content_box form .form_inner {
            display: block;
      }

      /* //////////////////////////// - 고객센터 종료- ///////////////////////////////////////////////// */
      /**********************************************************************************************************************/


      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/

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

}


@media (max-width: 576px) {

      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/


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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/

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



      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/

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

}

@media (max-width: 420px) {

      /**********************************************************************************************************************/
      /* Header */
      /**********************************************************************************************************************/


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


      /**********************************************************************************************************************/
      /* Main */
      /**********************************************************************************************************************/

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

      /**********************************************************************************************************************/
      /* Sub */
      /**********************************************************************************************************************/

      /* 공통영역 */
      .wp_wrap .cm_tab_box .tab_list li a {
            font-size: 10px;
            padding: 13px 5px;
      }

      .wp_wrap .cm_tab_box .tab_list li.on a {
            background: url(../img/sub/arrow.png) no-repeat 95% 16px #fff;
      }



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


      /**********************************************************************************************************************/
      /* Footer */
      /**********************************************************************************************************************/

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


}