/* BASIC css start */
.brandWrap .leftArea{width:960px!important;text-align:center;}
#contentWrapper{min-height:800px!important;}



#brand{z-index:2; position:relative; width:100%; max-width:1200px; min-height:600px; margin:0 auto; padding-bottom: 150px; }
	.brand-wrap{width:100%; height:auto; position:relative; margin-top:100px; }
	.brand-wrap .title{text-align: center; padding-bottom:40px; }
	.brand-wrap .title h2 {text-align: center; float: none; margin-bottom:10px; }
	.brand-wrap .title h4 {text-align: center; font-size:18px; color:#888; letter-spacing: 10px; }

.brand-container{width: 100%;}
.brand-container>ul{float: left; }

.brandTopNav{margin-bottom:60px;  }
	.brandTab{position: relative; border-bottom: 1px solid #ddd;}
	.brandTab>li{ float: left; width:20%; border-top: 1px solid #ddd;border-left: 1px solid #ddd;}
	.brandTab>li:last-child{ border-right: 1px solid #ddd;}

	.brandTab>li a{ display: block; padding: 11px 20px; background: #fff; font-size: 18px; color:#787878;}
	.brandTab>li.on>a,
	.brandTab>li a:hover{ background: #d9e3e4; }


	/* ½ÃÅ©¸´Å°,´õÆäÀÌÁö, ´ÚÅ;ÆÁ¦¶ó ºê·£µå ½ºÅä¾î */
	.brand-stroe{ position: relative; width:32.5%; }
	.brand-stroe li img{width: 100%;}
	.brand-stroe li:nth-child(2) { text-align: center; line-height: 1.5; padding: 70px 0 20px 0; font-size: 17px; color:#666; border: 1px solid #cccccc; }
	.brand-stroe li:nth-child(3) { position: absolute; top:58%; left:50%; margin-left: -50px; }

	/* ½ÃÅ©¸´Å°, ´õÆäÀÌÁö, ´ÚÅ;ÆÁ¦¶ó ºê·£µå ·Î°í */
	.brand-stroe li span.secretkeyLogo,
	.brand-stroe li span.thepageLogo,
	.brand-stroe li span.drageraLogo { width:100px; height: 100px; display: block; }

	.brand-stroe li span.secretkeyLogo a { display: block; width: 100%; height: 100%; background: url(http://zenpia.jpg1.kr/images/20re/img/brandStore_logo_secretkey.jpg) no-repeat 50% 50%; background-color: #fff; border-radius: 50%; border: 1px solid #ddd; }
	.brand-stroe li span.thepageLogo a { display: block; width: 100%; height: 100%; background: url(http://zenpia.jpg1.kr/images/20re/img/brandStore_logo_thepage.jpg) no-repeat 50% 50%; background-color: #fff; border-radius: 50%; border: 1px solid #ddd; }
	.brand-stroe li span.drageraLogo a { display: block; width: 100%; height: 100%; background: url(http://zenpia.jpg1.kr/images/20re/img/brandStore_logo_dragera.jpg) no-repeat 50% 50%; background-color: #fff; border-radius: 50%; border: 1px solid #ddd; }

	/* ´õÆäÀÌÁö ºê·£µå ½ºÅä¾î ÁÂ¿ì ¿©¹é */
	.thepage-store{ margin:0 1.2%;}
    
    
    
    
/*ºê·£µåº°¹è³Ê¸µÅ©,ÇØ´ç¹è³Ê¼û±èó¸®ÇÔ*/    
.brand-wrap{position:relative;}
.brand-wrap .link{position:relative}
.brand-wrap .link a{display:block;position:absolute;width:186px;height:42px;right:132px;}
.brand-wrap .link a.link1{top:567px;}
.brand-wrap .link a.link2{top:1053px;}
.brand-wrap .link a.link3{top:1533px;}
.brand-wrap .link a.link4{top:2020px;}










/* PRODUCT LINE */
.mcon06{margin-top:130px}
.mcon06 div.w1280{width: 1200px;}
.mcon06 .w1280 .main-title {font-size: 35px; font-wieght: 300; color: #2e2e2e; text-align: center;}
.mcon06 .w1280 .main-text {font-size: 20px; line-height: 25px; color: #2e2e2e; text-align: center;}
.mcon06 .w1280 .arcodian-wrap{font-size:0;text-align:center;margin-top:50px; padding-left: 30px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(1){background:url("/design/zenpia0/2023eng/ban_start.png")no-repeat left top;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(2){background:url("/design/zenpia0/2023eng/ban_hya.png")no-repeat left top;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(3){background:url("/design/zenpia0/2023eng/ban_lemon.png")no-repeat left top;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(4){background:url("/design/zenpia0/2023eng/ban_fresh.png")no-repeat left top;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(5){background:url("/design/zenpia0/2023eng/ban_make.png")no-repeat left top;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(6){background:url("/design/zenpia0/2023eng/ban_snow.png")no-repeat left top;}


.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(1) em{width:97px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(2) em{width:128px;left:-38px;top:78px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(3) em{width:157px;left:-54px;top:92px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(4) em{width:157px;left:-52px;top:92px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(5) em{width:117px;left:-34px;top:72px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(6) em{width:157px;left:-53px;top:92px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(7) em{width:97px;top:62px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(8) em{width:124px;left:-34px;top:76px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(9) em{width:117px;left:-31px;top:72px;}
.mcon06 .w1280 .arcodian-wrap .section:nth-of-type(10) em{width:97px;left:-23px;top:62px;}

.mcon06 .w1280 .arcodian-wrap .section.on{width:644px;}
.mcon06 .w1280 .arcodian-wrap .section{width:53px;height:500px;display:inline-block;vertical-align:top;position:relative;overflow:hidden;transition:all 0.3s;}
.mcon06 .w1280 .arcodian-wrap .section em{display:block;font-style:normal;font-size:14px;font-weight:500;color:#fff;text-align:left;padding:0 20px;line-height:1;top:60px;transform:rotate(90deg);white-space:nowrap;position:relative;box-sizing:border-box;letter-spacing:0.5em;left:-23px;display:none;}
.mcon06 .w1280 .arcodian-wrap .section em:before{display:block;content:"";position:absolute;width:2px;height:14px;background-color:rgba(255,255,255,0.3);left:0;top:0;}
.mcon06 .w1280 .arcodian-wrap .section em:after{display:block;content:"";position:absolute;width:2px;height:14px;background-color:rgba(255,255,255,0.3);right:0;top:0;}
.mcon06 .w1280 .arcodian-wrap .section .txt-box{position:absolute;left:81px;top:40px;}
.mcon06 .w1280 .arcodian-wrap .section .txt-box p{font-size:32px;font-weight:400;color:#fff;text-align:left;line-height:46px;font-family:"Noto Sans KR", sans-serif;white-space:nowrap;}

.mcon06 .w1280 .arcodian-wrap .section .txt-box a{display:inline-block;position:relative;margin-top:43px;height:96px;line-height:96px;font-size:14px;color:#fff;letter-spacing:0.03em;}
.mcon06 .w1280 .arcodian-wrap .section .txt-box a img{display:inline-block;vertical-align:middle;margin-right:9px;width:49px;}
.mcon06 .w1280 .arcodian-wrap .section .txt-box a .circle_ani{position:absolute;right:0;top:50%;margin-top:-48px;right:-30px;font-size:14px;font-weight:600;color:#2e2e2e;}
.mcon06 .progress-circle ellipse {display:none; stroke-dasharray:816; stroke-dashoffset:0;animation:dash 2s linear;}
.mcon06 .w1280 .arcodian-wrap .section .txt-box a:hover .progress-circle ellipse {display:block;}

/* BASIC css end */