@charset "UTF-8";


.accordion{margin:3em auto; margin-bottom: 15%; max-width:95%;}
.toggle{display:none}
.option{position:relative;margin-bottom:1em}
.content,.title{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all .3s}
.title{background:#c3c1c1;padding:1.2em;text-align:left;font-size:20px;display:block;color:#fff}
.title::after,.title::before{content:"";position:absolute;right:1.5em;top:1.2em;width:2.5px;height:1.5em;background-color:#ffff;transition:all .3s}
.title::after{transform:rotate(90deg)}
.content{max-height:0;overflow:hidden}
.content p{margin:0;padding:1.2em;text-align:left;font-size:20px;line-height:1.5;background:#e1e1e1;}
.toggle:checked+.title+.content{max-height:500px;transition:all 1.5s}
.toggle:checked+.title::before{transform:rotate(90deg)!important}

footer{margin-top:120px;padding:50px 0 60px 0;background-color:#333;color: #fff !important;text-align:center;font-size:20px}
.footer{display:flex;justify-content:center;align-items:center;padding:30px 0;color:#fff}
.footer_link{display:flex;justify-content:center;margin:0;padding:0}
.footer_link li{list-style:none;margin-right:25px}
.footer_link li a{color:#fff;text-decoration:none}
.footer_link li a:visited{color:#fff;text-decoration:none}
.footer_link li a:hover{color:#fff;text-decoration:underline}

/* //.accordion 2 */
.accordion2{margin:0 auto; margin-bottom: 0%; max-width:100%;}
.toggle{display:none}
.option{position:relative;margin-bottom:0}
.content1,.subj{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all .3s}
.subj{background:#c3c1c1;padding:0em;text-align:left;font-size:20px;display:block;color:#fff; cursor: pointer;}
/* .subj::after{content:'';position:absolute;left:43%;bottom:33%;width:0;height:0;transition:all .3s; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid #8b8b8b;} */
.subj::after{content:"";position:absolute;left:0%;bottom:0%;transition:all .3s; background: url(../assets/images/button/accordion.png) no-repeat; display: inline-block;}
.subj::after{transform:rotate(0deg); width: 16px; height: 16px; margin: 5% 53.8% 2.5% 44%;}
.content1{max-height:0;overflow:hidden}
.content1 p{margin:0;padding:0em;text-align:left;font-size:20px;line-height:1.5;background:#e1e1e1;}
.content1 img{display: block;}
.toggle:checked+.subj+.content1{max-height:500px;transition:all 1.5s}
.toggle:checked+.subj::after{transform:rotate(90deg)!important}

@media screen and (max-width:640px){

    footer{padding:5px 5px 2rem 5px;font-size:16px;margin-top: 0px!important;}
    .footer_link{flex-direction:flex}
    .footer_link li{margin:0 0 10px 0}

    .pc{display:none}

    .accordion{margin:0 auto; margin-bottom: 10%; max-width:95%}
    .toggle{display:none}
    .option{position:relative;margin-bottom:1em}
    .content,.title{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all .3s}
    .title{background:#c3c1c1;padding:1em;padding-right:2.3em;text-align:left;font-size:14px;display:block;color:#fff}
    .title::after,.title::before{content:"";position:absolute;right:1.5em;/*top:40%;*/width:1.5px;height:14px;background-color:#ffff;transition:all .3s}
    .title::after{transform:rotate(90deg)}
    .content{max-height:0;overflow:hidden}
    .content p{margin:0;padding:1em;text-align:left;font-size:14px;line-height:1.5}
    .toggle:checked+.title+.content{max-height:500px;transition:all 1.5s;}
    .toggle:checked+.title::before{transform:rotate(90deg)!important}


    /* //.accordion 2 */
    .accordion2{margin:0 auto; margin-bottom: 0%; max-width:100%}
    .toggle{display:none}
    .option{position:relative;margin-bottom:0;}
    .content1,.subj{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all .3s}
    .subj{background:#c3c1c1;padding:0;padding-right:0;text-align:left;font-size:14px;display:block;color:#fff}
    /* .subj::after{content:'';position:absolute;left:43%;bottom:33%;width:0;height:0;transition:all .3s; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 14px solid #8b8b8b;} */
    .subj::after{content:"";position:absolute;left:0%;bottom:0%;transition:all .3s; background: url(../assets/images/button/accordion.png) no-repeat; display: inline-block;}
    .subj::after{transform:rotate(0deg); width: 16px; height: 16px; scale: 85%; margin: 5.4% 54.8% 2.3% 43%;}
    .content1{max-height:0;overflow:hidden}
    .content1 p{margin:0;padding:0;text-align:left;font-size:14px;line-height:1.5}
    .toggle:checked+.subj+.content1{max-height:500px;transition:all 1.5s;}
    .toggle:checked+.subj::after{transform:rotate(90deg)!important}
}

@media screen and (max-width:480px){

    .accordion2{margin:0 auto; margin-bottom: 0%; max-width:100%}
    .toggle{display:none}
    .option{position:relative;margin-bottom:0;}
    .content1,.subj{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:all .3s}
    .subj{background:#c3c1c1;padding:0;padding-right:0;text-align:left;font-size:14px;display:block;color:#fff}
    .subj::after{content:"";position:absolute;left:0%;bottom:0%;transition:all .3s; background: url(../assets/images/button/accordion.png) no-repeat; display: inline-block;}
    .subj::after{transform:rotate(0deg); width: 16px; height: 16px; scale: 70%;  margin: 5.4% 53.8% 2.1% 44%;}
    .content1{max-height:0;overflow:hidden}
    .content1 p{margin:0;padding:0;text-align:left;font-size:14px;line-height:1.5}
    .toggle:checked+.subj+.content1{max-height:500px;transition:all 1.5s;}
    .toggle:checked+.subj::after{transform:rotate(90deg)!important}

}

.btn-hover:hover{

    opacity: 80%;
}

.relative{position:relative}
.absolute{position:absolute;left:0}

/* accordion text*/
.text-left{
    line-height: 1.8em;
    width: 7%; float: left; display: table-cell;
}
.text-right{
    display: table-cell;
    line-height: 1.8em;
    padding-right: 0.5em;
}

.checkbox-section{

  /* position: relative; */
  width: 100%;
  /* height: 100%;  */
  max-width: 750px; 
  /* max-height: 30px; */
  /* background-color: rgb(142, 142, 216);  */
  margin-left: auto;
  margin-right: auto;
  margin-top: 6%;
  margin-bottom: 6%;
}

.checkbox-section-1{
  width: 82%;
  /* float: left; */
  padding: 1% 7%;
  margin: auto 2%;
  text-align: left;
  background-color: #ffdedd;
  border: .5px solid #ff0000;
}

.checkbox-section-2{
  width: 100%;
  height: 100%;
  max-height: 30px;
  margin-left: 4%;
  text-align: center;
  /* background-color: pink; */
}

.checkbox-section-1 span{
  font-size: 1.2vw;
}

/* The container */
.checkbox-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input.checkbox-1 {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1.0vw;
  left: -1.9vw;
  height: 1.3vw;
  width: 1.3vw;
  background-color: #cecece;
  /* margin: 0.534vh auto 0 auto; */
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input.checkbox-1 ~ .checkmark {
  background-color: #b9b9b9;
}

.checkbox-container input.checkbox-1 ~ .checkmark{
  background-color: #b9b9b9;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input.checkbox-1:checked ~ .checkmark{
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input.checkbox-1:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 36%;
  top: 14%;
  width: .2vw;
  height: .6vw;
  border: solid white;
  border-width: 0 .2vw .2vw 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width:750px){

  .checkbox-section-1 span{
    font-size: 3.4vw;
  }

  .checkmark {
    position: absolute;
    top: -3.5vw;
    left: -4.9vw;
    height: 4.5vw;
    width: 4.5vw;
    background-color: #cecece;
    /* margin: 0.534vh auto 0 auto; */
  }

  .checkbox-container .checkmark:after {
    left: 36%;
    top: 10%;
    width: .8vw;
    height: 2.4vw;
    border: solid white;
    border-width: 0 .5vw .5vw 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

/* #button-disable { cursor :not-allowed; opacity: 30%; pointer-events: none;} */
#button{opacity: 30%; -webkit-opacity: 30%;}
/* .checkbox-1:checked+.button-1{ cursor :pointer; pointer-events :all;  opacity: 100%;} */

div.banner{

  display: '' !important;
}

div.banner a img{
  width: 40%;
  max-width: 750px;
  position: absolute;
  bottom: 100%;
  right: 1%;
}