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

#fullpage > div {
    position: relative;
}

#dot_btn {
    width:14px;
    height:84px;
    position:fixed;
    right:5%;
    top:50%;
    transform: translateY(-50%);
    z-index:99999999;
}

#dot_btn > li {
    width: 14px;
    height: 14px;
    background: #fff;
    margin-bottom:21px;
    border-radius: 50%;
}

#dot_btn > li.on {
    background: #ff153c;
}


#dot_btn > li > a {
    display: block;
    height: 100%;
}


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


/* header css */
.header{position: fixed; left: 20%; top: 2%; float: left; z-index: 999; width: 100%;}
.header .inner{}
.header .navbar{margin-top: 10px; display: block; margin-left: -200px;}
.header .navbar .navbar_logo{cursor: pointer; width: 124px;}
.header .navbar .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: #fff; padding: 8px 16px; font-size: 13px; text-decoration: none; display: block; opacity: 0.75;}
.header .navbar_menu .dropdown .dropdown-content a:hover {color: #fff; opacity: 1;}
.header .navbar_menu .dropdown:hover .dropdown-content {display: block;}
.header .navbar_icons{margin-top: 28px; margin-left: 31%;}
.header .navbar_icons:hover dl dt{display: block;}
.header .navbar_icons:hover img{transform: rotate(180deg);}
.header .navbar_icons li{float: left; height: 0px;}
.header .navbar_icons li dl{cursor: pointer;}
.header .navbar_icons li dl dd{color: #fff; font-size: 15px; font-weight: 600;}
.header .navbar_icons li dl dt{color: #fff; font-size: 15px; display: none;}
.header .navbar_icons li img{width: 18px; height: 10px; margin: -13px 33px;  cursor: pointer;}
.header .bg {
    width: 100vw;
    height: 101vh;
    position: absolute;
    top: -4%;
    left: -20%;
    background-color: rgb(65 64 64);
    display: none;
}

/* topnav  */
body {margin: 0; font-family: Arial, Helvetica, sans-serif;}
.topnav {position: relative; left: -13%; top: 13px;}
.topnav a {padding: 14px 10px; text-decoration: none; font-size: 20px;}
.topnav .wrap .dropdown {position: relative; display: none;}
.topnav .wrap .dropdown .dropbtn{ background-color: transparent; color: #fff; padding: 16px; font-size: 26px; font-weight: 600; border: none;}
.topnav .wrap .dropdown .dropbtn img{width: 18px; margin-top: 0px; margin-left: 1px;}
.topnav .wrap .dropdown .dropdown-content { display: none;   min-width: 160px;  z-index: 1; line-height: 0.2;}
.topnav .wrap .dropdown .dropdown-content a {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: 89%; 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: 6px; 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{position: fixed; bottom: 4%; left: 70%; 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;
    }
    .navbar_menu{display: none;}

}
  
@media screen and (max-width: 600px) {
    .topnav.responsive {}
    .topnav.responsive .wrap .dropdown{display: block; margin-top: 15%; margin-left: 0%;}
    #section01 .bg-black{ z-index: 99;}
}
@media (max-width:766px){
    #dot_btn{display: none;}
    .navbar_menu{display: none;}
}

@media (max-width:400px){
    .topnav .icons{left: 60%;}
}
/* 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-none {display:none !important}

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


/* section1 css */
.box{display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 999;}
.box .title{font: bold 45px 'inherit'; color: #fff; text-align: center;}
.box .title span{font: bold 20px 'inherit'; color: #fff; }
.box .btn{width: 300px; height: 60px; background-color: #ff153c; font: bold 25px/45px 'inherit'; color: #fff; border-radius: 5px; margin-top: 20px; margin-left: 29%;}


@media (max-width:766px){
    .box .title{font: bold 18px 'inherit'; color: #fff; text-align: center;}
    .box .btn{margin-left: 0%;}
}


/* section2 css*/
#section02 .inner{}
#section02 .inner video{position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: 3;} 
#section02 .inner .info{margin-left: 200px; position: absolute; transform: translate(-50%, -50%); left: 15%; top: 41%; z-index: 99; display: none;}
#section02 .inner .info h3{font-size: 45px; font-weight: 600; color: #fff; text-align: left; line-height: 1.5;}
#section02 .inner .info .txt{font-size: 20px; color: #cccbcb; margin-top: 20px; text-align: left;}
#section02 .inner .info .btn1{font-size: 20px; font-weight: 600; text-align: left; color: #fff; text-decoration: none;}
#section02 .inner .info img{width: 40px; height: 20px; margin-bottom: 10px;}

@media (max-width:766px) {
    #section02 .inner .info{top: 47%; left: -7%;}
    #section02 .inner .info h3{font-size: 20px; font-weight: 600; color: #fff; text-align: left; line-height: 1.5;}
    #section02 .inner .info .txt{font-size: 13px; color: #cccbcb; margin-top: 20px; text-align: left;}
    #section02 .inner .info .btn1{font-size: 15px; font-weight: 600; text-align: left; color: #fff; text-decoration: none;}
}

@media (max-width:400px) {
    #section02 .inner .info{top: 47%; left: -19%;}
}



/* section3 css */
#section03 .inner{}
#section03 .inner video{position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: 3;}
#section03 .inner .info{position: absolute; left: 9%; top: 28%; z-index: 99; width:80%;}
#section03 .inner .info .txt{color: #fff; font-size: 45px; font-weight: 600; text-align: left; margin-bottom: 10px;}
#section03 .inner .info .txt .counter{font-size: 45px; font-weight: 600; text-align: left; color: #fff; top: 0;}
#section03 span{font-size: 18px; position: relative; top: -23px;}
#section03 .inner .info .txt1{color: #484747; font-size: 18px; font-weight: 600;}

@media (max-width:766px){
    #section03 .inner .info{left: 6%; top: 31%;}
    #section03 .inner .info .txt{color: #fff; font-size: 25px; font-weight: 600; text-align: left; margin-bottom: 10px;}
    #section03 .inner .info .txt .counter{font-size: 25px; font-weight: 600; text-align: left; color: #fff; top: 0;}
    #section03 span{font-size: 13px; position: relative; top: -11px;}
    #section03 span:nth-child(2){display: none;}
    #section03 .inner .info .txt1{color: #484747; font-size: 13px; font-weight: 600;}
}






#section01 {
    position:relative;
}

#section01 .wrapper {
    width:100%;
    height:100%;
    background-image: url(https://image.tving.com/ntgs/operation/onboard/2023/12/27/1703657284_1.png/dims/resize/F_webp,2048);
    background-size: cover;
    mask-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
}

#section01 .bg-black {
    width:100%;
    height:100%;
    position: absolute;
    z-index:9;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.65);
}

#section01 .wrapper .list1 {
    position:absolute;
    top:38px;
    left:50%;
    margin-left:-600px;
    width:1200px;
    height:710px;
}

#section01 .wrapper .list1 .item {
    float:left;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

#section01 .wrapper .list1 .item .bg {
     position: absolute;
     left: 0;
     top: 0;
     transition: all 0.4s;
 }

#section01 .wrapper .list1 .item:hover .bg {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}


#section01 .wrapper .list1 .item > img {
    position:absolute;
    left:0;
    top:0;
}

#section01 .wrapper .list1 .item .text {
    position: absolute;
}












#section01 .wrapper .list1 .i01 {
     width:600px;
     height:530px;
 }


