/* BASIC css start */
#contentWrapper { width:100% !important } 
section { } 
section .sec_inner { width: 1200px; margin: 0 auto; } 


#sec2 { margin: 25px 0 40px; } 
#sec2 .sec_inner { } 
#sec2 .sec_inner .sec2_item { height: 320px; position: relative; } 
#sec2 .sec_inner .sec2_item a { display: block; width: 100%; height: 100%; } 
#sec2 .sec_inner .sec2_item a img { width: 100%; height: 100%; object-fit: cover; } 
#sec2 .sec_inner .sec2_item .info { position: absolute; max-height: 100%; max-width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); } 
#sec2 .sec_inner .sec2_item .info p { padding: 10px 30px; font-family: 'Noto Sans KR', sans-serif; text-align:center; width:305px } 
#sec2 .sec_inner .sec2_item .info p.prdname { font-size: 32px; color: #fff; font-style: italic; background-color: #0059adc4; font-weight:500; } 
#sec2 .sec_inner .sec2_item .info p.prdprice { background: #ffffffd6; text-align: center; } 
#sec2 .sec_inner .sec2_item .info p.prdprice span::before { font-family: 'Noto Sans KR', sans-serif; content: ""; display: inline-block; color:#01407e; font-size:12px; font-weight:500; } 
#sec2 .sec_inner .sec2_item .info p.prdprice span { font-size: 24px; color: #01407e; font-weight: 500; } 


