@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: 1920px; 
  max-height: 30px;
  /* background-color: rgb(142, 142, 216);  */
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 6%; */
  margin-bottom: 3%;
}

.checkbox-section-1{
  width: 60%;
  /* float: left; */
  margin: auto 20%;
  text-align: left;
  /* background-color: green; */
}

.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;
  padding-left: 5%;
}

/* 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: 0.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: 32%;
  top: 5%;
  width: .3vw;
  height: .7vw;
  border: solid white;
  border-width: 0 .2vw .2vw 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#button{opacity: 30%; -webkit-opacity: 30%;}

div.banner{

  display: '' !important;
}

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