#section01 .wrapper .list1 .i01 .text {
    left:40px;
    top:38px;

}



#section01 .wrapper .list1 .i02 {
    width:247px;
    height:180px;
}

#section01 .wrapper .list1 .i02 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list1 .i03 {
    width:353px;
    height:180px;
}

#section01 .wrapper .list1 .i03 .text {
    left:15px;
    top:17px;
}





#section01 .wrapper .list1 .i04 {
    width:404px;
    height:174px;
}

#section01 .wrapper .list1 .i04 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list1 .i05 {
    width:196px;
    height:174px;
}

#section01 .wrapper .list1 .i05 .text {
    left:15px;
    top:17px;
}



#section01 .wrapper .list1 .i06 {
    width:300px;
    height:176px;
}

#section01 .wrapper .list1 .i06 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list1 .i07 {
    width:300px;
    height:176px;
}

#section01 .wrapper .list1 .i07 .text {
    left:15px;
    top:17px;
}






#section01 .wrapper .list1 .i08 {
    width:303px;
    height:180px;
}

#section01 .wrapper .list1 .i08 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list1 .i09 {
    width:297px;
    height:180px;
}

#section01 .wrapper .list1 .i09 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list1 .i10 {
    width:600px;
    height:180px;
}

#section01 .wrapper .list1 .i10 .text {
    left:15px;
    top:17px;
}










/*** list1 end ***/




#section01 .wrapper .list2 {
    position:absolute;
    top:38px;
    left:50%;
    margin-left:-600px;
    width:1200px;
    height:710px;
}

#section01 .wrapper .list2 .item {
    float:left;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

#section01 .wrapper .list2 .item .bg {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.4s;
}

#section01 .wrapper .list2 .item:hover .bg {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}


#section01 .wrapper .list2 .item > img {
    position:absolute;
    left:0;
    top:0;
}

#section01 .wrapper .list2 .item .text {
    position: absolute;
}





#section01 .wrapper .list2 .i01 {
    width:600px;
    height:530px;
}


#section01 .wrapper .list2 .i01 .text {
    left:40px;
    top:38px;

}



