/* 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;
}




.JS-mainVisual10{position:relative; width:100%; border-top:1px solid #ccc;}

.JS-mainVisual10>.in{position:relative; max-width:1200px;  width:100%; margin:0 auto; min-height:550px; z-index:12;}
.JS-mainVisual10 .left{float:right; max-width:450px; width:40%; padding-top:20px;}
.JS-mainVisual10 .left h2{font-size:20px; background:#f4f4f4;}
.JS-mainVisual10 .left .sliderArea{padding-top:50px;}
.JS-mainVisual10 .left .slick-slide{position:relative; max-height:445px; border-radius:10px; background-color:#114372; background-image:url('../image/n/main-l/main-v-bg.png'); background-position:center; background-size:cover; overflow:hidden;}
.JS-mainVisual10 .left .slick-slide:after{position:absolute; bottom:0; left:0; width:100%; height:40%; background:#1b4064; opacity:0.4; content:""; z-index:11;}
.JS-mainVisual10 .left .slick-slide div{display:block; padding:40px 30px 10px 30px; color:#fff; position:relative; z-index:13;}
.JS-mainVisual10 .left .slick-slide div[onclick]{cursor:pointer;}
.JS-mainVisual10 .left .slick-slide div>span{text-align:left; display:block; line-height:1.3;}
.JS-mainVisual10 .left .slick-slide div span.category{position:relative; font-weight:400; margin-bottom:10px;}
.JS-mainVisual10 .left .slick-slide div span.category:after{position:absolute; top:30%; height:70%; left:-5%; width:110%; background:#eee; content:""; display:none;}
.JS-mainVisual10 .left .slick-slide div span.sub-title1{font-size:16px;}
.JS-mainVisual10 .left .slick-slide div span.sub-title2{font-size:17px;}
.JS-mainVisual10 .left .slick-slide div span.title{margin-top:15px; font-size:23px; font-weight:500;}
.JS-mainVisual10 .left .slick-slide div span.article{font-size:15px; max-height:240px; overflow:hidden; margin-top:25px; padding:30px 25px; background:#fff; border-radius:10px; color:#000;}
.JS-mainVisual10 .left .slick-slide div span.article img{max-width:100%; height:auto;}
.JS-mainVisual10 .left .slick-slide div span.img-logo{text-align:center; padding:12px 0 5px 0;}
.JS-mainVisual10 .left .slick-slider button.slick-arrow{font-size:30px; background-color:transparent;}
.JS-mainVisual10 .left .slick-slider button.slick-prev{left:-50px;}
.JS-mainVisual10 .left .slick-slider button.slick-next{right:-50px;}
.JS-mainVisual10 .left .slick-slider ul.slick-dots{bottom:auto; top:0; width:auto;}
.JS-mainVisual10 .left .slick-slider ul.slick-dots li.slick-active button{background:#2055a1;}

.JS-mainVisual10 .right{padding:50px 50px 50px 0; float:left; position:relative; width:60%;}
.JS-mainVisual10 .right h2{font-size:25px; font-weight:bold; }
.JS-mainVisual10 .right h2 span{color:#437dee;}
.JS-mainVisual10 .right .top{width:100%; margin-top:30px; position:relative; z-index:80;}
.JS-mainVisual10 .right .top ul{ text-align:center;}
.JS-mainVisual10 .right .top ul li{position:relative; width:22.5%; font-size:15px; line-height:1; padding-top:13px; height:45px; border:1px solid #ddd; color:#333; margin-left:-1px; cursor:pointer;}
.JS-mainVisual10 .right .top ul li a{display:block; width:100%; height:100%;}
.JS-mainVisual10 .right .top ul li + li:before{position:absolute; bottom:-1px; left:-20px; width:20px; height:1px; content:""; background:#ddd; z-index:9;}
.JS-mainVisual10 .right .top ul li + li:after{position:absolute; top:-1px; left:-20px; width:20px; height:1px; content:""; background:#ddd; z-index:9;}
.JS-mainVisual10 .right .top ul li.more{width:10%; font-size:20px;}
.JS-mainVisual10 .right .top ul li.on{font-weight:500; border-radius:6px; background:#0d64b3; color:#fff; box-shadow:3px 3px 13px 0 rgb(0 0 0 / 25%); z-index:10;}
.JS-mainVisual10 .right .top ul li i{ font-size:19px; position:absolute;; top:32%; line-height:15px; }
.JS-mainVisual10 .right .top ul li.more i{position:relative; top:0;}

.JS-mainVisual10 .right div[cate]{position:absolute; top:-9999px; left:0; width:100%; }
.JS-mainVisual10 .right div[cate].on{position:static;}

.JS-mainVisual10 .right .sliderArea{padding-top:50px; margin-top:-30px;}
.JS-mainVisual10 .right .sliderArea img{height:auto;}
.JS-mainVisual10 .right .sliderArea .slick-track{padding-bottom:15px; margin-left:-7px;}
.JS-mainVisual10 .right .sliderArea .item{position:relative; display:block;}
.JS-mainVisual10 .right .sliderArea .item + .item{border-top:1px solid #ddd;}
.JS-mainVisual10 .right .sliderArea .item:after{position:absolute; top:50%; margin-top:-2px; left:-15px; width:4px; height:4px; background:#2450aa; content:""; border-radius:50%; opacity:0;}
.JS-mainVisual10 .right .sliderArea .item:hover:after{opacity:1;}
.JS-mainVisual10 .right .sliderArea .item a{padding:7px 0; display:inline-block;}
.JS-mainVisual10 .right .sliderArea .item .category{font-size:12px; color:#999;}
.JS-mainVisual10 .right .sliderArea .item .title{font-size:17px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#000; font-weight:500;}
.JS-mainVisual10 .right .sliderArea .item a:hover .title{text-decoration:underline;}
.JS-mainVisual10 .right .sliderArea .item .overview{display:none;}
.JS-mainVisual10 .right .sliderArea .item .date{display:block; color:#999;}
.JS-mainVisual10 .right .sliderArea .item a:hover .title{color:#2450aa;}
/*
.JS-mainVisual10 .right .sliderArea .item.first{padding-left:65px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #ddd;}
.JS-mainVisual10 .right .sliderArea .item.first:after{font-family:'xeicon'; content:"\ea84"; font-size:25px; text-align:center; line-height:56px; margin-top:-50px; width:60px; height:60px; border:2px solid #ddd; background:#fff;}
.JS-mainVisual10 .right .sliderArea .item.first .category{}
.JS-mainVisual10 .right .sliderArea .item.first .title{font-size:17px; width:100%; color:#000;}
.JS-mainVisual10 .right .sliderArea .item.first .overview{display:block; font-size:14px; display:none;}
.JS-mainVisual10 .right .sliderArea .item.first .date{}
*/

