/*mainpage*/
.visual-body{text-align:left;max-width:1000px;width:100%;margin:auto;}
.visual-txt{min-width:500px;display:inline-block;text-align:left;padding-left:2%;letter-spacing:-0.07em;z-index:11;position:absolute;margin-top:120px;}
.visual-img{display:inline-block;z-index:10;float:right;}
.visual-img.vcase2{padding-top:0;margin-right:-20%;float:right;}
.mbanner{position:relative;height:280px;}
.mbanner p.tit {font-size:20px; color:#333; font-weight:bold;}
.mbanner p.stit {font-size:16px; color:#555;  }
.mbanner p.txt {font-size:14px; color:#888; margin-top:20px;line-height:1.4em;}
.mbanner .sbanner-txt{ z-index: 11; display: inline-block; width:53%;float:left;padding-left: 7%; padding-top: 80px;}
.mbanner .sbanner-img{ z-index: 10; display: inline-block; width:30%;float:right;padding-top:40px; padding-right:10%;}
.mbanner .sbanner-img img{width:116px;max-width:120px;}
.subSlidetitle1{background-color:#9289bc;color:#FFF;position:absolute;z-index:12;width:60px;height:60px;line-height:58px;text-align:center;font-size:14px;}
.subSlidetitle2{background-color:#9289bc;color:#FFF;position:absolute;z-index:12;width:60px;height:50px;line-height:18px;text-align:center;font-size:14px;padding-top:10px;}
.subSlidetitle3{background-color:#9289bc;color:#FFF;position:absolute;z-index:12;width:40px;padding:0 10px;height:50px;line-height:18px;text-align:center;font-size:14px;padding-top:10px;}
.mbanner1{background-color:#f7f7f7;}
.mbanner2{background: url("/images/main/mbanner2_bg.jpg") center ;}
.mbanner3{background-color:#f7f7f7;height:280px;}
.mbanner3 iframe{height:280px;}
.visual-txt-center{display:none;}
.snsfb{background: url("/images/main/sns_facebook.png") no-repeat center ;background-size:36px;width:36px;height:36px;display:inline-block;}
.snstw{background: url("/images/main/sns_twitter.png") no-repeat center ;background-size:36px;width:36px;height:36px;display:inline-block;}
.dermartlogy-slogan {  font-size: 50px;  color:#222;  font-weight:700;}
.dermartlogy-sub-slogan {  font-size: 21px;  padding-top: 24px;}
.dermartlogy-sub-slogan img{ width:160px;}
.dermartlogy-sub-slogan-sub {  font-size: 23px;  line-height:1.4em !important;  padding-top: 34px;  color:#555;}
.fontbold.color222.font30, .fontbold.color222.font26{line-height:1.6em !important;}
.color222{color:#222 !important;}
.color555{color:#555;}
.color888{color:#888;}
.colorred{color:#cd4040;}
.font26{font-size:26px;}
.font30{font-size:30px;}
.font15{font-size:15px}
.font20{font-size:20px}
.fontnormal{font-weight:normal !important;}
.ml20{margin-left:20px;}
.ml50{margin-left:50px;}
.tcenter{text-align:center;}
.tleft{text-align:left !important;}
.tright{text-align:right !important;}
.backccc{background-color:#ccc !important;color:#fff !important;}
.back555{background-color:#555 !important;color:#fff !important;}
.backfff{background-color:#fff !important;color:#555 !important;}
.bdno{border:0 !important;}
.bdbottom{border-bottom:1px solid #ddd;}
.mtable.h50 td{height:50px;}
.mtable.h50 .tleft{padding-left:20px}
.mtable.h50 .tright{padding-right:20px}
.bigbtn{padding:3px 20px;min-height:50px !important;min-width:180px !important;font-size:16px;}
.bigbtn div{display:inline-block;color:#fff;margin-top:11px;}
.btnwhite{background-color:#fff !important;color:#a8a0cf !important;}
.btnwhite div{color:#a8a0cf !important;}
.btnround{border-radius:30px !important; }
.privacydiv{width:100%;font-size:13px;}
textarea{font-family:'Noto Sans KR' !important;letter-spacing:-0.03em;}
.resultitem h2{text-align:left;padding-left:10px;}
.resultitem{background-color:#f5f5f5;width:100%;padding:10px 0;}

.privacy{width:100%;height:100px;margin-top:-5px;font-size:13px !important;}
.privacydiv span{font-size:14px;}
.vtitlebar{width:100%;padding:15px 0;background-color:#a29bc5;text-align:center;color:#fff;font-size:20px;}
.textresult{width:100%;padding:70px 0;text-align:center;}
.textresult .text1{font-size:30px;width:100%;text-align:center;}
.textresult .text1 span{color:#afa9d9;font-weight:bold;}
.textresult .text2{margin-top:30px;font-size:15px;width:100%;text-align:center;}
.resultitem h2{text-align:center;margin:auto;}

/*sub*/
/*location bar*/
#catenavWrap{position:relative;width:100%; border-bottom: 1px solid #dadada; background:#fbfbfb; }
#catenavWrap .catenav {position:relative; width: 980px; height: 43px; margin:0 auto;}
#catenavWrap .catenav .topright{ position: absolute; top: 0px; display:inline;right: 0;top:14px; color:#888;font-size:13px;}

/*lnb*/
.gnb_left {position:relative; width:180px; height:auto; min-height:300px; float:left; }
.gnb_left h2 {font-size:25px; color:#5f6062; height:25px; padding:35px 0 35px 15px;}
			
#lnb { width:100%;height:auto; }
#lnb ul { float:left;position:relative;width:100%;height:auto; }
#lnb>ul>li:first-child {border-top:1px #e9e9e9 solid;}
#lnb>ul>li { float:left;position:relative;width:100%;height:auto;min-height:40px; font-size:14.5px;background-color:#FFFFFF;color:#777;border-bottom:1px #e9e9e9 solid;cursor:pointer;background-repeat:no-repeat;background-position:right 10px; }
#lnb>ul>li:hover {background-image:url(../images/icon/left_step_bg_iton.jpg);background-color:#c6c4d2;color:#FFFFFF;}
#lnb>ul li span {padding-left:15px;}
#lnb>ul>li>span { float:left;position:relative;width:100%; width:100%; line-height:38px; }
#lnb>ul>li.on { background-color:#c6c4d2;color:#FFFFFF;border-bottom:1px #e9e9e9 solid;background-image:url(../images/icon/left_step_bg_iton.jpg); }
#lnb>ul>li.on>span>a{color:#FFFFFF;}
#lnb>ul>li>ul {display:none}
#lnb>ul>li.on ul  {display:block}
#lnb>ul>li>ul>li { float:left;position:relative;width:100%;height:auto;min-height:29px;line-height:29px;font-size:14px;background-color:#FFFFFF;color:#777; }
#lnb>ul>li>ul>li a { margin-left:10px;color:#a6a6a6}
#lnb>ul>li>ul>li.on {background-color:#ebebeb;color:#FFFFFF;}
#lnb>ul>li>ul>li.on a {color:#c6c4d2}

/* contents */
#containerWrap {background:url('/images/common/content_bg.jpg') 0 0 no-repeat; background-attachment: fixed; width:100%;z-index:1}
#container {max-width:900px;width:94%; margin:0 auto; background:#fff; z-index:10;}
#content_sub {width:720px; display:inline-block; z-index:11;}
.content_full {padding:40px 3% 200px; min-height:700px;z-index:11;}
#container h1 {font-size:25px; color:#5f6062; font-weight:normal; line-height:1; margin-bottom:40px; }
#container h2 {font-size:18px; color:#5f6062; font-weight:normal; line-height:1; margin-bottom:20px;margin-top:20px;}
#container h1 .h1_bullet {width:4px; height:23px; background:#c6c4d2; float:left; margin:2px 10px 0 0; }
#container .content-box{margin-top:20px;margin-bottom:20px;}
.mtable{  max-width: 100%;  width: 100%;  border-spacing: 0;  border-collapse: collapse;  background-color: transparent;}
.mtable td, .mtable th{vertical-align:middle;padding:7px 5px;height:28px;}
.mtable th{text-align:center;font-size:15px; border-bottom: 1px solid #999;color:#555;border-top:2px solid #999;font-weight:normal;}
.mtable td{ border-bottom: 1px solid #f4f4f4;text-align:center;font-size:14px;}
.mtable td div{font-size:14px;}
.bdall{border:1px solid #f4f4f4; }
.tleft{text-align:left !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb40{margin-bottom:40px !important;}
.mt20{margin-top:20px !important;}
.mt40{margin-top:40px !important;}
.bgf4{background-color:#f4f4f4;}
.bgfff{background-color:#fff;}
.mtable .bd_viewth{text-align:left;}
.mtable .bd_title{color:#555;font-size:15px;text-align:left;display:inline-block;}
.mtable .bd_date{color:#999;text-align:right;display:inline-block;float:right;font-size:14px;	}
.mtable .bd_contents{text-align:left;height:200px;min-height:200px;padding-top:20px;padding-bottom:20px;vertical-align:top;}
.mobile .bd_date{width:96%;padding-top:12px;height:28px;vertical-align:middle}
.mtable.bd_faq{border-top:2px solid #999;}
.mtable.bd_faq td{vertical-align:top;padding:12px 7px;height:auto;	}
.mtable.bd_faq .bd_a td{height:100px;background-color:#fafafa;}
.mtable.bd_faq .bd_a .atitle{font-weight:bold;color:#555;text-align:center;}
.mtable.bd_faq .bd_a .tleft{color:#555;}
.bannerproduct{background-color:#fbfbfb;padding:0 0 0 6%;width:94%}
.bannerproduct table{width:100%}
.bannerproduct .logoimg{width:180px;margin-top:10px;}
.bannerproduct .tright img{width:300px;}
.bannerfaq{background-color:#fbfbfb;width:94%;padding:30px 3%;}
.bannerfaq table{width:100%}
.bannerfaq table td{vertical-align:middle;}
.mtable label{margin-left:5px; margin-right:10px;}
/* Paging */
.pagingWrap {width:100%;  padding-top:5px; overflow:visible; margin-top:50px;margin-bottom:70px; position:relative; float:left; }
.pagingWrap .paging {text-align:center;font-size:14px;}
.pagingWrap .paging * {vertical-align:top; font:14px/33px ; color:#666;}
.pagingWrap .paging li {padding:15px;}
.pagingWrap .paging li:first-child {background:none;}
.pagingWrap .paging strong a, .paging strong {color:#333; text-decoration:underline; font-weight:bold;}
.pagingWrap .paging ul {margin:0 10px 0 0px; display:inline;}
.pagingWrap .paging ul li {display:inline;}
.pagingWrap .paging a{display:inline-block;border:1px solid #ddd;border-radius:2px;}
.pagingWrap .paging a.alink{width:32px;text-align:center;padding-top:7px;padding-bottom:7px;color:#999;}
.pagingWrap .paging a.alink.now{background-color:#f5f5f5;color:#9290bf;}
.pagingWrap .paging a.prev, .paging a.next {padding-top:7px;padding-bottom:7px;color:#ccc;}
.pagingWrap .paging a.prev {padding-left:5px;padding-right:13px;}
.pagingWrap .paging a.next {padding-left:13px;padding-right:5px;}
.pagingWrap a.btnRight {position:absolute; top:0; right:0;}


/*brand*/
#container h1 {font-size:25px; color:#5f6062; font-weight:normal; line-height:1; margin-bottom:40px; }
#container .brand_txt {text-align:center; margin-top:60px; line-height:1em; letter-spacing:-0.03em;}
#container .brand_txt h2 {color:#b6b2cf; font-size:23px; line-height:1em; margin-bottom:20px; font-weight:bold;}
#container .brand_txt h2 .tit_bar {width:15px; height:3px; background:#b6b2cf; margin:0 auto; }
#container .brand_txt h2 img{vertical-align:-5px;}
#container .brand_txt p {font-size:15px; line-height:1.5em; margin-bottom:20px; }
#container .responsive100p{text-align:center;}
#container .responsive100p img{max-width:900px;width:100%;}
#container .responsive650px img{max-width:650px;width:100%;}
.content_full {    padding: 20px 3%;}
#container h1 {font-size:24px; margin-bottom:20px; margin-top:20px;}
#container h1 .h1_bullet {    width: 4px;    height: 26px;    background: #c6c4d2;    float: left;    margin: 0px 10px 0 0;}
#container .brand_txt {margin-top:30px;}
#container .brand_txt p {    font-size: 15px;  margin-bottom: 20px;}

/*product*/
.titlement{display:inline-block;font-size:14px;margin-top:20px;}
.mdl-tabs__panel{margin-bottom:40px;}
.detail_title{padding:0;}
.detail_title .dname{font-weight:bold;font-size:28px;margin-bottom:5px;color:#555;}
.detail_title .dename{font-size:14px;margin-bottom:18px;color:#555;}
.detail_title .dment{font-size:18px;margin-bottom:40px;color:#888}
.detail_spec{width:100%;}
.speclist{border-top:1px solid #ddd;padding-top:13px;padding-bottom:13px;width:100%;display:block;vertical-align:middle;background: url("/images/main/keyarrow.png") no-repeat right 5px;font-size:14px;}
.speclist.on{background: url("/images/main/keyarrow.png") no-repeat right -28px;font-size:14px;}
.specdata{padding-top:0;padding-bottom:13px;width:100%;display:block;font-size:14px;}
.nopointer{cursor:none;}
.pointer{cursor:pointer;}
.ml{font-size:22px;}
.checklist li{width:45.5%;padding:20px 2%;display:inline-block;font-size:15px;color:#777}
.checklist .rightli{text-align:right;}
.checklist li label{margin-right:10px;vertical-align:3px;}

@media screen and (min-width: 1000px) {
.dermartlogy-be-together-section {  position: relative;  height: 500px;  width: auto;    background-size: cover;}
.bx-pager {	top:470px;}
.visual-img.vcase1{padding-top:120px;}
.mdl-tabs{margin-top:-20px;margin-bottom:20px;}
}
@media screen and (max-width: 999px) {

.dermartlogy-be-together-section {    height: 400px;}
.visual-txt{margin-top:80px;}
.visual-img.vcase2{margin-right:-20%;}
.visual-img.vcase2 img{min-width:650px;width:650px;}
.visual-img.vcase1 img{min-width:350px;width:350px;}
.visual-img.vcase1{padding-top:80px;}
.visual-img{margin-left:0;}
 .bx-pager {	top:450px;}
.mdl-tabs{margin-top:-20px;margin-bottom:20px;}
#banner_wap_body, .main_visual,.box_skitter_body,.box_skitter_main, .box{height:400px !important;}
.box_skitter_controllbultbox{top:380px !important;border:none !important;}
.box_skitter_bultbox{left:75% !important;top:-20px !Important;}
.dermartlogy-card-container.mdl-grid.skin-grid{margin-left:0 !important;}
.resultitem h2{text-align:center;margin:auto;}

}
@media (min-width: 480px) and (max-width: 839px) {
.subSlidetitle1{width:120px;padding:12px 0;height:auto;line-height:1em;text-align:center;font-size:16px;}
.subSlidetitle2{width:120px;padding:12px 0;height:auto;line-height:1em;text-align:center;font-size:16px;}
.subSlidetitle3{width:120px;padding:12px 0;height:auto;line-height:1em;text-align:center;font-size:16px;}

.mbanner{height:220px;}
.mbanner .sbanner-txt{ width:60%;float:left;margin-left:0;padding-left: 5%; padding-top: 60px;}
.mbanner .sbanner-img{ width:25%;padding-right:0;padding-top:20px;text-align:center;}
.mbanner .sbanner-img img{width:110px;}
.mbanner3{height:280px;}
}

@media screen and (max-width: 640px) {
#banner_wap_body, .main_visual,.box_skitter_body,.box_skitter_main, .box{height:350px !important;}
.box_skitter_controllbultbox{top:330px !important;border:none !important;}
.box_skitter_bultbox{left:70% !important;top:-20px !important; }
.mdl-card__actions {
    font-size: 13px;
    line-height: 15px;
    padding: 0px 16px 10px;
}
.bx-pager {	top:370px;}
.dermartlogy-be-together-section {    height: 350px;}
.visual-body{padding:0;}
.visual-txt{display:none}
.visual-txt-center{display:block;text-align:center;margin-bottom:20px;padding-top:25px;z-index:11;width:100%;}
.visual-img{width:100%;display:block;text-align:center;position:relative;}
.visual-img img{width:100%;max-width:300px;}
.visual-img.vcase1{padding-top:0;}
.visual-img.vcase1 img{min-width:300px;width:300px;}
.visual-img.vcase2{float:none;margin:0;}
.visual-img.vcase2 img{width:120%;max-width:600px;margin-left:-5%;}
.dermartlogy-slogan {  font-size: 30px; }
.dermartlogy-sub-slogan {    font-size: 15px;    padding-top: 24px; }
.dermartlogy-sub-slogan-sub {font-size:12px;padding-top:10px;line-height:1.4em !important;}
.dermartlogy-sub-slogan-sub .font30{font-size:18px;line-height:1.8em;}
.dermartlogy-sub-slogan-sub .font26{font-size:14px;line-height:1.6em;}
    line-height: 1;
    margin-bottom: 40px;
.mtable td{font-size:15px;}
.pagingWrap .paging a.alink{width:32px;text-align:center;padding-top:7px;padding-bottom:7px;color:#999;}
.pagingWrap .paging a.alink.now{background-color:#f5f5f5;color:#9290bf;}
.pagingWrap .paging a.prev, .paging a.next {padding-top:7px;padding-bottom:7px;color:#ccc;}
.pagingWrap .paging a.prev {padding-left:5px;padding-right:13px;}
.pagingWrap .paging a.next {padding-left:13px;padding-right:5px;}
#container {width:90%;}
.content_full {    padding: 20px 5%;}
.brand_txt h2 img{margin:10px auto 0;line-height:2em}
.mdl-tabs__tab{font-size:14px; padding: 0 5px 0 5px;width:120%;}
.bannerfaq{width:94%;padding:20px 3%;}
.bannerfaq .font15{font-size:13px}
.bannerfaq .font20{font-size:17px}
.bannerproduct .font20{font-size:15px;}
.bannerproduct .logoimg{width:120px;margin-top:0px;}
.bannerproduct .tright img{width:200px;}
.checklist li{width:94%;padding:15px 3%;display:block;font-size:15px;}
.checklist .rightli{text-align:left;padding:0px 3% 15px !important;}
.checklist li span{font-size:15px;vertical-align:2px;}
.bigbtn{padding:0px 20px;min-height:40px !important;min-width:180px !important;font-size:16px;}
.bigbtn div{display:inline-block;color:#fff;margin-top:11px;margin-right:-10px;}
#container h1 {
    margin-bottom: 10px;
    margin-top: 10px;
}
}

@media screen and (max-width: 480px) {
.mtable td{ font-size:15px;}

.subSlidetitle1{width:120px;padding:12px 0;height:auto;line-height:1em;text-align:center;font-size:16px;}
.subSlidetitle2{width:120px;padding:12px 0;height:auto;line-height:1em;text-align:center;font-size:16px;}
.subSlidetitle3{width:120px;padding:12px 0;height:auto;line-height:1em;text-align:center;font-size:16px;}
.mbanner{position:relative;height:190px;}
.mbanner .sbanner-txt{ width:60%;float:left;margin-left:0;padding-left: 5%; padding-top: 50px;}
.mbanner .sbanner-img{ width:25%;padding-right:0;padding-top:20px;text-align:center;}
.mbanner .sbanner-img img{width:80px;}
.mbanner p.txt {margin-top:10px;}
.mbanner3{height:280px;}

}