#section01 .wrapper .list2 .i02 {
    width:247px;
    height:180px;
}

#section01 .wrapper .list2 .i02 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list2 .i03 {
    width:353px;
    height:180px;
}

#section01 .wrapper .list2 .i03 .text {
    left:15px;
    top:17px;
}





#section01 .wrapper .list2 .i04 {
    width:404px;
    height:174px;
}

#section01 .wrapper .list2 .i04 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list2 .i05 {
    width:196px;
    height:174px;
}

#section01 .wrapper .list2 .i05 .text {
    left:15px;
    top:17px;
}



#section01 .wrapper .list2 .i06 {
    width:300px;
    height:176px;
}

#section01 .wrapper .list2 .i06 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list2 .i07 {
    width:300px;
    height:176px;
}

#section01 .wrapper .list2 .i07 .text {
    left:15px;
    top:17px;
}






#section01 .wrapper .list2 .i08 {
    width:303px;
    height:180px;
}

#section01 .wrapper .list2 .i08 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list2 .i09 {
    width:297px;
    height:180px;
}

#section01 .wrapper .list2 .i09 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list2 .i10 {
    width:600px;
    height:180px;
}

#section01 .wrapper .list2 .i10 .text {
    left:15px;
    top:17px;
}



/*** list2 end ***/

#section01 .wrapper .list3 {
    position:absolute;
    top:38px;
    left:50%;
    margin-left:-600px;
    width:1200px;
    height:710px;
}

#section01 .wrapper .list3 .item {
    float:left;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

#section01 .wrapper .list3 .item .bg {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.4s;
}

#section01 .wrapper .list3 .item:hover .bg {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}


#section01 .wrapper .list3 .item > img {
    position:absolute;
    left:0;
    top:0;
}

#section01 .wrapper .list3 .item .text {
    position: absolute;
}





#section01 .wrapper .list3 .i01 {
    width:600px;
    height:530px;
}


#section01 .wrapper .list3 .i01 .text {
    left:40px;
    top:38px;

}



#section01 .wrapper .list3 .i02 {
    width:247px;
    height:180px;
}

#section01 .wrapper .list3 .i02 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list3 .i03 {
    width:353px;
    height:180px;
}

#section01 .wrapper .list3 .i03 .text {
    left:15px;
    top:17px;
}





#section01 .wrapper .list3 .i04 {
    width:404px;
    height:174px;
}

#section01 .wrapper .list3 .i04 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list3 .i05 {
    width:196px;
    height:174px;
}

#section01 .wrapper .list3 .i05 .text {
    left:15px;
    top:17px;
}



#section01 .wrapper .list3 .i06 {
    width:300px;
    height:176px;
}

#section01 .wrapper .list3 .i06 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list3 .i07 {
    width:300px;
    height:176px;
}

#section01 .wrapper .list3 .i07 .text {
    left:15px;
    top:17px;
}






#section01 .wrapper .list3 .i08 {
    width:303px;
    height:180px;
}

#section01 .wrapper .list3 .i08 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list3 .i09 {
    width:297px;
    height:180px;
}

#section01 .wrapper .list3 .i09 .text {
    left:15px;
    top:17px;
}




#section01 .wrapper .list3 .i10 {
    width:600px;
    height:180px;
}

#section01 .wrapper .list3 .i10 .text {
    left:15px;
    top:17px;
}



/*** list3 end ***/

#section01 .wrapper .slidesjs-previous {
    width: 26px;
    height: 97px;
    background: url("../img/img01/left_btn.png") no-repeat center;
    position: absolute;
    left: 298px;
    top: 345px;
    z-index: 100;
    text-indent: -9999px;
}

#section01 .wrapper .slidesjs-next {
    width: 26px;
    height: 97px;
    background: url("../img/img01/right_btn.png") no-repeat center;
    position: absolute;
    right: 298px;
    top: 345px;
    z-index: 100;
    text-indent: -9999px;
}


#section01 .wrapper .slidesjs-pagination {
    width: 84px;
    height: 19px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    text-indent: -9999px;
    /*background:red;*/
}

#section01 .wrapper .slidesjs-pagination .sldiesjs-pagination-item {
    float :left;
}

#section01 .wrapper .slidesjs-pagination .sldiesjs-pagination-item a {

    display: block;
    background: url("../img/b01.png") no-repeat;
    margin-right:21px;
    z-index: 100;
    width: 14px;
    height: 14px;
}

#section01 .wrapper .slidesjs-pagination .sldiesjs-pagination-item a.active {
    background: url("../img/b02.png") no-repeat;
}

/***  section01 end  ***/





#section02 {
    position:relative;
    background-color: #fff;
}

#section02 .wrapper02{
    width:1920px;
    height:551px;
    position:absolute;
    left:0;
    top:0;
}


