@font-face {font-family: 'Marcellus';
  src: url('../fonts/Marcellus-Regular.ttf');
  font-family: 'Taipei';
  src: url('../fonts/Taipei-Sans-TC-Beta-Regular-2.ttf');
}

*{margin: 0; padding: 0; border: 0; font-weight: 500; outline: none; list-style: none; text-decoration: none; box-sizing: border-box; }
body{position: relative; font-family: 'Marcellus', 'Taipei'; color: #939176;}
.header{position: fixed; top: 40px; z-index: 20; width: 100%}
.height_100{height: 100vh}
.top{width: 100%; border-top: solid 1px #fff; padding-top: 20px;}
.logo_left{float: left; width: 200px}
.nav{width: calc(100% - 200px); float: right; padding-top: 15px; padding-left: 8px; text-align: right;}
.shutu img {
    width: 33.33%;
    padding: 0 15px;
    float: left;
    box-sizing: border-box;
}
.nav li{display: inline-block; padding: 0 22px;}
.nav li a{font-size: 18px; color: #fff; transition: all 0.5s; position: relative;}
.nav li a:hover{color: #000}
.nav li .icon:hover{opacity: 0.6}
.icon{width: 28px; height: 22px; display: inline-block; background: url(../images/icon.png) no-repeat;}
.tiktok{background-position: 0 0}
.weixin{background-position: -30px 0; width: 30px;}
.sina{background-position:-60px 0;}
.nav li:last-child{ padding-right: 0; float: right; position: relative; }
.nav .active a:after{content:""; background:url(../images/logo_m.png) no-repeat; background-size:7px; display: block; width: 10px; height:10px; text-align: center; font-size: 30px; position: absolute; right: -15px; margin: 0 auto; top:0px; }

.height_100 .swiper-slide{position: relative;}
.swiper-pagination_home{ height: 40px;  text-align: right; position: initial !important;   padding-top: 20px;}
.swiper-pagination_home2{border-top: solid 1px #fff;}
.container2{width: 100%; padding:0 90px;}
.swiper-pagination-bullet{background: #fff;}
.border-top2{ position: absolute; top: 50%; transform: translateY(-50%); position: absolute; height: 30px; z-index: 10;}
.swiper_txt{float: left; line-height: 40px; padding: 0px 90px; padding-top:30px; font-size: 26px; color: #fff; font-weight: bold;     top: 50%;
    transform: translateY(-50%); position: absolute;}
.banquan2{position: fixed; bottom: 40px; z-index: 10;}
.banquan{border-bottom: solid 1px #fff; width: 100%;  padding-bottom: 25px;}
.banquan:after{content:""; display:block; clear:both;}
.b_left{float: left; font-size: 20px; color: #fff;}
.b_right{float: right;}
.b_right a{margin:0 5px}

.col-sm-4{width: 33.33%; float: left; padding: 0 35px;}
.head_bg{background: #94937a; top: 0; height: 100px;}
.head_bg .top{border: 0}
.row{margin: 0 -35px;}
.ny_nav li{float: left; line-height: 80px; margin-right: 90px;}
.ny_nav{overflow: hidden; padding-top: 130px; margin-bottom: 85px;}
.ny_nav ul{ border-bottom: solid 2px #94937a;}
.ny_nav ul:after{content:""; display:block; clear:both}
.ny_nav2{overflow:inherit}
.ny_nav li a{position: relative;}
.ny_nav li a{font-size: 24px; color: #94937a; opacity: 0.6}
.ny_nav li.active a{opacity: 1}
.design_li p{font-size: 18px; font-weight: bold; color: #94937a; padding-top: 15px; padding-bottom: 10px;}
.design_li span{font-size: 14px;  color: #94937a;}
.design_li{padding-bottom: 70px;}
.more{text-align: center; margin: 50px auto}
.cd-top{width: 58px; height: 58px; z-index: 1000; border-radius: 58px; opacity: 0; background: #97957c; display: none; text-align: center; color: #fff; line-height: 58px; position: fixed; bottom: 150px; right: 20px; transition: all 0.5s}
.cd-is-visible{opacity: 1; display:block}

.ny_foot{ position: initial; margin-bottom: 65px; }
.ny_foot .banquan{border-bottom: solid 2px #94937a;}
.ny_foot .b_left{color: #94937a}
.ny_foot .icon{background: url(../images/icon2.png) no-repeat;}

.ny_foot .tiktok{background-position: 0 0}
.ny_foot .weixin{background-position: -30px 0; width: 30px;}
.ny_foot .sina{background-position:-60px 0;}
.container3{padding: 0 145px;}
.abnav{font-size: 24px; color: #94937a; padding-top: 35px;}
.abnav span{float: right; font-size: 20px;}
.about_ny .about1 .row{margin: 0 -15px;}
.about_ny .about1 .col-sm-6{padding: 0 15px; width: 50%; float: left; line-height: 30px; color: #939176}
.about1{padding-top: 40px; overflow: hidden; padding-bottom: 50px;}
.line{border-top: solid 1px #939176; }
.about_ny .about1 .en_txt{font-size: 16px; line-height: 24px;}
.about_ny .about1 .wks-right{text-align:right}
.about_ny .about1 .wks-right b{font-weight:bold}
.about_ny .about1 .wks-right h1{font-size:60px; margin-top:40px}
.about2 .abnav{margin-bottom: 60px;}
.year{width: 165px; float: left;}
.n_js{float: left; width: calc(100% - 165px)}
.pinpai_lc li{overflow: hidden; padding-bottom: 30px; }
.year em{border-bottom: dotted 1px #939176; width: 110px; display: inline-block; position: relative; top: -5px;}
.about1 .abnav{padding-top: 5px;}
.js_tit{font-size: 24px; color: #939176; font-weight: bold; font-family: "Taipei"; padding:50px 0 40px 0;}
.mt60{margin-top: 60px;}
.top50{margin-top: 50px;}
.about4 .col-sm-2{width: 340px; float: left;}
.about4 .col-sm-9 .line{margin: 45px 0;}
.about4 .col-sm-9{width: calc(100% - 340px); float: left; font-family: "Taipei";  padding-left: 80px;}
.about4 .col-sm-9 p{font-family: "Taipei"; line-height: 30px; color: #939176;}
.ry_left{float: left; width: 50%; line-height: 36px; color: #939176}
.ry_right{float: left; width: 50%; text-align: right; line-height: 36px; color: #939176}
.csr_name{font-size: 22px; color:#939176; margin-top: 25px; }
.row2{padding-top: 80px;}
.ryjs{padding: 60px 0; color: #939176; line-height: 30px;}
.top100{margin-top: 100px;}
.linian h3{font-size: 42px; color: #939176;  letter-spacing:3px;}
.linian h2{font-size: 16px; font-weight: bold; padding-bottom: 35px;}
.linian p{line-height: 30px; margin-bottom: 65px;}
.video_list .col-sm-6{width: 50%; float: left; padding: 0 20px; margin-bottom: 60px;}
.video_list .row{margin: 0 -20px;}
.video_list .col-sm-6 img{width: 100%}
.video_list{padding: 75px 0 50px 0; overflow: hidden;}
.dizhi{width: 48%; float: left;}
.c_team,.c_jingyan{width: 26%; float: left;}
.dizhi h3{font-size: 100px; line-height: 1.1em; padding-bottom: 60px;}
.dizhi p{font-size: 48px; line-height: 64px;}
.ys_tr{padding: 50px 0 0px 0; overflow: hidden;}
.shu_t h3{font-size: 58px; padding-bottom: 15px;}
.shu_t p{font-size: 18px; padding-bottom: 70px;}
.map_fb{padding-top: 40px; line-height: 40px; padding-bottom: 55px;}
.map_fb li{background: url(../images/gou.jpg) no-repeat left center; padding-left: 35px;}
.contact{padding-top: 80px; overflow: hidden; padding-bottom: 150px;}
.contact_left{width: 65%; float: left; height: 485px; position: relative; overflow: hidden;}
.contact_right{width: 35%; float: left; padding-left: 70px;}
.contact_left img{position: absolute; min-height: 100%; min-width: 100%; width: auto; left: 50%; top: 50%; transform:translate(-50%,-50%);height: auto;}
.con_li h3{font-size: 32px;}
.con_li p{ font-family: "Taipei"; line-height: 1.5em}
.con_li{padding-bottom: 30px;}
.guanzhu{ padding-top: 80px;}
.gz_left{float: left;}
.guanzhu .ewm{float: right;}
.gz_left ul{background: url(../images/con_icon.jpg) no-repeat left 9px; line-height: 34px;}
.gz_left ul li{ padding-left: 50px; cursor: pointer;}
.news_ny{font-family: "Taipei"; line-height: 1.5em}
.list_top{padding-top: 100px; padding-bottom: 60px;}
.news_ny .col-sm-6.design_li{width: 50%; float: left; padding: 0 20px;}
.news_ny .container .row{margin: 0 -20px;}
.news_ny .col-sm-6.design_li{padding-bottom: 100px;}
.height_100 .swiper-slide img{display: none}

.videolist { position:relative; }
.videolist:hover{ cursor: pointer; }
.videoed { display:none; width:50px; height:50px; position: absolute; left:45%; top:45%; z-index:99; border-radius:100%; }
.videos{ display:none; border: 1px solid #080808; position:fixed; left:50%; top:50%; margin-left:-500px; margin-top:-280px; z-index:100; width:1000px; height:560px; z-index: 1000; }
.vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; z-index: 100;}
#video222{transform: translate(-50%,-50%); position: fixed; top: 50%; left: 50%;z-index: 100;}
.video_div{    width: 100%;
    height: 100vh;
    background: rgba(151,149,124,0.8);
    position: fixed;
    left: 0;
    top: 0;z-index:99;}
.ny_foot2 .icon{position:relative;}
.ny_foot2 .icon img{display:none; position: absolute; bottom:20px; left: 50%; transform: translateX(-50%); width:200px; max-width:initial}
.gz_left ul li:hover img,.ny_foot2 .icon:hover img{display:inline-block}
.gz_left ul li img{display:none;position: absolute; bottom:20px; left: 50%; transform: translateX(-50%); width:200px; max-width:initial}
.gz_left ul li{position:relative;}
.left222 .xia{display:none}
.right222 .shang{display:none}
.ny_nav .title-zy{width:80px; float:right;}
.title-zy .left222{float:right;}
.title-zy .right222{float:left}
.title-zy span{font-size:40px;color: #94937a; line-height:80px;}
.ny_nav2 .active > a:after{content:""; background:url(../images/logo_m2.png) no-repeat; background-size:7px; display: block; width: 10px; height:10px; text-align: center; font-size: 30px; position: absolute; right: -15px; margin: 0 auto; top:0px; }
.ny_nav li .erji a{font-size:18px; color: #94937a; margin:0 30px; display: inline-block;opacity: 0.6;}
.ny_nav li .erji a:first-child{margin-left:0}
.ny_nav li a:hover{opacity:1}
.erji {display:none; position: absolute; left:0}
.ny_nav li.active .erji{display:block}
.ny_nav ul{position: relative;}
.ny_nav li .erji a.active{opacity:1}

.pagi {
  line-height: 100%; text-align: center; 
}
img{max-width:100%}
.pagi a {
  display: inline-block; min-width: 30px; margin: 0 3px; background: #fff; padding:7px 10px; font-size: 14px; color: #666; border: #eee 1px solid; cursor: pointer; vertical-align: middle
}
.pagi a:last-child {
  border-right: #eee 1px solid
}
.pagi a.on {
  background: #94937a; color: #fff;
}
.swiper_vcasa{margin:95px 0; padding:0 90px; position: relative;}
.swiper-button-prev:after,.swiper-button-next:after{color:#94937a}
.swiper_vcasa2 .swiper-button-prev:after,.swiper_vcasa2 .swiper-button-next:after,.swiper_vcasa3 .swiper-button-prev:after,.swiper_vcasa3 .swiper-button-next:after{color:#fff;}
.swiper_vcasa2 .swiper-button-prev,.swiper_vcasa3 .swiper-button-prev{left:50px}
.swiper_vcasa2 .swiper-button-next,.swiper_vcasa3 .swiper-button-next{right:50px}
.mySwiper3 span{position: absolute; z-index: 3;left: 50%; top: 50%; color: #fff; font-size: 28px; transform:translate(-50%, -50%)}
.news_ny{color:#999}
.works_detail img{width:100%}
.videolist{position:relative; overflow:hidden}
.videolist p{position:absolute; bottom:-104px; left:20px; color:#fff; opacity:0; transition: all 0.5s; width:calc(100% - 40px); background: rgba(148,147,122,0.4); padding:20px 30px}
.videolist:hover p{opacity:1; bottom:4px}

@media (max-width: 1600px){
	
}
@media (max-width: 1560px){
  .dizhi h3 {font-size: 60px;}
  .dizhi p {font-size: 28px; line-height: 44px;}
  .shu_t p {font-size: 16px; padding-bottom: 30px;}
  .shu_t h3 {font-size: 38px;}
}
@media (max-width: 1200px){
	.top #navToggle {
		height: 100%;
		padding: 9px 15px; padding-top: 10px;
		margin-right: -15px;
		display: inline-block;
		float: right;position: relative; z-index: 21;
	}
	.top #navToggle span {
		position: relative;
		width: 28px;
		height: 2px;
		margin-top: 19px;
	}
	.top #navToggle span:before,
	.top #navToggle span:after {
		content: '';
		position: relative;
		width: 100%;
		height: 2px;
		left: 0;
	}
	.top #navToggle span,
	.top #navToggle span:before,
	.top #navToggle span:after {
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		-o-transition: 0.3s;
		transition: 0.3s;
		display: block;
		background: #fff;
	}
	.on2 #navToggle span, .on2 #navToggle span:before, .on2 #navToggle span:after{background: #fff;}
	.top #navToggle span:before {
		top: 8px;
	}
	.top #navToggle span:after {
		bottom: 10px;
	}
	.top #navToggle.open span:before {
		top: 10px;
		-webkit-transform: translateY(-11px) rotate(-45deg);
		-moz-transform: translateY(-11px) rotate(-45deg);
		-ms-transform: translateY(-11px) rotate(-45deg);
		-o-transform: translateY(-11px) rotate(-45deg);
		transform: translateY(-11px) rotate(-45deg);
	}
	.top #navToggle.open span:after {
		bottom: 12px;
		-webkit-transform: translateY(10px) rotate(45deg);
		-moz-transform: translateY(10px) rotate(45deg);
		-ms-transform: translateY(10px) rotate(45deg);
		-o-transform: translateY(10px) rotate(45deg);
		transform: translateY(10px) rotate(45deg);
	}
	.top #navToggle.open span {
		background: none;
	}
	.top #navToggle.open span:before,
	.top #navToggle.open span:after {
		background: #fff;
	}
	.nav{display: block;background: rgba(147,145,118,0.6); position: fixed; width: 100px; height: 100%; right: 0; top: 0; padding: 0;}
	.nav li a{font-size:15px;}
	.nav li{padding:0 10px}
	.nav li{width: 100%; text-align: left; line-height: 50px;}
	.nav ul{display: inherit; padding-top: 140px;}
	.nav .active a:after{bottom: -35px}
	.container2,.container3{padding: 0 15px}
	.nav li:last-child{padding-right: 22px;}
	.swiper-pagination_home2{display: none}
	.header{top: 20px}
	.header .top{border:0; padding-top:0}
	.height_100 .swiper-slide img{height: 100%; width: auto; display: block;}
	.head_bg{top: 0; padding-top:20px; height: 80px;}
  .swiper_txt{padding:0 15px; display:none}
  .logo_left img{height:35px;}
  .top #navToggle{padding-top:0}
  .ny_nav li a{    font-size: 18px;}
  .design_li p{font-size: 16px;}
}
@media (max-width: 768px){
	.video_list .col-sm-6{width: 100%}
	.about4 .col-sm-2,.about_ny .about1 .col-sm-6{width: 100%}
	.about4 .col-sm-9{width: 100%; padding-left: 0}
	.ry_left,.ry_right{width: 100%; text-align: left;}
	.dizhi h3{font-size: 40px;}
	.dizhi p{font-size: 28px; line-height: 2em; padding-bottom: 30px;}
	.shu_t h3{font-size: 48px;}
	.shu_t p{padding-bottom: 30px;}
	.contact_right,.contact_left,.c_team, .c_jingyan,.dizhi{width: 100%}
	.contact_right{padding-left: 0}
  .b_left span{display:block}
	.contact_left{ margin-bottom: 30px;}
	.ny_nav {padding-top: 100px;}
	.news_ny .col-sm-6.design_li{width: 100%; padding-bottom: 40px;}
	.ny_foot .icon,.icon{width: 18px; height: 22px; background-size: auto 18px}
	.ny_foot .weixin,.weixin{background-position: -22px 4px; width: 24px;}
	.ny_foot .tiktok,.tiktok{background-position: 0 4px}
	.ny_foot .sina,.sina{background-position:-49px 4px; width: 20px;}
	.b_left span,.b_left{font-size: 14px !important;}
  .ny_nav li .erji a{margin:0 10px}
	.abnav{font-size: 18px;}
	.abnav span{float: initial;}
	.col-sm-4.design_li,.n_js,.year{width: 100%}
	.year em{width: calc(100% - 50px)}
	.ny_nav li{margin-right: 20px;}
	#video222{width: 100% !important}
  .swiper_vcasa {
    margin: 35px 0;}
  .about_ny .about1 .wks-right {text-align: center;}
  .swiper_txt{top:45%}
}