#hero { width: 100%; height: 100vh;
   background: url(../img/bg_0.jpg) no-repeat center center; background-size: cover;
   border-bottom: 8px solid #222;  }
.hero_wrap { width: 100%; height: 100%;  background: rgb(0,0,0);
background: radial-gradient(circle, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.85) 90%); }

.nav_wrap { width: 100%; display: flex; justify-content: space-between; padding: 28px 56px;}

.main_logo { 
   width:172px; 
   color:rgb(229,9,20);
   fill: rgb(229,9,20);
}
.for_m{display:none}
.bt_login { width: 100px; height: 40px; background: rgb(229,9,20); color:white; font-size: 16px; border-radius: 10px; border:none;
 }
.hero_title_wrap { width: 800px; margin: 0 auto; padding: 120px 0 0 0;}

.hero_join_wrap { width: 800px; margin: 0 auto; text-align: center;
padding: 150px 0 0 0;}

.hero_title { font-size: 72px; line-height: 90px; font-weight: 700;
   text-align: center; margin: 0 0 20px;}

.hero_subtitle { font-size: 24px; line-height: 36px; font-weight: 400;
   text-align: center;
}

.hero_join_wrap p { text-align: center;}

.input_email { width: 300px; height: 40px; border-radius: 10px 0 0 10px; border: none; padding: 0 20px; font-size: 16px;  margin: 0 0 20px;}
.bt_join { width: 150px; height: 40px; background: rgb(229,9,20); color: white; font-size: 16px; border-radius: 0 10px 10px 0; border: none;}


/* Feature */

#feature { width: 100%;}

.tv_wrap { width: 100%;
   border-bottom: 8px solid #222; 
padding: 50px 0;}
.tv { width:1200px; height:auto ; display: flex; margin: 0 auto;  }

.tv li { width: 50%; height: 450px; position: relative; list-style: none;}

.tv li:first-child { display: flex; justify-content: center; align-items: flex-start;
flex-direction: column; 
padding: 0 100px 0 0; }

.tv_title { font-size: 48px; font-weight: 700; margin-bottom: 20px; }

.tv_subtitle { font-size: 24px; font-weight: 400; word-break: keep-all; }

.tv_img { position: absolute; top:0; left:0;
z-index: 10; width: 600px;}

.tv_video { position: absolute; top:70px; left:80px; width: 480px;
   z-index: 9;}

/* Feature - Offline */

.offline_wrap { width: 100%; border-bottom: 8px solid #222; padding: 50px 0; }

.offline { width: 1200px; 
display: flex; list-style: none; margin: 0 auto;}

.offline li { width: 50%; 
height: 450px; position: relative;  }

.offline li:first-child {
   background-image: url(../img/mobile-0819.jpg);
   background-size: cover;
   background-position: -50px center;
   padding: 0 100px 0 0;
}

.offline li:last-child {
   display: flex; flex-direction: column;
   justify-content: center;
   padding: 0 0 0 50px;
} 
.offline_img_box {
   width: 400px; height: 100px;
   background: black;
   border: 4px solid #222;
   border-radius: 20px;
   display: flex; justify-content: space-between;
   padding: 10px 30px; 
margin: 300px auto;}

.offline_img_1 { width: 60px;}
.offline_img_2 {    width: 60px;
   height: 60px;
   margin-top: 5px;}
.offline_img_text {width: 150px; text-align: left;
padding: 10px 0 0 0;}
.offline_img_text span { display: block;}
.offline_img_text span:last-child { color: rgb(0,113,235);}

.offline_title { font-size: 48px; font-weight: 700; margin-bottom: 20px;
word-break: keep-all; }

.offline_subtitle { font-size: 24px; font-weight: 400; word-break: keep-all; }

/* Feature Device */

.device_wrap { width: 100%;
   border-bottom: 8px solid #222; 
padding: 50px 0;}
.device { width:1200px; height:auto ; display: flex; margin: 0 auto;  }

.device li { width: 50%; height: 450px; position: relative; list-style: none; }

.device li:first-child { display: flex; justify-content: center; align-items: flex-start;
flex-direction: column; 
padding: 0 100px 0 0; }

.device_title { font-size: 48px; font-weight: 700; margin-bottom: 20px; word-break: keep-all; }

.device_subtitle { font-size: 24px; font-weight: 400; word-break: keep-all; }

.device_img { position: absolute; top:0px; left:0;
z-index: 10; width: 600px;}

.device_video { position: absolute; top:50px; left:100px; width: 380px;
   z-index: 9;}

/* FAQ CSS */

#faq { width: 100%; padding:100px 0; position: relative; border-bottom: 8px solid #222;  }
.faq_wrap { width: 980px; height: 100%; margin: 0 auto 100px; }
.faq_title { font-size: 48px; font-weight: 700; text-align: center; margin-bottom: 40px;}
.faq_list { width: 100%; max-height: 60px; margin: 0 0 20px; overflow: hidden; transition: max-height 0.4s; }
.faq_list_title { width: 100%; height: 60px; background-color: rgb(48,48,48);
font-size: 24px; font-weight: 400;
display: flex; justify-content: space-between; padding: 0 40px; 
align-items: center;
margin: 0 0 4px;  border-radius: 6px;}

.faq_list_title:hover {cursor: pointer;}

.faq_list_answer { width:100%; height: auto; max-height: 600px; background-color: rgb(48,48,48); padding: 40px; font-size: 20px; word-break: break-all;  border-radius: 6px; }

.openstate_icon { transition: all 0.4s; color: rgb(200,200,200);}

#faq_icon { width: 90px; height: 90px; line-height: 80px; text-align: center; border-radius: 45px; border:3px solid white;
font-size: 60px; font-weight: 700; position: absolute; top:30px; left:915px}

