@charset "utf-8";

/* ==========================================================
 * change your hair 메뉴
 * ========================================================== */

/* change your hair 메뉴 */
.change_yrHair {position:relative; min-height:640px; padding-top:40px;} /* 20220617 수정 - GNB 개선 */
.change_yrHair .tabs{width:100%; position:relative; margin:57px 0 40px; background:url('/hk/zh/resource/images/brand/changehair/bg_tab.gif') 0 20px repeat-x}
.change_yrHair .tabs li{float:left; width:18%;  box-sizing:border-box; border:solid 1px #ccc; background:#fff; font-size:1.4em; line-height:2.75em; text-align:center}/* 180726 edit. width as is 22%*/
.change_yrHair .tabs li.current{background:#000; border-color:#000}
.change_yrHair .tabs li.current a{color:#fff}
.change_yrHair .tabs li + li{margin-left:2.5%}/* 180726 edit. as is 4%*/
.change_yrHair .colorfultab.tabs li + li{margin-left: 4%;}/*180727 add*/
.change_yrHair .movie_info{margin:47px 0 36px; font-family: 'RixSGo M', 'Rix고딕 M', 'Malgun Gothic', '맑은 고딕', '돋움', dotum, sans-serif;}
.change_yrHair .movie_info > h2{margin-bottom:54px; font-size:4em; color:#333}
.change_yrHair .movie_info p{margin:0; font-size:1.6em; text-align:left}
.change_yrHair .movie_info p.inner_phrase + p.inner_phrase{padding-bottom:50px}
.change_yrHair .movie_info p.inner_phrase .block{display:block; padding-bottom:30px;}
.change_yrHair .movie_info p.inner_phrase .inner_tit{display:block; padding-bottom:30px; font-size:1.125em; color:#333}
.change_yrHair .previous_mvs{padding-bottom:40px}
.change_yrHair .previous_mvs .left{float:left; width:50%}
.change_yrHair .previous_mvs .right{float:right; width:50%; text-align:center}
.change_yrHair .previous_mvs select{display:block; width:90%; font-size:1.4em; }
.change_yrHair .previous_mvs .mv_contest_tit{font-size:2.7em; color:#333; font-family: 'RixSGo M', 'Rix고딕 M', 'Malgun Gothic', '맑은 고딕', '돋움', dotum, sans-serif;}
.change_yrHair .previous_mvs .mvs_info_table th{text-align:left}
.change_yrHair .previous_mvs .mvs_info_table th,
.change_yrHair .previous_mvs .mvs_info_table td{padding:16px 0}

/* BRAND 메뉴:s */
.brand {padding-top:40px;} /* 20220617 추가 - GNB 개선 */
/* 스토리 */
.brand .tabs{width:100%; position:relative; margin:57px 0 40px; background:url('/hk/zh/resource/images/brand/changehair/bg_tab.gif') 0 20px repeat-x}
.brand .tabs li{float:left; width:22%; box-sizing:border-box; border:solid 1px #ccc; background:#fff; font-size:1.4em; line-height:2.75em; text-align:center}
.brand .tabs li.current{background:#000; border-color:#000;}
.brand .tabs li.current a{color:#fff}
.brand .tabs li + li{margin-left:4%}
.brand .tab_content{padding-bottom:40px}
.brand #STORY{position:relative}
.brand #STORY h2{font-family:Rajdhani-SemiBold; font-size:4em; color:#000; text-align:center; letter-spacing:-0.3px}
.brand #STORY h2 .quoteMark{display:inline-block; width:11px; height:11px; margin-top: 5px; vertical-align:top; background: url('/hk/zh/resource/images/brand/changehair/quote.gif') 0 0 no-repeat;
-webkit-background-size:auto 11px;
-moz-background-size:auto 11px;
-ms-background-size:auto 11px;
-o-background-size:auto 11px;
background-size:auto 11px;}
.brand #STORY h2 .quoteMark.close{background-position:right top}
.brand .main_visual{width:100%; text-align:center; background-color:#2e1707}/*180817 : 이미지 변경에 따른 bgcolor 변경*/
.brand .fl_l{float:left; width:46.8%; }
.brand .fl_r{float:right; width:46.8%; margin-left:6.4%}
.brand .brand_info{padding:78px 0 62px}
.brand .brand_info .brd_cont_box{width:100%; overflow:hidden; position:relative}
.brand .brand_info .brd_cont_box + .brd_cont_box{margin-top:100px}
.brand .brand_info .brd_cont_box .tit{font-size:3.7em; margin:0; color:#333; line-height: 1.2;}
.brand .brand_info .brd_cont_box .txt{margin:0; text-align:left; font-size:1.4em; color:#666; word-break:keep-all; line-height: 1.6;}
.brand .brand_info .brd_cont_box > img{position:absolute;}
.brand .brand_info .bullet_dash{width: 50px; height: 1px; background-color: #333; margin:18px 0}
.brand .lineBreak30{margin-bottom:30px !important}
/* 20170220 마지막단 움직이게 변경 */
.brand .brand_info .brd_cont_box .tit.mt100{margin-top:40px}
@media screen and (max-width: 767px){
	.brand .brand_info .brd_cont_box .tit.mt100{margin-top:35px}
	.brand .fl_r.ver_mobile{margin-top:15px;}
}
/* 철학 */
.brand .tit_area{text-align:center;}
.brand .tit_area p{margin:0}
.brand .tit_area .tit{font-size:4em; font-weight:bold; color:#333}
.brand .tit_area .tit > span {display:inline-block;margin:30px 0;} /* 20191004 add */
.brand .tit_area .sub_tit01{margin-bottom:32px; font-size:1.6em; color:#999}
.brand .tit_area .sub_tit02{margin-bottom:38px; font-size:2.5em; color:#333}
.brand .img_box{text-align:center}
.brand .info_box{padding:72px 20% 64px}
.brand .info_box .txt{margin:0; text-align:center; font-size:1.6em; color:#999; font-family: 'RixSGo M', 'Rix고딕 M'}
.brand .info_box .txt span{display:block}
.brand .info_box .txt .tit{margin-bottom:30px; font-size:2.5em; color:#333; font-weight:bold; background:url('/hk/zh/resource/images/brand/changehair/bg_tit.jpg') no-repeat center bottom}
.brand .info_box .txt + .txt{margin-top:86px}
/* 제품 */
.brand .prd_info_box{padding:60px 20% 64px}
.brand .prd_info_box .txt{margin:0; text-align:center; font-family: 'RixSGo M', 'Rix고딕 M'; word-break:keep-all}
.brand .prd_info_box .txt span{display:block}
.brand .prd_info_box .txt .tit{margin-bottom:15px; font-size:3.2em; color:#000; font-weight:bold; background:url('/hk/zh/resource/images/brand/changehair/bg_tit.jpg') no-repeat center bottom}
.brand .prd_info_box .txt .prd_info01{font-size:1.8em; color:#333}
.brand .prd_info_box .txt .prd_info02{font-size:1.4em; color:#999}
.brand .prd_info_box .txt + .txt{margin-top:46px}
/* 역사 */
.brand .wrap_naviHist{position:relative}
.brand .navi_hist{background:url('/hk/zh/resource/images/brand/changehair/bg_history.jpg') 0 bottom repeat-x}
.brand .navi_hist li{float:left; width:10%; min-width:96px; text-align:center}
.brand .navi_hist li a{display: block; font-size:3em; color:#999; font-family:Rajdhani-SemiBold; text-decoration:none}/*180717 : 버튼 영역 좁아 display:block 추가*/
.brand .navi_hist li.active{background:url('/hk/zh/resource/images/brand/changehair/bg_history_on.jpg') 0 bottom repeat-x}
.brand .navi_hist li.active a{color:#333}
.brand .wrap_naviHist .btn_history{position:absolute;right:0; bottom:0; background-color:#fff}
.brand .wrap_naviHist .btn_history > a{display:inline-block; vertical-align:bottom}
.brand .wrap_history{padding-top:90px}
.brand .wrap_history > div > .year{width:45px; height:45px; line-height:45px; margin:0 auto; text-align:center; color:#fff; font-size:1.5em; font-family:'Rajdhani-SemiBold'; background:url('/hk/zh/resource/images/brand/changehair/bg_year.png') 0 0 no-repeat}
.brand .wrap_history > div > ul{padding-bottom: 50px; background:url('/hk/zh/resource/images/brand/changehair/bg_line.jpg') center 0 repeat-y}
.brand .wrap_history > div > ul > li{overflow:hidden}
.brand .wrap_history > div > ul .fl_l{text-align:right; position:relative;  left:-50%; opacity:0 }
.brand .wrap_history > div > ul .fl_r{position:relative;  right:-50%; opacity:0 }
.brand .wrap_history > div > ul > li p{position:relative; margin:0; font-size:1.4em; color:#666; line-height:1.64; letter-spacing:-0.5px; word-break:keep-all}
.brand .wrap_history > div > ul > li p em{color:#333; font-weight:bold}
.brand .wrap_history > div > ul > li .date_mth{color:#000; font-size:4.5em; font-family: Rajdhani-Medium; font-weight: 500;}
.brand .wrap_history > div > ul > li .date_mth .txt_mth{color:#333; font-size:0.666em; vertical-align:middle}
.brand .wrap_history > div > ul > li .fl_l .bullet_mth{width:25px; height:18px; position:absolute; top:32%; right:-9%; background:url('/hk/zh/resource/images/brand/changehair/bullet_left.png') 0 0 no-repeat}
.brand .wrap_history > div > ul > li .fl_r .bullet_mth{width:25px; height:18px; position:absolute; top:32%; left:-9%; background:url('/hk/zh/resource/images/brand/changehair/bullet_right.png') 0 0 no-repeat}
.brand .wrap_history .bullet_dash{display:inline-block; width: 50px; height: 1px; background-color: #333}
.brand .wrap_history > div > ul > li + li{margin-top:60px}
.brand .wrap_history > div > ul > li > div img{margin-top:15px}
/* BRAND 메뉴:e */

/*컬러풀 크루 180627:s*/
/*reset*/
.colorfultab p{margin: 0;}
/*컬러풀 크루 상단 탭*/
.change_yrHair .colorfultab.tabs li{width: 48%;}
.change_yrHair .colorfultab.tabs li.colorfulevent span{cursor: pointer;}
.change_yrHair .colorfultab.tabs li.colorfulevent span:hover{text-decoration: underline;}
/*컬러풀 크루 리스트*/
.colorfultab .l-wrap{padding: 0 0 5.5%;}
.colorfultab .list-crew{margin-top: 30px;}
.colorfultab .list-crew:after{display: block; clear: both; content: '';}
.colorfultab .list-crew li{float: left; width: 14.930833333%;}
.colorfultab .list-crew li + li{margin-left: 2.083%;}
.colorfultab .list-crew li:nth-child(6n+1){margin-left: 0;}
.colorfultab .list-crew li:nth-child(n+7){margin-top: 28px;}
.colorfultab .list-crew li a{display: block;}
.colorfultab .list-crew li a img{}
.colorfultab .list-crew li .name-insta{margin-top: 16px; font-size: 1.8em; text-align: center; color: #000;}
/*마우스 오버시 딤*/
.list-crew li .inner:hover,
.list-crew li .inner:focus {text-decoration: none;}
.list-crew li .inner:hover .cover,
.list-crew li .inner:focus .cover {  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);  filter: alpha(opacity=70);  opacity: 1;}
.list-crew li .thumb {  overflow: hidden;  position: relative;}
.list-crew li .cover { display: block; position: absolute;  top: 0;  left: 0;  right: 0;  width: 100%;  height: 100%;  background: #000;  background: rgba(0, 0, 0, 0.7);  text-align: center;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  filter: alpha(opacity=0);  opacity: 0;  z-index: 10;}
.list-crew li .cover:before {  content: '';  display: inline-block;  *display: inline;  *zoom: 1;  position: absolute;  left: 0;  right: 0;  top: 50%;  width: 45px;  height: 45px;  margin: -22.5px auto 0;  border: 2px solid #ffffff;  background: url("/hk/zh/resource/images/common/a/icons.png") 0 -310px no-repeat;  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);  filter: alpha(opacity=100);  opacity: 1;}
/*컬러풀 크루 180627:e*/
/*컬러풀 스타일링 180705:s*/
/*미션 WEEK 탭*/
.tab-mission{margin-top: 12px;}
.tab-mission li{float: left; width: 25%; border: 1px solid #fe5050; box-sizing: border-box;}
.tab-mission li:nth-child(n+2){width: calc(25% + 1px); margin-left: -1px;}
.tab-mission li a{display: block; padding: 12px 0; font-size: 14px; color: #fe5050; font-weight: bold; text-align: center;}
.tab-mission li.current a{background: #fe5050; color: #fff; text-decoration: none;}
/*컨텐츠영역*/
/*타이틀영역*/
.mission-tit-area{display: none; margin-top: 44px; text-align: center;}
h3.mission-tit{font-size: 27px; font-weight: bold; color: #000;}
h3.mission-tit .tit-mark{display: inline-block; margin-bottom: 12px; padding: 4px 10px 2px; border: 1.5px solid #fe5050; font-size: 23px; color: #fe5050; line-height: 1em;}
.mission-tit-area .txt-hash-tag{margin-top: 12px;}
.txt-hash-tag .txt-bg{display: inline-block; padding: 3px 5px 1px; background: #ffcaca; font-size: 23px;  color: #000; line-height: 1em; letter-spacing: -0.04em;}
.txt-hash-tag .txt-bg:nth-child(n+2){margin-left: 8px;}
.txt-hash-tag .txt-bg.on{ background: #fe5050; color: #fff; text-decoration: none;}
.txt-hash-tag .txt-bg:hover, .txt-hash-tag .txt-bg:focus{ text-decoration: none;}
/*리스트영역*/
.colorfultab .list-styling{ width: calc(100% + 20px); margin: 36px 0 0 -20px;}
.colorfultab .list-styling li{display: none; float: left; overflow: hidden; width: 33.3333333333%; }
.colorfultab .list-styling li a{display: block; position: relative; margin:20px 0 0  20px;}
.colorfultab .list-styling .hover-bottom{position: absolute; left: 0; bottom: 0; width: 100%; padding: 18px 0 13px; background: rgba(0,0,0,0.65); color: #fff; text-align: center; transform:translateY(110px); transition-timing-function: ease-in-out;}
.colorfultab .list-styling .hover-bottom h4.h{font-size: 20px;transform: translateY(150px); transition-timing-function: ease-out; line-height: 1.2em;}
.colorfultab .list-styling .hover-bottom .detail-view{position: relative; margin-top: 7px; font-size: 16px; color: rgba(255,255,255,0.6); transform: translateY(180px); transition-timing-function: ease-out; padding-right: 20px;}
.colorfultab .list-styling .hover-bottom .detail-view:after{ position: absolute; top: 6px; right: 50%; margin-right: -48px; width: 11px; height: 11px; background: url('/hk/zh/resource/images/common/a/icons.png') -2px -107px/95px auto no-repeat; content: ''; border: 1px solid rgba(255,255,255,0.5); opacity: 0.8;}
.hide_web{display: none;}
/*180718  add:s*/
/*리스트 분류 선택 버튼*/
.sorting-btn-area{margin-top: 26px; text-align: right;}
.sorting-btn-box{display: inline-block;}
.sorting-btn-area li{float: left;}
.sorting-btn-area li + li{position: relative; padding-left: 30px;}
.sorting-btn-area li + li:before{position: absolute; top: 0.3em; left: 16px; width: 1px; height: 1.4em; border-left: 1px solid #999; content: '';}
.sorting-btn-area li a{color: #666; font-size: 14px;}
.sorting-btn-area li.current a{color: #fe5051; font-weight: bold;}
/*default 노출*/
.colorfultab .list-styling li.mission4{display: block}
.mission-tit-area.mission4{display: block}
/*컬러별 탭 추가*/
.tab-mission.hairColor li{width: 20%;}
.styling-color .tab-mission.topic,
.styling-topic .tab-mission.hairColor,
.styling-color .mission-tit-area{display: none;}
/*180718  add:e*/
/*컬러풀 스타일링 180705:e*/


/* response */
@media screen and (max-width:1000px){
.hide_web{display: block;}
.txt-hash-tag .txt-bg:nth-child(n+4){margin-top: 4px;}	
}

@media screen and (min-width:768px) and (max-width:1000px){
	/* BRAND 메뉴 */
	.brand #STORY h2{font-size: 4em; top:-40px}
	.brand .wrap_brand_info .inner_brand_info .txt .tit{font-size: 2em;}
	.brand .tit_area .tit{font-size:3em}
}

@media screen and (min-width:767px){
.txt-hash-tag .txt-bg:hover, .txt-hash-tag .txt-bg:focus{ background: #fe5050; color: #fff;}
/*180821 add : 스토리 페이지 세번째 텍스트 영역 짧아 높이 값 별도 지정*/
	.brand .brand_info .brd_cont_box#brdBox03 .fl_l{height: 26em}
}
@media screen and (max-width:767px){
	/* change your hair 메뉴 */
	.movie_info, .previous_mvs{padding: 0 3.125%}
	.change_yrHair {padding-top:30px;} /* 20220617 추가 - GNB 개선 */
	.change_yrHair .tabs{margin-top:20px; background:none}
	.change_yrHair .tabs li{width:50%; font-size:1.1em;margin-top:-1px;margin-right:-1px;}/* 16.10.24 bdsnack 윤지혜 width 수정 33.3% -> 50%/ margin-top, margin-left 추가 */
	.change_yrHair .tabs li:nth-child(n+3){width: 33.4%;}/*180726 add*/
	.change_yrHair .tabs li + li,.change_yrHair .colorfultab.tabs li + li{margin-left:0; /*border-left:0*/}/* 16.10.24 bdsnack 윤지혜 border-left 숨김처리 */
	{margin-left: 4%;}/*180727 add*/
	.change_yrHair .movie_info > h2{margin-bottom:35px; font-size:2.3em; text-align:center}
	.change_yrHair .movie_info p{font-size:1.4em}
	.change_yrHair .movie_info p.inner_phrase + p.inner_phrase{padding-bottom:50px}
	.change_yrHair .movie_info p.inner_phrase .block{display:block; padding-bottom:30px;}
	.change_yrHair .movie_info p.inner_phrase .inner_tit{display:block; padding-bottom:30px; font-size:1.125em; color:#333}
	.change_yrHair .previous_mvs .left{float:none; width:100%}
	.change_yrHair .previous_mvs .right{float:none; width:100%}
	.change_yrHair .previous_mvs select{width:100%; margin-bottom:10px; font-size:1.2em}
	.change_yrHair .previous_mvs .mv_contest_tit{display:none}
	.change_yrHair .previous_mvs .mvs_info_table{margin-top:20px}
	.change_yrHair .previous_mvs .mvs_info_table th,
	.change_yrHair .previous_mvs .mvs_info_table td{padding:10px 0; font-size:0.845em}
	
/* BRAND 메뉴:s */
.brand {padding-top:30px;} /* 20220617 추가 - GNB 개선 */
/* 스토리 */
.brand .tabs{margin:15px 0 20px; background:none; box-sizing:border-box; padding:0 10px}
.brand .tabs li{width:25%; font-size:1.1em; line-height:2.75}
.brand .tabs li + li{margin-left:0; border-left:0}
.brand .tab_content{padding-bottom:40px}

.brand #STORY h2{font-size:2.5em}
.brand .brand_info{padding:0 10px}
.brand .brand_info .brd_cont_box div.fl_l,
.brand .brand_info .brd_cont_box div.fl_r{margin:35px 0 15px}
.brand .fl_l{width:100%; float:none}
.brand .fl_r{width:100%; float:none; margin-left:0}
.brand .brand_info .brd_cont_box .tit{font-size:2.75em}
.brand .brand_info .bullet_dash{width: 25px; margin:9px 0}
.brand .brand_info .brd_cont_box + .brd_cont_box{margin-top:0}
.brand .brand_info .brd_cont_box .txt{font-size:1.1em; letter-spacing:-0.5px}
.brand .lineBreak30{margin-bottom:20px !important}
.brand .brand_info .brd_cont_box > img{position:relative;}

/* 철학 */
.brand .tit_area .tit{font-size:1.9em}
.brand .tit_area .sub_tit01{display:none}
.brand .tit_area .sub_tit02{margin:26px 0 35px; font-size:1.3em}
.brand .info_box{padding: 31px 5% 0}
.brand .info_box .txt{text-align:left; font-size:1.3em; color:#555;}
.brand .info_box .txt .tit{margin-bottom:4px; font-size:1.5em; color:#1d1414; font-weight:bold; background:none}
.brand .info_box .txt + .txt{margin-top:29px}
/* 제품 */
.brand .prd_info_box{padding: 0 5%}
.brand .prd_info_box .txt{text-align:left}
.brand .prd_info_box .txt .tit{margin-bottom:25px; font-size:1.9em; background:none; text-align:center}
.brand .prd_info_box .txt .prd_info01{font-size:1.5em; color:#1d1414}
.brand .prd_info_box .txt .prd_info02{font-size:1.3em; color:#555}
.brand .prd_info_box .txt + .txt{margin-top:32px}
/* 역사 */
#HISTORY .l-wrap.l-pd{max-width:640px; overflow:hidden; box-sizing:border-box}
.brand .navi_hist li{width:14.2%; min-width:0; box-sizing:border-box}/*180717 : 2017년 추가되어 width 수정*/
.brand .navi_hist li a{padding: 6px 0; font-size:1.5em}/*180717 : 2017년 추가되면서 width가 짧아져 세로 패딩값 추가*/
.brand .wrap_history{padding-top:20px}
.brand .wrap_history > div > .year{width:37px; height:37px; line-height:37px; font-size:1.25em;
-webkit-background-size: 37px auto;
 -moz-background-size: 37px auto;
   -o-background-size: 37px auto;
   background-size: 37px auto;
}
.brand .wrap_history > div > ul{padding-bottom: 50px; background:none}
.brand .wrap_history > div > ul .fl_l{text-align:left}
.brand .wrap_history > div > ul > li .fl_l .bullet_mth{display:none}
.brand .wrap_history > div > ul > li .fl_r .bullet_mth{display:none}
.brand .wrap_history > div > ul > li + li{margin-top:40px}
.brand .wrap_history > div > ul > li p{font-size:1.1em; line-height:1.454}
.brand .wrap_history > div > ul > li .date_mth{ font-size:3.25em}
.brand .wrap_history > div > ul > li .date_mth .txt_mth{font-size:0.646em}
.brand .wrap_history .bullet_dash{width: 25px}
.brand .wrap_history > div > ul > li > div img{margin-top:10px}
/* BRAND 메뉴:e */
/*컬러풀 크루 180627:s*/
/*컬러풀 크루 상단 탭*/
.change_yrHair .colorfultab.tabs li{width: 50.1%;}
/*컨텐츠 공통*/
.colorfultab .l-wrap{padding: 0 10px 5.5%;}
.colorfultab .l-wrap img{width: 100%;}
/*컬러풀 크루 리스트*/
.colorfultab .list-crew{margin-top: 30px;}
.colorfultab .list-crew li{float: left; width: 30.66666666666667%;}
.colorfultab .list-crew li + li{margin-left: 4%;}
.colorfultab .list-crew li:nth-child(3n+1){margin-left: 0;}
.colorfultab .list-crew li:nth-child(n+7){margin-top: 0;}
.colorfultab .list-crew li:nth-child(n+4){margin-top: 24px;}
.colorfultab .list-crew li .name-insta{margin-top: 10px; font-size: 1em;}
/*컬러풀 크루 180627:e*/
/*컬러풀 스타일링 180705:s*/
/*미션 WEEK 탭*/
.tab-mission{margin-top: 6px;}
.tab-mission li a{padding: 6px 0; font-size: 11px;}
/*타이틀영역*/
.mission-tit-area{margin-top: 20px;}
h3.mission-tit{font-size: 14px;}
h3.mission-tit .tit-mark{margin-bottom: 6px; padding: 2px 6px 1px; border: 1px solid #fe5050; font-size: 11.5px; }
.mission-tit-area .txt-hash-tag{margin-top: 6px;}
.txt-hash-tag .txt-bg{padding: 2px 4px 0;  font-size: 13.5px;}
.txt-hash-tag .txt-bg:nth-child(n+2){margin-left: 4px;}
/*리스트영역*/
.colorfultab .list-styling{width: calc(100% + 10px);  margin: 14px 0 0 -10px; padding-bottom: 20px;}
.colorfultab .list-styling li{width: 50%; }
.colorfultab .list-styling li a{margin: 10px 0 0 10px;}
.colorfultab .list-styling .hover-bottom{padding: 0; background: rgba(0,0,0,0.6); text-align: left; transform:translateY(0) !important;}
.colorfultab .list-styling .hover-bottom h4.h{padding-left: 6px; font-size: 10px; transform: translateY(0) !important; line-height: 26px; }
.colorfultab .list-styling .hover-bottom h4.h .ver_mobile{display: inline;}
.colorfultab .list-styling .hover-bottom .detail-view{position: absolute; right: 0; top: 0; width: 26px; height: 26px; margin-top: 0; transform: translateY(0) !important; padding-right: 0px; background: rgba(0,0,0,0.5);}
.colorfultab .list-styling .hover-bottom .detail-view:after{ top: 6px; right: 6px; margin-right: 0; width: 14px; height: 14px; background: url('/hk/zh/resource/images/common/a/icons.png') -4px -159px/140px auto no-repeat;  border: 0; opacity: 1;}
.colorfultab .list-styling .hover-bottom .detail-view .hidden_mobile{position: absolute; left: -9999em;}
/*180718  add:s*/
/*리스트 분류 선택 버튼*/
.sorting-btn-area{margin-top: 20px}
.sorting-btn-area li + li{padding-left: 18px;}
.sorting-btn-area li + li:before{top: 0.2em; left: 9px; height: 1.2em;}
.sorting-btn-area li a{font-size: 11px;}
/*컬러별 탭 추가*/
.tab-mission.hairColor li{width: 33.33%;}
.tab-mission.hairColor li:nth-child(n+4){width: 50%; margin-top: -1px;}
.tab-mission.hairColor li:nth-child(4){margin-left: 0; width: calc(50% - 1px);}
/*180718  add:e*/
/*리스트영역*/
/*컬러풀 스타일링 180705:e*/
}