@charset "utf-8";

/* 
 * layout CSS Document
 * KOWEB
 */

/* placeholder */
::-webkit-input-placeholder{font-family:inherit; font-size:inherit; color:#aaa;}
::-moz-placeholder{font-family:inherit; font-size:inherit; color:#aaa;}
:-ms-input-placeholder{font-family:inherit; font-size:inherit; color:#aaa;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent;}

/* base style
body{opacity:0; transition:opacity 200ms ease-out 0.2s;}
body.opacity{opacity:1;}
 */

/* wrap */
#wrap{overflow:hidden;}
#wrap, #container, #header, #footer{width:100%; min-width:320px; margin-left:auto; margin-right:auto;}
#wrap:after, #container:after, #header:after, #footer:after{content:''; display:block; clear:both;}
#container{padding-top:107px;}

/* A11Y */
div[role=status] a{display:block;color:#fff}
div[role=status] p{margin-bottom:0}
.skip_content{position:fixed; top:0; left:0; width:100%; z-index:80;}
.skip_content a{overflow:hidden; display:block; width:1px; height:1px; background:#000; font-size:14px; text-align:center; color:#fff;}
.skip_content a:focus{position:relative; width:100%; padding:10px; height:auto;}
.blind{overflow:hidden; position:absolute; margin:-1px; width:1px; height:1px; clip:rect(0,0,0,0);}

/* selection */
/*::-moz-selection {background-color:#4D6D93; color:#fff;}
::selection {background-color:#4D6D93; color:#fff}*/

/* common css */
*{box-sizing:border-box;}
*[data-device="mobile"]{display:none;}
img{max-width:100%;}
table[class^="tbl_"]{position:relative; width:100%; border-collapse:separate; border-spacing:0; word-break:break-all;}
b[lang="en"]{font-weight:500;}
.ellip{overflow:hidden; display:block; width:100%; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis;}
.ellipsis{overflow:hidden; display:-webkit-box; line-height:1.4em; height:2.8em; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis;}
.inner{width:100%; max-width:1550px; height:100%; margin:0 auto; transition:all 500ms;}
.emph{color:#236bcc !important;}

/* button */
.button{border-radius:2px; background-color:#343a43;}
.button.blue{background-color:#236bcc;}

/*header*/
#header{position:fixed; top:0px; left:0px; z-index:50; background:#fff;}
#header .header_wrap{position:relative; width:100%; height:100%;}
#header .inner{position:relative; width:100%; height:100%;}
#header .logo{display:block; position:absolute; top:50%; left:0; width:145px; height:42px; transform:translateY(-50%);}
#header .logo > a{display:block; width:100%; height:100%; background:url(/images/common/img_logo.png) no-repeat 50% 0 / 100% auto;}

.header_wrap{padding-left:280px; transition:padding .3s;}
.gnb{font-size:0;}
.gnb > li{display:inline-block; position:relative; margin:0 33px; font-size:1rem; vertical-align:top;}
.gnb > li:first-child{margin-left:0;}
.gnb > li:last-child{margin-right:0;}
.gnb > li > a{display:inline-block; padding:40px 0; font-size:18px; font-weight:500; transition:0.3s ease;}
.gnb > li:hover .depth{opacity:1; visibility:visible;}
.gnb > li:hover > a,
.gnb > li.current > a,
.gnb > li > a.on,
.depth > li:hover > a{color:#fa5d2a;}

.header_menu_btn{display:none; position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; padding:16px 12px; background:transparent; transition:top 300ms; cursor:pointer;}
.header_menu_btn .menu_btn{position:relative; width:100%; height:100%;}
.header_menu_btn .btn_line{display:block; position:absolute; width:100%; height:2px; background-color:#444; border-radius:2px; transition:all 280ms ease;}
.header_menu_btn .line_01{top:0;}
.header_menu_btn .line_02{width:80%; right:0; top:50%; margin-top:-1px;}
.header_menu_btn .line_03{bottom:0;}
.header_menu_btn.menu_open .line_01{top:50%; margin-top:-1px; transform:rotate(45deg);}
.header_menu_btn.menu_open .line_03{top:50%; margin-top:-1px; transform:rotate(-45deg);}
.header_menu_btn.menu_open .line_02{width:0;}

.navi_util{position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:0;}
.navi_util .util_list > li{display:inline-block; position:relative; line-height:1; margin-left:13px; padding-left:15px; font-size:1rem; vertical-align:middle;}
.navi_util .util_list > li:before{content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:9px; margin-top:-4.5px; background-color:#eaeaea;}
.navi_util .util_list > li:first-child{margin-left:0; padding-left:0;}
.navi_util .util_list > li:first-child:before{content:none;}
.navi_util .util_list > li > a{display:inline-block; padding:16px 0; font-size:13px;}
.navi_util .util_list > li .depth{width:90px; margin-left:-45px; text-align:center;}
.navi_util .util_list > li .depth > li{font-size:13px;}
.navi_util .util_list > li .depth > li{font-size:13px;}

.util_layer{opacity:0; visibility:hidden; overflow:hidden; position:absolute; top:100%; right:-79px; min-width:420px; background-color:#fff; border:1px solid #ebebeb; transform:translateY(0);}
.util_layer .layer_text{padding:20px 12px; border-top:1px solid #ebebeb; background-color:#fafafa; font-size:13px; font-weight:500; text-align:center;}
.util_layer .layer_info{display:table; table-layout:fixed; width:100%;}
.layer_info > *{display:table-cell; vertical-align:top;}
.layer_info .user_info{width:calc(100% - 238px); padding:22px 30px;}
.layer_info .user_info .user_name{display:block; line-height:1.5; font-size:18px;}
.layer_info .user_info .user_btn{margin-top:20px;}
.layer_info .user_quick{width:238px; border-left:1px solid #ebebeb;}
.layer_info .user_quick > li{width:100%; border-top:1px solid #ebebeb;}
.layer_info .user_quick > li:first-child{border-top:0;}
.layer_info .user_quick > li > a{display:block; padding:30px; font-size:17px; font-weight:500; transition:color .3s;}
.layer_info .user_quick > li > a span{display:block; position:relative; padding-right:22px;}
.layer_info .user_quick > li > a span:after{content:""; display:block; position:absolute; top:50%; right:0; width:12px; height:12px; margin-top:-6px; background:url(/images/common/icon_arw.png) no-repeat 0 50% / 100% auto;}
.layer_info .user_quick > li:hover a{color:#236bcc;}

.navi_util .util_list > li:hover .util_layer,
.navi_util .util_list > li:hover .depth{opacity:1; visibility:visible;}

/*footer*/
#footer{background-color:#0f0f0f;}
.footer_top{border-bottom:1px solid rgba(255,255,255,.1);}
.footer_top .inner{position:relative; padding:24px 0;}
.footer_bottom{padding:60px 0 50px;}

.foot_navi{overflow:hidden; padding-right:75px;}
.foot_navi ul{margin-left:-30px; margin-top:-4px; font-size:0;}
.foot_navi ul > li{display:inline-block; position:relative; margin-left:14px; margin-top:4px; padding-left:16px; font-size:14px;}
.foot_navi ul > li:after{content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-6px; background:rgba(255,255,255,.1);}
.foot_navi ul > li > a{display:inline-block; color:#fff;}
.btn_top{display:block; position:absolute; top:0; right:0; width:75px; height:100%; border:1px solid rgba(255,255,255,.1); border-width:0 1px;}
.btn_top span{opacity:.8; display:inline-block; position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); font-size:13px; color:#fff; text-align:center;}

.adr address{display:block; font-size:0;}
.adr address span{display:inline-block; margin:0 20px 8px 0; font-size:14px; color:#757575;}
.adr address a{color:#757575;}
.adr address .point{color:#fff;}
.copy{margin-top:36px; font-size:13px; font-weight:500; color:#474646; text-transform:uppercase;}

/*icon common*/
.sns .ico{width:19px; height:19px; margin-right:6px; background-image:url(/images/common/icon_etc@pc.jpg); background-size:auto 100%; vertical-align:-5px;}
.ico{display:inline-block; background:no-repeat 0 50% / contain;}
.ico.lang{width:19px; height:19px; margin-right:4px; background-image:url(/images/common/icon_lang.svg); vertical-align:middle;}
.ico.business{width:40px; height:33px; background-image:url(/images/common/icon_business.svg);}
.ico.person{width:40px; height:33px; background-image:url(/images/common/icon_person.svg);}
.ico.arw{width:12px; height:12px; background-image:url(/images/common/icon_arw.png);}
.ico.naver{width:19px; height:19px; margin-right:6px; background-image:url(/images/common/icon_naver@pc.jpg); vertical-align:-5px;}
.ico.insta{width:19px; height:19px; margin-right:6px; background-image:url(/images/common/icon_insta@pc.png); vertical-align:-5px;}
.ico.tube{width:19px; height:19px; margin-right:6px; background-image:url(/images/common/icon_yotube@pc.jpg); vertical-align:-5px;}
.ico.twitter{width:19px; height:19px; margin-right:6px; background-image:url(/images/common/icon_twitter@pc.jpg); vertical-align:-5px;}
.ico.prev{width:9px; height:9px; background-image:url(/images/common/icon_arw_reverse.png);}
.ico.next{width:9px; height:9px; background-image:url(/images/common/icon_arw.png);}
.ico.search{width:20px; height:20px; background-image:url(/images/common/icon_search.png);}
.ico.grid{width:20px; height:20px; background-image:url(/images/common/icon_grid.png);}

/*button*/
.user_btn{display:inline-block; min-width:71px; line-height:1.2; padding:9px 9px 10px; border-radius:20px; font-size:12px; text-align:center;}
.user_btn.type1{background-color:#236bcc; color:#fff; font-weight:500;} /*파랑*/
.user_btn.type2{background-color:#ced2d7; color:#fff; font-weight:500;} /*그레이*/
.user_btn.type3{background-color:#fa5d2a; color:#fff; font-weight:500;} /*주황*/

.login_btn{display:block; width:100%; height:50px; line-height:50px; font-weight:400; border-radius:3px; text-align:center;}
.login_btn.type1{background-color:#fa5d2a; color:#fff;} /*주황*/
.login_btn.type2{background-color:#343a43; color:#fff;} /*파랑*/
.login_btn.type3{background-color:#fff; border:1px solid #e9e9eb;} /*흰색*/

/*list*/
.sec_recommend{padding-top:108px; padding-bottom:170px;}
.sec_recommend .tit_box{max-width:none; padding-left:382px;}

.prd_wrap{}
.prd_list{margin-left:-16px; font-size:0;}
.prd_list .item{display:inline-block; width:calc(20% - 16px); margin-left:16px; margin-bottom:20px; font-size:1rem; outline:0; vertical-align:top;}
.prd_list .item > a{overflow:hidden; display:block; position:relative; width:100%; height:100%; transition:box-shadow 0.3s ease;}
.prd_list .item:not(.swiper-slide) > a:hover{z-index:10; box-shadow:0 30px 30px rgba(0,0,0,0.05);}
.prd_list .thumb{display:block; position:relative;}
.prd_list .thumb .state{position:absolute; top:15px; left:15px; z-index:10}
.prd_list .thumb .img{display:block; position:relative; width:100%; padding-top:95.23%; background:#f9f9f9 no-repeat 50% 50% / cover;}
.prd_list .thumb .img.img_mask:after{content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.42) 100%); background:-webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.42) 100%); background:linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.42) 100%);}
.prd_list .state{display:inline-block; position:relative; width:50px; height:50px; line-height:50px; border-radius:20px; text-align:center;}
.prd_list .state span{position:absolute; top:50%; left:0; margin-top:1px; width:100%; line-height:1.3; font-size:14px; font-weight:500; transform:translateY(-50%); }
.prd_list .state.type1{background:rgba(255,38,38,.9); color:#fff;}
.prd_list .state.type2{background:rgba(0,208,255,.9); color:#fff;}
.prd_list .state.type3{background:rgba(255,255,255,.9); color:#3d3d3d;}
.prd_list .state.type4{background:rgba(47,190,0,.9); color:#fff;}
.prd_list .desc{position:relative; padding:22px; background-color:#fff; text-align:left;}
.prd_list .desc .thumb_desc{position:absolute; bottom:100%; margin-bottom:10%; left:0; width:100%; padding:0 20px; color:#fff;}
.prd_list .desc .thumb_desc .sub{color:inherit;}
.prd_list .desc > *:first-child{margin-top:0;}
.prd_list .user{margin-bottom:16px;}
.prd_list .user:after{content:""; display:block; clear:both;}
.prd_list .user .user_thumbnail{float:left; display:block; position:relative; width:46px; height:46px; border:0px solid transparent; border-radius:50%;}
.prd_list .user .user_thumbnail:not(.normal){border-width:3px;}
.prd_list .user .user_thumbnail.vip{border-color:#27d6b9;}
.prd_list .user .user_thumbnail.best{border-color:#d656c7;}
.prd_list .user .user_thumbnail:after{content:""; display:block; position:absolute; top:-4px; left:-10px; width:26px; height:26px; background:no-repeat 50% 50% / 14px auto; border-radius:50%;}
.prd_list .user .user_thumbnail.vip:after{background-color:#27d6b9; background-image:url(/images/common/icon_vip.svg);}
.prd_list .user .user_thumbnail.best:after{background-color:#e274d5; background-image:url(/images/common/icon_best.svg);}
.prd_list .user .user_thumbnail .img{overflow:hidden; display:block; width:100%; height:100%; border-radius:50%;}
.prd_list .user .user_thumbnail img{display:block; width:100%; height:100%;}
.prd_list .user .user_thumbnail + *{padding-top:4px;}
.prd_list .user .user_thumbnail ~ *{padding-left:60px;}
.prd_list .user .grade{display:block; font-size:11px; font-weight:600; text-shadow:0 0 0 rgba(0,0,0,.5); color:#7f7f7f;}
.prd_list .user .grade.vip{color:#27d6b9;}
.prd_list .user .grade.best{color:#d656c7;}
.prd_list .user .grade.normal{color:#7f7f7f; font-weight:300; text-shadow:none;}
.prd_list .user .aka{display:block; font-size:15px; font-weight:500; color:#333;}
.prd_list .sub{display:block; font-size:13px; color:#787878;}
.prd_list .ellip{margin-top:4px; font-size:17px; font-weight:400;}
.prd_list .thumb_desc + .dash_list{margin-top:0;}
.prd_list .dash_list{overflow:hidden; margin-top:8px; font-size:0;}
.prd_list .dash_list .inbox{margin-left:-18px; }
.prd_list .dash_list span{display:inline-block; position:relative; margin-left:8px; padding-left:10px; font-size:13px; font-weight:400; color:#787878;}
.prd_list .dash_list span:after{content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:8px; margin-top:-4px; background:#e9e9e9;}
.prd_list .dash_list span:first-child:after{content:none;}
.prd_list .dash_list .sns{color:#006098;}
.prd_list .dash_list .sns.naver{color:#2fbf00;}
.prd_list .dash_list .sns.insta{color:#d656c7;}
.prd_list .dash_list .work{color:#333;}
.prd_list .dash_list.dash_border_list{margin-top:12px; padding-top:12px; border-top:1px solid #e9e9eb;}

.prd_list .no_item .thumb{border:2px dashed #e9e9eb;}
.prd_list .no_item .thumb .img{background-size:inherit;}
.prd_list .no_item .ellip{overflow:unset; white-space:unset; word-wrap:unset; text-overflow:unset;}
.prd_rivew_list .no_item .item_layout,
.prd_rivew_list .no_item .desc{background:transparent !important;}
.prd_rivew_list .no_item .desc{border:2px dashed #dcedf2;}
.prd_wrap:not(.prd_recommend_wrap) .prd_list .no_item{width:100% !important;}
.prd_wrap:not(.prd_recommend_wrap) .prd_list .no_item .thumb .img{padding-top:0; height:180px;}

/* .prd_recommend_wrap{text-align:center;} */
.prd_recommend_wrap .ctrl_recommend{display:inline-block; border:1px solid #ebebeb; border-width:1px 1px 0 0 ; margin-top:10px; font-size:0;}
.ctrl_recommend a{display:inline-block; position:relative; width:60px; height:60px; line-height:60px; background-color:#fdfdfd; border:1px solid #ebebeb; border-width:0 0 1px 1px; vertical-align:top; font-size:11px; font-weight:500; text-shadow:0 0 0 rgba(0,0,0,.5);}
.ctrl_recommend a span{display:inline-block; width:100%; line-height:1.3; vertical-align:middle; text-align:center;}
.ctrl_recommend a .ico{opacity:.5; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:opacity .3s;}
.ctrl_recommend a:hover .ico{opacity:1;}

.prd_list.prd_rivew_list > li{width:calc(100% / 3 - 16px);}
.prd_list.prd_rivew_list .item_layout{display:table; table-layout:fixed; position:relative;  width:100%; height:100%; background-color:#fff; transition:box-shadow 0.3s ease;}
.prd_list.prd_rivew_list *:not(.swiper-slide) .item_layout:hover{z-index:10; box-shadow:0 30px 30px rgba(0,0,0,0.05);}
.prd_list.prd_rivew_list .thumb{display:table-cell; width:45.2%; padding:30px 0 30px 28px; vertical-align:top;}
.prd_list.prd_rivew_list .thumb .img{padding-top:0; height:100%;}
.prd_list.prd_rivew_list .desc{display:table-cell; width:54.8%; padding:40px 30px; vertical-align:top;}

.prd_filter_wrap{position:relative;}
.prd_filter_wrap .prd_filter{position:relative;}
.prd_filter{font-size:0;}
.prd_filter .filter{display:inline-block; width:calc(100% / 3 - 0.1px); font-size:1rem; vertical-align:top;}
.prd_filter .inp_filter{position:relative; width:100%; height:50px; background-color:gold; border:1px solid #e9e9eb; border-width:1px 1px 1px 0; }
.prd_filter .inp_filter:before,
.prd_filter .inp_filter:after{content:""; display:block; position:absolute; background-color:#e9e9eb;}
.prd_filter .inp_filter:before{top:0; left:-1px; z-index:0; width:1px; height:100%;}
.prd_filter .inp_filter:after{display:none;}
.prd_filter .inp_filter .inp{display:block; width:100%; height:100%; margin:0; padding:10px 54px; background-color:#fff; text-align:left; outline:0;}
.prd_filter .inp_filter .ico{position:absolute; top:50%; left:24px; transform:translateY(-50%);}
.prd_filter .inp_filter .ico.arw{left:auto; right:34px; transform:translateY(-50%) rotate(90deg);}
.prd_filter_wrap .detail_filter{display:none; position:absolute; top:100%; left:-1px; z-index:20; width:100%; width:100%; margin-top:-1px; background-color:#fff; border:1px solid #333;}
.prd_filter_wrap .detail_filter > *{padding:20px 14px 20px 20px;}
.prd_filter_wrap .filter_select{border-top:1px solid #e9e9eb; font-size:0;}
.prd_filter_wrap .filter_select button{background:none; position:relative; border:none; vertical-align:middle; cursor:pointer;}
.prd_filter_wrap .filter_select ul{display:inline-block; width:calc(100% - 120px); vertical-align:middle;}
.prd_filter_wrap .filter_select ul > li{display:inline-block; margin-right:16px; font-size:14px; font-weight:500; vertical-align:middle; cursor:pointer;}
.prd_filter_wrap .filter_select ul > li span{vertical-align:middle; transition:color .2s;}
.prd_filter_wrap .filter_select ul > li .select_cancel{width:22px; height:22px; padding:4px 3px 0;}
.prd_filter_wrap .filter_select ul > li .select_cancel:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/images/common/icon_cancel.png) no-repeat 50% 50% / 12px auto;}
.prd_filter_wrap .filter_select ul > li:hover span{color:#afafaf;}
.prd_filter_wrap .filter_select .select_reset,
.prd_filter_wrap .filter_select .select_search{display:inline-block; padding:5px 10px; font-size:14px; font-weight:400; color:#666; vertical-align:middle;}
.prd_filter_wrap .filter_select .select_search{color:#236bcc;}
.prd_filter_wrap .filter_select .select_reset:before,
.prd_filter_wrap .filter_select .select_search:before{content:""; display:inline-block; width:21px; height:21px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%; vertical-align:middle;}
.prd_filter_wrap .filter_select .select_reset:before{opacity:.5; background-image:url(/images/common/icon_reset.png);}
.prd_filter_wrap .filter_select .select_search:before{background-image:url(/images/common/img_search_b.png);}
.prd_filter_wrap .detail_filter.detail{width:calc(100% + 112px); box-sizing:border-box; font-size:1rem;}
.prd_filter_wrap .detail_filter.detail .filter_search{display:table; width:100%; border-top:1px dashed #e9e9eb;}
.prd_filter_wrap .detail_filter.detail .filter_search:nth-of-type(1){border-top-width:0px;}
.prd_filter_wrap .detail_filter.detail .filter_search > em,
.prd_filter_wrap .detail_filter.detail .filter_search > .designCheck{display:table-cell; vertical-align:middle;}
.prd_filter_wrap .detail_filter.detail .filter_search > em{width:15%; color:#236bcc;}
.prd_filter_wrap .detail_filter.detail .filter_search > .designCheck{width:85%;}
.prd_filter_wrap .detail_filter.detail .filter_select ul{width:calc(100% - 240px);}
.ie .prd_filter_wrap .detail_filter{width:calc(100% + 1px);}
.ie .prd_filter_wrap .detail_filter.detail{width:calc(100% + 112px);}
.ie .prd_filter_wrap .designCheck input[type="checkbox"] + label:before{top:2px;}
.ie .prd_filter_wrap .filter_select .select_reset:before{vertical-align:top;}

.prd_filter_wrap .designCheck input[type="checkbox"] + label{padding-left:23px; padding-bottom:2px; padding-top:2px; margin-right:15px;}
.prd_filter_wrap .designCheck input[type="checkbox"] + label:before{top:1px;}
.prd_filter_wrap .designCheck input[type="checkbox"]:checked + label{color:#f0501b; font-weight:500;}

.prd_filter_wrap .filter.active .inp_filter{z-index:22; border-color:#777;}
.prd_filter_wrap .filter.active .inp_filter .inp{background-color:#fafafa;}
.prd_filter_wrap .filter.active .inp_filter:before,
.prd_filter_wrap .filter.active .inp_filter:after{z-index:22; background-color:#777;}
.prd_filter_wrap .filter.active .inp_filter .ico.arw{transform:translateY(-50%) rotate(-90deg);}
.prd_filter_wrap .detail_filter.detail.active,
.prd_filter_wrap .filter.active .detail_filter{display:block;}
.prd_filter_wrap .filter input{border:0;}

.prd_filter_wrap{display:table; width:100%; table-layout:fixed; padding:36px 70px; margin-bottom:50px; border:1px solid #e9e9eb; box-shadow:20px 20px 62px rgba(0,0,0,.03);}
.prd_filter_wrap > *{display:table-cell; vertical-align:middle;}
.prd_filter_wrap h2{width:20%; font-size:25px !important; font-weight:400 !important;}
.prd_filter_wrap .prd_filter{width:72%;}
.prd_filter_wrap .btn{width:8%; text-align:right;}
.prd_filter_wrap .btn .button{width:100px; height:50px; line-height:48px; margin:0px;}
.prd_filter_wrap .btn .button.active{border-color:#25282d !important; color:#343a43 !important; background-color:#fff !important;}

/* layer pop */
.popBox.mini{max-width:inherit; width:500px;}

/* tab */
.area_tab{margin-top:-10px; margin-bottom:40px;}
.area_tab .tab > li{display:inline-block; margin-right:20px;}
.area_tab .tab > li:last-child{margin-right:0px;}
.area_tab .tab > li > a{display:inline-block; min-width:100px; padding:10px 15px; font-size:17px; font-weight:300; text-align:center;}
.area_tab .tab > li.on > a{background:#236bcc; color:#fff; box-shadow:0px 10px 30px rgba(0,0,0,0.15);}

@media screen and (min-width:1060px){
	#header.fix .gnb > li > a{padding:20px 0px;}
	.depth{opacity:0; visibility:hidden; position:absolute; top:100%; left:50%; z-index:10; width:160px; margin-left:-80px; text-align:left; background:#fff; border:1px solid #797979; transform:translateY(0); transition:opacity .3s;}
	.depth > li{display:block; font-size:14px; font-weight:400; border-top:1px solid #eee;}
	.depth > li:first-child{margin-top:0; border-top-width:0;}
	.depth > li  > a{display:block; width:100%; padding:12px 20px; font-weight:400; color:inherit; transition:color .3s;}
	.depth > li  > a span{display:inline-block; position:relative; padding-bottom:1px;}

	.prd_recommend_wrap .prd_list .no_item{position:static;}
	.prd_recommend_wrap .prd_list .no_item:after{content:""; display:block; position:absolute; top:0; left:356px; width:100%; height:100%; background:url(/images/common/img_noimg_bg.png) repeat-x 20px 0;}
	.prd_recommend_wrap.swiper-container{overflow:visible;}
	.prd_recommend_wrap{position:relative;}
	.prd_recommend_wrap .prd_mask{display:block; position:absolute; top:0; right:100%; z-index:10; width:100%; height:100%; background-color:#fff;}
	.prd_recommend_wrap .prd_list{position:relative; margin-left:-15px;}
	.prd_recommend_wrap .prd_list .item{width:336px; padding:0 21px; margin-bottom:0; margin-left:0;}
	.prd_recommend_wrap .prd_list .item > a{position:relative;}
	.prd_recommend_wrap .prd_list .item.swiper-slide-active{width:376px; padding:0 40px;}
	.prd_recommend_wrap .prd_obj{display:block; position:absolute; top:50%; left:0; z-index:10; width:346px; height:567px; border-radius:50px; border:24px solid #fff; border-width:60px 24px; box-shadow:40px 40px 70px rgba(0,0,0,.1); transform:translateY(-50%);}
	.prd_recommend_wrap .prd_obj:after{content:""; display:block; position:absolute; top:50%; left:50%; width:346px; height:567px; box-sizing:border-box; border:5px solid #191919; border-radius:50px; transform:translate(-50%, -50%);}
	.prd_recommend_wrap .ctrl_recommend{position:absolute; top:100%; left:382px; border:1px solid #ebebeb; border-width:1px 1px 0 0 ; margin-top:10px; font-size:0;}
}

/* 1700px */
@media screen and (max-width:1700px){
	#wrap .inner{max-width:inherit; padding-left:50px; padding-right:50px;}
}

@media screen and (max-width:1600px){
	.prd_filter_wrap .detail_filter.detail,
	.ie .prd_filter_wrap .detail_filter.detail{width:calc(100% + 100px);}
	.prd_filter_wrap{padding:36px 50px;}
	.prd_filter_wrap h2{width:auto;}
	.prd_filter_wrap .btn{width:100px;}
}

@media screen and (max-width:1550px){
    .inner{padding:0 20px; max-width:inherit;}
    .footer_top{padding:0 20px;}
}

/* 1380px */
@media screen and (max-width:1380px){
	html, body{font-size:15px;}
	#wrap .inner{max-width:inherit; padding-left:40px; padding-right:40px;}
	
	.prd_list.prd_rivew_list > li{width:calc(50% - 16px);}
}
@media screen and (max-width:1380px) and (min-width:1060px){
	.header_wrap{padding-left:200px;}
	.gnb > li{margin:0 28px;}
}

/* 1200px */
@media screen and (max-width:1280px){
	.prd_list .item{overflow:hidden; width:calc(25% - 16px);}
	.prd_list .item > a{border-radius:11px;}
	.prd_filter_wrap .detail_filter > *{padding:18px 14px 18px 18px;}
	.prd_filter_wrap{padding:32px 50px; margin-bottom:30px;}
	.prd_filter_wrap h2{width:210px; font-size:22px !important;}

	.sec_recommend{padding-top:88px; padding-bottom:150px;}
}

@media screen and (max-width:1280px) and (min-width:1060px){
	.header_wrap{padding-left:180px;}
	.gnb > li{margin:0 18px;}
	.gnb > li > a{font-size:16px;}
}

/* 1059px */
@media screen and (max-width:1059px){
	*[data-device="pc"]{display:none;}
	*[data-device="mobile"]{display:block;}
	
	#wrap .inner{padding-left:28px; padding-right:28px;}
	
	#header{height:70px;}
	#header .logo > a{background-image:url(/images/common/img_logo_m.png)}
	#header .header_menu_btn{display:block;}
	#header .header_menu_btn:not(.menu_open){right:-12px;}
	#container{padding-top:87px;}
	
	.navigation{position:fixed; top:0; right:-100%; z-index:50; width:100%; max-width:568px; height:100%; margin:0 auto; padding-bottom:70px; padding-left:20px; padding-right:20px; background-color:#fff; transition:right .5s ease;}
	
	.navi_top{position:relative; width:100%; height:56px; background-color:#fff;}
	.navi_top .header_menu_btn{right:6px;}
	
	.navi_util_header .user_info{position:relative; padding:25px 0 16px;}
	.navi_util_header .user_info .user_name{display:block; font-size:18px;}
	.navi_util_header .user_info .user_name .name{font-weight:600;}
	.navi_util_header .user_info .user_btn{position:absolute; top:50%; right:0; transform:translateY(-50%);}
	.navi_util_header .user_quick{padding:0 0 25px;}
	.navi_util_header .user_quick ul{border:1px solid #ddd; border-radius:9px; font-size:0;}
	.navi_util_header .user_quick li{display:inline-block; position:relative; width:50%; font-size:1rem; vertical-align:top; text-align:center;}
	.navi_util_header .user_quick li:before{content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:16px; margin-top:-8px; background-color:rgba(216,216,216,.7);}
	.navi_util_header .user_quick li:first-child:before{content:none;}
	.navi_util_header .user_quick li > a{display:block; padding:13px 18px 14px;}
	
	.navi{overflow:hidden; overflow-y:auto; width:100%; height:calc(100% - 62px); padding-bottom:70px;}
	.navi .gnb{overflow:hidden; overflow-y:auto; height:calc(100% - 62px);}
	.gnb > li{display:block; margin-left:0px; margin-right:0px; margin-bottom:12px;}
	.gnb > li > a{display:block; padding:2px; background-color:#f5f7fb; border-radius:11px; font-size:1.025rem; font-weight:400; transition:background .5s, color .2s;}
	.gnb > li > a span{display:block; padding:12px 18px 14px; background-color:transparent;}
	.gnb .depth{display:none; width:100%; height:100%; padding:12px 0 12px; background-color:#fff; transition:right .5s cubic-bezier(0.16, 0.38, 0.46, 0.96);}
	.gnb .depth > li{display:block; width:100%; line-height:1.7; border-top:1px solid #f1f2f5;}
	.gnb .depth > li:first-child{border-top-width:0;}
	.gnb .depth > li > a{display:block; padding:15px 18px 15px; font-size:15px; font-weight:500; color:#666; word-break:break-word;}
	.gnb > li.toggle > a span{position:relative; padding-right:36px;}
	.gnb > li.toggle > a span:after{content:""; display:block; position:absolute; top:50%; right:20px; width:12px; height:12px; margin-top:-6px; background:url(/images/common/icon_arw.png) no-repeat 0 50% / 100% auto;}
	.gnb > li.active > a{background-image:-webkit-linear-gradient(6deg,#56CCF2 -146%,#2F80ED 100%); background-image:linear-gradient(84deg,#56CCF2 -146%,#2F80ED 100%); color:#236bcc;}
	.gnb > li.active > a span{border-radius:9px; background-color:#fff;}

	.area_tab .tab{display:table; table-layout:fixed; margin-left:-20px;}
	.area_tab .tab > li{display:table-cell; margin-right:0px; padding-left:20px;}	
	.area_tab .tab > li > a{min-width:80px; padding:10px 25px;}
	
	.navi_footer{position:absolute; bottom:0; right:0; z-index:10; width:100%; background-color:#236bcc; border-top:1px solid #f1f2f5;}
	.navi_footer .footer_list{font-size:0;}
	.navi_footer .footer_list > li{display:inline-block; position:relative; width:33.333%; font-size:1rem; text-align:center;}
	.navi_footer .footer_list > li:before{content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:16px; margin-top:-8px; background-color:rgba(216,216,216,.2);}
	.navi_footer .footer_list > li:first-child:before{content:none;}
	.navi_footer .footer_list > li > a{display:block; height:61px; line-height:61px; padding:0; color:#fff;}
	
	.footer_bottom{padding:40px 0 30px;}
	.copy{margin-top:24px;}
	
	.menu_open .navigation{right:0;}
	.menu_open .mask{position:fixed; z-index:33; width:100%; height:100%; background-color:rgba(0,0,0,.8); transition:all .5s;}
	
	.prd_list .item{width:calc(100% / 3 - 16px);}
	.prd_list .item > a{border-radius:9px;}
	.prd_list .state{width:42px; height:42px; line-height:42px; border-radius:12px;}
	.prd_list .state span{font-size:12px;}
	.prd_list .ellip{font-size:16px;}
	
	.prd_list .no_item{width:100% !important;}
	.prd_list .no_item .thumb .img{padding-top:0; height:180px;}
	
	.prd_recommend_wrap .ctrl_recommend{margin-top:0;}
	.prd_recommend_wrap .prd_obj{display:none;}
	.ctrl_recommend a{width:50px; height:50px; line-height:50px;}
	
	.prd_list.prd_rivew_list .thumb{width:40%; padding:20px 0 20px 20px;}
	.prd_list.prd_rivew_list .desc{width:60%; padding:30px 22px;}

	.prd_filter_wrap{display:block; padding:0; border:0; font-size:0px;}
	.prd_filter_wrap > *{display:inline-block;}
	.prd_filter_wrap h2{display:none; width:auto; font-size:20px !important; text-align:center;}
	.prd_filter_wrap .prd_filter{width:calc(100% - 100px);}
	.prd_filter_wrap .btn{width:auto;}

	.sec_recommend{padding-bottom:70px;}
	.sec_recommend .tit_box{padding-left:0;}

	.sns .ico{background-image:url(/images/common/icon_etc.jpg);}
	.ico.naver{background-image:url(/images/common/icon_naver.png);}
	.ico.insta{background-image:url(/images/common/icon_insta.png);}
	.ico.tube{background-image:url(/images/common/icon_yotube.jpg);}
	.ico.twitter{background-image:url(/images/common/icon_twitter.jpg);}
}

@media screen and (max-width:840px){
	.area_tab{overflow-x:auto; position:relative; width:100%; height:42px;}
	.area_tab .tab{width:auto; margin:0px auto;}
	.area_tab .tab.full{position:absolute; margin:0px;}
	.area_tab .tab > li{height:42px; padding:0px;}
	.area_tab .tab > li > a{display:flex; flex-direction:column; justify-content:center; height:100%; margin:0 2px; padding:0 15px; font-size:15px; white-space:nowrap;}
}

/* 768px */
@media screen and (max-width:768px){
	html, body{font-size:14px;}
	.button{border-radius:2px;}
	/*body,input,textarea,button,select{font-family:'맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; color:#444;}*/
	
	#wrap .inner{padding-left:20px; padding-right:20px;}

	.login_btn{height:41px; line-height:41px; font-size:13px;}
	
	.prd_list .item{width:calc(50% - 16px);}
	.prd_list .thumb .img{padding-top:89.23%;}
	.prd_list .desc{padding:18px;}
	.prd_list .ellip{font-size:15px;}
	.prd_list .dash_list span{font-size:12px;}
	.prd_list .desc .thumb_desc{margin-bottom:12px; padding:0 18px;}
	
	
	.prd_filter .filter:first-child{width:100%;}
	.prd_filter .filter{width:50%;}
	.prd_filter .inp_filter{border-width:0 0 1px 1px;}
	.prd_filter .inp_filter:before{top:-1px; width:100%; height:1px;}
	.prd_filter .inp_filter:after{top:0; right:-1px; display:block; width:1px; height:100%;}
	.prd_filter .inp_filter .inp{padding:10px 41px;}
	.prd_filter .inp_filter .ico{left:12px;}
	.prd_filter .inp_filter .ico.arw{right:20px;}
	.prd_filter_wrap .detail_filter{left:0; background-color:#fdfdfd;}
	.prd_filter_wrap .detail_filter > *{padding:18px;}

	.prd_filter_wrap .filter_select{overflow:hidden;}
	.prd_filter_wrap .filter_select ul{display:block; width:100%; margin-bottom:12px;}
	.prd_filter_wrap .filter_select .select_reset,
	.prd_filter_wrap .filter_select .select_search{float:right; padding:8px 10px; background-color:#efefef;}
	.prd_filter_wrap .filter_select .select_reset:before{background-image:url(../images/common/icon_reset@x3.png);}
	.prd_filter_wrap .filter_select .select_search:before{background-image:url(/images/common/img_search_b@x2.png);}
	.prd_filter_wrap .detail_filter.detail .filter_select ul{width:100%;}
	.prd_filter_wrap .btn .button{height:100px; line-height:98px; border-radius:0 2px 2px 0px;}
	
	.prd_list.prd_rivew_list{margin-left:0px;}
	.prd_list.prd_rivew_list > li{width:100%; margin-left:0px;}
	.prd_list.prd_rivew_list .thumb{width:50%; padding:16px 0 16px 16px;}
	.prd_list.prd_rivew_list .desc{width:50%;}
}

@media screen and (max-width:640px){
	.prd_filter_wrap .detail_filter.detail .filter_search > em{width:80px;}
	.prd_filter_wrap .detail_filter.detail .filter_search > .designCheck{width:auto;}
}

@media screen and (max-width:480px){	
	.area_tab{margin-bottom:20px;}
	.area_tab .tab > li > a{font-size:14px;}
	.area_tab .tab > li.on > a{background:transparent; box-shadow:none;}
	.area_tab .tab > li.on{background:#236bcc; box-shadow:0px 10px 30px rgba(0,0,0,0.15);}
}
	
/* 450px */
@media screen and (max-width:450px) and (min-width:361px){
	.prd_list{margin-left:0px;}
	.prd_list .thumb .state{top:8px; left:8px;}
	.prd_list .item{width:100%; margin-left:0px; margin-bottom:16px;}
	.prd_list .item > a{display:table; table-layout:fixed; width:100%;}
	.prd_list .thumb,
	.prd_list .desc{display:table-cell; vertical-align:top;}
    .prd_recommend_wrap2 .prd_list .thumb{display:block; width:100%; height:100%;}
    .prd_recommend_wrap2 .prd_list .thumb .img{padding-top:89.23%;}
    .prd_list .thumb{width:40%; height:100%;}
	.prd_list .thumb .img{padding-top:0; height:100%;}
	.prd_list .desc{width:60%; padding:20px 16px;}
	.prd_list .desc .thumb_desc{position:static; padding:0; margin-bottom:8px; color:inherit;}
	.prd_list .thumb .img.img_mask:after{content:none;}
	.prd_list .ellip{overflow:hidden; display:-webkit-box; line-height:1.4em; max-height:2.8em; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; text-overflow:ellipsis; white-space:unset;}
	
	.prd_recommend_wrap .prd_list .desc{border:1px solid #ebebeb; border-width:1px 1px 1px 0; border-radius:0 9px 9px 0;}
	
	.prd_list.prd_rivew_list .thumb{width:40%;}
	.prd_list.prd_rivew_list .desc{width:60%;}
}

@media screen and (max-width:450px){
	#wrap .inner{padding-left:12px; padding-right:12px;}
	
	.prd_filter_wrap .filter{position:relative; width:100%;}
	.prd_filter_wrap .detail_filter > *{padding:16px;}
	.prd_filter_wrap .detail_filter.detail{top:calc(100% + 46px); width:100%;}
	.prd_filter_wrap > *{display:block;}
	.prd_filter_wrap .prd_filter{width:100%;}
	.prd_filter_wrap .btn{width:100%;}
	.prd_filter_wrap .btn .button{width:100%; height:46px; line-height:44px; border-radius:0 0 2px 2px;}
	.ie .prd_filter_wrap .detail_filter.detail{width:100%;}
}

@media screen and (max-width:360px){	
	.prd_list{margin-left:0px;}
	.prd_list .item{width:100%; margin-left:0px;}
	
	.prd_list.prd_rivew_list .item_layout{display:block;}
	.prd_list.prd_rivew_list .thumb{display:block; width:100%; padding:12px 12px 0;}
	.prd_list.prd_rivew_list .thumb .img{padding-top:89.23%; height:0;}
	.prd_list.prd_rivew_list .desc{display:block; width:100%; padding:22px 20px;}
	
}