@charset "utf-8";





                        /*
                                                          subpage                                   //
                        */




.titleArea h3{font-size:12px; color:var(--base-color1); margin-bottom:10px;}
.titleArea h2{font-size:24px; line-height:1.3; font-weight:700; margin-bottom:20px}
.titleArea p{font-size:13px;}
@media all and (min-width:768px){
  .titleArea h3{font-size:16px; margin-bottom:20px;}
  .titleArea h2{font-size:45px; margin-bottom:30px}
  .titleArea p{font-size:22px;}
}

#bo_gall li.empty_list{display:block; color:#999; padding:100px 0 !important;}

#gall_ul{margin-bottom:50px;}
#bo_cate_anchor{position:relative; top:-80px;}

#bo_cate{text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
#bo_cate ul li{position:relative; font-size:12px; margin:0 1px; width:auto; display:inline-block; vertical-align:middle; line-height:50px; background:transparent;}
#bo_cate ul li a{color:#999; line-height:30px; padding:0 10px; display:inline-block;}
#bo_cate ul li a:after{position:absolute; top:13px; left:5px; width:4px; height:4px; background:#000; border-radius:50%; opacity:0; content:""; transition:0.2s;}
#bo_cate ul li a#bo_cate_on{font-weight:bold; color:#333;}
#bo_cate ul li:hover a:after{opacity:0.5;}
#bo_cate ul li a#bo_cate_on:after{opacity:1;}

@media all and (min-width:768px){
  #bo_cate ul li{font-size:16px;}
  #bo_cate ul li a{line-height:60px; font-size:19px;}
  #bo_cate ul li a:after{width:6px; height:6px; top:13px; left:0;}
  #bo_gall li.empty_list{padding:200px 0 !important;}
}


#container .top-banner{padding:50px 10px; background-position:center; background-size:cover; box-sizing:border-box;}
#container .top-banner.soft{background-image:url('/imgs/soft-bg.jpg');}
#container .top-banner.hard{background-image:url('/imgs/hard-bg.jpg');}
#container .top-banner.contact{background-image:url('/imgs/contact-bg.jpg');}
#container .top-banner .titleArea.out{max-width:1450px; margin:0 auto;}
#container #sub_top .titleArea.out{display:none;}
#container_title{font-size:20px;}

@media all and (min-width:768px){
  #container .top-banner{padding:100px 10px;}
  #container_title{font-size:30px;}
}








/* gallery */
#sub_top{margin-bottom:70px; overflow:hidden;}
#sub_top>.in{}
#sub_top .cont{ margin-top:-40px; margin-left:-5px; margin-right:-5px; }
#sub_top .cont .slide_wrap{}
#sub_top .cont .slick-track{padding-top:80px; }
#sub_top .cont .item{text-align:left; padding:5px;}
#sub_top .cont .item .img{position:relative; border-radius:20px; overflow:hidden;}
#sub_top .cont .item .img:after{position:absolute; bottom:0; left:0; width:100%; height:100%; background-image:url('/imgs/item_bottom_shadow_200.png'); background-position:bottom; background-repeat:repeat-x; background-size:0.7px; opacity:0.7; content:"";}
#sub_top .cont .item .img h4{font-size:13px; position:absolute; bottom:5px; left:10px; width:100%; height:auto; z-index:11; color:#fff;}
#sub_top .cont .item .img h4 b{font-size:10px; margin-right:10px; display:inline-block; font-weight:normal;}
#sub_top .cont .item .img img{width:100%;}
#sub_top .cont .item h2{color:var(--base-color1);margin:15px 0; font-weight:500; font-size:13px;}
#sub_top .cont .item h3{font-size:13px; font-weight:normal;}
#sub_top .slick-slider button.slick-arrow.font{top:0; margin-top:0; left:auto; right:5px; transition:0.2s;}
#sub_top .slick-slider button.slick-arrow.font.slick-prev{right:40px; background:#fff; color:#333; border:1px solid #aaa; transform:scale(0.8);}
#sub_top .slick-slider button.slick-arrow.font.slick-next{}
#gall-wrap .loading{}
#gall-wrap .loading i{font-size:30px; color:#333; line-height:30px;}
#gall-wrap .more-btn{display:none; width:90%; border-radius:20px; height:40px; line-height:40px; background:#333; color:#fff; text-align:center; cursor:pointer; transition:0.3s;}
#gall-wrap .more-btn:hover{background:#000;}

