@charset "utf-8";
/*
Theme Name: Hytech CN
*/
@font-face {
    font-family: 'Outfit-Thin';
    src: url('fonts/Outfit-Thin.ttf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-ExtraLight';
    src: url('fonts/Outfit-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-Light';
    src: url('fonts/Outfit-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-Regular';
    src: url('fonts/Outfit-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-Medium';
    src: url('fonts/Outfit-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-SemiBold';
    src: url('fonts/Outfit-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-Bold';
    src: url('fonts/Outfit-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-ExtraBold';
    src: url('fonts/Outfit-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit-Black';
    src: url('fonts/Outfit-Black.ttf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



*,
*:before,
*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none;  -moz-user-select: none;}
html{background:none;-webkit-text-size-adjust:100%;height:100%;}
body{background:#ffffff;font-size:14px;color:#000000;font-family:'Outfit-Regular', Arial, Helvetica, sans-serif;}


/*Google Language Translator Css Start*/
body font{ vertical-align:baseline !important;}
/*Google Language Translator Css End*/

/*Page encryption Css Start*/
form.post-password-form{ background:#6c6c6c; width:600px; max-width:100%; text-align:center; padding:50px 20px; margin:0px auto; text-align:center;}
form.post-password-form .ppw-ppf-desc{ font-weight:bold; font-size:24px; text-align:center; color:#FFF; line-height:1.2;margin: 0 0 20px;}
form.post-password-form p label{ color:#FFF; font-size:16px; font-weight:normal; width:280px; max-width:100%; margin:0px auto; display: block; text-align:left; line-height:1.2;}
form.post-password-form p label input[type=password]{ display:block; width:100%; color:#000; height:40px; line-height:28px; margin-top:6px; padding:5px 10px;}
form.post-password-form input[type=submit]{text-transform:uppercase;background:#e35728;border-radius:5px;border:none;display:block;text-shadow:0px 0px 1px #e35728; color:#FFF; text-align:center;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;-webkit-appearance:none;cursor:pointer; width:140px; margin:10px auto 0px; -webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 6px rgba(0,0,0,0.2);box-shadow:0px 0px 6px rgba(0,0,0,0.2); height:42px; font-size:14px !important;}
form.post-password-form input[type=submit]:hover{background:#ff8e5c;color:#FFF;text-decoration:none;}
/*Page encryption Css End*/

a{text-decoration:none;outline-style:none;}
a:hover{text-decoration:none;}
p{line-height:160%;margin:0 0 20px;}
li{list-style:none outside none;}
strong,
b{font-weight: normal; }
em,
i{font-style:normal;}
strong em,
em strong{font-style:normal;font-weight:normal;}

img{max-width:100%;height:auto;vertical-align:middle;}
hr{clear:both;margin:40px 0;border:0;border-bottom:0;padding:0px;width:100%;background:#e1e0da;height:1px;}
pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}

svg{display:block;}

.left{float:left;}
.right{float:right;}
.clear{clear:both;height:0;font-size:0;width:100%;}
.alignleft{display:inline;float:left;margin:0 20px 20px 0;}
.alignright{display:inline;float:right;margin:0 0 20px 20px;}
.aligncenter{clear:both;display:block;margin:0 auto 20px;}
.alignnone{clear:both;display:block;margin:0 auto 20px;}
.tableBox{display:table;table-layout:fixed;width:100%;height:100%;}
.table_cellBox{display:table-cell;vertical-align:middle;}
.inner{max-width:1280px;padding-left:20px;padding-right:20px;margin:0 auto;}

input,
button,
textarea,
select{outline-style:none;}
.wrapper{width:100%;overflow:hidden;}

.flex{display: flex;justify-content: space-between; align-items: center;}

h2{font-size: 52px; font-family:'Outfit-Thin'; line-height: 110%;}

.hytech_button{display: inline-flex; justify-content: center; align-items: center; padding:24px 32px;border-radius: 4px;background: linear-gradient(257.27deg, #56BDBB -16.92%, #1B2A49 98.46%); color:#ffffff; font-family: "Outfit-Medium"; cursor: pointer;text-transform: uppercase;letter-spacing: 0.1em;line-height: 120%;overflow: hidden; position: relative;}
.hytech_button svg{transition: all 300ms;}
.hytech_button:hover svg{ transform: rotate(90deg);}
.hytech_button p{margin:0 15px 0 0 !important;}
@keyframes hytech_button_animation{0%{opacity:0}29%{opacity:0}30%{opacity:1}39%{opacity:1}40%{opacity:0}59%{opacity:0}60%{opacity:1}69%{opacity:1}70%{opacity:0}99%{opacity:0}to{opacity:1}}
.hytech_button p span{animation: hytech_button_animation linear forwards;}
.hytech_button:hover p span{animation: hytech_button_animation_hvoer linear forwards;}
@keyframes hytech_button_animation_hvoer{0%{opacity:0}29%{opacity:0}30%{opacity:1}39%{opacity:1}40%{opacity:0}59%{opacity:0}60%{opacity:1}69%{opacity:1}70%{opacity:0}99%{opacity:0}to{opacity:1}}


.arrow_button{width: 48px; height: 45px; display: flex; align-items: center; justify-content: center; background: rgba(139,139,139,0.8); position: relative;border-radius: 5px;}
.arrow_button svg{transform: rotateZ(135deg); position: relative; z-index: 1;}
.arrow_button svg path{transition: all 0.3s;}
.arrow_button::after{content: ''; position: absolute; top: 0; left: 0 ; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(257.27deg,  #56BDBB -16.92%, #1B2A49 98.46%); transition: all .3s;}
.arrow_button:hover::after{width: 100%;}
.arrow_button:hover svg path{stroke: #ffffff;}

.title p{margin:0 0 15px; text-transform: uppercase;}



.header.scroll{padding:45px 0 20px;}
.header.scroll .header_box{padding: 0; border-bottom: none;}
.header.scroll .header_logo_nosrocll{opacity: 0;}
.header.scroll .header_logo_srocll{opacity: 1;}

.header{position: fixed; z-index: 999; top: 0; width: 100%; background: linear-gradient(180deg, #010202 0%, rgba(1, 2, 2, 0) 100%);color:#ffffff;padding:45px 0 40px; transition: all 0.3s;}
.header_box{border-bottom: 2px solid rgba(255,255,255,0.5);padding:0 0 20px; transition: all 0.3s;}
.header_logo{position: relative;}
.header_logo_srocll{position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.3s;}
.header_nav_ul{margin: 0 40px 0 0 ; width: 670px;}
.header_nav_ul > li {position:relative; padding:10px 14px;border-radius: 8px;cursor: pointer; transition: all 0.3s; min-width: 100px;text-align: center;}
.header_nav_ul > li svg{margin:0 0px 0 3px;}

.header_nav_ul a{color:#ffffff;}
.header_nav_ul > li:hover{background: rgba(48, 114, 131, 0.8);}
.header_nav_ul > li:hover > a{color:#56BDBB;}
.header_nav_ul > li:hover .header_nav_icon{stroke:#56BDBB;}
.header_nav_ul > li.header_nav_hide:hover{background: none;}
.header_nav_ul > li.header_nav_hide > a{position: relative; z-index: 2;}

.header_nav_hide_ul{position: absolute; overflow: hidden; display: none; background: rgba(48, 114, 131, 0.8); width: 100%;left: 0; top: 0; line-height: 24px; padding:40px 10px 10px; border-radius: 8px;}
/* .header_nav_ul > li:hover .header_nav_hide_ul{display: block;} */
.header_nav_hide_ul a:hover{color:#56BDBB;}
.header_nav_hide_ul li{display: none;}

.header_language{cursor: pointer; padding-top:10px; position:relative;}
.header_language_icon_box{margin:0 8px 0 0; } 
.header_language:hover{color:#56BDBB;}
.header_language:hover .header_language_icon{stroke:#56BDBB;}
.header_language_nav{ padding-bottom:6px;}
.language_list{ position:absolute; display:none; left:0px; top:100%; background: rgba(48, 114, 131, 0.8); padding:8px; text-align: center; border-radius: 8px; min-width:80px;}
.language_list li{ padding:2px 0px;}
.language_list li a{ color:#fff; font-size:14px; text-transform:uppercase; text-decoration:none;}
.language_list li a:hover{ color:#56BDBB; text-decoration:none;}




.footer{background: #010202;}
.footer .footer_top{padding: 80px 0 40px;}
.footer .footer_top h2{color: #fff;margin-bottom: 20px;}
.footer .footer_top p{font-size: 16px;font-family: 'Outfit-Light';color: #fff;line-height: 1.3;margin: 0;}
.footer .footer_center{padding: 40px 0 30px;border-bottom: 2px solid #202121;position: relative; text-transform: uppercase;}
.footer .footer_center .footer_center_lists{display: flex;justify-content: center; margin:0 -15px;}
.footer .footer_center .footer_center_lists .footer_center_list_box{width: 25%;padding:0 15px;}
.footer .footer_center .footer_center_lists .footer_center_list_box h6{font-family: 'Outfit-SemiBold';color: #fff;font-size: 12px;line-height: 1.6;}
.footer .footer_center .footer_center_lists .footer_center_list_box p{color: #fff;font-size: 12px;line-height: 1.6; margin-bottom: 20px; font-family: 'Outfit-Light';}

.footer .footer_bottom{padding: 40px 0px;display: flex;justify-content: space-between;}
.footer .footer_bottom .footer_bottom_menu{width: 70%;}
.footer .footer_bottom .footer_bottom_menu>ul{display: flex;}
.footer .footer_bottom .footer_bottom_menu>ul>li{padding: 0 40px 0 10px;font-size: 14px;}
.footer .footer_bottom .footer_bottom_menu>ul>li:last-child{margin-right: 0px;}
.footer .footer_bottom .footer_bottom_menu>ul>li a{color:#fff;}
.footer .footer_bottom .footer_bottom_menu>ul>li a:hover{color:#70b8b9;}
.footer .footer_bottom .footer_bottom_version{width: 30%;text-align: right;color: #fff;font-size: 14px;margin: 0;}
.footer_nav_hide{position: relative;}
.footer_nav_hide:hover{background: rgba(48, 114, 131, 0.8);}
.footer_nav_ul > li:hover .header_nav_icon{stroke:#56BDBB;}
.footer_nav_ul > li.footer_nav_hide:hover{background: none;}
.footer_nav_ul > li.footer_nav_hide > a{position: relative; z-index: 2;}
.footer_nav_hide_ul{position: absolute; overflow: hidden; display: none; background: rgba(48, 114, 131, 0.8); width: 100%;left: 0; bottom: -10px; line-height: 24px; padding:10px 10px 40px; border-radius: 8px;}
.footer_nav_ul > li:hover .footer_nav_hide_ul{display: block;}
.footer_nav_hide_ul a:hover{color:#56BDBB;}



.footer .footer_center .footer_center_lists .footer_center_list_box p{font-family: 'Outfit-Thin';}
.footer .footer_center .footer_center_lists .footer_center_list_box a{color: #fff; text-decoration: none;}


.header_menu_btn{display:none;cursor: pointer;}
.header_menu_mobile{display:none;margin-top:10px; height: calc(100vh - 200px); position: relative;}
.header_menu_mobile .header_mobile_nav_ul{display: flex;flex-direction: column;}
.header_menu_mobile .header_mobile_nav_ul li{text-align:left;margin: 10px;transition: all .5s;}
.header_menu_mobile .header_mobile_nav_ul li a{display: flex;align-items: center;font-size:24px;color:#fff;font-family: 'Outfit-Thin';}
.header_menu_mobile .header_mobile_nav_ul li a svg{margin-left:6px;transform: rotate(0deg);margin-top: 4px;}
.header_menu_mobile .header_mobile_nav_ul li .header_mobile_nav_hide_ul{display:none;}
.header_menu_mobile .header_mobile_nav_ul li .header_mobile_nav_hide_ul a{font-size:20px;}
.header_menu_mobile .header_mobile_nav_ul .active a{color:#56bdbb;font-weight: bold;}
.header_menu_mobile .header_mobile_nav_ul .active a svg{transform: rotate(180deg);margin-top: 0px;}
.header_menu_mobile .header_mobile_nav_ul .active a svg path{stroke:#56bdbb;}
.header_menu_mobile .header_mobile_nav_ul .active ul li a{color:#fff;font-weight: normal;}
.header_menu_mobile .header_language{margin-top:80px;align-items: center; position: absolute; bottom: 0; left: 0;}
.header_menu_mobile .header_language span{margin-left:10px;}
.header_menu_mobile .header_language .header_language_nav{display:flex;}

.header.show{background:url(/wp-content/themes/hytechtech-tw/images/header_mobile_bg.png) !important;background-size: cover !important;background-repeat: no-repeat;}

.header_logo_a{display: inline-block; width: 100%;}
.header_logo_a img{width: 100%;}


.scroll_up{position: fixed; right: 40px; bottom: 100px; z-index: 100; display: none;}
.scroll_up .arrow_button{background: #ddd;}
.scroll_up .arrow_button svg{transform: rotateZ(225deg);}

@media(max-width:1280px) {
    h2{font-size:42px}

    .footer .footer_bottom .footer_bottom_menu>ul>li{padding:0 30px 0 10px;}
}
@media(max-width:880px){
    .header_logo{width:100px;height:48px; display: flex; align-items: end;}
    .header_nav{flex-direction: column-reverse; align-items: end;}
    .header_nav_ul{width:100%; margin: 0;}
    
}
@media(max-width:820px){
    .header_nav_ul > li{padding:10px 12px;min-width: 90px;}
}




@media(max-width:1100px){
    .footer .footer_bottom .footer_bottom_menu>ul>li{padding:0 20px 0 10px;}

    .footer .footer_center{padding-top:50px;}

}

@media(max-width:980px){
    .footer .footer_center .footer_center_lists{flex-wrap: wrap; justify-content: flex-start;}
    .footer .footer_center .footer_center_lists .footer_center_list_box{width:100% !important;margin:0 0 15px;}
    .footer .footer_bottom .footer_bottom_version{max-width: 190px;}

    .header_nav_ul > li{padding:10px;}
}

@media(max-width:910px){
    .footer .footer_bottom .footer_bottom_menu{display:none;}
    .footer .footer_bottom .footer_bottom_version{width:100%;text-align: left; max-width: 100%;}
}
@media(max-width:768px){

    .scroll_up{right: 20px; }

    h2{font-size:32px;}

    
    .header{background-size: cover;background-repeat: no-repeat;}
    /* .header_menu_mobile{height:360px;position: relative;} */
    .header_nav{display:none;}
    .header_menu_btn{display: block;}
    .header_box{}
    .header.show{height: 100vh;}


    .footer .footer_bottom .footer_bottom_menu ul li{margin-left:35px;}
    .footer .footer_bottom .footer_bottom_menu {display:none;}
    .footer .footer_top{padding-top:40px;}
    .footer .footer_top p{font-family: 'Outfit-Thin';}
    .footer .footer_center{padding-top:20px;display: flex;flex-direction: column-reverse;padding-bottom:0px;}
    .footer .footer_center .footer_center_bottom{position: relative;top:0px;right:0px;margin-bottom:20px;}
    .footer .footer_center .footer_center_lists{width: 100%;flex-direction: column;}
    .footer .footer_center .footer_center_lists .footer_center_list_box{width:100%;}
    .footer .footer_bottom {padding:16px 0px;}
    .footer .footer_bottom .footer_bottom_version{width:100%;text-align:left;}

    .footer .footer_center .footer_center_lists .footer_center_list_box p{margin:0 0 10px;}
}
@media(max-width:600px){
    .footer .footer_top h1{font-size:40px;}
}
@media(max-width:480px){
    .header{padding: 20px 0 25px;}
    .header_box{padding: 0 0 10px;}
}

@media(max-width:570px) {

    h2{font-size:30px;}
}