.faq_join_wrap { width: 800px; margin: 0 auto; text-align: center;
   padding: 0;}
   
   
.faq_join_wrap p { text-align: center;}
   
.input_email { width: 300px; height: 40px; border-radius: 10px 0 0 10px; border: none; padding: 0 20px; font-size: 16px;  margin: 0 0 20px;}
.bt_join { width: 150px; height: 40px; background: rgb(229,9,20); color: white; font-size: 16px; border-radius: 0 10px 10px 0; border: none;}
   
.snowball { width: 8px; height: 8px; background: rgba(255,255,255,0.8); border-radius: 4px;  position: absolute; z-index: 200;} 

@keyframes fade_in_opacity {
   0% { opacity: 0; padding-top: 150px;}
   100% { opacity: 1; padding-top: 0;}
}

@keyframes fade_out_opacity {
   0% { opacity: 1; }
   100% { opacity: 0; }
}

/* for scroll animation */

#pos_wrap { position: fixed; z-index: 10000; left : 100; top: 100; font-size: 50px; color:white;}

#tv_text_li { opacity: 0;}
#offline_text_li { opacity: 0;}
#device_text_li { opacity: 0;}


/* footer */
footer{width: 100%;padding:50px 0}
.footer_wrap{width:1200px;margin:0 auto}
.footer_menu{width:100%;display: flex;justify-content: space-between;margin:0 0 20px 0}
.footer_menu ul{width:20%}
.footer_menu ul li {margin:0 0 10px 0}
.footer_menu ul li a{font-size:14px;color:rgb(200,200,200)}

.footer_address{width:100%}
.contact{width:100%;padding:0 0 10px 0;border-bottom:1px solid rgba(200,200,200,0.2);font-size:14px;color:rgb(200,200,200)}
.company_info{width:100%;display:flex;justify-content: space-between;font-size:14px;padding:10px 0;color:rgb(200,200,200)}
.site_info{width:100%;font-size:12px;}



@media screen and (min-width:950px) and (max-width:1200px){

   .tv { width:100%; }    
   .tv_img { position: absolute; top:0; left:0;
      z-index: 10; width: 100%;}
   .tv li { width: 50%; height: 450px; position: relative; list-style: none;}
   .tv_video { position: absolute; top:8.5714%; left:13.3333%; width: 80%;
      z-index: 9;}
   .tv li:first-child  {    padding: 0 50px 0 50px;transform: scale(0.9);}
   .offline { width: 100%;}
   .offline li { width: 50%; height: 450px; position: relative;  }
   .offline li:first-child {
      background-image: url(../img/mobile-0819.jpg);
      background-size: cover;
      background-position: -50px center;
      padding: 0 50px 0 50px;
      transform: scale(0.8);
   }
   .offline li:last-child{padding: 0 0 0 20px;transform: scale(0.9);}
   .device { width:100%;}
   .device li:first-child{transform:scale(0.9);padding: 0 0px 0 50px;}
   .device li:last-child {transform:scale(0.8);margin: 0 140px 0 0;}
   .faq_wrap { width: 70%; }
   .footer_wrap{width:85%;}

}

