@charset 'utf-8';
main .nt-container { max-width: 1520px;}
main section {  position: relative;overflow:hidden }
main .scroll-down { position: absolute; left: 50%;  bottom: 50px; transform: translateX(-50%); display: block; padding: 0 0 53px; font-size: 16px; color: #fff;}
main .scroll-down:after { content:''; display: block; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 21px; height: 40px; line-height: 1;  background: url('/img/hk/ico_scroll_down.png') no-repeat center top / contain; animation:scroll-down 1s infinite both}

#fp-nav ul li a span, .fp-slidesNav ul li a span {background: #8b8075 !important; }
.video-pop-up { display: flex; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; padding: 20px; }
.video-pop-up .wrap { position: relative; z-index: 20; width: 100%; max-width: 960px;}
.video-pop-up .wrap a {display: block; position: absolute; left:100%; top:0; width: 66px; height: 66px; font-size: 36px; text-align: center; line-height: 66px; color: #fff; background: #003e66; cursor: pointer;}
.video-pop-up .wrap video { width: 100%; cursor:pointer}
.video-pop-up .video-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 11; background: rgba(0,0,0,.8); cursor:pointer;}



@media (max-width:991px){

    main .scroll-down {padding: 0 0 40px; bottom: 20px;}
    main .scroll-down:after { height: 30px;}
    main .scroll-down {display: none;}
    .video-pop-up { padding: 10px;}
    .video-pop-up .wrap a  { width: 40px; height: 40px; line-height: 40px; font-size: 28px; left:inherit; right: 0; top: calc(100% - 8.6px)}
}
@media (max-width:768px){
    main .scroll-down { padding: 0 0 35px; font-size: 15px;}
    main .scroll-down a { height: 26px;}
    main section.sec1{height: 600px!important}
}

@keyframes scroll-down {
    50% { bottom: -5px;}
}


main .visual .msg { position: absolute; top: 48%; left: 50%;  transform: translate(-50%,-50%); z-index: 2; padding: 0 10px;  width: 100%; max-width: 985px; text-align: center;}
main .visual .msg p { line-height: 1; color: #fff; letter-spacing: 0.8em;}
main .visual .msg .p1 { position: relative; padding: 0 0 100px; margin:0 0 50px;overflow: hidden;}
main .visual .msg .p1 span { max-width: 965px; position: absolute; display: block;
  animation-duration:20s;
  	animation-timing-function: ease-in-out;
  	animation-iteration-count: infinite;
}
main .visual .msg .p1 span.item-2{}
main .visual .msg .p1 span img{}
.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

@keyframes anim-1 {
  0%, 25% { left: 100%; opacity: 0; }
    25%,50% { left: 0%; opacity: 1; }
    60%, 100% { left: -110%; opacity: 0; }
}


@keyframes anim-2 {
  0%, 50% { left: 100%; opacity: 0; }
  74%, 91.62% { left: 25%; opacity: 1; }
  100% { left: -110%; opacity: 0; }
}
@media (max-width:768px){

main .visual .msg .p1 span img{width: 100%;}
@keyframes anim-1 {
  0%, 25% { left:0%; opacity: 0; }
    25%,50% { left: 0%; opacity: 1; }
    60%, 100% { left:0%; opacity: 0; }
}

@keyframes anim-2 {
  0%, 50% { left:0%; opacity: 0; }
  74%, 91.62% { left: 0%; opacity: 1; }
  100% { left: 0%; opacity: 0; }
}


}



main .visual .msg .p1:after {content:''; display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 83%; height: 1px; background: #fff;}
main .visual .msg .p2 { padding: 0 0 35px; font-size: 45px;   }
main .visual video { position: absolute; left: 0; top: 0; min-width: 100%; min-height: 100%;  }

main .visual .video-wrap::after{content: ""; width: 100%; height: 100%; display: inline; background: rgba(0,0,0,0.2); position: absolute; top:0;}

main .sec2 {background: url('/img/hk/bg_community.jpg') no-repeat center / cover;}
main .sec2 .tit-box { color: #fff; text-align: center;}
main .sec2 .tit-box p { letter-spacing: .8em; line-height: 1;}
main .sec2 .tit-box h2 { padding: 35px 0 80px; font-size: 40px;font-weight: 500; line-height: 1;}
main .sec2 ul { margin: 0 -15px;}
main .sec2 ul li { flex:1; margin: 0 15px; background: no-repeat center / cover; }
main .sec2 ul li a { position: relative; display: block;  padding: 95px 10px 100px; width: 100%; height: 100%; color: #fff; border: 1px solid #fff; text-align: center; backdrop-filter: blur(2px) brightness(.6); transition: .2s;}
main .sec2 ul li a h3 { position: relative; padding: 95px 0 10px; font-size: 25px; font-weight: 500; line-height: 1; background: no-repeat top center; }
main .sec2 ul li a h3:before { content:''; display: block; position: absolute; left:50%; top: 69px; transform: translateX(-50%); width: 35px; height:1px; background: #fff;}
main .sec2 ul li a p { font-size: 16px;}
main .sec2 ul li a:after { opacity: 0; content:''; display: block; position: absolute; top: -1px; right: -1px; transform: translate(10px,-10px); width: calc(100% + 2px); height: calc(100% + 2px); border: 4px solid #8b8075; transition: .3s;}
main .sec2 ul li a:hover:after { opacity: 1 ; transform: translate(0,0); }






main .sec2 ul li a:hover { backdrop-filter:blur(0) brightness(1);}
main .sec2 ul li:nth-of-type(1) { background-image: url('/img/hk/bg_community_news.jpg');}
main .sec2 ul li:nth-of-type(2) { background-image: url('/img/hk/bg_community_faq.jpg');}
main .sec2 ul li:nth-of-type(3) { background-image: url('/img/hk/bg_community_video.jpg');}
main .sec2 ul li:nth-of-type(4) { background-image: url('/img/hk/bg_community_mic.jpg');}
main .sec2 ul li:nth-of-type(1) h3 { background-image:url('/img/hk/ico_community_news.png');}
main .sec2 ul li:nth-of-type(2) h3 { background-image:url('/img/hk/ico_community_faq.png');}
main .sec2 ul li:nth-of-type(3) h3 { background-image:url('/img/hk/ico_community_video.png');}
main .sec2 ul li:nth-of-type(4) h3 { background-image:url('/img/hk/ico_community_mic.png');}

main .sec3 .inner { flex:1; position: relative; padding: 0 10px; background: no-repeat center / cover; }
main .sec3 .inner:after { content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,4,8,.7);}

main .sec3 .inner .box { position: relative; z-index: 2; width: 100%; max-width: 750px; color: #fff; }
main .sec3 .inner .box h2 { padding: 0 0 25px; font-size: 30px; font-weight: 500; }
main .sec3 .inner .box p { font-size: 16px; line-height: 1.5; font-weight: 300; word-break: keep-all;}

main .sec3 .company { background-image: url(/img/hk/bg_company.jpg);}
main .sec3 .customer { background-image: url(/img/hk/bg_customer.jpg);}
main .sec3 .company .box { margin: 76px 0 80px auto; }
main .sec3 .customer .box { margin: 76px auto 80px 0; padding-left: 13.2%}
main .sec3 .customer .box .link { position: absolute; right: 0; top: 0;}
main .sec3 .customer .box .link a { display: block; margin: 0 0 5px; width: 215px; height: 55px; color: #fff; text-align: center; line-height: 55px;  border: 1px solid #fff;}
main .sec3 .customer .box .link a:hover { background: #8b8075; border-color:#8b8075;}



@media (max-width:1199px){
    main .sec3 .customer .box { padding-left: 10px;}
    main .sec3 .customer .box .link a { width: 180px;}
}
@media (max-width:1024px){
    main .sec2 { padding: 100px 0;}
    main .sec2 .tit-box h2 {padding: 30px 0 70px; font-size: 38px;}
    main .sec2 ul { margin: 0 -5px; }
    main .sec2 ul li { margin: 0 5px;}
    main .sec2 ul li a { padding: 90px 10px;}
    main .sec2 ul li a h3 { font-size: 23px;}
    main .sec3 .inner .box { margin:  70px 0;}
    main .sec3 .inner .box h2 {font-size: 28px;}
    main .sec3 .customer .box .link { position: static; margin: 25px -5px -5px;}
    main .sec3 .customer .box .link a { display: inline-block; margin: 0 5px 5px; height: 50px; line-height: 50px; font-size: 16px; font-weight: 300;}
}
@media (max-width:768px){
    main .sec2 { padding: 90px 0;}
    main .visual .msg p { letter-spacing: 0.6em;}
    main .visual .msg .p1 { padding: 0 0 40px; margin: 0 0 40px;}
    main .visual .msg .p2 { font-size: 34px;}
    main .sec2 .tit-box p { letter-spacing: .7em; }
    main .sec2 .tit-box h2 { padding: 25px 0 60px; font-size: 36px; }
    main .sec2 ul li a { padding: 50px 10px; }
    main .sec2 ul li a h3 { padding: 90px 0 10px; font-size: 20px; background-size: 40px auto;}
    main .sec2 ul li a h3:before { top: 63px;}
    main .sec3 .inner .box { margin: 65px 0; }
    main .sec3 .inner .box h2 {font-size: 26px;}
    main .sec3 .inner .box br { display: none;}
    main .sec3 .customer .box .link a { width: 160px; height: 45px; line-height: 45px; }
}
@media (max-width:576px){
    main .sec2 { padding: 80px 0;}
    main .visual .msg p { letter-spacing: 0.4em;}
    main .visual .msg .p1 { padding: 0 0 35px; margin: 0 0 35px;}
    main .visual .msg .p2 { font-size: 32px; padding: 0 0 30px;}
    main .visual .scroll-down  { display: block;}
    main .sec2 .tit-box p { letter-spacing: .6em; }
    main .sec2 .tit-box h2 { padding: 25px 0 50px; font-size: 34px; }
    main .sec2 ul { flex-direction: column; margin: 0 0 -15px;}
    main .sec2 ul li { margin: 0 0 15px;}
    main .sec2 ul li a { padding: 45px 10px; }
    main .sec2 ul li a h3 { padding: 80px 0 10px }
    main .sec2 ul li a h3:before { top: 58px; }
    main .sec2 ul li a p { font-size: 15px;}
    main .sec3 .flex { flex-direction: column; margin: 0 ;}
    main .sec3 .flex .inner { margin: 0;}
    main .sec3 .inner .box { margin: 55px 0; }
    main .sec3 .inner .box h2 {padding: 0 0 15px;  font-size: 24px; }
    main .sec3 .inner .box p { font-size: 15px;}
}

@media (max-width:480px){
    main .visual .msg p { letter-spacing: 0.4em;}
    main .visual .msg .p1 { padding: 0 0 50px; margin: 0 0 30px;}
    main .visual .msg .p2 { font-size: 24px;}
}