/* 타이어찾기 영역 */
.full-size-wrapper { position: relative; width: 100%; min-width: 1200px; height: auto; display: flex; justify-content: center; align-items: center; } 
.full-size-wrapper > .main-search-banner { width: 1200px; height: 550px; } 
.full-size-wrapper > .main-search-banner > img { width: 100%; height: 100%; } 
.main-search-bar { position: relative; width: 1100px; height: 80px; bottom: 50px; left: 50%; margin-left: -550px; background-color: rgba(0,0,0,0.7); color: #ffffff; display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; padding: 0 30px 0 30px; } 
.main-search-bar .main-search-btn { display: block; font-size: inherit; background: white; width: 200px; height: 40px; border: 1px solid rgba(213,213,213,1); cursor: pointer; } 
.main-search-bar .main-search-btn a { font-size: inherit; } 
.main-search-bar .red-box { display: flex; align-items: center; justify-content: center; font-size: inherit; background: #f05454; width: 280px; height: 40px; color: white; border: 1px solid #f05454; } 

.title-bar { width: 100%; height: 50px; color: #202020; text-align: left; line-height: 50px; } 
.title-bar.outsideBox { width: 1100px; } 

.grey-background { background-color: #f8f8f8; } 

.main-mid-info-box-wrapper { width: 1100px; height: 150px; display: flex; background-color: #f8f8f8; align-items: center; justify-content: center; } 
.main-mid-info-box { width: 1100px; height: 130px; display: flex; /* background-color: rgba(248,248,248,1); */
 background-color: white; align-items: center; justify-content: space-between; padding: 10px 35px 10px 35px; } 
.main-mid-info-box-item { display: flex; } 
.main-mid-info-box-item div:first-child { padding: 0 10px 0 0; } 
.main-mid-info-box-item div .mid-box-icon { font-size: 2.0rem; } 
.main-mid-info-box-item div p { margin:0; padding: 0; line-height: 25px; height: 25px; font-size: 0.9rem; color: #353535; } 
.main-mid-info-box-item div p:first-child { font-size: 1.2rem; height: 35px; font-weight: bold; } 

.direct-shop-banner { width: 1100px; height: 200px; display: flex; justify-content: flex-start; align-items: flex-start; } 
.direct-shop-banner > img { width: 100%; height: 100%; } 
.direct-shop-banner .direct-shop-banner-image { width: 700px; height: 200px; } 
.direct-shop-banner .direct-shop-banner-image > img { width: 100%; height: 100%; } 
.direct-shop-banner .direct-shop-banner-text { width: 400px; height: 200px; background: #ffffff; padding: 0 10px 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } 
.direct-shop-banner .direct-shop-banner-text > p { margin: 0; padding: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } 
.direct-shop-banner .direct-shop-banner-text > p.title { font-size: 1.1rem; font-weight: bold; } 

.recommand-tire-box { width: 1100px; height: auto; background-color: rgba(248,248,248,1); padding: 0 0 50px 0; } 

.recommand-tire-box-body { width: 1100px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; background-color: rgb(200, 200, 200); } 
.recommand-tire-item { width: 273px; height: 268px; margin: 1px 1px 1px 1px; background-color: white; flex: 0 1 auto; text-align: center; cursor: pointer; } 
.recommand-tire-item img { display: block; width: auto; height: 150px; margin: 5px auto 15px auto; } 
.recommand-tire-item p { padding: 0; margin: 0; width: 100%; height: 25px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: rgba(53,53,53,1); padding: 0 15px 0 15px; } 
.recommand-tire-item p.brandTitle { font-size: 1.0rem; color: black; height: 30px; } 

.product-preview-box { width: 1100px; /* background-color: white; */}
.product-preview-tab-bar { width: 100%; height: 60px; background-color:#f8f8f8; border-bottom: 1px solid #a9a9a9; } 
.product-preview-tab-item { box-sizing: content-box; background-color:#f8f8f8; float: left; border-top: 1px solid #a9a9a9; margin-right: 1px; width: 549px; height: 58px; line-height: 58px; text-align: center; cursor: pointer; } 
.product-preview-tab-item.active { border-top: 1px solid #a9a9a9; border-left: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; margin-left: -1px; margin-right: 0; /* font-weight: bold; */
 color:#ffffff; background: #202020; } 
.product-preview-tab-item:first-child.active { border-left: 1px solid #f8f8f8; } 
.product-preview-tab-item:last-child { border-right: 1px solid #f8f8f8; margin-right: 0; } 
.product-preview-tab-body { width: 100%; height: 250px; border-bottom: 1px solid #aaaaaa; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } 
.product-preview-tab-body .product-preview-quarter-banner { flex: 0 1 25%; width: 25%; height: 200px; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; } 
.product-preview-tab-body .product-preview-quarter-banner img { width: 250px; height: 150px; } 
.product-preview-tab-body .product-preview-full-banner { flex: 0 1 100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; } 
.product-preview-tab-body .product-preview-full-banner a { display: block; width: 100%; height: 100%; background-color: rgba(170,170,170,1); } 
.product-preview-tab-body .product-preview-full-banner img { width: 100%; height: auto; } 

.bottom-banner-bar { width: 1100px; height: 350px; /* border-bottom: 1px solid rgba(0,168,255,1); */
 display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } 
.bottom-banner-bar .bottom-banner { flex: 0 1 50%; width: 50%; height: 250px; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; } 
.bottom-banner-bar .bottom-banner a { display: block; width: 530px; height: 250px; background-color: rgba(170,170,170,1); } 
.bottom-banner-bar .bottom-banner img { width: 530px; height: 250px; } 

/* popup banner layer */
.home-popup-wrapper { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); overflow: hidden; justify-content: center; align-items: flex-start; padding: 10px 0 0 0; } 
.home-popup-wrapper .home-popup-image { position: relative; width: 500px; height: auto; max-height: 99%; overflow-y: auto; } 
.home-popup-wrapper .home-popup-image img { width: 500px; height: auto; } 
.home-popup-wrapper .home-popup-image .home-popup-close-button { position: absolute; top: 0px; left: 50%; margin-left: 200px; width: 50px; height: 50px; background: #000000; color: white; border: 0; font-size: 1.5rem; } 
.home-popup-wrapper .home-popup-image .home-popup-link-area { position: absolute; display: block; bottom: 40px; left: 50%; margin-left: -100px; width: 200px; height: 45px; background: transparent; color: white; border: 0; } 


.popup-wrapper { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.4); overflow: hidden; z-index: 10000; display: none; } 
.main-search-box { width: 700px; height: 500px; background-color: white; z-index: 10001; padding: 50px 0 50px 0; position: fixed; top: 50%; left: 50%; margin-top: -250px; margin-left: -350px; overflow: auto; display: none; } 
.main-search-box .box-title { background-color: #383838; color: white; width: 100%; height: 50px; padding: 0 70px 0 70px; display: flex; align-items: center; justify-content: space-between; } 
.main-search-box .box-title div { font-size: 1.1rem; } 
.main-search-box .box-title .close-icon { font-size: 2rem; } 
.main-search-box .box-tab-bar { width: 100%; height: 70px; padding: 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #30475e; } 
.main-search-box .box-tab-bar .box-tab-bar-btn { color: black; width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; } 
.main-search-box .box-tab-bar .box-tab-bar-btn:first-child { border-left: 0; } 
.main-search-box .box-tab-bar .box-tab-bar-btn:last-child { border-right: 0; } 
.main-search-box .box-tab-bar .box-tab-bar-btn.active { background: #30475e; color: white; } 
.main-search-box .box-tab-body { width: 100%; height: 280px; display: none; } 
.main-search-box .box-tab-body .rows { display: flex; width: 100%; height: 55px; padding: 0 70px 0 70px; align-items: center; justify-content: center; } 
.main-search-box .box-tab-body .rows:first-child label { margin-bottom: 0; font-size: 0.8rem; } 
.main-search-box .box-tab-body .rows.flex-right-align { justify-content: flex-end; } 
.size-select { display: flex; width: 100%; height: 100%; align-items: center; justify-content: space-between; } 
.size-select select { width: 180px; height: 40px; } 
.main-search-box .main-search-btn { width: 160px; height: 40px; background-color: #30475e; color: white; } 
.main-search-box .main-reset-btn { width: 160px; height: 40px; background-color: rgba(85,85,85,1); color: white; } 
.howto-check-tiresize-image { width: 100%; height: 330px; background-color: #f2f2f2; background-image: url(/images/howtoCheckTireSize2.png); background-position: center center; background-repeat: no-repeat; background-size: 600px 330px; } 
.box-car-image { width: 100%; height: 120px; background-color: white; background-position: center center; background-repeat: no-repeat; background-size: contain; } 
.box-car-name { height: 50px; text-align: center; color: black; } 
.box-car-name #carNameSpan { color: #f05454; } 
.box-car-tire-size-bar { margin: 0; padding: 0 50px 0 50px; width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: row; flex-wrap: wrap; list-style: none; } 
.box-car-tire-size-bar .box-car-tire-size { cursor: pointer; margin: 0.5px; list-style: none; background-color: rgba(213,213,213,1); height: 50px; padding: 0 15px 0 15px; display: flex; text-align: center; align-items: center; justify-content: center; color: black; } 
.box-car-tire-size-bar .box-car-tire-size.active { color: #f05454; } 

.box-car-tire-info-bar { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } 
.box-car-tire-button-bar { height: 50px; display: flex; align-items: center; justify-content: center; } 
.grey-background { background: #f8f8f8; } 
.dark-grey-background { background-color: rgba(85,85,85,1); } 
.dark-light-background { background-color: rgba(225,225,225,1); } 

.page-title-box { width: 1200px; height: 100px; margin: 0 auto 0 auto; display: flex; align-items: center; justify-content: center; } 

.page-big-banner { width: 1200px; height: 450px; display: flex; align-items: center; justify-content: start; } 

.page-150-banner { width: 1200px; height: 150px; display: flex; align-items: center; justify-content: flex-start; } 

.page-200-banner { width: 1200px; height: 200px; display: flex; align-items: center; justify-content: flex-start; } 

.box-gap { width: 100%; height: 50px; } 


svg:not(:root).svg-inline--fa { overflow:visible } .svg-inline--fa { display:inline-block; font-size:inherit; height:1em; overflow:visible; vertical-align:-.125em } .svg-inline--fa.fa-lg { vertical-align:-.225em } .svg-inline--fa.fa-w-1 { width:.0625em } .svg-inline--fa.fa-w-2 { width:.125em } .svg-inline--fa.fa-w-3 { width:.1875em } .svg-inline--fa.fa-w-4 { width:.25em } .svg-inline--fa.fa-w-5 { width:.3125em } .svg-inline--fa.fa-w-6 { width:.375em } .svg-inline--fa.fa-w-7 { width:.4375em } .svg-inline--fa.fa-w-8 { width:.5em } .svg-inline--fa.fa-w-9 { width:.5625em } .svg-inline--fa.fa-w-10 { width:.625em } .svg-inline--fa.fa-w-11 { width:.6875em } .svg-inline--fa.fa-w-12 { width:.75em } .svg-inline--fa.fa-w-13 { width:.8125em } .svg-inline--fa.fa-w-14 { width:.875em } .svg-inline--fa.fa-w-15 { width:.9375em } .svg-inline--fa.fa-w-16 { width:1em } .svg-inline--fa.fa-w-17 { width:1.0625em } .svg-inline--fa.fa-w-18 { width:1.125em } .svg-inline--fa.fa-w-19 { width:1.1875em } .svg-inline--fa.fa-w-20 { width:1.25em } .svg-inline--fa.fa-pull-left { margin-right:.3em; width:auto } .svg-inline--fa.fa-pull-right { margin-left:.3em; width:auto } .svg-inline--fa.fa-border { height:1.5em } .svg-inline--fa.fa-li { width:2em } .svg-inline--fa.fa-fw { width:1.25em } .fa-layers svg.svg-inline--fa { bottom:0; left:0; margin:auto; position:absolute; right:0; top:0 } .fa-layers { display:inline-block; height:1em; position:relative; text-align:center; vertical-align:-.125em; width:1em } .fa-layers svg.svg-inline--fa { -webkit-transform-origin:center center; transform-origin:center center } .fa-layers-counter,.fa-layers-text { display:inline-block; position:absolute; text-align:center } .fa-layers-text { left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); -webkit-transform-origin:center center; transform-origin:center center } .fa-layers-counter { background-color:#ff253a; border-radius:1em; -webkit-box-sizing:border-box; box-sizing:border-box; color:#fff; height:1.5em; line-height:1; max-width:5em; min-width:1.5em; overflow:hidden; padding:.25em; right:0; text-overflow:ellipsis; top:0; -webkit-transform:scale(.25); transform:scale(.25); -webkit-transform-origin:top right; transform-origin:top right } .fa-layers-bottom-right { bottom:0; right:0; top:auto; -webkit-transform:scale(.25); transform:scale(.25); -webkit-transform-origin:bottom right; transform-origin:bottom right } .fa-layers-bottom-left { bottom:0; left:0; right:auto; top:auto; -webkit-transform:scale(.25); transform:scale(.25); -webkit-transform-origin:bottom left; transform-origin:bottom left } .fa-layers-top-right { right:0; top:0; -webkit-transform:scale(.25); transform:scale(.25); -webkit-transform-origin:top right; transform-origin:top right } .fa-layers-top-left { left:0; right:auto; top:0; -webkit-transform:scale(.25); transform:scale(.25); -webkit-transform-origin:top left; transform-origin:top left } .fa-lg { font-size:1.3333333333em; line-height:.75em; vertical-align:-.0667em } .fa-xs { font-size:.75em } .fa-sm { font-size:.875em } .fa-1x { font-size:1em } .fa-2x { font-size:2em } .fa-3x { font-size:3em } .fa-4x { font-size:4em } .fa-5x { font-size:5em } .fa-6x { font-size:6em } .fa-7x { font-size:7em } .fa-8x { font-size:8em } .fa-9x { font-size:9em } .fa-10x { font-size:10em } .fa-fw { text-align:center; width:1.25em } .fa-ul { list-style-type:none; margin-left:2.5em; padding-left:0 } .fa-ul>li { position:relative } .fa-li { left:-2em; position:absolute; text-align:center; width:2em; line-height:inherit } .fa-border { border:solid .08em #eee; border-radius:.1em; padding:.2em .25em .15em } .fa-pull-left { float:left } .fa-pull-right { float:right } .fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left { margin-right:.3em } .fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right { margin-left:.3em } .fa-spin { -webkit-animation:fa-spin 2s infinite linear; animation:fa-spin 2s infinite linear } .fa-pulse { -webkit-animation:fa-spin 1s infinite steps(8); animation:fa-spin 1s infinite steps(8) } @-webkit-keyframes fa-spin { 
 0% { -webkit-transform:rotate(0); transform:rotate(0) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } 
 } @keyframes fa-spin { 
 0% { -webkit-transform:rotate(0); transform:rotate(0) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } 
 } .fa-rotate-90 { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .fa-rotate-180 { -webkit-transform:rotate(180deg); transform:rotate(180deg) } .fa-rotate-270 { -webkit-transform:rotate(270deg); transform:rotate(270deg) } .fa-flip-horizontal { -webkit-transform:scale(-1,1); transform:scale(-1,1) } .fa-flip-vertical { -webkit-transform:scale(1,-1); transform:scale(1,-1) } .fa-flip-both,.fa-flip-horizontal.fa-flip-vertical { -webkit-transform:scale(-1,-1); transform:scale(-1,-1) } :root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90 { -webkit-filter:none; filter:none } .fa-stack { display:inline-block; height:2em; position:relative; width:2.5em } .fa-stack-1x,.fa-stack-2x { bottom:0; left:0; margin:auto; position:absolute; right:0; top:0 } .svg-inline--fa.fa-stack-1x { height:1em; width:1.25em } .svg-inline--fa.fa-stack-2x { height:2em; width:2.5em } .fa-inverse { color:#fff } .sr-only { border:0; clip:rect(0,0,0,0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px } .sr-only-focusable:active,.sr-only-focusable:focus { clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto } .svg-inline--fa .fa-primary { fill:var(--fa-primary-color,currentColor); opacity:1; opacity:var(--fa-primary-opacity,1) } .svg-inline--fa .fa-secondary { fill:var(--fa-secondary-color,currentColor); opacity:.4; opacity:var(--fa-secondary-opacity,.4) } .svg-inline--fa.fa-swap-opacity .fa-primary { opacity:.4; opacity:var(--fa-secondary-opacity,.4) } .svg-inline--fa.fa-swap-opacity .fa-secondary { opacity:1; opacity:var(--fa-primary-opacity,1) } .svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary { fill:#000 } .fad.fa-inverse { color:#fff } 



/* BASIC css end */