@media screen and (max-width:949px){
   .nav_wrap{padding: 28px 26px;}
   .hero_title_wrap{width:100%}
   .hero_join_wrap{width:100%}
   .hero_title {font-size:50px;line-height: 70px;}
   .tv_wrap{min-height:800px;padding:120px 0 50px 0}
   .tv { width:100%;flex-wrap: wrap;}
   
   .tv_img { position: absolute; top:0; left:0;
      z-index: 10; width: 100%;}
   .tv_title{text-align: center;margin: 0 auto;}
   .tv li { width: 100%;text-align:center;height:auto}
   .tv_video { position: absolute; top:99px; left:84px; width: 80%;
      z-index: 9;}
   .tv li:first-child  {    padding: 0 50px 0 50px;transform: scale(0.9);}
   .tv li:last-child{transform:scale(0.7)}

   .offline { width: 100%;flex-wrap: wrap;flex-direction: column-reverse;}
   .offline_wrap{    padding: 90px 0 50px 0;}
   .offline_title{text-align: center;}
   .offline li { width: 100%; height: 200px; position: relative;text-align: center;  }

   .offline li:first-child {
      background-image: url(../img/mobile-0819.jpg);
      background-size: cover;
      background-position: center center;
      padding: 0 50px 0 50px;
      transform: scale(0.7);
      min-height:700px;
      margin-top: -120px;
   }
   .offline_img_box{width:500px;    margin:500px auto 0;}
   .offline li:last-child{padding: 0px;transform: scale(0.9);}

   .device { width:100%;flex-wrap: wrap;}
   .device_title{margin:0 auto;}
   .device li{width:100%;text-align: center;}
   .device li:first-child{transform:scale(0.9);padding: 0 10px;    height: 300px;}
   .device li:last-child {transform:scale(1);margin: -5% auto 0;}
   .device_video{left: calc(50% - 190px);}
   .faq_wrap { width: 80%; }
   .faq_list_title{font-size:18px}
   .footer_wrap{width:85%;}
   .device_img{    left: calc(50% - 300px);}
   .faq_join_wrap{width:100%;padding: 0 20px;}
   .contact{font-size:12px;}
   .company_info{font-size:12px}
   .site_info{width:100%;font-size:12px;}

}

@media screen and (max-width:768px){
   

   .tv li:last-child{transform: scale(0.9);}
   .offline li:first-child{    transform: scale(0.6);}
   .offline_img_text span{font-size:25px}
   .offline_img_box{height: 130px;align-items: center;}
}
@media screen and (max-width:900px) and (max-height:480px){


   #hero{height:inherit}
   .hero_wrap{height:inherit;padding-bottom: 50px;}
   .site_info{font-size:12px}
}

@media screen and (max-width:600px){
   .device li:last-child{transform: scale(.7);}
   .offline li:first-child{padding:0px}
   .for_m{display:block}

}
@media screen and (max-width:414px){
   #hero{height:800px}
  
   .faq_list_title,.faq_list_answer{border-radius: 0px;}
   .nav_wrap{padding: 20px 16px;}
   #logo{width:90px}
   .device li:last-child{transform: scale(0.56); margin: -30% auto 0;}
   .bt_login{    width: 60px;
      height: 30px;
      font-size: 17px}
   .hero_title{font-size: 30px;line-height: 40px;}
   .hero_subtitle{font-size: 17px;line-height: 30px;}
   .hero_join_wrap{    padding: 150px 20px;}
   .hero_join_wrap p{    padding: 0 20px;}
   .input_email{border-radius:10px}
   .bt_join{border-radius:10px;margin-bottom: 20px;}
   .tv_title, .offline_title, .device_title,.faq_title{font-size:32px;padding:0 30px}
   
   .tv_subtitle,.offline_subtitle, .device_subtitle{font-size:15px;margin-top:20px;padding:0 30px}
   .tv_video{ top: 60px;left: 30px;}
   .tv_wrap{ min-height: 600px;padding: 80px 0 50px 0;}
   .offline_wrap{padding: 90px 0 0px 0;}
   .offline li:first-child{background-size: 160%;background-repeat: no-repeat;min-height:500px}
   .offline_img_box{width:400px;height:100px;margin: 400px 0 0 0px;}
   .offline_img_text span{font-size:19px}
   .device_wrap{padding: 50px 0 0;}

   .faq_wrap{width:100%}
   .faq_list{margin: 0 0 10px;}
   .faq_list_title{font-size: 15px;}
   .faq_join_wrap p{padding: 0 20px;}
   .faq_list_answer{font-size:12px}
   .footer_wrap{width:80%}
   .footer_menu{flex-wrap: wrap;}
   .footer_menu ul{width:40%}
   .footer_menu ul li a{font-size:12px}
   .company_info{flex-direction: column;line-height:1.5}
   .site_info{font-size:10px}
   .country{padding: 10px 0;}
}