*{padding: 0; margin: 0; box-sizing: border-box;}
ol, ul, li{list-style: none;}
a{text-decoration: none;}

.display-none {display:none;}
.display-block {display:block;}

.clearfix:before, .clearfix:after {
  display: block;
  content: '';
  line-height: 0;
}

.clearfix:after {
  clear:both;
}

.clearfix {
  zoom: 1;
}

/* header css */
.header{position: fixed;width:100%; left: 20%; top: 2%; z-index: 999; }
.header .inner{}
.header .navbar{margin-top: 10px; display: block; margin-left: -200px;}
.header .navbar .navbar_logo{cursor: pointer; width: 124px;}
.header .navbar a{}
.header .navbar a .navbar_logo img{}
.header .navbar_menu{margin-top: 7px; display: block;}
.header .navbar_menu .dropdown {position: relative; display: inline-block;}
.header .navbar_menu .dropdown .dropbtn { background-color: transparent; color: #fff; padding: 16px; font-size: 16px; font-weight: 600; border: none;}  
.header .navbar_menu .dropdown .dropdown-content { display: none; position: absolute;  min-width: 160px;  z-index: 1;}
.header .navbar_menu .dropdown .dropdown-content a {color: #a3a3a3; padding: 12px 16px; font-size: 13px; text-decoration: none; display: block;}
.header .navbar_menu .dropdown .dropdown-content a:hover {color: #fff;}
.header .navbar_menu .dropdown:hover .dropdown-content {display: block;}
.header .navbar_icons{margin-top: 28px; margin-left: 32%;}
.header .navbar_icons:hover dl dt{display: block;}
.header .navbar_icons:hover img{transform: rotate(180deg);}
.header .navbar_icons li{float: left;}
.header .navbar_icons li dl{cursor: pointer;}
.header .navbar_icons li dl dd{color: #fff; font-size: 15px;margin-bottom:10px; font-weight: 600;}
.header .navbar_icons li dl dt{color: #fff; font-size: 15px; display: none;}
.header .navbar_icons li img{width: 18px; cursor: pointer; margin-left: 10px;}
.header .bg-black {
  width:100vw;
  height:101vh;
  background:rgb(65 64 64);
  position: absolute;
  top:-3%;
  left:-20%;
  display: none;
}

/* topnav */
body {margin: 0; font-family: Arial, Helvetica, sans-serif;}
.topnav {position: relative; left: -13%; top: 13px; width: 100%;}
.topnav a {text-align: center; padding: 14px 9px; text-decoration: none;}
.topnav .wrap .dropdown {display: none; margin-left: 3%; margin-top: 19%;}
.topnav .wrap .dropdown .dropbtn{ background-color: transparent; color: #fff; font-size: 26px; font-weight: 600; border: none;}
.topnav .wrap .dropdown .dropbtn img{width: 18px; margin-top: -3px;}
.topnav .wrap .dropdown .dropdown-content {margin-left: -2%; display: none;  min-width: 160px;  z-index: 1; line-height: 0.2;}
.topnav .wrap .dropdown .dropdown-content a {margin-left: -1%; color: #fff; padding: 12px 16px; font-size: 16px; text-decoration: none; display: block; text-align: left; opacity: 0.75;}
.topnav .wrap .dropdown .dropdown-content a:hover {color: #fff; opacity: 1;}
.topnav input#menu{display: none;}
.topnav .icon{ cursor: pointer; display: block; height: 24px; padding: 16px; width: 24px;}
.topnav label.icon { position: fixed; z-index: 200; left: 84%; top: 2%;}
.topnav .icon .menu,
.topnav .icon .menu::before,
.topnav .icon .menu::after { background: #fff; content: ''; display: block; height: 2px; position: absolute; transition: ease .3s, top ease .3s .3s, transform ease .3s; width: 20px;}
.topnav .icon .menu { left: 18px; top: 27px;}
.topnav .icon .menu::before {top: -6px;}
.topnav .icon .menu::after {top: 6px;}
.topnav #menu:checked + .icon .menu {background: transparent;}
.topnav #menu:checked + .icon .menu::before {transform: rotate(45deg);}
.topnav #menu:checked + .icon .menu::after {transform: rotate(-45deg);}
.topnav #menu:checked + .icon .menu::before,
.topnav #menu:checked + .icon .menu::after { top: 0; transition: top ease .3s, transform ease .3s .3s;}

.topnav .icons{ margin-left: 57%; position: fixed; bottom: 4%; display: none;}
.topnav .icons .ic img{width: 24px; height: 24px;}
.topnav .icons .in img{width: 24px; height: 24px;}
.topnav .icons .you img{width: 24px; height: 24px;}
.active1{transform: rotate(180deg);}


@media screen and (max-width: 600px) {
    
    .topnav a.icon {
        float: right;
        display: block;
    }

}
  
@media screen and (max-width: 600px) {
    /* .topnav.responsive {position: relative;  background-color: rgb(49, 48, 48); width: 120%; height: 953px; z-index: 9999; top: -33px; left: -12%;} */
    .topnav.responsive .wrap .dropdown{display: block;}

}
@media (max-width:766px){
    #dot_btn{display: none;}
    .header{position: fixed;}
}
/* topnav last */



/* .md-display-none {display:none !important}
.md-display-block {display:block !important}


.sm-display-block {display:block !important}
.sm-display-none {display:none !important} */

@media (max-width:1199px){
.display-block {display:block !important}
.sm-display-block {display:block !important}
.sm-display-none {display:none !important}
}




/* slide css */
html,body {position: relative; height: 100%;}
.slide{width: 100%; height: 100%;}
.slide .title{ position: fixed; left: 10%; top: 15%; color: #fff; z-index: 9; font-size: 140px; line-height: 1.1; font-weight: 600; opacity: 0.2;}
.slide .swiper { width: 100%; height: 100%;}
.slide .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center;}
.slide .swiper-slide img { display: block; width: 100%; height: 105%; object-fit: cover;}
.swiper span {
  background-color: #fff;
  margin: 0 10px;
}
.slide swiper-slide .info{position: fixed; left: 10%; top: 50%; }
.slide swiper-slide .bc{background: url(../img/Btn_arrow_w.png)no-repeat right center; background-size: 44px; background-position: 173px 217px;}
.slide swiper-slide .ab{background: url(../img/Btn_arrow_w.png)no-repeat right center; background-size: 44px; background-position: 195px 217px;}
.slide swiper-slide .info img{width: 348px; height: 147px;}
.slide swiper-slide .info .txt{font-size: 18px; margin-top: 20px; color: #eee; text-align: left; line-height: 1.5;}
.slide swiper-slide .info .btn{text-align: left; font-size: 18px; margin-top: 20px; color: #eee; float: left; margin-left: -14px;}
.slide .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{left:unset;right:5%;}
.slide .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {opacity:1;margin:21px 0; width: 14px; height: 14px;}
.slide .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:#ff153c}


@media (max-width:766px){
  .slide .title{font-size: 70px; left: 7%; top: 30%;}
  .slide swiper-slide .info{top: 55%;left: 48%;}
  .slide swiper-slide .info img{width: 246px; height: 100px; margin-top: 12%; margin-left: -80%;}
  .slide swiper-slide .info .txt{margin-top: 0%; margin-left: -80%;}
  .slide swiper-slide .info .btn{margin-top: 1%; margin-left: -85.4%;}
  .slide swiper-slide .bc{background-size: 44px; background-position: 3px 162px;}
  .slide swiper-slide .ab{background-size: 44px; background-position: 3px 162px;}
}

@media (max-width:400px){
  .slide swiper-slide .info{top: 55%; left: 58%;}
  .slide .title{z-index: 9;}
}




/* footer css */
.footer{background-color: red;box-sizing: border-box; position: relative; z-index: 9;padding:80px 0;}
.footer .inner{width: 100%; margin: 0 auto;}
.footer .inner .wrap{width: 80%;margin: 0 auto;}
.footer .inner .wrap .box{}
.footer .inner .wrap .box .title{font: bold 35px 'inherit'; color: #fff;}
.footer .inner .wrap .box .site{display: flex; justify-content: start;margin-top:28px;}
.footer .inner .wrap .box .site .list{font: bold 18px 'inherit'; color: #fff; width: 148px; height: 150px; margin-right: 30px;}
.footer .inner .wrap .box .site .list li{font-size: 14px; color: #e8e8e8; margin-top: 11px;}
.footer .inner .wrap .box1{margin-top: 4%;}
.footer .inner .wrap .box1 h2{background: url('../img/tving-new-logo-pc.png')no-repeat 15px; background-size: 120px;  height: 67px; position: relative;}
.footer .inner .wrap .box1 .info{margin-top:20px;}
.footer .inner .wrap .box1 .info .info_txt{}
.footer .inner .wrap .box1 .info .info_txt .txt{font-size: 16px; color: #fff; display: inline; cursor: pointer;}
.footer .inner .wrap .box1 .info .info_txt .txt span{font-size: 16px; color: #fff; font-weight: 600;}
.footer .inner .wrap .box1 .info .info_txt #fs::after{content: '∨'; margin-left: 5px; font-size: 15px;}
.footer .inner .wrap .box1 .info .address{margin-top: 10px; margin-bottom: 10px;}
.footer .inner .wrap .box1 .info .address p{display: inline;}
.footer .inner .wrap .box1 .info .address .ad{font-size: 16px; color: #c0bcbc; }
.footer .inner .wrap .box1 .info .address .email{font-size: 16px; color: #c0bcbc;}
.footer .inner .wrap .box1 .info .address .tp{ font-size: 16px; color: #c0bcbc; }
.footer .inner .wrap .box1 .info .address .ce{margin-top: 5px; font-size: 16px; color: #c0bcbc; }
.footer .inner .wrap .box1 .info .copy{}
.footer .inner .wrap .box1 .info .copy .cp{font-size: 16px; color: #fff;}
.footer .inner .wrap .icon{margin-left: 1%; margin-top: 2%;}
.footer .inner .wrap .icon .ic img{ height: 35px;}
.footer .inner .wrap .icon .in img{ height: 35px; margin: 0 10px;}
.footer .inner .wrap .icon .you img{ height: 35px;}

@media (max-width:766px){
  .footer .inner .wrap .site{margin-left: 0%;}
  .footer .inner .wrap .box .title{font: bold 25px 'inherit';}
  .footer .inner .wrap .site .list{}
  .footer .inner .wrap .site .list li{font-size: 17px;}
  .footer .inner .wrap .box1 .info{}
  .footer .inner .wrap .box1 h2{width: 139px;}
  .footer .inner .wrap .box1 .info .info_txt{}
  .footer .inner .wrap .box1 .info .info_txt .txt{padding: 0 2px;}
  .footer .inner .wrap .box1 .info .address{ margin-left: 0%; text-align: left;}
  .footer .inner .wrap .box1 .info .address .ad{font-size: 15px;}
  .footer .inner .wrap .box1 .info .address .email{font-size: 15px;}
  .footer .inner .wrap .box1 .info .address .tp{font-size: 15px;}
  .footer .inner .wrap .box1 .info .address .ce{display: block; font-size: 15px;}
  .footer .inner .wrap .box1 .info .copy{}
  .footer .inner .wrap .box1 .info .copy .cp{font-size: 17px;}
  .footer .inner .wrap .box1 .info .icon{ margin-left: 1%;}
  .footer .inner .wrap .box1 .info .icon .ic img{width: 32px; height: 32px;}
  .footer .inner .wrap .box1 .info .icon .in img{width: 32px; height: 32px; margin: 0 10px;}
  .footer .inner .wrap .box1 .info .icon .you img{width: 32px; height: 32px;}
}