@charset "UTF-8";
@font-face{font-family:'bauerbodni'; src:url(bauerbodni.eot) format('embedded-opentype'), url(bauerbodni.woff) format('woff'), url(bauerbodni.ttf) format('truetype');}
@font-face{font-family:'cwTeXYen'; font-style:normal; font-weight:500; src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot); src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),       url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');}
html, body{margin:0; padding:0;}
body, div, p, strong, h1, h2, h3, h4, h5, span, a, input, select, option, label, ul, li{color:#000; font-size:19px; line-height:30px; font-family:'bauerbodni', 'cwTeXYen'; letter-spacing:2px;}
select{height:36px; line-height:36px;}
input[type=text], input[type=password], input[type=number], textarea, select{border:1px #85C7BA solid; line-height:35px; padding:0 5px; resize:none;}
input[type=submit], input[type=button]{border:none; background:#61cdc9; color:#fff; font-weight:bold; cursor:pointer;}
input[type=number]{width:50px;}
strong, h1, h2, h3, h4, h5{font-weight:bold;}
h1{font-size:50px; line-height:52px;}
h2{font-size:42px; line-height:44px;}
h3{font-size:36px; line-height:38px;}
h4{font-size:24px; line-height:26px;}
h5{font-size:16px; line-height:18px;}
ul, ol, li{margin:0; padding:0;}
td, li{vertical-align:top;}
p{margin:19px 0;}
a{text-decoration:none; color:#61cdc9; display:inline-block;}
a:hover{color:#40b5aa;}
ul li{list-style:disc;}
ol li{list-style:decimal;}
.hidden, .hideit{display:none;}
.ctcc{position:fixed; z-index:-1; top:-500px;}
.clear{clear:both; height:0;}
.close{cursor:pointer;}
.sabrosus{text-align:center; margin-bottom:50px;}
.sabrosus a{width:20px; height:20px; line-height:20px; display:inline-block; color:#C9CACA; margin:0 10px;}
.sabrosus a.current, .sabrosus a:hover{color:#85C7BA;}
.sabrosus .prev, .sabrosus .next{background:#C9CACA; border-radius:15px; color:#fff; width:30px; height:30px; line-height:30px;}
.sabrosus .prev:hover, .sabrosus .next:hover{background:#85C7BA; color:#fff;}
.blue{color:#85c7ba;}
.button01{color:#fff; background:#4ABFBB; border:1px #4ABFBB solid; font-size:16px; line-height:35px; text-align:center; padding:0 15px; display:inline-block;}
.button01:hover{color:#4ABFBB; background:#fff;}
.button02{color:#fff; background:#000; border:1px #000 solid; padding:0 10px; display:inline-block;}
.button02:hover{color:#000; background:#fff;}
.button03{color:#fff; background:#4ABFBB; border:1px #4ABFBB solid; font-size:14px; line-height:25px; text-align:center; padding:0 5px; display:inline-block; cursor:pointer;}
.button03:hover{color:#4ABFBB; background:#fff;}
#logo{float:left; margin:20px 0 20px 50px;}
#headerMenu{float:right; margin:40px 40px 0 0; clear:both;}
#headerMenu img{height:38px;}
#headerMenu a{color:#000;}
#headerMenu a:hover{color:#40b5aa;}
#headerLoginBox{position:absolute; right:660px; top:40px; font-size:14px; line-height:20px; color:#30AEA3;}
#headerLoginBox .pic{width:40px; height:40px; display:block; border-radius:20px; float:left; background-size:cover; margin:-7px 10px 0 0;}
#headerLoginBox a.page{font-size:20px; color:#30AEA3;}
#headerBanners{text-align:center;}
#headerBanners img{width:100vw; height:auto;}
#headerBannersPager{text-align:center; margin:10px 0 20px 0;}
#headerBannersPager span{font-size:30px; line-height:30px; color:#C9CACA;}
#headerBannersPager span.cycle-pager-active{color:#85C7BA;}
#searchBox{text-align:right; margin:-30px auto 40px auto;}
#searchBox #advisoryBox, #searchBox #shppingCartBox{background:#000 no-repeat 15px 3px; padding:3px 15px 3px 45px; display:inline-block; position:relative;}
#searchBox #advisoryBox a, #searchBox #shppingCartBox a{font-size:14px; color:#61CDC9; line-height:26px;}
#searchBox #advisoryBox ul, #searchBox #shppingCartBox ul{margin:0; position:absolute; z-index:10;
display:none; background:#000; width:150px; margin-left:-101px; padding:10px;}
#searchBox #advisoryBox ul li, #searchBox #shppingCartBox ul li{list-style:none; margin-bottom:5px;}
#searchBox #advisoryBox ul li a, #searchBox #shppingCartBox ul li a{color:#fff; text-align:left; line-height:15px; display:block; border-bottom:1px #fff solid;}
#searchBox #advisoryBox:hover ul, #searchBox #shppingCartBox:hover ul{display:block;}
#searchBox #advisoryBox{background-image:url('../images/iconAdvisory.png');}
#searchBox #shppingCartBox{background-image:url('../images/iconCart.png');}
#searchBox form{display:inline-block;}
#searchBox form [type=text]{margin-left:20px; width:140px;}
#searchBox form [type=image]{float:right; margin-left:5px; height:37px;}
#title{text-align:center; margin-bottom:40px;}
#title span{font-size:40px; line-height:40px; border-bottom:2px #000 solid; display:inline-block; margin:20px auto;}
#openLeft{background:#61CDC9; color:#fff; font-size:12px; white-space:nowrap; border-radius:0 5px 5px 0; padding:0 5px; position:fixed; left:0; top:180px; cursor:pointer; display:none;}
.explodeBox{width:280px; text-align:center; display:inline-block; margin:20px; padding:20px 0; cursor:pointer;}
.explodeBox.active{border:1px #30AEA3 solid; box-shadow:5px 5px 10px rgba(48,174,163,.4);}
.explodeBox .price{marign:50px auto; padding:10px; display:inline-block; color:#30AEA3; border:1px #eee solid; box-shadow:0 0 15px rgba(29,29,29,.4); border-radius:5px; font-size:24px; line-height:24px;}
.explodeBox .price small{color:#30AEA3; line-height:24px; margin-right:10px;}
.mainBox{position:relative; width:100%; display:block;}
.main .info50{width:50%; float:right; font-size:14px; line-height:18px;}
.main .info50 *{font-size:14px; line-height:18px;}
.mainBox .main{padding-top:50px;}
.mainBox .buttonLeftMenu{cursor:pointer; left:5%; top:50px; position:absolute;}
.mainBox .main .title01{font-size:60px; line-height:75px; border-bottom:2px #000 solid;}
.mainBox .main .title02{font-size:30px; line-height:50px;}
.mainBox .mask{width:100vw; height:100vh; position:fixed; z-index:800; left:0; top:0; background:rgba(0,0,0,0.2); display:none;}
.mainBox .leftMenu{width:450px; height:100vh; overflow:hidden; position:fixed; z-index:801; left:-450px; top:0; background:#61CDC9;}
.mainBox .leftMenu .close{position:absolute; left:20px; top:30px;}
.mainBox .leftMenu .close img{width:20px;}
.mainBox .leftMenu .logo{position:absolute; right:30px; top:30px;}
.mainBox .leftMenu .logo img{height:50px;}
.mainBox .leftMenu .content{margin:130px 0 0 80px; width:280px;}
.mainBox .leftMenu .content, .mainBox .leftMenu .content a{color:#fff;}
.mainBox .leftMenu .content a{margin-bottom:15px; display:block;}
.mainBox .leftMenu .content a:hover{color:#5DA87C;}
.mainBox .leftMenu .content .login img{height:40px;}
.mainBox .leftMenu .content .button{border:1px #fff solid; color:#fff; background:#4ABFBB; font-size:20px; line-height:45px; text-align:center;}
.mainBox .leftMenu .content .button:hover{color:#4ABFBB; background:#fff;}
.mainBox .leftMenu .content .register{margin-top:80px;}
.mainBox .leftMenu #isLogin{box-shadow:0 0 30px #7C7A7B; color:#fff; margin:120px 0 0 0; padding:20px 0;}
.mainBox .leftMenu #isLogin .pic{width:40px; height:40px; border-radius:20px; background-size:cover; background-repeat:no-repeat; display:block; float:left; margin:0 20px 15px 80px;}
.mainBox .leftMenu #isLogin a{color:#fff; display:block; padding-left:80px; line-height:40px;}
.mainBox .leftMenu #isLogin a:hover{background:#fff; color:#4ABFBB;}
#memberRightMenu{width:260px; position:absolute; right:0; bottom:20%;}
#memberRightMenu a{text-align:center; color:#8B8979; display:block;}
#memberRightMenu a:hover{background:#8B8979; color:#fff;}
#memberRightMenu a:nth-child(1) img{height:35px; position:relative; top:3px;}
#albumList{width:768px; margin:0 auto;}
#albumList li{display:inline-block; width:232px; min-height:290px; margin:0 24px 20px 0; font-size:14px; line-height:16px;}
#albumList li:nth-child(3n){margin-right:0;}
#myWroksList{width:100%; border-collapse:collapse; margin:0px 0 50px 0;}
#myWroksList td{border:1px #ccc solid; padding:10px; vertical-align:top;}
#myWroksList tr:nth-child(1) td{color:#fff; background:#85C7BA; border-color:#85C7BA; text-align:center;}
#myWroksList a.workDown{width:100%; padding:15px 0; text-align:center; font-size:26px; color:#fff; background:#ccc; margin-bottom:10px; display:block;}
#myWroksList a.workUp{width:100%; text-align:center; color:#fff; background:#ccc; display:block;}
#myWroksList .workDown.active{background:#7b7d7a;}
#myWroksList .workUp.active{background:#61cdc9;}
.main{width:1000px; margin:0 auto; position:relative;}
.register{cursor:pointer;}
.close{position:absolute; right:30px; top:120px;}
.w100{width:95%;}
select.w100{width:98%;}
.w50{width:45%;}
.w35{width:34%;}
.w33{width:29%;}
.w18{width:17%;}
#memberFooter{width:100%; margin-bottom:-30px;}
#memberFooterButton{position:absolute; z-index:2; bottom:8%; left:37%;}
#memberFooterButton a:nth-child(1){margin-right:200px;}
.fullBox{width:100vw; height:100vh; display:block; position:relative; overflow:hidden; background-position:center; background-repeat:no-repeat; background-size:cover;}
.fullBox1{width:100%; display:block; position:relative;}
.data-bg{position:relative; overflow:hidden; background-position:center; background-repeat:no-repeat; background-size:auto 100%;}
#workTool{float:right;}
#workTool img{height:40px;}
#workMenu{margin-bottom:20px;}
#workMenu a{color:#7B7D7A; padding:5px 15px; border:1px #7B7D7A solid; margin-right:-1px; float:left;}
#workMenu a.current{background:#30AEA3; color:#fff; border:1px #30AEA3 solid;}
#workForm{float:left; width:285px; min-height:500px; display:inline-block;}
#workForm input, #workForm select{margin-bottom:10px;}
#workForm input[type="text"], #workForm textarea{width:100%;}
#workShow{width:680px; float:right; position:relative; overflow:hidden;}
#workShow img{width:90%; height:auto;}
#workShow.col img{width:45%; height:auto;}
#workShow.row img{width:70%; height:auto; margin-bottom:20px;}
#designersList{width:830px; margin:0 auto;}
#designersList li{display:inline-block; width:162px; min-height:230px; margin:0 20px 10px 20px; text-align:center; color:#8B8979;}
#designersList li hr{border:none; border-bottom:1px #B6B49E solid; margin:0;}
#designersList li .data-bg{display:block; width:162px; height:162px; border-radius:81px;}
#designerBox{width:162px; margin:50px auto; text-align:center; color:#8B8979;}
#designerBox hr{border:none; border-bottom:1px #B6B49E solid; margin:0;}
#designerBox .data-bg{display:block; width:162px; height:162px; border-radius:81px; margin-top:20px;}
#designerBox1{float:left; margin-right:20px;}
#designerBox1 .data-bg{display:inline-block; width:40px; height:40px; border-radius:20px; float:left; margin:0 15px 0 0;}
#designerBox1 div{color:#7B7D7A; font-size:14px; line-height:5px; display:inline-block; text-align:center;}
#onlineDesignList{width:1110px; margin:0 auto;}
#onlineDesignList li{display:inline-block; width:525px; min-height:180px; margin-bottom:40px; color:#7B7D7A; position:relative; float:left;}
#onlineDesignList li:nth-child(even){float:right;}
#onlineDesignList li .img{width:320px; float:left; margin-right:20px;}
#onlineDesignList li .img img{width:100%;}
#onlineDesignList li .data-bg{display:inline-block; width:40px; height:40px; border-radius:20px; float:left; margin:0 15px 0 0;}
#onlineDesignList li .designer{color:#7B7D7A; font-size:14px; line-height:5px; text-align:center; margin-bottom:0;}
#onlineDesignList li .designer hr{border:none; border-bottom:1px #7B7D7A solid;}
#onlineDesignList li .title{color:#000;}
#onlineDesignList li .tool{position:absolute; width:185px; right:0; bottom:0;}
#onlineDesignList li .tool img{height:30px;}
.shareBox{position:absolute; z-index:5; padding:0 5px; right:0; bottom:40px; background:rgba(0,0,0,0.9); color:#fff; font-size:13px;}
.shareBox .fa{width:20px; height:20px; color:#fff;}
.shareBox img{height:13px;}
#workTool .shareBox{bottom:48px;}
#buyWorks{text-align:center; border-bottom:1px #999 solid; margin-bottom:20px;}
#buyWorks a{border:1px #999 solid; border-top:none; border-bottom:none; width:49.6%; text-align:center; display:inline-block; font-size:30px; line-height:70px; font-weight:bold;}
#buyWorks a:nth-child(1){border-left:none;}
#buyWorks a:nth-child(2){border-right:none;}
#tags{border-bottom:1px #85C7BA solid; text-align:center; margin-bottom:30px; position:relative;}
#tags a{color:#85C7BA; border:1px #85C7BA solid; display:inline-block; width:100px; text-align:center; font-size:16px; line-height:35px;}
#tags a:hover, #tags a.current{color:#fff; background:#85C7BA;}
#tags a.button01{color:#fff; position:absolute; right:0;}
#tags a.button01:hover{color:#4ABFBB;}
#worksList{margin:20px 0;}
#worksList li{list-style:none; position:relative; margin-bottom:20px;}
#worksList li .img img{float:left; width:620px;}
#worksList li .info{float:right; width:366px; margin-bottom:40px;}
#worksList li .title{font-weight:bold; font-size:20px; display:block; color:#000;}
#worksList li .tool{position:absolute; z-index:2; width:366px; right:0; bottom:0;}
#footerLine{border-top:20px #85c7ba solid; border-bottom:10px #30aea3 solid; margin:0;}
#footer{margin:30px auto; width:900px;}
#footer .tools{float:right; margin-top:20px;}
#footer .tools a{margin-left:10px;}
#footer .menu{margin:30px 0 10px 0; padding:0;}
#footer .menu li{display:inline-block; width:19%; min-height:300px; margin:0; padding:0; position:relative;}
#footer .menu li a{display:block; color:#000;}
#footer .menu li a:hover{color:#30AEA3;}
#footer .menu li a.title{color:#85c7ba;}
#footer .menu li .sub{position:absolute; bottom:0;}
#footer .menu li .sub a{font-size:14px; line-height:23px;}
#footer hr{width:1000px; margin-left:-50px;}
#page{width:100vw; height:100vh; position:fixed; z-index:900; left:0; bottom:0; background:#fff; display:none;}
#loginBox{width:350px; margin:50px auto; text-align:center;}
#loginBox .button01{width:100%;}
#loginBox .text{background:no-repeat; padding-left:70px; background-position:20px 5px; width:278px;}
#loginBox hr{width:50%; border:none; border-bottom:1px #000 solid;}
#registerBox .header{background:#85c7ba; color:#fff; font-size:40px; line-height:90px; text-align:center;}
#registerBox form{width:450px; margin:60px auto; font-size:14px;}
#registerBox form a{font-size:14px;}
#registerBox .title{font-size:40px; line-height:50px;}
#picBoxs{width:151px; height:151px; display:inline-block; position:relative; float:left; margin-left:80px;}
#picBox{width:151px; height:151px; display:inline-block; border-radius:75px; overflow:hidden;}
#dragPic{display:inline-block; position:relative;}
#pic{height:151px; position:relative;}
#resizePic{display:inline-block; border:none; height:151px; position:absolute; left:0; top:0;}
#modflyPic, #modflyDown{position:absolute; z-index:999; right:0; top:0;}
#registerBox .box{border-left:1px #7b7d7a solid; margin-left:16px; padding-left:70px; position:relative; font-size:14px; padding-bottom:50px;}
#registerBox .box input[type=text], #registerBox .box input[type=password], #registerBox .box select, #registerBox .box option{font-size:14px;}
#registerBox .box:nth-child(2) input{margin-bottom:10px;}
#registerBox .box .number{position:absolute; left:-17px; color:#7b7d7a; width:30px; height:30px; font-size:20px; line-height:30px; border:1px #7b7d7a solid; background:#fff; border-radius:15px; display:block; text-align:center; letter-spacing:0;}
#registerBox .box .subTitle, .mark{color:#61cdc9;}
.mark{line-height:30px; top:5px; position:relative;}
.fileUpload{position:relative; overflow:hidden; margin:10px 0;}
.fileUpload .button{background:#61cdc9; color:#fff; padding:5px;}
.fileUpload input.upload{position:absolute; z-index:900; top:0; left:0; margin:0; padding:0; font-size:20px; cursor:pointer; opacity:0; filter:alpha(opacity=0);}
.fileUpload span{font-size:14px;}
#collectionList{width:757px; margin:20px auto;}
#collectionList li{line-height:none; width:160px; min-height:280px; display:inline-block; margin:0 12px 20px 12px;}
#collectionList li .data-bg{width:160px; height:160px; display:block; background:no-repeat center; background-size:auto 100%;}
#orders_list{border:none; border-collapse:collapse; width:100%;}
#orders_list td{vertical-align:top; text-align:center;}
#orders_list .title td{background:#30AEA3; color:#FFF; border:1px #FFF solid;}
#orders_list td .num{width:58px; text-align:right;}
#advisoryForm .img{float:left; margin:0 15px 30px; border:1px #777 solid;}
#advisoryForm textarea{width:100%; height:150px;}
#advisoryList{margin:0 auto 50px auto; width:700px;}
#advisoryList li{list-style:none;}
#advisoryList li .data-bg{width:160px; height:160px; display:block; background:no-repeat center; background-size:auto 100%; float:left; margin-right:15px;}
#advisoryList li .title{border-bottom:1px #999 solid; display:block;}
.nodata{background:#85C7BA; color:#fff; letter-spacing:5px; width:250px; margin:50px auto; padding:70px 50px; text-align:center; font-size:40px; line-height:40px; white-space:nowrap;}
.processOK{background:#85C7BA; color:#fff; letter-spacing:5px; width:350px; margin:50px auto; padding:50px; text-align:center; font-size:24px; line-height:30px; white-space:nowrap;}
.processOK .title{font-size:40px; line-height:40px; border-bottom:1px #fff solid; color:#fff;}
.box01{margin:30px 0; padding:20px; border:1px #85C7BA solid; position:relative;}
#left{width:200px; float:left;}
#main{width:780px; float:right;}
.greenTitle{color:#91D1C4; margin:50px auto; width:230px; padding-bottom:5px; border-bottom:1px #91D1C4 solid; font-size:22px; letter-spacing:5px;}
#nologinPageTitle{margin:30px 0 70px 0; display:inline-block;}
#notLoginBox{width:350px; float:right;}
#mask{position: fixed; z-index: 900; left:0; top:0; width: 100vw; height: 100vh; background:url('../images/NowLoading.gif') no-repeat center rgba(0,0,0,0.6); background-size:200px auto; display: none;}
#maskContent{position: fixed; z-index: 901; background:#fff; border-radius: 10px; padding: 15px; width:800px; height:80vh; left:50%; top:50%; transform: translate(-50%, -50%); display: none;}
#maskContent .fa-close{position:absolute; right:-11px; top:-11px; width:30px; height:30px; font-size:24px; line-height:30px; text-align:center; color:#fff; background:#444; border:2px #fff solid; border-radius:15px; cursor:pointer;}
#maskContent .data{width:100%; height: 100%; overflow-x: hidden; overflow-y: auto;}
#maskContent .data .center{text-align:center; width:100%; height:100%;}
#maskContent .data .full{height:100%; margin:0 auto; display:inline-block;}
.btnShare{cursor:pointer;}
@media screen and (max-width:1000px){
	html, body{overflow-x:hidden; overflow-y:auto;}
	#left{float:none; position:fixed; z-index:10; left:-200px; top:0; height:100vh; background:#fff; border-right:1px #2D3036 solid;}
	#main, .main{width:85%; float:none; margin:0 auto;}
	#openLeft{display:block;}
	#openWorkForm{display:block; position:fixed; z-index:10; left:0; bottom:90px; background:#30AEA3; color:#fff; padding:5px; border-radius:0 5px 5px 0; border:1px #fff solid; border-left:none;}
	#workForm{float:none; min-height:inherit; position:fixed; z-index:10; left:-285px; bottom:0; text-align:center; padding:10px 0 0 0; background:#fff;}
	#workForm input[type=text]{width:90%;}
	#workForm .next{display:none;}
	#workShow{float:none; width:100%; margin:0 auto; text-align:center;}
	#workShow img, #workShow.col img, #workShow.row img{width:100%; max-width:600px; height:auto;}
	#workShow .next{display:inline-block;}
	#worksList li .img img{float:none; width:60%;}
	#footer{width:90%;}
	#footer hr{width:100%; margin-left:0;}
}
@media screen and (max-width:600px){
	#worksList li .img img{float:none; width:100%;}
	#worksList li .info{float:none; width:100%; margin-bottom:0px;}
	#worksList li .tool{position:static; width:100%; text-align:right;}
	#worksList li .tool a img{height:30px;}
	#footer .menu li{width:48%; min-height:inherit;}
	#footer .menu li:nth-child(1){padding-bottom:80px; margin-bottom:30px;}
}
@media screen and (max-width:550px){
	#logo{float:none; margin:20px 0 0px 20px;}
	#headerMenu{float:none; margin:0px 0px 20px 0; text-align:center;}
	#searchBox form{display:none;}
	#searchForm{float:right; margin-right:20px; margin-top:40px; display:inline-block;}
	#searchForm .ui-input-text{display:inline-block;}
	#searchForm [name=keyword]{width:150px;}
	#searchForm [type=image]{height:30px; position:relative; top:8px;}
	#registerBox form{width:90%;}
	#onlineDesignList{width:95%;}
	#onlineDesignList li{width:100%; min-height:inherit; float:none;}
	#onlineDesignList li br.clear{display:none;}
	#onlineDesignList li:nth-child(even){float:none;}
	#onlineDesignList li .img{width:100%; float:none; margin-right:0px;}
	#onlineDesignList li h5.title{float:left; display:inline-block; margin:0px; width:45%;}
	#onlineDesignList li .tool{position:relative; width:auto; right:0; float:right;}
	#workMenu a{font-size:14px; line-height:14px;}
	#albumList{width:96%;}
	#albumList li{display:block; width:100%; margin:0 0 20px 0; font-size:16px; line-height:18px;}
	#albumList li a, #albumList li a .img{width:100%;}
	#nologinLogo{margin-left:50px;}
	#nologinPageTitle{margin:30px 0;}
	#notLoginBox{width:96%; float:none; margin:0 auto 20px auto;}
	#memberFooterButton{width:96vw; left:2vw; right:0; text-align:center;}
	#memberFooterButton a:nth-child(1){margin-right:0px;}
}
@media screen and (max-width:480px){
	#headerMenu{float:none; margin:20px 0px 0 0; text-align:center; width:100%; display:block;}
	#info{font-size:14px; line-height:18px;}
}