@charset "utf-8";
.container{max-width: 1400px; width: 94%; margin: 0 auto;}
.container .more{color: #fff; font-size: 16px; display: inline-block; margin-top: 30px;}

/* video */
#video{width: 100%; height: 100vh; position: relative;}
#bg-video{width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}

/* banner */
#banner-slide{width: 100%; height: 100vh; position: relative;}
#banner-slide .slide{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#banner-slide .slide img{width: 100vw; height: 100vh; object-fit: cover; display: block;}
#banner-slide .slide .owl-nav{width: 100%;  position: absolute; display: flex; left: 0; top: 50%; transform: translateY(-50%); justify-content: space-between;}
#banner-slide .slide .owl-nav button{background: rgba(0, 0, 0, .5); border: none; z-index: 1;}
#banner-slide .slide .owl-nav button span{width: 50px; height: 50px; background-size: 60% auto; background-repeat: no-repeat; background-position: center; text-indent: -9999px; display: block;}
#banner-slide .slide .owl-nav button.owl-prev span{background-image: url('../images/prev.png');}
#banner-slide .slide .owl-nav button.owl-next span{background-image: url('../images/next.png');}

/* about */
#about{display: flex; justify-content: space-between; align-items: center; padding: 50px 0;}
#about .img{width: 45%; height: auto; display: block;}
#about .text{width: 53%;}
#about .text p{font-size: 16px; line-height: 30px; letter-spacing: 1px;}

/* news */
#news{overflow: hidden;}
#news::after{clear: both;}
#news .more{float: right;}
#news .wrap{display: flex; justify-content: space-between; align-items: center; margin-top: 30px;}
#news .wrap .slide{width: 88%; position: relative;}
#news .wrap .slide::before,#news .wrap .slide::after{content: ""; width: 15%; height: 100%;background-size: 100% auto; display: block; position: absolute; top: 0; z-index: 1; pointer-events: none;}
#news .wrap .slide::before{background-image: url(../images/slide-prev.png); left: 0;}
#news .wrap .slide::after{background-image: url(../images/slide-next.png); right: -1px;}
#news .wrap .text-title{width: 12%;}
#news .wrap .slide li a{width: 100%; height: 0; padding-top: 100%; overflow: hidden; display: block; border: 1px solid #000; position: relative; transition: all .6s;}
#news .wrap .slide li a .info{width: 100%; color: #fff; text-align: center; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 15px; box-sizing: border-box; z-index: 2;}
#news .wrap .slide li a:hover{border-color: #e7bc41;}
#news .wrap .slide li a::after{content: ""; width: 100%; height: 100%; background: #000; display: block; opacity: 0; z-index: 1; position: absolute; top: 0; left: 0;}
#news .wrap .slide li a:hover::after{opacity: .7;}
#news .wrap .slide li a:hover .info{opacity: 1;}
#news .wrap .slide li a .info .date{font-size: 14px; border-bottom: 1px solid #fff; padding-bottom: 15px; margin-bottom: 10px;}
#news .wrap .slide li a .info .text{font-size: 16px; line-height: 24px; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
#news .wrap .slide li a img{width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#news .owl-dots{display: none;}
#news .owl-nav{width: 100%; display: flex; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
#news .owl-nav button{width: 40px; height: 40px; border: none;}
#news .owl-nav button.owl-prev{ background: url('../images/slide-prev-icon.png') center no-repeat; background-size: auto 100%;}
#news .owl-nav button.owl-next{ background: url('../images/slide-next-icon.png') center no-repeat; background-size: auto 100%;}
#news .owl-nav button span{display: none;}

/* contact */
#contact{padding-top: 70px;}
#contact .wrap{max-width: 1400px; width: 94%; background: #111; padding: 50px 0; margin: 0 auto;}
#contact .text-title{text-align: center;}
#contact .text-title::after{margin-left: auto; margin-right: auto;}
#contact .form{max-width: 1000px; width: 90%; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto;}
#contact .form li{margin-top: 20px;}
#contact .form .label{font-size: 16px; margin-bottom: 10px;}
#contact .form .info{width: 32.5%;}
#contact .form .info input,#contact .form textarea{width: 100%; background: #111; border: 1px solid #999; padding: 10px; box-sizing: border-box;}
#contact .form .message{width: 100%;}
#contact .form textarea{height: 200px;}
#contact .form .btn{width: 100%; display: flex; justify-content: center;}
#contact .form .btn button{width: 200px; height: 50px; background: #e7bc41; color: #000; font-size: 16px; border: none;}

@media screen and (max-width:1180px) {
    #news .wrap .slide li a .info{background: linear-gradient(to top, rgba(0,0,0,.5), transparent); text-align: left; opacity: 1; padding: 10px; top: auto; bottom: 0; left: 0; transform: none;}
    #news .wrap .slide li a .info .date{background: #e7bc41; padding: 5px; margin: 0; border: none; display: inline-block;}
    #news .wrap .slide li a .info .text{-webkit-line-clamp: 1; margin-top: 5px;}
}

@media screen and (max-width:1023px) {
    #about{flex-direction: column-reverse;}
    #about .img,#about .text,#news .wrap .text-title,#news .wrap .slide{width: 100%;}
    #about .text{position: relative;}
    #news .wrap{flex-direction: column; margin-top: 0; position: relative;}
    #about .text .more{position: absolute; top: 0; right: 0; margin-top: 15px;}
    #news{position: relative;}
    #news .more{float: none; position: absolute; top: 0; right: 0; display: block; margin-top: 15px;}    
}

@media screen and (max-width: 767px) {
    #contact .wrap{width: 100%;}    
}