

/*pc*/
@media all and (min-width:1201px) {	 


  
    
    .h2G{margin:100px 0 0;color:#777}
    .h2G .tit_ko{font-size:22px;font-weight:500}
    .h2G .tit_en{font-size:42px;margin:10px 0;font-family:var(--tit-font);color:var(--main-color);font-weight:600}
    .h2G .add{font-size:14px;color:#818181;}
	.h2G .add:after{display:block;content:'';width:150px;height:1px;background:#ccc;margin:30px auto; padding:0px 0px 00px;}
    .h2G .desc{display:inline-block; padding:0px 0px 50px;font-size:1rem;
	margin:30px 0;line-height:1.6;color:#777}    
    .h2G .left .desc{padding-left:0}
    
	.left .tit_en:after{display:block;content:'';width:150px;height:1px;background:#ccc;margin:30px 0; padding:0px 0px 00px;}
	
	
    .btn_more a{display:inline-block;line-height:40px;padding:0 40px;border:1px solid #ccc;
font-size:11px;letter-spacing:2px;margin:0 5px;font-weight:500;;transition:0.3s}
    .btn_more a:hover{padding:0 60px;color:var(--main-color);background:#fff}
	
	
/*    .btn_more{position:relative}
    .btn_more a{display:inline-block;position:relative;border:1px solid #777;line-height:50px;padding:0 20px;color:#777;
	font-size:11px;letter-spacing:2px}
    .btn_more a span{display:inline-block;position:relative;z-index:10;padding-right:90px;background:url('../images/ico_arrow.png') no-repeat 100% center}
    .btn_more a:hover{color:#fff}
    .btn_more a:hover span{background:url('../images/ico_arrow_w.png') no-repeat 100% center}
    .btn_more a:hover:after{width:100%}
    .btn_more a:not(:hover):after{left:auto;right:0;width:0}
    .btn_more a:after{content:'';position:absolute;left:0;width:0%;height:100%;background:var(--main-color);transition:0.3s}
    
*/    
    .msec1{position:relative;}
    .msec1 .slogan{position:absolute;z-index:10;right:20%;bottom:10%;text-align:right;font-family:var(--tit-font);text-shadow:0 0 5px rgba(0,0,0,0.5)}
    .msec1 .slogan .text1{display:block;font-size:20px;color:#fff;}
    .msec1 .slogan .text2{display:block;font-size:50px;color:#fff;margin:20px 0}    
    
    .msec1 .swiper-control{display:flex;justify-content: flex-start;align-items:center; margin-top:100px}
    .msec1 .swiper-control .pagination {color:#fff;font-size:20px;margin-right:60px}    
    .msec1 .swiper-control .swiper-pagination-current{font-size:40px;margin:0 5px}
    .msec1 .swiper-control .swiper-pagination-total{margin:0 5px}
    .msec1 .swiper-control .button-prev,
    .msec1 .swiper-control .button-next{width:50px;height:25px;cursor:pointer}
    .msec1 .swiper-control .button-prev{background:url('../images/swiper_prev.png') no-repeat center /cover}
    .msec1 .swiper-control .button-next{background:url('../images/swiper_next.png') no-repeat center /cover}
    
    .msec1 .swiper-slide{height:100vh;}




    
    .msec2{margin:50px 0;background:var(--sec-bg-color);}
    .msec2 .swiper-slide .thumb{overflow:hidden;}
    .msec2 .swiper-slide .thumb .bg{display:block;padding-bottom:50%;transition:0.3s}
    .msec2 .swiper-slide .thumb:hover .bg{transform:scale(1.1)}
    .msec2 .swiper-button-prev,
    .msec2 .swiper-button-next{top:calc(50% - 150px)}
    .msec2 .swiper-slide .info{margin:0 auto;text-align:center;padding:20px 0 40px}
    .msec2 .swiper-slide .info .tit{display:inline-block;font-size:1.2rem;padding:25px 20px}
    .msec2 .swiper-slide .info .stit{margin:20px 0;color:#aaa;letter-spacing:2px;font-size:0.8rem}
    .msec2 .swiper-slide .info .more{}
    
    

    
    .msec3{margin:-100px 0 50px}
	.msec3 .banner{margin:150px 0 0px}
    .msec3 .bg{display:flex;justify-content: center;align-items: center;
	 background:url('../images/ms3_bg.jpg') no-repeat center /cover fixed;height:100vh;}
    .msec3 .bg .slogan{text-align:center;color:#fff;text-shadow:0 0 5px rgba(0,0,0,0.5)}
    .msec3 .bg .slogan .text1{font-size:60px;font-family:var(--tit-font)}
    .msec3 .bg .slogan .text2{font-size:20px;margin-top:20px}
    .msec3 .container{display:flex;justify-content: space-between;padding:100px 0;max-width:1500px}

    .msec3 .more{margin-top:50px}
    .msec3  .more a{display:inline-block;line-height:50px;padding:0 50px;border:2px solid #fff;border-radius:50px;
	color:#fff;margin:0 10px;font-weight:600;;transition:0.3s}
    .msec3  .more a:hover{padding:0 70px;color:var(--main-color);background:#fff}
    
    
    .msec4{padding:100px 0 50px;background:var(--sec-bg-color);}
    .msec4 .list{display:flex;gap:70px;flex-wrap:wrap}    
    .msec4 .list li{width:calc((100% - 70px)/2)}
    .msec4 .list .thumb{overflow:hidden}
    .msec4 .list .thumb img{vertical-align: top; transition:0.3s}
    .msec4 .list .thumb:hover img{transform:scale(1.1)}
    .msec4 .list .info{display:flex;justify-content: space-between;align-items:center; padding:20px 20px;border-bottom:1px solid #ddd}
    .msec4 .list .info .name{font-size:24px;font-weight:600}
    
    

}



/*mobile*/
@media all and (max-width:1200px) {


    .center{text-align:center}    
    
    .h2G{margin:20px 0 0;color:#777}
    .h2G .tit_ko{font-size:16px;font-weight:500}
    .h2G .tit_en{font-size:28px;margin:8px 0;font-family:var(--tit-font);color:var(--main-color);font-weight:600}
    .h2G .add{font-size:14px;color:#818181}
	.h2G .add:after{display:block;content:'';width:100px;height:1px;background:#ccc;margin:30px auto; padding:0px 0px 0px;}
    .h2G .desc{display:inline-block;padding:0px 0px 20px;font-size:1.3rem;margin:20px 0;line-height:1.6;color:#777}    
    .h2G.left .desc{padding-left:0}
  
    .left .tit_en:after{display:block;content:'';width:100px;height:1px;background:#ccc;margin:20px auto ; padding:0px 0px 00px;}
  
  
  
  
  
    .btn_more a{display:inline-block;line-height:30px;padding:0 20px;border:1px solid #ccc;
font-size:11px;letter-spacing:1.5px;margin:0 5px;font-weight:500;;transition:0.3s}
    .btn_more a:hover{padding:0 50px;color:var(--main-color);background:#fff}
    
    
/*    .btn_more{position:relative}
    .btn_more a{display:inline-block;position:relative;border:1px solid #777;line-height:40px;padding:0 20px;color:#777;font-size:11px;letter-spacing:2px}
    .btn_more a span{display:inline-block;position:relative;z-index:10;padding-right:60px;background:url('../images/ico_arrow.png') no-repeat 100% center}
    .btn_more a:hover{color:#fff}
    .btn_more a:hover span{background:url('../images/ico_arrow_w.png') no-repeat 100% center}
    .btn_more a:hover:after{width:100%}
    .btn_more a:not(:hover):after{left:auto;right:0;width:0}
    .btn_more a:after{content:'';position:absolute;left:0;width:0%;height:100%;background:var(--main-color);transition:0.3s}
    */
    
    .msec1{position:relative;}
    .msec1 .slogan{position:absolute;z-index:10;left:5%;width:90%;bottom:10%;text-align:center;font-family:var(--tit-font);text-shadow:0 0 5px rgba(0,0,0,0.5)}
    .msec1 .slogan .text1{display:block;font-size:16px;color:#fff;}
    .msec1 .slogan .text2{display:block;font-size:40px;color:#fff;margin:20px 0}    
    
    .msec1 .swiper-control{display:flex;justify-content:center;align-items:center;position:relative; margin-top:100px}
    .msec1 .swiper-control .pagination {color:#fff;font-size:20px}    
    .msec1 .swiper-control .swiper-pagination-current{font-size:30px;margin:0 5px}
    .msec1 .swiper-control .swiper-pagination-total{margin:0 5px}
    .msec1 .swiper-control .button-prev,
    .msec1 .swiper-control .button-next{position:absolute;width:50px;height:25px;cursor:pointer}
    .msec1 .swiper-control .button-prev{left:50%;margin-left:-100px;background:url('../images/swiper_prev.png') no-repeat center /cover}
    .msec1 .swiper-control .button-next{left:50%;margin-left:50px;right:auto;background:url('../images/swiper_next.png') no-repeat center /cover}
    
    .msec1 .swiper-slide{height:calc(100vh - 60px)}



    
    .msec2{margin:30px 0;background:var(--sec-bg-color);}
    .msec2 .swiper-slide .thumb{overflow:hidden;}
    .msec2 .swiper-slide .thumb .bg{display:block;padding-bottom:60%;transition:0.3s}
    .msec2 .swiper-slide .thumb:hover .bg{transform:scale(1.1)}

    .msec2 .swiper-slide .info{margin:0 auto;text-align:center;padding:20px 0 40px}
    .msec2 .swiper-slide .info .tit{display:inline-block;font-size:1.2rem;padding:0px 20px 20px}
    .msec2 .swiper-slide .info .stit{margin:0 0 15px;color:#aaa;letter-spacing:2px;font-size:0.8rem}
    .msec2 .swiper-slide .info .more{}

    
    .msec3{margin:30px 0}
    .msec3 .bg{display:flex;justify-content: center;align-items: center; background:url('../images/ms3_bg.jpg') no-repeat center /cover fixed;height:calc(100vh - 60px);}
    .msec3 .bg .slogan{text-align:center;color:#fff;text-shadow:0 0 5px rgba(0,0,0,0.5)}
    .msec3 .bg .slogan .text1{font-size:40px;font-family:var(--tit-font)}
    .msec3 .bg .slogan .text2{font-size:14px;margin-top:20px}
    
    .msec3 .container{padding:50px 0;max-width:1500px;text-align:center}
    .msec3 .container .banner{padding:30px 0}
 
 	.msec3 .more{margin-top:30px}
    .msec3 .more a{display:inline-block;line-height:40px;padding:0 30px;border:2px solid #fff;border-radius:40px;color:#fff;margin:0 5px;font-weight:600;;transition:0.3s}
    .msec3 .more a:hover{padding:0 50px;color:var(--main-color);background:#fff}
 
    
    
    .msec4{padding:30px 0 30px;background:var(--sec-bg-color);}
    .msec4 .list{}    
    .msec4 .list li{}
    .msec4 .list .thumb{overflow:hidden}
    .msec4 .list .thumb img{vertical-align: top; transition:0.3s}
    .msec4 .list .thumb:hover img{transform:scale(1.1)}
    .msec4 .list .info{display:flex;justify-content: space-between;align-items:center; padding:20px 20px;border-bottom:1px solid #ddd}
    .msec4 .list .info .name{font-size:16px;font-weight:600}
    
    

}
