@charset "utf-8";

.textcolor1 { color: #ff7ead;}
.com-graphrow-color1 { background-color: #f35f91;}

.textcolor2 { color: #81d4fc;}
.com-graphrow-color2 { background-color: #8cd3ff;}

.textcolor3 { color: #c7e455;}
.com-graphrow-color3 { background-color: #c8e057;}

.textcolor4 { color: #91aef0;}
.com-graphrow-color4 { background-color: #82a3ee;}

.com-graphrow { width: 100%; max-width:960px;}
.com-graphrow dl dt{ width: 100%; padding-bottom: 10px;}
.com-graphrow dl dd{ width: 100%; height:20px; position: relative;}

.com-graphrow-totalprogress { width: 72%; background: url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/totalbg.png') #fff repeat-x 0 0;}
.com-graphrow-progress { width: 0; height:20px;background-image: url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/overpattern.png'); background-repeat: repeat-x; background-position: 0 0; }
.com-graphrow-progress span { position: absolute; right:0; top:-8px; }

.tablet .com-graphrow-totalprogress { width: 80%; }

.web .com-graphrow dl dt{ padding-bottom: 20px;}
.web .com-graphrow dl dd{ height:30px; }
.web .com-graphrow-totalprogress { width: 79%;}
.web .com-graphrow-progress { height:30px;}

/* 2017.11 PDP 개선 */
.mobile .clinical_data{}
.mobile .clinical_data .titleWrap h4.s-title {padding-bottom:0}
.mobile .clinical_data .graph_inner > .text .opt-btm  {padding-top:10px; font-size:12px}
.mobile .clinical_data .graph_inner > .info-text-top .opt-btm  {padding:14px 0 10px;font-size:14px}
.mobile .clinical_data > .opt-tc img {width:100%}

.web .clinical_data{}
.web .clinical_data .com-graphrow  {padding:0}
.web .clinical_data .com-graphrow-progress span {font-size:26px;  line-height:30px}

.clinical_data{}
.clinical_data .titleWrap h4.s-title + .text {padding:10px 0}
.clinical_data .titleWrap h4.s-title > .text {padding:10px 0}
.clinical_data .titleWrap .opt-pbb{padding-bottom:0}
.clinical_data .com-graphrow-progress span {top:0px; font-size:26px; font-weight:bold; line-height:30px}
.clinical_data .com-graphrow-progress span em {font-weight:bold}
.clinical_data .graph_inner > .graph_wrap {margin-top:40px}
.clinical_data .graph_inner > .text .opt-btm  {padding-top:30px; padding-bottom:0; font-size:14px}
.clinical_data .graph_inner > .info-text-top .opt-btm  {padding:10px 0 40px; font-size:18px; text-align: center; color:#666;}

/* 사용전후 */
.mobile .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem {float:none; width:49%; padding:0 0 0 2.4%}
.mobile .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem:first-child {padding:0 2.4% 0 0} 
.mobile .clinical_data .column_inner {padding:36px 0 0 !important}
.mobile .clinical_data .column_inner .column {padding-top:50px}
.mobile .clinical_data .column_inner .opt-btm  {font-size:16px}
.mobile .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 {width:100%;}
.mobile .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100:first-child {padding:0;}
.mobile .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 img {width:100%}

.tablet .clinical_data .combox-colwrap.combox-col50x50 {margin-left:0}
.tablet .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem {float:none; display:inline-block; width:49.8%; padding:0 2.4%}
.tablet .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 {width:100%;}
.tablet .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100:first-child {padding:0;}
.tablet .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 img {width:100%}

.web .clinical_data .combox-colwrap.combox-col50x50 {margin:0}
.web .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem {float:none; width:49.8%; padding:0 2.4%}
.web .clinical_data .column_inner .opt-btm  {font-size:20px}
.web .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem{margin:0; display:inline-block; text-align:center}
.web .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 {width:95.2%}
.web .clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 img {width:auto; max-width:640px}

.clinical_data .subpage .opt-stb {font-size:20px}
.clinical_data .column_inner {padding:4% 4% 0; margin-top:60px}
.clinical_data .column_inner .column {padding-top:6.6%}
.clinical_data .column_inner .s-title {padding:0;text-align:center}
.clinical_data .column_inner .opt-btm  {font-size:20px;color:#666;text-align:center}
.clinical_data .combox-colwrap.combox-col50x50 {text-align:center}
.clinical_data .combox-colwrap.combox-col50x50 .combox-colitem{margin:0; display:inline-block; text-align:center}
.clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 {width:95.2%}
.clinical_data .combox-colwrap.combox-col50x50 .combox-colitem.combox-col100 img {width:auto; max-width:640px}

/* 그래프 Type */
.clinical_data .com-grap-color1 .textcolor {color:#cf326a;}
.clinical_data .com-grap-color1 .com-graphrow-color {background-color: #ff7ead}
.clinical_data .com-grap-color1 .box_add_graph .box_unit_1 div:after {background:#ff7ead} 
.clinical_data .com-grap-color1 .box_add_graph .box_unit_2 div:after {background:#ff7ead} 

.clinical_data .com-grap-color2 .textcolor {color:#106ea8;}
.clinical_data .com-grap-color2 .com-graphrow-color {background-color: #94d2f6}
.clinical_data .com-grap-color2 .box_add_graph .box_unit_1 div:after {background:#94d2f6} 
.clinical_data .com-grap-color2 .box_add_graph .box_unit_2 div:after {background:#94d2f6} 

.clinical_data .com-grap-color3 .textcolor {color:#687e03}
.clinical_data .com-grap-color3 .com-graphrow-color {background-color: #cbe166}
.clinical_data .com-grap-color3 .box_add_graph .box_unit_1 div:after {background:#cbe166} 
.clinical_data .com-grap-color3 .box_add_graph .box_unit_2 div:after {background:#cbe166} 

.clinical_data .com-grap-color4 .textcolor {color:#4d56d8}
.clinical_data .com-grap-color4 .com-graphrow-color {background-color: #91aef0}
.clinical_data .com-grap-color4 .box_add_graph .box_unit_1 div:after {background:#82a3ee}
.clinical_data .com-grap-color4 .box_add_graph .box_unit_2 div:after {background:#82a3ee}


.mobile .clinical_data .graph_wrap {margin-bottom:0}
.mobile .graph_type1 .graph_wrap {margin-bottom:10px}
.mobile .graph_type1 .opt-stb {padding-bottom:10px; font-size:14px}
.mobile .graph_type1 .graphbox {height:20px}
.mobile .graph_type1 .clinical_data .graph_inner {padding:0}
.mobile .graph_type1 .clinical_data .graph_inner > .text .opt-btm  {padding-top:10px}
.mobile .graph_type1 .clinical_data .graph_inner > .info-text-top .opt-btm  {padding-top:14px}
.mobile .graph_type1 .com-graphrow-progress {height:20px}
.mobile .graph_type1 .com-graphrow-progress span {margin-top:-5px;font-size:20px}
.mobile .graph_type2 .graph_wrap {margin-bottom:5.4%}
.mobile .graph_type2 .graphbox {height:auto}
.mobile .graph_type2 .clinical_data .graph_inner {padding:0}
.mobile .graph_type2 .clinical_data .graph_inner > .text .opt-btm  {padding-top:10px}
.mobile .graph_type2 .clinical_data .graph_inner > .info-text-top .opt-btm  {padding-top:14px}
.mobile .graph_type2 .com-graphrow {padding-bottom:20px}
.mobile .graph_type2 .com-graphrow-totalprogress {width:84.55%;}
.mobile .graph_type2 .com-graphrow-progress span.value {right:0; margin-top:0; font-size:16px;}
@media (min-width: 320px) and (max-width:768px) { 
	.mobile .graph_type2 .com-graphrow-progress span.value {margin-top:2%;}
}
@media (min-width: 320px) and (max-width:510px) { 
	.mobile .graph_type2 .com-graphrow-progress span.value {margin-top:1%;}
}
@media (max-width:320px){
	.mobile .graph_type2 .com-graphrow-progress span.value {margin-top:0;}
}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep5 {margin-left:-0.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep10 {margin-left:-0.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep15 {margin-left:-1%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep20 {margin-left:-1%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep25 {margin-left:-1.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep30 {margin-left:-1.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep35 {margin-left:-2%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep40 {margin-left:-2%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep45 {margin-left:-2.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep50 {margin-left:-2.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep55 {margin-left:-3%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep60 {margin-left:-3%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep65 {margin-left:-3.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep70 {margin-left:-3.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep75 {margin-left:-4%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep80 {margin-left:-4%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep85 {margin-left:-4.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep90 {margin-left:-4.5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep95 {margin-left:-5%;}
.mobile .graph_type2 .com-graphrow-progress span.arrowstep100 {margin-left:-5%;}
.mobile .graph_type2 .opt-stb {padding-bottom:9%; font-size:14px}
.mobile .graph_type2 .com-graphrow-color1 {background-size:13px 19px}
.mobile .graph_type2 .com-graphrow-color2 {background-size:13px 19px}
.mobile .graph_type2 .com-graphrow-color3 {background-size:13px 19px}
.mobile .graph_type2 .com-graphrow-color4 {background-size:13px 19px}
.mobile .graph_type3 .clinical_data .graph_inner {padding:0}
.mobile .graph_type3 .clinical_data .graph_inner > .graph_wrap {margin-top:50px}
.mobile .graph_type3 .clinical_data .graph_inner > .text .opt-btm {padding-top:5%}
.mobile .graph_type3 .clinical_data .graph_inner > .info-text-top .opt-btm {padding-top:14px}
.mobile .graph_type3 .graph_wrap .graph {width:49%; margin-left:0}
.mobile .graph_type3 .graph_wrap .graph .com-graphrow {padding-bottom:32%}  
.mobile .graph_type3 .graph_text {padding:12% 5% 0%; font-size:14px}
.mobile .graph_type3 .box_add_graph .box_value {font-size:23px}
.mobile .graph_type4 .clinical_data .graph_inner {padding:0}
.mobile .graph_type4 .clinical_data .graph_inner > .graph_wrap {margin-top:60px}
.mobile .graph_type4 .clinical_data .graph_inner > .text .opt-btm {padding-top:7%}
.mobile .graph_type4 .clinical_data .graph_inner > .info-text-top .opt-btm {padding-top:14px}
.mobile .graph_type4 .graph_wrap .graph {width:49%; margin-left:0}
.mobile .graph_type4 .graph_wrap .graph .com-graphrow {padding-bottom:32%}  
.mobile .graph_type4 .graphbox {padding-bottom:25%}
.mobile .graph_type4 .graph_text {padding:6% 5% 0;font-size:14px} 
.mobile .graph_type4 .box_add_graph .box_value {font-size:24px}
.mobile .graph_type5 .clinical_data .graph_inner {padding:0}
.mobile .graph_type5 .clinical_data .graph_inner > .graph_wrap {margin-top:60px}
.mobile .graph_type5 .clinical_data .graph_inner > .text .opt-btm  {padding-top:10px}
.mobile .graph_type5 .clinical_data .graph_inner > .info-text-top .opt-btm  {padding-top:14px}
.mobile .graph_type5 .graph_wrap  {margin-bottom:6%}
.mobile .graph_type5 .graph_wrap .graph {width:49%; margin-left:0}
.mobile .graph_type5 .graph_wrap .graph .opt-pbm {padding-bottom:5px} 
.mobile .graph_type5 .graph_text {padding:6% 5% 25%;font-size:14px}
.mobile .graph_type5 .humanbox {padding-bottom:30%}
.mobile .graph_type5 .box_add_human .box_value {bottom:-42%}
.mobile .graph_type5 .box_add_human .box_value strong {font-size:24px}
.mobile .graph_type5 .box_add_human .box_value span {font-size:24px}

.tablet .graph_type2 .com-graphrow-totalprogress {width:87.55%}
.tablet .graph_type2 .com-graphrow-progress span.value {margin-top:1.2%;font-size:20px}
.tablet .graph_type2 .com-graphrow-progress span.value em {vertical-align:middle}
.tablet .graph_type2 .com-graphrow-color1 {background-size:20px 29px}
.tablet .graph_type2 .com-graphrow-color2 {background-size:20px 29px}
.tablet .graph_type2 .com-graphrow-color3 {background-size:20px 29px}
.tablet .graph_type2 .com-graphrow-color4 {background-size:20px 29px}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep5 {margin-left:-0.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep10 {margin-left:-0.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep15 {margin-left:-1%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep20 {margin-left:-1%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep25 {margin-left:-1.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep30 {margin-left:-1.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep35 {margin-left:-2%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep40 {margin-left:-2%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep45 {margin-left:-2.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep50 {margin-left:-2.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep55 {margin-left:-3%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep60 {margin-left:-3%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep65 {margin-left:-3.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep70 {margin-left:-3.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep75 {margin-left:-4%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep80 {margin-left:-4%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep85 {margin-left:-4.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep90 {margin-left:-4.5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep95 {margin-left:-5%;}
.tablet .graph_type2 .com-graphrow-progress span.arrowstep100 {margin-left:-5%;}
.tablet .graph_type3 .box_add_graph .box_value {font-size:30px} 
.tablet .graph_type3 .graph_text {font-size:18px; line-height:28px}
.tablet .graph_type4 .box_add_graph .box_value {font-size:30px} 
.tablet .graph_type4 .graph_text {font-size:18px; line-height:28px}
.tablet .graph_type5 .box_add_human .box_value {font-size:30px}
.tablet .graph_type5 .graph_text {font-size:18px; line-height:28px}

.web .graph_type1 .com-graphrow {padding-bottom:52px}
.web .graph_type2 .graph_wrap {padding-left:22px}
.web .graph_type2 .opt-stb {padding-bottom:56px}
.web .graph_type2 .com-graphrow-totalprogress {width:92.55%}
.web .graph_type2 .com-graphrow-color1 {background-size:26px 38px}
.web .graph_type2 .com-graphrow-color2 {background-size:26px 38px}
.web .graph_type2 .com-graphrow-color3 {background-size:26px 38px}
.web .graph_type2 .com-graphrow-color4 {background-size:26px 38px}
.web .graph_type2 .com-graphrow {padding-bottom:28px}
.web .graph_type2 .com-graphrow-progress span.value {margin-top:0.6%}
.web .graph_type2 .com-graphrow-progress span.value em {vertical-align:bottom}
.webS .graph_type2 .com-graphrow-progress span.value {margin-top:1.2%;font-size:24px}
.webS .graph_type2 .com-graphrow-progress span.value em {vertical-align:bottom}
@media (max-width:1080px) { 
	.web .graph_type2 .com-graphrow-progress span.value {margin-top:0.3%}
}
.web .graph_type2 .com-graphrow-progress span.arrow {margin-left:0}
.web .graph_type3 .graph_wrap {margin-top:9%}
.web .graph_type3 .graph_text {font-size:18px; line-height:28px}
.web .graph_type3 .box_add_graph .box_value {font-size:36px} 
.web .graph_type4 .graph_wrap {margin-top:9%}
.web .graph_type4 .graph_text {font-size:18px; line-height:28px}
.web .graph_type4 .box_add_graph .box_value {font-size:36px} 
.web .graph_type5 .graph_text {font-size:18px; line-height:28px}
.web .graph_type5 .box_add_human .box_value {font-size:36px}
.web .graph_type5 .graph_wrap {margin-top:9%}
.web .prd_view .graph_type3 .opt-pbm {padding:0}
.web .prd_view .graph_type4 .opt-pbm {padding:0}
.web .prd_view .graph_type5 .opt-pbm {padding:0}

.graph_type1 .clinical_data .graph_inner {padding:0 10%}
.graph_type1 .opt-stb {padding-bottom:20px; font-size:20px} 
.graph_type1 .graphbox {position:relative; width:100%; height:30px}
.graph_type1 .com-graphrow {padding-bottom:42px}
.graph_type1 .com-graphrow-progress {height:30px}
.graph_type1 .clinical_data .graph_inner > .text .opt-btm  {padding-top:30px}
.graph_type1 .clinical_data .graph_inner > .info-text-top .opt-btm  {padding-top:10px}
.graph_type2 .clinical_data .graph_inner {padding:0 10%}
.graph_type2 .clinical_data .graph_inner > .text .opt-btm  {padding-top:30px}
.graph_type2 .clinical_data .graph_inner > .info-text-top .opt-btm  {padding-top:10px}
.graph_type2 .info-text-top {}
.graph_type2 .opt-stb {padding-bottom:38px; font-size:20px}
.graph_type2 .graphbox {position:relative; width:100%; height:56px}
.graph_type2 .graph_wrap {margin-bottom:1.4%}
.graph_type2 .com-graphrow-totalprogress {width:92.55%;max-width:850px;height:100%;background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/bg_type02_off.png') no-repeat 0 0; background-size:contain;} /* 89.07% */
.graph_type2 .com-graphrow-progress {overflow:hidden;height:100%; background:none}
.graph_type2 .com-graphrow-progress span.value {display:table;height:100%;font-size:20px}
.graph_type2 .com-graphrow-progress span.value  em {display:table-cell; vertical-align:bottom} 
.graph_type2 .com-graphrow-progress span.arrow {display:block; position:absolute; top:-5%; width:2.7%; height:100%}
.graph_type2 .com-graphrow-progress span.arrow.disabled {display:none}
.graph_type2 .com-graphrow-color1 span.arrow  {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/icon_type02_on_color1.png') no-repeat 0 0; background-size:contain}
.graph_type2 .com-graphrow-color2 span.arrow  {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/icon_type02_on_color2.png') no-repeat 0 0; background-size:contain}
.graph_type2 .com-graphrow-color3 span.arrow  {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/icon_type02_on_color3.png') no-repeat 0 0; background-size:contain}
.graph_type2 .com-graphrow-color4 span.arrow  {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/icon_type02_on_color4.png') no-repeat 0 0; background-size:contain}
.graph_type3 .clinical_data .com-grap-color1 .textcolor {color:#ff7ead}
.graph_type3 .clinical_data .com-grap-color2 .textcolor {color:#81d4fc}
.graph_type3 .clinical_data .com-grap-color3 .textcolor {color:#c7e455}
.graph_type3 .clinical_data .com-grap-color4 .textcolor {color:#91aef0}
.graph_type3 .clinical_data .graph_inner {padding:0 12%} /* padding:0 16% */
.graph_type3 .clinical_data .graph_inner > .text .opt-btm {padding-top:30px}
.graph_type3 .clinical_data .graph_inner > .info-text-top .opt-btm {padding-top:10px}
.graph_type3 .graph_wrap {margin:9% 0 0;text-align:center} /* margin:9% 0  5.6%*/
.graph_type3 .graph_wrap .graph {display:inline-block;width:33%;text-align:center;vertical-align:top}
.graph_type3 .graph_idx4 .graph, .graph_type3 .graph_idx8 .graph, .graph_type3 .graph_idx12 .graph {width:33%; margin-left:5%}
.graph_type3 .box_add_graph .box_value {top:50%}
.graph_type3 .box_graph_unit {width:62%; height:62%; margin:0 auto}
.graph_type3 .box_graph_unit .bg_pie2 {display:none}
.graph_type3 .box_add_graph .box_unit_1, .graph_type3 .box_add_graph .box_unit_2 div:after {left:1px;}
.graph_type3 .graph_text {display:block; padding:12% 5% 30%; font-size:18px; color:#000}        
.graph_type3 .txt_score {display:none}
.graph_type4 .clinical_data .com-grap-color1 .textcolor {color:#ff7ead}
.graph_type4 .clinical_data .com-grap-color2 .textcolor {color:#81d4fc}
.graph_type4 .clinical_data .com-grap-color3 .textcolor {color:#c7e455}
.graph_type4 .clinical_data .com-grap-color4 .textcolor {color:#91aef0}
.graph_type4 .clinical_data .graph_inner {padding:0 10%} 
.graph_type4 .clinical_data .graph_inner > .text .opt-btm {padding-top:10px}
.graph_type4 .clinical_data .graph_inner > .info-text-top .opt-btm  {padding-top:10px}
.graph_type4 .graph_wrap {margin:9% 0 0;text-align:center} 
.graph_type4 .graph_wrap .graph {display:inline-block;width:33%;text-align:center; vertical-align:top}
.graph_type4 .graph_idx4 .graph, .graph_type4 .graph_idx8 .graph, .graph_type4 .graph_idx12 .graph {width:33%; margin-left:5%}
.graph_type4 .graphbox {padding-bottom:25%}
.graph_type4 .box_graph_unit {width:44.28%; height:44.28%; max-width:128px; max-height:128px; margin:0 auto} 
.graph_type4 .box_graph_unit .bg_pie1 {display:none}
.graph_type4 .box_add_graph .box_unit_1, .graph_type4 .box_add_graph .box_unit_2 div:after {left:1px;}
.graph_type4 .graph_text {display:block; padding:5.2% 5% 32%; color:#000}  
.graph_type4 .box_add_graph .box_value {bottom:-46%}
.graph_type4 .box_add_graph:before {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/bg_pie2.png') no-repeat; background-size:100%}      
.graph_type4 .box_add_graph:after {top:15%; width:17%; height:58%; background:none; background-size:100%}
.graph_type4 .graphbox.left .box_add_graph:after  {left:-22%; background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/arrow_type04_left.png'); background-size:100%}
.graph_type4 .graphbox.right .box_add_graph:after  {left:initial; left:108%; background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/arrow_type04_right.png'); background-size:100%}
.graph_type4 .txt_score {display:none}
.graph_type5 .clinical_data .com-grap-color1 .textcolor {color:#ff7ead}
.graph_type5 .clinical_data .com-grap-color2 .textcolor {color:#81d4fc}
.graph_type5 .clinical_data .com-grap-color3 .textcolor {color:#c7e455}
.graph_type5 .clinical_data .com-grap-color4 .textcolor {color:#91aef0}
.graph_type5 .clinical_data .graph_inner {padding:0 10%}
.graph_type5 .clinical_data .graph_inner > .text .opt-btm  {padding-top:0}
.graph_type5 .clinical_data .graph_inner > .info-text-top .opt-btm  {padding-top:10px}
.graph_type5 .graph_wrap {margin:9% 0 2%;text-align:center}
.graph_type5 .graph_wrap .graph {display:inline-block;width:33%;text-align:center;vertical-align:top}
.graph_type5 .graph_idx4 .graph, .graph_type5 .graph_idx8 .graph, .graph_type5 .graph_idx12 .graph {width:33%; margin-left:5%}
.graph_type5 .humanbox {padding-bottom:18%}
.graph_type5 .graph_text  {display:block; padding:14% 5% 26%; color:#000}  
.graph_type5 .box_add_human .box_value {bottom:-34%}
.graph_type5 .box_human_unit {width:67.6%; height:auto; margin:0 auto}
.graph_type5 .box_human_unit .txt2 {padding-top:23px}
.graph_type5 .box_human_unit .box_unit_1, .graph_type5 .box_human_unit .box_unit_2 {width:100%; height:50%}
.graph_type5 .box_human_unit .box_unit_2 {top:50%}
.graph_type5 .com-grap-color1 .box_add_human .box_unit_1 div:after,
.graph_type5 .com-grap-color1 .box_add_human .box_unit_2 div:after {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/human_type05_on_color1.png'); background-size:cover}
.graph_type5 .com-grap-color2 .box_add_human .box_unit_1 div:after,
.graph_type5 .com-grap-color2 .box_add_human .box_unit_2 div:after {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/human_type05_on_color2.png'); background-size:cover}
.graph_type5 .com-grap-color3 .box_add_human .box_unit_1 div:after,
.graph_type5 .com-grap-color3 .box_add_human .box_unit_2 div:after {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/human_type05_on_color3.png'); background-size:cover}
.graph_type5 .com-grap-color4 .box_add_human .box_unit_1 div:after,
.graph_type5 .com-grap-color4 .box_add_human .box_unit_2 div:after {background:url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/human_type05_on_color4.png'); background-size:cover}
.graph_type5 .human_score {display:none}

.box_graph {font-size:0}
.box_graph ol {display:inline}
.box_graph ol > li {display:inline-block; margin-right:20px; font-size:15px}
.box_graph_unit {display:block; position:relative; width:66.11%; height:66.11%; font-size:13px; vertical-align:middle; text-align:right}
.box_graph_unit .bg_pie {width:100%; height:auto}
.box_graph_unit .txt2 {padding-top:23px}
.box_graph_unit .txt2 span {font-family:'Gothambold1'; font-size:16px; color:#ff806f}
.box_graph_unit .txt3 span {font-family:'Gothambold1'; font-size:16px; color:#000}
.box_add_graph {position:absolute; top:0; left:0; width:100%; height:100%}
.box_add_graph:before,
.box_add_graph:after {display:block; position:absolute; border-radius:100%;  content:''}
.box_add_graph:before {top:0; left:0; width:100%; height:100%; background:#fff url('../../../../../../../../../content/dam/laneige/laneige2017/kr/ko/components/commons/graph/bg_pie.png') no-repeat; background-size:100%}
.box_add_graph:after {left:10.7%; top:10.7%; width:78%; height:78%; background-color:#fff}
.box_add_graph .box_unit_1,
.box_add_graph .box_unit_2 {overflow:hidden; position:absolute; top:0; width:50%; height:100%}
.box_add_graph .box_unit_1,
.box_add_graph .box_unit_2 div:after {left:0}
.box_add_graph .box_unit_1 div {left:100%}
.box_add_graph .box_unit_2 div {right:100%}
.box_add_graph .box_unit_2,
.box_add_graph .box_unit_1 div:after {right:0}
.box_add_graph .box_unit_1 div,
.box_add_graph .box_unit_2 div {overflow:hidden; position:absolute; top:0; width:100%; height:100%; -webkit-transition:all 0.3s linear; transition:all 0.3s linear}
.box_add_graph .box_unit_1 div {transform-origin:0 50%}
.box_add_graph .box_unit_2 div {transform-origin:100% 50%}
.box_add_graph .box_unit_1 div:after,
.box_add_graph .box_unit_2 div:after {display:block; position:absolute; top:0; width:200%; height:100%; border-radius:100%; content:''}
.box_add_graph .box_value {position:absolute; left:0; z-index:1; width:100%; height:30px; margin-top:-13px; font-size:36px; line-height:36px; color:#000; text-align:center}
.box_add_graph .box_value * {font-weight:bold}
.box_graph_wrap {text-align:center}
.box_graph_wrap .box_unit {display:inline-block; margin:0 10px}

.box_human_unit {display:block; position:relative; font-size:13px; vertical-align:middle; text-align:right}
.box_human_unit .bg_human {width:100%; height:auto}
.box_add_human {position:absolute; top:0; left:0; width:100%; height:100%}
.box_add_human:before {display:block; position:absolute; content:''}
.box_add_human:before {top:0; left:0; width:100%; height:100%}
.box_add_human .box_unit_1,
.box_add_human .box_unit_2 {overflow:hidden; position:absolute; top:0; width:100%; height:100%}
.box_add_human .box_unit_1,
.box_add_human .box_unit_2 div:after {left:0}
.box_add_human .box_unit_1 div {left:100%}
.box_add_human .box_unit_2 div {right:100%}
.box_add_human .box_unit_2,
.box_add_human .box_unit_1 div:after {right:0}
.box_add_human .box_unit_1 div,
.box_add_human .box_unit_2 div {overflow:hidden; position:absolute; top:0; left:0; height:100%; }
.box_add_human .box_unit_1 div:after,
.box_add_human .box_unit_2 div:after {display:block; position:absolute; top:0; width:100%; height:100%; content:''}
.box_add_human .box_value {position:absolute; left:0; z-index:1; width:100%; height:30px; margin-top:-13px; font-size:36px; line-height:36px; color:#000; text-align:center}
.box_add_human .box_value strong {font-weight:bold}
.box_add_human .box_value span {font-size:36px; font-weight:bold}
.box_human_wrap {text-align:center}
.box_human_wrap .box_unit {display:inline-block; margin:0 10px}