.JS-mainVisual10 .right .slick-slider button.slick-arrow{color:#000; top:0; margin-top:0; font-size:20px; background-color:transparent;}
.JS-mainVisual10 .right .slick-slider button.slick-prev{right:-40px; top:0;}
.JS-mainVisual10 .right .slick-slider button.slick-next{right:-40px; top:40px;}
.JS-mainVisual10 .right .slick-slider ul.slick-dots{width:auto; right:10px; bottom:-30px; left:auto;}
.JS-mainVisual10 .right .slick-slider ul.slick-dots li.slick-active button{background:#2055a1;}

.JS-mainVisual10 .in2{width:1300px; margin:0 auto;}
.JS-mainVisual10 .bottom{position:relative; z-index:11;}
.JS-mainVisual10 .bottom h2{text-align:left; font-size:25px; font-weight:bold;}
.JS-mainVisual10 .bottom ul{text-align:center;}
.JS-mainVisual10 .bottom ul li{width:16.6666%; text-align:left; border:1px solid #eee; margin-left:-1px; background:#fff}
.JS-mainVisual10 .bottom ul li a{position:relative; display:block; padding:20px; }
.JS-mainVisual10 .bottom ul li a:after{font-family:xeicon!important; content:"\e940"; position:absolute; top:0; left:0; }
.JS-mainVisual10 .bottom ul li h2{color:; font-size:20px;}
.JS-mainVisual10 .bottom ul li p{color:;}



@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%;}


}





































/**/