@charset "utf-8"; @import url('../../fonts/font.css'); @import url('jquery-ui.css'); @import url('rSlider.min.css'); /* CSS Reset */ body,html, header,footer,aside,nav,section,article,details,figure,figcaption,menu,command, div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td, /* Block Element */ h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist, img,embed,object,canvas,audio,video,meter,progress,keygen, /* Inline Block Element */ a,label,output,dialog, /* Inline Element */ address,blockquote, /* Text Block Element */ p,pre,/* Text Inline Block Element */ span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp, /* Text Inline Element */ acronym,big,frame,frameset,noframes,tt, /* Not HTML5 Used Element */ map,option,hr,*{border:0;padding:0;margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;vertical-align: baseline;box-sizing:border-box; word-break: break-word; /*페이지 전체 확인후 확정하기*/} header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block} /* HTML5 Block Element */ /* applet,basefont,center,dir,font,strike{display:none} XHTML4, HTML5 Element Not Used Remove */ q,blockquote{quotes:none;content:none} li,menu{list-style:none;word-break:break-all} table{width:100%;border-spacing:0;border-collapse: separate;table-layout: fixed;} caption{text-align:left;} th,td{text-align:center;vertical-align:middle} address{font-style:normal} label{display:inline-block;} a{font-family: inherit;text-decoration:none;display:inline-block;} p{margin-block-start: 0; margin-block-end: 0;} /* Common Setting */ html{} html,body{width:100%;height:100%;background:#fff;} body {color:#242020;font-family: 'Noto Sans KR', sans-serif; font-weight: normal; font-size:14px; line-height: 20px; letter-spacing: 0; word-spacing: 0; letter-spacing: 0.025em; word-spacing: 0.025em;} div{outline:0} /* Script TabIndex Click Focusing Line Remove */ img {vertical-align:middle;} span {display: inline-block;} table {} em {font-style: normal;} input {font-family: inherit;} h1,h2,h3,h4,h5,h6 {font-weight: bold; margin-block-start: 0; margin-block-end: 0;} strong, b {font-weight: bold;} [disabled] {pointer-events: none;} button {font-family: inherit; cursor: pointer; background-color: transparent;} button[disabled], button[readonly] {opacity: .2; cursor: text; outline: 0 none;} input[disabled], input[readonly]{cursor: text; outline: 0 none;} :focus, :active {outline: 0 none;} input:focus::-webkit-input-placeholder {color: transparent;} input:focus::-moz-placeholder {color: transparent;} input:focus:-ms-input-placeholder {color: transparent;} input:focus::-ms-input-placeholder {color: transparent;} ::placeholder {color: #888; font-weight: normal;} ::-webkit-input-placeholder {color: #888; font-weight: normal;} ::-moz-placeholder {color: #888; font-weight: normal;} :-ms-input-placeholder {color: #888; font-weight: normal;} ::-ms-input-placeholder {color: #888; font-weight: normal;} .fc-b {color: #0000FF !important;} .fc-r {color: #FF0000 !important;} .color1 {color: #ec6608 !important;} .color2 {color: #0276b2 !important;} .bg-color1 {background-color: #f8f8f8;} .bg-color2 {background-color: #fffaea;} .hidden {position: absolute; top: -9999px; left: -9999em;} .blind {overflow: hidden; text-indent: -999rem; font-size: 0;} caption {overflow: hidden; text-indent: -999rem; font-size: 0; width: 0; height: 0;} .ff-NSKR {font-family: 'Noto Sans KR', sans-serif;} .td-ul {text-decoration: underline !important;} .tt-u {text-transform: uppercase !important;} .fw-b, .bold {font-weight: bold !important;} .normal {font-weight: normal !important;} .ta-l {text-align: left !important;} .ta-c {text-align: center !important;} .ta-r {text-align: right !important;} .fl {width: auto; float: left !important;} .fr {width: auto; float: right !important;} .clear {clear: both !important;} .flrbox::after {content: ''; display: block; clear: both;} .va-t {vertical-align: top !important;} .va-b {vertical-align: bottom !important;} .full {width: 100% !important;} .w10p {width: 10% !important;} .w20p {width: 20% !important;} .w25p {width: 25% !important;} .w26p {width: 26% !important;} .w28p {width: 28% !important;} .w30p {width: 30% !important;} .w32p {width: 32% !important;} .w33p {width: 33% !important;} .w34p {width: 34% !important;} .w35p {width: 35% !important;} .w40p {width: 40% !important;} .w45p {width: 45% !important;} .w50p {width: 50% !important;} .w55p {width: 55% !important;} .w60p {width: 60% !important;} .w65p {width: 65% !important;} .w70p {width: 70% !important;} .w72p {width: 72% !important;} .w74p {width: 74% !important;} .w75p {width: 75% !important;} .w80p {width: 80% !important;} .w90p {width: 90% !important;} .w98p {width: 98% !important;} .full, .w100p {width: 100% !important;} .wAuto {width: auto !important;} .w100 {width: 100px !important;} .w120 {width: 120px !important;} .w150 {width: 150px !important;} .w1118 {width: 1118px !important;} .w300 {width:300px !important;} .w340 {width:340px !important;} .w400 {width:400px !important;} .w440 {width:440px !important;} .w481 {width:481px !important;} .w500 {width:500px !important;} .w553 {width:553px !important;} .w565 {width:565px !important;} .w600 {width:600px !important;} .w632 {width:632px !important;} .w700 {width:700px !important;} .w717 {width:717px !important;} .w744 {width:744px !important;} .w780 {width:780px !important;} .w800 {width:800px !important;} .pcHtml .popup.w800 {min-width: 800px !important;} .w900 {width:900px !important;} .w1000 {width:1000px !important;} .w1020 {width:1020px !important;} .w1102 {width:1102px !important;} .w1200 {width:1200px !important;} .w1272 {width:1272px !important;} .w1300 {width:1300px !important;} .w1500 {width:1500px !important;} .w1550 {width:1550px !important;} .hAuto {height: auto !important;} .h100p {height: 100% !important;} .pd0 {padding: 0px !important;} .pd10 {padding: 10px !important;} .mgt0 {margin-top: 0px !important;} .mgt3 {margin-top: 3px !important;} .mgt4 {margin-top: 4px !important;} .mgt5 {margin-top: 5px !important;} .mgt7 {margin-top: 7px !important;} .mgt9 {margin-top: 9px !important;} .mgt10 {margin-top: 10px !important;} .mgt11 {margin-top: 11px !important;} .mgt14 {margin-top: 14px !important;} .mgt15 {margin-top: 15px !important;} .mgt16 {margin-top: 16px !important;} .mgt19 {margin-top: 19px !important;} .mgt20 {margin-top: 20px !important;} .mgt30 {margin-top: 20px !important;} .mgt-8 {margin-top: -8px !important;} .mgt-9 {margin-top: -9px !important;} .mgt-110 {margin-top: -110px !important;} .mgl0 {margin-left: 0px !important;} .mgl8 {margin-left: 8px !important;} .mgl9 {margin-left: 9px !important;} .mgl10 {margin-left: 10px !important;} .mgl20 {margin-left: 20px !important;} .mgl25 {margin-left: 25px !important;} .mgr4 {margin-right: 4px !important;} .mgr5 {margin-right: 5px !important;} .mgr8 {margin-right: 8px !important;} .mgr10 {margin-right: 10px !important;} .mgr20 {margin-right: 20px !important;} .mgr25 {margin-right: 25px !important;} .mgb10 {margin-bottom: 10px !important;} .mgb15 {margin-bottom: 15px !important;} .mgb25 {margin-bottom: 25px !important;} .mgb30 {margin-bottom: 25px !important;} .mglr5 {margin-left: 5px !important; margin-right: 5px !important;} .mglr25 {margin-left: 25px !important; margin-right: 25px !important;} .mgtb8 {margin-top: 8px !important; margin-bottom: 8px !important;} .pdl0 {padding-left: 0px !important;} .pdl10 {padding-left: 10px !important;} .pdl15 {padding-left: 15px !important;} .pdr0 {padding-right: 0px !important;} .pdr7 {padding-right: 7px !important;} .pdr10 {padding-right: 10px !important;} .pdt0 {padding-top: 0px !important;} .pdt16 {padding-top: 16px !important;} .pdb0 {padding-bottom: 0px !important;} .pdb14 {padding-bottom: 14px !important;} .pdrl0 {padding-right: 0 !important; padding-left: 0 !important;} .pd0 {padding: 0px !important} .pd5 {padding: 5px !important} .pd8 {padding: 8px !important} .pdtype1 {padding: 29px 42px 26px !important;} .pdtype2 {padding: 39px 42px 49px !important;} .pdtype3 {padding: 29px 33px 28px !important;} .pdtype4 {padding: 13px 20px 10px !important;} .position-r {position: relative !important;} .position-a {position: absolute !important;} .ellipsis1 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;} .ellipsis2 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .dis-b {display: block !important;} .dis-t {display: table !important;} .dis-tc {display: table-cell !important; vertical-align: middle !important;} .dis-ib {display: inline-block !important;} .dis-flexCC {display: flex !important; justify-content: center; align-items: center;} .dis-flex {display: flex !important;} /*********************************************common cont*********************************************/ .hide {display: none !important;} .del {text-decoration: line-through;} /*윗,아래첨자*/ .sup {vertical-align: super; font-size: x-small;} .sub {vertical-align: sub; font-size: x-small;} .ico-caltxt {font-size: 0; width: 20px; height: 20px; background: url(../images/common/ico-caltxt.png) center center no-repeat;} .btn-talk {width: 50px; height: 50px; position: relative;} .btn-talk .txt {font-size: 0; width: 27px; height: 27px; background: url(../images/common/ico-OrderTalk.png) center center no-repeat;} .btn-talk .cnt {display: flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 5px; border-radius: 7px; background-color: #ea7c1e; position: absolute; right: 50%; top: 50%; margin-top: -16px; margin-right: -15px;} .btn-talk .cnt em {font-size: 11px; color: #fff; line-height: 13px;} .btn-label {width: 50px; min-height: 50px; position: relative; background: url(../images/common/ico-label.png) center 3px no-repeat; background-size: 74% auto; padding-top: 32px; padding-bottom: 3px; border-radius: 12px;} .btn-label .txt {font-size: 13px; line-height: 17px; vertical-align: top; display: block;} html.pcHtml .fix-toggle .btn-label:hover {background-color: rgba(0,0,0,.05);} .btn-manual {width: 50px; min-height: 50px; position: relative; background: url(../images/common/ico-manual.png) center 3px no-repeat; background-size: 74% auto; padding-top: 32px; padding-bottom: 3px; border-radius: 12px;} .btn-manual .txt {font-size: 13px; line-height: 17px; vertical-align: top; display: block;} html.pcHtml #header .utiltag > .inbox > [class*="btn-"]:hover {background-color: rgba(0,0,0,.05);} #header .labelbox .btn-label .txt, #header .utiltag .btn-manual .txt {display: none;} .btn-customer {width: 50px; height: 50px;} .btn-customer .txt {font-size: 0; width: 27px; height: 24px; background: url(../images/common/ico-customer.png) center center no-repeat;} .btn-mypage, .btn-logout {min-width: 50px; height: 50px; position: relative;} .btn-mypage .txt, .btn-logout .txt {font-size: 12px; line-height: 16px; color: #666;} .btn-mypage .txt::before, .btn-logout .txt::before {width: 20px; height: 20px; background-position: center center; background-repeat: no-repeat;} .btn-mypage .txt::before {background-image: url(../images/common/ajax-loader.gif);} .btn-logout .txt::before {background-image: url(../images/common/ajax-loader.gif);} .btn-filter, .btn-myCart {width: 35px; height: 35px; border-radius: 50%; background-color: #333; display: flex; align-items: center; justify-content: center;} .btn-filter .txt, .btn-myCart .txt {font-size: 0; width: 100%; height: 100%; background: url(../images/common/ico-arrow1.png) center center no-repeat;} .btn-filter .txt {background-image: url(../images/common/ico-filter.png); -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .filterOpen .btn-filter .txt, .fix-toggle .btn-myCart .txt {transform: rotate(180deg);} .filterOpen .btn-filter .txt {background-image: url(../images/common/ico-arrow1.png);} .btn-myCart:hover {background-color: #ed6d00;} .btn-del {width: 20px; height: 20px; border-radius: 3px;} .btn-del .txt {font-size: 0; width: 20px; height: 20px; background: url(../images/common/ico-del.png) center center no-repeat; vertical-align: top;} .btn-del:hover {background-color: rgba(0,0,0,0.05);} .btn-delAll {width: 20px; height: 20px; border-radius: 3px;} .btn-delAll .txt {font-size: 0; width: 20px; height: 20px; background: url(../images/common/ico-delAll.png) center center no-repeat; vertical-align: top;} .btn-delAll:hover {background-color: rgba(0,0,0,0.05);} .btn-order {display: flex; align-items: center; justify-content: center; background-color: #ea7c1e; border: 1px solid #ddd; border-radius: 8px; width: 100%; height: 46px;} .btn-order::before {content: ''; display: inline-block; vertical-align: middle; width: 27px; height: 27px; background: url(../images/common/ico-order.png) center center no-repeat; margin-right: 10px;} .btn-order .txt {color: #fff; font-size: 20px; font-weight: 500; line-height: 24px;} .btn-order:hover {background-color: #ef6e00;} .btn-fDel {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;} .btn-fDel .txt {font-size: 0; width: 100%; height: 100%; background: url(../images/common/ico-fDel.png) center center no-repeat;} .btn-fDel:hover {background-color: rgba(0,0,0,0.5);} .btn-oc {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;} .btn-oc .txt {font-size: 0; width: 100%; height: 100%; background: url(../images/common/ico-arrow2.png) center center no-repeat;} .btn-oc.off .txt {transform: rotate(180deg);} .btn-oc:hover {background-color: rgba(0,0,0,0.05);} .btn-ocG {display: inline-flex; justify-content: space-between; align-items: center;} .btn-ocG .txt {font-size: 13px; color: #333; font-weight: 500; line-height: 14px; padding-left: 15px; position: relative; text-align: left;} .btn-ocG::after, .btn-ocG .txt::before {content: ''; display: inline-block;} .btn-ocG::after {width: 30px; height: 27px; background: url(../images/common/ico-arrow2.png) center center no-repeat;} .btn-ocG .txt::before {width: 5px; height: 5px; background: url(../images/common/ico-dot.png) center center no-repeat; position: absolute; left: 5px; top: 6px;} .btn-ocG:hover {background-color: rgba(0,0,0,0.05);} .btn-mmSearch {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid #ddd; width: 39px; height: 31px; border-radius: 15px;} .btn-mmSearch .txt {font-size: 0; width: 100%; height: 100%; background: url(../images/common/ico-mmSearch.png) center center no-repeat;} .btn-mmSearch:hover {border-color: rgba(0,0,0,0.5);} /*top move:S*/ body > .btn-topmove {/* display: none; */ width: 34px; height: 34px; border-radius: 17px; text-align: center; background: #f36f20 url(../images/common/ico-top-w.png) 10px 10px no-repeat; box-shadow: 0 0 9px 0 rgba(127,126,126,0.41); background-size: auto 16px; z-index: 5; position: fixed; right: 3px; bottom: -100px; opacity: 0; transition: 1s; } body > .btn-topmove > span {font-family: 'HankookTire', sans-serif; font-size: 11px; font-weight: 500; line-height: 15px; color: #fff; letter-spacing: 0.05em; padding-left: 2px; display: none;} html body > .btn-topmove.show {bottom: 10px; opacity: 1;} html body > .btn-topmove:hover {background-color: #c14800;} html.moHtml.myCartOpen body > .btn-topmove {right: 369px;} html.moHtml.myCartOpen body > .btn-topmove.show {bottom: 7px;} .round-area .btn-topmove {opacity: 0; width: 100%; height: 0; text-align: center; transition: height, opacity 1s;} .round-area .btn-topmove span {font-size: 0; line-height: 0; transform: scale(.9);} .round-area .btn-topmove.show {width: 100%; height: 15px; line-height: 1px; opacity: 1; border-radius: 10px; margin-top: 5px; border-top: 1px solid #ccc;} .round-area .btn-topmove.show span {font-size: 11px; line-height: 15px; padding-right: 12px; position: relative;} .round-area .btn-topmove.show span::after {content: ''; display: block; width: 8px; height: 8px; background: url(../images/common/ico-top.png) center center no-repeat; position: absolute; right: 0; top: 3px; background-size: auto 9px; transform: scale(1.1);} .round-area .btn-topmove:hover {background-color: rgba(0,0,0,.05);} .round-area .btn-topmove:hover span {text-shadow: 0 0 0 #242020;} /*top move:E*/ .textbox[class*="type"] {display: flex; justify-content: center; align-items: center;} [class$="-left"] > .textbox[class*="type"] {justify-content: flex-start;} [class$="-right"] > .textbox[class*="type"] {justify-content: flex-end;} .textbox.type0 .txt > span, .textbox.type0 .txt > [class*="txt"] {font-size: 13px; line-height: 17px; color: #888; font-weight: 300;} .textbox.type0 .num {font-size: 16px; line-height: 20px; color: #333; font-weight: 500; letter-spacing: -0.04em;} .textbox.type0 > p > span {position: relative; padding-right: 10px; margin: 3px 7px 3px 0;} .textbox.type0 > p > span::after {content: ''; display: block; width: 1px; height: 12px; background-color: #b5b5b5; position: absolute; right: 0; top: 50%; margin-top: -6px;} .textbox.type0 > p > span:last-child {padding-right: 0; margin-right: 0;} .textbox.type0 > p > span:last-child::after {content: none;} .textbox.type1 span, .textbox.type1 [class*="txt"] {font-size: 14px; line-height: 19px; font-weight: 400; color: #333;} .textbox.type1 .txt1, .textbox.type1 .txt2 {font-size: 16px; font-weight: 500; line-height: 20px;} .textbox.type1 .txt1 {font-weight: bold;} .textbox.type1 [class*="txt"] + [class*="txt"] {margin-left: 5px;} .textbox.type1 .txt + .txt::before {content: ':'; display: inline-block; font-size: inherit; line-height: inherit; vertical-align: middle; margin-right: 5px;} .textbox[class*="type2"] span, .textbox[class*="type2"] [class*="txt"] {font-size: 14px; line-height: 18px; color: #777;} .textbox[class*="type2"] .txt1 {color: #333;} .date.textbox.type2 .num {font-weight: 500;} .textbox.type3 [class*="txt"], .textbox.type3 [class*="tit"] {font-size: 14px; line-height: 16px; color: #fff; font-weight: 300;} .textbox.type3 [class*="txt"] + [class*="txt"] {margin-left: 5px;} .textbox.type3 .tit {font-size: 16px; line-height: 20px; font-weight: 400;} .textbox.type3 .txt1 {font-size: 20px; line-height: 24px; font-weight: 400; color: #fab67c} .textbox.type3 .del {text-decoration: line-through;} .textbox.type3 .price-left .barRow-after {display: flex; justify-content: flex-start; align-items: center;} .textbox.type4 .txt {font-size: 14px; font-weight: 400; line-height: 18px;} .textbox.type4 [class*="ico-"] + .txt {margin-left: 5px;} .userinfo-box {display: flex; justify-content: space-between; align-items: center;} .userinfo-box .photobox {font-size: 0; background: url(../images/common/ico-user.png) center center no-repeat; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background-size: cover;} .userinfo-box .textbox {flex: 1; padding: 0 4px; flex-direction: column; align-items: flex-start;} .userinfo-box .photobox + .textbox {margin-left: 11px;} /*.userinfo-box .textbox > p {width: 100%; display: flex; align-items: center; justify-content: flex-start;} .userinfo-box .textbox > p > span {display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30%; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 34px;} .userinfo-box .textbox > p > span.txt1 {max-width: calc(70% - 11px);}*/ .icoInfo-txt {display: flex; flex-direction: column; flex-wrap: nowrap;} .icoInfo-txt dt {position: relative;} .icoInfo-txt dt::after {content: ''; display: block; width: 1px; height: 10px; background-color: #ddd; position: absolute; right: 0; top: 50%; margin-top: -5px;} .icoInfo-txt dt:not([class*="ico-"]) {padding-left: 8px; margin-right: 8px;} .icoInfo-txt dd {flex: 1;} .icoInfo-txt .info-inbox {display: flex; justify-content: space-around; align-items: center; flex-direction: row;} .icoInfo-txt .info-inbox + .info-inbox {margin-top: 6px;} .icoInfo-txt dt[class*="ico-"] {width: 30px; display: none;}/*임시로 가림, 추후 아이콘 추가*/ .icoInfo-txt dt[class*="ico-"] ~ dd {} .round-area {border: 1px solid #ccc; background-color: #fff; border-radius: 20px; padding: 8px 5px; position: relative; display: flex; flex-direction: column; align-items: center;} .round-area .btn-myCart {display: none; position: absolute; top: -17px; left: 50%; margin-left: -17px; background-color: #ccc;} .round-area .btn-myCart:hover {background-color: #333;} .round-area .cnt-box {position: relative; font-size: 16px; line-height: 20px; color: #000; border-radius: 20px; transition: min-width .3s; width: 100%;} .round-area .cnt-box .cnt {display: flex; align-items: center; justify-content: center;} .round-area .total-box {display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap;} .round-area .cnt-box + .total-box {margin-top: 5px;} html.pcHtml .round-area .cnt-box {width: 40px; height: 40px; background: url(../images/common/ico-cart2.png) 3px center no-repeat; background-size: 23px auto; margin-top: 5px;} html.pcHtml .round-area .cnt-box .cnt {min-width: 25px; height: 25px; width: auto; min-height: 25px; background-color: #ea7c1e; border: 1px solid #d26d18; position: absolute; left: 50%; top: -5px; margin-left: -5px;} html.pcHtml .round-area .cnt-box .cnt .tag {white-space: nowrap; padding: 0 5px; font-size: 12px; line-height: 23px; color: #fff;} html.pcHtml .round-area .cnt-box .label {display: none;} .fixCart-area:not(.active) .cnt-box .label .tag-hide {display: none;} .fixCart-area:not(.active) .total-box {display: none;} .fixCart-area:not(.active) .cnt-box .cnt {width: 100%; height: 100%; color: #fff; background-color: #333; width: auto; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 20px;} .fixCart-area:not(.active) .cnt-box .label {width: 100%; text-align: center; font-size: 13px; line-height: 16px; margin-top: 5px;} .fixCart-area:not(.active) .total-box {display: none; opacity: 0; transition: all .3s;} .fixCart-area.active .cnt-box {display: flex; justify-content: center; align-items: center; color: #fff; min-width: 100%;} .fixCart-area.active .cnt-box .cnt, .fixCart-area.active .cnt-box .label {display: inline-flex;} .fixCart-area.active .cnt-box .cnt {position: relative; padding-right: 9px; margin-right: 3px;} .fixCart-area.active .cnt-box .cnt::after {content: ':'; display: block; font-size: 13px; font-weight: 300; line-height: 16px; position: absolute; right: 0; top: 3px;} .fixCart-area.active .cnt-box .label [class*="tag-"] {margin-left: 4px; text-transform: uppercase;} .fixCart-area.active .total-box {display: flex; opacity: 1;} .fix-toggle .round-area {width: 60px; transition: width .3s;} .fix-toggle .round-area.fixCart-area.active {width: 100%;} .fix-toggle .round-area + .round-area {margin-top: 10px;} html.hasMyCart .round-area.fixCart-area {padding: 25px 10px 10px; align-items: flex-end;} html.hasMyCart .round-area .btn-myCart {display: flex;} .overlay-box {position: relative;} .overlay-view {display: none; width: 100%; height: 100%; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; background-color: #fff;} .overlay-box.hover .overlay-view {display: flex; z-index: 1;} /*tootltip*/ .tooltip-wrap.hide {display: none !important;} [ttname="gnbOpenTooltip"], [ttname="gnbCloseTooltip"] {display: none !important;} .tooltip-wrap {display: none; position: absolute; z-index: 12;} .tooltip-wrap .textbox {max-width: 400px; border: 1px solid #ddd; background-color: #fff; padding: 10px; position: relative; box-shadow: 3px 0px 4px rgba(0,0,0,0.1); border-radius: 5px;} .tooltip-con, .tooltip-view {display: none; position: absolute; white-space: nowrap; box-shadow: 0 0 7px rgba(0,0,0,.4); border-radius: 10px; background-color: #fff; z-index: 15; padding: 12px 15px;} .tooltip-box {position: relative;} .tooltip-box .tooltipView-head {display: flex; width: 100%; height: auto;} .tooltip-box .tooltipView-head .title {font-weight: 500;} .tooltip-box .tooltipView-head + .tooltipView-cont {border-top: 1px solid #ddd; padding-top: 15px; margin-top: 20px;} .tooltip-box .tooltip-con, .tooltip-box .tooltip-view {display: none;} .tooltip-box .tooltip-con::before, .tooltip-box .tooltip-view::before {content: ''; } .tooltip-box .tooltip-con.a-center, .tooltip-box .tooltip-view.a-center {left: 50%; transform: translateX(-50%);} .tooltip-box.hover .tooltip-con, .tooltip-box.hover .tooltip-view {display: block;} .tooltip-box.addDCTooltip-box .btn-tooltip {position: absolute; bottom: 0;} html.pcHtml .closeTooltip {display: none;} .cookiesYN-wrap { background-color: #000; color: #fff; padding: 20px; position: fixed; bottom: 0; left: 0; right: 0; display: none; z-index: 9;} .cookiesYN-wrap .textbox{ font-weight: 300; font-size: 14px; line-height: 20px; display: flex; align-items: center; flex: 1;} .cookiesYN-wrap .textbox a{ font-weight: 500; text-decoration: underline; margin-left: 5px;} .cookiesYN-wrap .textbox a:hover{ color: #ea7c1e;} .cookiesYN-wrap .popup{ max-height: none; background-color: transparent; border: 0; display: block; position: static;} .cookiesYN-wrap .btnbox .btn-ix{ width: 100px; height: 40px; background: transparent; color: #fff; text-indent: 0; margin: 0 0 0 10px; border: 0; border-radius: 20px; position: static;} .cookiesYN-wrap .btnbox .btn-ix.type1{ background-color: #333;} .cookiesYN-wrap .btnbox .btn-ix.type1:hover{ background-color: #222; text-decoration: underline;} .cookiesYN-wrap .btnbox .btn-ix.type2{ background-color: #888;} .cookiesYN-wrap .btnbox .btn-ix.type2:hover{ background-color: #666; text-decoration: underline;} .cookiesYN-wrap .btnbox .btn-ix .ix-txt{ width: 100%; height: 100%; font-size: 14px; color: #fff; line-height: 18px; display: flex; align-items: center; justify-content: center; vertical-align: top;} .filter-section, .myCart-section {border: 1px solid #ccc; border-radius: 6px 6px 10px 10px;} .headTop-left, .headTop-right {display: inline-flex; align-items: center;} .headTop-left {justify-content: flex-start;} .headTop-right {justify-content: flex-end; flex: 1;} .block-top {display: flex; justify-content: space-between; align-items: center;} .block-date {display: flex; align-items: center; justify-content: flex-start; padding: 0 7px;} .list-area {display: flex; flex-direction: column; justify-content: flex-start; width: 100%;} .listArea-head {display: flex; justify-content: space-between; align-items: center;} .listArea-head + .listArea-body {height: calc(100% - 48px); display: flex; flex-direction: column;} .barRow-before, .barRow-after {display: flex; align-items: center;} .barRow-before {justify-content: flex-end;} .barRow-after {justify-content: flex-start;} .barRow-before .barRow-col {position: relative; padding-left: 10px; margin-left: 9px;} .barRow-before .barRow-col::before {content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 10px; background-color: #fff; position: absolute; left: 0; top: 50%; margin-top: -4px;} .barRow-before .barRow-col:first-child {padding-left: 0; margin-left: 0;} .barRow-before .barRow-col:first-child::before {content: none;} .barRow-before .barRow-col > span + span {margin-left: 3px;} .barRow-after .barRow-col {position: relative; padding-right: 10px; margin-right: 9px;} .barRow-after .barRow-col::after {content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 10px; background-color: #fff; position: absolute; right: 0; top: 50%; margin-top: -4px;} .barRow-after .barRow-col:last-child {padding-right: 0; margin-right: 0;} .barRow-after .barRow-col:last-child::after {content: none;} .price-roundbox {width: 100%; min-height: 50px; display: flex; justify-content: space-between; align-items: center; background-color: #333; border-radius: 8px; padding: 3px 10px;} .price-roundbox[class*="plant"] {background-color: #888;} .price-roundbox .price-left .barRow-after {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;} .price-roundbox.price-plantA .textbox.type3 .txt1, .price-roundbox.price-plantB .textbox.type3 .txt1 {color: #fff;} .cartSel-box {width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;} .cartSel-box .more {position: relative; font-size: 12px; border-radius: 5px; padding: 0 14px 1px 4px;} .cartSel-box .more::after {content: '>'; display: inline-block; font-size: 15px; line-height: 13px; padding: 0 3px; vertical-align: middle; transform: scaleX(.5); position: absolute; right: 0; top: 50%; margin-top: -5px;} .cartSel-box [class*="btn-"].more:hover {background-color: #ddd;} .cartSel-box .dc {width: 60px; height: 17px; background-color: #f2a935; font-size: 11px; color: #fff; text-align: center; line-height: 17px; padding: 0 4px; display: inline-block; border-radius: 13.5px;} .cartSel-box .info-addDC {font-size: 11px; font-weight: 300; background-color: #ea7c1e; color: #fff; border-radius: 15px; width: auto; height: 16px; white-space: nowrap; padding: 0 3px 0 5px; line-height: 14px;} .cartSel-box .info-addDC::after {width: 9px; height: 9px; background: url(../../front/images/ico/ico-tooltip2.png) no-repeat center center; content: ''; margin-left: 3px; display: inline-block;} .cartSel-box .info-addDC:hover { background-color: #d45b04;} .cartSel-box .bar-row {display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start;} .cartSel-box .bar-row > span {position: relative;} .cartSel-box .bar-row > * {margin: 2px 20px 2px 0;} .cartSel-box .bar-row > *:last-child {margin-right: 0;} .cartSel-box .bar-row > span.season {background-size: auto 100%;} .cartSel-box .bar-row > span::after {content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 10px; background-color: #dbdbdb; position: absolute; right: -10px; top: 50%; margin-top: -5px;} .cartSel-box .bar-row > span:last-child {margin-right: 0;} .cartSel-box .bar-row > span:last-child::after {content: none;} .cartSel-box .pos {position: absolute; width: 100%; text-align: center;} .cartSel-box .pos.top {top: 0;} .cartSel-box .pos.bottom {bottom: 0;} .cartSel-box .season {font-size: 0; background-position: left center; background-repeat: no-repeat;} .cartSel-box .cartSel-row [class*="cartSel-"] {display: inline-flex; align-items: center; justify-content: center;} .cartSel-box .cartSel-row [class*="cartSel-"]:not(.cartSel-rc, .cartSel-btn) {padding-left: 2px; padding-right: 2px;} .cartSel-box .cartSel-row [class*="cartSel-"] .in-pos {width: 100%; position: relative; padding-top: 23px; padding-bottom: 23px;} .cartSel-box .cartSel-rc {width: 31px;} .cartSel-box .cartSel-info {flex: 1; flex-direction: column; align-items: flex-start !important; font-size: 12px; line-height: 16px; color: #777;} .cartSel-box .cartSel-info .sup {display: inline-block; vertical-align: text-top; font-size: 10px; margin: -1px 0 0 1px; line-height: 16px; transform: scale(.9);} .cartSel-box .cartSel-info .size {font-size: 15px; line-height: 19px; color: #333;} .cartSel-box .cartSel-info .bar-row .more:first-child {margin-left: -4px;} .cartSel-box .cartSel-qty {width: 72px;} .cartSel-box .cartSel-qty .spinnerJQ .ui-spinner {width: 100%; margin: 0;} .cartSel-box .cartSel-qty input {width: 100%;} .cartSel-box .cartSel-price {width: 80px; position: relative;} .cartSel-box .cartSel-price .price {text-align: center; font-size: 14px; line-height: 19px; color: #333; letter-spacing: -0.04em;} .cartSel-box .cartSel-price .price .txt + .num {margin-left: 5px;} .cartSel-box .cartSel-btn {width: 20px;} .cartSel-box .cartSel-btn .btn-del {border-color: transparent;} .cartSel-box > .cartSel-row {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; border-bottom: 1px dashed #ccc; padding: 5px 0;} .myCart-section .cartSel-box > li.cartSel-row {padding-top:30px; position: relative;} .myCart-section .cartSel-box > li.cartSel-row .rowfull {position: absolute; left: 33px; top: 3px; right: 4px; padding: 3px 0;} html.moHtml .myCart-section .cartSel-box > li.cartSel-row .rowfull{top: 3px;} html.moHtml .cartSel-box .cartSel-row [class*="cartSel-"] .in-pos {padding-top: 18px; padding-bottom: 18px;} .listBody-top {display: flex; justify-content: space-between; align-items: center; height: 28px; min-height: 28px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f0efef; padding-left: 15px; padding-right: 15px;} .listArea-body .listBody-top .headTop-left .rc-box label span {margin-right: 3px;} .listArea-body .listBody-top .headTop-left > .rc-box {margin-right: 3px;} .listBody-price .price-left {flex: 1;} .listBody-form .input1 {width: 100%; height: 36px; line-height: 17px; border-radius: 8px;} .listBody-form .textarea1 {border-radius: 8px; height: 62px; overflow-y: scroll; overflow-x: hidden; padding-top: 5px;} .listBody-form .input1, .listBody-form .textbox {margin: 5px 0;} .listBody-form .input1.datepicker {width: 100%;} html.pcHtml #contents .myCart-section .myCartList-area .listBody-list {} .lbForm-box {border: 1px solid #ccc; border-radius: 8px; margin: 5px 0;} .lbForm-box .dt-box {display: flex; justify-content: space-between; align-items: center; height: 35px;} .lbForm-box:hover, .lbForm-box.formSHTarget1Open {border-color: #444;} .lbForm-box .dt-box .tit {width: 100%; height: 100%; padding: 0 10px; text-align: left; position: relative;} .lbForm-box .dt-box .tit:hover {background-color: rgba(0,0,0,.05);} .lbForm-box .dt-box .tit::after {content: ''; display: block; width: 12px; height: 6px; background: url(../../front/images/ico/ico-down.png) center center no-repeat; position: absolute; top: 50%; right: 10px; margin-top: -3px;} .lbForm-box .dd-box {border-top: 1px solid #ccc; display: none;} .formDC-table {border-bottom: 1px solid #ccc; padding: 5px 0;} .formDC-table table {} .formDC-table table th, .formDC-table table td {font-size: 14px; line-height: 16px; color: #333; font-weight: 400; border: 0 none; padding: 3px 8px; text-align: left;} .formDC-table table th {} .formDC-table table td {} .formDC-table table thead th {color: #999; text-align: left;} .formDC-table table td .input1 {width: calc(100% - 20px); margin: 0; margin-right: 5px; border-radius: 4px; height: 30px;} .formDC-txt {} .formDC-txt .row {display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 10px; border-bottom: 1px solid #ccc;} .formDC-txt .row:last-child {border-bottom: 0 none;} .formDC-txt .dt {} .formDC-txt .dd {color: #999; font-style: italic;} .formDC-txt .dd span {font-weight: 300; font-size: 12px; margin-right: 4px;} .formDC-txt .dd strong {font-weight: bold;} .formDC-txt .row.type2 .dd {text-decoration: line-through;} .formDC-txt .row.type3 .dd {color: #e60913;} .formDC-txt .row.type3 span {font-style: normal;} .listBody-btn .textbox {justify-content: flex-start; margin-top: 6px;} .listBody-btn .rc-box.w100p {margin-right: 0;} .listBody-btn .textbox ~ * {margin-top: 6px;} .plant-list .block-top {background-color: #888; border-radius: 15px; height: 26px; padding: 0 10px; margin: 5px 0;} .myCart-section .list-area {height: 100%;} .myCartList-area .listArea-head {height: 44px; background-color: #fff; border-radius: 6px 6px 0 0; /*position: sticky; top: 0; z-index: 2;*/} .myCartList-area .listArea-head > .headTop-left {padding-left: 28px;} .myCartList-area .listArea-head > .headTop-left .title {font-size: 17px; line-height: 21px; color: #333; font-weight: 500;} .myCartList-area .listArea-head > .headTop-right {padding-right: 20px;} .myCartList-area .listArea-head > .headTop-right > .textbox.type2 > span + span {position: relative; padding-left: 10px; margin-left: 5px;} .myCartList-area .listArea-head > .headTop-right > .textbox.type2 > span + span::before {content: ''; display: block; width: 4px; height: 1px; background-color: #777; position: absolute; left: 0; top: 50%;} /*.myCartList-area .listArea-body > .listBody-top {position: sticky; top: 73px; z-index: 2;}*/ .myCartList-area .listBody-top .rc-box:not(.solo) input[type='radio'] + label, .myCartList-area .listBody-top .rc-box:not(.solo) input[type='checkbox'] + label {padding-left: 25px;} .myCartList-area [class*="listBody"]:not(.listBody-top) {padding: 0 10px 5px; padding: 0 10px} .myCartList-area .listBody-list .block-date {border-bottom: 1px dashed #ccc; min-height: 28px;} .myCartList-area .listBody-list > .block-date {padding-top: 3px; padding-bottom: 3px;} .myCartList-area .listBody-list > .block-scroll, .myCartList-area .listBody-list > .block-date.hide + .block-scroll {height: 100%;} .myCartList-area .listBody-list > .block-scroll {padding: 0 5px;} .myCartList-area .listBody-list > .block-date:not(.hide) + .block-scroll {height: calc(100% - 31px);} .myCartList-area .price-roundbox {margin: 5px 0;} .myCartList-area .block-scroll > .cartSel-box {margin-bottom: 7px;} .myCartList-area .listBody-top.total-Top .headTop-right .barRow-before .barRow-col::before {background-color: #ddd;} .myCartList-area .listBody-btn > * {margin: 5px 0;} .oc-group .ocG-tit {height: 40px;} .oc-group .ocG-tit .btn-ocG {display: flex; width: 100%; height: 100%; padding: 0 12px;} .oc-group .ocG-cont {border-top: 1px solid #ddd; padding: 10px 0;} .inDep-group {margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;} .inDep-group .inDep-tit {font-size: 11px; color: #777; line-height: 14px; padding: 2px 0 10px;} .inDep-group .inDep-cont div.reGroup, .inDep-group .inDep-cont div.minMax-box {margin-top: 5px; margin-bottom: 5px;} .inDep-group.type1 > .inDep-cont {padding: 0 15px;} .ocG-cont .inDep-group:first-child {margin-top: 0; padding-top: 0; border-top: 0 none;} .ckGroup-depth {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;} .ckGroup-depth > .ckGroup {display: inline-flex;} .ckGroup-depth > .ckGroup.active {display: inline-flex;} .ckGroup-depth .depth {display: none; margin-bottom: 10px; border-bottom: 1px dashed #ddd; padding: 5px 0 10px 20px;} .ckGroup-depth .ckGroup.active .depth {display: block;} .filter-section .ckGroup span, .filter-section .ckGroup.type1 span, .filter-section .ckGroup.type2 span, .filter-section .ckGroup.type1 label span, .filter-section .ckGroup.type2 label span {margin: 0;} .filter-section .ckGroup.type1 > span, .filter-section .ckGroup.type2 > span, .filter-section .ckGroup.type1 > .ckGroup, .filter-section .ckGroup.type1 > .ckGroup {margin-top: 5px; margin-bottom: 5px;} .filter-section .ckGroup.type1 > span:last-child, .filter-section .ckGroup.type1 > .ckGroup:last-child, .filter-section .ckGroup-depth > .ckGroup:last-child {margin-right: 0 !important;} .filter-section .ocG-cont > .ckGroup > span, .filter-section .ckGroup-depth > .ckGroup {margin-right: 5px;} .filter-section .ckGroup-depth > .ckGroup.type1 > .ckGroup.depth, .filter-section .ckGroup-depth > .ckGroup.type2 > .ckGroup.depth {margin-top: 0; padding-top: 0; padding-bottom: 5px;} .filter-section .ckGroup.type2 {justify-content: space-evenly;} .filter-section .ckGroup.type2 label .ico +.txt {margin-top: 5px;} .filter-section .ckGroup-depth .ckGroup input:checked ~ .depth {padding: 10px; border-bottom: 1px dashed #ccc;} .filter-section .segment-group .ckGroup.type2 { width: 100%; justify-content: flex-start;} .filter-section .segment-group .ckGroup.type2 > span {width: 50%; padding: 0 4px; text-align: center;} .filter-section .segment-group .ckGroup.type2 > span .txt {padding-bottom: 5px;} .filter-section .rcGroup-row > span {margin-top: 3px; margin-bottom: 3px;} .filter-group .rc-box input[type='radio'] + label, .filter-group .rc-box input[type='checkbox'] + label {line-height: 21px; padding-left: 30px; min-height: 21px;} .filter-group .rc-box input[type='radio'] + label > *, .filter-group .rc-box input[type='checkbox'] + label > * {margin-right: 5px;} .filter-group .rc-box input[type='radio'] + label > .bgTxt1-0, .filter-group .rc-box input[type='radio'] + label > .bgTxt2-0, .filter-group .rc-box input[type='radio'] + label > .bgTxt3-0, .filter-group .rc-box input[type='checkbox'] + label > .bgTxt1-0, .filter-group .rc-box input[type='checkbox'] + label > .bgTxt2-0, .filter-group .rc-box input[type='checkbox'] + label > .bgTxt3-0 {margin-right: 3px;} /*.filter-group .rc-box input[type='radio'] + label > *:last-child, .filter-group .rc-box input[type='checkbox'] + label > *:last-child {margin-right: 0;}*/ .filter-group .rc-box input[type='checkbox'] + label > .txt.bgTxtEV {margin-top: -3px; padding-top: 3px;} .filter-section .rc-box, .filter-section .sel-box {margin-top: 5px; margin-bottom: 5px;} .filter-section .sel-box {display: flex; align-items: center; justify-content: flex-start;} .filter-section .sel-box .label {font-size: 13px; color: #777; line-height: 16px; width: 80px;} .filter-section .sel-box .select1 {border-radius: 17px; flex: 1; padding-left: 15px;} .filter-group .ckGroup.type1 input[id*="HK"] + label, .filter-group .ckGroup.type1 input[id*="LF"] + label, .filter-group .ckGroup.type1 input[id*="KS"] + label, .filter-group .ckGroup.type1 input[id*="AR"] + label, .filter-group .ckGroup.type1 input[id*="AT"] + label {min-width: 150px; justify-content: space-between;} .filter-group .ckGroup.type1 .brandimg + .cnt {padding-left: 8px;} .filter-group .rr-group .inDep-tit, .filter-group .wetGrip-group .inDep-tit {margin-top: -1px;} .filter-group .rr-group .inDep-tit + .inDep-cont, .filter-group .wetGrip-group .inDep-tit + .inDep-cont {margin-top: 7px;} .filter-group .rr-group .inDep-cont, .filter-group .wetGrip-group .inDep-cont {padding-bottom: 6px;} .filter-group .select1 {height: 34px; padding-left: 10px;} .filter-group .ocG-cont .select1.wtype1 {width: 78%;} .filter-group + .filter-group {border-top: 1px solid #ddd;} .filter-form {width: 263px;} .filter-form > dl.oc-group {margin: 0 10px; width: calc(100% - 20px);} .filter-form > .oc-group > .ocG-cont {width: 243px;} .filter-search {width: 100%; height: 56px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center;} .filter-search .input { width: 100%; height: 100%; flex: 1; padding: 0 10px 0 15px;} .filter-search .btn-fsearch {height: 100%;} .filter-section .rangeSlider-box {width: 243px;} .filter-section .rangeSlider-box .rs-container, .filter-section .rangeSlider-box .rs-container .rs-scale {width: 223px;} .page-title {display: flex; align-items: center; justify-content: flex-start; height: 54px; padding-bottom: 4px;} .page-title .title {display: inline-flex; justify-content: flex-start; align-items: center; padding-left: 35px; position: relative; min-height: 36px; font-size: 19px; line-height: 23px; color: #333; font-weight: 500; text-transform: uppercase; letter-spacing: -0.02em; word-spacing: -0.06em;} .page-title .title::before {content: ''; display: inline-block; width: 25px; height: 36px; background: url(../images/common/ico-pagetitle.png) center center no-repeat; position: absolute; left: 0; top: 0;} .page-title .title.icotype1 {padding-left: 58px;} .page-title .title.icotype1::before {width: 54px; height: 33px; background-image: url(../images/common/ico-pagetitle1.png);} .page-title .title.icotype2 {padding-left: 46px;} .page-title .title.icotype2::before {width: 42px; height: 35px; background-image: url(../images/common/ico-pagetitle2.png);} .page-title .title.icotype3 {padding-left: 46px;} .page-title .title.icotype3::before {width: 42px; height: 35px; background-image: url(../images/common/ico-pagetitle3.png);} .page-title .title.icotype4 {padding-left: 46px;} .page-title .title.icotype4::before {width: 42px; height: 35px; background-image: url(../images/common/ico-pagetitle4.png);} .page-title .title.icotype5 {padding-left: 53px;} .page-title .title.icotype5::before {width: 49px; height: 35px; background-image: url(../images/common/ico-pagetitle5.png);} .page-title .title.icotype6 {padding-left: 37px;} .page-title .title.icotype6::before {width: 33px; height: 33px; background-image: url(../images/common/ico-pagetitle6.png);} .page-title .title.icotype7 {/*Stock 대메뉴용*/} .page-title .title.icotype8 {padding-left: 40px;} .page-title .title.icotype8::before {width: 34px; height: 34px; background-image: url(../images/common/ico-pagetitle8.png);} /**************************************************popup*************************************************/ /*.popup-wrap:not(.windowtype) {display:none; z-index: 10; position:fixed; top:0; left:0; right:0; bottom: 0; overflow: auto;}*/ .popup-wrap:not(.windowtype) {position: fixed; top: 0; left: 0; right: 0; bottom: 0; align-items: center; justify-content: center; overflow: hidden; display: none;} .popup-wrap:not(.windowtype):after {content:''; position:fixed; top:0; left:0; right:0; bottom: 0; background-color: rgba(23,23,23,.53); width:auto; height: auto; z-index:9;} .popup-wrap:not(.windowtype).vertical-full::after {right: 17px;} .popup-wrap:not(.windowtype).horizontal-full::after {bottom: 17px;} /*.popup {position:fixed; top:50%; left:0; right: 0; margin-top: -47%; margin-left: auto; margin-right: auto; box-sizing:border-box; z-index:10; background-color:#fff; border-radius: 2px;}*/ .popup {background-color: #fff; border-radius: 10px; align-items: center; justify-content: center; position: relative; z-index: 10; display: flex; flex-direction: column; max-height: calc(100vh - 80px);} .popup.position-r {position: relative; top: auto; margin-top: 30px; margin-bottom: 30px; max-height: none;} .popup.system {width:370px;} .popup.wFull {width: 98%;} .popup > [class*="pop-"] {width: 100%;} .popup .pop-head {position: relative; display: inline-flex; align-items: center; width: 100%; padding: 21px 70px 20px 32px; box-sizing: border-box;} .popup .pop-head::after {content: ''; height: 1px; background-color: #d4d4d4; position: absolute; left: 30px; right: 30px; bottom: 1px;} .popup .pop-head .pophead-title {font-size: 21px; line-height: 25px; color: #333; font-weight: bold;} .popup .pop-head > [class*="ico-"] {display: inline-block; margin-right: 16px; margin-top: -2px;} .popup-wrap:not(.popup-FR-wrap) .popup .pop-head {line-height: 30px;} .popup .pop-head .btn-ix {margin-left: auto;} .popup .pop-head .side-txt {font-size: 14px; text-transform: none;} .popup .pop-head .right {margin-left: auto;} .popup .pop-head .right.insearch-box {margin-top: 5px;} .popup .pop-cont {position: relative; font-size: 14px; color: #595959; padding: 20px 30px; box-sizing: border-box; overflow-y: auto; overflow-wrap: break-word;} .popup .pop-cont .pop-search {padding: 10px 32px;} .popup .pop-cont .table-search {width: 100%;} .popup .pop-foot {padding: 20px 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .popup .pop-foot .left {} .popup .pop-foot .right {} .popup .pop-foot .center {justify-content: center;} .popup .pop-foot > [class*="btn-"] + [class*="btn-"], .popup .pop-foot .btn-ix + .btn-ix {margin-left: 12px;} .popup .pop-foot .btn-ix .ix-txt {font-size: 14px; line-height: 15px; font-weight: bold;} .popup .pop-foot .btn-ix [class*="ico-"] + .ix-txt {margin-right: 4px;} .popup .close {display: inline-block; position: absolute; top: 18px; right: 30px; background-color: transparent; background-image: url(../images/common/ico-popup-close.png); background-position: 50% 50%; background-repeat: no-repeat; text-indent:-9999em; width: 30px; height: 30px; } .popup .close:hover {background-color: #8a8a8a;} .popup .pop-foot .btn-ix {border-radius: 25px; background-color: #a5a5a5; padding: 0 25px; margin: 3px;} .popup .pop-foot .btn-ix .ix-txt {color: #fff; font-weight: 500;} .popup .pop-foot .btn-ix:hover {background-color: #838383;} .popup .pop-foot .btn-ix.pftype1 {background-color: #ec6c08;} .popup .pop-foot .btn-ix.pftype1:hover {background-color: #f38835;} .popup .pop-foot .btn-ix.pftype2 {background-color: #000;} .popup .pop-foot .btn-ix.pftype2:hover {background-color: #333;} .popup .pop-foot.rowtype {flex-direction: column;} .popup .pop-foot .in-foot {display: flex; width: 100%;} .popup .pop-foot .in-foot + .in-foot {margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;} .popup.no-footbtn .pop-cont {padding-bottom: 30px;} .popup.no-foot .pop-cont {padding-bottom: 30px;} .popup.no-head .pop-cont {padding-top: 60px;} .popup .pop-title {padding: 30px 20px 20px; text-align: center; font-size: 20px; font-weight: 500; color: #333;} .popup-wrap.pop-photo-detail .popup{ width: calc(100% - 30px); min-width: 400px; display: inline-block;} .popup-wrap.pop-photo-detail .popup .pop-head, .popup-wrap.pop-photo-detail .popup .pop-cont{ width: 100%; display: inline-block; overflow: visible;} .popup-wrap.pop-photo-detail .popup .pop-cont{ text-align: center;} .popup-wrap.pop-photo-detail .popup .img-box{ width: 100%; height: 100%;} .popup-wrap.pop-photo-detail .popup .pop-cont img{ width: 100%; height: auto;} /*window popup*/ /*.popup-wrap.windowtype > .popup {width: 100%; height: auto; position: relative; top: auto; left: auto; right: auto; margin: 0;}*/ .popup-wrap.windowtype > .popup {width: 100%; height: auto; position: relative; max-width: 100vw; max-height: 100vw;} /*system popup*/ .popup .system-textbox {} .popup .system-textbox * {color: #777;} .popup .system-textbox .txt1 {color: #999;} .popup .system-textbox .txt2 {color: #999;} .popup .system-textbox .txt + .txt-info2 {margin-top: 20px;} .popup.system .pop-head > [class*="ico-"] {margin: 0 5px 1px;} .popup.system .pop-head > .ico-info {transform: scaleX(-1);} .popup.system .pop-cont .message-box {padding: 27px 0 32px; text-align: center; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb;} .popup.system .pop-foot {padding-left: 10px; padding-right: 10px; padding-top: 5px;} .popup.system .pop-foot .btn-ix {height: 38px;} .popup.system .close {background-image: url(../images/ico/ico-popup-close3.png); opacity: 1;} .popup.system .close .ix-txt {display: none} /*front 이동*/ .popup .block-list > dl > dt + dd.list-body {margin-top: 0;} /*************************************************layout*************************************************/ /* html.mainHtml, .mainHtml body {background: #f8f8f8; min-width: 1820px;} html.windowPopupHtml, .windowPopupHtml body{min-width: 100%;} */ #wrap {width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: space-between;} .inner {width: 100%; margin: 0 auto; padding: 0 10px;} .inner.type1 {padding: 0;} /*.btn-topmove {width: 50px; height: 50px; padding-top: 23px; border-radius: 50px; text-align: center; background: #666 url(../images/common/ico-top-w.png) center 10px no-repeat; z-index: 3; position: fixed; right: 14px; bottom: -100px; opacity: 0; transition: 1s; } .btn-topmove > span {font-size: 10px; font-weight: 500; line-height: 15px; color: #fff; letter-spacing: 0.05em; padding-left: 2px;} .btn-topmove.show {bottom: 36px; opacity: 1;} .btn-topmove:hover {background-color: #000;} .windowPopupHtml .btn-topmove {right: 4px;} .windowPopupHtml .btn-topmove.show {bottom: 7px;}*/ #header {width: 100%; background-color: #fff; position: relative;} #header .logo {display: flex; align-items: center; justify-content: center; background: url(../images/common/logo-hankook.png) center center no-repeat; background-size: contain; font-size: 0; width: 100%; height: 36px;} #header .menu.active, #header .activeList > .menu {color: #ef6e00 !important; font-weight: 500 !important;} /*footer*/ #footer {font-family:'HankookTire', sans-serif; width: 100%; padding: 10px 20px; border-top: 1px solid #ddd; background-color: #fff; display: flex; justify-content: space-between; align-items: center;} #footer * {font-size: 12px; color: #333; line-height: 16px; font-weight: 500;} #footer .footer-info {display: none} #footer .inner {text-align: left;} #footer .logo-hk {text-indent: -999rem; width: 153px; height: 33px; background: url(../images/common/logo-hankook-foot.png) center center no-repeat;} #footer .textbox {display: block; text-align: left;} #footer .textbox p {color: #666;} #footer .logo-hk, #footer .textbox {display: inline-block; vertical-align: middle; margin: 0;} #footer .select1 {width: 112px; background-image: url(../images/common/ico-sel.png); border-color: transparent;} #footer .right {display: flex; justify-content: flex-end; align-items: center;} #footer .right .btn {padding: 4px 10px; margin: 0 10px; line-height: 16px; border-radius: 3px;} #footer .right .btn + .select1 {margin-left: 12px;} html.pcHtml #footer .right .btn:hover, html.pcHtml #footer .select1:hover {background-color: rgba(0,0,0,0.1);} /************************************************pc************************************************/ html.pcHtml, html.pcHtml body, html.pcHtml #header, html.pcHtml #footer {min-width:1024px;} html.moHtml, html.moHtml body, html.moHtml #header, html.moHtml #footer {min-width:320px;} html.pcHtml .fix-toggle {position: fixed; top: 90px; right: 3px; transition: right .3s; z-index: 10; display: flex; justify-content: flex-end; align-items: flex-end; flex-direction: column;} html.pcHtml.myCartOpen .fix-toggle { padding: 94px 0 0 0; display: flex; right: -135px;} html.nowPopupOpen{ overflow: hidden;} html.nowPopupOpen .fix-toggle {z-index: 1;}/*content-section in popup*/ html.gnbOpen .fix-toggle {z-index: 0;} html.pcHtml #header {height: 61px; min-height: 61px; max-height: 61px;} /*html.pcHtml #header::before {content: ''; display: block; width: 100%; height: 1px; background-color: #ddd; position: absolute; top: 61px; z-index: 2;}*/ html.pcHtml #header > .inner {width: 100%; height: 61px; display: flex; justify-content: space-between; align-items: flex-start; background-color: #fff; transition: height .3s; padding: 0 65px; box-shadow: 0 0 0 rgba(0,0,0,.1); border-bottom: 1px solid #ddd; position: relative;} html.pcHtml #header > .inner::before {content: ''; display: block; width: 100%; height: 1px; background-color: #ddd; position: absolute; top: 60px; left: 0; right: 0; z-index: 2;} html.pcHtml.gnbHover #header > .inner {z-index: 20; box-shadow: 0 3px 10px rgba(0,0,0,.1);} html.pcHtml #header > .inner::before {} html.pcHtml #header > .inner > .center {flex: 1;} html.pcHtml #header > .inner > .left, html.pcHtml #header > .inner > .center, html.pcHtml #header > .inner > .right {display: inline-flex; align-items: center; justify-content: center;} html.pcHtml #header > .inner > .left, html.pcHtml #header > .inner > .right {height: 61px;} html.pcHtml #header > .inner > .left {justify-content: flex-start; border-right: 1px solid #ddd;} html.pcHtml #header > .inner > .center {position: relative; justify-content: flex-start;} html.pcHtml #header > .inner > .right {justify-content: flex-end;} html.pcHtml #header > .inner > .right > .inbox:not(.fix-toggle) {display: flex; align-items: center; justify-content: center; border-left: 1px solid #ddd; height: 100%;} html.pcHtml #header > .inner > .right > .inbox:not(.fix-toggle) .userinfo-box {display: flex; justify-content: space-between; align-items: center; height: 100%; padding:0 10px;} html.pcHtml #header > .inner > .left.logotag {width: 271px; transition: width .2s;} /*html.pcHtml #header .logo:hover {background: #fff; font-size: 14px; line-height: 20px; color: #000; text-align: center;}*/ html.pcHtml #header .gnbtag > .btn-gnb, html.pcHtml #header .btn-gnbClose {display: none;} html.pcHtml #header li.hover > a {color: #ef6e00;} html.pcHtml #header .gnb-area {width: 100%; display: flex; justify-content: space-between; align-items: flex-start;} html.pcHtml #header .gnb-area .depth1-list {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-evenly; align-items: stretch; width: 100%;} html.pcHtml #header .gnb-area .depth1-list > li {position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;} html.pcHtml #header .gnb-area .depth1-list > li > a {min-width: max-content; height: 60px; display: flex; align-items: center; justify-content: center; word-break: break-word; text-align: center; padding: 0 10px;} html.pcHtml #header .gnb-area .depth1-list > li > .depth2-list {display: none; flex-direction: column; padding: 20px 0 30px; white-space: nowrap; position: absolute; top: 55px; left: 50%; transform: translateX(-50%); z-index: 2;} html.pcHtml #header .gnb-area .depth1-list > li > .depth2-list::after {content: ''; display: block; position: absolute; left: 0; right: 0;} html.pcHtml #header .gnb-area .depth1-list > li.hover > .depth2-list {display: flex;} html.pcHtml #header .gnb-area .depth2-list > li > a {display: block; padding: 6px;} html.pcHtml #header .btn-talk, html.pcHtml #header .btn-manual, html.pcHtml #header .btn-customer, html.pcHtml #header .labelbox .btn-label {width: 63px; height: 60px; transition: width .2s;} html.pcHtml #header .labelbox .btn-label {background-size: auto 32px; background-position: center center; border-radius: 0;} html.pcHtml #header .btn-manual {background-size: auto 23px; background-position: center center; border-radius: 0;} html.pcHtml #header .userinfo-box {width: 240px;} html.pcHtml #header .userinfo-box .textbox {max-width: 100%; display: flex; align-items: flex-start; justify-content: center;} html.pcHtml #header .userinfo-box .textbox > p {width: 100%; display: flex; align-items: center; justify-content: flex-start;} html.pcHtml #header .userinfo-box .textbox > p > span {margin: 0;} html.pcHtml #header .userinfo-box .photobox + .textbox {margin-left: 11px; max-width: calc(100% - 41px);} html.pcHtml #header .userinfo-btn li {position: relative; padding-right: 10px; margin-right: 10px;} html.pcHtml #header .userinfo-btn li::after {content: ''; display: block; width: 1px; height: 12px; background-color: #ddd; position: absolute; right: 0; top: 50%; margin-top: -6px;} html.pcHtml #header .userinfo-btn li:last-child {padding-right: 0; margin-right: 0;} html.pcHtml #header .userinfo-btn li:last-child::after {content: none;} /*content*/ html.pcHtml #contents {width: 100%; position: relative; flex: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; padding: 12px 70px;} html.pcHtml #contents .content-section {display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; position: relative; z-index: 2;} html.pcHtml #contents .content-section .page-body {display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%;} html.pcHtml #contents .filter-section, html.pcHtml #contents .myCart-section { height: auto; background-color: #fff; border: 0; position: fixed; top: 12px;} html.pcHtml #contents .myCart-section{ height: 500px;} html.pcHtml #contents .filter-section .filter-area{ height: 100%; overflow: auto; border: 1px solid #ccc; border-radius: 6px 6px 10px 10px; position: relative; left: 0; width: 271px;} html.pcHtml #contents .myCart-section .myCartList-area {height: 100%; overflow: auto; border: 1px solid #ccc; border-radius: 6px 6px 10px 10px; position: relative; right: 0;} html.pcHtml #contents .filter-section {height: calc(100vh - 256px); left: 65px; top: 65px;} html.pcHtml #contents .myCart-section .btn-myCart {position: absolute; left: -17px; top: 4px; z-index: 1;} html.pcHtml #contents .myCart-section .myCartList-area .listBody-list {height: 260px; flex: 1; overflow: hidden; padding: 5px;} html.pcHtml #contents .filter-section .btn-filter {position: absolute; top: 20px; right: 0;} html.pcHtml #contents .content-section .page-body { padding: 0; transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;} html.pcHtml.filterOpen #contents .content-section .page-body{ padding-left: 283px;} html.pcHtml.myCartOpen #contents .content-section .page-body{ padding-right: 381px;} html.pcHtml:not(.filterOpen) #contents .filter-section, html.pcHtml:not(.myCartOpen) #contents .myCart-section {width: 35px; border: 0; overflow: hidden;} html.pcHtml:not(.filterOpen) #contents .filter-section {left: 15px; width: 271px; left: -220px;} html.pcHtml:not(.myCartOpen) #contents .myCart-section {right: 0; z-index: -1;} html.pcHtml:not(.filterOpen) #contents .filter-section .filter-area {position: relative; left: -336px;} html.pcHtml:not(.myCartOpen) #contents .myCart-section .btn-myCart {left: auto; right: -100px;} html.pcHtml:not(.myCartOpen) #contents .myCart-section .myCartList-area {position: relative; right: -434px;} html.pcHtml.filterOpen #contents .filter-section, html.pcHtml.myCartOpen #contents .myCart-section {z-index: 3;} html.pcHtml.filterOpen #contents .filter-section {left: 65px;} html.pcHtml.myCartOpen #contents .myCart-section {right: 65px;} html.pcHtml.filterOpen #contents .filter-section .btn-filter {right: -24px; border-radius: 0 17px 17px 0; width: 23px;} /*html.pcHtml.filterOpen #contents .filter-section .filter-area {width: 271px;}*/ html.pcHtml.myCartOpen #contents .myCart-section .myCartList-area {width: 369px;} html.pcHtml.myCartOpen .page-title {padding-right: 396px;} .isPC, .isWide{ width: 1px; height: 1px; display: block; position: absolute; top: 0; left: -999999px;} /*html.pcHtml #header > .inner, html.pcHtml #contents, html.pcHtml #footer {transition: all .3s;}*/ html.pcHtml #footer {padding-left: 65px; padding-right: 65px;} html.pcHtml #footer .left {display: flex; flex-direction: row; align-items: flex-start; justify-content: center; flex-wrap: nowrap;} @media screen and (max-width: 1840px) { .isWide{ display: none;} html.pcHtml.filterOpen.myCartOpen #contents .content-section .page-body{padding-left: 0;} } @media screen and (max-width: 1580px) { html.pcHtml #header > .inner, html.pcHtml #footer {padding-left: 35px; padding-right: 35px;} html.pcHtml #header > .inner > .left.logotag {width: 186px; padding-right: 35px;} html.pcHtml #header > .inner::before {left: -35px; right: -35px;} html.pcHtml.filterOpen #contents {padding-left: 35px; padding-left: 10px;} html.pcHtml.myCartOpen #contents {padding-right: 35px; padding-right: 10px;} html.pcHtml.filterOpen #contents .filter-section {left: 35px; left: 8px;} html.pcHtml.myCartOpen #contents .myCart-section {right: 35px; right: 8px;} } @media screen and (max-width: 1540px) { html.pcHtml #header .logo {background-size: 90% auto;} html.pcHtml #footer .logo-hk {background-size: 70% auto;} html.pcHtml .myCartList-area .listArea-head > .headTop-left .title {font-size: 16px; line-height: 20px;} html.pcHtml .tooltip-box .tooltipView-head + .tooltipView-cont {padding-top: 11px; margin-top: 10px;} } @media screen and (min-width: 1400px) { html.pcHtml #header .userinfo-box .textbox > p > span {display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26%;} html.pcHtml #header .userinfo-box .textbox > p > span.txt1 {max-width: calc(74% - 11px); margin-right: 11px;} html.pcHtml #header .userinfo-box .photobox + .textbox {margin-left: 11px; max-width: calc(100% - 41px);} } @media screen and (max-width: 1399px) { html.pcHtml #header .userinfo-box {width: 140px;} html.pcHtml #header .userinfo-box .textbox > p {flex-direction: column; align-items: flex-start; justify-content: center;} html.pcHtml #header .userinfo-box .textbox > p > span {width: 100%; display: block; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;} html.pcHtml #header .userinfo-box .textbox > p > span::after {content: none;} html.pcHtml #header .userinfo-box .photobox + .textbox {margin-left: 5px; max-width: calc(100% - 35px);} } @media screen and (max-width: 1390px) { /* .isWide{ display: none;} */ /*html.pcHtml #header > .inner > .right > .inbox:not(.fix-toggle) {padding: 0 5px;}*/ html.pcHtml.myCartOpen #contents .content-section .page-body{ padding-right: 0;} html.pcHtml.filterOpen #contents .content-section .page-body{padding-left: 0;} } @media screen and (min-width: 1024px) { html.pcHtml #footer .textbox {margin-top: 8px;} } @media screen and (max-width: 1199px) { html.pcHtml #header .btn-talk, html.pcHtml #header .btn-manual, html.pcHtml #header .btn-customer, html.pcHtml #header .labelbox .btn-label {width: 40px;} html.pcHtml #header .labelbox .btn-label {background-size: 36px auto;} html.pcHtml .userinfo-box .photobox + .textbox {max-width: 140px;} html.pcHtml .userinfo-box .textbox > p > span {margin: 1px 0; padding: 0;} html.pcHtml .userinfo-box .textbox > p > span::after {content: none;} html.pcHtml #header > .inner, html.pcHtml #footer {padding-left: 20px; padding-right: 20px;} html.pcHtml #header > .inner > .left.logotag {padding-right: 20px; width: 156px;} html.pcHtml.filterOpen #contents {padding-left: 20px;} html.pcHtml.myCartOpen #contents {padding-right: 20px;} html.pcHtml.filterOpen #contents .filter-section {left: 20px;} html.pcHtml.myCartOpen #contents .myCart-section {right: 20px;} } @media screen and (max-width: 1023px) { .isPC{ display: none;} html.pcHtml #header > .inner, html.pcHtml #footer {padding-left: 10px; padding-right: 10px;} html.pcHtml #header > .inner > .left.logotag {padding-right: 10px; width: 130px;} html.pcHtml.filterOpen #contents {padding-left: 10px;} html.pcHtml.myCartOpen #contents {padding-right: 10px;} html.pcHtml.filterOpen #contents .filter-section {left: 0;} html.pcHtml.myCartOpen #contents .myCart-section {right: 0;} } /* landscape 가로모드@media only screen and (min-width: 480px), (orientation: landscape) {} */ /**************************************************login**************************************************/ .loginHtml, .loginHtml body {background-color: #fff; min-width: 100%; } #wrap-login {width: 100%; height: 100%; display: flex; position: relative; align-items: stretch; justify-content: space-between; flex-direction: column;} #wrap-login .login-inner {display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; flex: 1;} #wrap-login .header{position:relative;display:block;width:100%;height: auto;margin:20px auto;} #wrap-login .header .logo{ text-align: center; display: flex; align-items: center; justify-content: center;} #wrap-login .header .logo img {} #wrap-login .header .logo p{ font-weight: 700; font-size: 24px; line-height: 28px; color: #ea7c1e; padding: 0 0 0 20px; margin: 0 0 0 20px; border-left: 1px solid #ccc;} #wrap-login #container {width: 100%; flex: 1; border-left: 0 none;} #wrap-login .inner-contain {width:100%; position:relative; height: 100%; min-height: 274px; box-sizing: border-box;} #wrap-login .visual{/*position: absolute; top: 0; left: 0; right: 0; bottom: 0;*/width: 100%; height: 100%;} #wrap-login .visual .bg-area{width: 100%;height: 100%;background-image:url("../images/login/bg_login.jpg");background-repeat:no-repeat;background-position:center center; background-size: cover;} #wrap-login .visual .bg-area .bg{} #wrap-login .visual .left, #wrap-login .visual .right {position:absolute;z-index:1;width: 4.35%;height: calc(100% + 2px);} #wrap-login .visual .left{top:-1px;left:0;} #wrap-login .visual .right{right:0;bottom:-1px;} #wrap-login .visual::before, #wrap-login .visual::after {content: ''; display: block; position: absolute; top:-1px; bottom: -1px; background-color: #fff; width: 1.65%; z-index: 2;} #wrap-login .visual::before {left: 0;} #wrap-login .visual::after {right: 0;} #wrap-login .login-wrap{display: block; width: 340px; background-color: #ffffff; box-sizing: border-box; position: relative; margin: 0 auto; z-index: 1; position: absolute; top: 50%; left: 50%; margin-top: -127px; margin-left: -170px; border-radius: 20px; transition: all 0.5s;} #wrap-login .login-wrap .info-bx{text-align: center; padding: 20px;} #wrap-login .login-wrap .info-bx .sct-bx{margin-bottom:10px;} #wrap-login .login-wrap .info-bx .sct-bx select{padding:0 0 0 29px;height:38px;line-height:38px;width:100%;box-sizing:border-box;font-size:13px;background-color: #efefef;color:#a8a8a8;border:1px solid #a5a5a5;} #wrap-login .login-wrap .info-bx .input {padding: 0 29px; letter-spacing: 0.02em; width: 100%; height: 50px; margin: 0 0 15px 0; font-size: 14px; font-weight: 500; color: #666; border: 1px solid #dbdbdb; box-sizing: border-box; border-radius: 10px; text-shadow: 0.5px 0 0 #666;} #wrap-login .login-wrap .info-bx .input:hover, #wrap-login .login-wrap .info-bx .input:focus {border-color: #000;} #wrap-login .login-wrap .info-bx .input::placeholder {color: #999;} #wrap-login .login-wrap .info-bx .input::-webkit-input-placeholder {color: #999;} #wrap-login .login-wrap .info-bx .input::-moz-placeholder {color: #999;} #wrap-login .login-wrap .info-bx .input:-ms-input-placeholder{color: #999;} #wrap-login .login-wrap .info-bx .input::-ms-input-placeholder{color: #999;} #wrap-login .login-wrap .info-bx .chk-box{display:block; text-align: left;} #wrap-login .login-wrap .info-bx .chk-box .check {display: block;} #wrap-login .login-wrap .info-bx .chk-box .check input[type='checkbox'] + label {font-size: 14px; color: #666; padding-left: 33px;} #wrap-login .login-wrap .info-bx .btn-login{display: block; width: 100%; font-size: 18px; line-height: 35px; padding: 10px 0; background-color: #666; color: #ffffff; border-radius: 12px; letter-spacing: 0.03em;} #wrap-login .login-wrap .info-bx .btn-login:hover {background-color: #444;} #wrap-login .login-wrap .info-bx .btn-login:disabled{background-color:#9e9e9e;} #wrap-login .footer{padding:20px 2.2%;text-align:center;background-color:#fff;font-size:13px; position: relative;} #wrap-login .footer .logo {} #wrap-login .footer .logo img {} #wrap-login .footer .copyright{display:block;color:#666666;font-size:12px;vertical-align:top; margin-top: 6px; letter-spacing: -0.008em;font-weight: 400;} #wrap-login .footer .info-cs {display: block; font-size: 12px; color: #666; position: absolute; right: 2.2%; top: 22px;} #wrap-login .footer .info-cs span {font-weight: bold; letter-spacing: -0.005em;} #wrap-login .footer .info-cs span + span {margin-left: 7px;} #wrap-login .footer .info-cs .txt1 {background: url(../images/login/icon-CS.png) 0 5px no-repeat; padding-left: 16px; letter-spacing: 0;} #wrap-login .footer .info-cs .txt2 {} #wrap-login .textbox {text-align: left; margin-bottom: 22px;} #wrap-login #footer .textbox {margin-bottom: 0;} #wrap-login .textbox .txt1 {font-size: 20px; line-height: 25px; color: #333;} #wrap-login .textbox .txt2 {font-size: 21px; line-height: 26px; color: #666;} #wrap-login .textbox .txt2 strong {font-weight: bold;} #wrap-login .textbox .txt2 span {font-weight: normal;} #wrap-login .textbox .txt1 + .txt2 {margin-top: 9px;} #wrap-login .login-wrap .info-bx .link {font-size: 14px; color: #666; font-weight: 500;} #wrap-login .login-wrap .info-bx .link:hover {color: #f36f20;} #wrap-login .login-wrap .info-bx .chkFindbox {margin-top: 4px;} #wrap-login .login-wrap .info-bx .chkFindbox .fl {} #wrap-login .login-wrap .info-bx .chkFindbox .fr {font-weight: 400;} #wrap-login .login-wrap .info-bx .btn-login + .chkFindbox {margin-top: 9px;} #wrap-login .login-wrap .info-bx .chkFindbox + .btn-login {margin-top: 25px;} #wrap-login .app-down{ display: none;} #wrap-login .langselbox .lang {display: block; padding: 7px 26px 11px 16px; text-align: left; white-space: nowrap;} #wrap-login .langselbox .lang:hover {background-color: rgba(0,0,0,0.05);} #wrap-login .langselbox .lang img, #wrap-login .langselbox .lang span {display: inline-block; vertical-align: middle;} /* #wrap-login .langselbox .lang img {width: 18px; height: auto; margin-top: 1px;} */ #wrap-login .langselbox .lang span {max-width: calc(100% - 22px); padding-left: 9px; text-align: center; font-size: 14px; color: #333; font-weight: 500;} #wrap-login .langselbox .lang-selList {position: relative; display: inline-block; /*width: auto; min-width: 164px;*/ width: 100%;} #wrap-login .langselbox .lang-sel {} #wrap-login .langselbox .lang-sel .lang {position: relative;} #wrap-login .langselbox .lang-sel .lang::after {content: ''; display: block; width: 8px; height: 7px; background: url(../images/login/ico-lang-arrow.png) center center no-repeat; position: absolute; right: 10px; top: 50%; margin-top: -4px; transform: rotate(180deg);} #wrap-login .langselbox .lang-list {display: none; position: absolute; top: 39px; left: 0; right: 0; border: 1px solid #ddd; background-color: #fff; z-index: 3;} #wrap-login .langselbox .lang-list .lang {padding-top: 6px; padding-bottom: 8px;} #wrap-login .langselbox .lang-list .lang img {} #wrap-login .langselbox .lang-selList.open .lang-list {display: block;} #wrap-login .langselbox .lang-selList.open .lang-sel .lang::after {transform: rotate(0deg);} #wrap-login .langbox-area {text-align: right; padding: 6px 0;} #wrap-login .langselbox {border: 1px solid #dbdbdb; border-radius: 10px; height: 50px;} #wrap-login .langselbox .lang-selList, #wrap-login .langselbox .lang-sel, #wrap-login .langselbox .lang {height: 100%;} #wrap-login .langselbox .lang {padding: 8px 25px 8px 15px; text-align: left; white-space: nowrap; display: flex; align-items: center; justify-content: flex-start;} #wrap-login .langselbox .lang-list {top: 48px; border-radius: 10px; left: -1px; right: -1px; max-height: 220px; overflow: auto;} #wrap-login .langselbox .lang-list .lang {line-height: 20px; padding-top: 12px; padding-bottom: 12px;} #wrap-login .ico-adminSet {text-indent: -999rem; width: 44px; height: 30px; background: url(../images/common/ico-adminSet.png) center center no-repeat;} #wrap-login .textbox .ico-adminSet {display: inline-block; vertical-align: bottom; margin-left: 10px;} .adminHtml #wrap-login .login-wrap .info-bx .chk-box .check input[type='checkbox'] + label {padding-left: 4px;} .cp-link {margin: 12px 0 7px; font-size: 14px; color: #666;} .login-wrap .side-txt1 {font-size: 12px;} .login-wrap .side-txt2 {font-size: 11px; color: #959393;} .login-foot-info {position: relative; clear: both; padding: 39px 0 0 3px; text-align: left; font-size: 12px; color: #333; line-height: 18px; letter-spacing: -0.02em;} .login-foot-info:before {content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: url(../images/common/ico-info2.png) no-repeat center center;} .login-foot-info .s-link {text-decoration: underline;} @keyframes rotate { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .skinType1 .order-search, .skinType1 input.point, .skinType1 select.point, .skinType1 #contents .myCart-section .myCartList-area, .skinType1.FIX_order-search .order-search::after, .skinType1 .tab-box.type1 .tab-btn a.active::after, .skinType1 .order-search .wrap-default .select1.point + .input1 + .search-btn.type-search, .skinType1 .order-search .wrap-default .select1.point + .input-auto-complete .input1, .skinType1 .order-search .wrap-default .select1.point + .input-auto-complete + .search-btn.type-search{ border-color: #a082d7 !important;} .skinType1 .order-search .wrap-default .select1.point + .input1, .skinType1 .order-search .wrap-default .select1.point + .input-auto-complete .input1, .skinType1 .order-search .wrap-default .select1.point + .input-auto-complete + .search-btn.type-search, .skinType1 .order-search .wrap-default .select1.point + .input1 + .search-btn.type-search { border-color: #a082d7 !important;} .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail, .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail + .input-auto-complete .input1, .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail + .input-auto-complete + .search-btn.type-search, .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail + .input1 + .search-btn.type-search{ border-color: #a082d7 !important;} .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail:hover, .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail + .input-auto-complete .input1:hover, .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail + .input-auto-complete + .search-btn.type-search:hover, .skinType1 .order-search .wrap-default .default-search > .select1#select_search_detail + .input1 + .search-btn.type-search:hover {border-color: #a082d7 !important;} .skinType1 .btn-myCart, .skinType1 .btn-order, .skinType1 .popup .pop-foot .btn-ix.pftype1, .skinType1 .tab-box.type1 .tab-btn a.active::before, .skinType1 .quick-order .list li > .num, .skinType1 .quick-order .sum .btn button{ background-color: #a082d7;} .skinType1 .btn-myCart:hover, .skinType1 .btn-order:hover, .skinType1 .popup .pop-foot .btn-ix.pftype1:hover, .skinType1 .quick-order .sum .btn button:hover{ background-color: #8853e9;} .skinType1 .result-total .num, .skinType1 .tab-box.type1 .tab-btn a.active{ color: #a082d7;} .skinType1 .tab-box.type1 .tab-btn a.active{ background-color: #f4edff;} .skinType1 input.point:hover, .skinType1 select.point:hover, .skinType1 .inForm-box.point:hover, .skinType1 .order-search .wrap-default .select1.point + .input1 + .search-btn.type-search:hover, .skinType1 .order-search .wrap-default .select1.point + .input-auto-complete + .search-btn.type-search:hover {border-color: #6c519e !important;} .skinType1 .input1:focus, .skinType1 input.point:focus, .skinType1 select.point:focus, .skinType1 .inForm-box.focus, .skinType1 .inForm-box.point:focus {border-color: #a082d7;} .skinType1 input.point:focus, .skinType1 select.point:focus, .skinType1 .inForm-box.point:focus {background-color: #f5f0ff;} /************************************************mo************************************************/ html.moHtml, html.moHtml body, html.moHtml #header, html.moHtml #footer {min-width:320px;} html.moHtml .textbox.type3 .tit {font-size: 13px; line-height: 17px;} html.moHtml .textbox.type3 .txt1 {font-size: 15px; line-height: 19px;} html.moHtml .popup {/*max-width: calc(100vw - 30px);*/ width: 100% !important;} html.moHtml .popup .pop-head {padding-left: 10px; padding-right: 10px;} html.moHtml .popup .pop-head::after {left: 10px; right: 10px;} html.moHtml .popup .pop-head .pophead-title {padding-left: 10px; font-size: 15px; line-height: 19px;} html.moHtml .popup .pop-cont {padding: 10px;} html.moHtml .popup.no-foot .pop-cont {padding-bottom: 20px;} html.moHtml .popup .close {right: 10px;} html.moHtml .popup .pop-foot {padding: 15px 10px;} html.moHtml #wrap{ height: auto; padding-top: 41px; min-height: 100vh;} html.moHtml #header {position: fixed; top: 0; height: 41px; left: 0; width: 100%; border-bottom: 1px solid #ccc; z-index: 3;} html.moHtml #header .logo {width: 112px; height: 28px; background-size: auto 80%; background-position-x: 0; margin-top: 3px;} html.moHtml #header .btn-topmove {display: none;} html.moHtml #header .btn-gnbOpen {width: 40px; height: 40px; position: relative;} html.moHtml #header .btn-gnbOpen span, html.moHtml #header .btn-gnbOpen::before, html.moHtml #header .btn-gnbOpen::after {position: absolute; top: 50%; left: 10px; font-size: 0; width: 20px; height: 1px; background-color: #333;} html.moHtml #header .btn-gnbOpen::before, html.moHtml #header .btn-gnbOpen::after {content: ''; display: block;} html.moHtml #header .btn-gnbOpen span {margin-top: 0;} html.moHtml #header .btn-gnbOpen::before {margin-top: -6px;} html.moHtml #header .btn-gnbOpen::after {margin-top: 6px;} html.moHtml #header .btn-gnbClose {display: block; position: absolute; top: 0; right: 0; width: 40px; height: 40px;} html.moHtml #header .inner {padding: 0; height: 40px; display: flex; justify-content: space-between; align-items: center; flex-direction: row;} html.moHtml #header .left {width: calc(100% - 120px); display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center;} html.moHtml #header .right {width: 120px; height: 100%; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-end;} html.moHtml #header .right .tooltip-box, html.moHtml #header .right .overlay-box {display: none;} html.moHtml #header .right .btn-talk, html.moHtml #header .right .btn-label, html.moHtml #header .right .btn-manual, html.moHtml #header .right .btn-myCart {width: 40px; height: 40px; min-height: 40px;} html.moHtml #header .right .btn-label {padding-top: 0; background-position: 8px center; background-size: 70% auto;} html.moHtml #header .right .btn-label .txt {font-size: 0;} html.moHtml #header .right .btn-myCart .txt {font-size: 0;} html.moHtml #header .right .btn-talk .txt {background-size: 22px auto; background-position-y: 1px;} html.moHtml #header .right .btn-myCart {width: 40px; height: 40px; position: relative; top: auto; left: auto; margin-left: 0; background-color: transparent;} html.moHtml #header .right .btn-myCart .txt {background-image: url(../images/common/ico-cart.png); transform: rotate(0); background-size: 22px auto;} html.moHtml #header .right .btn-manual {padding-top: 0; background-position: 8px center; background-size: 70% auto;} html.moHtml #header .right .fix-toggle {display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center;} html.moHtml #header .right .fix-toggle .round-area + .round-area {margin-top: 0;} html.moHtml #header .right .fix-toggle .round-area {border: 0 none; padding: 0; width: 40px; height: 40px;} html.moHtml #header .right .fixCart-area .cnt-box {display: flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 5px; border-radius: 7px; background-color: #ea7c1e; margin: 0; position: absolute; right: 50%; top: 50%; margin-top: -16px; margin-right: -15px; font-size: 11px; color: #fff; line-height: 13px; transition: none; width: auto;} html.moHtml .fixCart-area:not(.active) .cnt-box .cnt {width: 100%; height: 100%; min-width: 100%; min-height: 100%; background-color: transparent;} html.moHtml #header .right .fixCart-area .cnt-box .label {display: none;} html.moHtml #header .center {width: 300px; position: fixed; left: -300px; top: 0; bottom: 0; background-color: #fff; transition: left .2s; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;} html.moHtml #header .center .logobox {padding: 5px; padding-right: 50px;} html.moHtml #header .center .btn-gnbClose {position: absolute; top: 0; right: 0; font-size: 0;} html.moHtml #header .center .btn-gnbClose::before, html.moHtml #header .center .btn-gnbClose::after {content: ''; width: 2px; height: 18px; background-color: #555; position: absolute; left: 50%; top: 50%; margin-top: -9px;} html.moHtml #header .center .btn-gnbClose::before {transform: rotate(-45deg);} html.moHtml #header .center .btn-gnbClose::after {transform: rotate(45deg);} html.moHtml #header .center .overlay-view, html.moHtml #header .center .tooltip-view {display: flex; position: relative; z-index: 1; background-color: transparent;} html.moHtml #header .center .tooltip-view {box-shadow: none;} html.moHtml #header .center .btn-mypage, html.moHtml #header .center .btn-logout {width: 35px; min-width: 35px; height: 35px; border-radius: 17px; border: 1px solid #ccc; margin: 0 5px;} html.moHtml #header .center .btn-mypage .txt, html.moHtml #header .center .btn-logout .txt {font-size: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-position: center center; background-repeat: no-repeat; background-size: 50% auto;} html.moHtml #header .center .btn-mypage .txt {background-image: url(../images/common/ico-mypage.png);} html.moHtml #header .center .btn-logout .txt {background-image: url(../images/common/ico-logout.png);} html.moHtml #header .center-top > div {border-bottom: 1px solid #ccc;} html.moHtml #header .center-top .userinfo-box .photobox {display: none;} html.moHtml #header .center-top .userinfo-box .photobox + .textbox {margin-left: 0;} html.moHtml #header .center-top .uInfobox .textbox .txt > span, html.moHtml #header .center-top .uInfobox .textbox .txt > [class*="txt"] {font-size: 12px; line-height: 16px; color: #333;} html.moHtml #header .center-top .uInfobox .textbox .txt {display: flex; justify-content: flex-start; align-items: center; width: 100%;} html.moHtml #header .center-top .uInfobox .textbox > p > span {margin: 3px 7px 3px 0; /*display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/ overflow: hidden; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 32px; vertical-align: middle; } html.moHtml #header .center-top .uInfobox .textbox > p > span.txt1 {max-width: calc(100% - 71px);} html.moHtml #header .center-top .uInfobox .textbox > p > span.txt2 {max-width: 60px; margin-right: 0;} html.moHtml #header .center-top .uInfobox .textbox > p > span::after {margin-top: -5px;} html.moHtml #header .center-top .uInfobox .textbox .num {font-size: 14px; line-height: 18px;} html.moHtml #header .center-top .userIB-box {display: flex; justify-content: space-between; align-items: center; background-color: rgba(0,0,0,0.05); padding: 7px 5px;} html.moHtml #header .center-top .uInfobox .textbox > p.num {margin: 3px 0;} html.moHtml #header .center-top .userIB-box .uInfobox {flex: 1;} html.moHtml #header .center-foot:not(.type1) {padding: 10px;} html.moHtml #header .center-foot:not(.type1) .cInfobox {border-top: 1px dashed #ccc; padding-top: 10px;} html.moHtml #header .center-foot * {font-size: 11px; line-height: 15px; color: #333;} html.moHtml #header .center-foot .customer-info {padding: 0; flex-direction: column;} html.moHtml #header .center-foot .customer-info .title {font-weight: bold;} html.moHtml #header .center-foot .customer-info .icoInfo-txt {flex-direction: row; flex-wrap: wrap;} html.moHtml #header .center-foot .customer-info .icoInfo-txt .info-inbox + .info-inbox {margin-left: 10px;} html.moHtml #header .center-foot .customer-info .icoInfo-txt .info-inbox:first-child, html.moHtml #header .center-foot .customer-info .icoInfo-txt .info-inbox:last-child {width: 100%;} html.moHtml #header .center-foot .customer-info .icoInfo-txt .info-inbox:first-child + .info-inbox, html.moHtml #header .center-foot .customer-info .icoInfo-txt .info-inbox + .info-inbox:last-child {margin-left: 0;} html.moHtml #header .center-foot .customer-info .icoInfo-txt .info-inbox + .info-inbox {margin-top: 3px;} html.moHtml #header .center-foot .customer-info .icoInfo-txt dt {width: auto; height: auto; background: none; text-indent: 0; display: inline-block; padding-right: 8px;} html.moHtml #header .center-foot .customer-info .icoInfo-txt dt::after {content: ':'; width: 7px; height: 14px; line-height: 14px; background-color: transparent; margin-top: -7px; right: 1px; text-align: center;} html.moHtml #header .center-foot .customer-info .icoInfo-txt .ico-info2, html.moHtml #header .center-foot .customer-info .icoInfo-txt .ico-info2::after, html.moHtml #header .center-foot .customer-info .icoInfo-txt .ico-info2 + dd {color: #ef6e00;} html.moHtml #header .center-foot .tooltipView-head + .tooltipView-cont {margin-top: 6px;} html.moHtml #header .center .gnb-area {padding: 10px; overflow-x: hidden; overflow-y: auto; flex: 1;} html.moHtml #header .center .gnb-area > ul {width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto;} html.moHtml #header .center .gnb-area > ul::-webkit-scrollbar {width: 6px; height: 6px;} html.moHtml #header .center .gnb-area > ul::-webkit-scrollbar-track {background-color: #fff;} html.moHtml #header .center .gnb-area > ul::-webkit-scrollbar-thumb {background-color: #ddd; border-radius: 0;} html.moHtml #header .center .gnb-area .menu {font-size: 12px; line-height: 16px; padding: 2px 0; display: block; min-height: 26px; padding-bottom: 10px;} html.moHtml #header .center .gnb-area > ul > li > .menu {font-size: 13px; line-height: 17px; font-weight: 500; min-height: auto; padding-bottom: 5px;} html.moHtml #header .center .gnb-area ul {padding-left: 10px; padding-bottom: 5px;} html.moHtml #header .center .gnb-area > ul {padding-left: 0;} html.moHtml #header .center .gnb-area > ul > li + li {margin-top: 8px;} html.moHtml #header .center .gnb-area .depth1-list {} html.moHtml #header .center-foot.type1 .customer-info {padding: 10px; border-radius: 0;} html.moHtml.gnbOpen #header {z-index: 6;} html.moHtml.gnbOpen .inner::before {content: ''; display: block; position: fixed; left: 0; top: 0; bottom: 0;right: 0; background-color: rgba(0,0,0,0.5); z-index: 1;} html.moHtml.gnbOpen #header .center {left: 0; box-shadow: 6px 0 6px rgba(0,0,0,.3); z-index: 2;} /*html.moHtml #header .utiltag .fix-toggle{ width: 40px; height: 40px; padding: 0; border: 0; display: block; position: absolute; top: 5px; right: 5px;} html.moHtml #header .utiltag .round-area, html.moHtml #header .utiltag .fixCart-area .cnt-box .label{ display: none;} html.moHtml #header .utiltag .fixCart-area{ width: 100%; height: 100%; padding: 0; margin: 0; display: block;} html.moHtml #header .utiltag .btn-myCart{ width: 100%; height: 100%; padding: 0; margin: 0; top: auto; left: auto; position: relative;} html.moHtml #header .utiltag .fixCart-area .cnt-box{ width: 20px; height: 20px; min-width: 20px; min-height: 20px; font-size: 11px; line-height: 20px; padding: 0; margin: 0; position: absolute; top: 0; right: 0;}*/ html.moHtml #footer {padding: 0; flex-direction: column-reverse; align-items: flex-start; display: none;} html.moHtml #header #footer {display: flex;} html.moHtml #footer {min-width: auto;} html.moHtml #footer .footer-info {display: block; width: 100%;} html.moHtml #footer * {font-size: 11px; line-height: 15px;} html.moHtml #footer > * {padding: 10px;} html.moHtml #footer .logo-hk {width: 120px; height: 25px; background-position-x: left; background-size: auto 80%;} html.moHtml #footer .textbox {margin-top: 3px; padding-left: 3px;} html.moHtml #footer > div + div {border-bottom: 1px solid #ccc;} html.moHtml #footer .left, html.moHtml #footer .right {width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;} html.moHtml #footer .left {padding: 10px 5px; flex-direction: column;} html.moHtml #footer .right {padding: 5px 0; flex-wrap: wrap;} html.moHtml #footer .right .btn {padding-left: 5px; padding-right: 5px; margin: 0 5px; position: relative;} html.moHtml #footer .right .btn::after {content: ''; display: block; width: 1px; height: 10px; background-color: #ccc; position: absolute; right: -5px; top: 50%; margin-top: -4px;} /*html.moHtml #footer .right .btn:last-of-type::after {content: none;}*/ html.moHtml #footer .right .select1 {padding-right: 18px; background-position-x: calc(100% - 5px); width: 98px;} html.moHtml #footer .right .btn + .select1 {width: 120px; margin-left: 5px;} html.moHtml #contents{ position: relative; flex: 1;} html.moHtml #contents .content-section{ padding: 0 10px;} html.moHtml #contents .page-title{ width: 100%; height: 40px; background-color: #fff; padding: 0; align-items: center; justify-content: center; border-bottom: 1px solid #dfdfdf; position: fixed; top: 41px; left: 0; z-index: 3;} html.moHtml #contents .page-title .title{ font-size: 15px; line-height: 19px; padding: 0; min-height: auto; max-height: 40px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; white-space: normal; text-align: center; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } html.moHtml #contents .page-title .title::before{ display: none;} html.moHtml #contents .page-body{ padding-top: 45px; padding-bottom: 10px;} html.moHtml #contents .page-body > .tab-box, html.moHtml #contents .page-body > .summary-box {margin-top: 5px; margin-bottom: 5px;} html.moHtml #contents #MAIN_DASHBOARD .page-body {padding-top: 10px;} html.moHtml #contents .filter-section{ width: 40px; height: 40px; border: 0; border-radius: 0; overflow: hidden; position: fixed; top: 40px; left: 0; z-index: 5;} html.moHtml #contents .filter-section .btn-filter{width: 28px; height: 28px; border-radius: 14px; padding: 0; margin-top: 6px; margin-left: 6px;} html.moHtml #contents .filter-section .filter-area{ width: 300px; position: absolute; top: 0; left: -300px;} html.moHtml.filterOpen #contents .filter-section{ width: 300px; max-width: calc(100% - 40px); height: 100%; background-color: #fff; border: 0; border-right: 1px solid #ccc; border-radius: 0; box-shadow: 6px 0 6px #666; overflow: visible; position: fixed; top: 0; left: 0; animation: filterSlide 0.3s;} @-webkit-keyframes filterSlide { from { -webkit-left: -300px; left: -300px; } to { -webkit-left: 0; left: 0; } } @keyframes filterSlide { from { -webkit-left: -300px; left: -300px; } to { -webkit-left: 0; left: 0; } } html.moHtml.filterOpen #contents .filter-section .btn-filter{ width: 40px; height: 40px; background-color: #000; border-radius: 0 25px 25px 0; position: absolute; top: 10px; right: -41px;} html.moHtml.filterOpen #contents .filter-section .btn-filter .txt{ width: 14px; height: 14px; background-image: none; margin-right: 5px; overflow: hidden; position: relative;} html.moHtml.filterOpen #contents .filter-section .btn-filter .txt::before{ width: 40px; height: 1px; background-color: #fff; content: ''; margin: 0 0 0 -20px; position: absolute; top: 50%; left: 50%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);} html.moHtml.filterOpen #contents .filter-section .btn-filter .txt::after{ width: 1px; height: 40px; background-color: #fff; content: ''; margin: -20px 0 0 0; position: absolute; top: 50%; left: 50%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);} html.moHtml.filterOpen #contents .filter-section .filter-area{ width: 100%; height: 100%; overflow-y: auto; position: static; top: auto; left: auto;} html.moHtml #contents .filter-section .filter-form {width: 299px;} html.moHtml .filter-form > .oc-group > .ocG-cont {width: 279px;} html.moHtml .filter-section .rangeSlider-box {width: 279px;} html.moHtml .filter-section .rangeSlider-box .rs-container, html.moHtml .filter-section .rangeSlider-box .rs-container .rs-scale {width: 249px;} html.moHtml #contents .myCart-section{ width: 360px; max-width: 100%; height: 100%; background-color: #fff; border: 0; border-left: 1px solid #ccc; border-radius: 0; box-shadow: -6px 0 6px #666; position: fixed; top: 0; right: -370px; z-index: 4; transition: right 0.3s;} html.moHtml #contents .myCart-section .btn-myCart{ width: 34px; height: 34px; background-color: #000; position: absolute; top: 5px; left: 10px;} html.moHtml.myCartOpen #contents .myCart-section .btn-myCart {left: -44px;} html.moHtml.myCartOpen #contents .myCart-section{ right: 0; z-index: 5;} html.moHtml.myCartOpen #contents .myCart-section .btn-myCart .txt{ width: 14px; height: 14px; background-image: none; overflow: hidden; position: relative;} html.moHtml.myCartOpen #contents .myCart-section .btn-myCart .txt::before, html.moHtml.myCartOpen #contents .myCart-section .btn-myCart .txt::after {content: ''; display: block; width: 1px; height: 20px; position: absolute; top: 50%; left: 50%; margin-top: -10px; position: absolute; top: 50%; left: 50%; background-color: #fff;} html.moHtml.myCartOpen #contents .myCart-section .btn-myCart .txt::before{transform: rotate(-45deg); } html.moHtml.myCartOpen #contents .myCart-section .btn-myCart .txt::after{transform: rotate(45deg); } html.moHtml .myCartList-area .listArea-head > .headTop-left {padding-left: 0;} html.moHtml.myCartOpen .myCartList-area .listArea-head{ padding-left: 15px;} html.moHtml.myCartOpen .myCartList-area .listArea-body{ flex: 1; min-height: calc(100vh - 48px); overflow: auto;} html.moHtml.myCartOpen .myCartList-area .listBody-list{ flex: 1; overflow-y: auto;} @media screen and (max-width: 767px) { html.moHtml.myCartOpen #contents .myCart-section .btn-myCart {left: calc(100% - 44px); background-color: #fff; border: 1px solid #999;} html.moHtml.myCartOpen #contents .myCart-section {width: 100%;} html.moHtml.myCartOpen #contents .myCart-section .btn-myCart .txt::before, html.moHtml.myCartOpen #contents .myCart-section .btn-myCart .txt::after {background-color: #555;} html.moHtml.myCartOpen .myCartList-area .listArea-head {padding-right: 55px;} html.moHtml .myCartList-area .listArea-head > .headTop-right {padding-right: 0;} } html.moHtml .cartSel-box .cartSel-info .size {font-size: 14px; line-height: 18px;} html.moHtml .btn-order {height: 38px;} html.moHtml .btn-order::before {width: 20px; height: 20px; background-size: contain; margin-right: 5px;} html.moHtml .btn-order .txt {font-size: 16px;} html.moHtml .popup-wrap:not(.windowtype){ align-items: flex-end;} html.moHtml .popup-wrap:not(.windowtype) .popup{ margin-bottom: -100vh; max-width: calc(100% - 10px); border-radius: 10px 10px 0 0;} html.moHtml .popup-wrap.on:not(.windowtype) .popup .pop-head{ padding-top: 30px; padding-bottom: 10px;} html.moHtml .popup-wrap.on:not(.windowtype) .popup .close{ width: 100%; height: 100%; background-image: none; text-indent: -9999px; top: 0; left: 0; z-index: 9;} html.moHtml .popup-wrap.on:not(.windowtype) .popup .close::before{ width: 60px; height: 8px; background-color: #ccc; content: ''; margin-left: -30px; border-radius: 4px; position: absolute; top: 15px; left: 50%;} html.moHtml .popup-wrap.on:not(.windowtype) .scroll-y{ height: 300px;} html.moHtml #wrap-login .login-wrap {margin-top: -107px;} html.moHtml #wrap-login .header .logo img {height: 22px;} html.moHtml #wrap-login .header .logo p {font-size: 14px; line-height: 19px; font-weight: 500; padding-bottom: 2px;} html.moHtml #wrap-login .login-wrap .info-bx .input {height: 38px; padding: 0 15px;} html.moHtml #wrap-login .login-wrap .info-bx .input {font-size: 16px;} html.moHtml #wrap-login .login-wrap .info-bx .btn-login {height: 38px; line-height: 28px; padding: 5px 0; font-size: 15px;} html.moHtml .cookiesYN-wrap {flex-direction: column;} html.moHtml .cookiesYN-wrap .textbox + .btnbox.popup {} @media screen and (max-width: 1023px) { html.moHtml .popup .pop-foot .btn-ix {height: 38px; padding: 0 12px; min-width: 80px; padding: 0 8px;} html.moHtml .popup .pop-foot .btn-ix .ix-txt {font-size: 12px; line-height: 16px; font-weight: 400;} html.moHtml #wrap-login .app-down{ margin: 180px 0 0 83px; display: block; position: absolute; top: 50%; left: 50%;} } @media screen and (max-width: 900px) { html.moHtml #contents .page-title {justify-content: flex-start;} html.moHtml:not(.hasFilter) #contents .page-title{ padding: 0 10px;} html.moHtml #contents #ORDER_SUBMISSION .page-title {padding-right: 90px;} html.moHtml.hasFilter #contents .page-title {padding-left: 40px;} html.moHtml.skinType1 #contents .page-title {padding-right: 110px;} html.moHtml #contents .page-title .title{ font-size: 14px; line-height: 18px; max-height: 36px; text-align: left;} } @media screen and (min-width: 481px) and (max-width: 767px) { html.moHtml .cookiesYN-wrap{ flex-direction: column;} html.moHtml .cookiesYN-wrap .btnbox{ text-align: right; margin-top: 10px;} } @media screen and (max-width: 480px) { html.moHtml .cookiesYN-wrap{ flex-direction: column;} html.moHtml .cookiesYN-wrap .btnbox{ text-align: right; margin-top: 10px;} } @media screen and (max-width: 400px) { html.moHtml #wrap-login .header {margin: 10px 0; padding: 0 10px;} html.moHtml #wrap-login .header .logo p {padding-left: 10px; margin-left: 10px; flex: 1;} html.moHtml #wrap-login #container {position: relative;} html.moHtml #wrap-login .inner-contain {position: unset; display: flex; align-items: center; justify-content: center;} html.moHtml #wrap-login .visual {position: absolute; top: 0; left: 0;} html.moHtml #wrap-login .visual::before, html.moHtml #wrap-login .visual::after {content: none;} html.moHtml #wrap-login .visual .left, html.moHtml #wrap-login .visual .right {display: none;} html.moHtml #wrap-login .login-wrap {position: relative; margin: 0; top: auto; bottom: auto; width: 100%; left: auto; border-radius: 0; background-color: rgba(255,255,255,.8);} html.moHtml #wrap-login .app-down{ margin-top: 160px;} html.moHtml #wrap-login #footer {margin-top: 0;} } html.moHtml.gnbOpen body, html.moHtml.filterOpen body, html.moHtml.myCartOpen body {overflow: hidden;}