#section02 .wrapper02 .list01{
    width:1920px;
    height:551px;
    position:absolute;
    top:162px;
    background:url("../img/img02/main.png") no-repeat left top;
}



#section02 .wrapper02 .list01 .typo {
    position:absolute;
    top:103px;
    left:393px;
    width:602px;
    height:253px;


}

#section02 .wrapper02 .list01 .btn {

}


#section02 .wrapper02 .list01 .btn > a {
    position:absolute;
    top:422px;
    left:407px;
    width:186px;
    height:43px;
    background:url("../img/img02/btn01.png") no-repeat left top;


}

/*#section02 .wrapper02 .list01 > a:hover {*/
    /*background:url("../img/img02/btn02.png") no-repeat left top;*/
/*}*/

#section02 .board {
    width:1002px;
    height:150px;
    position:absolute;
    top:756px;
    left:50%;
    margin-left:-501px;


}


#section02 .board > article {
    width: 465px;
    height: 150px;
    float: left;
    margin-right: 35px;
    padding-right:35px;
    border-right: 1px solid #b5b5b5;
}

#section02 .board .board02 {
    border-right: 0 solid #b5b5b5;
    margin-right: 0;
    padding-right:0;
}

#section02 .board > article.last {
    margin-right: 0;
}

#section02 .board > article .title {
    text-align: right;
    height: 20px;
    border-bottom: 1px solid #b5b5b5;
    padding: 0 0 15px 0;
    margin-bottom: 30px;
}

#section02 .board > article .title > img {
    float: left;
}

#section02 .board > article .board_list {

}


#section02 .board > article .board_list > li {
    font-size: 14px;
    line-height: 14px;
    letter-spacing:-1px;
    margin-bottom: 21px;
    color: #5d5d5d;
    text-align: right;
    height: 14px;
}

#section02 .board > article .board_list > li > a {
    color: #5d5d5d;
    float: left;
}


#section02 .board > article .board_list > li > a:hover {
    text-decoration: underline;
}


/*#section02 .board .board01 {*/
    /*width:465px;*/
    /*height:150px;*/
    /*background:yellow;*/

    /*padding-right:35px;*/
    /*border-right: 1px solid #b5b5b5;*/

/*}*/


























#section03 {
background-color: #fff;
}


#section03 .bg {
    position: absolute;
    left: 0;
    top: 0;
}


#section03 .left {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#section03 .right {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
}















#section03 .wrapper03 {
    position:absolute;
    top:162px;
    width:1920px;
    height:610px;
    background: url("../img/img03/bg03.png") no-repeat left top;
}

#section03 .wrapper03 .main {
    top: 50px;
    left:50%;
    margin-left:-308px;
    position:absolute;

}

#section03 .wrapper03 .main .typo{
    margin-bottom:36px;
}

#section03 .wrapper03 .main .phone{
    margin-bottom:36px;
}

#section03 .wrapper03 .main .down{
    position:relative;
    left:50%;
    margin-left:-253px;
}

#section03 .wrapper03 .main .down > img {
    cursor:pointer;
}


#section03 .wrapper03 .main .down > img:nth-child(1){
    margin-right:33px;

}




#section03 .footer {
    width: 100%;
    height: 48px;
    position: absolute;
    left: 0;
    top: 772px;
    z-index:9999;
}

#section03 .footer .top_footer {
    background:#434955;
    height:48px;

}

#section03 .footer .top_footer .wrap{
    width: 1200px;
    height: 48px;
    margin: 0 auto;
    position: relative;


}

#section03 .footer .top_footer .wrap .tell  {
    float:left;
    border-left:1px solid #777d89;
}


#section03 .footer .top_footer .wrap .top {
    float:right;
}




#section03 .footer .bot_footer {
    background:#777e88;
    height:160px;
}


#section03 .footer .bot_footer .wrap {
    width: 1200px;
    height:160px;
    margin: 0 auto;
    position: relative;

}


#section03 .footer .bot_footer .wrap .logo {
    position:absolute;
    left:24px;
    top:53px;


}


#section03 .footer .bot_footer .wrap .text {
    position:absolute;
    left: 282px;
    top:27px;

}





#section03 .footer .bot_footer .wrap .text .foot_btn > li {
    float:left;
    padding-left:26px;
    border-right:2px solid #97a09f;
    padding-right:26px;
    height:15px;
    text-align:center;
}


#section03 .footer .bot_footer .wrap .text .foot_btn > li:nth-child(1) {
    padding-left:0;
}

#section03 .footer .bot_footer .wrap .text .foot_btn > li:nth-child(4) {
    padding-right:0;
    border-right:0;
}


#section03 .footer .bot_footer .wrap .footer {
    position:absolute;
    left:282px;
    top:64px;
}