@charset "utf-8";
/* CSS Document */
html,body,div,form,img,ul,ol,li,dl,dt,dd{margin:0px; padding:0px;}
body{margin:0 auto;padding:0;border:0;}
select,input,textarea{vertical-align:middle; padding:0; margin:0;}
textarea{resize:none;}
img{border:0;}
ol,ul,li{list-style:none;}
a{color: #000; text-decoration:none;}
a,img,input,textarea,select,button,area{outline:none;}
*{-webkit-box-sizing: border-box; box-sizing: border-box;}

body{/*font-family: "century gothic";*/ background: #f6f6f6;}

.zh-pc{max-width: 1920px; min-width: 300px; margin: 0 auto;}

.dsp-table{display: table; width: 100%;}
.dsp-table.vt .th,.dsp-table.vt .td{vertical-align: top;}
.dsp-table .tr{display: table-row;}
.dsp-table .th{display: table-cell; vertical-align: middle;}
.dsp-table .td{display: table-cell; vertical-align: middle;}
.dsp-table .min{width: 1%; white-space: nowrap;}
.zh-row::before,.zh-row::after{content: ""; display: table;}
a:hover{color: #0074c8;}

/* .obj-cover{width: 100%; height: 100%; object-fit: cover;}
.obj-center{object-position: center center;}
.obj-bg{position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
 */

.pc-header.on{box-shadow: 0 3px 8px rgba(0,0,0,.1); transition: .3s;}
.pc-header.on,.pc-header.hover{background: rgba(255,255,255,.95);}
.pc-header.on .pc-logo::before,.pc-header.hover .pc-logo::before{ background: url(../images/tecno-logo-b.png) no-repeat; background-size: cover;}
.pc-header.on .zh-nav h3 a,.pc-header.hover .zh-nav h3 a{color: #000;}

.btn-wrap a{display: block; width: 200px; line-height: 3em; font-size: 16px; text-align: left; background: #f0f0f0; transition: .3s;}
.btn-wrap a:hover{color: #fff; background: #0074c8;}
.btn-wrap a~a{margin-top: 30px;}
.btn-wrap a::before{content: ''; display: inline-block; vertical-align: middle; margin: -2px 10px 0 15px; width: 1.5em; height: 1.5em; transition: .3s;}
.btn-wrap .more{color: #0074c8; background: #c0e4ff;}
.btn-wrap .more::before{background: url(../images/icon-more-on.png) no-repeat; background-size: cover;}
.btn-wrap .compare::before{background: url(../images/icon-compare.png) no-repeat; background-size: cover}
.btn-wrap .more:hover::before{background: url(../images/icon-more-hover.png) no-repeat; background-size: cover;}
.btn-wrap .compare:hover::before{background: url(../images/icon-compare-hover.png) no-repeat; background-size: cover}

.copy-wrap{position: absolute; z-index: 2; text-align: center; font-size: 40px; color: #333;}
.copy-wrap.pt{top: 8%; left: 0; right: 0; transform-origin: top;}
.copy-wrap.pl{top: 50%; left: 80px; transform: translateY(-50%);}
.copy-wrap.pr{top: 50%; right: 80px; transform: translateY(-50%);}
.copy-wrap h1{margin: 0; line-height: 1.25em; font-size: 1em;}
.copy-wrap p{margin: .25em 0 0; line-height: 1.4em; font-size: .5em; font-weight: bold; opacity: .6;}
.copy-wrap small{display: block; line-height: 2.5em; font-size: .4em; font-weight: 100; opacity: .5;}
.copy-wrap a{display: inline-block; vertical-align: top; padding: 0 10px; line-height: 2.5em; font-size: .4em; font-weight: bold; color: #0074c8;}
.copy-wrap a::after{content: ''; display: inline-block; vertical-align: middle; margin: -2px 0 0 5px; width: .75em; height: .75em; background: url(../images/icon-arrow-b.svg) no-repeat center; background-size: cover;}
.copy-wrap a:hover{text-decoration: underline;}
.copy-wrap.cw p,.copy-wrap.cw small{opacity: 1;}
.copy-wrap.cw a{color: #fff;}
.copy-wrap.cw a::after{background: url(../images/icon-arrow-w.svg) no-repeat; background-size: cover;}

.zh-banner{position: relative; margin-bottom: 10px; overflow: hidden;}
.zh-banner img{display: block; width: 100%;}
.zh-banner .box{display: flex; align-items: center;}

.zh-promo{position: relative; margin-bottom: 10px;}
.zh-promo img{display: block; width: 100%;}
.zh-promo-list{overflow: hidden;}
.zh-promo-list .zh-row{margin: 0 -8px;}
.zh-promo-list .col{position: relative; float: left; width: 50%; padding: 8px;}
.zh-promo-s{position: relative; display: block; transition: ease-in-out .5s; overflow: hidden;}
.zh-promo-s:hover{box-shadow: 0 0 15px rgba(0,0,0,.2);}
.zh-promo-s img{display: block; width: 100%; transition: .3s;}
.zh-promo-s:hover img{transform: scale(1.05);}
.zh-promo-s .copy-wrap{ color: #666;}
.zh-promo-s h1{line-height: 30px; font-size: 24px;}
.zh-promo-s p{font-size: 16px; margin: 0; font-weight: normal; opacity: 1;}
.zh-promo-s .cw{padding-top: 30px; color: #fff;}

.cw{color: #fff;}



/******************************* app *******************************/
.app-header .hd{position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; padding: 8px; height: 52px; transition: .3s; background: #fff;
	min-width: 375px;}
.app-header .hd-btn{display: inline-block; vertical-align: middle; width: 36px; height: 36px;}
.app-header .hd .menu{position: relative; padding: 10px 7px;}
.app-header .hd .menu::before{content: ''; display: block; width: 22px; height: 15px; border-top: 2px solid #000; border-bottom: 2px solid #000;}
.app-header .hd .menu::after{content: ''; position: absolute; top: calc(50% - 1px); left: 7px; width: 22px; height: 2px; background: #000;}
.app-header .hd .logo{width: calc(100vw - 110px); background: url(../images/tecno-logo-b.png) no-repeat center; background-size: 100px;}
.app-header .hd .user{background: url(../images/icon-user-on.svg) no-repeat center; background-size: 22px;}
.app-header .hd .close{background: url(../images/icon-close-b.svg) no-repeat center; background-size: 16px;}
.app-header .hd .hd-search{width: calc(100vw - 110px); padding: 0 8px 0 36px; border: none; background: url(../images/icon-search-on.svg) no-repeat 10px center #f5f5f5; background-size: 18px;}
.app-header.on .hd{position: fixed; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06); width: 100%}
.app-header.on .menu::before{border-color: #000;}
.app-header.on .menu::after{background: #000;}
.app-header.on .logo{background: url(../images/tecno-logo-b.png) no-repeat center; background-size: 100px;}
.app-header.on .user{background: url(../images/icon-user-on.svg) no-repeat center; background-size: 22px;}
.app-menu{display: none; position: fixed; z-index: 11; top: 0; left: 0; right: 0; bottom: 0; background: #fff;}
.app-menu .hd{background: #fff;}
.app-menu .hd .user{background: url(../images/icon-user-on.svg) no-repeat center; background-size: 22px;}
.app-menu .bd{margin-top: 52px; padding: 0 8vw; height: calc(100vh - 52px); overflow-y: auto;}
.app-nav h3{position: relative; margin: 0; font-size: 16px;}
.app-nav h3::after{content: ''; position: absolute; top: 50%; right: 12px; width: 14px; height: 14px; background: url(../images/icon-arrow-g.svg) no-repeat; background-size: cover; transform: translateY(-50%) rotate(90deg); transition: .3s;}
.app-nav .on h3::after{transform: translateY(-50%) rotate(-90deg);}
.app-nav .nosub h3::after{transform: translateY(-50%) rotate(0deg);}
.app-nav h3 a{display: block; padding: 4vw 0; color: #666;}
.app-nav .sub{text-align: center; overflow: hidden;}
.app-nav .item{float: left; width: 50%; padding: 8px 0; font-size: 14px;}
.app-nav .item img{display: block; margin: 0 auto 6px; width: 7em; height: 7em;}
.app-nav .item span{display: block; line-height: 1.5em; font-size: 1em;}
.app-nav .item i{font-style: normal; font-size: .8em; color: #0074c8;}
.app-nav .btn-wrap a{max-width: 130px; line-height: 3.4em; margin: 0 auto; font-size: 11px;}
.app-nav .btn-wrap a::before{margin-left: 8px; margin-right: 4px;}
.app-nav .btn-wrap a~a{margin-top: 5vw;}

.app-main .copy-wrap.pt{top: 10vw;}
.app-main .copy-wrap{font-size: 24px;}
.app-main .copy-wrap p{font-size: 14px;}
.app-main .copy-wrap small{font-size: 13px;}
.app-main .copy-wrap a{font-size: 13px;}

.app-main .zh-banner .pt{top: 20vw;}
.app-main .zh-row{margin: -5px;}
.app-main .col{width: 100%; padding: 5px;}
/* .app-main .zh-promo-s{height: 84vw;} */
.app-main .zh-promo-s .copy-wrap.pt{top: 10vw;}
.app-main .zh-promo-s p{margin: 0.5em auto 0; line-height: 1.2em; font-size: 14px;}
.app-main .zh-promo-s .cw{padding-top: 0;}

.zh-collapse .sub{display: none;}
.zh-collapse li{border-bottom: 1px solid #ddd;}
.app-footer{padding: 0 8vw;}
.app-footer h3{position: relative; margin: 0; padding: 1em 0; color: #555; font-weight: 400; font-size: 17px;}
.app-footer h3::before,.app-footer h3::after{content: ''; position: absolute; top: 50%; background: #888; transition: .1s;}
.app-footer h3::before{right: 0; width: 9px; height: 1px;}
.app-footer h3::after{top: calc(50% - 4px); right: 4px; width: 1px; height: 9px;}
.app-footer li.on h3::before,.app-footer li.on h3::after{background: #0074c8; transform: rotate(45deg);}
.app-footer a{display: block; padding-bottom: 12px; line-height: 20px; font-size: 14px; color: #777;}
.app-footer .legal{padding: 30px 0;}
.app-footer .legal li{padding: 1em 0; font-size: 14px; color: #777; border-bottom: 1px solid #e5e5e5; background: url(../images/icon-arrow-g.svg) no-repeat right center; background-size: 6px;}

@media (min-width: 350px) {
	/* .app-main .copy-wrap{font-size: 33px;} */
	.app-nav .item{font-size: 16px;}
	.app-nav .btn-wrap a{max-width: 150px; line-height: 3.2em; font-size: 13px;}
}
@media (min-width: 450px) {
	/* .app-main .copy-wrap{font-size: 36px;} */
	.app-nav .item{font-size: 18px;}
}
@media (min-width: 550px) {
	/* .app-main .copy-wrap{font-size: 40px;} */
	.app-nav .item{width: calc(100% / 3);}
	
}