@media all and (min-width:768px){
  #gall_ul{margin-bottom:100px;}
  #bo_cate_anchor{position:relative; top:-150px;}

  #sub_top{margin-bottom:110px;}
  #sub_top .cont{margin-top:-60px; margin-left:-25px; margin-right:-25px;}
  #sub_top .cont .slick-track{padding-top:140px;}
  #sub_top .cont .item{padding:25px;}
  #sub_top .cont .item .img{border-radius:40px;}
  #sub_top .cont .item .img:after{opacity:0; transition:0.2s;}
  #sub_top .cont .item .img h4{transform:translateY(10px); bottom:45px; left:45px; font-size:25px; opacity:0; transition:0.2s;}
  #sub_top .cont .item .img h4 b{font-size:15px; position:relative; top:-6px;}
  #sub_top .cont .item:hover .img:after{opacity:0.7;}
  #sub_top .cont .item:hover .img h4{opacity:1; transform:translateY(0);}
  #sub_top .cont .item h2{margin:30px 0;font-size:18px;}
  #sub_top .cont .item h3{font-size:18px;}
  #sub_top .slick-slider button.slick-arrow.font{right:25px;}
  #sub_top .slick-slider button.slick-arrow.font.slick-prev{right:80px;}
  #gall-wrap .loading{}
  #gall-wrap .more-btn{width:140px; border-radius:40px; height:50px; line-height:50px;}
}




#sub_top .cont2{text-align:center; _max-width:1200px; margin:0 auto;}
#sub_top .cont2 .item{width:49%; margin:0 0.5%;}
#sub_top .cont2 .item + .item{ }
#sub_top .cont2 .item .img{margin-bottom:10px; padding:15%; border-radius:50%; background:#eaf3ff; box-sizing:border-box;}
#sub_top .cont2 .item .img span{}
#sub_top .cont2 .item .img span img{}
#sub_top .cont2 .item h2{font-size:16px; color:#0072ff; margin-bottom:10px; }
#sub_top .cont2 .item p{font-size:13px; color:#999;}


#sub_top .cont2.hard .item .img{background:#f5f1ff;}
#sub_top .cont2.hard .item h2{color:#8464cf;}


@media all and (min-width:768px){

  #sub_top .cont2 .item{width:32.3333%;  ;}
  #sub_top .cont2 .item + .item{margin-top:0;}
  #sub_top .cont2 .item .img{margin-bottom:20px;}
  #sub_top .cont2 .item h2{font-size:22px;  }
  #sub_top .cont2 .item p{font-size:16px; }

}







#bo_gall{  }
#bo_gall h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall-wrap {margin-left:-5px; margin-right:-5px; }
#bo_gall ul.grid2 li.item{width:50%;}
#bo_gall ul.grid2-3 li.item{width:50%;}
#bo_gall ul li.item{ padding:5px; box-sizing:border-box;}
#bo_gall ul li.item .imgArea{}
#bo_gall ul li.item img{width:100%;}
#bo_gall ul li.item a{position:relative; display:block; border-radius:20px; overflow:hidden; box-shadow:5px 5px 5px rgba(63,68,240,0.1);}
#bo_gall ul li.item a:after{position:absolute; top:0; left:0; width:100%; height:100%; content:""; background:var(--base-color1); opacity:0; z-index:10; transition:0.3s;}
#bo_gall ul li.item a strong{opacity:0; font-size:14px; line-height:1.3; color:#fff; position:absolute; top:50%; left:0; width:100%; height:auto; transform:translateY(-40%); z-index:11; transition:0.3s; text-align:center;}
#bo_gall ul li.item a strong span{display:block; margin-top:20px; font-size:12px; font-weight:normal;}

