/* main */
@font-face {

    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KHNPHD.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}





/*



@media all and (max-width:1300px){

  .JS-mainVisual10>.in{padding:0 10px;}
  .JS-mainVisual10 .left{width:50%; max-width:100%;}
  .JS-mainVisual10 .left .item{margin:0 7px; opacity:0.4; transition:opacity 0.2s;}
  .JS-mainVisual10 .left .item.slick-center{opacity:1;}
  .JS-mainVisual10 .left .slick-slider button.slick-arrow{background-color:rgba(255,255,255,0.3);}
  .JS-mainVisual10 .left .slick-slider button.slick-prev{left:0;}
  .JS-mainVisual10 .left .slick-slider button.slick-next{right:0;}
  .JS-mainVisual10 .right .top{width:100%;}
  .JS-mainVisual10 .right{width:50%;}
  .JS-mainVisual10 .right .sliderArea .item .title{white-space:normal;}
}

@media all and (max-width:1100px){
  .JS-mainVisual10{margin-top:60px;}
  .JS-mainVisual10 .left{width:100%;}
  .JS-mainVisual10 .right{width:100%;}
}

@media all and (max-width:800px){
  .JS-mainVisual10 .right h2{font-size:17px;}
  .JS-mainVisual10 .right .top{margin-top:10px;}
  .JS-mainVisual10 .right .top ul li{font-size:12px;}
  .JS-mainVisual10 .right .top ul li i{font-size:13px; top:2px;}
  .JS-mainVisual10 .right .top ul li + li:after{top:8px; width:2px; height:2px; left:-8px;}
  .JS-mainVisual10 .right .sliderArea .item .category{font-size:10px;}
  .JS-mainVisual10 .right .sliderArea .item .title{font-size:15px; white-space:normal;}
  .JS-mainVisual10 .right .sliderArea .item .overview{font-size:12px;}
  .JS-mainVisual10 .right .slick-slider button.slick-arrow{font-size:15px; width:20px; height:30px; line-height:30px; top:15px; z-index:81;}
  .JS-mainVisual10 .right .slick-slider button.slick-prev{right:40px;}
  .JS-mainVisual10 .right .slick-slider button.slick-next{right:10px;}
}

*/


