@font-face{font-family:HelveticaNeue;src:url("../font/SourceHanSansCN-Regular.otf");src:url("../font/SourceHanSansCN-Regular.otf-#iefix") format('embedded-opentype')}

@font-face {
    font-family: "AlpinaCondensed";
    src:  url("../fonts/GT-Alpina-Condensed-Thin.woff2") format("woff2"),
    url("../fonts/GT-Alpina-Condensed-Thin.woff") format("woff");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "HaptikRegular";
    src:  url("../fonts/GT-Haptik-Regular-2.woff2") format("woff2"),
    url("../fonts/GT-Haptik-Regular-2.woff") format("woff");
    font-style: normal;
    font-weight: 400;
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1;}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
pre{font-size:12px}
/*body,html{height:100%}*/
div{position:relative}
#site{width: 100%;overflow: hidden;}
.dn{display:none}
.db{display:block}
.dib{display:inline-block}
.fl{float:left}
.fr{float:right}
.h{width:100%}
.ov{overflow:visible}
b{font-weight:700}
.mt{margin-bottom:20px}
.mb{margin-bottom:20px}
html body,html input,html select,html textarea{font-family:HaptikRegular,sans-serif;font-weight:400;font-size:15px;line-height:19px}
html.zn body,html.zn input,html.zn select,html.zn textarea{font-size:14px;line-height:21px}
@media screen and (min-width:768px){html body,html input,html select,html textarea{font-size:16px;line-height:20px}
    html.zn body,html.zn input,html.zn select,html.zn textarea{font-size:14px;line-height:22px}
}
a{color:inherit;text-decoration:none}
img{display:block}
button{background:0 0;border:none;cursor:pointer;padding:0;margin:0;font-family:inherit;font-size:inherit}
button:focus{outline:0}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;border-radius:0}
input,select,textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:0;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input{color:#000;background:0 0;border:none}
input[type=checkbox]{display:none}
input[type=checkbox]+label:before{font-family:Icons;display:inline-block;content:"\f096";width:22px;padding-left:1px}
input[type=checkbox]:checked+label:before{content:"\f046"}
select{color:#000;background:0 0;border:2px solid;width:100%;padding:13px 10px 12px}
.select:after{content:"\f0d7";font-family:Icons;color:#000;padding:6px 4px 2px;position:absolute;right:10px;top:21px;z-index:1;text-align:right;width:25px;pointer-events:none}
label{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.clear { zoom:1; }
.clear:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

header{position:fixed;top:0;left:0;width:100%;overflow:visible;background:#fff;z-index:104;padding:15px 30px;display:flex;min-height:50px;line-height: 30px;}
.logowrap{flex:50%;align-self:start;font-size: 0;line-height: 1;}
.logowrap a{display:block;font-family: HaptikRegular;font-size:22px;font-weight: 400;}
.logowrap .logo{background-repeat:no-repeat;font-weight:400;height: 40px;line-height: 40px;font-size: 0;display: inline-block;}
.logowrap .logo img{max-height: 100%;}
.logowrap .logo.logo-zn{margin-top:0;background-position:left 1px;}
.logowrap .logo.logo-en{margin-top:1px;background-position:left 0;font-size:28px}

.mainnavi{flex: 50%;align-self:start;margin-right:1%;}
.mainnavi ul{display: flex;}
.mainnavi ul li{flex: 1;text-align: left;}
.mainnavi ul li a{font-size:16px;font-family: HaptikRegular;font-size:28px;}
.mainnavi ul li a:hover{text-decoration: none;color:#0044ff;}
.mainnavi ul li a.active{color:#0044ff;}
#mainnavi .paa{opacity: 0;display: none;}

footer,.footer{width:100%;overflow:visible;background:#fff;z-index:4;padding:15px 30px;display:flex;color:#000;font-family: HaptikRegular;font-size:14px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}
footer .l,.footer .l{flex:65%;text-align:left;}
footer .r,.footer .r{flex:35%;text-align:right;}

.expanded{display:block!important}
.menu-icon{opacity:0;background:url("../img/menu-open.png")no-repeat;display:inline-block;width:18px;height:13px;background-size:contain;position:absolute;top:25px;right:20px}
.menu-icon.close{background:url("../img/menu-close.png") no-repeat;display:inline-block;width:16px;height:16px;background-size:contain;position:absolute}

.include{position:relative;margin-top:75px;}
.paa{display:flex;padding:15px 30px}
.index-paa{padding-top:50px;}
.paa .free{flex:50%;align-self:start;}
.paa .text{flex:50%;align-self:start;margin-right:1%;text-align: left;line-height: 1;}
.paa .text a:hover{text-decoration: none;color:#0044ff;}

.about .paa{margin-top:120px;}
.about .free{font-size:36px;font-family: AlpinaCondensed;line-height:initial;word-break: break-word}
.about .free a:hover{text-decoration: none;color:#0044ff}
.about .free a.qrcode{position: relative;}
.about .free a.qrcode img{
    position: absolute;top:-133px;left:-18px;width: 136px;height:136px;z-index: 100;display:none;
}

.about .project{
    display: flex;
    margin-top:70px;
    padding-top:10px;
}
.about .awards,.about .publish{
    flex: 1;
    color:#666;
    font-size:14px;
    line-height: 1.5;
    text-align: left;
    margin-left:30px;
    word-break: break-word
}

.project{padding:110px 0 10px 0;}
.project .project-item{margin-top:25px;z-index: 100}
.project .project-item.size_1{width: 100%;}
.project .project-item.size_2{float:left;width: 49%;}
.project .project-item.size_2:nth-child(2n + 0){float: right;}
.project .project-item.size_2_2{float:right;width: 49%;}
.project .project-item .title{font-size:28px;color:#000;font-family:AlpinaCondensed;padding:0 30px;line-height:initial;font-weight: 300; }
.index-project .project-item .title{font-size:68px;}
.detail-project .project-item.size_2,.detail-project .project-item.size_2_2{width: 49.5%;}
.project .project-item .con{
	text-align: center;
}
.project .project-item .con img{width: 100%;}
.project .project-item a{
	display: block;
	font-size: 0;line-height: 1;
}
.detail-project .project-item .con img{width: initial;max-width: 100%;display: inline-block;}
.details .top-con{width: 100%}
.details .top-con .details-img img{width: 100%}
.details .details-con{display: flex;padding:15px 30px;}
.details .details-con p{color:#000;font-size:14px;line-height: 1.5;font-family:HaptikRegular;}
.details .details-con .details-con-l{flex: 50%;text-align: left}
.details .details-con .details-con-r{display:flex;flex: 50%;}
.details .details-con .details-con-r .details-con-r-l,
.details .details-con .details-con-r .details-con-r-r{flex: 1;}
.details .paa .text{font-size:50px;line-height: inherit;line-height: 1;margin:40px 0 10px 0;font-family:AlpinaCondensed;}
.details .project{padding-top:0;}

.products-list .project{padding:30px 30px;padding-top:110px;width: 102%;font-size: 0;}
.products-list .project .project-item{margin-top:30px;float: inherit !important; width: 48%;margin-right: 2%;display: inline-block;vertical-align: top;}
.products-list .project .project-item .title{margin-left:0;padding: 0 !important;}

@media screen and (max-width:1024px){
    header {padding:15px 15px;}
    footer,.footer {padding:15px 15px;position: static !important;}
    footer .r,.footer .r{text-align:right;}
    .footer span{
        white-space: nowrap;
        font-size: 12px;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.5);
    }
    .logowrap{z-index: 15;}
    .menu-icon{opacity:1;z-index: 15;}
    #mainnavi{display:none;z-index:11;
        background:#fff;width:100%;text-align:center;padding-bottom:20px;
        height:100%;min-height:100%;max-width:100%;position:fixed;left:0;top:0}
    #mainnavi .paa{
        display: block;
        opacity: 1;
        margin-top:60px !important;
        font-size:12px;
        line-height: 1.3;
    }
    #mainnavi>ul{opacity:0;width:100%;text-align:center;display: block;}
    #mainnavi>ul li{
        display: block;
        text-align: center !important;
        margin-top:22%;
    }
    .mainnavi ul li a{font-size:46px;font-family: AlpinaCondensed;color:#000 !important;}
    .logowrap .logo.logo-en{font-size:22px;}
    .paa{padding:15px 15px;}
    .paa .free{flex:0;}
    .paa .text{text-align: left;flex: 100%;line-height: 1;font-size:12px;}
    .index-project{padding-top:60px;}
    .project .project-item{margin-top:10px;}
    .project .project-item .title{font-size:22px;padding: 0 15px;}
    .index-project .project-item .title{font-size:34px;}
    .project .project-item.size_2, .project .project-item.size_2_2{width: 100%;float:none;}
    .products-list .project .project-item{margin-top:15px;}

    .about .paa{margin-top:120px;}
    .about .paa .free{flex: 100%;font-size:28px;line-height: 1.2;font-family:AlpinaCondensed;}
    .about .project{
        display: block !important;
        padding-right:20px;
        margin-top:20px;
        padding-top:10px;
    }
    .about .awards, .about .publish{margin-left:15px;font-size:12px;}
    .about .project .publish{margin-top:20px;padding-top:20px;}


    .details .details-con{display: block;padding:15px 15px;}
    .details .details-con .details-con-r{margin-top:20px;}
    .details .details-con .details-con-r .details-con-r-l{flex: 65%;}
    .details .details-con .details-con-r .details-con-r-r{flex: 35%;margin-left:10px;}
    .details .details-con p{line-height: 1.2;font-size:12px;}
    .details .paa .text{font-size:28px;margin-top:0px;margin-bottom:0px;}


    .products-list .project{padding:30px 15px;}
}
@media screen and (max-width:750px){
	.logowrap .logo{height: 30px;line-height: 30px;font-size: 0;}
	.about .paa{margin-top:100px;}
	.sf-project{
		padding: 50px 0;
	}
	footer .l, .footer .l{
		width: 100%;
		text-align: center;
	}
	footer .r, .footer .r{
		width: 100%;
		text-align: center;
	}
	footer, .footer{
		display: block;
	}
	.project .project-item .title{
		font-size: 22px;
		padding: 5px 10px;
	}
}

@media screen and (min-width:1440px){
}

@media screen and (min-width:1920px){
	
    .logowrap .logo{height: 50px;line-height: 50px;font-size: 0;}
    .logowrap .logo.logo-en{
        font-size:50px !important;
    }
    .mainnavi ul li a{
        font-size:50px !important;
    }
    .paa .text{
        font-size: 26px !important;
    }
    .index-project{padding-top:100px;}
    .index-project .project-item .title,.index-project-title{
        font-size:120px !important;
    }

    .details .details-con p{
        font-size:26px !important;
    }
    .details .paa .text{
        font-size:90px !important;
    }

    .index-paa,.products-list .project{padding-top:170px !important;}
    .project{padding-top:140px;}

    .about .free{font-size:90px;}
    .about .project{padding-top:70px !important;}
    .about .paa{margin-top:150px;}

}

.mgTop{
	display: block;
    width: 43px;
    height: 43px;
    background: url(../img/mgTop.png) no-repeat center;
    background-size: cover;
    position: fixed;
    right: 3.5%;
    bottom: 15%;
    opacity: .33;
    z-index: 999;
    cursor: pointer;
}
.mgTop:hover{
	opacity: 1;
	transition: all .3s;
	-webkit-transition: all .3s;  
}
@media screen and (max-width:1200px){
	.mgTop{
		width: 35px;
		height: 35px;
		opacity: 1;
		right: 15px;
		bottom: 30px;
	}
}
.md-show{
	display: none;
}
@media screen and (max-width:750px){
	.mgTop{
		display: none;
	}
	.pc-show{
		display: none;
	}
	.md-show{
		display: block;
	}
}