@media all and (min-width:768px){
  #bo_gall{}
  #bo_gall #gall-wrap{margin-left:-8px; margin-right:-8px;}
  #bo_gall ul.grid2-3 li.item{width:33.3333%;}
  #bo_gall ul li.item{ padding:8px;}
  #bo_gall ul li.item .imgArea{}
  #bo_gall ul li.item a{border-radius:45px; box-shadow:10px 10px 20px rgba(63,68,240,0.1);}
  #bo_gall ul li.item a:hover:after{opacity:0.95;}
  #bo_gall ul li.item a:hover strong{opacity:1; transform:translateY(-50%); }
  #bo_gall ul li.item a strong{font-size:20px; }
  #bo_gall ul li.item a strong span{font-size:15px; margin-top:20px;}

}






#gall-wrap[show="8"] ul li:nth-child(n+9){display:none;}
#gall-wrap[show="16"] ul li:nth-child(n+17){display:none;}
#gall-wrap[show="24"] ul li:nth-child(n+25){display:none;}
#gall-wrap[show="32"] ul li:nth-child(n+33){display:none;}
#gall-wrap[show="40"] ul li:nth-child(n+41){display:none;}
#gall-wrap[show="48"] ul li:nth-child(n+49){display:none;}
#gall-wrap[show="56"] ul li:nth-child(n+57){display:none;}
#gall-wrap[show="64"] ul li:nth-child(n+65){display:none;}
#gall-wrap[show="72"] ul li:nth-child(n+73){display:none;}
#gall-wrap[show="80"] ul li:nth-child(n+81){display:none;}
#gall-wrap[show="88"] ul li:nth-child(n+89){display:none;}
#gall-wrap[show="96"] ul li:nth-child(n+97){display:none;}