.JS-main-short{margin-top:30px;}
.JS-main-short>.in{max-width:1200px; margin:0 auto;}
.JS-main-short .bottom{padding:0; }
.JS-main-short .bottom ul{text-align:center;}
.JS-main-short .bottom ul .shortcut_list{overflow:hidden;}
.JS-main-short .bottom ul li{width:24.5%; margin:0.25%;}
.JS-main-short .bottom ul li a{display:block; padding:30px 0; color:#333; font-weight:900; font-size:16px; font-weight:bold; border:1px solid #ddd;}
.JS-main-short .bottom ul li i{font-size:40px; }
.JS-main-short .bottom ul li a .txt{position:relative; margin-top:15px;}
.JS-main-short .bottom ul li a .txt:after{position:absolute; top:-10px; left:50%; width:20px; margin-left:-10px; height:2px; background:#ddd; content:"";}

.JS-main-short .bottom ul li a:hover{color:#fff; background:#4691d6;}

  @media all and (max-width:900px){
    .JS-main-short .bottom{padding:0; border:0;}
    .JS-main-short .bottom ul{}
    .JS-main-short .bottom ul li{width:48%; padding:1% 0; margin:1%;}
    .JS-main-short .bottom ul li a{padding-left:10px; font-size:12px; line-height:30px;}
  }




.JS-main100{position:relative; margin-top:150px;}
.JS-main100:after{position:absolute; top:0; left:0; width:100%; height:300px; background-image:url('../image/n/main-l/00bg.jpg'); background-position:center; background-size:cover; content:""; z-index:11;}
.JS-main100>.in{position:relative; max-width:1200px; margin:0 auto; z-index:12;}

.JS-main100 .sliderArea{width:80%;  margin:0 auto; padding-top:50px;}
.JS-main100 .item{box-shadow:10px 10px 5px rgba(0,0,0,0.4); background:#fff;}
.JS-main100 .item .left{ width:40%; padding:30px 60px; height:300px; background:#196db9; text-align:left;}
.JS-main100 .item .left a{color:#fff;}
.JS-main100 .item .left .d1>a{font-family:'KHNPHD'; font-size:30px;}
.JS-main100 .item .left .depth02Area{padding:10px 10px 10px 25px;}
.JS-main100 .item .left .d2>a{position:relative; padding-left:25px; font-size:16px; padding:2px 0;}
.JS-main100 .item .left .d2>a:hover{color:#ccc;}
.JS-main100 .item .left .d2>a:after{position:absolute; top:50%; margin-top:-2px; left:-15px; width:3px; height:3px; background:#fff; content:""; border-radius:50%;}
.JS-main100 .item .left .depth03Area{display:none;}

.JS-main100 .item .right{position:absolute; top:0; right:0; width:60%; height:300px; background-position:center; background-size:cover;}
.JS-main100 .item.z1 .right{background-image:url('../image/n/main00bg.jpg');}
.JS-main100 .item.z2 .right{background-image:url('../image/n/main-l/02bg.jpg');}
.JS-main100 .item.z3 .right{background-image:url('../image/n/main-l/03bg.jpg');}
.JS-main100 .item.z4 .right{background-image:url('../image/n/main-l/04bg.jpg');}
.JS-main100 .item.z5 .right{background-image:url('../image/n/main-l/05bg.jpg');}

.JS-main100  .slick-slider button.slick-arrow.font{color:#fff; bottom:20px; margin:0; top:auto; font-size:12px; line-height:20px; width:20px; height:20px; background:transparent;}
.JS-main100  .slick-slider button.slick-prev{left:20px;}
.JS-main100  .slick-slider button.slick-next{left:40px;}
.JS-main100 .slick-slider ul.slick-dots{text-align:left; left:80px; bottom:8px; width:auto;}
.JS-main100 .slick-slider ul.slick-dots li button{background:rgba(255,255,255,0.2);}
.JS-main100 .slick-slider ul.slick-dots li.slick-active button{background:rgba(255,255,255,1);}

@media all and (max-width:900px){

  .JS-main100 .item .left{position:relative; width:100%; padding:50px 40px; z-index:11;}
  .JS-main100 .item .left .d1>a{font-size:20px;}
  .JS-main100 .item .left .d2{margin-bottom:3px;}
  .JS-main100 .item .left .d2>a{font-size:14px;}
  .JS-main100 .item .right{display:none;}

}



.JS-main001-{position:relative; margin:150px 0; padding-top:50px; overflow:hidden;}
.JS-main001-:after{position:absolute; top:-50px; left:0; width:100%; height:350px; background:#f4f4f4; content:""; z-index:11;}
.JS-main001->.in{position:relative; width:100%; max-width:1200px; margin:0 auto; z-index:13;}
.JS-main001->.in:after{position:absolute; top:-50px; left:-3880px; width:4000px; height:350px; background:#fff; content:""; z-index:11;}

.JS-main001- .txt{width:40%; padding-left:10%; }
.JS-main001- .txt h2{font-size:12px; letter-spacing:2px; }
.JS-main001- .txt h3{font-size:30px; font-weight:bold; }


.JS-main001- .video{position:relative; width:60%; z-index:14;}
.JS-main001- .video iframe{width:100% !important; height:400px !important;}


@media all and (max-width:900px){

  .JS-main001-{padding:0 10px;}
  .JS-main001- .txt{width:100%; padding:0; margin-bottom:10px;}
  .JS-main001- .txt h3{font-size:20px;}
  .JS-main001- .video{width:100%;}


}





































/**/