@charset "euc-kr";

/* Reset */
html, body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {margin:0px; padding:0px; list-style: none;}

html { /*overflow-x:hidden; overflow-y:hidden;*/ font-family: 'NanumSquare', sans-serif; font-size:12px; color:#454545; _padding-right:16px; }
/*html, body{ width:100%; height:100%; margin:0; padding:0; }*/
img{vertical-align: middle; border:0px;}
a{border:0px;}



/*** 컬러박스 ***/
.white{background: #ffffff; border: solid 1px #e2e2e2; box-sizing: border-box;}

.green{background:#3ca133;}
.greeny{background:#acce2f;}
.greeng{background:#b5c53d;}
.greenw{background:#71b901;}


.red{background:#d22618;}
.cblue{background:#15cdf3}

.blue{background:#1a64bd;}
.blue2{background: #5d98dc;}
.sblue{background:#cce3eb;}
.bluej{background:#001671;}
.yblue{background:#ccdaea;}
.eblue{background:#6fa5ca;}


.pink{background:#ffcccc;}
.black{background: #000;}
.mint{background: #1bac9c;}
.gray1{background:#efefef;}
.gray2{background:#8f8e93;}

.orange{background:#fe6031;}
.oranged{background:#ee5a37;}
.orangee{background:#f49629;}


.brown{background: #984a1d;}
.brown2{background: #d2b589}
.grayb{background:#363636;}
.purple{background:#e5d5f3;}
.beige{background:#ebe4dc;}
.pinkj{background:#ff4d97;}
.gold{background:#cbae52;}
.navy{background:#c0a789;}
.rorange{background:#fe2901;}
.ygreen{background:#80c02c;}
.yellow{background:#fccb29;}
.navy{background: #222646;}


.mgt_19{margin-top:19px;}

/*** 본문CSS ***/
#wrap{width:100%; overflow:hidden; background:#f6f6f6;}
/*	#wrap #header{width:100%; overflow:hidden; background: #edede7;}*/
	#wrap #header .top_m{width: 1089px; margin:0 auto; margin-top:54px; margin-bottom:23px;}
	#wrap #header .top_m:after{content: ""; display: block; height:0px; line-height: 0px; clear:both;}
	#wrap #header .top_m .top_tit{width:639px; height:306px; float:left; overflow:hidden;}
	#wrap #header .top_m .top_tit div{ position: relative; z-index:10; overflow:hidden;}
	#wrap #header .top_m .top_tit .tit01{height:54px;}	
	#wrap #header .top_m .top_tit .tit02{margin-top:34px; margin-bottom:9px; height:72px;}	
	#wrap #header .top_m .top_tit .tit03{margin-bottom:30px; height:75px;}
	#wrap #header .top_m .top_tit .tit04{margin-bottom:30px; height:35px;}
	#wrap #header .top_m .top_tit .tit01 img{position: absolute; left:-440px;}
	#wrap #header .top_m .top_tit .tit02 img{position: absolute; left:-713px;}
	#wrap #header .top_m .top_tit .tit03 img{position: absolute; left:-581px;}
	#wrap #header .top_m .top_tit .tit04 img{position: absolute; left:-529px;}
	
	
	#wrap #header .top_m .top_ban{width:415px; float:right; text-align: right; position: relative; z-index: 10;}
	#wrap #header .top_m .top_ban .top_banz{position:relative; top:0px; left:0px; z-index:10; width:415px; height:235px;}
	#wrap #header .top_m .top_ban .top_banz img{position: absolute;top:0px; left:0px; z-index: 10;}
	#wrap #header .top_m .top_ban .sch_banz{position: relative; top:0px; left:0px; z-index: 10; width:415px; height:109px; margin-top:8px;}
	#wrap #header .top_m .top_ban .sch_banz img{position: absolute; top:0px; left:-8px; z-index: 10;}

	#wrap #header .top_tab_wrap{width:100%;}
	#wrap #header .top_tab{width:1089px; margin: 0 auto;}
	#wrap #header .top_tab:after{content: ""; display: block; height:0px; line-height: 0px; clear:both;}
	#wrap #header .top_tab div{float:left; cursor: pointer;}
	#wrap #header .common_ban{width:100%; height:369px; text-align:center; background: #fe565d;}
	#wrap #header .common_ban img{margin-top:15px; display: none;}


#center{width:100%; overflow:hidden;}
	#center .center_cont{width:100%;}
	#center .center_cont .cont_lay{width:100%; padding:0px 0px 20px;}
	#center .center_cont .item_box{width:1200px; margin:0 auto;}
	#center .center_cont .item_box:after{content: ""; display: block; height:0px; line-height: 0px; clear:both;}

	#center .center_cont .item_box .thumb_box:after{content: ""; display: block; height:0px; line-height: 0px; clear:both;}


	#center .center_cont .item_box .thumb_box .moblie_thumb_l{width:347px!important; background:none; background-color: #fff; border:1px solid #d2d2d2; box-shadow: 1px 1px 1px 1px #d2d2d2;}
	#center .center_cont .item_box .thumb_box .moblie_thumb_l img{width:345px!important; margin-top:1px; margin-left:1px; }
	#center .center_cont .item_box .thumb_box .moblie_thumb_l{background-size:345px!important;}
	#center .center_cont .item_box .thumb_box .moblie_thumb_l .moblie_thumb_l_max{width:340px!important; background-size:343px!important; margin-top:3px;}
	#center .center_cont .item_box .thumb_box .moblie_thumb_l .moblie_thumb_l_max img{right:-343px!important;}


	#center .center_cont .item_box .thumb_box .mobile_thumb{width:240px; height:463px; overflow:hidden; float:left; margin-right:19px; position: relative; z-index:10; background:none!important; box-shadow: none!important; border:0px;}
	#center .center_cont .item_box .thumb_box .mobile_thumb .mobile_thumb_max_btm{width:229px; height:398px; overflow:hidden; position:absolute; top:32px; left:6px; z-index:5;}
	#center .center_cont .item_box .thumb_box .mobile_thumb .mobile_thumb_max_btm img{width:229px;}
	#center .center_cont .item_box .thumb_box .mobile_thumb .mobile_cuv{width:240px; height:463px; background:url(../sysimg/phone_bg.png) no-repeat 0 0; overflow:hidden; position: absolute;top:0px; left:0px; z-index:20;}
	#center .center_cont .item_box .thumb_box .corss_icon{width:88px; height:88px; background: url(../sysimg/cross_ico.png) no-repeat 0 0; position: absolute; top:191px; left:314px; z-index: 30;}

	#center .center_cont .item_box .spac_wrap .mobz_prod_name{margin-top:29px; margin-bottom:55px;}

	#center .center_cont .item_box .spac_wrap .btnz{font-size: 0px; letter-spacing: 0px; word-spacing: 0px; margin-top:34px;}
	#center .center_cont .item_box .spac_wrap .btnz div{display: inline-block; *display: inline; display: -moz-inline-stack; zoom:1; margin-right:9px; font-size: 15px; width: 166px; background: #222; color: #fff; text-align: center; height: 60px; line-height: 60px;}
    #center .center_cont .item_box .spac_wrap .btnz div:nth-of-type(2) {background: #636363;}
    #center .center_cont .item_box .spac_wrap .btnz div.notic_btn {background: #636363;}
    #center .center_cont .item_box .spac_wrap .btnz div.mod_btn {background: #fff; border: 1px solid #d2d2d2; margin-right: 0;}
    #center .center_cont .item_box .spac_wrap .btnz div a { display: block; color: #fff; text-decoration: none; font-size: 17px;}
    #center .center_cont .item_box .spac_wrap .btnz div.mod_btn a {color: #222;}
	#center .center_cont .item_box .spac_wrap .spac_cont ul{margin-top:20px;}
	#center .center_cont .item_box .spac_wrap .spac_cont ul:after{content: ""; display: block; height:0px; line-height: 0px; clear:both;}
	#center .center_cont .item_box .spac_wrap .spac_cont .spac_tit{width:110px; float:left; font-weight: bold;}	
	#center .center_cont .item_box .spac_wrap .spac_cont .spac_cont_text{float:left;}
    #center .center_cont .item_box .spac_wrap .spac_cont .spac_cont_text span.strike {text-decoration: line-through; margin-right: 20px;}
	.colorbox{margin-top:30px; margin-bottom:60px;}
	.colorbox:after{content: ""; display: block; height:0px; line-height: 0px; clear:both;}
	.colorbox .color_tit{width:100px; float:left; height:50px; overflow: hidden; line-height:3.1;}
	.colorbox .color_box_cont{width:295px; float:left; height:50px; overflow: hidden; font-size:0px; letter-spacing:0px; word-spacing:0px;}
	.colorbox .color_box_cont span{border-radius: 25px; display: inline-block; *display: inline; display: -moz-inline-stack; zoom:1; width:47px; height:47px; margin-right:10px;}
	.colorbox .color_box_cont span:hover{
		border:2px solid #000; 
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
  		box-sizing: border-box;         /* Opera/IE 8+ */
  		cursor: pointer;
  	}
  	.prod_name{font-size:30px; padding:0px 0px 20px; font-weight: bold; color: #222; border-bottom: 1px solid #ccc;}
  	.color_tit,.spac_tit,.spac_cont_text{font-size:17px; color: #2c2c2c; line-height: 1.7;}



  	#r_wing{position: fixed; bottom:10px; right:0px; z-index: 200;}
	#top_btnz,#btm_btnz{cursor:pointer;}
	
	/**** 무한 스크롤로 로딩박스 css ****/
	
	#infscr-loading {
		width:300px;
		text-align:center;
		position: fixed;
		text-align: center;
		bottom: 30px;
		left: 42%;
		z-index: 100;
		background: white;
		background: hsla( 0, 0%, 100%, 0.9 );
		padding: 20px;
		color: #222;
		font-size: 15px;
		font-weight: bold;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	#infscr-loading div{display:inline!important; margin-left:10px;}
	/****** 컬러셋 *****/
	.list_thumb_max_btm{position:relative; z-index:10;}
	.list_thumb_max_btm img{width: 383px;}

	
	.pop_box{position: fixed; z-index:99999; top:130%; left:50%; width:986px; height:649px; margin-top:-324px; margin-left:-484px; overflow-y: scroll; display: none; background:#fff!important; text-align: center;}
	.pop_box .pop_box_cont{width:969px; height:649px; text-align:center; background: #fff;}
	.notices{position: fixed; z-index:99999; top:130%; left:50%; width:717px; height:649px; margin-top:-324px; margin-left:-358.5px; overflow-y: scroll; display: none;}
	.notices .notices_contwrap{width:700px; height:649px;background:#fff; position: relative; z-index:10;}
	.notices .notices_contwrap .notices_tab{width:100%; text-align: center; position: absolute;top:0px;}
	.notices .notices_contwrap .notices_tab div{display: inline-block; *display: inline; display: -moz-inline-stack;}
	.notices .notices_contwrap .notices_cont{background:#fff;}
	.notices .notices_contwrap .notices_cont div{display: none;}


	.close{position: fixed; top:-155px; left:0px; z-index:999999; cursor: pointer; display: none;}
	.bg_box{position: fixed; top:0px; left:0px; z-index: 9999; display: none;}

	.btnz div{cursor: pointer;}

	.mde32{margin-top:80px;}
	.mss87{margin-top:30px;}
	.mss84{margin-top:10px;}
	.bb06{margin-top:32px;}
	.mgm17{margin-top:121px;}
	
	.gm17 .corss_icon{top:295px!important;}

	.ltab_m{position: fixed; left:-127px; top:61px; z-index:90;}
	.ltab_m p{cursor:pointer;}

/*-- 2017.1.16 메이크샵 원스탑 리뉴얼 (고종현) --*/

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

/* 상단 로고 영역 */

#header {
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: rgba(19,19,19, 0.9);
    z-index: 9999;
    position: relative;
}

#header .logo-box {
    padding: 0px 25px;
}

/* 롤링 배너 영역 */

.rolling-bg-wrap {
    width: 100%;
    height: 1080px;
    position: relative;
    margin-top: -80px;
}

.rolling-bg-wrap ul {
    height: 1125px;
    position: absolute;
    left: 50%;
    margin-left: -1000px;
}

/*
.rolling-bg-wrap ul li img {
    width: 100% !important;
}
*/

/* 상단 컨텐츠 영역 */
.top-content-wrap {
    position: absolute;
    top: 134px;
    width: 100%;
    z-index: 9999;
}

.top-content-wrap .top-content-inner {
    width: 1200px;
    margin: 0 auto;
}

/* 스킨 프로세스 정보 */

.process-info {
    background: rgba(0,0,0, .2) url(../../img/common/type-a.png) no-repeat 790px 119px !important;
}

.process-info .title h2 {
    font-size: 35px;
    color: #4bb8ff;
    line-height: 50px;
    margin-bottom: 33px;
}

.process-info .info-box {
    min-width: 424px;
    margin-bottom: 40px;
}

.process-info .info-box h3.subject {
    font-size: 25px;
    font-weight: bold;
    line-height: 34px;
    color: #fff;
    margin-bottom: 10px;
    text-indent: 21px;
    background: url(../../img/common/symbol-st.png) no-repeat left 15px;
}

.process-info .info-box p {
    font-size: 20px;
    text-indent: 21px;
    line-height: 34px;
    color: #fff;
    font-weight: 300;
}

/* 탭 컨텐츠 영역 */
.content-tab-wrap,
.process-info {
    padding: 60px 0px 10px 55px;
    margin-top:55px;
    background: rgba(0,0,0, .2);
}

.content-tab-des {
    width: 100%;
    height: 280px;
    position: relative;
    display: none;
}

.content-tab-des.on {
    display: block;
}

.type-img {
    position: absolute;
    width: 480px;
    height: 100%;
/*    top: 5px;*/
    top: 100px;
    left: 0;
    opacity: 1;
    text-align: center;
}

.type-b .type-img {
    top: 18px;
    left: 30px;
}

.type-des {
    position: absolute;
    width: 720px;
    height: 100%;
    right: 0;
    display: table;
}

.type-des-box {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: right;
    padding-right: 90px;
}

.type-des-box h2 {
    font-size: 40px;
    color: #fff;
    letter-spacing: 1px;
}

.type-des-box p.des-price {
    font-size: 27px;
    color: #49bbf7;
    font-weight: bold;
    margin: 15px 0px;
    letter-spacing: 1px;
}

.type-des-box p {
    font-size: 16px;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1px;
}

/* 탭 메뉴 영역 */
.tab-menu-wrap ul {
    font-size: 0;    
}

.tab-menu-wrap ul li {
    display: inline-block;
    width: 33.3%;
    text-align: center;
    opacity: .3;
    border-top: 1px solid #fff;
}

.tab-menu-wrap ul li a {
    display: block;
    width: calc(100% - 1px);
    height: calc(100% - 50px);
    margin: 25px 0px;
    text-decoration: none;
}

.tab-menu-wrap ul li:nth-of-type(1) a{
    border-right: 1px solid #fff;
}

.tab-menu-wrap ul li:nth-of-type(3) a{
    border-left: 1px solid #fff;
}

h1.tab-title {
    color: #fff;
    font-size: 48px;
    font-weight: normal;
}

h1.tab-title span {
    font-weight: bold;
}

p.tab-price {
    font-size: 30px;
    color: #fff;
    margin: 10px 0px 15px;
}

p.tab-des {
    font-size: 18px;
    color: #fff;
}

.tab-menu-wrap ul li.on {
    background: rgba(0,0,0, .4);
    opacity: 1;
    border-color: transparent;
}

.tab-menu-wrap ul li.on a {
    border-color: transparent;
}

.tab-menu-wrap ul li.on h1.tab-title {
    color: #49bbf7;
}

/* 고정 탭 메뉴 영역 */
.fix-tab-menu-wrap {
    position: fixed;
    top: -200px;
    left: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: 0px 0px 1px #999;
}

.fix-tab-menu-wrap .tab-menu-wrap {
    width: 1200px;
    margin: auto;
}

.fix-tab-menu-wrap .tab-menu-wrap ul li {
    opacity: 1;
}

.fix-tab-menu-wrap .tab-menu-wrap ul li a {
    margin: 15px 0px;
}

.fix-tab-menu-wrap .tab-menu-wrap h1.tab-title {
    font-size: 30px;
    color: #000;
}

.fix-tab-menu-wrap .tab-menu-wrap h1.tab-title span {
    color: #49bbf7;
}

.fix-tab-menu-wrap .tab-menu-wrap p.tab-price {
    font-size: 17px;
    color: #000;
    margin: 5px 0px 0px;
}

/* 체크 포인트 영역 */

.check-point-wrap {
    width: 1200px;
    margin: 70px auto;
}

.check-point-inner {
    padding: 43px;
    background: #fff;
}

.check-point-inner h1 {
    font-size: 32px;
    color: #222;
    margin-bottom: 20px;
    display: inline-block;
}

.check-point-inner li {
    font-size: 17px;
    line-height: 1.7;
    color: #2c2c2c;
}

.check-point-inner .mod_btn {
    display: inline-block;
    margin-left: 15px;
}

.check-point-inner .mod_btn a {
    color: #49bbf7;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

.check-point-wrap .pop_box_cont h1 {
    margin: 30px 0px;
    font-size: 18px;
}

.check-point-wrap .pop_box_cont h1 span {
    color: #49bbf7;
}

.check-point-wrap .pop_box_cont img {
    width :100%;
/*    margin-bottom: 50px;*/
}

/* 상품 영역 */

.item_box_wrap {
    padding: 64px 64px 64px 85px;
    background: #fff;
}

.item_box_wrap .spac_wrap {
    width: 579px;
    margin-left: 79px;
}

.spac_cont_text span.color {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}

/* 절대 변함없을 디자인위브의 약속! */

.wib-promise-wrap {
    width: 1200px !important;
    margin: 80px auto 100px;
    padding: 80px 0px;
    background: #fff;
}

.wib-promise-title {
    padding-bottom: 80px;
}

.wib-promise-title h1 {
    font-size: 45px;
    color: #222;
    font-weight: 400;
    text-align: center;
}

.wib-promise-title h1 span {
    color: #4bb8ff;
    font-weight: 700;
}

.wib-promise-box {
    float: left;
    width: 25%;
    text-align: center;
}

.wib-promise-box h2 {
    margin: 30px 0px 15px;
    font-size: 55px;
    font-weight: bold;
    color: #222;
}

.wib-promise-box p {
    font-size: 17px;
    color: #2c2c2c;
    line-height: 1.5;
}

.wib-promise-box p span {
    font-weight: bold;
}

/* 디자인위브와 함께한 클라이언트 */

.wib-client-wrap {
    width: 1200px;
    margin: 0 auto 100px;
}

.wib-client-title {
    margin-bottom: 35px;
    text-align: center;
}

.wib-client-title h1 {
    font-size: 45px;
    color: #222;
    font-weight: 400;
}

.wib-client-title h1 span {
    color: #00c6f1;
}

/* copyright */
.copyright-wrap {
    width: 100%;
    height: 61px;
    line-height: 61px;
    text-align: center;
    background: #292929;
}

.copyright-wrap p {
    color: #fff;
    font-size: 13px;
}