@charset "UTF-8";
/*----------------------------------------
    content
----------------------------------------*/

/* The style applied when the screen width is less than or equal to 767px */
@media screen and (max-width: 767px) {
  body {
    min-width: 375px;
    margin: 0 auto;

    .pc_only {
      display: none !important;
    }
    .sp_only {
      display: block !important;
    }

    #header, #content, #footer {
      width: 100%;
      min-width: 375px;
      margin: 0 auto;
    }

    #header .title {
      width: 100%;
      min-width: 375px;
      font-size: 26px;
      line-height: 1;
    } 
    #header .sub-item {
      width: 90%;
      min-width: 350px;
      margin: 16px auto ;
      > a {
        .item {
          width: 106px;
          height: 62px;
          margin: auto;
          > img {
            width: 30px; 
            margin: 6px;
          }
          .txt {
            /* font-size: 12px; */
            line-height: 18px;
          }
        }
      }      
    }

    #content .section .banner{
      width: 100%; 
      height: 220px;
      /* > img {
        min-width: 375px;
        height: auto;
      } */
    }
    #content .section .inner .txt{
      font-family: "AOTFSGP Light";
      font-size: 16px;
      line-height: 26px;
      color: #000;
      margin: 0px auto;
      padding: 20px;
    }

    #content .section .inner .callapce {
      width: 80%;
      padding: 20px 0;
      min-width: 335px;
      margin-top: 60px;
    }

    .mt_0 {
      margin-top: 0px !important;
    }

    .pc_ta_center {
      text-align: left !important;
    }

    /************************************* sec_01 *************************************/
    .video-box {
      width: 90%;
      height: 100%;
      margin: 0 auto;
    }
    #openModalBtn { 
      min-width: 335px;
      /* position: fixed;
      left: 50%;
      transform: translate(-50%);
      -webkit-transform: translate(-50%);
      -moz-transform: translate(-50%);
      -ms-transform: translate(-50%);
      -o-transform: translate(-50%);
      bottom: 40px; */
    }
    #content #sec_01 .inner .con_02 .con_box {
      flex-direction: column;
    
      .arrow_right {
        height: 20px;
        text-align: center;
        transform: rotate(90deg);
        > img {
          width: 7px;
          margin: auto;
        }
      }
    }

    #content #sec_01 .inner .con_02 .con_box .box {
      width: 92%;
      min-width: 350px;
      height: 150px;
      min-width: 335px;
      border-radius: 8px;
      background-color: #f6f6f6;
      padding: 0px 12px 12px 8px ;
      &.box_03 {
        min-height: 150px;
        height: auto;
      }
      &.box_04 {
        min-height: 150px;
        height: auto;
      }
      .text_01 {
        margin-left: 5px;
      }
      .text_02 {
        width: 95%;
        min-width: 234px;
        color: #000;
        margin: auto;
        /* &.mt10 {
          margin-top: 10px;
        }
        &.mt-10 {
          margin-top: -10px;
        } */

        >div:nth-child(1){
          width: 100%;
          height: auto;        
        }
    
        >div:nth-child(2){
          width: 100%;
          height: auto; 
          font-size: 14px;
          line-height: 24px;
          /* min-width: 234px; */
        }
      }
    }

    #content #sec_01 .inner .con_02 .con_box .box .container {
      align-items: stretch;
      justify-content: flex-start;
      flex-wrap: nowrap;
      flex-direction: row;
    }

    #content #sec_01 .inner .con_02 .con_box .box .container .img {    
      min-width: 84px;
      min-height: 84px;
      text-align: center;  
      /* margin: 12px 12px 12px 8px; */
      #content #sec_01 .inner .con_02 .con_box .box    
      > img {
        width: 84px;
        min-width: 84px;
      }
    }

    #content #sec_01 .inner .con_03 {
      padding: 20px 0;
    } 
    #content #sec_01 .inner .con_03 .con_box {
      flex-direction: column;
    }
  
    #content #sec_01 .inner .con_03 .con_box .box {
      width: 92%;
      min-width: 335px;
      height: 70%;
      border-radius: 8px;
      background-color: #f6f6f6;
      padding-bottom: 16px;
      
      .text_02 {
        width: 100%;
        height: 100%;
        font-family: "AOTFSGP Light";
        font-size: 16px;
        line-height: 26px;
        color: #000;
    
        >div:nth-child(1){
          width: 100%;
          height: 100%;
          /* margin: 20px 15px;    */
        }
    
        >div:nth-child(2){
          width: 100%;
          font-size: 14px;
          line-height: 24px;
          /* padding: 0 15px 0 15px; */
        }
      }
    }
    
    #content #sec_01 .inner .con_03 .con_box .box .container .img {
      text-align: center;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      /* min-width: 335px;
      height: 335px; */
      > img {
        width: 100%;
        /* min-width: 420px; */
      }
    }
    
    #content #sec_01 .inner .con_04 {
      padding: 20px 0;
      .min-title {
        margin: 2% 0;
      }
    }
    
    #content #sec_01 .inner .con_04 .con_box .box .text {
      .accordion-q { 
        .title {
          width: 85%;
        }
      }
    }

    #content #sec_01 .inner .con_04 .con_box .box {
      width: 92%;
      min-width: 335px;
      height: 100%;
    }
    #content #sec_01 .inner .con_04 .con_box .box .text {
      .accordion-a { 
        .context {
          width: 85%;
        }
      }
    }

    /************************************* sec_02 *************************************/
    #content #sec_02 .inner .txt {
      margin: 30px auto 30px;
    }
    #content #sec_02 .inner .con_02 {
      margin-top: 40px;
    }
    #content #sec_02 .inner .con_02 .con_box {
      flex-direction: column;
    
      .arrow_right {
        height: 20px;
        text-align: center;
        transform: rotate(90deg);
        > img {
          width: 7px;
        }
      }
    }
    #content #sec_02 .inner .con_02 .con_box .box {
      width: 92%;
      height: 100%;
      min-width: 335px;
      margin-bottom: 0px;
      padding: 8px 8px 15px;
      .text_01 {
        margin-bottom: 5px;
        margin-left: 5px;
      }    
      .text_02 {
        width: 100%;
        >div:nth-child(1){
          width: 100%;
          padding: 0px 10px 0px;
        }
        >div:nth-child(2){
          font-size: 14px;
          line-height: 24px;
          width: 100%;
          padding: 0px 8px 0px 10px;
        }
      }
    }
    #content #sec_02 .inner .con_02 .con_box .box .container {
      flex-direction: row;
      flex-wrap: nowrap;
    }
    #content #sec_02 .inner .con_02 .con_box .box .container .img {
      margin: 0 auto;
      width: 50%;
      min-width: 104px;
      height: 100%;
      
      > img {
        width: 100%;
      }
    }
    #content #sec_02 .inner .con_04 {
      margin-top: 80px;
    }
    /************************************* sec_03 *************************************/
    #content #sec_03 .inner .txt {
      margin: 0px auto 40px;
    }

    #content #sec_03 .inner .con_02 .con_box .box { 
      width: 300px; 
    }

  }
}