.path-title{max-width:1200px; margin:0 auto; padding:30px 15px 40px 15px;}
.path-title .path{margin-bottom:30px;}
.path-title .path ul{}
.path-title .path ul li{position:relative; margin-right:20px;}
.path-title .path ul li + li:after{position:absolute; top:50%; left:-10px; margin:-2px 0 0 -2px; width:3px; height:3px; background:#ccc; content:""; border-radius:50%;}
.path-title .path ul li a{}
.path-title .path ul li:last-child a{color:#c61065; font-weight:bold;}

.path-title .titleArea{}
.path-title .titleArea h2{position:relative; color:#333; font-size:25px; height:40px; line-height:40px; text-align:left; margin-bottom:10px; font-weight:800;}
.path-title .titleArea h2 span{position:relative; background:#fff; padding-right:50px; z-index:12;}
.path-title .titleArea h2:after{position:absolute; top:50%; left:0; width:100%; height:1px; background:rgba(0,0,0,0.1); content:"";}
.path-title .titleArea i{position:absolute; font-size:17px; color:#999; top:6px; right:20px; width:30px; height:30px; background:#fff; line-height:30px; text-align:center; border-radius:50%; cursor:pointer; transition:0.2s; z-index:13;}
.path-title .titleArea i:hover{color:#fff; background:#c61065;}

[class*="sub"]{}
[class*="sub"]>.in{max-width:1450px; margin:0 auto; padding:0 15px;}


@media all and (min-width:768px){
  .path-title{padding:100px 15px 40px 15px;}
  .path-title .path{margin-bottom:40px;}
  .path-title .titleArea h2{font-size:35px;}
  .path-title .titleArea i{font-size:20px;}
}


.tableArea{}
.tableArea + .tableArea{margin-top:100px;}
.tableArea h2.title{font-size:25px; margin-bottom:20px;}
.tableArea h2.title i{display:inline-block; font-style:normal; font-size:15px; margin-left:40px; font-weight:normal;}
.tableArea table{}
.tableArea table tr{}
.tableArea table tr th{padding:5px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.tableArea table tr td{padding:10px 5px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.tableArea table thead{background:#f9f9f9;}
.tableArea table thead tr{}
.tableArea table thead tr th{}
.tableArea table tbody{}
.tableArea table tbody tr{}
.tableArea table tbody tr th{}
.tableArea table tbody tr td{}

.tableArea table.type1 th{border:1px solid #ddd;}
.tableArea table.type1 th:first-child{border-left:0;}
.tableArea table.type1 th:last-child{border-right:0;}
.tableArea table.type1 td{border:1px solid #ddd;}
.tableArea table.type1 td:first-child{border-left:0;}
.tableArea table.type1 td:last-child{border-right:0;}

.tableArea table.top-border{border-top:2px solid #333;}

@media all and (min-width:768px){
  .tableArea h2.title{font-size:35px;}
  .tableArea table tr th{padding:10px 10px; font-size:16px;}
  .tableArea table tr td{padding:15px 10px;}
}


span.dot.bottom{position:relative;}
span.dot.bottom:after{position:absolute; bottom:10px; right:-15px; width:3px; height:3px; border-radius:50%; content:""; background:#c61065;}

@media all and (min-width:768px){
  span.dot.bottom:after{width:6px; height:6px;}
}




.top-tabArea{display:none; margin-bottom:40px;}
.top-tabArea.display{display:block;}
.top-tabArea ul{}
.top-tabArea ul li{font-size:12px; padding:0 20px; height:30px; line-height:28px; background:#f9f9f9; color:#999; border:1px solid #ddd; border-bottom-color:#333; cursor:pointer; margin-left:-1px; position:relative; z-index:10;}
.top-tabArea ul li:hover{}
.top-tabArea ul li.on{border-color:#333; color:#000; z-index:11; border-bottom:0; font-weight:500; background:#fff;}

.make-tab .tableArea{display:none;}
.make-tab .tableArea.on{display:block; margin-top:0;}

@media all and (min-width:768px){
  .top-tabArea{margin-bottom:60px;}
  .top-tabArea ul li{font-size:17px; height:50px; line-height:48px; padding:0 60px;}
}




















/* contact */
.JS-form_mail{max-width:1300px; margin:0 auto;}
.JS-form_mail>.in{position:relative; padding:0;   }
.JS-form_mail .input-box{margin-bottom:10px; }
.JS-form_mail h3{margin-bottom:5px; font-size:14px; line-height:30px; font-weight:500;}
.JS-form_mail h3 span{font-weight:normal; font-size:12px; display:inline-block; margin-left:10px;}
.JS-form_mail input.input{border:1px solid #ddd; width:100%; height:34px; line-height:34px; padding:10px;}
.JS-form_mail input.input:focus{border-color:#333;}
.JS-form_mail input.send-this{display:block; border:0;   width:100%; margin:20px 0 0 0; line-height:40px; cursor:pointer; background:#5885f4;}
.JS-form_mail input[type="number"]::-webkit-outer-spin-button,
.JS-form_mail input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
.JS-form_mail textarea{min-height:50px; max-height:300px; width:100%; padding:10px;}
.JS-form_mail .infoArea{margin-top:30px;   margin:30px auto;  }
.JS-form_mail .infoArea h2{font-size:15px;}
.JS-form_mail .infoArea .box{overflow-y:auto; max-height:80px; font-size:13px; background:#f9f9f9; border-radius:15px; margin-bottom:20px; padding:15px; }



@media all and (min-width:768px){

  .JS-form_mail .input-box{margin-bottom:15px; width:45%;}
  .JS-form_mail .input-box.contact{position:absolute; top:0; right:0;}
  .JS-form_mail h3{font-size:17px;}
  .JS-form_mail h3 span{font-size:15px; margin-left:15px;}
  .JS-form_mail input.send-this{width:500px; margin-top:100px; font-size:17px; line-height:60px; border-radius:30px;}
  .JS-form_mail input.input{border-radius:15px; height:45px;}
  .JS-form_mail .input-box.text{width:100%;}
  .JS-form_mail textarea{border-radius:15px;}

}




#contents>.register{max-width:600px; margin:30px auto;}
#contents #fregister p{background:#333; font-weight:normal;}
#contents #fregister p:before{display:none;}
#contents .register .btn_confirm{}
#contents .register .btn_confirm a,
#contents .register .btn_confirm button{box-sizing:border-box;}













/**/