@charset "utf-8"; @import url('../fonts/font.css'); @import url('jquery-ui.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;} 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{ zoom: 0.8 !important;} */ 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;} 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;} .backdrop{ height: 100% !important;} .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;} .ff-NSKR {font-family: 'Noto Sans KR', sans-serif;} .td-ul {text-decoration: underline !important;} .tt-u {text-transform: uppercase !important;} .tt-l {text-transform: lowercase !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;} .full, .w100p {width: 100% !important;} .wAuto {width: auto !important;} .w100 {width: 100px;} .w120 {width: 120px;} .w150 {width: 150px;} .w200 {width: 200px;} .w240 {width: 240px;} .w1118 {width: 1118px;} .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: 30px !important;} .mgt50 {margin-top: 50px !important;} .mgt100 {margin-top: 100px !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*************************************************/ /* html.mainHtml, .mainHtml body {background: #f8f8f8; min-width: 1820px;} */ html.windowPopupHtml, .windowPopupHtml body{min-width: 100%;} #wrap {width: 100%; height: 100%;} .inner {width: 100%; margin: 0 auto; padding: 0 10px;} .inner.type1 {padding: 0;} .btn-topmove {/* display: none; */ width: 56px; height: 56px; padding-top: 23px; border-radius: 50px; text-align: center; background: #666 url(../images/common/ico-top-w.png) center 10px no-repeat; z-index: 99; position: fixed; right: 16px; 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: 85px; opacity: 1;} /*.mainHtml .btn-topmove {margin-right: -682px;} .mainHtml .btn-topmove.show {bottom: 19px;}*/ .btn-topmove:hover {background-color: #000;} .mainHtml .btn-topmove {right: 229px;} .windowPopupHtml .btn-topmove {right: 4px;} .windowPopupHtml .btn-topmove.show {bottom: 7px;} /**************************************************login**************************************************/ .loginHtml, .loginHtml body {background-color: #fff; min-width: 100%; } #wrap-login {width: 100%; height: 100%; display: table; position: relative;} #wrap-login .login-inner {display: table-cell;} #wrap-login .header{position:relative;display:block;width:100%;height: auto;margin:36px auto;} #wrap-login .header .logo{display: block; text-align: center; display: flex; align-items: center; justify-content: center;} #wrap-login .header .text strong {font-size: 30px; line-height: 35px; color: #f60; font-weight: bold;} #wrap-login .header .text span {font-size: 12px; color: #838383; width: 100px; text-align: left; line-height: 17px; margin-left: 8px;} #wrap-login .header .glp-info{ width: 180px; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);} #wrap-login .header .glp-info .table-list th{ height: 20px; font-size: 9px;} #wrap-login .header .glp-info .table-list td{ font-size: 9px; padding: 2px 10px;} #wrap-login #container {width: 100%; height: 755px; border-left: 0 none;} #wrap-login .inner-contain {width:100%; position:relative; height: 100%; 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: flex; max-width: calc(80% - 10px); box-sizing: border-box; position: relative; margin: 0 auto; z-index: 1; transition: 0.5s; position: absolute; top: 50%; left: 50%; margin-top: -243px; margin-left: -337px;} #wrap-login .login-wrap .info-bx{ width: 574px; background-color: #ffffff; text-align: center; padding: 30px 65px 40px 65px; margin-right: 16px; border-radius: 8px;} #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: 3px; 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 { font-family:'HankookTire'; font-weight: normal; font-size: 14px; 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 .select{ width: 100%; height: 50px; font-size: 14px; font-weight: 500; color: #666; padding: 0 29px; margin: 0 0 15px 0; border: 1px solid #dbdbdb; border-radius: 3px;} #wrap-login .login-wrap .info-bx .select:hover, #wrap-login .login-wrap .info-bx .select:focus {border-color: #000;} #wrap-login .login-wrap .info-bx .chk-box{ text-align: left; display: flex; justify-content: space-between;} #wrap-login .login-wrap .info-bx .chk-box .check {display: block; position: relative;} #wrap-login .login-wrap .info-bx .chk-box .check input{ position: absolute; top: 0; left: -9999px;} #wrap-login .login-wrap .info-bx .chk-box .check label {font-size: 14px; color: #666; padding-left: 26px; cursor: pointer;} #wrap-login .login-wrap .info-bx .chk-box .check label::before{ width: 20px; height: 20px; content: ''; border: 1px solid #ccc; box-sizing: border-box; border-radius: 3px; position: absolute; top: 0; left: 0;} #wrap-login .login-wrap .info-bx .chk-box .check label:hover::before{ border-color: #000;} #wrap-login .login-wrap .info-bx .chk-box .check input:checked + label::after{ width: 4px; height: 9px; content: ''; border-bottom: 3px solid #f36f20; border-right: 3px solid #f36f20; position: absolute; top: 3px; left: 7px; transform: rotate(45deg);} #wrap-login .login-wrap .info-bx .btn-login{ width: 100%; background-color: #333; color: #ffffff; font-family:'HankookTire'; font-weight: normal; display: block; font-size: 18px; line-height: 35px; padding: 20px 0; border-radius: 3px; 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 .login-wrap .quick-menu{ width: 85px; position: relative;} #wrap-login .login-wrap .quick-menu .acco-head{ margin: 0 0 0 -17px; position: absolute; top: -17px; left: 50%;} #wrap-login .login-wrap .quick-menu .acco-body{ width: 100%; height: 100%; background-color: #fff; padding: 35px 0 20px 0; display: none; border-radius: 8px;} #wrap-login .login-wrap .quick-menu .acco-open{ width: 34px; height: 34px; background: url(../images/login/ico-quick-open.png) no-repeat center center #fff; text-indent: -9999px; display: inline-block; border-radius: 17px; box-shadow: 1px 1px 3px 1px #999;} #wrap-login .login-wrap .quick-menu .acco-close{ width: 34px; height: 34px; background: url(../images/login/ico-quick-close.png) no-repeat center center #fff; text-indent: -9999px; display: none; border-radius: 17px; box-shadow: 1px 1px 3px 1px #999; margin: 0 0 0 -17px; position: absolute; top: -17px; left: 50%;} #wrap-login .login-wrap .quick-menu .list{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;} #wrap-login .login-wrap .quick-menu .item{ width: 55px;} #wrap-login .login-wrap .quick-menu .link{ width: 55px; height: 55px; background: no-repeat center center; border: 1px solid #ccc; border-radius: 50%; position: relative;} #wrap-login .login-wrap .quick-menu .link.link1{ background-image: url(../images/login/ico-quick-btn1.png);} #wrap-login .login-wrap .quick-menu .link.link2{ background-image: url(../images/login/ico-quick-btn2.png);} #wrap-login .login-wrap .quick-menu .link.link3{ background-image: url(../images/login/ico-quick-btn3.png);} #wrap-login .login-wrap .quick-menu .link.link4{ background-image: url(../images/login/ico-quick-btn4.png);} #wrap-login .login-wrap .quick-menu .link.link5{ background-image: url(../images/login/ico-quick-btn5.png);} #wrap-login .login-wrap .quick-menu .link.link6{ background-image: url(../images/login/ico-quick-btn6.png);} #wrap-login .login-wrap .quick-menu .link .tooltip{ max-width: 220px; width: 1px; height: 1px; background-color: #333; font-family:'HankookTire'; font-weight: bold; font-size: 12px; color: #fff; line-height: 16px; padding: 7px 17px; border-radius: 3px; opacity: 0; position: absolute; top: 0; left: 0;} #wrap-login .login-wrap .quick-menu .link:hover{ background-color: #ec6608;} #wrap-login .login-wrap .quick-menu .link.link1:hover{ background-image: url(../images/login/ico-quick-btn1-on.png);} #wrap-login .login-wrap .quick-menu .link.link2:hover{ background-image: url(../images/login/ico-quick-btn2-on.png);} #wrap-login .login-wrap .quick-menu .link.link3:hover{ background-image: url(../images/login/ico-quick-btn3-on.png);} #wrap-login .login-wrap .quick-menu .link.link4:hover{ background-image: url(../images/login/ico-quick-btn4-on.png);} #wrap-login .login-wrap .quick-menu .link.link5:hover{ background-image: url(../images/login/ico-quick-btn5-on.png);} #wrap-login .login-wrap .quick-menu .link.link6:hover{ background-image: url(../images/login/ico-quick-btn6-on.png);} #wrap-login .login-wrap .quick-menu .link:hover .tooltip{ width: auto; height: auto; white-space: nowrap; opacity: 1; top: 12.5px; left: 42px;} #wrap-login .login-wrap .quick-menu.active .acco-body{ display: block;} #wrap-login .login-wrap .quick-menu.active .acco-open{ display: none;} #wrap-login .login-wrap .quick-menu.active .acco-close{ display: inline-block;} #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 .txt1::before{ display: none;} #wrap-login .footer .info-cs .txt2 {} #wrap-login .textbox {text-align: left; margin-bottom: 22px;} #wrap-login .textbox .txt1 { font-family:'HankookTire'; font-size: 20px; line-height: 25px; color: #333; padding: 0;} #wrap-login .textbox .txt1::before{ display: none;} #wrap-login .textbox .txt2 {font-size: 22px; line-height: 26px; color: #666;} #wrap-login .textbox .txt2 strong { width: 280px; font-family:'HankookTire'; font-weight: bold; display: inline-block;} #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 {padding-bottom: 25px; margin-top: 4px;} #wrap-login .login-wrap .info-bx .chkFindbox .fl {} #wrap-login .login-wrap .info-bx .chkFindbox .fr {font-weight: 400;} #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 .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); } } .focusIV-box {position: relative; width: 100%;} /* .focusIV-box .clear.btn-del6 {right: 36px;} */ .focusIV-box > .input1 {width: 100%;} .focusIV-box .focusIV-view {display: none; position: absolute; width: 100%; /*border: 1px solid #ccc;*/ background-color: #fff; top: 100%; z-index: 3;} .focusIV-box .focusIV-view.sh-listbox > .sh-list > .listSH:last-child, .focusIV-box .focusIV-view .mCustomScrollbar:not(.mCS_no_scrollbar) {border-bottom: 1px solid #ccc; border-radius: 0 0 3px 3px;} .focusIV-box .focusIV-view .mCustomScrollbar.mCS_no_scrollbar .listSH:last-child {border-bottom: 1px solid #ccc; border-radius: 0 0 3px 3px;} .focusIV-box.bottom .focusIV-view {bottom: 32px;} .focusIV-box.open .focusIV-view {display: block;} .focusIV-box .btn-reset {position: absolute; right: 1px; top: 50%; transform: translateY(-50%); height: auto;} .focusIV-box .insearch-box {display: inline-flex; align-items: center; width: 100%;} .focusIV-box .insearch-box .input1 {flex: 1;} .focusIV-box .insearch-box .input1 + .btn-ix {margin-left: 4px;} .cookies-wrap{ width: 100%; padding: 50px 0; display: flex; align-items: center; justify-content: center; position: fixed; bottom: 0; left: 0; z-index: 999;} .cookies-wrap::before{ width: 100%; height: 100%; background-color: #5e5e5e; content: ''; position: absolute; top: 0; left: 0; z-index: -1;} .cookies-wrap .txt{ font-weight: 400; font-size: 16px; color: #fff; line-height: 20px; letter-spacing: -0.5px; margin: 0 210px 0 0;} .cookies-wrap .txt a{ color: #49ccfd; text-decoration: underline;} .cookies-wrap .btn{ display: flex;} .cookies-wrap .btn a{ background-color: #ec6608; font-weight: 400; font-size: 18px; color: #fff; line-height: 20px; letter-spacing: -0.5px; padding: 10px 60px;} .cookies-wrap .btn a + a{ margin-left: 18px;} .cookies-wrap .close{ width: 50px; height: 50px; background: url(../images/login/ico-cookies-close.png) no-repeat center center; text-indent: -9999px; display: inline-block; position: absolute; top: 0; right: 20px;} /*loading, progressbar*/ .loadingbar {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 200;} .loadingbar .loadingbarbox {display: table; text-align: center; width: 100%; height: 100%;} .loadingbar .loadingbar-in {display: table-cell; vertical-align: middle;} .loadingbar .loadingbar-in p {color: #ed6d00; font-size: 18px; font-weight: bold; padding-top: 82px; background: url(../images/common/loading.gif) no-repeat center 0;} .loadingbar2 {height: 100vh; position: fixed; width: 100%; display: flex; flex-direction: column; color: #fff; justify-content: center; align-items: center; top: 0; z-index: 1001; background-color: rgba(0, 0, 0, 0.4); margin: 0;} .loadingbar3 {display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 4; color: #fff; background-color: rgba(0, 0, 0, 0.4); margin: 0; position: absolute; top: 0; left: -13px; right: 0; bottom: 0;} .progressbar {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.3); z-index: 200; z-index: 100000;} .progressbar .progressbarbox {display: table; text-align: center; width: 100%; height: 100%;} .progressbar .progressbar-in {display: table-cell; vertical-align: middle;} .pbarbtn .bar, .progressbar .progressbar-in .bar {width: 350px; height: 14px; max-width: 90%; margin: 0 auto; padding: 3px 6px; border-radius: 14px; background-color: #ddd; text-align: left;} .pbarbtn .bar .per, .progressbar .progressbar-in .per {width: auto; height: 8px; background-color: #ec6608; border-radius: 10px; vertical-align: top; transition: 0.3s;} .progressbar .progressbar-in p {color: #fff; font-size: 18px; font-weight: bold; margin-top: 32px; font-family: 'HankookTire', sans-serif;} .position-r > .loadingbar, .position-r > .progressbar, [class*="ag-theme"] .loadingbar {position: absolute; z-index: 100;} /*버튼형 progressbar*/ .pbarbtn {position: relative; padding: 15px 5px 0 !important; pointer-events: none;} .pbarbtn .bar {width: auto; height: 10px; padding: 2px 4px; position: absolute; left: 5px; right: 5px; top: 3px;} .pbarbtn .bar .per {display: inline-block; height: 6px;} .pbarbtn [class*=txt] {font-size: 10px !important; line-height: 12px !important;} .pbarbtn [class*=txt] em {font-size: 11px; font-weight: bold;} .btn-ix.pbarbtn {background-color: #fff !important; border: 1px solid #cccccc !important;} .btn-ix.pbarbtn [class*=txt] {color: #808080 !important;} .btn-ix.pbarbtn [class*=txt] em {color: #ec6608;} .table-view .fr-toolbar { border: 0px solid #CCCCCC !important; } .btn-topmove-p {width: 64px; height: 64px; padding-top: 30px; border: 1px solid #719326; border-radius: 64px; text-align: center; background: #8dbf21 url(../images/common/ico-arrow1.png) center 10px no-repeat; z-index: 3; position: absolute; right: 30px; bottom: 30px; opacity: 0; transition: 1s;} .btn-topmove-p > span {font-size: 15px; font-weight: 500; line-height: 15px; color: #fff;} .btn-topmove-p.show {bottom: 55px; opacity: 1;} .btn-topmove-p:hover {background-color: #719326;} .w2ui-tag {margin: -5px 0 0 4px;} /*************************************************layout*************************************************/ /*툴팁 : 메인, 마이페이지 사용중(다른곳 사용시 참고 : tooltipShow함수)*/ .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;} html.cartOpen #contents .layout-filter-board{ padding-right: 276px;} html.cartSpread #quick-right .cart-box{ width: calc(100% - 100px);} html.cartSpread #quick-right .cart-box .mini-box{ display: none;} html.cartSpread #quick-right .cart-box .spread-box{ display: flex;} #deviceCk{ width: 1px; height: 1px; opacity: 0; overflow: hidden; position: fixed; top: 0; left: 0;} #deviceCk > .device{ display: none;} #deviceCk > .wWide{ display: block;} .spinner{ background-image: none;} .spinner .ui-widget.ui-widget-content{ background-color: transparent; display: flex; align-items: center; border: 0;} .spinner input{ width: 100%; height: 32px; background-color: #fff; font-family: 'Noto Sans KR'; font-size: 16px; color: #555; text-align: center; padding: 0; margin: 0 15px; border: 1px solid #ccc;} .spinner .ui-spinner-button{ width: 15px; height: 100%; background-color: transparent; margin: 0; display: flex; align-items: center; border: 0; border-radius: 0; cursor: pointer;} .spinner .ui-spinner-button.ui-spinner-up{ right: auto; left: 0;} .spinner .ui-spinner-button.ui-state-hover{ background-color: #ccc; border: 0;} .spinner .ui-spinner-button.ui-state-active{ background-color: #666; border: 0;} .scroll-y{ overflow-y: auto;} .scroll-y::-webkit-scrollbar {width: 4px; height: 4px;} .scroll-y::-webkit-scrollbar-track {background-color: #fff;} .scroll-y::-webkit-scrollbar-thumb {background-color: #666; border-radius: 4px;} #wrap{ width: 100%; padding: 0; display: flex; flex-direction: column;} #header {width: 100%; padding: 0; display: block; position: relative;} #header .logo {text-indent: -9999px; background: url(../images/ico/ico-logo.png) left center no-repeat; width: 220px; height: 36px; background-size: contain;} #header .logo:hover {position: relative;} #header .logo:hover::before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255,255,255,.2);} #header [class*="head-"] {display: inline-flex; align-items: center;} #header .head-left { justify-content: flex-start;} #header .head-center { padding: 0 0 0 20px; justify-content: center;} #header .head-right { justify-content: flex-end; padding-left: 370px; padding-right: 32px;} #header .btn-logout {background-image: url(../images/ico/ico-logout.png); background-size: auto !important;} #header .gnb-group {display: flex; justify-content: space-evenly; align-items: center; width: 100%; flex-wrap: wrap;} #header .gnb-group a {color: #fff; font-weight: bold; font-size: 13px; line-height: 17px; text-transform: uppercase; padding: 4px 15px; border-radius: 4px;} #header .gnb-group a:hover {background-color: rgba(255,255,255,.2);} #header .delivery-info-box{ height: 32px; background: url(../../front/images/ico/ico-delivery-info.png) no-repeat right 15px center #212124; padding: 5px 55px 5px 20px; margin: 0; border: 1px solid #565252; border-radius: 16px; position: absolute; top: 8px; right: 476px;} #header .delivery-info-box .txt{ font-weight: 700; font-size: 14px; color: #ffd4b5; line-height: 20px;} #header .user-group {background-color: #4d4d4e; padding: 5px 16px; height: 36px; border-radius: 18px; max-width: 130px; margin-right: 9px; margin-left: 26px;} #header .user-group:hover{ background-color: #666;} #header .user-group .user { width: 100%; color: #fff; padding-left: 28px; position: relative; font-size: 10px; font-weight: 500; line-height: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #header .user-group .user::before {content: ''; display: block; width: 25px; height: 25px; background: url(../images/ico/ico-user.png) center center no-repeat; background-size: contain; position: absolute; left: 0; top: 0;} #header .head-search {position: relative;} #header .head-search .input {opacity: 1; width: 192px; height: 32px; border-radius: 4px 0 0 4px; padding: 4px 8px;} #header .head-search [class*="btn-"], #header .head-search:hover [class*="btn-"] {border-radius: 0 4px 4px 0; background-color: rgba(0,0,0,.2);} #header .head-search [class*="btn-"]:hover #header .head-search:hover [class*="btn-"]:hover {background-color: rgba(255,255,255,.2);} #header .head-search .btn-util1 {background-image: url(../images/ico/ico-util1.png);} #header .util-group {display: flex;} #header .util-group li {margin: 0 2px;} #header .util-group.type-bar1 {margin-right: 0;} #header .util-group.type-bar1 li {min-width: 54px; position: relative; display: flex; justify-content: center; align-items: center; margin: 0;} #header .util-group.type-bar1 li::after {content: ''; display: block; width: 1px; height: 18px; background-color: #ccc; position: absolute; top: 50%; right: 0; margin-top: -11px;} #header .util-group.type-bar1 li:last-child:after {content: none;} #header .util-group.type-bar1 li a {min-width: 51px; height: 51px;} #header .util-group.type-bar1 li a.btnB-util1 {margin: 0 7px;} #header .btn-logout, #header .head-search [class*="btn-util"], #header .util-group [class*="btn-util"], #header .util-group [class*="btnB-util"] {width: 35px; height: 35px; text-indent: -9999px; background-position: center center; background-repeat: no-repeat; background-size: auto 19px; border-radius: 4px;} #header .btn-logout:hover, #header .head-search [class*="btn-util"]:hover, #header .util-group [class*="btn-util"]:hover {background-color: rgba(255,255,255,.2);} #header .util-group .btn-util2 {background-image: url(../images/ico/ico-b2b.png); background-size: auto;} #header .util-group .btn-util3 {background-image: url(../images/ico/ico-util3.png); background-size: auto;} #header .util-group .btn-util4 {background-image: url(../images/ico/ico-util4.png); background-size: auto;} #header .util-group .btn-util5 {background-image: url(../images/ico/ico-util5.png); background-size: auto;} #header .util-group .btn-util6 {background-image: url(../images/ico/ico-util6.png); background-size: auto;} #header .util-group .btn-util7 {background-image: url(../images/ico/ico-util7.png); background-size: auto;} #header .util-group .btn-util8 {background-image: url(../images/ico/ico-util8.png); background-size: auto;} #header .util-group .btn-util6, #header .util-group .btn-util7{ position: relative;} #header .util-group .btn-util6 .num, #header .util-group .btn-util7 .num{ width: 21px; height: 21px; background-color: #ff0000; font-size: 10px; text-align: center; text-indent: 0; color: #fff; line-height: 21px; display: inline-block; border-radius: 50%; position: absolute; top: -6px; right: -8px;} #header .head-center .search-box.type-head {max-width: 797px; width: 84%; display: flex; justify-content: center; align-items: center;} #header .head-center .search-box.type-head .select, #header .head-center .search-box.type-head .input, #header .head-center .search-box.type-head .btn-ix {border: 2px solid #f5b052; background-color: #eff3f3; min-width: 38px; height: 37px; border-radius: 3px; margin: 0 3px; color: #777; font-size: 13px; font-weight: 400;} #header .head-center .search-box.type-head .select {width: 106px; padding: 0 30px 0px 22px;} #header .head-center .search-box.type-head .input {flex: 1; padding: 0 4%; margin: 0 5px 0 5px;} #header .head-center .search-box.type-head .btn-ix {width: 37px; padding: 0 !important;} #header .head-center .search-box.type-head .btn-ix.btnSearch {} #header .head-center .search-box.type-head .btn-ix.btnMore {} #header .head-center .search-box.type-head .select + .input {margin-left: 9px;} #header .head-center .search-box.type-head > *:first-child {margin-left: 0;} #header .head-center .search-box.type-head > *:last-child {margin-right: 0;} #header .head-center .search-box.type-head .select:hover, #header .head-center .search-box.type-head .input:hover {border-color: #ffa020;} #header .head-center .search-box.type-head .select:focus, #header .head-center .search-box.type-head .input:focus {border-color: #ffa020; background-color: #fff;} #header .moBtn{ width: 33px; height: 33px; display: none; position: absolute;} #header .moBtn.open{ background-color: #000; border-radius: 4px;} #header .moBtn.open:hover{ background-color: #6d85c1;} #header .moBtn.open span{ width: 22px; height: 2px; background-color: #fff; text-indent: -9999px; margin: -1px 0 0 -14px; display: inline-block; position: absolute; top: 50%; left: 50%;} #header .moBtn.open span::before{ width: 100%; height: 2px; background-color: #fff; content: ''; position: absolute; top: -7px; left: 0;} #header .moBtn.open span::after{ width: 100%; height: 2px; background-color: #fff; content: ''; position: absolute; bottom: -7px; left: 0;} #header .moBtn.close{ background-color: #3a528e; text-indent: -9999px; border-radius: 4px;} #header .moBtn.close:hover{ background-color: #6d85c1;} #header .moBtn.close::before{ width: 1px; height: 21px; background-color: #fff; content: ''; margin: -11px 0 0 -1px; position: absolute; top: 50%; left: 50%; transform: rotate(45deg);} #header .moBtn.close::after{ width: 21px; height: 1px; background-color: #fff; content: ''; margin: -1px 0 0 -11px; position: absolute; top: 50%; left: 50%; transform: rotate(45deg);} #moMenu{ display: flex; flex: 1; justify-content: space-between;} #header .moMenuBg{ display: none;} #header .inner{ width: 100%; padding: 0; display: flex; justify-content: space-between;} #header .inner .sb-l, #header .inner .sb-r{ display: flex; align-items: center;} #header .head-top-box{ height: 61px; background-color: #000; padding: 15px 35px; border-bottom: 1px solid #323232;} #header .head-top-box .sb-l .select1{ width: 100%; height: 35px; background: url(../../front/images/ico/ico-sel-12-6.png) no-repeat right 10px center; background-color: transparent; font-weight: 600; font-size: 16px; color: #b7b7b7; padding: 0 22px 0 10px; border: 0;} #header .head-top-box .sb-r > * + *{ margin-left: 37px !important; position: relative !important;} #header .head-top-box .sb-r > * + *::before{ width: 1px; height: 35px; background-color: #b7b7b7; content: ''; margin: -18px 0 0 0; position: absolute; top: 50%; left: -19px;} #header .head-top-box .delivery-info-box{ height: 28px; background: url(../../front/images/ico/ico-delivery-39-28.png) no-repeat right center transparent; padding: 5px 50px 5px 0; margin: 0; border: 0; border-radius: 0; position: static; top: auto; right: auto; bottom: auto; left: auto;} #header .head-top-box .delivery-info-box .txt{ font-weight: 400; font-size: 16px; color: #b7b7b7; line-height: 20px;} #header .head-top-box .user-box .txt{ font-weight: 400; font-size: 16px; color: #b7b7b7; line-height: 20px;} #header .head-top-box .util-box{ display: flex;} #header .head-body-box{ width: auto; position: absolute; top: 75px; left: 109px; right: 109px; z-index: 1;} #header .head-body-box .logo{ width: 455px; height: 76px; background: url(../images/common/logo-455-76.png) no-repeat center center;} #header .head-body-box .sb-r{ flex: 1;} #header .head-body-box .head-center{ width: 100%; padding: 0 0 0 10%;} #header .head-body-box .gnb-group{ justify-content: space-between;} #header .head-body-box .gnb-group li{ padding: 5px 0;} #header .head-body-box .gnb-group a{ font-size: 18px; padding: 0;} #header .head-body-box .gnb-group a:hover{ background-color: transparent; text-decoration: underline;} #quick-right{ height: 100%; position: fixed; top: 0; right: 0; z-index: 999;} #quick-right > input{ position: absolute; top: 0; left: -9999px;} #quick-right > input[type=checkbox]:checked ~ .cart-box{ display: flex;} #quick-right > input[type=checkbox]:checked ~ .ws-cart-box, #quick-right > input[type=checkbox]:checked ~ .cartOpen{ display: none;} #quick-right .ws-cart-box{ position: absolute; bottom: 110px; right: 16px; transition: bottom 0.5s;} #quick-right .ws-cart-box > input{ position: absolute; top: 0; left: -9999px;} #quick-right .ws-cart-box .cartOpen{ width: 56px; height: 56px; background: url(../../front/images/ico/ico-quick-cart.png) no-repeat center center #ff5900; background-size: auto 20px; text-indent: -9999px; margin:0; display: inline-block; border: 1px solid #e65203; border-radius: 50%; box-shadow: 2px 2px 3px 1px #8d8d8d; cursor: pointer;} #quick-right .ws-cart-box .cartOpen:hover{ background-color: #ff7600;} #quick-right .cart-box{ width: 246px; height: auto; background-color: #fff; margin: 0; display: none; flex-direction: column; border: 1px solid #ccc; border-radius: 6px; position: absolute; right: 109px;} #quick-right .cart-box .box-btn{ display: flex; flex-direction: column; position: absolute; top: 10px; left: -15px;} #quick-right .cart-box .box-btn a{ width: 24px; height: 24px; background: no-repeat center center #333; text-indent: -9999px; display: inline-block; border-radius: 12px;} #quick-right .cart-box .box-btn a + a{ margin: 6px 0 0 0;} #quick-right .cart-box .box-btn .btn-close{ background-image: url(../images/ico/ico-cart-close.png);} #quick-right .cart-box .box-btn .btn-mini{ background-image: url(../images/ico/ico-cart-mini.png); display: none;} #quick-right .cart-box .box-btn .btn-full{ background-image: url(../images/ico/ico-cart-spread.png); display: none;} #quick-right .cart-box .box-btn2{ display: none; flex-direction: column; position: absolute; top: 0; left: -120px;} #quick-right .cart-box .box-btn2 a{ width: 54px; height: 42px; background: url(../images/ico/ico-cart-open.png) no-repeat center center #344e8f; text-indent: -9999px; border-radius: 6px;} #quick-right .cart-box .box-btn2 a + a{ margin: 6px 0 0 0;} #quick-right .cart-box .box-btn2 a.type2{ background-image: url(../images/ico/ico-cart-open2.png);} #quick-right .cart-box .box-head .tit{ font-weight: 700; font-size: 14px; color: #333; line-height: 42px; padding: 0 24px;} #quick-right .cart-box .box-foot{ padding: 0 7px 11px 7px; justify-content: space-between;} #quick-right .cart-box .box-foot .txt, #quick-right .cart-box .box-foot .detail, #quick-right .cart-box .box-foot .price .box-full{ display: none;} #quick-right .cart-box .box-foot .total{ display: flex; flex-direction: column;} #quick-right .cart-box .box-foot .total .txt{ font-size: 11px; line-height: 13px; margin: 8px 0 0 0; display: block;} #quick-right .cart-box .box-foot .total .txt a{ color: #536dae; text-decoration: underline; display: inline-block;} #quick-right .cart-box .box-foot .price dl{ height: 40px; background-color: #333; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; border-radius: 6px;} #quick-right .cart-box .box-foot .price dt{ font-weight: 400; font-size: 14px; color: #fff; line-height: 19px;} #quick-right .cart-box .box-foot .price dt .box-mini{ font-size: 13px;} #quick-right .cart-box .box-foot .price dd{ font-weight: 400; font-size: 18px; color: #fab67c; line-height: 19px;} #quick-right .cart-box .box-foot .btn{ margin: 8px 0 0 0; display: flex; justify-content: space-between;} #quick-right .cart-box .box-foot .btn a{ height: 40px; background-color: #666; font-weight: 400; font-size: 13px; color: #fff; text-align: center; line-height: 15px; padding: 0 16px; display: flex; flex: 1; align-items: center; justify-content: center; border-radius: 6px;} #quick-right .cart-box .box-foot .btn a + a{ margin-left: 8px;} #quick-right .cart-box .box-body{ display: flex; flex-direction: column; flex: 1;} #quick-right .cart-box .list-head{ height: 40px; background-color: #F28F33; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #DF630F; border-bottom: 1px solid #DF630F;} #quick-right .cart-box .list-head .chk{ display: flex; align-items: center;} #quick-right .cart-box .list-head .chkBox{ padding: 0; margin: 0 2px 0 0;} #quick-right .cart-box .list-head .chkBox span{ font-size: 13px; color: #fff; line-height: 1; padding-left: 20px;} #quick-right .cart-box .list-head .chkBox span::before{ left: 0;} #quick-right .cart-box .list-head .btn-del{ width: 22px; height: 22px; background: url(../images/ico/ico-cart-del4.png) no-repeat center center; text-indent: -9999px; display: inline-block; border-radius: 3px;} #quick-right .cart-box .list-head .btn-del:hover{ background-color: #ab4906;} #quick-right .cart-box .list-head .info{ display: flex;} #quick-right .cart-box .list-head .info .count{ font-weight: 300; font-size: 13px; color: #fff; line-height: 13px;} #quick-right .cart-box .list-head .info .count + .count{ margin-left: 8px; position: relative;} #quick-right .cart-box .list-head .info .count + .count::before{ width: 1px; height: 10px; background-color: #898787; position: absolute; top: 2px; left: -10px;} #quick-right .cart-box .list-head .info .count strong{ font-weight: 500; color: #fff;} #quick-right .cart-box .list-body{ padding:0; flex: 1; position: relative;} #quick-right .cart-box .scroll-y{ padding: 5px 7px; position: absolute; top: 3px; right: 0; bottom: 3px; left: 0;} #quick-right .cart-box .list-body .item{ display: flex; flex-direction: column;} #quick-right .cart-box .list-body .item + .item{ margin: 16px 0 0 0;} #quick-right .cart-box .list-body .item .info{ height: 40px; background-color: #fff7f1; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; border-radius: 20px;} #quick-right .cart-box .list-body .item .info .name{ font-weight: 700; font-size: 13px; color: #333; line-height: 14px;} #quick-right .cart-box .list-body .item .info .count{ font-weight: 300; font-size: 13px; color: #fff; line-height: 14px; white-space: nowrap;} #quick-right .cart-box .list-body .item .info .txt{ font-size: 13px; color: #333; line-height: 14px; padding: 0 0 0 11px; position: relative;} #quick-right .cart-box .list-body .item .info .txt + .txt{ margin-top: 2px;} #quick-right .cart-box .list-body .item .info .txt::before{ width: 2px; height: 2px; background-color: #333; content: ''; margin: 6px 2px; border-radius: 50%; position: absolute; top: 0; left: 0;} #quick-right .cart-box .list-body .item .info.type-box, #quick-right .cart-box .list-body .item div.info{ height: auto; padding: 8px 10px; align-items: flex-start; flex-direction: column; border-radius: 8px;} #quick-right .cart-box .list-body .item .info.type-box { background: url(../../front/images/ico/ico-cart-delivery.png) no-repeat 5px 8px #fff7f1; font-weight: 300; padding-left: 26px; border: 1px solid #ffd4b5;} #quick-right .cart-box .list-body .item .info.type-count {height: auto; background-color: transparent; padding: 8px 4px; border-bottom: 1px solid #df630f; border-radius: 0;} #quick-right .cart-box .list-body .item .info.type-count .name, #quick-right .cart-box .list-body .item .info.type-count .count, #quick-right .cart-box .list-body .item .info.type-count .txt {color: #000;} #quick-right .cart-box .list-body .item .info.type-count .count {flex: 1; text-align: right;} #quick-right .cart-box .list-body .item .info + .info.type-count {margin-top: 4px;} #quick-right .cart-box .list-body .item .list{ padding: 19px 0 13px 0; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #ddd; position: relative;} #quick-right .cart-box .list-body .item .list .tire, #quick-right .cart-box .list-body .item .list .logo, #quick-right .cart-box .list-body .item .list .txt.n2, #quick-right .cart-box .list-body .item .list .won.n1, #quick-right .cart-box .list-body .item .list .review, #quick-right .cart-box .list-body .item .list .btn-Wahlen{ display: none;} #quick-right .cart-box .list-body .item .list .chk{ width: 16px; padding: 0; display: flex; align-items: center; position: relative; cursor: pointer;} #quick-right .cart-box .list-body .item .list .chk input{ position: absolute; top: 0; left: -9999px;} #quick-right .cart-box .list-body .item .list .chk span{ width: 14px; height: 14px; background-color: #fff; display: inline-block; border: 1px solid #ccc; border: 1px solid #ccc; border-radius: 2px;} #quick-right .cart-box .list-body .item .list .chk:hover span{ border-color: #000;} #quick-right .cart-box .list-body .item .list .chk input:checked + span{ background: url(../images/ico/ico-chk.png) no-repeat center center #fff;} #quick-right .cart-box .list-body .item .list .box{ display: flex; flex-direction: column;} #quick-right .cart-box .list-body .item .list .product{ display: flex; flex-wrap: wrap; justify-content: flex-end;} #quick-right .cart-box .list-body .item .list .txt{ width: calc(100% - 2px); margin: 0 0 0 2px; display: flex; flex-direction: column;} #quick-right .cart-box .list-body .item .list .txt.n3{ width: 100%;} #quick-right .cart-box .list-body .item .list .txt1{ font-weight: 700; font-size: 14px; color: #333; line-height: 16px; padding: 0;} #quick-right .cart-box .list-body .item .list .txt1::before{ display: none;} #quick-right .cart-box .list-body .item .list .txt2{ font-weight: 300; font-size: 13px; color: #666; line-height: 14px; margin: 2px 0 0 0;} #quick-right .cart-box .list-body .item .list .count{ margin: 8px 0 0 0; display: flex; justify-content: flex-end;} #quick-right .cart-box .list-body .item .list .spinner{ height: 24px; font-weight: 300; font-size: 12px; color: #333; line-height: 24px; padding: 0; display: flex; align-items: center;} #quick-right .cart-box .list-body .item .list .spinner input{ width: 40px; height: 24px; font-size: 13px; padding: 0 5px 0 0; margin: 0 15px;} #quick-right .cart-box .list-body .item .list .spinner .ui-spinner-button{ height: 100%;} #quick-right .cart-box .list-body .item .list .num, #quick-right .cart-box .list-body .item .list .won{ font-weight: 700; font-size: 14px; color: #555; line-height: 24px; white-space: nowrap; margin: 0 0 0 16px;} #quick-right .cart-box .list-body .item .list .btn-del{ width: 32px; height: 32px; background: url(../../front/images/ico/ico-cart-del.png) no-repeat center center; text-indent: -9999px; display: inline-block; position: absolute; bottom: 10px; left: 15px;} #quick-right .cart-box .list-body .item .list .btn-del:hover{ background-color: #eee; border-radius: 2px;} #quick-right .cart-box .list-body .item .list.acco-list{ padding: 8px 0; z-index: 0;} #quick-right .cart-box .list-body .item .list.acco-list, #quick-right .cart-box .list-body .item .list .acco-box{ width: 100%; display: flex; flex-direction: column;} #quick-right .cart-box .list-body .item .list .acco-box{ width: calc(100% + 14px); margin: 0 -7px;} #quick-right .cart-box .list-body .item .list .acco-box .acco-head{ border-bottom: 1px solid #d7e0e8; border-radius: 10px 10px 0 0; position: relative;} #quick-right .cart-box .list-body .item .list .acco-box .acco-head::before{ width: 100%; background-color: #9DA3B0; content: ''; border-radius: 14px; position: absolute; top: -2px; bottom: 11px; left: 0; z-index: -1;} #quick-right .cart-box .list-body .item .list .acco-box + .acco-box{ margin-top: 2px;} #quick-right .cart-box .list-body .item .list .acco-head{ height: 52px; background-color: #f1f1f1; padding: 0 0 0 7px; display: flex; align-items: center;} #quick-right .cart-box .list-body .item .list .acco-btn{ background: url(../../front/images/ico/ico-cart-accoDown.png) no-repeat right 15px center; padding: 10px 34px 10px 0; margin: 0 0 0 2px; flex: 1;} #quick-right .cart-box .list-body .item .list .acco-btn span{ font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: -0.5px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;} #quick-right .cart-box .list-body .item .list .acco-con{ background-color: #F5F7F8; padding: 7px; margin-bottom: 2px; display: none; border-radius: 0 0 10px 10px; position: relative;} #quick-right .cart-box .list-body .item .list .acco-con::after{ width: 100%; background-color: #9DA3B0; content: ''; border-radius: 14px; position: absolute; top: 11px; bottom: -2px; left: 0; z-index: -1;} #quick-right .cart-box .list-body .item .list .acco-con .count{ padding: 0 0 0 24px; margin: 0 0 8px 0;} #quick-right .cart-box .list-body .item .list .acco-con .count .tit{ font-size: 13px; line-height: 24px; flex: 1;} #quick-right .cart-box .list-body .item .list .acco-con .count .won{ margin-left: 10px;} #quick-right .cart-box .list-body .item .list .acco-con .product{ padding: 10px 0 0 0; border-top: 1px solid #4B6AAD; position: relative;} #quick-right .cart-box .list-body .item .list .acco-con .product + .product{ border-color: #D7E0E8;} #quick-right .cart-box .list-body .item .list .acco-con .product .count{ margin-top: 10px;} #quick-right .cart-box .list-body .item .list .acco-con .won{ font-size: 14px; color: #333;} #quick-right .cart-box .list-body .item .list .acco-con .btn-del{ bottom: 0; left: 19px;} #quick-right .cart-box .list-body .item .list .acco-box.active .acco-btn{ background-image: url(../../front/images/ico/ico-cart-accoUp.png);} html.cartOpen #quick-right{ z-index: 9999;} html.cartOpen #quick-right .cart-box{ z-index: 9;} html.cartSpread #quick-right .cart-box .box-btn .btn-mini{ display: inline-block;} html.cartSpread #quick-right .cart-box .box-btn .btn-full{ display: none;} html.cartSpread #quick-right .cart-box .box-btn2{ display: flex;} html.cartSpread #quick-right .cart-box .box-foot{ padding: 32px 77px 16px 0; margin: 24px 13px 0 60px; display: flex; border-top: 1px solid #ccc;} html.cartSpread #quick-right .cart-box .box-foot .txt{ display: inline-block;} html.cartSpread #quick-right .cart-box .box-foot .txt dl{ padding: 0 0 0 32px; display: flex; flex-direction: column;} html.cartSpread #quick-right .cart-box .box-foot .txt dt{ font-weight: 700; font-size: 16px; color: #555; line-height: 14px; position: relative;} html.cartSpread #quick-right .cart-box .box-foot .txt dt::before{ width: 6px; height: 6px; background-color: #5974b6; content: ''; border-radius: 3px; position: absolute; top: 4px; left: -20px;} html.cartSpread #quick-right .cart-box .box-foot .txt dd{ font-weight: 300; font-size: 11px; color: #777; line-height: 19px; margin: 16px 0 0 0; display: inline-block;} html.cartSpread #quick-right .cart-box .box-foot .txt dd a{ color: #536dae; text-decoration: underline;} html.cartSpread #quick-right .cart-box .box-foot .total{ width: 299px;} html.cartSpread #quick-right .cart-box .box-foot .detail{ padding: 0 24px; display: flex; flex-direction: column;} html.cartSpread #quick-right .cart-box .box-foot .detail dl{ display: flex; align-items: center; justify-content: space-between;} html.cartSpread #quick-right .cart-box .box-foot .detail dt, html.cartSpread #quick-right .cart-box .box-foot .detail dd{ font-weight: 700; font-size: 16px; color: #555; line-height: 26px;} html.cartSpread #quick-right .cart-box .box-foot .price{ padding-top: 20px; margin: 24px 0 0 0; border-top: 1px solid #ccc;} html.cartSpread #quick-right .cart-box .box-foot .price dl{ height: auto; background-color: transparent; display: flex; align-items: center; justify-content: space-between;} html.cartSpread #quick-right .cart-box .box-foot .price dt{ font-weight: 700; font-size: 16px; color: #555; line-height: 26px;} html.cartSpread #quick-right .cart-box .box-foot .price dd{ font-weight: 700; font-size: 21px; color: #ed6b02; line-height: 26px;} html.cartSpread #quick-right .cart-box .box-foot .price .box-mini{ display: inline-block;} html.cartSpread #quick-right .cart-box .box-foot .price .box-full, html.cartSpread #quick-right .cart-box .box-foot .btn .btn-Details{ display: none;} html.cartSpread #quick-right .cart-box .box-foot .btn a{ width: 100%; height: 70px; background-color: #333; font-weight: 400; font-size: 16px; color: #fab67c; line-height: 24px; margin: 32px 0 0 0; display: flex; align-items: center; justify-content: center; border-radius: 6px;} html.cartSpread #quick-right .cart-box .list-body .item .list{ padding: 19px 0 0 104px; flex-wrap: nowrap; border-bottom: 0;} html.cartSpread #quick-right .cart-box .list-body .item .list + .list{ padding-top: 0; margin: 8px 0 0 0;} html.cartSpread #quick-right .cart-box .list-body .item .list .chk{ width: 104px; height: 100%; justify-content: center; position: absolute; top: 19px; left: 0;} html.cartSpread #quick-right .cart-box .list-body .item .list .chk + .box{ flex-direction: column;} html.cartSpread #quick-right .cart-box .list-body .item .list .box{ padding: 20px 32px; flex-direction: row; flex: 1; border: 1px solid #ccc; border-radius: 6px; position: relative;} html.cartSpread #quick-right .cart-box .list-body .item .list .product{ flex-wrap: nowrap; justify-content: flex-start; position: relative;} html.cartSpread #quick-right .cart-box .list-body .item .list .tire{ width: 40px; height: 59px; background: no-repeat center center; background-size: contain; margin: 0 40px 0 32px; display: inline-block;} html.cartSpread #quick-right .cart-box .list-body .item .list .txt{ width: auto; margin: 0; display: flex; flex-direction: column;} html.cartSpread #quick-right .cart-box .list-body .item .list .logo{width: 100%; height: 17px; background: no-repeat left center; background-size: auto 17px; display: inline-block;} html.cartSpread #quick-right .cart-box .list-body .item .list .txt1{ font-weight: 700; font-size: 11px; color: #555; line-height: 16px; padding: 0; margin: 4px 0 0 0; display: flex;} html.cartSpread #quick-right .cart-box .list-body .item .list .txt1::before{ display: none;} html.cartSpread #quick-right .cart-box .list-body .item .list .txt2{ font-weight: 400; font-size: 10px; color: #777; line-height: 12px;} html.cartSpread #quick-right .cart-box .list-body .item .list .txt.n2{ padding: 17px 0 0 0; margin-left: 24px; display: inline-block;} html.cartSpread #quick-right .cart-box .list-body .item .list .btn-del{ width: 46px; height: 46px; background: url(../images/ico/ico-cart-del3.png) no-repeat center center #f7f7f7; text-indent: -9999px; margin: -29px 0 0 0; display: inline-block; border: 1px solid #ccc; border-radius: 6px; top: 50%; right: 0;} html.cartSpread #quick-right .cart-box .list-body .item .list .count{ margin: 0 112px 0 0; flex: 1; align-items: center;} html.cartSpread #quick-right .cart-box .list-body .item .list .btn-Wahlen{ width: 88px; height: 38px; background-color: #009ae1; font-weight: 300; font-size: 11px; color: #fff; text-align: center; line-height: 38px; margin: -24px 0 0 0; display: inline-block; border-radius: 6px; position: absolute; top: 50%; right: 32px;} html.cartSpread #quick-right .cart-box .list-body .item .list .spinner{ background: url(../images/ico/ico-cart-spinner.png) no-repeat right center; font-weight: 300; font-size: 12px; color: #333; line-height: 24px; padding: 0; margin: 0 40px;} html.cartSpread #quick-right .cart-box .list-body .item .list .spinner input{ width: 40px; height: 40px; font-weight: 500; font-size: 14px; color: #333; text-align: center; padding: 0 0 0 0; margin-right: 12px; border: 1px solid #ccc;} html.cartSpread #quick-right .cart-box .list-body .item .list .spinner .ui-spinner-button{ height: 20px; display: flex; align-items: center;} html.cartSpread #quick-right .cart-box .list-body .item .list .won{ font-weight: 700; font-size: 16px; color: #555; line-height: 24px;} html.cartSpread #quick-right .cart-box .list-body .item .list .won.n1{ display: inline-block;} html.cartSpread #quick-right .cart-box .list-body .item .list .review{ padding: 16px 0 0 0; margin: 16px 0 0 0; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ccc;} html.cartSpread #quick-right .cart-box .list-body .item .list .review input{ width: auto; height: 32px; font-weight: 300; font-size: 13px; color: #666; line-height: 30px; padding: 0 32px; margin-right: 96px; display: inline-block; flex: 1; border: 1px solid #ccc; border-radius: 2px;} html.cartSpread #quick-right .cart-box .list-body .item .list .review a{ width: 154px; height: 40px; background-color: #333; font-weight: 300; font-size: 10px; color: #fff; text-align: center; line-height: 40px; display: inline-block; border-radius: 2px;} #quick-right .mov-kontakt{ width: 56px; height: 56px; background-color: #ff5900; display: flex; align-items: center; justify-content: center; border: 1px solid #e65203; border-radius: 28px; box-shadow: 2px 2px 3px 1px #8d8d8d; position: absolute; bottom: 40px; right: 16px; transition: bottom 0.5s;} #quick-right .mov-kontakt .ico{ width: 24px; height: 24px; background: url(../../front/images/ico/ico-cart-chat.png) no-repeat center center;} #quick-right .mov-kontakt .txt{ font-size: 12px; color: #fff; margin-left: 5px; display: none;} #quick-right .mov-kontakt:hover{ width: 100px; background-color: #ff7600;} #quick-right .mov-kontakt:hover .txt{ display: inline-block;} #quick-bottom{ width: 100%; background-color: #fff2e7; padding: 0; display: none; align-items: center; flex-direction: column; border-top: 1px solid #ee7203; box-shadow: 0px -1px 4px 4px #d9d9d9; position: fixed; bottom: 0; left: 0; z-index: 99;} #quick-bottom .btn-page{ width: 100%; padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; border-radius: 0;} #quick-bottom .btn-page .input1.input-kommission{ width: 100%; margin: 0 0 10px 0;} #quick-bottom .btn-page button{ height: 48px; background-color: #222; padding: 0 32px; display: flex; align-items: center; justify-content: center; border-radius: 2px;} #quick-bottom .btn-page button:hover{ background-color: #111;} #quick-bottom .btn-page button.type2{ background-color: #ff5900;} #quick-bottom .btn-page button.type2:hover{ background-color: #ff7600;} #quick-bottom .btn-page button .ico{ width: 16px; height: 16px; background: no-repeat center center; margin: 0 4px; position: relative;} #quick-bottom .btn-page button .ico::before{ content: ''; border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; top: 50%; left: 50%;} #quick-bottom .btn-page button .ico.ico-prev::before{ margin: -7px 0 0 -5px; border-right: 10px solid #fff;} #quick-bottom .btn-page button .ico.ico-next::before{ margin: -7px 0 0 -5px; border-left: 10px solid #fff;} #quick-bottom .btn-page button .txt{ font-size: 13px; color: #fff; line-height: 16px; margin: 0 4px;} #quick-bottom .btn-page .select1{ max-width: 160px; height: 48px; background-image: url(../../front/images/ico/ico-sel5-off.png); background-color: #222; color: #fff; border-color: #222; border-radius: 2px; cursor: pointer;} #quick-bottom .btn-page .select1:hover{ background-color: #111;} #quick-bottom .btn-page button + button, #quick-bottom .btn-page button + .select1, #quick-bottom .btn-page .select1 + button{ margin: 0 0 0 8px;} #quick-bottom .total-price{ padding: 20px 0 0 0; display: flex; align-items: center; justify-content: center;} #quick-bottom .total-price > div{ height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;} #quick-bottom .total-price > div + div{ padding-left: 24px; margin-left: 24px; border-left: 1px solid #ccc;} #quick-bottom .total-price .info{ width: 400px;} #quick-bottom .total-price .info dl{ width: 100%; display: flex;} #quick-bottom .total-price .info dl + dl{ margin: 4px 0 0 0;} #quick-bottom .total-price .info dt{ width: 200px; font-weight: 500; font-size: 11px; color: #222; line-height: 16px; display: flex;} #quick-bottom .total-price .info dt::before{ width: 3px; height: 3px; background-color: #222; content: ''; margin: 6px 3px; border-radius: 50%;} #quick-bottom .total-price .info dd{ font-size: 11px; color: #222; line-height: 16px; flex: 1;} #quick-bottom .total-price .qty .spinner{ width: 80px;} #quick-bottom .total-price .qty .spinner .ui-spinner{ background-color: transparent;} #quick-bottom .total-price .qty .spinner input{ width: 100%; height: 32px; background-color: #fff; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 14px; padding: 0 8px; margin: 0 20px;} #quick-bottom .total-price .qty .spinner .ui-spinner-button{ display: flex; align-items: center; justify-content: center; border-radius: 0;} #quick-bottom .total-price .qty .spinner .ui-button .ui-icon{ background: none; color: #222; text-indent: 0; border-radius: 0;} #quick-bottom .total-price .qty .spinner .ui-spinner-button.ui-state-hover .ui-icon{ color: #000;} #quick-bottom .total-price .price p{ font-size: 19px; color: #222; line-height: 24px;} #quick-bottom .total-price .total{ display: flex; align-items: flex-end;} #quick-bottom .total-price .total p{ font-size: 24px; color: #222; line-height: 29px;} #quick-bottom .total-price .total p + span{ margin: 4px 0 0 0;} #quick-bottom .total-price .total span{ font-size: 11px; color: #222; line-height: 16px;} html.quickPage #quick-bottom{ display: flex;} #visual{ background: url(../images/common/visual-bg.png) no-repeat center top #010103; background-size: cover; display: flex; flex-direction: column;} #visual .inner{ padding: 100px 109px 35px 109px; display: flex; justify-content: space-between; position: relative;} #visual .inner .search-fixed{ position: absolute; bottom: 5px; right: 109px; z-index: 1;} #visual .inner .search-fixed label{ position: relative; cursor: pointer;} #visual .inner .search-fixed input{ position: absolute; top: 0; left: -9999px;} #visual .inner .search-fixed span{ font-weight: 400; font-size: 16px; color: #fff; line-height: 18px; padding: 0; display: flex;} #visual .inner .search-fixed span::after{ width: 32px; height: 20px; background-color: #323232; content: ''; margin: 0 0 0 6px; border-radius: 10px;} #visual .inner .search-fixed span::before{ width: 12px; height: 12px; background-color: #fff; content: ''; border-radius: 6px; position: absolute; top: 4px; right: 15px; transition: right 0.3s;} #visual .inner .search-fixed input:checked ~ span::after{ background-color: #e9612c;} #visual .inner .search-fixed input:checked ~ span::before{ right: 6px;} #visual .visual-copy{ height: 45px; margin: 0; display: none;} #visual .visual-copy .txt{ font-weight: 700; font-size: 16px; color: #fff; text-align: center; line-height: 45px;} #visual .search-box{ padding: 0; margin: 0 0 0 0; display: flex; align-items: flex-end; flex: 1; position: relative;} #visual .search-box > .tab-box{ flex: 1;} #visual .search-box > .btn{ height: 54px; padding: 0 0 0 5px; display: flex; border-radius: 0 14px 14px 0;} #visual .search-box > .btn .search{ height: 52px; background: url(../../front/images/ico/ico-wheel-search.png) no-repeat 22px center #ff5900; background-size: auto 17px; font-weight: 400; font-size: 14px; color: #fff; line-height: 50px; padding: 0 26px 0 45px; flex: 1; border-radius: 6px;} #visual .search-box > .btn .search:hover{ background-color: #da7415;} #visual .tab-box > .tab-con .search-history-box{ width: 20px; height: 52px; position: absolute; bottom: 0; right: 0; z-index: 9999;} .search-history-box{ width: 20px; height: 52px;} .search-history-box > input{ position: absolute; top: 0; left: -9999px;} .search-history-box .search-history-btn{ width: 100%; height: 100%; text-indent: -9999px; display: inline-block; border-radius: 0 6px 6px 0; cursor: pointer;} .search-history-box .search-history-btn::before{ content: ''; display: inline-block; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} .search-history-box .search-history-btn:hover{ background-color: #da7415;} .search-history-box .search-history-list{ width: 300px; height: 300px; display: none; position: absolute; top: calc(100% + 2px); right: 0;} .search-history-box .search-history-list .box{ width: 100%; height: 100%; background-color: #fff; display: flex; flex-direction: column; border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 2px 3px 1px #f5f5f5;} .search-history-box .search-history-list .tit{ font-weight: 700; font-size: 16px; color: #f28f33; padding: 10px; border-bottom: 1px solid #ccc;} .search-history-box .search-history-list .con{ flex: 1; overflow-y: auto;} .search-history-box .search-history-list .con::-webkit-scrollbar {width: 4px; height: 4px;} .search-history-box .search-history-list .con::-webkit-scrollbar-track {background-color: #acacac; border-radius: 2px;} .search-history-box .search-history-list .con::-webkit-scrollbar-thumb {background-color: #575757; border-radius: 1px;} .search-history-box .search-history-list .list{ display: flex; flex-direction: column;} .search-history-box .search-history-list .item + .item{ border-top: 1px dashed #ccc;} .search-history-box .search-history-list .link{ width: 100%; font-size: 14px; line-height: 16px; padding: 10px;} .search-history-box .search-history-list .link:hover{ background-color: #f1f1f1; font-weight: 500;} .search-history-box > input:checked ~ .search-history-btn::before{ width: 15px; height: 1px; background-color: #fff; border: 0; transform: translate(-50%,-50%) rotate(45deg);} .search-history-box > input:checked ~ .search-history-btn::after{ width: 1px; height: 15px; background-color: #fff; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg);} .search-history-box > input:checked ~ .search-history-btn:hover{ background-color: #da7415;} .search-history-box > input:checked ~ .search-history-list{ display: inline-block;} #visual .search-box2{ width: 100%; padding: 0; margin: 0 auto; display: flex;} #visual .search-box2 .input{ height: 54px; padding: 0 0 0 18px; flex: 1; border-radius: 5px 0 0 5px;} #visual .search-box2 .btn-search{ width: 45px; height: 54px; background-color: #fff; text-indent: -9999px; padding: 0 5px 0 0; display: inline-block; border-radius: 0 5px 5px 0; position: relative;} #visual .search-box2 .btn-search::after{ width: 40px; height: 40px; background: url(../../front/images/ico/ico-search3.png)no-repeat center center #ff5900; background-size: 20px auto; content: ''; margin: -20px 0 0 0; border-radius: 24px; position: absolute; top: 50%; left: 0;} #visual .search-box2 .btn-search:hover::after{ background-color: #da7415;} #visual .search-box2 .listbox{ padding: 10px; margin: 2px 0 0 0; border-radius: 14px; box-shadow: 2px 2px 5px 0px #0000003d; z-index: 999;} #visual .search-box2 .listbox .scroll-y{ padding: 5px 10px;} #visual .search-box2 .listbox .sh-list{ display: flex; flex-direction: column;} #visual .search-box2 .listbox .listSH + .listSH{ border-top: 1px solid #f1f1f1;} #visual .search-box2 .listbox .link{ min-height: 40px; font-weight: 400; font-size: 16px; line-height: 18px; padding: 0 5px; display: flex; align-items: center;} #visual .search-box2 .listbox .link:hover{ background-color: #f5f5f5;} #visual .search-box3{ width: 360px; display: flex; flex-direction: column;} #visual .search-box3 .tit{ height: 24px; padding: 0 0 0 0; margin: 0 0 20px 0; display: flex; align-items: center;} #visual .search-box3 .tit h3{ font-weight: 500; font-size: 18px; color: #fff;} #visual .search-box3 .tit .tool-box{ margin: 0 0 0 10px; display: flex; align-items: center; position: relative; z-index: 9;} #visual .search-box3 .tit .tool-box .tool-btn{ width: 22px; height: 22px; background: url(../../front/images/ico/ico-b2c.png) no-repeat center center #6c6c6c; text-indent: -9999px; display: inline-block; border-radius: 11px;} #visual .search-box3 .tit .tool-box .tool-con{ width: 800px; background-color: #fff; padding: 20px; border: 1px solid #000; border-radius: 10px; box-shadow: 2px 2px 10px 0px #000000bd; position: absolute; top: -99999px; left: 22px;} #visual .search-box3 .tit .tool-box .guide-detail dt{ padding-top: 0;} #visual .search-box3 .tit .tool-box .tool-close{ display: none;} #visual .search-box3 .tit .tool-box .tool-btn:hover + .tool-con{ top: 0;} #visual .tab-box > .tab-btn{ padding: 0 0 0 0; margin: 0 0 20px 0; display: flex; justify-content: space-between;} #visual .tab-box > .tab-btn > a{ height: 24px; font-weight: 500; font-size: 16px; color: #fff; line-height: 24px;} #visual .tab-box > .tab-btn > a:hover, #visual .tab-box > .tab-btn > a.active{ border-bottom: 2px solid #fff;} #visual .tab-box > .tab-con{ height: 54px; padding: 0; display: none; border-radius: 14px 0 0 14px;} #visual .tab-box > .tab-con.active{ display: block;} #visual .tab-box2{ display: flex;} #visual .tab-box2 > .tab-btn{ background-color: #f1f1f1; padding: 6px; display: flex; border-radius: 25px;} #visual .tab-box2 > .tab-btn a{ background-color: #f1f1f1; font-size: 13px; color: #333; line-height: 38px; padding: 0 16px; margin: 0; border-radius: 19px;} #visual .tab-box2 > .tab-btn a + a{ margin-left: 3px;} #visual .tab-box2 > .tab-btn a:hover{ background-color: #ddd; text-decoration: underline;} #visual .tab-box2 > .tab-btn a.active{ background-color: #344e8f; color: #fff;} #visual .tab-box2 > .tab-con{ margin: 0 0 0 8px; display: none; flex: 1;} #visual .tab-box2 > .tab-con.active{ display: block;} #visual .ws-search-box{ padding: 0; border: 0; border-radius: 0;} #visual .ws-search-box .form > dl{ flex: 1; overflow: hidden; position: relative;} #visual .ws-search-box .form > dl:first-child{ border-radius: 6px 0 0 6px;} #visual .ws-search-box .form > dl:last-child{ border-radius: 0 6px 6px 0;} #visual .ws-search-box .form > dl + dl{ margin-left: 5px;} #visual .ws-search-box .form > dl.dl-type2{ flex: none; border-radius: 0 6px 6px 0;} #visual .ws-search-box .form > dl.dl-type2 select:first-child{ width: 184px; flex: none !important;} #visual .ws-search-box .form > dl.dl-type2 select + select{ margin-left: 4px;} #visual .ws-search-box .form > dl.dl-type2.col2{ width: calc((100% - 155px - 4px - 4px - 4px - 4px - 8px) / 6 * 2);} #visual .ws-search-box .form > dl.dl-type2.col3{ width: calc((100% / 7) * 3);} #visual .ws-search-box .form > dl.salson{ width: 147px; flex: none;} #visual .ws-search-box .form dt{ font-weight: 400; margin: 0; position: absolute; top: 5px; left: 16px;} #visual .ws-search-box .form dt::before{ display: none;} #visual .ws-search-box .form .select1{ width: 100%; height: 52px; background-image: url(../../front/images/ico/ico-sel4.png); background-position: calc(100% - 16px) center; background-color: #f6f7fb; line-height: 16px; padding: 24px 32px 4px 16px; border: 0; border-radius: 5px;} #visual .ws-search-box .form .select1:hover{ background-color: #eef0f5;} #visual .ws-search-box .form .input1{ width: 100%; height: 52px; background-color: #f6f7fb; line-height: 16px; padding: 24px 32px 4px 16px; border: 0; border-radius: 5px;} #visual .ws-search-box .form dl.salson{ border-radius: 0;} #visual .ws-search-box .form .salson dt{ font-size: 0px; text-indent: -9999px; display: inline-block; opacity: 0; position: absolute; top: 0; left: -9999px;} #visual .ws-search-box .form .salson .chkWeather{ margin: 0; border-radius: 5px; overflow: hidden;} #visual .ws-search-box .form .salson .chkWeather label span{ width: 48px; height: 52px; background-color: #f6f7fb; border: 0; border-radius: 0;} #visual .ws-search-box .form .salson .chkWeather label:hover span{ background-color: #eef0f5;} #visual .ws-search-box .form .salson .chkWeather label + label{ margin-left: 2px;} #visual .ws-search-box .form .salson .chkWeather .weather1{ background-image: url(../../front/images/ico/ico-weather1n1.png);} #visual .ws-search-box .form .salson .chkWeather .weather2{ background-image: url(../../front/images/ico/ico-weather2.png);} #visual .ws-search-box .form .salson .chkWeather .weather3{ background-image: url(../../front/images/ico/ico-weather3.png);} #visual .ws-search-box .form .salson .chkWeather input:checked + .weather1{ background-image: url(../../front/images/ico/ico-weather1-onn1.png);} #visual .ws-search-box .form .salson .chkWeather input:checked + .weather2{ background-image: url(../../front/images/ico/ico-weather2-on.png);} #visual .ws-search-box .form .salson .chkWeather input:checked + .weather3{ background-image: url(../../front/images/ico/ico-weather3-on.png);} #visual .ws-search-box .search-reifen, #visual .ws-search-box .search-felgen{ display: none;} #visual .acco-box{ min-height: 24px; background-color: #323232; padding: 20px 30px; display: flex; flex-direction: column; border-radius: 10px; position: relative;} #visual .acco-box.search1{ width: 360px;} #visual .acco-box.search2{ margin-left: 30px; flex: 1;} #visual .acco-box .acco-head{ position: absolute; top: 0; right: 0; z-index: 1;} #visual .acco-box .acco-body{ display: none;} #visual .acco-box .acco-btn{ display: flex;} #visual .acco-box .acco-btn span{ width: 24px; height: 24px; background: no-repeat center center; text-indent: -9999px;} #visual .acco-box .acco-btn .open{ background-image: url(../../front/images/ico/ico-sel5-off.png); display: flex;} #visual .acco-box .acco-btn .close{ background-image: url(../../front/images/ico/ico-sel5-on.png); display: none;} #visual .acco-box.active .acco-btn .open{ display: none;} #visual .acco-box.active .acco-btn .close{ display: flex;} #visual .search-box3.acco-box .acco-body{ flex-direction: column;} #visual .acco-box .acco-head{ display: none;} #visual .acco-box .acco-body{ display: flex;} .searchFixed #header{ position: fixed; top: 0; left: 0; z-index: 999;} .searchFixed #visual{ box-shadow: 0px -5px 10px 2px #000; position: fixed; top: 61px; right: 0; left: 0; z-index: 99;} .searchFixed #header-notice:not([style*="display:none"], [style*="display: none"]) ~ #visual{ top: 126px !important;} #contents{ display: flex; flex-direction: column; flex: 1;} #contents .inner{ padding: 0 109px; display: flex; flex-direction: column;} #contents .inner2{ width: 1464px; margin: 0 auto; display: flex; flex-direction: column;} #contents .contents-sub{ padding: 16px 0 37px 0; display: flex; flex-direction: column; flex: 1;} #contents .contents-sub .sub-head{ text-align: center; padding: 0 60px; margin: 0 0 8px 0;} #contents .contents-sub .sub-head .tit{ background: url(../images/ico/ico-tit1.png) no-repeat left center; background-size: contain; font-weight: 700; font-size: 22px; color: #333; line-height: 32px; padding: 0 0 0 40px; display: inline-block;} #contents .contents-sub .sub-head .tit.type-result{ background: none; font-weight: 700; font-size: 22px; color: #333; line-height: 32px; padding: 0;} #contents .contents-sub .sub-body{ flex: 1;} #contents.sub + #footer{ height: 107px; padding: 0 109px;} #ui-datepicker-div{ z-index: 99999 !important;} #footer { display: flex; justify-content: flex-end; align-items: center; padding: 40px 8px; border-top: 1px solid #cbcbcb;} #footer .link-group {display: flex; width: 100%; justify-content: flex-end; align-items: center;} #footer .link-group .link {color: #888; font-size: 13px; line-height: 14px; padding: 8px 24px; font-weight: 300 ;} .layout-filter-board{ display: flex; flex-direction: row;} .layout-filter-board.flex-col{ flex-direction: column;} .layout-filter-board .layout-board{ margin: 0 0 0 26px; display: flex; flex-direction: column; flex: 1;} /* B2C */ .b2c #header-notice{ width: 100%; height: 65px; background-color: #f47920; position: relative; z-index: 1; position: fixed; top: 0; left: 0; z-index: 999;} .b2c #header-notice .inner{ padding: 10px 109px;} .b2c #header-notice .txt{ font-weight: 400; font-size: 14px; text-align: center; display: flex; justify-content: center;} .b2c #header-notice .txt + .txt{ margin: 5px 0 0 0;} .b2c #header-notice .txt.type1{ font-size: 16px; color: #ffffff;} .b2c #header-notice .txt.type2{ font-size: 13px; color: #ffffff; line-height: 20px; display: flex; justify-content: center;} .b2c #header-notice .txt.type2::after{ width: 20px; height: 20px; background: url(../../front/images/ico/ico-b2c.png) no-repeat center center; content: ''; margin: 0 0 0 5px;} .b2c #header-notice + #header{ margin-top: 65px;} .b2c #header{ background-color: #5C6074;} .b2c #header .head-top-box{ background-color: #4E536C;} .b2c #header .delivery-info-box{ background-color: #4E536C; border-color: #4B5171;} .b2c #header .user-group{ background-color: #7B7F96;} .b2c #header .moBtn.open{ background-color: #5c6074;} .b2c #header .head-body-box .logo{ width: 295px; height: 48px; background-position: left center; background-size: auto 100%;} .b2c #visual{ background-image: url(../../front/images/b2c/b2c-search-bg.png); background-color: #5C6074;} .b2c #visual .inner{ padding-top: 75px;} .b2c .ws-filter-box{ background-color: #5C6074;} .b2c .ws-filter-box .box-head .tit, .b2c .ws-filter-box .acco-body{ background-color: #4D5161;} .b2c .ws-filter-box .acco-btn{ border-color: #4D5161;} .b2c .ws-filter-box.hide > .box-head .btn label{ background-color: #4d5161;} .b2c .layout-filter-board .ws-filter-box .box-head .btn{ background-color: #4d5161;} .b2c .step-list-box .item.active .btn{ background-color: #5C6074; border-color: #4d5161;} .b2c .step-list-box .item.active .num{ color: #666;} .b2c .ws-wheel-slider .total-price .total{ background-color: #5c6074;} .b2c .ws-board-list-box .list.acco-list .acco-head .preis .preis-sm{ font-weight: 300; font-size: 16px; color: #999; text-align: right; display: block;} .b2c .ws-board-list-box .list.acco-list .acco-body .acco-table .preis-sm{ font-weight: 300; font-size: 12px; color: #999; text-align: right; display: block;} .b2c .ws-filter-box .multiSelect2 .search .btn{ background-image: url(../../front/images/ico/ico-search4.png);} .b2c .ws-filter-box .multiSelect2 > .list::-webkit-scrollbar-thumb, .b2c .layout-filter-board .ws-filter-box .box-body::-webkit-scrollbar-thumb{ background-color: #2b2d35;} .b2c .ws-filter-box .multiSelect2 > .list::-webkit-scrollbar-track, .layout-filter-board .ws-filter-box .box-body::-webkit-scrollbar-track{ background-color: #5c6074;} @media (max-width: 1765px) { #header .gnb-group a{ padding: 4px 10px;} } @media (max-width: 1739px) { #deviceCk .device{ display: none;} #deviceCk .w1739{ display: block;} } @media (max-width: 1709px) { #header .gnb-group{ justify-content: flex-start;} #header .head-right{ padding-left: 52px;} } @media (max-width: 1622px) { .cookies-wrap{ padding: 50px 40px; justify-content: space-between;} .cookies-wrap .txt{ margin: 0 20px 0 0; flex: 1;} .cookies-wrap .btn a{ line-height: 1; padding: 10px 40px; display: inline-flex;} } @media (max-width: 1579px) { #header .head-body-box{ top: 80px;} #header .head-body-box .logo{ width: 300px; background-size: 300px auto;} #visual .inner{ padding-top: 120px;} } @media (max-width: 1499px) { #quick-right .cart-box{ right: 80px;} #header .head-body-box{ left: 80px; right: 80px;} #header .head-body-box .logo{ width: 260px; height: 44px; background-size: 260px auto;} #header .head-body-box .gnb-group a{ font-size: 16px;} #visual .inner{ padding-top: 80px; padding-left: 80px; padding-right: 80px;} #visual .inner .search-fixed{ right: 80px;} #contents .inner{ padding: 0 80px;} } @media (max-width: 1459px) { #deviceCk .device{ display: none;} #deviceCk .w1459{ display: block;} #quick-right .cart-box{ right: 40px;} #quick-right .ws-cart-box, #quick-right .mov-kontakt, .btn-topmove{ right: 10px;} html.cartOpen #contents .layout-filter-board{ padding-right: 256px;} } @media (max-width: 1439px) { #deviceCk .device{ display: none;} #deviceCk .w1439{ display: block;} #visual .inner{ padding-bottom: 50px; flex-direction: column;} #visual .inner .search-fixed{ bottom: 15px;} #visual .search-box::before{ display: none;} #visual .acco-box.search1, #visual .acco-box.search2{ padding: 15px;} #visual .acco-box.search1, #visual .search-box3{ width: 100%;} #visual .search-box3 .tit{ margin-bottom: 10px;} #visual .acco-box.search2{ margin: 10px 0 0 0;} #visual .tab-box > .tab-btn{ margin-bottom: 10px;} #visual .search-box{ margin: 0;} #quick-right .cart-box{ right: 20px;} html.cartOpen #contents .layout-filter-board{ padding-right: 216px;} } @media (max-width: 1359px) { html.cartOpen #contents .layout-filter-board{ padding-right: 0;} #header .delivery-info-box{ width: 42px; background-position: right 4px center; padding: 5px 20px;} #header .delivery-info-box .txt{ display: none;} #header .delivery-info-box:hover{ width: auto; background-position: right 15px center; padding: 5px 55px 5px 20px;} #header .delivery-info-box:hover .txt{ display: inline-block;} #header .head-top-box .delivery-info-box{ padding-right: 42px;} #header .head-body-box .logo{ width: 220px; height: 37px; background-size: 220px auto;} #header .head-body-box .head-center{ padding-left: 5%;} #visual .inner{ padding-top: 75px;} } @media (max-width: 1199px) { #deviceCk .device{ display: none;} #deviceCk .w1199{ display: block;} #header .head-center{ padding: 0 0 0 10px;} #header .head-right{ padding-left: 45px; padding-right: 20px;} #header .delivery-info-box{ right: 390px;} #header .user-group{ margin-left: 15px; margin-right: 0;} #header .util-group [class*="btn-util"]{ width: 30px;} #header .util-group li{ margin: 0;} #visual .search-box2 .input{ height: 45px;} #visual .search-box2 .btn-search{ width: 50px; height: 45px; padding: 0;} #visual .search-box2 .btn-search::after{ width: 36px; height: 36px; background-size: auto 20px; margin-top: -18px; left: 6px;} #quick-right .ws-cart-box .cartOpen{ width: 42px; height: 42px; background-image: none; position: relative;} #quick-right .ws-cart-box .cartOpen::before{ width: 26px; height: 26px; background: url(../../front/images/ico/ico-quick-cart.png) no-repeat -12px center; background-size: auto 20px; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #quick-right .cart-box{ right: 10px;} #quick-right .mov-kontakt{ width: 42px; height: 42px;} #contents .inner{ padding: 0 20px;} .layout-filter-board .ws-filter-box ~ .layout-board{ padding-left: 40px;} .btn-topmove{ width: 42px; height: 42px; background-position: center 6px; padding-top: 18px;} } @media (max-width: 1023px) { #wrap-login .login-wrap{ max-width: none; margin-left: -287px;} #wrap-login .login-wrap .info-bx{ margin-right: 0;} #wrap-login .login-wrap .quick-menu{ display: none;} .cookies-wrap{ padding: 20px 50px;} .cookies-wrap .btn{ flex-direction: column;} .cookies-wrap .btn a{ text-align: center; padding: 10px 20px; justify-content: center;} .cookies-wrap .btn a + a{ margin: 5px 0 0 0;} .cookies-wrap .close{ right: 0;} #deviceCk .device{ display: none;} #deviceCk .w1023{ display: block;} #header{ padding-top: 0; position: fixed; top: 0; left: 0; z-index: 999;} #header .head-top-box{ height: 49px; padding: 0 20px;} /* #header .head-top-box .sb-l .select1, */ #header .head-top-box .user-box, #header .head-top-box .util-box, #header .head-top-box .delivery-info-box::before{ display: none;} #header .head-top-box .util-box{ width: 290px; margin: 0 !important; position: fixed !important; top: 0; right: -300px; left: auto; transition: 0.3s right; z-index: 99;} #header .head-top-box .delivery-info-box{ padding-right: 50px; margin-right: 40px !important;} #header .head-body-box{ top: 0; right: 0; left: 0;} #header .head-body-box .logo{ width: 287px; height: 48px; background-size: auto 48px;} #header .delivery-info-box{ min-height: 38px; width: auto; height: auto; background-position: right 15px center; padding: 5px 55px 5px 20px; display: flex; align-items: center; border-radius: 10px; top: 5px; right: 65px;} #header .delivery-info-box .txt{ line-height: 22px; display: inline-block;} #header .moBtn.open{ width: 48px; height: 48px; display: inline-block; border-radius: 0; top: 0; right: 0;} #header .moBtn.open span{ margin-left: -11px;} #header ~ #visual{ margin-top: 48px;} #header .head-top-box .sb-l .select1 {background-color: #37549c; background-position-x: calc(100% - 12px); background-image: url(../../front/images/ico/ico-sel2.png); width: calc(100% - 90px); border-radius: 18px; border-color: transparent; color: #fff; position: absolute; top: 10px; border-radius: 18px; left: auto; right: -300px; width: 210px; opacity: 0; transition: opacity 0s 0s, right 0.15s 0.15s; z-index: 2;} .moOpen #header .head-top-box .sb-l:has( .select1) {z-index: 100;} .moOpen #header .head-top-box:has(.util-box.open) .sb-l .select1 { right: 70px; opacity: 1; transition: right 0.3s 0s, opacity 0.3s 0s;} #moMenu{ width: 290px; height: 100%; background-color: #4866b1; display: none; position: fixed; top: 0; right: -300px; z-index: 9; transition: 0.3s right;} .moOpen{ overflow-y: hidden;} .moOpen #header .head-top-box .util-box, .moOpen #moMenu{ display: inline-block;} .moOpen #header .head-top-box .util-box.open, .moOpen #moMenu.open{ right: 0;} .moOpen #header #moMenu .user-group{ max-width: none; width: 229px; background-color: #37549c; margin: 0; position: absolute; top: 10px; left: 10px;} .moOpen #header #moMenu .btn-logout{ width: 36px; height: 36px; background-color: #37549c; background-size: 15px auto !important; background-position: 8.5px center; border-radius: 50%; position: absolute; top: 10px; right: 10px;} .moOpen #header #moMenu .head-right{ padding: 0;} .moOpen #header #moMenu .util-group{ padding: 30px 30px 0 30px; flex-wrap: wrap; border-top: 1px solid #6c8de0; position: absolute; top: 54px; left: 10px; right: 10px;} .moOpen #header #moMenu .util-group li{ width: calc((100% - 20px) / 3); height: 60px; margin: 0; border: 1px solid #304373; border-radius: 10px;} .moOpen #header #moMenu .util-group li + li{ margin-left: 10px;} .moOpen #header #moMenu .util-group li:nth-child(3n + 1){ margin-left: 0;} .moOpen #header #moMenu .util-group li:nth-child(n + 4){ margin-top: 10px;} .moOpen #header #moMenu .util-group li [class*="btn-util"]{ width: 100%; height: 100%;} .moOpen #header #moMenu .head-center{ width: auto; padding: 0; border-top: 1px solid #6c8de0; position: absolute; top: 240px; left: 10px; right: 10px;} .moOpen #header #moMenu .head-center .gnb-group{ flex-direction: column;} .moOpen #header #moMenu .head-center .gnb-group li{ width: 100%; border-bottom: 1px solid #6c8de0;} .moOpen #header .moBtn.close{ width: 30px; height: 54px; background-color: #37549c; display: inline-block; border-radius: 0 0 0 4px; top: 0; right: 290px;} .moOpen #header #moMenu .head-center .gnb-group a{ width: 100%; padding: 10px;} .moOpen #header .moMenuBg{ width: 100%; height: 100%; background-color: #000; display: inline-block; opacity: 0.6; position: fixed; top: 0; left: 0;} .moOpen #quick-right{ z-index: 9;} .moOpen .promotion-tooltip, .moOpen .layout-filter-board .ws-filter-box{ z-index: 0;} .moOpen #header .head-top-box .util-box::before{ display: none;} .moOpen #header .head-top-box .util-group{ padding: 30px 30px 0 30px; flex-wrap: wrap; border-top: 1px solid #6c8de0; position: absolute; top: 54px; left: 10px; right: 10px;} .moOpen #header .head-top-box .util-group li{ width: calc((100% - 20px) / 3); height: 60px; margin: 0; border: 1px solid #304373; border-radius: 10px;} .moOpen #header .head-top-box .util-group li + li{ margin-left: 10px;} .moOpen #header .head-top-box .util-group li:nth-child(3n + 1){ margin-left: 0;} .moOpen #header .head-top-box .util-group li:nth-child(n + 4){ margin-top: 10px;} .moOpen #header .head-top-box .util-group li [class*="btn-util"]{ width: 100%; height: 100%;} .moOpen #header .head-top-box .btn-logout{ width: 36px; height: 36px; background-color: #37549c; background-size: 15px auto !important; background-position: 8.5px center; border-radius: 50%; position: absolute; top: 10px; right: 10px;} .moOpen #header .head-top-box .user-group{ max-width: none; width: 229px; background-color: #37549c; margin: 0; position: absolute; top: 10px; left: 10px;} #visual{ background-size: cover;} #visual .inner{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;} #visual .inner .search-fixed{ display: none; top: 16px;} #visual .inner .search-fixed span{ font-size: 14px;} #visual .acco-box .acco-head{ display: inline-block;} #visual .acco-box .acco-body{ display: none;} #visual .acco-box.active .acco-body{ display: flex;} #visual .acco-box.search1, #visual .acco-box.search2{ background-color: transparent; padding-top: 20px; padding-bottom: 0;} #visual .acco-box.search1.active, #visual .acco-box.search2.active{ background-color: #323232; padding: 20px 15px 15px 15px;} #visual .search-box3 .tit{ height: auto; margin-bottom: 5px;} #visual .search-box3 .tit h3{ font-size: 16px;} #visual .search-box3 .tit .tool-box .tool-btn:hover + .tool-con, #visual .search-box3 .tit .tool-box:not(.active) .tool-btn:hover + .tool-con{ top: -99999px;} #visual .search-box3 .tit .tool-box.active .tool-btn + .tool-con{ top: 0;} #visual .search-box3 .tit .tool-box .tool-close{ width: 20px; height: 20px; background: url(../../front/images/ico/ico-popup-close2.png) no-repeat center center #666; background-size: auto 8px; text-indent: -9999px; display: inline-block; border-radius: 10px; position: absolute; top: 0; left: -22px;} #visual .search-box2 .input{ height: 40px; border-radius: 10px 0 0 10px;} #visual .search-box2 .btn-search{ width: 40px; height: 40px; padding-right: 10px; border-radius: 0 10px 10px 0;} #visual .search-box2 .btn-search::after{ width: 30px; height: 30px; background-size: 18px auto; margin-top: -15px;} #visual .search-box2 .listbox{ border-radius: 10px;} #visual .tab-box > .tab-btn{ margin-bottom: 5px;} #visual .tab-box > .tab-con{ height: auto; padding: 5px 0; border-radius: 10px 10px 0 0;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl:first-child{ width: calc((100% - 15px) / 3) !important; flex: none;} #visual .ws-search-box .form > dl.dl-type2.col2{ width: calc(((100% - 8px) / 3) * 2 - 140px) !important;} #visual .ws-search-box .form > dl.dl-type2.col3{ width: calc(((100% - 8px) / 3) * 2 + 4px) !important;} #visual .ws-search-box .form > dl.salson{ width: 140px !important;} #visual .ws-search-box .form > dl.salson .chkWeather label{ flex: 1;} #visual .ws-search-box .form > dl.salson .chkWeather span{ width: 100%;} #visual .search-box > .btn{ border-radius: 0 10px 10px 0;} #visual .ws-search-box .form{ flex-wrap: wrap;} #visual .ws-search-box .form dt{ top: 2px;} #visual .ws-search-box .form .select1{ height: 45px; background-position: calc(100% - 10px) center; padding: 20px 25px 2px 16px;} #visual .ws-search-box .form .salson .chkWeather label span{ height: 45px;} #visual .ws-search-box .form .salson ~ .search-reifen{ width: calc((100% - 8px) / 3); margin: 4px 0 0 0; flex: none;} #visual .ws-search-box .form .salson ~ .search-reifen + .search-reifen{ margin-left: 4px;} #visual .search-box{ flex-direction: column;} #visual .search-box > .tab-box{ width: 100%;} #visual .tab-box > .tab-con .tab-btn a{ line-height: 30px;} #visual .tab-box > .tab-con .ws-search-box .form .input1{ height: 45px;} #visual .search-box > .btn{ width: 100%; height: 35px; padding: 0 0 0 0; border-radius: 0 0 10px 10px;} #visual .search-box > .btn .search{ width: 100%; height: 35px; background-image: none; display: flex; align-items: center; justify-content: center;} #visual .search-box > .btn .search::before{ width: 20px; height: 20px; background: url(../../front/images/ico/ico-wheel-search.png) no-repeat center center; content: ''; margin: 0 5px 0 0;} #visual .tab-box > .tab-con .search-history-box{ width: 25px; height: 35px;} #visual .tab-box > .tab-con .search-history-box .search-history-btn::before{ border-left-width: 4px; border-right-width: 4px; border-top-width: 8px;} #quick-right .ws-cart-box{ bottom: 90px;} #contents .inner{ padding: 0 20px;} .layout-filter-board .ws-filter-box ~ .layout-board{ padding-left: 0;} #footer{ padding: 25px 8px;} #footer .link-group{ height: 60px; flex-wrap: wrap; justify-content: center;} .searchFixed #wrap{ padding: 0 !important;} .searchFixed #header, .searchFixed #visual{ box-shadow: none;} .searchFixed #visual{ position: static;} .cartOpen #quick-right{ z-index: 9999;} .cartOpen #quick-right .cart-box{ width: 320px; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; top: 0 !important; right: 0; bottom: 0 !important; z-index: 9;} .cartOpen #quick-right .cart-box .box-btn{ left: auto; right: 10px;} /* .b2c.moOpen #header #moMenu .user-group{ background-color: #7B7F96;} */ .b2c #header-notice{ position: fixed; top: 0; left: 0; right: 0; z-index: 999999;} .b2c #header-notice .inner{ padding: 10px;} .b2c #header-notice + #header{ margin-top: 0; top: 65px;} .b2c #header{ top: 0; z-index: 99999;} .b2c #header ~ #visual{ margin-top: 48px;} .b2c #header-notice:not([style*="display:none"], [style*="display: none"]) ~ #visual{ margin-top: 113px;} .b2c #visual .inner{ padding-top: 20px;} .b2c.moOpen #header-notice, .b2c.openFilter #header-notice{ z-index: 99999;} .b2c #header-notice + #header .head-top-box .sb-l .select1 {top: -55px;} } @media (max-width: 839px) { #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.dl-type2.col2{ width: calc(((100% - 8px) / 3) * 2 - 100px) !important;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.salson{ width: 100px !important;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.search-felgen:nth-child(1){ width: calc(100% - ((100% - 8px) / 3) - 4px) !important;} #visual .search-box3 .tit .tool-box .tool-con{ width: calc( 100vw - 40px); left: -172px;} #visual .search-box3 .tit .tool-box.active .tool-btn + .tool-con{ top: 22px; } #visual .search-box3 .tit .tool-box .tool-close{ top: -22px; left: 172px;} } @media (max-width: 767px) { #deviceCk .device{ display: none;} #deviceCk .w767{ display: block;} .openFilter, .cartOpen{ overflow: hidden;} .openFilter body::before, .cartOpen body::before{ width: 100%; height: 100%; background-color: #000; content: ''; opacity: 0.6; position: fixed; top: 0; left: 0; z-index: 999;} .layout-filter-board .ws-filter-box ~ .layout-board{ width: 100%;} } @media (max-width: 754px) { #wrap-login .login-wrap{ margin: 0; left: 40px; right: 40px; transform: translateY(-50%);} #wrap-login .login-wrap .info-bx{ width: auto; flex: 1;} #wrap-login .login-wrap .info-bx .chkFindbox{ margin: 0;} #wrap-login .login-wrap .info-bx .chk-box{ flex-wrap: wrap;} #wrap-login .login-wrap .info-bx .chk-box .check{ margin-top: 4px;} } @media (min-width: 730px) { #header .delivery-info-box{ margin-top: 0 !important;} } @media (max-width: 729px) { #header::after{ width: 100%; height: 100%; background-color: #000; content: ''; position: absolute; top: 0; left: 0; z-index: -1;} #header .delivery-info-box, #header .head-top-box .delivery-info-box{ height: auto; top: 58px; right: 20px; left: 20px; z-index: -1;} #header .head-top-box .delivery-info-box{ margin-right: 0 !important; margin-left: 0 !important; position: absolute !important;} #visual{ padding-top: 42px;} #visual .tab-box > .tab-con .search-history-box .search-history-list{ width: 263px;} #visual .search-box3 .tit .tool-box .guide-detail{ overflow-y: auto;} #visual .search-box3 .tit .tool-box .guide-detail > dl{ width: 645px;} #quick-right .ws-cart-box{ height: 40px; bottom: auto !important; top: 5px; right: 90px;} #quick-right .ws-cart-box .cartOpen{ width: 34px; height: 34px; margin: 3px 0; box-shadow: none;} #quick-right .mov-kontakt{ width: 34px; height: 34px; margin: 8px 0; box-shadow: none; bottom: auto !important; top: 0 !important; right: 50px;} #quick-right .mov-kontakt .ico{ width: 100%; height: 100%; background-position: 5px 4px;} #quick-right .mov-kontakt:hover{ width: 34px;} #quick-right .mov-kontakt:hover .txt{ display: none;} .b2c #header .delivery-info-box{ top: 123px;} } @media (max-width: 679px) { .cookies-wrap{ padding-left: 10px;} .btn-topmove.show{ bottom: 20px;} #header ~ #visual{ margin-top: 40px;} #header{ height: 41px;} #header::before{ width: 100%; height: 40px; background-color: #000; content: ''; position: absolute; top: 0; left: 0; z-index: -1;} #header .delivery-info-box{ background-position: right 10px center; padding: 5px 40px 5px 15px; top: 50px; right: 20px; left: 20px; z-index: -2;} #header .delivery-info-box .txt{ line-height: 14px;} #header .head-top-box{ height: 41px;} #header .head-top-box .delivery-info-box{ top: 50px;} #header .head-body-box .logo{ width: 239px; height: 40px; background-size: auto 40px;} #header .moBtn.open{ width: 40px; height: 40px; border-radius: 0; top: 0;} #quick-right .ws-cart-box .cartOpen{ width: 30px; height: 30px; margin: 5px 0;} #quick-right .mov-kontakt{ width: 30px; height: 30px; margin: 5px 0; top: 5px !important; right: 40px;} #quick-right .ws-cart-box .cartOpen::before{ width: 20px; height: 100%; background-position: -11px center; background-size: 30px auto;} #quick-right .mov-kontakt .ico{ background-size: 18px auto;} #quick-right .mov-kontakt:hover{ width: 30px;} #quick-right .mov-kontakt:hover .txt{ display: none;} #quick-right .ws-cart-box, #quick-right .mov-kontakt{ top: 0 !important;} #quick-right .ws-cart-box{ right: 75px;} #visual .ws-search-box .form > dl + dl{ margin-left: 4px;} #visual .search-box{ width: 100%;} #visual .tab-box > .tab-btn{ padding: 0 30px 0 0;} #visual .tab-box > .tab-btn > a{ height: auto; font-size: 12px; text-align: center; padding: 5px; line-height: 13px; display: flex; align-items: center; justify-content: center;} #visual .tab-box > .tab-btn > a + a{ margin-left: 5px;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl:first-child{ width: calc((100% - 8px) / 4) !important;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl:first-child{ width: 50% !important;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.dl-type2.search-reifen{ width: calc(50% - 4px) !important; margin-left: 4px; overflow: visible; position: relative;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.dl-type2.search-reifen.col3{ padding-bottom: 49px;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.dl-type2.search-reifen .select1:nth-child(1){ width: auto; flex: 1 !important;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.dl-type2.search-reifen .select1:nth-child(2){ width: calc(100% + 4px); position: absolute; top: 49px; left: calc((100% + 12px) * -1);} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.dl-type2.search-reifen .select1:nth-child(3){ width: 100%; position: absolute; top: 49px; left: -4px;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.salson{ width: calc(50% - 4px) !important; margin: 4px 0 0 calc(50% + 4px);} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.salson .chkWeather{ border-radius: 3px;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.search-felgen{ width: calc(50% - 4px); margin-left: 4px; flex: none;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.search-felgen + dl.search-felgen{ width: 50%; margin: 4px 0 0 0;} #visual .tab-box > .tab-con.tab1 .ws-search-box .form > dl.search-felgen + dl.search-felgen + dl.search-felgen{ width: calc(50% - 4px); margin: 4px 0 0 4px;} #visual .tab-box > .tab-con:not(.tab1){ height: auto;} #visual .tab-box > .tab-con:not(.tab1) .tab-btn{ justify-content: center;} #visual .tab-box > .tab-con:not(.tab1) .tab-btn a{ font-size: 12px; text-align: center; padding: 0 5px; flex: 1;} #visual .tab-box > .tab-con:not(.tab1) .tab-box2{ flex-direction: column;} #visual .tab-box > .tab-con:not(.tab1) .tab-box2 .tab-con{ margin: 4px 0 0 0;} #visual .tab-box > .tab-con.tab2 .ws-search-box .form > dl{ width: 50%; flex: none;} #visual .tab-box > .tab-con.tab2 .ws-search-box .form > dl:nth-child(2n + 2){ width: calc(50% - 4px);} #visual .tab-box > .tab-con.tab2 .ws-search-box .form > dl:nth-child(2n + 1){ margin-left: 0;} #visual .tab-box > .tab-con.tab2 .ws-search-box .form > dl:nth-child(n + 3){ margin-top: 4px;} #visual .tab-box > .tab-con .ws-search-box .form dt{ display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; left: 16px; right: 25px;} .b2c #header::before{ display: none;} .b2c #header ~ #visual { margin-top: 105px;} } @media (max-width: 661px) { .cookies-wrap .btn a{ width: 180px;} #wrap-login .header{ margin: 20px auto;} #wrap-login .header .logo{ padding: 0 40px;} #wrap-login .header .logo img{ width: 100%;} #wrap-login #container{ height: 540px;} #wrap-login .login-wrap .info-bx{ padding: 30px 30px 40px 30px;} #wrap-login .textbox .txt1{ font-size: 18px; line-height: 1;} #wrap-login .textbox .txt2 strong{ width: 100%; font-size: 18px; line-height: 1;} #wrap-login .login-wrap .info-bx .input{ height: 40px; padding: 0 10px; margin-bottom: 5px;} #wrap-login .login-wrap .info-bx .btn-login{ font-size: 16px; line-height: 1; padding: 15px 0;} } /* @media (max-width: 1499px) { #deviceCk span{ display: none;} #deviceCk .wWide{ display: block;} #header .head-center{ padding: 0 8px 0 32px;} #header .head-right{ padding-right: 64px;} #header .moBtn.open, .moOpen #header .moBtn.close{ display: inline-block; margin: 0; top: 8px; right: 32px; z-index: 99;} #header .util-group, #header .btn-logout, .moOpen #header .moBtn.open{ display: none;} .moOpen #header .btn-logout{ width: 37px; height: 37px; background-color: #009ae1; display: inline-block; border-left: 1px solid #fff; border-radius: 0; position: absolute; top: 49px; right: 32px;} .moOpen #header .btn-logout:hover{ background-color: #6d85c1;} .moOpen #header .util-group{ background-color: #009ae1; display: flex; position: absolute; top: 49px; right: 69px;} .moOpen #header .util-group li{ margin: 2px;} } @media (max-width: 1595px) { #deviceCk .w1023{ display: none;} #deviceCk .w1380{ display: none;} #deviceCk .wWide{ display: block;} #header .head-center{ padding-left: 8px;} #header .gnb-group a{ padding: 4px;} #header .user-group{ margin-left: 8px;} } @media (max-width: 1500px) { #deviceCk .w1023{ display: none;} #deviceCk .w1380{ display: none;} #deviceCk .wWide{ display: block;} #header .gnb-group a{ font-size: 11px; letter-spacing: -0.8px;} } @media (max-width: 1380px) { #deviceCk .w1023{ display: none;} #deviceCk .w1380{ display: block;} #deviceCk .wWide{ display: none;} #header .head-center{ width: 240px; height: calc(100% - 219px); padding: 8px; margin: 0; display: none; position: fixed; top: 48px; right: -300px; bottom: auto; left: auto; z-index: 100;} #header .head-center::after{ height: 1px; background-color: #3a528e; content: ''; border-bottom: 1px solid #6d85c1; position: absolute; top: auto; right: 16px; bottom: 0; left: 16px;} #header .gnb-group{ display: flex; flex-direction: column; flex-wrap: nowrap;} #header .gnb-group li{ width: 100%;} #header .gnb-group li + li{ margin-top: 4px;} #header .gnb-group a{ width: 100%; height: 32px; font-size: 13px; line-height: 14px; letter-spacing: 0; padding: 0 8px; display: flex; align-items: center;} #header .head-right{ flex: 1;} #header .util-group{ width: 240px; padding: 16px; display: none; align-items: flex-start; flex-wrap: wrap; position: fixed; top: auto; right: -300px; bottom: 0; left: auto; z-index: 100;} #header .util-group li{ width: calc((100% - 3px) / 3); height: 69px; margin: 0;} #header .util-group li + li{ margin-left: 2px;} #header .util-group li:nth-child(3n+1){ margin-left: 0;} #header .util-group li:nth-child(n+4){ margin-top: 2px;} #header .util-group [class*="btn-util"]{ width: 100%; height: 69px; background-color: #3a528e;} #header .util-group [class*="btn-util"]:hover{ background-color: #6d85c1;} #header .btn-logout{ width: 32px; height: 32px; position: fixed; top: 8px; right: -250px; z-index: 100;} #header .moBtn.close{ height: 48px; margin: 0; position: fixed; top: 0; z-index: 99;} #header .moMenuBg::before{ width: 100%; height: 48px; background-color: #3a528e; content: ''; position: absolute; top: 0; left: 0;} .moOpen body{ overflow: hidden;} .moOpen #wrap::before{ width: 100%; height: 100%; background-color: #000; content: ''; opacity: 0.6; position: fixed; top: 0; right: 0; z-index: 99;} .moOpen #header .head-center{ position: fixed; top: 48px; bottom: auto; right: -300px; z-index: 100;} .moOpen #header .util-group{ position: fixed; top: auto; bottom: 0; right: -300px; z-index: 100;} .moOpen #header .util-group li{ margin: 0;} .moOpen #header .util-group li + li{ margin-left: 2px;} .moOpen #header .util-group li:nth-child(3n+1){ margin-left: 0;} .moOpen #header .util-group li:nth-child(n+4){ margin-top: 2px;} .moOpen #header .user-group{ max-width: 184px; width: 184px; background-color: #009ae1; margin: 0; position: fixed; top: 9px; z-index: 100;} .moOpen #header .btn-logout{ width: 32px; height: 32px; border: 0; border-radius: 16px; position: fixed; top: 8px; right: -250px;} .moOpen #header .moBtn.close{ margin: 0; border-radius: 4px 0 0 4px; position: fixed; top: 0; right: -40px; z-index: 99;} .moOpen #header .moMenuBg{ display: inline-block;} } @media (max-width: 1023px) { #deviceCk .w1023{ display: block;} #deviceCk .w1380{ display: none;} #deviceCk .wWide{ display: none;} #header{ height: 64px; padding-bottom: 32px;} #header::before{ width: 100%; height: 32px; background-color: #37549c; content: ''; position: absolute; left: 0; bottom: 0;} #header .logo{ width: 164px; height: 32px;} #header .head-search{ position: absolute; top: 40px; right: 16px; bottom: 8px; left: 16px;} #header .head-search .input{ width: 100%; height: 24px; font-weight: 500; font-size: 11px;} #header .head-search .input::placeholder{ font-weight: 500; font-size: 11px;} #header .head-search .btn-util1{ width: 24px; height: 24px; background-size: 15px auto;} #header .moBtn.open{ width: 24px; height: 24px; top: 4px; right: 16px;} #header .moBtn.open span{ width: 13px; margin: -1px 0 0 -8px;} #header .moBtn.open span::before{ top: -6px;} #header .moBtn.open span::after{ bottom: -6px;} #header .head-right{ padding-right: 40px;} #header .user-group{ height: 24px; padding: 5px 12px;} #header .head-center{ height: calc(100% - 146px); top: 32px;} #header .util-group li, #header .util-group [class*="btn-util"]{ height: 40px;} #header .btn-logout{ width: 24px; height: 24px; background-size: 13px auto; top: 4px;} #header .moBtn.close{ height: 32px;} #header .moMenuBg::before{ height: 32px;} .moOpen #header .user-group{ max-width: 192px; width: 192px; top: 4px;} .moOpen #header .btn-logout{ width: 24px; height: 24px; top: 4px;} .moOpen #header .head-center{ top: 32px;} } @media (max-width: 767px) { #header .user-group .user{ width: 13px; padding-left: 13px;} .moOpen #header .user-group .user{ width: 100%; padding-left: 21px;} } */ /* popup open z-index */ .searchFixed:has( .popup-wrap:not(.windowtype)[style*="flex"][style*="z-index"]) #header {z-index: 100;} .searchFixed .popup-wrap:not(.windowtype)[style*="flex"][style*="z-index"] {z-index: 100 !important;}