﻿@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Raleway:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Teko:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Arya&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap');
/* CSS Document */
body{background:#f6f6f6;}
body.default{background:#2b2b2b; color:#fff;}
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
/*responsive slick*/
button{outline: none; cursor: pointer;}
/*nav*/
.nav{ text-align: right; padding-top:1.5em;}
.nav ul li a{color:#fff; position:relative; overflow: hidden;}
.nav ul li a span{transition:.3s; }
.nav ul li a::before{content:attr(data-text); position:absolute; top:1.3em; transition:.3s; opacity:0;}
.nav ul li a:hover span{opacity:0;}
.nav ul li a:hover::before{top:0; opacity:1;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{padding-top:10px; transition:.3s; background:rgba(0,0,0,1);}
#header .page{padding:0; max-width:100%;}
#header.show{ padding-top:0;}
#header.show .nav{border-bottom:none;}
#header.show img{filter:brightness(0 0 5px rgba(255,255,255,1));}
.nav ul li a.hit{background:#006699; color: #fff;}
.default #header{background:rgba(0,0,0,0); transition:.3s;}
.default #header.show{background:rgba(0,0,0,1);}
.default .logo{opacity:0; transition:.3s;}
.default .logo.show{opacity:1;}
/*default banner*/
.default #pic{width:100%; height:90vh; position:fixed; top:0; left:0; z-index: -1;}
/*default use*/
.default #defaultimg{height:90vh; z-index:999;}
.default #defaultimg .ll::before{content:""; background:url(images/logo.png) no-repeat center; width:180%; height:100px; position:absolute; top:0; left:0; z-index:999; background-size:100%;}
.default #defaultimg .ll::after{content:""; background:#2b2b2b; width:100%; height:40vh; z-index:-1; position:absolute; left:80%; top:0;}
.default #defaultimg .ll{position:absolute; top:0px; left:0; z-index: 999; background:#2b2b2b; width:10%; height:90vh; text-align: center; }
.default #defaultimg .ll img{transform:translateY(120px);}
.scrollbtn{position:absolute; bottom:10px; width:50px; height:50px; background:rgba(220,197,127,0.6); color:#013b73; cursor: pointer; left:50%; transform:translateX(-50%); z-index: 100; line-height:120%; display:inline-block; text-align: center; border-radius: 100%; padding-top:12px; font-size:12px;}
.dtitle{margin: 3em 0 2em 0;text-align: center;font-size: 32px;font-weight: normal;letter-spacing: 5px;}
.dtitle img{max-width:100%; height: auto;}
.d2{float:right;}
.d2 h4{text-align: center;}
.d2 .rr{padding:0 20% 0 2em; font-size:13px; line-height: 160%; color:#c3c3c3; position:relative; max-height:40em; overflow: hidden;cursor:pointer;}
.d2 .rr p{margin: 0 0 1em 0;}
.d2 .rr::before{content:"更多>>"; padding-top:3em; padding-left:2em; width:60%; height:2em; background:linear-gradient(rgba(39,39,39,0),rgba(39,39,39,1)); bottom:0; left:0; position:absolute;  color:#ccc;}
.d2 .rr::after{content:""; width:40%; height: 100%; position:absolute; right:-5%; top:0; /*background:#2f2f2f;*/}
.d3 .col-3{position:relative; line-height:0; cursor: pointer; overflow: hidden;}
.d3 .col-3:hover div::before{background:url(images/icon-showmore.png) no-repeat center; background-size:30%;}
.d3 .col-3:hover span{opacity:0;}
.d3 .col-3:hover div::after{opacity:0;}
.d3 .col-3 div span{z-index:10; position: absolute; top:5%; left:10%;}
.d3 .col-3 div,.d3 .col-3 div::before,.d3 .col-3 div::after, .d3 .col-3 div span{transition:.5s;}
.d3 .col-3 div{position:absolute; top:0; left:0; width:100%; height:100%; font-size:24px; line-height: 120%; font-family: 'Oswald', sans-serif; font-weight: 400; letter-spacing: 1px;}
.d3 .col-3 div::before{content:""; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.6) url(images/icon-showmore.png) no-repeat center; background-size:0; top:0; left:0; line-height: 150%;}
.d3 .col-3 div::after{content:"COLLECTION"; position:absolute; color:#fff; bottom:10%; left:0; line-height: 150%; transform:rotate(-90deg); font-family: 'Teko', sans-serif; font-size: 24px; letter-spacing: 5px;}
.d4{padding-bottom:6em;}
.d4 .page{max-width:1200px;}
.d4 .list{padding:2em 4em; text-align: center; font-size:14px; line-height: 180%;}
.d4 .list p.more{margin-left:50%; margin-top:4em;}
.d4 .list p.more a{font-size:12px; color:#616161; border:1px solid #fff; display:inline-block; padding:0.3em 0.5em; letter-spacing: 0; width:auto; transform:translateX(-50%);}
.d4 .list p.more a:hover{background:#fff; color:#000;}
/*content*/
.toplist{text-align:center;}
.toplist ul{margin:0; padding:0; text-align:center; list-style: none;}
.toplist ul li {display:inline-block; padding:0.5em; text-align: center;}
.toplist ul li a{display:inline-block; height:auto; padding:0.3em 0.5em; color:#333; border:1px solid #333;}
.toplist ul li a:hover{background:#333; color:#fff;}
.toplist ul li a.hit{background:#333; color:#ccc;}
.banner{position:relative;}
.banner::before{content:""; width:100%; height:150px; position:absolute; top:0; left:0; background:linear-gradient(rgba(0,23,64,1),rgba(0,23,64,0));}
.banner::after{content:""; width:100%; height:50px; position:absolute; bottom:0; left:0; background:linear-gradient(rgba(0,23,64,0),rgba(0,23,64,1));}
.tit{font-size:28px; color:#4f432b; font-family: 'Oswald', sans-serif; font-weight: 400; letter-spacing: 2px; margin:0 0 1em 0;}
h1.subject{font-size:24px;}
.content{position:relative;}
.content.typec .page{max-width:1200px;}
.content.typec .tit{text-align:center;}

.prodetail .rr,.prodetail .ll{float:right;}
.searchbar{padding: 0 0 1em 0;float: left;}
.searchbar input {outline: none;height: 30px;border: 1px solid #ccc;width: 100%;border-radius: 5px;}

.main{padding-left:2em;}
.typec .side, .typec .main{padding-left:1em; padding-right:1em;}
.content.typec.width .page{max-width:95%;}
p.more{text-align:center;}
p.more a{display:inline-block; padding:0.5em 2em; border:2px solid #000; color:#333; font-size:13px;}
p.more a:hover{background:#000; color:#fff;}
/*list*/
.list{padding:1em;}
.list h3{font-weight:normal; margin:0; font-family: 'Raleway', sans-serif; font-size:24px;}
.list a{diaplay:block; float:left; color:#333;  padding:10px; width:100%; text-align: center;}
.list a:hover{color:#014283;}
.list figure img{transition:.3s;}
.list a:hover img{transform:scale(1.1, 1.1);}
.list a:hover p{color:#333;}
.list figure{diaplay:block;}
.list figure div{line-height:0; width:100%; height:auto; overflow: hidden; position:relative;}
.list figure div span{color:#fff; position:absolute; display: inline-block; font-size:18px; width:80%; left:10%; bottom:0;  z-index: 100; line-height:180%; text-align: center; padding-bottom:1em; opacity:0; transition:.3s; font-weight: bold;}
.list figure div span::after{content:""; width:100%; height:1px; background:#fff; position:absolute; bottom:200%; left:0; opacity:0; transition:.5s; }
.list a:hover div span{opacity:1; bottom:50%;}
.list a:hover div span::after{bottom:0; opacity:0.5;}
.list a:hover div.detail::before{opacity:1;  background-size:20%;}
.list figure div::before{content:""; text-align: center; color:#fff; width:100%; height:100%; position:absolute;  background:rgba(0,0,0,0.6) url(images/icon-showmore.png) no-repeat center; background-size:40%; z-index: 100; font-size: 14px; opacity:0; transition:.3s;}
.list figure div.detail::before{content:"";}
.list figcaption{padding:1em 0.3em; min-height:3em; diaplay:block;}
.list figcaption p{font-size:15px; color:#666; line-height: 160%; }
.list figcaption p.more{font-size:13px; letter-spacing: 2px;}

.list .more span{position:relative; transition:.3s;}
.list .more span::after{content:"看更多"; position:absolute; top:1em; left:0; opacity:0; transition:.3s; color:#371e0e;}
.list a:hover span::after{top:0; opacity:1;}
.list a:hover span{color:rgba(255,255,255,0);}
/*product list*/
.list.pro{padding:0.5em 1em;}
.list.pro a{background:#fff; padding:0; border:1px solid #fff;}
.list.pro a:hover{border:1px solid #ccc;}
.list.pro h3.subject{color:#000; font-size:15px; padding:1em 0 0.5em 0; position:relative;}
.list.pro h3.subject::before{content:""; position:absolute; top:0; left:0; width:4em; background:#000; height:2px;}
.list.pro figcaption{padding:0 3em 2em 3em; text-align: left; min-height: 4em; font-size:13px;}
/*designer list*/
.list.designer{padding:0 0.3em 4em 0.3em;}
.list.designer a{text-align:left; padding:0;}
.list.designer h3.subject{font-weight:bold; font-size:15px; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; color:#2e2f33;}
.list.designer figcaption{font-size:13px; color:#666; font-family: 'Poppins', sans-serif;}
.list.designer figure{border-bottom:2px solid #000;}
/*portfolio list*/
/*on sale list*/
.list.sale{padding:0 0.3em 2em 0.3em;}
.list.sale h3{font-size:16px;}
.onsale.main{min-height: 33.5em;}
/*product left catlist*/
.Catlist ul{list-style: none; margin:0; padding:0; font-size:16px; }
.Catlist ul li{display:block; padding:0; margin:0;}
.Catlist ul li a{color:#000; cursor: pointer; display: block; padding:1em 0.2em 0.5em 0.2em; position:relative;}
.Catlist ul li a::after{content:''; position:absolute; width:10px; height:10px; transform: rotate(45deg); border-right:1px solid #ccc; border-top:1px solid #ccc; right:10px; transition:.3s;}
.Catlist ul li a:hover{background:#efefef; border-bottom:1px solid #ccc;}
.Catlist ul li a:hover::after{transform:rotate(135deg);}
.Catlist ul li ul{font-size:14px; transition:.3s; }
.Catlist ul li ul.show{}
.Catlist ul li ul li{padding:0.2em 0;}
.Catlist ul li ul li a{padding:0.1em 0.2em 0.1em 1em;}
.Catlist ul li ul li a::after{display:none;}
.Catlist ul li ul li a:hover{background:#000; color:#fff; padding-left:1.5em; border:none; }

/*prodetail*/
.bigpic, .bigpic .col-6{position:relative;}
.bigpic .col-6{transform:translateX(50%);}
.bigpic .col-6::before, .bigpic .col-6::after{content:""; width:20px; height:100%; background:#f6f6f6; position:absolute; top:0;}
.bigpic .col-6::before{left:-10px;}
.bigpic .col-6::after{right:-10px;}
.bigpic::before{content:""; width:100%; height:100%; position:absolute; background:rgba(0,0,0,0.7); left:0; top:0;}
.prodetail .main{background:#fff; text-align: center;}
.prodetail .subject{font-size:45px; color:#2e2f33; font-weight: normal;}
.prodetail .design{display:inline-block; padding-left:11em; position:relative; color:#666;}
.prodetail .design::before{content:""; width:10em; height:1em; background:#d2cbcb; display:inline-block; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.prodetail .ll{padding-left:10%; line-height: 180%;}
.prodetail .small{width:120px; height:90px; padding:5px; display: inline-block;}
.prodetail .small a{border:1px solid #ccc; display: flex;justify-content: center; width:100%; height:100%;}
.prodetail .small img{max-width:100%; height:auto;}
.prodetail hr{margin: 4em 0 1em 0;}
/*designer*/
.designerpic{background:#c9cac7; min-height:70vh; position:relative;}
.designerpic::after{content:""; background:url(images/designerpic-bg.png) no-repeat right; background-size:100%; position:absolute; top:55vh; width:100%; height:100px; left:0;}
.relative{border-top:1px solid #ccc; margin-top:2em; padding-top:2em;}
/*footer*/
#footer{font-size:12px; color:#fff; background:#1e1e1e; line-height: 2em; padding-top:3em; padding-bottom:3em; letter-spacing: 1px;}
#footer .phone{font-size:30px;}
#footer .rr{text-align:right; }
#footer a{color:#fff;}
#footer ul{list-style:none; margin:1em 0; padding:0;}
#footer ul li{display:inline-block;}
#footer .phone{/*font-family: 'Oswald', sans-serif;*/}
#footer ul li::after{content:"/"; margin-left:0.5em; margin-right:0.5em;}
#footer .col-9 .col-20 {
    float: right;
}
/*fixedbtn*/
.fixedbtn{position:fixed; bottom:15vh; right:2px; z-index: 400;}
.fixedbtn a{display:block;}
@media screen and (max-width:1280px){/*desktop*/
	.default #defaultimg, .default #pic, .default #defaultimg .ll{height:70vh;}
	.default #defaultimg .ll img{transform:translateY(100px);}
	.logo{padding-top:0.5em;}
	.nav ul li a{padding-left:0.6em; padding-right:0.6em;}
	.d2 .rr{padding:0 10% 0 2em; max-height:25em;}
	.d2 .rr::after{content:""; width:20%;}
	.d2 .rr::before{width:80%;}
	.d3 .col-3 div{font-size:18px;}
	.d4 .list{padding:2em;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.default #defaultimg, .default #pic, .default #defaultimg .ll{height:50vh;}
	.default #defaultimg .ll::after{height:20vh;}
	#header .col-3 p{padding:0.5em 0.1em;}
	.nav ul li a{color:#ccc; font-size:16px;}
	.nav ul li{ border-bottom:1px solid #666;}
	#defaultimg .ll::before{background-position: 0 15px;}
	.d2 .rr{padding:0 2em; max-height:auto;}
	.d2 .rr::after{content:""; width:0%;}
	.d2 .rr::before{width:100%; display: none;}
	.d3 .col-3 div{font-size:16px;}
	.d3 .col-3 div::after{padding-bottom:3em;}
	#footer .phone{font-size:30px;}
	.onsale.main{min-height: 38.1em;}
	
}
@media screen and (max-width:767px){/*phone*/
	
	.default #header{background:#000;}
	.default .logo{opacity:1;}
	.dtitle{padding-left:1em; padding-right:1em;}
	.logo{padding-bottom:5px;}
	
	#footer .phone{font-size:18px;}
	#footer .rr, #footer .ll{text-align:center;}
	.main{padding-left:1em;}
	.list.designer{padding:2em;}
	.bigpic .col-6{transform:translateX(0%);}
	.prodetail .design{display:inline-block; padding-left:0em; position:relative; color:#666;}
.prodetail .design::before{content:""; width:0em; height:1em; background:#d2cbcb; display:inline-block; position:absolute; left:0; top:50%; transform:translateY(-50%);}
	.bigpic .col-6::before{display:none;}
.bigpic .col-6::after{display:none;}
	.Catlist ul li a{border-bottom:1px solid #666;}
	.Catlist ul li ul li a{border:none;}
	.d2 .rr{padding: 1.5em 1em 0 1em;}
	.onsale.main{min-height: 0;}
	.news .list h3 {margin-bottom: 0.5em;}
	
	
}