@charset "utf-8"; /* CSS Document */ .box0{ padding:0 4vw} .box1{ width: 1270px; margin:0 auto} .gnb li.m_hide{ display:none} body:not(.pop){ display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100)} .gnb .layer{ display: none;} .bnEl{ display:block; position:relative} .bnEl img{ width:100%; height:100%; object-fit: cover; position:absolute; left:0; top: 0.1em;} .bnEl.hT{ padding-bottom:5%} .bnEl.hR{ padding-bottom:25%} .bnEl.qL{ padding-bottom:333.33%} .bnEl.lnb{ padding-bottom:144.44%} .bnEl.conS{ padding-bottom:7.5%} .bnEl.conM{ padding-bottom:7.5%} .bnEl.mainV{ padding-bottom:56.41%} .bnEl.login{ padding-bottom:100%} .bnEl.ctn img{ object-fit: contain;} .db1500 {display: none;} .mQuick{ display: none;} .mb_hide{display: none;} .mb_hide2{display: none;} #header{ position:relative; z-index:1002} #header .banner_wrap .el{ display:block; border-bottom:2px solid #c60909; /* box-shadow: 0 3px 15px rgba(0, 0, 0, .15); */ overflow:hidden; transition:height .3s} #header .banner_wrap .closeBtn{ position:absolute; right:0; top:0; width:3.75em; height:3.75em; display:flex; align-items:center; justify-content:center; z-index:10; color:#555} #header .banner_wrap .closeBtn .ico{ font-size:1.75em} #header .banner_wrap .closeBtn .ico:before{ content:"\e9af"} #header .banner_wrap.on .el{ height:0} #header .banner_wrap.on .closeBtn{ background:#c60909; width:auto; right:auto; left:100%; width:6em; height:auto; padding:.125em .5em; font-size:.938em; color:#fff; border-radius:0 0 .5em .5em} #header .banner_wrap.on .closeBtn:before{ content:"배너 열기"} #header .banner_wrap.on .closeBtn .ico:before{content:"\e945"} #header .topmenu_wrap{ border-bottom: 1px solid #eee;} #header .topmenu_wrap .wrapH{ height:2.8125em;} /* #header .topmenu_wrap .kakao{} #header .topmenu_wrap .kakao .link{} #header .topmenu_wrap .kakao .link .xi{ width: 30px; height: 30px; margin-right: .5em; border-radius:50%; background-color:#f9e000; font-size: 1.125em; line-height: 30px; color:#3b1c1c; text-align: center;} #header .topmenu_wrap .kakao .link .t1{ font-size: .875em;} */ #header .topmenu_wrap .userState_box{ /* position: absolute; right: 0; bottom: 0; */} #header .topmenu_wrap .userState_list{ display: inline-flex; align-items: center; gap:0 1.5em; height:2em; padding: 0 1em;border-radius: 2em;/* border:2px solid #ddd; */background-color: #c60909;} #header .topmenu_wrap .userState_list > li{ } #header .topmenu_wrap .userState{display: flex;align-items:center;gap: 0 .188em;color: #fff;} #header .topmenu_wrap .userState .xi{font-size: 1.125em; opacity:.8;} #header .topmenu_wrap .userState .t1{ font-size: .875em;} #header .topmenu_wrap .userState .num{ font-weight: 700;} #header .topmenu_wrap .mem_wrap{ display:flex; align-items:center; gap:0 1.5em; margin-left:auto; padding-right: 1em;} #header .topmenu_wrap .mem_wrap .link{ color:#777; display:flex; align-items:center; gap:0 .188em} #header .topmenu_wrap .mem_wrap .link .xi{ font-size:1.125em} #header .topmenu_wrap .mem_wrap .link .t1{ font-size: .875em;} #header .topmenu_wrap .kakao{ display: inline-flex; align-items: center; height:2em; margin-right: 0.5em; padding:0 1em; border-radius: 2em; background-color: #f9e000; color:#3b1c1c;} #header .topmenu_wrap .kakao .xi{ margin-right: .5em;;} #header .topmenu_wrap .kakao .t1{ font-size: .875em;} #header .top_wrap .wrapH{ height:7.5em} #header .top_wrap .logo > a{ height:3.5em} #header .top_wrap .logo > a img{ height:100%} #header .top_wrap .search .in{ position:relative; width:18.75em} #header .top_wrap .search .in .inp{ width:100%; height:3em; padding:1em 0; box-sizing:border-box; background:none; border:none; border-bottom:2px solid #111; font-weight:700; color:#111} #header .top_wrap .search .in .inp::placeholder{ color:#999; font-weight:400} #header .top_wrap .search .in .btn{ position:absolute; right:0; top:0; height:100%; background:none; border:none} #header .top_wrap .search .in .btn .xi{ font-size:1.75em} #header .top_wrap .bannerR{ width:20em} #header .menu_wrap{ border:1px solid #eee; border-left:none; border-right:none} #header .menu_wrap > .flex{ gap:0 .5em} #header .menu_wrap .wrapH, #header .menu_wrap .gnb_wrap .gnb > li .dp1{ height:3.125em} #header .menu_wrap .all_wrap .allBtn{ width:3.125em; display:flex; align-items:center; justify-content:center; background:#111; color:#fff} #header .menu_wrap .all_wrap .allBtn .ico{ font-size:1.75em} #header .menu_wrap .all_wrap .allBtn .ico:before{content:"\e91c"} #header .menu_wrap .all_wrap .all{ background:#fff; position:absolute; left:0; top:100%; box-shadow:0 2em 2em rgba(0,0,0,.2); width:100%; padding:2em 0 3em 0; opacity:0; visibility:hidden} #header .menu_wrap .all_wrap .all > .box1{ display: flex; justify-content: space-between; position:relative;} #header .menu_wrap .all_wrap.on .allBtn .ico:before{content:"\e9af"} #header .menu_wrap .all_wrap.on .all{ opacity:1; visibility:visible} #header .menu_wrap .all_wrap .all .gnb { flex-wrap: wrap; gap:2.5em 1.5em;} #header .menu_wrap .all_wrap .all .gnb > li{ width:calc( ( 100% - 7.5em) / 6); /* flex:1; */ /* padding:0 1em; */ box-sizing: border-box;/* border-right:1px solid #eee */} /* #header .menu_wrap .all_wrap .all .gnb > li:first-child{ border-left:1px solid #eee} */ #header .menu_wrap .all_wrap .all .gnb a{ text-align:left; line-height:1.1} #header .menu_wrap .all_wrap .all .gnb > li .dp1{ justify-content: flex-start; padding: 0 0 .8em .5em; border-bottom:1px solid #ddd; font-weight:600; font-size:1.125em} #header .menu_wrap .all_wrap .all .gnb > li:hover .dp1{ color:#c60909} #header .menu_wrap .all_wrap .all .gnb > li .dp2{ display:block; margin-top:1em} #header .menu_wrap .all_wrap .all .gnb > li .dp2 > li > a{ justify-content: flex-start; font-size:.938em; color:#666; padding:.5em 0 0 .5em} #header .menu_wrap .all_wrap .all .gnb > li .dp2 > li > a:hover{ color:#111; font-weight:500} #header .menu_wrap .all_wrap .all .gnb > li .dp3{ display: none;} #header .menu_wrap .gnb_wrap{ flex:1 1 0%; min-width:0} #header .menu_wrap .gnb_wrap .gnb > li{ flex:1 1 auto} #header .menu_wrap .gnb_wrap .gnb > li .dp1{ font-weight:600; position:relative} #header .menu_wrap .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:3px; background:#c60909; transform:translate(-50%, 2px); transition:.3s} #header .menu_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.063em} #header .menu_wrap .gnb_wrap .gnb > li .dp1:hover, #header .menu_wrap .gnb_wrap .gnb > li.on .dp1{ color:#c60909} #header .menu_wrap .gnb_wrap .gnb > li .dp1:hover:after, #header .menu_wrap .gnb_wrap .gnb > li.on .dp1:after{ width:2em} #header .menu_wrap .gnb_wrap .gnb > li.m_customer{ display: none;} #header .menu_wrap .gnb_wrap .gnb > li .dp2{ display:none} #header .menu_wrap .mem_wrap{ margin-left:auto; display:flex; align-items:center; gap:0 1.5em; padding-left:2em} #header .menu_wrap .mem_wrap .link{ color:#777; display:flex; align-items:center; gap:0 .188em} #header .menu_wrap .mem_wrap .link .xi{ font-size:1.125em} #header .menu_wrap .mem_wrap .link .t1{ font-weight:500} #header .menu_wrap .mem_wrap .link:hover{ color:#e3b55d} #header .menu_wrap .user_wrap{ gap:0 .5em; height:100%; padding-left:2em;} #header .menu_wrap .user_wrap .mem{} #header .menu_wrap .user_wrap .myshop{} #header .menu_wrap .user_wrap > div{ position: relative;} #header .menu_wrap .user_wrap > div .btn{ display: flex; justify-content: center; align-items: center; height:100%; color:#777;} #header .menu_wrap .user_wrap > div .btn .xi.icon{ padding-right:.3em; font-size: 1.25em; color:#c60909} #header .menu_wrap .user_wrap > div .btn .xi.arrow{ color:#777;} #header .menu_wrap .user_wrap > div .link_list{padding: .5em 1em; border-radius:.5em; border:1px solid #ddd;background-color:#fff;position: absolute;left: 50%; top: 100%; opacity: 0; visibility:hidden; transform: translate(-50%, -10%); transition: all .3s;} #header .menu_wrap .user_wrap > div .link_list > li{ padding:.2em 0; } #header .menu_wrap .user_wrap > div .link_list > li .link{ display: flex; align-items:center; gap:.25em; color:#777; } #header .menu_wrap .user_wrap > div .link_list > li .link .xi{ font-size: 1.125em;} #header .menu_wrap .user_wrap > div .link_list > li .link .t1{ font-size: .875em;} #header .menu_wrap .user_wrap > div:hover .link_list , #header .menu_wrap .user_wrap > div.on .link_list{ transform: translate(-50%, 0); opacity: 1; visibility: visible;} #header .menu_wrap .user_wrap > div:hover .btn .xi.arrow , #header .menu_wrap .user_wrap > div.on .btn .xi.arrow{ transform: rotate(180deg);} #header .menu_wrap .user_wrap > div .link_list > li:hover .link{ color:#e3b55d; transition: all .3s;} #quickE{ position:fixed; z-index:1001; right:1em; bottom:1em} #quickE .quickEBtn .ico{width:7em; height:7em; border-radius:50%; background: linear-gradient(0deg, #ffdb96 0%, #ffeecd 50%); display:flex; align-items:center; justify-content:center; position:relative} #quickE .quickEBtn .ico:before{ content:""; position:absolute; right:100%; top:50%; width:1em; height:1em; transform:translate(-.5em, -50%) rotate(45deg); background:#373c44; visibility:hidden; opacity:0;} #quickE .quickEBtn .ico img{ width:60%} #quickE .quickEBtn .tt{ display:block; text-align:center; font-weight:700; color:#111; margin-top:.25em} #quickE .quickE_wrap{ position:absolute; right:100%; bottom:0; width:20em; padding-right:1em; transform:translateY(50%); visibility:hidden; opacity:0; z-index:-1; filter: drop-shadow(0 0 1em rgba(0,0,0,.2))} #quickE .quickE_wrap .wrap_in{ background:#373c44; border-radius:.5em; box-sizing:border-box; padding:1.5em; color:#fff} #quickE .quickE_wrap .wrap_in .inp_wrap{ display:flex; flex-direction:column; gap:.5em 0; margin-top:.5em;;} #quickE .quickE_wrap .wrap_in .inp_wrap > li{ display:flex; flex:1} #quickE .quickE_wrap .wrap_in .inp_wrap > li > *{ flex:1} #quickE .quickE_wrap .wrap_in .inp_wrap > li .inp{ box-sizing:border-box; padding:.5em 1em; border:none; background:#fff; color:#111; font-weight:600; max-width: 100%} #quickE .quickE_wrap .wrap_in .inp_wrap > li .btn{ padding:.75em 1em; background:#fdd994; color:#fff; border:none; font-weight:700; color:#111} #quickE .quickE_wrap .wrap_in .inp_wrap > li.check{ color:#fff; font-size:.938em; display:flex; align-items:center; justify-content:space-between} #quickE .quickE_wrap .wrap_in .inp_wrap > li.check .link{ flex:0 0 auto; opacity:.5; font-size:.938em} #quickE.on .quickEBtn .ico:before{ visibility: visible; opacity:1; transition:.3s; transition-delay:.1s} #quickE.on .quickE_wrap{ visibility: visible; opacity:1; z-index:auto; transform:translateY(0); transition:.3s} #quickE.on .quickE_wrap .quickE_close{ position:absolute; left:50%; bottom:100%; width:3em; height:3em; display:flex; align-items:center; justify-content:center; color:#fff; background:#373c44; border-radius:50%; transform:translate(-50%, -.5em)} .quickEAni{ animation-name: quickEAni; animation-duration: 3s; animation-iteration-count: infinite} @keyframes quickEAni{ 10% {transform:translateY(-.5em)} 15% {transform:translateY(0)} 20% {transform:translateY(0)} 30% {transform:translateY(-.5em)} 35% {transform:translateY(0)} } .fadeAni:hover{animation-name: none} #footer .menu_wrap{ border:1px solid #ddd; border-left:none; border-right:none;/* background: #f5f5f5;*/} #footer .menu_wrap .wrapH{ height:5em} #footer .menu_wrap .link{ display:flex; gap:0 2em} #footer .menu_wrap .link > li > a{ color:#666} #footer .menu_wrap .link > li.point > a{ color:#111; font-weight:600} #footer .menu_wrap .link > li > a:hover{ text-decoration:underline} #footer .info_wrap{padding: 3em 0 7em 0;} #footer .info_wrap > .box1{ position: relative;} #footer .info_wrap .logo{ margin-right:4em} #footer .info_wrap .logo img{ height:3em; filter:grayscale(1)} #footer .info_wrap .info{ padding-top:1em} #footer .info_wrap .info > li{ float:left; margin-right:2.5em; margin-bottom:.25em; font-size:.938em; color:#666} #footer .info_wrap .info > li.br{ clear:left} #footer .info_wrap .info > li.copyright{font-size:.813em;opacity:.6;text-transform:uppercase;margin-top: 2.5em;} #footer .info_wrap .info:after{ content:""; display:block; clear:both} #footer .info_wrap .userState_box{ position: absolute; right: 0; bottom: 0;} #footer .info_wrap .userState_list{ display: inline-flex; align-items: center; gap:0 1.5em; padding: .3em 1.5em; border-radius: 2em; border:2px solid #ddd;} #footer .info_wrap .userState_list > li{ } #footer .info_wrap .userState{ display: flex; align-items:center; gap: 0 .188em; color:#777;} #footer .info_wrap .userState .xi{ font-size: 1.125em;} #footer .info_wrap .userState .t1{ font-size: .875em;} #footer .info_wrap .userState .num{ font-weight: 700;} #footer .foot_wrap { border-top: 1px solid #ddd; padding: 2em 0; background: #f5f5f5;} #footer .foot_wrap .gnb { } #footer .foot_wrap .gnb > li { padding: .25em;border-right: 1px solid #ddd; width: calc(100% / 6); box-sizing: border-box;} #footer .foot_wrap .gnb > li:first-child { } /*#footer .foot_wrap .gnb > li:last-child { padding-right:0em;border-right: 0px solid #f0f0f0;}*/ #footer .foot_wrap .gnb > li .dp1 .va > .tt { font-weight: 500;height: 3em;line-height: 3em;color: #222;} #footer .foot_wrap .gnb > li .dp2 .va > .tt { font-weight: 300; margin-bottom: 0.5em;color: #666;} #footer .foot_wrap .gnb > li .dp1 .va:hover > .tt, #footer .foot_wrap .gnb > li .dp2 .va:hover > .tt { color:#c60909; font-weight:500;transition:.2s} #footer .foot_wrap .gnb > li .dp3{ display:none;} .sns{ display:flex; gap:0 1.5em} .sns > li > a{ color:#999} .sns > li > a .xi{ font-size:1.625em} .sns > li.ns > a:hover{ color:#03c75a} .sns > li.yt > a:hover{ color:#ff0000} .sns > li.in > a:hover{ color:#c72b8f} .sns > li.ka > a:hover{ color:#f5cf1c} .sns > li.fa > a:hover{ color:#3b5998} #contents{ flex:1; padding:1.5em 0 10em 0} #contents .quick{ position:fixed; z-index:1000} #contents .quick.left{ right:50%; margin-right: 655px; width:7.5em; overflow-y: auto; height: 50vh;} /* 스크롤바의 폭 너비 */ #contents .quick.left::-webkit-scrollbar {width: 5px; } #contents .quick.left::-webkit-scrollbar-thumb {background: #c60909; border-radius: 10px;} #contents .quick.left::-webkit-scrollbar-track {background: rgba(220, 20, 60, .1);} #contents .quick.right{ left:50%; margin-left: 655px; width:6.125em} #contents .quick .link{ border:1px solid #eee; display:flex; flex-direction:column; padding:.5em; background:#fff} #contents .quick .link > li > a{ display:flex; flex-direction:column; gap:.5em 0; text-align:center; border-radius:.5em; padding:.75em 0} #contents .quick .link > li > a .ico{ height:1.875em} #contents .quick .link > li > a .ico img{ height:100%} #contents .quick .link > li > a .t1{ line-height:1.1; font-size:.875em; font-weight:500} #contents .quick .link > li > a:hover{ background:#f5f5f5} #contents .quick .cs{ background:#ffdd9d; padding:.5em .5em 1.8em .5em; text-align:center} #contents .quick .cs .t1{ color:#111; font-size:.875em; font-weight:500} #contents .quick .cs .t2{ color:#c60909; font-weight:800} #contents .quick .kakao{ /* padding:.5em; *//* background-color:#f9e000; */color:#3b1c1c} #contents .quick .kakao .t1{ font-size: .875em;} #contents .quick .kakao .xi{margin-right: 5px;} #contents .quick .goTop{ display:flex; align-items:center; justify-content:center; flex-direction:column; line-height:1; margin:0 auto; width:3.125em; height:3.125em; border-radius:50%; background:#111; color:#fff; transform:translateY(-50%)} #contents .quick .goTop .xi{ font-size:1em} #contents .quick .goTop .t1{ font-size:.75em} /* quick.right toggle btn */ #contents .quick.right .btn_quick{ display: none; position:absolute; right: -4em; top:5em; transform:rotate(90deg); background-color:#c60909;width: 6em;text-align: center;height: 2em;line-height: 2em;border-radius: .5em .5em 0 0;} #contents .quick.right .btn_quick .tt{ color: #fff; font-size: .875em;} #contents .quick.right .btn_quick .tt.t2{ display:none} #contents .quick.right.on .btn_quick .tt.t1{ display:none} #contents .quick.right.on .btn_quick .tt.t2{ display:block} #contents .contents_box{ margin-top:1.5em; position: relative;} #contents .lnb_wrap{ width:11.25em; margin-right:2em; gap:1.5em 0; position: sticky; top:1.5em;} #contents .lnb_wrap .menu{ } #contents .lnb_wrap .gnb > li.on{ width:100%} #contents .lnb_wrap .gnb > li.on .dp1{ display:flex !important; background:#7b8390; color:#fff; height:5em; justify-content:center; align-items:center;} #contents .lnb_wrap .gnb > li.on .dp1.layer{ display: none!important;} #contents .lnb_wrap .gnb > li.on .dp1 .va{ font-size:1.25em; font-weight:700} #contents .lnb_wrap .gnb > li.on .dp2{ display:block; border:1px solid #ddd; padding:1.5em 0 1.5em 0; box-sizing:border-box} #contents .lnb_wrap .gnb > li.on .dp2 > li > a{ display:flex; justify-content: space-between; text-align:left; padding:.5em .5em; font-weight:500; color:#777} #contents .lnb_wrap .gnb > li.on .dp2 > li.on > a{ padding:.8em .5em;} #contents .lnb_wrap .gnb > li.on .dp2 > li > a .va{ flex:1 1 0%; min-width:0; padding-left:.5em} #contents .lnb_wrap .gnb > li.on .dp2 > li > a .in .tt{ flex:1 1 0%; min-width:0; padding-left:.5em} #contents .lnb_wrap .gnb > li.on .dp2 > li > a:after{ content:"\e93f"; font-family:xeicon; display:none} #contents .lnb_wrap .gnb > li.on .dp2 > li.on > a{ color:#fff; background:#2e343e} #contents .lnb_wrap .gnb > li.on .dp2 > li.on > a:after, #contents .lnb_wrap .gnb > li.on .dp2 > li > a:hover:after{ display:block} #contents .lnb_wrap .gnb > li.on .dp2 > li:not(.on) > a:hover{ color:#2e343e} #contents .lnb_wrap .gnb > li .dp2 > li > a.layer{ display: none;} /* #contents .lnb_wrap .gnb > li .dp2 > li.more > a.layer{ display: flex;} */ /* #contents .lnb_wrap .gnb > li .dp2 > li.more > a.link{ display: none;} */ #contents .lnb_wrap .gnb > li .dp2 > li.more.on .dp3{ display: block;} #contents .lnb_wrap .gnb > li .dp3{ display: block; } #contents .lnb_wrap .gnb > li .dp3 > li > a{ display:flex; justify-content: space-between; text-align:left; padding:.1em .5em; font-weight:500; color:#777} #contents .lnb_wrap .gnb > li .dp3 > li.on > a{ padding:.5em .5em;} #contents .lnb_wrap .gnb > li .dp3 > li > a .va{ flex:1 1 0%; min-width:0; padding-left: .8em; font-size: .9375em;} #contents .lnb_wrap .gnb > li .dp3 > li > a .in .tt{ flex:1 1 0%; min-width:0; margin-left: 1em; padding-left: 1em; font-size: .875em; position: relative;} #contents .lnb_wrap .gnb > li .dp3 > li > a .in .tt::before{ content: ''; width: 5px; height: 1px; background: #777; position: absolute; left: 0; top: 8px;} #contents .lnb_wrap .gnb > li .dp3 > li > a:after{ content:"\e93f"; font-family:xeicon; display:none} #contents .lnb_wrap .gnb > li .dp3 > li.on > a{ color: #333; background: #f6f6f6;} #contents .lnb_wrap .gnb > li .dp3 > li.on > a:after, #contents .lnb_wrap .gnb > li .dp3 > li > a:hover:after{ display:block} #contents .lnb_wrap .gnb > li .dp3 > li:not(.on) > a:hover{ color:#2e343e} #contents .doc_wrap{ flex:1 1 0%; min-width:0} #contents .sub_nav{ gap:0 1em; padding:.5em 0; margin-bottom:1em} #contents .sub_nav > li{ font-size:.938em; position:relative; color:#666} #contents .sub_nav > li:not(.home):before{ content:"\e940"; font-family:xeicon; position:absolute; left:-1em; top:50%; transform:translateY(-50%) scale(.8)} #contents .sub_nav > li:last-child{ font-weight:700; color:#111} #contents .lnb_wrap .gnb > li.m_community.on .dp1, #contents .lnb_wrap .gnb > li.m_customer.on .dp1, #contents .lnb_wrap .gnb > li.m_m_member.on .dp1, #contents .lnb_wrap .gnb > li.m_mypage.on .dp1, #contents .lnb_wrap .gnb > li.m_management.on .dp1, #contents .lnb_wrap .gnb > li.m_advice.on .dp1 { background: #b49f76; } /* .S_check { position:absolute; z-index:999999999999999999999;} .S_check form_wrap {} */ .S_check {position: relative;z-index:999999999999999999999; max-width: 50%;left: 50%; top: 3em; transform: translateX(-50%);} .S_check form_wrap {} .dp1on .gnb .dp2{ display:none!important} .dp2on .gnb > li, .dp2on .gnb > li .dp1{ display:none!important} .dp2on .gnb > li.on{ display:block!important} .dp3on .gnb > li, .dp3on .gnb > li .dp1, .dp3on .gnb > li .dp2 > li, .dp3on .gnb > li .dp2 > li > a{ display:none!important} .dp3on .gnb > li.on, .dp3on .gnb > li .dp2 > li.on{ display:block!important} .simple #quickE, .simple #contents .quick, .simple #contents .lnb_wrap, .simple #contents .contents_banner, .simple #contents .sub_nav{ display:none} .comment_area .comment_edit > a, .bsc { border: 1px solid #bbb;padding: 0.3em 0.6em;border-radius: 0.3em;background: #bbb;color: #fff;font-weight: 600;margin-right: 0em;transition:.2s} .comment_area .comment_edit > a.subComent { border: 1px solid #c60909; background: #c60909;} .comment_area .comment_edit > a:hover { border: 1px solid #222; background: #222; transition:.2s;} .comment_area .comment_edit > a.subComent:hover { border: 1px solid #222; background: #222; transition:.2s;} html.pop .popWrap .popIn { padding: 1em 2em 2em 2em;} .popCon .group_inpBtn { margin-top: 1em;} .popCon .memo_st .tt { margin-bottom: 0.25em; text-align: center; padding: 0 1em;} .popCon .input_st { width: -webkit-fill-available; margin: 0.2em;} .popCon .input_st.c2:hover { border: 1px solid #c60909; background: #c60909; transition:.2s;} .contents_box .board_btn_wrap.ar { margin-top: 1em;} /**/ .line1{ height:.5em; background: repeating-linear-gradient(-45deg, #ddd, #ddd 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0) 4px);} .page_tit:not(:first-child){ margin-top:3em} .page_tit{ margin-bottom:1em} .page_tit .t1{ font-weight:700; font-size:1.875em} .page_tit .t2{ font-weight: 700; font-size: 1.375em;} .page_tit.line{ display:flex; align-items:center; gap:0 1em} .page_tit.line:before, .page_tit.line:after{ content:""; flex:1 1 1%; height:1px; background:#ddd} .page_tit.line:not(.ac):before{ display:none} .sns_login{ display:flex; gap:0 2em; justify-content:center} .sns_login > li > a{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.75em 0} .sns_login > li > a .tt{ font-size:.938em} .sns_login > li > a .ico{ width:4em; height:4em; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f5f5f5} .sns_login > li > a .ico .xi{ font-size:1.75em} .sns_login > li > a.nv .ico{ background:#03c75a; color:#fff} .sns_login > li > a.ka .ico{ background:#fee500; color:#111} /**/ .login_wrap{ display:flex; justify-content: center; padding-top:1.5em;} .login_wrap .inp_wrap{ flex:0 0 45%; /* padding:1.5em 0 */} .login_wrap .tab_st > li{ flex:1;} .login_wrap .inp_wrap .con_idx > .idx{ padding:3em 2em; border:1px solid #111; border-top:none;} .login_wrap .banner_wrap{ width:37.5em; height:37.6em; margin: 4em 0 auto 6em; border-radius:1em; overflow:hidden} .login_wrap .banner_wrap .bnEl img{ height: 100%; object-fit:cover;} .login_wrap .li_st{ padding:.5em 0} .login_wrap .li_st > li{ font-size:.813em; color:#777; padding-left:1.25em; position:relative; margin-top:.5em} .login_wrap .li_st > li:before{ content:"·"; position:absolute; left:0; top:-.25em; font-size:2em; color:#111; line-height:1;} .mem_form{ display:flex; flex-direction:column; gap:1em 0} .mem_form:not(:first-child){ margin-top:1.5em} .mem_form > li{ width:100%; display:flex; flex-direction:column; gap:.5em 0} .mem_form > li > *{ width:100%} .mem_form > li .tit .t1{ font-weight:600; font-size:1.063em} .mem_form > li .con{ display:flex; gap:.5em; flex-wrap:wrap} .mem_form > li .con > *{ flex:1} .mem_form > li.msg{ margin-top:.5em; padding-top:1em; border-top:1px solid #ddd;} .mem_link{ display:flex; algin-items:center; gap:0 1.5em} .mem_link > li > a{ color:#666; display:flex; align-items:center; gap:0 .125em; border-bottom:1px solid transparent; line-height:1.1} .mem_link > li > a:hover{ border-color:#111; color:#111} .mem_link > li.point > a{ font-weight:700; color:#111} .form_tab{ display:flex} .form_tab > li{ flex:1} .form_tab > li > a{ display:flex; align-items:center; justify-content:center; flex-direction:column; height:4em; border-bottom:3px solid #ddd; color:#999} .form_tab > li > a .t1{ font-weight:700; font-size:1.25em} .form_tab > li.on > a{ border-bottom-color:#c60909; color:#c60909} .join_wrap{ width:35em; margin:0 auto; max-width:100%} .join_agree{ display:flex; flex-direction:column; gap:1em 0} .join_agree > li.all{ font-size:1.125em; color:#111} .join_agree > li .agreeBtn{ font-size:.875em; color:#666} .join_agree > li .agree_wrap{ display:none} .join_agree > li.on .agreeBtn .xi{ transform:rotate(180deg)} .join_agree > li.on .agree_wrap{ display:block} .agree_wrap{ border:1px solid #ddd; padding:1em; font-size:.938em; background:#f5f5f5; color:#666} .agree_wrap *{ vertical-align:baseline} .agree_wrap.h1{ overflow-y:auto; height:10em} .fin_wrap{ padding:3em; border:1px solid #ddd; box-sizing:border-box; display:flex; flex-direction:column; gap:2em 0} .fin_wrap .tit1{ font-size:1.5em; font-weight:500} .fin_wrap .tit2{ font-size:1.375em; font-weight:700} .fin_wrap .tt1{ font-size:1.063em; color:#666; line-height:1.6} .fin_wrap .tt2{ font-size:1.125em; font-weight:500} .fin_wrap .bg{ padding:1.5em; background:#f5f5f5} .member_wrap .member_form { padding: 2.5em 2em; background: #f6f6f6; border-radius: 1.5em; box-shadow: 2px 2px 6px rgba(0, 0, 0, .15); border-top-width: 4px; border-top-color: #3167a6; } /**/ .btn_vf{ padding:2em; border:1px solid #ddd; border-radius:.5em; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:8em; transition:.3s} .btn_vf .ico{ width:8em; height:8em; background:#fff; border-radius:50%; display:flex; flex-direction:column; justify-content:center; margin-bottom:1em} .btn_vf .ico img{ height:50%} .btn_vf .t1{ font-weight:700; font-size:1.25em} .btn_vf .t2{ color:#666; margin-top:.5em} .btn_vf .st{ background:#333; color:#fff; padding:.75em; border-radius:2em; width:100%; max-width:12em; box-sizing:border-box; font-size:1.063em; font-weight:500; margin-top:1.5em} .btn_vf:hover, .btn_vf:focus{ border-color:#0060ae; box-shadow:0 0 1em rgba(0,0,0,.1)} /**/ .visualSlider .swiper-wrapper .el{ width:33.33%} .visualSlider_wrap .control{ padding:.5em 0; gap:0 1em} .visualSlider_wrap .control .fraction > i{ font-size:1.063em; font-weight:600; color:#999} .visualSlider_wrap .control .fraction .idx{ color:#111} .main_cont_banner{ margin-top:1em; border:1px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, .05);} /**/ .intro_bg { background:url(../images/sub/intro_bg.jpg) no-repeat center; padding:3em 0; background-size:cover; position:relative; margin-top: 1em;} .intro_bg:before { content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.4); } .intro_bg .title { color:#fff; font-size:2em; padding-bottom:1em; position:relative; text-align:center; } .intro_bg ul { text-align:center; margin: 0 0; position: relative;} .intro_bg ul li { display:inline-block; box-sizing:border-box; padding:0 3em; } .intro_bg ul li .icon { width:5.5em; height:5em; margin-bottom:1em; } .intro_bg ul li .tt { color:#fff; sans-serif; position:relative; padding:1.5em 0 0; font-size: 1.2em;} .intro_bg ul li .tt:before { content:""; width:20px; height:2px; background:#ffdd9d; position:absolute; top:0; left:50%; margin-left:-10px; } .intro_bgT .page_tit:not(:first-child) { margin-top: 2em;} .intro_bgT .page_tit .t2 > strong { font-weight:700; color:#c60909;} .subBg.bg1{ background: #f9f9fa;padding: 2em 1em;border-top: 2px solid #222;border-bottom: 1px solid #ddd;margin-top: 1em;} .sub_tt { } .sub_tt.red { color: #c60909;font-weight:500; } .sub_tt.w { color: #fff; } .sub_tt.we1 { font-weight: 600; } .sub_tt.we2 { font-weight: 700; } .sub_tt.we3 { font-weight: 500; } .sub_tt.dot { position: relative; padding-left: 0.5em; } .sub_tt.dot:before { position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; background: #870c18; top: 10px; left: 0; } .sub_tt.dot2 { position: relative; padding-left: 0.5em; } .sub_tt.dot2:before { position: absolute; content: ""; left: 0; top: 20px; width: 3px; height: 3px; border-radius: 50%; background: #666; } .sub_tt.dot2:first-of-type:before { top: 11px; } .sub_tt.li { line-height: 1.6; } .sub_tt.tit { text-align: center; font-size: 1.5em; /*letter-spacing: .375em !important;*/ line-height: 1.6; text-transform: uppercase; font-weight: 600; } .sub_tt.tit2 { text-align: center; font-size: 2em; font-weight: 700; line-height: 1.8em; } .sub_tt.t1 { line-height: 1.6; padding-bottom: 1em; font-size: 1.1em; } .sub_tt.t1:last-of-type { padding-bottom: 0; } .sub_tt.t2 { font-size: 1.4em; } .sub_tt.t3 { font-size: 2.375em; } .sub_tt.t4 { font-size: 1.375em; } .sub_tt.t5 { font-size: 1.05em; padding:0.5em; line-height: 1.6;} .sub_tt.t5:first-of-type { padding-top:0; } .sub_tt.t5:last-of-type { padding-bottom:0; } .sub_tt.t6 { font-size: 1.1em; } .sub_tt.t7 { font-size: 1.05em; padding-bottom:1em; line-height: 1.6; } .sub_tt.t7:last-of-type { padding-bottom:0; } .service_wrap { } .service_wrap.bg { padding:2em 1em; background-color:#f6f6f6; } .service_wrap .service_con { width: 100%; padding: 2em; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 0.5em; } .service_wrap .service_con:nth-of-type(2n+1) { background: #f9f9f9; } .service_wrap .service_con:last-of-type { margin-bottom: 0; } .service_wrap .service_con > p:first-of-type { margin-bottom: .8em; } .service_txt { margin: 0 0 .538em .8em; } .service_txt:last-of-type { margin-bottom: 0; } .service_txt > li { display: flex; align-items: center; } .service2_span {font-weight:bold;} .service_wrap .service_con .mintxt {padding:0.5em;} .service_wrap .service_con.level {background:#fff;} /**/ .carBrand_wrap{ display:flex; flex-wrap:wrap; border:1px solid #ddd; box-shadow: 0 0.125em 0.75em rgba(52,77,131,.15);} .carBrand{ display:flex; flex-wrap:wrap; align-content:flex-start; flex:1; padding:.5em; position:relative} .carBrand:before{ content:""; position:absolute; left:-1px; top:-1px; width:100%; height:100%; border:1px solid #ddd; border-right:none; border-bottom:none} .carBrand.w1{ flex:0 0 30%} .carBrand > li{ width:8.33%; position:relative} .carBrand.w1 > li{ width:25%} /* 국가별 */ .carBrand_wrap .local{/* display: flex; */width: 100%;position: relative;} .carBrand_wrap .local .name{display: flex;justify-content: center;align-items: center;width:3em;padding: .2em .8em .2em .5em;border-bottom: 1px solid #aaa;background:#7b8390;position: absolute;height: 1.5em;z-index: 1;border-radius: 0 0 1em 0;} .carBrand_wrap .local .name .tt{ font-size: .9375em; color:#fff;} .carBrand_wrap .local .carBrand{ padding-top: 1.5em;} .carBrand_wrap .local .carBrand > li{width: calc(100% /15);} .carBrand_wrap .local.w2{ width: 50%;} .carBrand_wrap .local.w2 .carBrand > li{width: calc(100% / 7);} .carBrand_wrap .local.w3{ width: calc(100% / 3);} .carBrand_wrap .local.w3 .carBrand{ height: 100%; box-sizing: border-box;} .carBrand_wrap .local.w3 .carBrand > li{width: calc(100% / 5);} /* brand info */ .memoBox.brand{ padding: 1.25em 1.5em;} .memoBox.brand .wrap_in .logo{width: 10em;} .memoBox.brand .wrap_in .desc {/* align-items: center; */ gap:.5em 1em;} .memoBox.brand .wrap_in .desc > li{} .memoBox.brand .wrap_in .desc > li .t1.dot{ padding-left: 2em; position: relative;} .memoBox.brand .wrap_in .desc > li .t1.dot::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background:#002c60; position: absolute; left: 0; top: 8px;} .memoBox .wrap_in .desc > li.memo{ flex:0 0 100%; margin-top: 0.5em; } .memoBox .wrap_in .desc > li.memo .tit{ padding-left: 1em; position: relative;} .memoBox .wrap_in .desc > li.memo .tit::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background:#002c60; position: absolute; left: 0; top: 8px;} .memoBox .wrap_in .desc > li.memo .t2{ margin-top:.5em; padding: 1em .8em; box-sizing: border-box; border:1px solid #ddd; border-radius:.25em; word-break: keep-all;} .carSearch > li .wrap_in{ display:flex} .carSearch > li .wrap_in .wrap_tit{ width:9em; background:#f5f5f5} .carSearch > li .wrap_in .wrap_tit .t1{ font-weight:600; font-size:1.063em} .carSearch > li .wrap_in .wrap_tit .t2{ font-weight:600} .carSearch > li .wrap_in .wrap_con{ flex:1; color:#666} .carSearch > li .wrap_in .wrap_inc{ padding:1em; position:relative; box-sizing:border-box; font-size:.938em} .carSearch > li .wrap_in .wrap_inc > *{ position:relative} .carSearch > li .wrap_in .wrap_sec{ flex:1} .carSearch > li .wrap_in .wrap_sec .row{ display:flex} .carSearch > li .wrap_in .wrap_inc:before{ content:""; position:absolute; left:-1px; top:-1px; width:calc(100% - 1px); height:calc(100% - 1px); border:1px solid #ddd} .carSort{ display:flex; align-items:center; gap:0 1em} .carSort > li > a{ font-weight:600; color:#999; display:flex; align-items:center; height:3em; gap:0 .25em} .carSort > li > a .ico{ font-size:1em; visibility:hidden} .carSort > li > a .ico:before{content:"\e928"} .carSort > li.on > a{ color:#111} .carSort > li.on > a .ico{ visibility:visible} .carSort.pc{ } .carSort.mobi{ display: none;} .carList{ border-top:1px solid #111} .carList > li{ counter-increment: recordIdx} .carList > li .wrap_in{ display:flex; align-items:center; gap:0 1em; border-bottom:1px solid #ddd} .carList.g1 > li .wrap_in{ gap:0 .25em} .carList > li .wrap_in .cell{ flex:0 0 auto; padding:.5em; display:flex; flex-direction:column; gap:1em 0; box-sizing:border-box} .carList > li .wrap_in .cell.w1{ width:5em} .carList > li .wrap_in .cell.c_count{ width:3em; text-align:right} .carList > li .wrap_in .cell.c_count:before{content:counter(recordIdx) "."} .carList > li .wrap_in .cell.c_img{ width:12em; padding:1.5em 0} .carList > li .wrap_in .cell.c_grow{ flex:1 1 0%; min-width:0} .carList > li .wrap_in .cell_wrap{ display: flex; flex-wrap: wrap; align-items: center; gap: 2em; width: 100%;} .carList > li .wrap_in .cell_wrap .c_tit{ flex:1;} .carList > li .wrap_in .cell_wrap .c_price{ padding-right: 0.5em;} .carName{ display:flex; align-items:center; gap:0 .5em} .carName .logo{ width:3em} .carName .t1{ /* flex:1; */ font-weight:700; font-size:1.125em} .carName .t2{ font-weight:500; font-size:1.063em} .carName[onclick]:hover{ text-decoration:underline} .carName.s1{ font-size:1.125em} .carList .carSpec{ display:flex; flex-wrap:wrap; gap:0 1em} .carList .carSpec > li{ color:#777; font-size:.938em; position:relative} .carList .carSpec > li:before{ content:"·"; position:absolute; left:100%; top:0; width:1em; text-align:center} .carList .carSpec > li:last-child:before{ display:none} .carList .carSpec.nodot > li:before{ display: none;} .carList .carSpec.release{ align-items:center; gap:.5em; margin: 0.8em 0;} .carList .carSpec.release .tt_state{ color:#fff;} /* .carList .carSpec.release .state{ padding:.2em .8em; border-radius: .2em; background-color:#777; font-size: .875em; color:#fff} */ .carList .carPrice{ display:flex; flex-direction:column; align-items:flex-end; gap:1.5em 0} .carList .carPrice.hl{ display:inline-flex} .carList .carPrice > li{ display:flex; flex-direction: column; align-items:flex-end; gap:.5em 1em} .carList .carPrice .in{ display:flex; flex-direction:column; gap:.5em 0} .carList .carBtn{ box-sizing:border-box; padding:.25em 1em; height:2.5em; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid transparent} .carList .carBtn.w1{ width:12em;} .carList .carBtn.h1{ height:3em} .carList .carBtn.c1{ background:#c60909; color:#fff;} .carList .carBtn.c1.re{ background:#fff; border-color:#c60909; color:#c60909} .carList .carBtn.c2{ background:#333; color:#fff;} .carList .carBtn.c2.re{ background:#fff; border-color:#333; color:#111} .carList.st1{ border-top:1px solid #ddd} .carList.st1 > li .wrap_in{ border-bottom:none; padding:1em 0} .carList.st1 > li .wrap_in .cell.c_img{ width:22em} .carList.st1 .carName{ font-size:1.25em} /* carList new */ .carList > li .wrap_in .cell.c_info { width:calc( 100% - 13em); flex-direction: row; align-items: center; gap:1em;} .carList > li .wrap_in .cell.c_price{ /* width: 18em; */} .carTit{justify-content: space-between; gap:1em;} /* carList 동급차량슬라이드 */ .level_wrap{width: 100%; max-width: 24em; min-height: 5em; margin-top: 1em; padding:.5em; border:1px solid #ddd; border-radius: .5em; position: relative;} .level_wrap .tit{ display: flex; align-items: center;} .level_wrap .tit strong{font-size: .9375em;} .level_wrap .tit .num{ padding-left: .5em; color:#555;} .level_wrap .levelSlide{ padding-top: .5em; overflow: hidden;} .level_wrap .levelSlide .swiper-wrapper{ } .level_wrap .levelSlide .el{ padding: 0 .5em; box-sizing: border-box;} .level_wrap .levelSlide .el .carImg{ } .level_wrap .levelSlide .el .carName{ display: block; font-size: .875em; color:#333;} .level_wrap .levelSlide .slide_control{ position: absolute; right: 0; top: 0;} .level_wrap .levelSlide .slide_btn{display: flex; justify-content: center; align-items: center; width: 1em; height: 1em; margin:0; top:.5em;} .level_wrap .levelSlide .slide_btn.next{right: .5em;} .level_wrap .levelSlide .slide_btn.prev{right: 1.5em;} .level_wrap .levelSlide .slide_btn .xi{} /* 동급차량리스트 텍스트형 */ .level_wrap.st2{ } .equal_list_wrap{ height: 6em; margin-top: 0.8em; padding-left: .5em;} .equal_list{ display: flex; flex-wrap: wrap; gap:0 2em;} .equal_list > li{ width: calc((100% - 2em) / 2);} .equal_list > li + li{ margin-top: 0.5em;} /* .equal_list > li::before{ content: ''; width: 0.3em; height: 0.3em; border-radius: 50%; background:var(--siteC); position: absolute; left: 0; top: 8px;} */ .equal_list > li .in{ } .equal_list > li .in .name{ flex:0 0 calc(50% - 2em);} .equal_list > li .in .name .logo{ width: 2em;} .equal_list > li .in .name .t1{ max-width:100%; margin-left: 0.5em; font-size: .875em;} .equal_list > li .in:hover .name .t1{text-decoration: underline;} /* carList new - 차량정보 view */ .moreInfo{/* padding: .5em; */background:#f4f4f4;} .moreInfo .inner{height:6em; padding:.5em .8em; border:1px solid #ddd;/* border-radius:.5em; */background: #f4f4f4;overflow-y: scroll;} .moreInfo .tit{ font-weight: 600; color:#333;} .moreInfo .tit:not(:first-child){ margin-top:1em} .moreInfo .con{padding: .5em;} .moreInfo .con .t1{ padding-left: 1em; font-size:.9375em; color:#333; position: relative;} .moreInfo .con .t1::before{content: '';width: 5px;height: 1px;border-radius: 50%;background-color: #999;position: absolute;left: 0;top: 8px;} .moreInfo .con .t1 + .t1{ margin-top: 0.5em;} .fWrap{ display:flex; align-items:center; gap:.25em} .viewSlider .el{ background:#000} .viewSliderThumb{ border-width: 1em 0 1em; border-style: solid; border-color:#000; /* padding:1em 0; background:#000 */} .viewSliderThumb .el{ opacity: .5;} .viewSliderThumb .el.swiper-slide-thumb-active{ position:relative; opacity: 1;} .viewSliderThumb .el.swiper-slide-thumb-active:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:4px solid #fff} .chartWrap{ height:18em; border:1px solid #ddd; padding:1em; position:relative} .chartWrap .memo{ font-size:.938em; color:#666; position:absolute; right:0; top:0; padding:1em} .car_record{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:3em 0} .car_record > li{ width:48%} .car_record > li:nth-child(2n - 1){ margin-right:auto; } .car_sales{ border:1px solid #ddd; border-top-color:#111; margin-bottom:3em} .car_sales .in_pd{ padding:1em} .car_sales .sales_list_wrap_tag{margin-top:0.5em;} .car_sales .sales_list_wrap + .sales_list_wrap_tag{ margin-top: 1.5em;} .car_sales .sales_list_wrap_tag .tag{} .car_sales .sales_list_wrap_tag .tag{ width: 8em; height: 40px; position: relative;} .car_sales .sales_list_wrap_tag .tag .tt{ width:100%; height:100%; padding-left: 1.5em; box-sizing:border-box; background-color:#7b8390; border-radius: .5em .5em 0 0; font-weight: 600;font-size: 1.125em;line-height: 40px;color:#fff; box-shadow: 2px 0 10px rgba(0, 0, 0, .1);} .car_sales .sales_list_wrap_tag .tag::after{content: ''; width: 16px; height:15px; background-image: url(../images/inc/tagTip_R.png); position: absolute; right:-16px; bottom: 0;} .car_sales .sales_list_wrap{ background:#f5f5f5} .car_sales .memo_wrap{ border:1px solid #ddd; padding:1em} .car_sales .memo_wrap .list{ font-size:.938em; line-height:1.2} .car_sales .memo_wrap .list > li:not(:first-child){ margin-top:.5em} .car_sales .memo_wrap .list .wrap_in{ display:flex; gap:0 1em} .car_sales .memo_wrap .list .wrap_in .wrap_tit{ width:14em; position:relative; padding-left:1em} .car_sales .memo_wrap .list .wrap_in .wrap_tit:before{ content:"-"; position:absolute; left:0; top:0; color:#999} .car_sales .memo_wrap .list .wrap_in .wrap_tit .t1{ font-weight:500; color:#c60909} .car_sales .memo_wrap .list .wrap_in .wrap_con{ flex:1; color:#666} .sales_list{ display:flex; flex-wrap:wrap} .sales_list > li{ width:33.33%} .sales_list > li .wrap_in{ position:relative; background:#fff} .sales_list > li .wrap_in:before{ content:""; position:absolute; left:-1px; top:-1px; border:1px solid #ddd; width:calc(100% - 1px); height:calc(100% - 1px)} .sales_list > li .wrap_in .in{ position:relative; overflow:hidden; padding:1em; padding-bottom:6em; display:flex; flex-direction:column; gap:1em} .sales_list > li .wrap_in .tit1{ font-weight:700; font-size:1.125em} .sales_list > li .wrap_in a:hover{ text-decoration:underline} .sales_list > li .wrap_in .list > li{ margin-bottom:.25em; counter-increment: salesIdx; display:flex; align-items:flex-start; gap:0 .25em; position: relative;} .sales_list > li .wrap_in .list > li:before{content:counter(salesIdx); display:flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; border-radius:50%; border:1px solid #ddd; font-size:.75em} .sales_list > li .wrap_in .list > li:not(:last-child){margin-bottom: 0.5em; padding-bottom: 0.5em;} .sales_list > li .wrap_in .list > li:not(:last-child)::after{ content:''; width: calc(100% - 1.5em); height: 1px; background-color: #ddd; position: absolute; right: 0; bottom: 0;} .sales_list > li .wrap_in .list > li .tt{ flex:1; padding:.063em; font-size:.875em; font-weight:500; color:#666; line-height:1.2} .sales_list > li .wrap_in .img_wrap{ position:absolute; left:50%; width:60%; bottom:0} .table_wrap.specTable{ /* padding:0 2em; */ position:relative; overflow: scroll; max-height: 50vh;} .table_wrap.specTable .tablePOP{ position: sticky; left: 88%;} .table_st.stCar{ border-top:4px solid #528cd3; table-layout: fixed;} .table_st.stCar th, .table_st.stCar td{ height:2.5em; padding:.5em .8em; border:1px solid #d4d5d8; border-width:1px 0 1px 1px; background:#fff; color:#555; line-height:1.3; box-sizing:border-box; word-break: keep-all;} .table_st.stCar th:first-child, .table_st.stCar td:first-child{border-left: none;} .table_st.stCar th{ background-color:#203A7B; color:#fff;} .table_st.stCar td a{ color:#555;} .table_st.stCar td a[href]:hover{ text-decoration:underline;} .table_st.stCar td.mid_tit{ padding-left: 1em; background-color:#DFE6F7; font-weight: 600; color:#555; text-align: left;} .Fixed_table th:first-child, .Fixed_table td:first-child { position: sticky; left: 0;} .Fixed_table td:first-child{ background: #f7f7f7;} .chart_box_wrap{ padding: 1.5em; background: #f8f8f8;} .chart_box{ padding: 1em 0 1.5em; border:1px solid #eee; border-radius: 1.5em; background-color: #fff;} .chart_box .memo_box{ margin-top: 1em; padding: 1em; border:1px solid #ddd; border-radius: .5em; background: #fff; text-align: left;} .chart_box .memo_box .tt{ padding-left: 1.8em; color:#777; position: relative;} .chart_box .memo_box .tt i.xi{ position: absolute; left: 0; top: -3px; } /********승계*********/ .carList.lease{ border-top:1px solid #111; gap: 1em; padding: 1em 0 0 1em;} .carList.lease > li{ position:relative; counter-increment: recordId;width: calc(31.7%); padding: 3em 2em 2em; box-sizing: border-box;border: 1px solid #ddd; transition:.2s} .carList.lease > li .tt_cate{ position:absolute; box-sizing:border-box; border:1px solid transparent; line-height:1; min-width:4em; padding:.25em; border-radius:.25em; font-size:.875em; font-weight:600; text-align:center; color:#fff} .carList.lease > li .tt_cate:nth-child(1) { top: 1em;left: 1em;} .carList.lease > li .tt_cate:nth-child(2) { top: 1em;left: 5.5em;} .carList.lease > li .tt_cate:nth-child(3) { top: 1em;left: 10em;} .carList.lease > li .tt_cate:nth-child(4) { top: 1em;left: 14.5em;} .carList.lease > li:hover{ border: 1px solid #c60909; transition:.2s} .carList.lease > li .wrap_in{ display:flex; align-items:center; gap:0 1em; border-bottom:1px solid #ddd} .carList.lease.g1 > li .wrap_in{ gap:0 .25em} .carList.lease > li .wrap_in .cell{ flex:0 0 auto; padding:.5em; display:flex; flex-direction:column; gap:1em 0; box-sizing:border-box} .carList.lease > li .wrap_in .cell.w1{ width:5em} .carList.lease > li .wrap_in .cell.c_count{ width:3em; text-align:right} .carList.lease > li .wrap_in .cell.c_count:before{content:counter(recordIdx) "."} .carList.lease > li .wrap_in .cell.c_img{ width:12em; padding:1.5em 0} .carList.lease > li .cell.c_img .kmBg { position: absolute;bottom: 0;right: 0;padding: 0.1em 0.5em 0.15em;background: rgba(0,0,0,.4);z-index: 1;border-radius: 0.25em;} .carList.lease > li .cell.c_img .kmBg > p { color: #fff;font-size: .875em;font-weight: 400;} .carList.lease > li .wrap_in .cell.c_grow{ flex:1 1 0%; min-width:0} .carName.lease{ display: block; text-align: center;} .carName.lease .t1{ font-weight:700; font-size:1.125em; margin: 1em 0 0.15em;} .carName.lease .t2{font-weight: 200;font-size: 1.0em;color: #aaa;text-align: center;width: 100%;/*padding: 0 0 1em;*/margin-bottom: 1em;border-bottom: 1px solid #ccc;} .carName.lease[onclick]:hover{ text-decoration:underline} .carName.lease.s1{ font-size:1.125em} .carList.lease .carSpec{ display:flex; flex-wrap:wrap; gap:0 1em} .carList.lease .carSpec > li{ display: flex; justify-content: space-between; color:#777; font-size:.938em; position:relative; width: 100%; margin-top: 0.5em;} .carList.lease .carSpec > .detail:before{ content:"·"; position:absolute; left:100%; top:0; width:1em; text-align:center; display:none;} .carList.lease .carSpec > .detail:last-child:before{ display:none} .carList.lease .carSpec > .detail > .title { display: inline-block;margin-right: 1em; font-weight: 600; color: #555;} .carList.lease .carSpec > .detail > .title:before{ content:"-"; position:absolute; left: 30%; top:0; width:1em; text-align:center; color:#aaa;} .carList.lease .carPrice{ display:flex; flex-direction:column; align-items:flex-end; gap:.5em 0} .carList.lease .carPrice.hl{ display:inline-flex} .carList.lease .carPrice > li{ display:flex; align-items:center; gap:0 1em} .carList.lease .carPrice .in{ display:flex; flex-direction:column; gap:.5em 0} .carList.lease .carBtn{ box-sizing:border-box; padding:.25em 1em; height:2.5em; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid transparent} .carList.lease .carBtn.w1{ width:10em;} .carList.lease .carBtn.h1{ height:3em} .carList.lease .carBtn.c1{ background:#c60909; color:#fff;} .carList.lease .carBtn.c1.re{ background:#fff; border-color:#c60909; color:#c60909} .carList.lease .carBtn.c2{ background:#333; color:#fff;} .carList.lease .carBtn.c2.re{ background:#fff; border-color:#333; color:#111} .carList.lease.st1{ border-top:1px solid #ddd} .carList.lease.st1 > li .wrap_in{ border-bottom:none; padding:1em 0} .carList.lease.st1 > li .wrap_in .cell.c_img{ width:22em} .carList.lease.st1 .carName{ font-size:1.25em} .carList.lease .hover_st.zoom .img_wrap{ position:relative;} .carList.lease .hover_st.zoom .img_wrap .resize{ transition:.5s} .carList.lease .hover_st.zoom:focus .img_wrap .resize, .carList.lease .hover_st.zoom:hover .img_wrap .resize{ transform:scale(1.1)} /********승계*********/ .main .page_tit { margin-bottom: 0.5em; margin-top:2em;} .main .page_tit.plus .t2, .main .page_tit.plus .xi { font-weight: 500;font-size: 1em;color: #999;} .main .page_tit.plus .t2 { margin-right: 0.35em;} .main_con { padding: 0em 2em} .main1 > ul { gap: 0em;} .main1 > ul > li { width: 100%;} .main1 > ul > li .board_gallery.s1 > li { width: calc(25% - 0.75em);} .main1 > ul > li .board_gallery.s1 { gap: 1em;} .main1 > ul > li .board_gallery > li .wrap_in .con_wrap.st1 { border: 0px solid #ddd;padding: 0.5em 0 0;} .main1 > ul > li .board_gallery > li .wrap_in .con_wrap .t2 { font-size: .98em;font-weight: 500;} .main1 > ul > li .board_gallery > li .wrap_in .img_wrap {box-sizing: border-box;border: 1px solid #ddd;} .main1 > ul > li .resize.photo { padding-bottom: 45%; margin: 0.5em 1em;} .main1 > ul > li .row.r2.fix { height: 1.5em;} .main1 > ul > li .board_gallery > li .wrap_in .con_wrap { gap: 0.1em 0;} .main1 > ul > li .board_gallery > li .wrap_in .con_wrap .t1 {font-size: 1.12em;font-weight: 500;color: #c60909;} .main2 { margin-top:2em;} .main2 .jang { width: 68%;} .main2 .jang > ul {} .main2 .jang > ul > li { width: 50%;background: #f5f5f5;box-sizing: border-box;padding: 2.4em 2em;margin-right: 1em;} .main2 .jang > ul > li > p > i { margin-right: 0.3em;} .main2.main .page_tit { margin-bottom: 0em; margin-top:0em;} .main2 .carBtn.c1{ background:#c60909; color:#fff;padding: 0.5em 0.7em;border: 1px solid #c60909;font-size: .95em;font-weight: 500;} .main2 .carBtn.c1.re{ background:#fff; color:#c60909;border: 1px solid #c60909;} .main2 .oh { width: 32%;} .main2 .oh ul { height: 100%; box-sizing: border-box; border: 1px solid #ddd;} .main2 .oh ul > li { width: 33.3333%;padding: 1.5em 1em;border-right: 1px solid #ddd;} .main2 .oh ul > li:last-child {border-right: 0px solid #ddd;} .main2 .oh ul > li .t1 { text-align: center;font-size: .95em;font-weight: 500;color: #222;} .main2 .oh ul > li .t2 { text-align: center;font-size: 1.2em;font-weight: 800;margin-top: 0.2em;font-size: 1.07em;font-weight: 500;} /* main3 ori */ /* .main3 { margin-bottom: 2em;} .main3 .main_left { width: 70%;} .main3 .main_left .hal { width: 50%;box-sizing: border-box;padding-right: 1em;} .main3 .main_left .carList { border-top: 0px solid #111;} .main3 .main_left .carList > li { width: 50%;} .main3 .main_left .carList > li .wrap_in { display: block;border: 1px solid #ddd;margin:0 .25em} .main3 .main_left .carList > li .wrap_in .cell.c_img {width: 100%;padding: 0;} .main3 .main_left .carName { justify-content: center;} .main3 .main_left .carName .t1 { font-weight: 500;font-size: .95em;} .main3 .main_left .carName .xi { font-size: 1.1em;} .main3 .main_left .board_gallery { display: flex;flex-wrap: wrap;gap: 0.5em;} .main3 .main_left .board_gallery > li {width: calc(33.3333% - 0.4em);box-sizing: border-box;} .main3 .main_left .board_gallery > li .wrap_in { border: 1px solid #ddd;} .main3 .main_left .board_gallery > li .wrap_in .con_wrap { padding: 0.5em 0;} .main3 .main_left .board_gallery > li .wrap_in .con_wrap .t1 { font-size: 1em;} .main3 .main_left .bo { width: 50%;box-sizing: border-box;padding-left: 1em;} .main3 .main_right { width: 30%; box-sizing: border-box; padding-left: 2em;} .main3 .main_right .main_prod { border: 1px solid #ddd;} .main3 .main_right .main_prod .main_prod1 { flex: 1 1 50%;box-sizing: border-box;padding: 0.5em;} .main3 .main_right .main_prod .main_prod1:nth-child(1) { border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;} .main3 .main_right .main_prod .main_prod1:nth-child(2) { border-bottom: 1px solid #ddd;} .main3 .main_right .main_prod .main_prod1:nth-child(3) { border-right: 1px solid #ddd;} .main3 .main_right .main_prod .va_wrap img{ object-fit:cover;} .main3 .resize.car { padding-bottom: 100%;} .main3 .carName.mall .t1 {font-weight: 500;font-size: 1em;margin: 0.3em 0;} .main3 .Btn { background: #03c75a;color: #fff;padding: 0.85em;display: block;text-align: center;} .main3 .Btn .xi-long-arrow-right { font-size: 1em;margin-left: 0.5em;} */ .main3 { margin-bottom: 2em;} .main3 .main_left { width: 70%;} .main3 .main_left.v24 { width: 100%;} .main3 .main_left.v24 > ul{ gap:1em} .main3 .main_left.v24 .hal, .main3 .main_left.v24 .bo{ flex:1; padding:0;} .main3 .main_left .hal { width: 50%; box-sizing: border-box;padding-right: 1em;} .main3 .main_left .carList { border-top: 0px solid #111;} .main3 .main_left .carList > li { /*flex: 1 1 50%;*/ width: 50%;} .main3 .main_left .carList > li .wrap_in { display: block;border: 1px solid #ddd;margin:0 .25em} .main3 .main_left .carList > li .wrap_in .cell.c_img {width: 100%;padding: 0;} .main3 .main_left .carName { justify-content: center;} .main3 .main_left .carName .t1 { font-weight: 500;font-size: .95em;} .main3 .main_left .carName .xi { font-size: 1.1em;} .main3 .main_left .board_gallery { display: flex;flex-wrap: wrap;gap: 0.5em;} .main3 .main_left .board_gallery > li {width: calc(33.3333% - 0.4em);box-sizing: border-box;} .main3 .main_left .board_gallery > li .wrap_in { border: 1px solid #ddd;} .main3 .main_left .board_gallery > li .wrap_in .con_wrap { padding: 0.5em 0;} .main3 .main_left .board_gallery > li .wrap_in .con_wrap .t1 { font-size: 1em;} .main3 .main_left .hal .tab_idx{ position:relative;} .main3 .main_left .hal .tab_idx > li .page_tit{ color:#999;} .main3 .main_left .hal .tab_idx > li.on .page_tit{ color:#111;} .main3 .main_left .hal .tab_idx > li.on .page_tit.plus{ display:block; position:absolute; right:0; top:0} .main3 .main_left .hal .tab_idx > li .page_tit.plus{ display:none;} .main3 .main_left .bo { width: 50%;box-sizing: border-box;padding-left: 1em;} .main3 .main_right { width: 30%; box-sizing: border-box; padding-left: 2em;} .main3 .main_right .main_prod { min-height: 24em; border: 1px solid #ddd;} .main3 .main_right .main_prod .main_prod1 { flex: 1 1 50%; max-width: 50%; max-height: 12em; box-sizing: border-box;padding: 0.5em;} .main3 .main_right .main_prod .main_prod1:nth-child(1) { border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;} .main3 .main_right .main_prod .main_prod1:nth-child(2) { border-bottom: 1px solid #ddd;} .main3 .main_right .main_prod .main_prod1:nth-child(3) { border-right: 1px solid #ddd;} .main3 .main_right .main_prod .va_wrap img{ object-fit:cover;} .main3 .resize.car { padding-bottom: 100%;} .main3 .carName.mall .t1 {font-weight: 500;font-size: 1em;margin: 0.3em 0;} /* .main3 .Btn { background: #03c75a;color: #fff;padding: 0.85em;display: block;text-align: center;} */ .main3 .Btn { background: #333; color: #fff;padding: 0.85em;display: block;text-align: center;} .main3 .Btn .xi-long-arrow-right { font-size: 1em;margin-left: 0.5em;} .main5 > ul { gap: 0em;} .main5 > ul > li { width: 100%;} .main5 > ul > li .board_gallery.s1 > li { width: calc(17.295% - 1.3333em);} .main5 > ul > li .board_gallery.s1 { gap: 1em;} .main5 > ul > li .board_gallery > li .wrap_in .con_wrap.st1 { border: 0px solid #ddd;padding: 0.5em 0 0;} .main5 > ul > li .board_gallery > li .wrap_in .con_wrap .t2 { font-size: .98em;font-weight: 500;} .main6{ position: relative;} .main6 > ul { gap: 0em;} .main6 > ul > li { width: 80%;} .main6 > ul > li.sec { width: 20%;} .main6 > ul li .S_list { height: 100%; gap:.8em;} .main6 > ul li .S_list .S_list1 { height: calc( (100% - 1.6em) / 3 ); text-align: center; background: #f5f5f5; padding: 1.66em 1em;/* margin-bottom: 0.8em; */ box-sizing: border-box;} .main6 > ul li .S_list .S_list1:last-child { background: #f8dfdf;} .main6 > ul li .S_list .S_list1 .S_t1 {} .main6 > ul li .S_list .S_list1 .S_t1 i { font-size: 2em; color: #222;} .main6 > ul li .S_list .S_list1 .S_t2 { margin-top:.35em;} .main6 > ul li .S_list .S_list1 .S_t2 span { font-size: 1.1em;margin-right: 0.5em; font-weight: 600;} .main6 > ul li .S_list .S_list1 .S_t2 i { font-size: 1.1em;} .main6 .carList.lease{ border-top:0px solid #111; gap: .8em; padding: 0em 0 0 0em;} .main6 .carList.lease > li{ position:relative; counter-increment: recordId; width: calc(23.5%); padding: 2em 1em 1em; box-sizing: border-box;border: 1px solid #ddd; transition:.2s} .main6 .carList.lease > li .tt_cate{ position:absolute; box-sizing:border-box; border:1px solid transparent; line-height:1; min-width:4em; padding:.25em; border-radius:.25em; font-size:.875em; font-weight:600; text-align:center; color:#fff; z-index: 9999;} .main6 .carList.lease > li .tt_cate:nth-child(1) { top: 1em;left: 1em;} .main6 .carList.lease > li .tt_cate:nth-child(2) { top: 1em;left: 5.5em;} .main6 .carList.lease > li .tt_cate:nth-child(3) { top: 1em;left: 10em;} .main6 .carList.lease > li .tt_cate:nth-child(4) { top: 1em;left: 14.5em;} .main6 .carList.lease > li:hover{ border: 1px solid #c60909; transition:.2s} .main6 .carList.lease > li .wrap_in{ display:flex; align-items:center; gap:0 1em; border-bottom:1px solid #ddd} .main6 .carList.lease.g1 > li .wrap_in{ gap:0 .25em} .main6 .carList.lease > li .wrap_in .cell{ flex:0 0 auto; padding:.5em; display:flex; flex-direction:column; gap:1em 0; box-sizing:border-box} .main6 .carList.lease > li .wrap_in .cell.w1{ width:5em} .main6 .carList.lease > li .wrap_in .cell.c_count{ width:3em; text-align:right} .main6 .carList.lease > li .wrap_in .cell.c_count:before{content:counter(recordIdx) "."} .main6 .carList.lease > li .wrap_in .cell.c_img{ width:12em; padding:1.5em 0} .main6 .carList.lease > li .cell.c_img .kmBg { position: absolute;bottom: 0;right: 0;padding: 0.1em 0.5em 0.15em;background: rgba(0,0,0,.4);z-index: 1;border-radius: 0.25em;} .main6 .carList.lease > li .cell.c_img .kmBg > p { color: #fff;font-size: .875em;font-weight: 400;} .main6 .carList.lease > li .wrap_in .cell.c_grow{ flex:1 1 0%; min-width:0} .main6 .btn_more{ position: absolute; right:0; top: -2em;} .main6 .carName:first-child{ min-height: 2.5em;} /* main6 css ori */ /* .main6 > ul { gap: 0em;} .main6 > ul > li { width: 80%;} .main6 > ul > li.sec { width: 20%;} .main6 > ul li .S_list { height: 94%;} .main6 > ul li .S_list .S_list1 { text-align: center; background: #f5f5f5; padding: 1.66em 1em;margin-bottom: 0.8em; box-sizing: border-box;} .main6 > ul li .S_list .S_list1:last-child { background: #f8dfdf;} .main6 > ul li .S_list .S_list1 .S_t1 {} .main6 > ul li .S_list .S_list1 .S_t1 i { font-size: 2em; color: #222;} .main6 > ul li .S_list .S_list1 .S_t2 { margin-top:.35em;} .main6 > ul li .S_list .S_list1 .S_t2 span { font-size: 1.1em;margin-right: 0.5em; font-weight: 600;} .main6 > ul li .S_list .S_list1 .S_t2 i { font-size: 1.1em;} .main6 .carList.lease{ border-top:0px solid #111; gap: .8em; padding: 0em 0 0 0em;} .main6 .carList.lease > li{ position:relative; counter-increment: recordId;width: calc(23.5%); padding: 2em 1em 1em; box-sizing: border-box;border: 1px solid #ddd; transition:.2s} .main6 .carList.lease > li .tt_cate{ position:absolute; box-sizing:border-box; border:1px solid transparent; line-height:1; min-width:4em; padding:.25em; border-radius:.25em; font-size:.875em; font-weight:600; text-align:center; color:#fff; z-index: 9999;} .main6 .carList.lease > li .tt_cate:nth-child(1) { top: 1em;left: 1em;} .main6 .carList.lease > li .tt_cate:nth-child(2) { top: 1em;left: 5.5em;} .main6 .carList.lease > li .tt_cate:nth-child(3) { top: 1em;left: 10em;} .main6 .carList.lease > li .tt_cate:nth-child(4) { top: 1em;left: 14.5em;} .main6 .carList.lease > li:hover{ border: 1px solid #c60909; transition:.2s} .main6 .carList.lease > li .wrap_in{ display:flex; align-items:center; gap:0 1em; border-bottom:1px solid #ddd} .main6 .carList.lease.g1 > li .wrap_in{ gap:0 .25em} .main6 .carList.lease > li .wrap_in .cell{ flex:0 0 auto; padding:.5em; display:flex; flex-direction:column; gap:1em 0; box-sizing:border-box} .main6 .carList.lease > li .wrap_in .cell.w1{ width:5em} .main6 .carList.lease > li .wrap_in .cell.c_count{ width:3em; text-align:right} .main6 .carList.lease > li .wrap_in .cell.c_count:before{content:counter(recordIdx) "."} .main6 .carList.lease > li .wrap_in .cell.c_img{ width:12em; padding:1.5em 0} .main6 .carList.lease > li .cell.c_img .kmBg { position: absolute;bottom: 0;right: 0;padding: 0.1em 0.5em 0.15em;background: rgba(0,0,0,.4);z-index: 1;border-radius: 0.25em;} .main6 .carList.lease > li .cell.c_img .kmBg > p { color: #fff;font-size: .875em;font-weight: 400;} .main6 .carList.lease > li .wrap_in .cell.c_grow{ flex:1 1 0%; min-width:0} */ .main7{ margin-bottom: 4em;} .main7 > ul { gap: 0em;} .main7 > ul > li { width: 100%;} .main7 > ul > li .board_gallery.s1 { gap: 1em;} .main7 > ul > li .board_gallery.s1 > li { width: calc( (100% - 5em) / 6);} .main7 > ul > li .board_gallery > li .wrap_in .con_wrap.st1 { border: 0px solid #ddd;padding: 0.5em 0 0;} .main7 > ul > li .board_gallery > li .wrap_in .con_wrap .t2 { font-size: .98em;font-weight: 500;} .main_commu{} .main_commu > ul{ gap: .5em; padding:1em; background: #f8f8f8;} .main_commu > ul > li{ width: calc(( 100% - .5em ) / 2);} .main_commu > ul > li .inner{ padding: 1em; border:1px solid #ddd; border-radius: .25em; background: #fff; transition: all .3s;} .main_commu > ul > li .tt_cate{ margin-bottom: 0.8em;} .main_commu > ul > li .tit{ font-weight: 600; color:#111;} .main_commu > ul > li .info{ flex:1; gap:.5em; margin-top: 0.8em; color:#777; text-align: right;} .main_commu > ul > li .info .t1{ margin-right: 1em;} .main_commu > ul > li .info .t2{ } .main_commu > ul > li.no_con{ width: 100%;} .main_commu > ul > li:not(.no_con):hover .inner{ box-shadow: 0 0 10px rgba(0, 0, 0, .1);} .main_commu > ul > li:not(.no_con):hover .inner .tit{ text-decoration: underline;} .main_youtube{} .main_youtube .board_gallery { display: flex;flex-wrap: wrap; gap: 0.5em;} .main_youtube .board_gallery > li {width: calc((100% - 1.5em) / 4); box-sizing: border-box;} .main_youtube .board_gallery > li .wrap_in { border: 1px solid #ddd;} .main_youtube .board_gallery > li .wrap_in .con_wrap { padding: 0.5em 0;} .main_youtube .board_gallery > li .wrap_in .con_wrap .t1 { font-size: 1em;} .main_shop{} .main_shop .main_prod { border: 1px solid #ddd;} .main_shop .main_prod .main_prod1 { width:calc(100% / 4); /* max-height: 12em; */ padding: 0.5em; box-sizing: border-box; border-right: 1px solid #ddd;;} /* .main_shop .main_prod .main_prod1:nth-child(1) { border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;} .main_shop .main_prod .main_prod1:nth-child(2) { border-bottom: 1px solid #ddd;} .main_shop .main_prod .main_prod1:nth-child(3) { border-right: 1px solid #ddd;} */ .main_shop .main_prod .va_wrap img{ object-fit:cover;} .main_shop .resize.car { padding-bottom: 80%;} .main_shop .carName.mall .t1 {font-weight: 500;font-size: 1em;margin: 0.3em 0;} /* .main3 .Btn { background: #03c75a;color: #fff;padding: 0.85em;display: block;text-align: center;} */ .main_shop .Btn { background: #333; color: #fff;padding: 0.85em;display: block;text-align: center;} .main_shop .Btn .xi-long-arrow-right { font-size: 1em;margin-left: 0.5em;} /***차량정보 안내***/ /* 전체사양표 */ .popWrap.carInfo{width: 96vw; top:3em;} .carInfo_box{ height:75vh} .carInfo_box .carInfo_left{ flex:1 1 80%; padding-right:1em; padding-bottom: 1em;} .carInfo_box .carInfo_left .carOption_wrap{margin-top: 0;} .carInfo_box .carInfo_left .carOption_wrap .carOption.st{width: 100%; margin-bottom:1em; } .carInfo_box .carInfo_left .carOption_wrap .carOption.ad{width: 100%;} .carInfo_box .carInfo_left .carOption_wrap .carOption .con{ height: auto!important;} .carInfo_box .carInfo_left .carOption_wrap .carOption.st .tit , .carInfo_box .carInfo_left .carOption_wrap .carOption.ad .tit { padding:.5em 1em; border-right:1px solid #ddd; border-bottom:none; background-color: #999; color:#fff} .carInfo_box .carInfo_left .carOption_wrap .carOption.st .con , .carInfo_box .carInfo_left .carOption_wrap .carOption.ad .con{ border-right:1px solid #ddd; font-size:.9375em;} .carInfo_box .carInfo_left .common{ margin-top: 1em; padding:1.5em 1em; border: 1px solid #ddd; background-color: #f6f6f6; } .carInfo_box .carInfo_left .common .tit{ font-weight: 600; color:#002c60} .carInfo_box .carInfo_left .common .tit .xi{ margin-right: 0.5em;} .carInfo_box .carInfo_left .common .desc{ margin-top:.8em; padding-left:2em; font-size: .9375em; line-height: 1.4;} .carInfo_box .carInfo_right{ flex:1 1 20%; margin-left:1em; padding:1em; border:1px solid #ddd;} .carInfo_box .carInfo_right .carName{padding: 1em .5em;border-bottom: 1px solid #002c60;} .carInfo_box .carInfo_right .carModel{height: calc( 100% - 3em); padding:1em 0 1em .5em; box-sizing: border-box;} .carInfo_box .carInfo_right .carModel_list{ height: 100%;} .carInfo_box .carInfo_right .carModel_list > li{ font-size: .9375em; line-height: 2.5em; color: #555;} .carInfo_box .carInfo_right .carModel_list > li.on{ font-weight: 600; color: #111;} /* 옵션선택 */ .popWrap.newCar{ width:70vw; top:2em} .popWrap.newCar.w2{ width: 90vw;} .newCar.w2 .car_table_select{ display: flex; justify-content: end; padding-right: 1.5em; background: #fff; padding-top: 1em;} .newCar.w2 .popIn{ box-shadow: none !important;} .carOption_wrap{ margin-top:2em;} .carOption_wrap .carOption{} .carOption_wrap .carOption.st{ width:calc( 100% / 3 * 2);} .carOption_wrap .carOption.ad{ width:calc( 100% / 3 );} .carOption_wrap .carOption .tit{padding: 1em; border: 1px solid #ddd; background-color: #f5f5f5; font-weight: 700;} .carOption_wrap .carOption .con{ height:18em; padding: 1em; border: 1px solid #ddd; background-color: #fff; /* overflow-y: scroll; */ } .carOption_wrap .carOption .con.scrollst::-webkit-scrollbar-thumb { background-color:#a3a3a3;} .carOption_wrap .carOption.st .tit{ border-right:none; border-bottom:none;} .carOption_wrap .carOption.st .con{ border-right:none;} .carOption_wrap .carOption.st .con .option_list > li{margin-bottom:.5em; position: relative;} .carOption_wrap .carOption.st .con .option_list > li .xi{position: absolute;left: 0;top: -2px; color:#c60909} .carOption_wrap .carOption.st .con .option_list > li .xi::after{ content:"\e92e"; font-family:xeicon;} .carOption_wrap .carOption.st .con .option_list > li .xi+span{margin-left: 1.8em;} .carOption_wrap .carOption.ad{} .carOption_wrap .carOption.ad .label_wrap.fix.option > *{ width:100%;} /* .carOption_wrap .carOption.ad .label_wrap{ height:10em; border:1px solid #ddd; border-top:none; padding:1em; box-sizing: border-box; overflow-y: scroll;} */ /* .carOption_wrap .carOption.ad .label_wrap .label_st{ width:100%;} */ /* .label_wrap.fix .label_st{ justify-content: space-between;} .label_wrap.fix .label_st span{ flex:auto; max-width:100%;} */ /* 할인정보 */ .hal_list{ gap:.5em} .hal_list > li{ width:calc( (100% - 1em) / 3); padding:1.5em 1em; border:1px solid #f5f5f5; background-color:#f5f5f5; transition: all .3s;} .hal_list > li .tit{ margin-bottom:1em;/* font-size:1.125em; */} .hal_list > li .price{ margin-bottom:.5em;} .hal_list > li .price .t1{ font-weight: 800; font-size: 1.375em; color:#c60909;} .hal_list > li .price .won{margin-left:.5em; font-size:.875em; color:#999;vertical-align: middle;} .hal_list > li .t2{ font-weight: 700; color:#555} .hal_list > li .price.no{ display:flex; align-items:center; justify-content:center;} .hal_list > li .price.no .t1{ font-weight: 700; color:#999} .hal_list > li .price.no .xi{ margin-right:.2em; color:#999;} .hal_notice{ margin-top:.8em; padding-left:1em;} .hal_notice > span{ color:#555;} .hal_list > li:hover{ border-color:#c60909;} /* 세부모델 가격표 */ .form_st.faq > li.on .faq_in .label_wrap.row {overflow: visible;} .supScript{height:1.188em; position: relative;} .supScript::after{ height: 21px; padding: 5px 10px 5px 11px; box-sizing: border-box; border-radius: 1em; border:1px solid; background-color: #fff; font-size: 12px; font-weight: 500; text-align: center; position: absolute; top: -1.9em; left: 50%; transform: translateX(-50%); /* opacity: 1; */ /* transition: all .3s; */ } .supScript.st1::after{content:'차량가';/* right: 34em; */} .supScript.st2::after{content:'할인가';/* right: 27em; */} /* .form_st.faq > li.on .faq_in .label_st:hover .supScript::after{ opacity: 1;} */ /* 무상서비스 */ /***렌트/리스 안내***/ /*.page_tit.rentLease:not(:first-child) { margin-top: 1.5em;}*/ .car_sales.rentLease { background: #f5f5f5;} .car_sales.rentLease .memo_wrap { background: #fff; border: 1px solid #ddd;padding: 1em;} .car_sales.rentLease .rlImg { background: #fff;margin-bottom: 1em;box-sizing: border-box;padding: 2em;} .car_sales.rentLease .rlImg > img { margin: 0 auto;display: block;} .car_sales.rentLease .in_pd {padding: 2em 1em;} .car_sales.rentLease .list > li{ margin-bottom:.5em; counter-increment: salesIdx; display:flex; align-items:flex-start; gap:0 .5em} .car_sales.rentLease .list > li:first-child { margin-top:1em;} .car_sales.rentLease .list > li:before{content:counter(salesIdx); display:flex; align-items:center; justify-content:center; width:1.3em; height:1.3em; border-radius:50%; border:1px solid #ddd; font-size:.85em} .car_sales.rentLease .list > li .tt{ flex:1; padding:.063em; font-size:1.1em; font-weight:500; color:#666; line-height:1.2} .car_sales.rentLease .list > li .tt > strong { color:#c60909; font-weight:700;} .car_sales.rentLease .list > li .tt > span { color:#bbb} .car_sales.rentLease .con_box{ margin: 2em 1em;} .car_sales.rentLease .con_box .sub_ulst1 li{ font-size:1.125em; color:#333; line-height:2; background:url(../images/sub/tit_icon.png) no-repeat left 15px; padding-left:15px; } .car_sales.rentLease .con_box .sub_ulst1 li.img_box{ background:none; padding-left:0; margin:5px 0; } .car_sales.rentLease .con_box .sub_ulst1 li.img_box .li_box{ border:1px solid #ccc; padding:2.5em} .car_sales.rentLease .con_box .sub_ulst1 li.img_box .li_box p{ text-align:center;} .car_sales.rentLease .tbl_st2 { border:0; padding:0; margin-bottom:1em; border-top:2px solid #464646; font-size:1em; background: #fff; } .car_sales.rentLease .tbl_st2 thead th { background:#e5dac4; color:#333333; border-bottom:1px solid #aaaaaa; line-height:1.6; padding:1em; font-weight: 600;} .car_sales.rentLease .tbl_st2 tbody th { background:#f4efe5; color:#444444; font-weight:600; font-size: 1.05em; border-bottom:1px solid #dddddd; border-right:1px solid #dddddd; line-height:1.6; padding:1em; vertical-align:middle; } .car_sales.rentLease .tbl_st2 tbody td { color:#555555; border-bottom:1px solid #dddddd; border-right:1px solid #dddddd; line-height:1.5; padding:.75em 2em; vertical-align:middle; } .car_sales.rentLease .tbl_st2 tbody td > strong { color:#c60909;font-size:.95em;} .car_sales.rentLease .tbl_st2 thead th:last-child, .tbl_st2 tbody th:last-child, .tbl_st2 tbody td:last-child { border-right:none; } .car_sales.rentLease .table_w1{ width:10%;} .car_sales.rentLease .table_w2{ width:20%;} .car_sales.rentLease .table_w3{ width:30%;} .car_sales.rentLease .table_w4{ width:40%;} .car_sales.rentLease .table_w5{ width:50%;} .car_sales.rentLease .table_w6{ width:60%;} .car_sales.rentLease .table_w7{ width:70%;} .car_sales.rentLease .table_w8{ width:80%;} .car_sales.rentLease .table_w9{ width:90%;} .car_sales.rentLease .table_w10{ width:100%;} .star_wrap { padding: 1em .5em; gap:.25em; background: #f8f8f8;} .star_wrap .star { flex: 1 1 calc((100% - .5em) / 3); box-sizing: border-box;} .star_wrap .star .star_div { padding: 1em; border: 1px solid #ddd; background:#fff; /* margin-bottom: 0.5em; margin-left: 0.25em; margin-right: 0.25em; */border-radius: 0.5em;} .star_wrap .star .star_div .star1 { text-align: center;} .star_wrap .star .star_div .star2 { text-align: center;font-size: .982em;font-weight: 600;color: #999;} /* 카하브 장점 */ .memoBox{margin-top:1em; padding:1em 1.5em; border: 1px solid #ddd; background: #f4f4f4; position: relative;} .memoBox::before{ content: ''; width: calc( 100% - 1em); height: calc( 100% - 1em); border:1px dashed #ddd; border-radius: .5em; background:#fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .memoBox .wrap_in{ align-items: center; position: relative; z-index: 1;} .memoBox .wrap_in .tit{display:flex; align-items:center; margin-bottom:.5em; } .memoBox .wrap_in .tit .tt{font-weight:500; font-size: 1.125em; color:#333} .memoBox .wrap_in .tit .ico{ width: 1.2em; height: 1.2em; padding-right: 0.5em; background:url(../images/inc/favicon32.png) no-repeat 0 0 / contain;} .memoBox .wrap_in .desc{flex:1; display:flex; flex-wrap:wrap; gap:.25em 2.5em; padding-left: 2.5em; } .memoBox .wrap_in .desc > li{ flex: 0 0 calc(( 100% - 2.5em) / 2.1);} .memoBox .wrap_in .desc > li .t1{color:#333; text-indent: -1em;} .memoBox .wrap_in .desc > li p + p{} .board_banner.search{ padding:2em 3em; gap:0 3em; border: 2px solid var(--siteC); box-shadow: 0 0 10px rgba(0, 0, 0, .1);} .board_banner.search .tt .t2.point{ font-weight:600; font-size:1.25em; color:#c60909;} /********승계*********/ .carList.mall{ border-top:1px solid #111; gap: 1em; padding: 1em 0 0 1em;} .carList.mall .resize.car { padding-bottom: 100%;} .carList.mall > li{ position:relative; counter-increment: recordId;width: calc(31.7%);padding: 3em 2em 2em;box-sizing: border-box;border: 1px solid #ddd; transition:.2s} .carList.mall > li .tt_cate{ position:absolute; box-sizing:border-box; border:1px solid transparent; line-height:1; min-width:4em; padding:.25em; border-radius:.25em; font-size:.875em; font-weight:600; text-align:center; color:#fff; z-index: 1;} .carList.mall > li .tt_cate:nth-child(1) { top: 1em;left: 1em;} .carList.mall > li .tt_cate:nth-child(2) { top: 1em;left: 5.5em;} .carList.mall > li .tt_cate:nth-child(3) { top: 1em;left: 10em;} .carList.mall > li .tt_cate:nth-child(4) { top: 1em;left: 14.5em;} .carList.mall > li:hover{ border: 1px solid #c60909; transition:.2s} .carList.mall > li .wrap_in{ display:flex; align-items:center; gap:0 1em; border-bottom:1px solid #ddd} .carList.mall.g1 > li .wrap_in{ gap:0 .25em} .carList.mall > li .wrap_in .cell{ flex:0 0 auto; padding:.5em; display:flex; flex-direction:column; gap:1em 0; box-sizing:border-box} .carList.mall > li .wrap_in .cell.w1{ width:5em} .carList.mall > li .wrap_in .cell.c_count{ width:3em; text-align:right} .carList.mall > li .wrap_in .cell.c_count:before{content:counter(recordIdx) "."} .carList.mall > li .wrap_in .cell.c_img{ width:12em; padding:1.5em 0} .carList.mall > li .wrap_in .cell.c_grow{ flex:1 1 0%; min-width:0} .carName.mall{ display: block; text-align: center;} .carName.mall .t1{ font-weight:700; font-size:1.125em; margin: .5em 0 0.15em;} .carName.mall .t2{font-weight: 200;font-size: 1.0em;color: #aaa;text-align: center;width: 100%;padding: 0 0 1em;margin-bottom: 1em;border-bottom: 1px solid #ccc;} .carName.mall[onclick]:hover{ text-decoration:underline} .carName.mall.s1{ font-size:1.125em} .carList.mall .carSpec{ display:flex; flex-wrap:wrap; gap:0 1em} .carList.mall .carSpec > li{ display: flex; justify-content: space-between; color:#777; font-size:.938em; position:relative; width: 100%; margin-top: 0.5em;} .carList.mall .carSpec > .detail:before{ content:"·"; position:absolute; left:100%; top:0; width:1em; text-align:center; display:none;} .carList.mall .carSpec > .detail:last-child:before{ display:none} .carList.mall .carSpec > .detail > .title { display: inline-block;margin-right: 1em; font-weight: 600; color: #555;} .carList.mall .carSpec > .detail > .title:before{ content:"-"; position:absolute; left: 30%; top:0; width:1em; text-align:center; color:#aaa;} .carList.mall .carPrice{ display:flex; flex-direction:column; align-items:flex-end; gap:.5em 0} .carList.mall .carPrice.hl{ display:inline-flex} .carList.mall .carPrice > li{ display:flex; align-items:center; gap:0 1em} .carList.mall .carPrice .in{ display:flex; flex-direction:column; gap:.5em 0} .carList.mall .carBtn{ box-sizing:border-box; padding:.25em 1em; height:2.5em; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid transparent} .carList.mall .carBtn.w1{ width:10em;} .carList.mall .carBtn.h1{ height:3em} .carList.mall .carBtn.c1{ background:#c60909; color:#fff;} .carList.mall .carBtn.c1.re{ background:#fff; border-color:#c60909; color:#c60909} .carList.mall .carBtn.c2{ background:#333; color:#fff;} .carList.mall .carBtn.c2.re{ background:#fff; border-color:#333; color:#111} .carList.mall.st1{ border-top:1px solid #ddd} .carList.mall.st1 > li .wrap_in{ border-bottom:none; padding:1em 0} .carList.mall.st1 > li .wrap_in .cell.c_img{ width:22em} .carList.mall.st1 .carName{ font-size:1.25em} .carList.mall .hover_st.zoom .img_wrap{ position:relative;} .carList.mall .hover_st.zoom .img_wrap .resize{ transition:.5s} .carList.mall .hover_st.zoom:focus .img_wrap .resize, .carList.mall .hover_st.zoom:hover .img_wrap .resize{ transform:scale(1.1)} .carList.mall .img_wrap .btn{ position:absolute; z-index:1; left:50%; bottom:50%; transform:translate(-50%,50%); width:3.5em; line-height:3.5em; border-radius:50%; background:#fff; box-shadow:0 0 .5em rgba(0,0,0,.2); text-align:center;color:#333; transition:.2s} .carList.mall .img_wrap .btn:hover{ background:#c60909; color:#fff} .carList.mall .img_wrap .btn .icon{ font-size:1.4em} .carList.mall .img_wrap .btn.home{ margin-left:2em; opacity:0} .carList.mall .img_wrap .btn.home .icon:before{content:"\e902"} .carList.mall > li:hover .img_wrap .btn.home{ margin-left:0; opacity:1} .carList.mall .con_wrap .btn{ margin-top:.25em} .carList.mall .con_wrap .btn .st{ } .carList.mall .con_wrap .btn .st .xi{ font-size:1em} /*******succession view*********/ .succession .memo_wrap{ border:1px solid #ddd; padding:2em; background: #fff;} .succession .memo_wrap .list{ font-size:.938em; line-height:1.2} .succession .memo_wrap .list > li { padding-bottom: 0.5em; border-bottom: 1px solid #f0f0f0;background:#fff;} .succession .memo_wrap .list > li:hover {background:#f5f5f5;transition:.2s} .succession .memo_wrap .list > li:last-child {/* padding-bottom: 0em;*/ border-bottom: 0px solid #f0f0f0;} .succession .memo_wrap .list > li/*:not(:first-child)*/{ padding-top: 0.5em;} .succession .memo_wrap .list .wrap_in{ display:flex; gap:0 1em} .succession .memo_wrap .list .wrap_in .wrap_tit{ width:14em; position:relative; padding-left:1em} .succession .memo_wrap .list .wrap_in .wrap_tit:before{ content:"-"; position:absolute; right: 0;top: 0.55em; color:#999} .succession .memo_wrap .list .wrap_in .wrap_tit .t1{ font-weight:600;color:#222;font-size: 1.05em;padding: .3em .5em;box-sizing: border-box;text-align: center;width: 7em;border: 1px solid #ccc;border-radius: 1em;background:#fff;transition:.2s;} .succession .memo_wrap .list li:hover .wrap_in .wrap_tit .t1 {color:#c60909 !important;transition:.2s;} .succession .memo_wrap .list .wrap_in .wrap_con{ flex:1; color:#666; line-height: 2.3em;} .succession .prod_tab_wrap {position:relative; width:100%;} .succession .prod_tab_wrap .list_tab {/*overflow:hidden;*/ position:relative; display: flex;margin-bottom: 2em;} .succession .prod_tab_wrap .list_tab li {float:left; position:relative; line-height:2px; flex: 1;} .succession .prod_tab_wrap .list_tab li > a {display:block;text-align:center;transition:.3s;margin:0; color:#222;border:1px solid #e1e1e1;font-size: 1em;padding: 0 1em;height: 3em;line-height: 3em;background:#f5f5f5; word-break: keep-all;border-radius: 0.5em;margin: 0.2em;} .succession .prod_tab_wrap .list_tab li:hover > a{ color:#c60909; border-color:#c60909 ;} .succession .prod_tab_wrap .list_tab li.on > a {color:#fff; background:#c60909; position:relative; border-color:transparent;} .succession .prod_tab_wrap .list_tab li.on > a {color:#fff;} .succession .prod_tab_wrap .con_idx {} /* -------- 공통 :: 탭 -------- */ /* Tab 공통 스타일 */ .article { display: block;} .sub-tab-wrapper-style{position:relative; height:75px; margin-bottom:20px; } .sub-tab-list-style ul{display:flex; justify-content: center; width:100%; height:100%; text-align: center;} .sub-tab-list-style ul:after{display:none} .sub-tab-list-style ul li{/* float:left; */ display:inline-block; vertical-align:middle; position:relative; width:17.1%; background-color:#eee} .sub-tab-list-style ul li a{display:table; height:75px; width:100%; } .sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#888; font-size:1.2em; letter-spacing:-0.25px; text-align:center;} .sub-tab-list-style ul li.selected{z-index:1; } .sub-tab-list-style ul li.selected a{background-color:#044390} .sub-tab-list-style ul li.selected a em{color:#fff; font-weight: 600} /* Tab Fixed Move*/ .sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:75px; z-index: 1;} /* Mobile Tab Drop Menu */ .sub-drop-open-btn-style{display:none} .con_idx{ position:relative;} .con_idx > .idx{ position:absolute; left:0; top:0; width:100%; height:0; overflow:hidden; visibility:hidden; filter:alpha(opacity=0); opacity:0; box-sizing: border-box; /*border: 1px solid #ddd;*/} .con_idx > .idx.on{ position:relative; height:auto; overflow:visible; visibility:visible; filter:alpha(opacity=100); opacity:1;} /*제품뷰페이지*/ .prod_view_wrap{} .prod_view_wrap > ul > li{width:50%; position:relative; } .prod_view_wrap > ul > li:nth-child(1){ } .prod_view_wrap > ul > li:nth-child(2){ } .prod_view_wrap > ul > li .inner_box{ top:1em; width:100%;color:#666; left:10%; float:right;} .prod_view_wrap > ul > li .inner_box .em{ margin-bottom:.3em; font-weight:300; color:#888;} .prod_view_wrap > ul > li .inner_box .t1{ font-size: 1.6em; font-weight: 600;padding-bottom:.5em; border-bottom:1px solid #ddd; margin-bottom:.5em;} .prod_view_wrap > ul > li .inner_box dl{ padding-left: 0.3em;font-size: 1em;font-weight: 400;} .prod_view_wrap > ul > li .inner_box dl dt{ padding: 0.5em 0;color: #c60909;font-size: 1.05em;font-weight: 700;} .prod_view_wrap > ul > li .inner_box dl dd{ line-height:1.6; color:#666; margin-bottom:1em;} .prod_view_wrap .img_wrap .big{width:95%; position:relative; } .prod_view_wrap .img_wrap .big . .prod_view_wrap .img_wrap .big .in{ padding:2em;} .prod_view_wrap .img_wrap .big .resize2 .re{ background: #fff; border: 1px solid #ddd;height: 24em;box-sizing: border-box;padding: 1em;} .prod_view_wrap .prodLogo{ position:absolute; top:1.5em; right:1.5em;} .board_btn_wrap{ margin-top:2em;} .board_btn_wrap.prodBtn { margin-top: 1em;} .cont_view_wrap{ background: #f5f5f5; padding: 4em 6em 1em;border-top: 3px dashed #ddd;border-radius: 6em;margin-bottom: 3em;margin-top: 2em;} .cont_view_wrap .view_tit{ font-size:1.625em; margin: 0 0 1em 1.5em; font-weight: 700; color:#333;} .cont_view_wrap .view_tit_wrap{ border-top:2px solid #666; font-size:1em; border-bottom:1px solid #666;} .cont_view_wrap .view_tit_wrap p{ font-size:1.25em; padding: 1em 0 1em 1.5em; color: #666;} .cont_view_wrap .view_in_wrap{ background:#fff; padding:3em 2em 3em 2em; margin-bottom:3em;border-radius: 0 0 2em 2em; font-size: 1.1em; color: #333;} .cont_view_wrap .view_in_wrap .tx{ line-height:1.6; font-size:1em; color:#656565; margin-bottom:1em} .cont_view_wrap .view_in_wrap img{ margin:0 auto; display:block} .cont_view_wrap .view_in_wrap > p{ line-height:1.5;} .cont_view_wrap .view_in_wrap .list{ padding:2em 3em; background:#f5f5f5;} .cont_view_wrap .view_in_wrap .list > dt{ color:#222; margin-bottom:.3em;} .cont_view_wrap .view_in_wrap .list > dd{ padding-left:1em; margin-bottom:1em;} .cont_view_wrap .view_in_wrap .table_st{} .cont_view_wrap .view_in_wrap .table_st td{ text-align:center;} .cont_view_wrap .view_in_wrap .table_st th{ border-left:none; background:#e8eff6 !important; padding:14px 10px !important;} .cont_view_wrap .view_in_wrap .table_st th:last-child{ border-right:none;} .cont_view_wrap .view_in_wrap .table_st tr td{ border-left:none;} .cont_view_wrap .view_in_wrap .table_st tr td:last-child{ border-right:none;} .cont_view_wrap .view_in_wrap .view_tit{ font-size:1.250em; padding-left:1em; margin-top:2em; position:relative;} .cont_view_wrap .view_in_wrap .view_tit:before{ content:""; border:3px solid #e30083; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:100px;} /**/ .prod_view_top .tit_wrap{ background:#f1f1f1; border-top:2px solid #666; color:#111; padding:.8em 1.5em; font-size:1.625em; margin-bottom:1em; position:relative; overflow:hidden;} .prod_view_top .tit_wrap:before{ content:""; position:absolute; left:0; top:50%; width:1em; height:1px; background:#666} .cont_info{ float:right; margin-top:2em} .cont_info span{ width:15px; height:15px; display:inline-block; background:#f3cd62; margin-right:0.5em} .cont_info span.st{ background:#f9aa00 !important} .cont_info ul li{ margin-right:1em;} .prod_view_wrap .img_wrap .small{ width:25%;} .prod_view_wrap .img_wrap .small > li .in{ display:block; border:2px solid #e30083; margin-top:0.5em; padding:1em; filter:alpha(opacity=50);opacity:0.5; transition:.3s} .prod_view_wrap .img_wrap .small > li:first-child .in{ margin-top:0} .prod_view_wrap .img_wrap .small > li.on .in{ filter:alpha(opacity=100);opacity:1} .prod_view_wrap .img_wrap .small.st1{ margin-top:1em; width:93.333%;} .prod_view_wrap .img_wrap .small.st1 > li{ width:33.333%} .prod_view_wrap .img_wrap .small.st1 > li .in{ margin:.5em .8em 0 0; padding:0.3em;} .prod_view_wrap .btn_in{ margin:3em 0; /*padding-left:1em; */padding-bottom:1em;} .prod_view_wrap .btn_in.st{ width:20%;margin: 1em 0 0 0;padding-left:0; padding-bottom:2em} .prod_view_wrap .btn_in .catalog{ display:block; background:#333; color:#fff; height:3em; transition:.3s; width:50%; border-radius: 0.5em;} .prod_view_wrap .btn_in .catalog .tt{ padding:0 1em;font-size: 1em;} .prod_view_wrap .btn_in .catalog:hover{ background:#333; color:#fff} .prod_view_wrap .btn_in .more{ display:block; background:#e30083; color:#fff; height:3em; transition:.3s; width:48%; margin-left:0.5em; float:right !important} .prod_view_wrap .btn_in .more .tt{ font-size:.875em; padding-left:.5em} .prod_view_wrap .btn_in .more:hover{ background:#e30083; color:#fff} .form_wrap .form_st > li {/*margin-bottom: 1em; */padding: 1em 0;} .form_wrap .form_st > li.pd{ padding: 1em;} .prod_tit.pro > .tt { display:none !important;} .view_in_wrap .red { color:#d41f26;} .form_wrap .form_st.faq.gita { background: #f5f5f5; margin-top: -1.05em;} .form_wrap .form_st.faq.gita .toggleWrap { border-top: 1px solid #f5f5f5;padding: 1em;} .form_wrap .form_st.faq.gita .toggleWrap .faq_tit { color: #999;} .form_wrap .form_st.faq.gita .toggleWrap.on .faq_tit { color: #c60909;} .form_wrap .form_st.faq.gita .toggleWrap.on .faq_tit span { color: #999;} .form_wrap .form_st.faq.gita .faq_in { padding: 0.5em 0;margin-top: 0em;} .form_wrap .form_st.picCar > li { width: 25%;} .form_wrap .form_st.picCar > li .form_lab { display: block; padding: 0 .5em;} .form_wrap .form_st.picCar > li .form_lab .lab_tit { width: 100%;margin-right: 0;gap: 0;padding-left: 0;} .form_wrap .form_st.picCar > li .form_lab .tit1 { margin: auto;} .form_wrap .form_st.picCar > li .form_lab .label_file .file { display: block; width: 100%;} .form_wrap .form_st.regist{} .form_wrap .form_st.regist > li{ padding:1em 2em; border:2px solid #ddd; border-radius: .5em;} .form_wrap .form_tit + .form_st.regist > li:first-child{ border-top:2px solid #ddd;} .form_wrap .form_st.regist .form_lab{} .form_wrap .form_st.comment{ padding:2em; border:1px solid #ddd; border-radius: .5em;} .form_wrap .form_st.comment p{ margin:0; padding-bottom: 0;} .carPrice .carReady .tt_price {display:none !important;} .carPrice .carReady .carBtn.c1 { background:#aaa !important;width: 16em;} /* 할부계산기 */ .form_st.cal{ padding:0 .5em; font-size:.9375em;} .cal_list{margin-top: 1em;padding: 1em 1.5em;border: 2px solid #ddd;border-radius:.5em;} .cal_list:first-child{ margin-top:2em;} .cal_list.total{ margin-top:4em; border-color:#003366} .form_st.cal .inp_tit{color:#111;font-size:1.125em;padding-bottom: .8em;/* margin-top:30px */} .form_st.cal .inp_tit *{ vertical-align:middle} .form_st.cal .inp_tit .xi{ color:#c60909;} .form_st.cal .inp_list{ display: flex;flex-wrap: wrap; gap:.8em;} .form_st.cal .inp_list > li{ width: calc( (100% - .8em) / 2);} .form_st.cal .inp_list > li.w100{ width:100%!important;} /* .form_st.cal .inp_list > li *{ transition:.3s} */ .form_st.cal .inp_list > li .in{background:#fff;/* box-shadow:0 1px 3px rgba(0,0,0,.2); *//* border-left:5px solid #aaa; */position:relative;/* padding:10px; */width: 100%;box-sizing: border-box;display: flex;gap: 1.5em;} .form_st.cal .inp_list > li .in .tit_wrap{/* width:8em; *//* background:#f1f1f1; */min-width:6em; text-align:left; position:relative;padding-left: 1em;} .form_st.cal .inp_list > li .in .tit_wrap::after{content:'';width:5px;height:5px;border-radius:50%;background-color:#999; position:absolute;left:0;top: 19px;} .form_st.cal .inp_list > li .in .inp_wrap{/* padding:.5em 0; */} .form_st.cal .inp_list > li .in .inp_wrap .inp{ cursor:pointer; box-sizing: border-box; border:1px solid #ddd; height:40px; padding-top:5px; padding-bottom:5px; border-radius:3px; color:#333; vertical-align:middle} .form_st.cal .inp_list > li .in .inp_wrap .tt{ vertical-align: middle; color: #666;} .form_st.cal .inp_list > li .in .inp_wrap .tt2 { vertical-align: middle; color: #003366; padding-left: 10px;} .form_st.cal .inp_list > li .in .inp_wrap .input_st[disabled="disabled"]{ background:#666; cursor:default; border-color:#666; color:#fff} /* .form_st.cal .inp_list > li .in:hover{ border-color:#333} */ .inp_wrap.cal{ position: relative;} .inp_wrap.cal .input_st{ padding-right: 2em;} .cal_btn_wrap{ display: flex; flex-direction: column; gap: 2px; position: absolute;left: 12.5em;top: 50%;transform: translateY(-50%);} .cal_btn{ border: none; background-color:#fff; color: #555; border-radius: .2em; font-size: .75em;} .cal_btn.up{} .cal_btn.down{} .cal_list .memo_st{ padding:1em; border:1px solid #ddd; border-radius: .25em; background-color:#f8f8f8; } .cal_list .memo_st .tit{ margin-bottom: .5em; font-weight: 700; color:#333;} .cal_list .memo_st .tt{ font-size: .875em; color:#555; line-height: 1.5;} .cal_list.total .input_st{ background-color:#f5f5f5;} /* 리스계산기 */ .cal_line{margin:1em 0; border-bottom: 1px dashed #333;} /* 승계 */ /* 슈퍼카 */ .board_banner .kakao{ display:inline-block; margin-top:.5em;} .board_banner .kakao > a{ display: inline-flex; padding:.5em .8em; background-color:#f9e000; color:#3b1c1c} .board_banner .kakao .xi{margin-right: 5px;} .board_banner .kakao .tt{} .form_lab .note-editor{ width:100%;} .form_lab .note-toolbar{ zoom:.8;} /******자동차용품*****/ .step_tit{ padding-bottom:1.5em; text-align:center} .step_tit .t1{ color:#aaa; font-size:.750em; letter-spacing:2px;} .step_tit .t2{ color:#000; font-size:1.750em; font-weight:700; padding-top:.25em} .step_st{ width:800px; max-width:100%; margin:1em auto 3em auto;} .step_st > li{ width:33%; position:relative;} .step_st > li .in{ position:relative; padding-left:5em; color:#aaa} .step_st > li .in .line{ position:absolute; width:100%; height:4px; left:0; top:50%; margin-top:-2px; background:#ddd} .step_st > li .in .icon{ position:absolute; left:0; top:50%; margin-top:-1em; width:2em; line-height:2em; background:#f5f5f5; border:1px solid #ddd; border-radius:100%; color:#bbb; font-size:1.875em; text-align:center} .step_st > li .in .t1{ letter-spacing:1px; font-size:.688em; padding-top:.25em} .step_st > li .in .t2{ padding-top:1em} .step_st > li.on .in{ color:#000} .step_st > li.on .in .line{ background:#000} .step_st > li.on .in .icon{ background:#000; border-color:#000; color:#fff} .table_st.shop{ border-top:2px solid #333; /* table-layout:fixed */} .table_st.shop th, .table_st.shop td{ padding:.5em 1em; height:3em; border:none;} .table_st.shop th{ background:#fff; color:#000; font-weight:500; border-bottom:1px solid #ddd} .table_st.shop td{ background:#fff; color:#666; text-align:left; border-bottom:1px solid #ddd; padding:1em 1em} .table_st.shop.size2 td{ padding:2em .5em;} .tableScorll{ overflow-x:auto; scrollbar-width: thin; scrollbar-color: gray transparent;scrollbar-face-color: #666; scrollbar-track-color: #f1f1f1; scrollbar-arrow-color: none; scrollbar-highlight-color: #f1f1f1; scrollbar-3dlight-color: none; scrollbar-shadow-color: #fff; scrollbar-darkshadow-color: none;} .tableScorll::-webkit-scrollbar { height: 5px} .tableScorll::-webkit-scrollbar-track { background-color:#f5f5f5} .tableScorll::-webkit-scrollbar-thumb { border-radius: 10px; background-color:#002c60; background-clip: padding-box; border:none} .tableScorll::-webkit-scrollbar-button { width: 0; height: 0;} .label_st.de{ display: inline-flex;} .prod_info_wrap{} .enterInfo_bottom{ font-size:.875em} .prod_info_wrap .img, .prod_info_wrap .tt{ display:inline-block; *display: inline; zoom:1; vertical-align:middle} .prod_info_wrap .img{ width:10em; max-width:16%} .prod_info_wrap .tt{ width:20em; max-width:80%; padding-left:2%} .prod_info_wrap .tt .t1{ font-size:1em; color:#000} .prod_info_wrap .tt .t2{ font-size:.938em; color:#999; padding-top:.5em} .prod_info_wrap .tt .t2:before{ content:"ㄴ"} .board_st .prod_info_wrap .img{ border:1px solid #ddd} .board_st .prod_info_wrap .tt .t1{ font-size:inherit} .vol_st{ display:inline-block; *display:inline; zoom:1;} .vol_st .btn, .vol_st .inp{ float:left; line-height:2.25em; height:2.25em; font-size:1em; border:1px solid #ddd; box-sizing:border-box; background:#fff} .vol_st .btn{ width:2.5em; color:#111} .vol_st .btn.minus .xi:before{content:"\e91b"} .vol_st .btn.plus .xi:before{content:"\e914"} .vol_st .btn:hover{ background:#f5f5f5} .vol_st .inp{ width:3em; border-left:none; border-right:none;text-align:center} .vol_st .inp[disabled="disabled"]{ border:none} .no_cart{ padding:3em 0; font-size:.938rem; color:#999; text-align:center} .no_cart .xi{ font-size:4.5em; vertical-align:middle; color:#aaa; padding-right:.125em} td .no_cart{ border-bottom:none} .main .no_cart{ padding:6em 0; min-height:33.5em; box-sizing:border-box; font-size:1em} .order_wrap{ /* padding-right:23em */} .order_wrap .order_fix_wrap{ /* right:0; top:0; */ width:100%; margin-top: 4em;} .order_wrap .order_fix_wrap .order_fix{ width:100%} .order_wrap .order_fix_wrap .order_fix .in{ border:2px solid #333; padding:2em 1.5em; background:#fff} .order_wrap .order_fix_wrap .order_fix .in .orderfix_tit{ font-size:1.5em; color:#111; font-weight:500; padding-bottom:1em; margin-bottom:.5em; border-bottom:1px solid #333} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li{ position:relative; line-height:3em} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .tit{ font-size:.813em; color:#999; position:absolute; left:0; top:0} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .con{ text-align:right; font-size:.875em} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .con *{ color:#666; vertical-align: middle} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li .con .xi{ padding:.063em .125em 0 0;} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1{ border-top:1px solid #333; margin-top:1em; font-size:1.125em} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1 .tit{ color:#111} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1 .con{} .order_wrap .order_fix_wrap .order_fix .in .orderfix_con > li.st1 .con *{ color:#c60909} .order_wrap .order_fix_wrap .order_fix .in .orderfix_btn{ margin-top:1em; width:100%; padding:1em 0; height:auto; font-size:1.125em} .order_wrap .order_fix_wrap .order_fix .in .orderfix_agree{ font-size:.75em; color:#999; margin-top:1em; padding:1em .5em; border:1px solid #ddd} .order_wrap .order_fix_wrap .order_fix .in .orderfix_agree .label_st span{ /* max-width:85%; */ padding-left:.25em} .tbox{ text-align:center} .tbox .t0{ font-size:1.75em; color:#111; font-weight:500; letter-spacing:-1px; margin:.5em 0;} .tbox .t1{ font-size:1.5em; color:#111; font-weight:500;} .tbox .t2{ font-size:1em; color:#333; line-height:1.5; margin:1.5em 0} .tbox .t3{ font-size:.938em; color:#77787b; line-height:1.5; margin:1.5em 0 0 0;} .tbox .t4{ font-size:1.5em; color:#333; font-weight:500;} .tbox .t5{ font-size:1.25em} .tbox .c1{ color:#c60909} .tbox .order_no{ display:inline-block; *display:inline; zoom:1; background:#333; padding:0 2em; color:#fff; border-radius:3em; line-height:2.5em} .tbox .order_no .tt{ font-size:.875em} .tbox .order_no .no{ font-size:1.5em; font-weight:700; letter-spacing:1px} /* 자동차용품 카테고리 */ .page_tit2{ font-size:1.125em; color:#22; font-weight:500; padding-bottom:.5em} .page_tit2 .xi{ margin:-.125em .25em 0 0} .page_tit2 .xi:before{ content:"\e939"} .page_tit2 .t1{ font-size:.875em; color:#CC3333} .page_tit2 .no{ display:inline-block; margin:0 .25em 0 .5em; width:1.875em; height:1.875em; line-height:1.875em; background:#343b4d; border-radius:50%; font-size:1.375em; color:#fff; font-weight:700; text-align:center;} /**/ .page_sec_m05{ margin-top:-.5em} .page_sec_m1{ margin-top:-1em} .page_sec_m2{ margin-top:-2em} .page_sec_m3{ margin-top:-3em} .page_sec{ margin-top:3em} .page_sec2{ margin-top:2em} .page_sec3{ margin-top:1em} .page_sec4{ margin-top:.5em} .page_sec5{ margin-top:5em} .tt_pointBox{} .tt_pointBox .tt{ display:inline-block; margin-left:1em;} .tt_pointBox .tt:first-child{ margin-left:0;} .tt_point{font-size:1.250em;color: #0039c4;font-weight:700;} .tt_point.c1{ color:#375fff;} .tt_point.c2{ color:#ef4223;} .tt_price{} .tt_price .no { font-size:1.375em; color:#111; font-weight:700; padding-right:.125em; letter-spacing:-1px} .tt_price .tt {} .tt_price .tt2{ font-size:1.5em; color:#375fff} .tt_note{ position:relative; margin-top:1em; font-size:.813em; color:#999; padding-left:1.75em} .tt_note:before{ content:"\e9a6"; font-family:xeicon!important; position:absolute; left:0; top:-.25em; border-radius:100%; font-size:1.5em; color:#ccc} .tt_state1{ color:#777} .tt_state2{ color:#CC3333} .tt_state3{ color:#6633CC} .tt_state4{ color:#006699} .tt_state5{ color:#111} .tt_st1{ font-size:.813em} .tt_st2{ font-size:1.125em} /* mall_view */ .table_st.noline{ border-top:none} .table_st.size1 th, .table_st.size1 td{ padding:.5em 1em; height:2.25em; font-size:.875em} .mall_view_top{ margin-top:5em;} .mall_view_top .mall_view_img{ float:left; width:40%; position:relative; z-index:10} .mall_view_top .mall_view_img .big{ /* border:1px solid #c7cbd0; */ margin-bottom:.5em; position:relative} .mall_view_top .mall_view_img .big img{ cursor: pointer} .mall_view_top .mall_view_img .big .zoomArea{ position:absolute; left:100%; width:100%; top:-1px; bottom:-1px; z-index:1;} .mall_view_top .mall_view_img .big .zoomArea.active{ background:#fff; box-shadow:2px 2px 10px rgba(0,0,0,.2);} .mall_view_top .mall_view_img .thumb{ text-align:right; margin:0 0 0 -5px} .mall_view_top .mall_view_img .thumb > li{ width:16.66%} .mall_view_top .mall_view_img .thumb > li > a{ margin:5px 0 0 5px; border:1px solid #c7cbd0} .mall_view_top .mall_view_img .thumb > li:hover > a{box-shadow:0 3px 5px rgba(0,0,0,.3);} .mall_view_top .mall_view_info{ float:right; width:57%; position:relative;} .mall_view_top .mall_view_info .prod_tit{ border-top:2px solid #333; border-bottom:1px dashed #333; padding:1em .5em} .mall_view_top .mall_view_info .prod_tit .t1{ font-size:1.375em; color:#111; font-weight:500; letter-spacing:-1px;} .mall_view_top .mall_view_info .prod_tit .t2{ font-size:.875em; color:#999; padding-top:.625em;} .mall_view_top .mall_view_info .table_st.shop th, .mall_view_top .mall_view_info .table_st.shop td{ text-align: left;} .mall_view_top .mall_view_info .label_select.w100{ width:100%;} .mall_view_top .mall_view_total{ text-align:right; padding:1.5em; border-top:2px solid #333; margin-top:-1px} .mall_view_top .mall_view_total .no{ margin-left:.5em} .mall_view_top .mall_view_btn{ margin:0 -5px -5px 0; overflow:hidden} .mall_view_top .mall_view_btn > li *{ transition:.3s} .mall_view_top .mall_view_btn > li.st1{ width:44%} .mall_view_top .mall_view_btn > li.st2{ width:44%} .mall_view_top .mall_view_btn > li.st3{width: 12%;} .mall_view_top .mall_view_btn > li.st4{ width:30%} .mall_view_top .mall_view_btn > li .btn{ display:block; line-height:3.5em; margin:0 5px 5px 0; text-align:center; font-size:1.063em; font-weight:500; border:1px solid transparent; position:relative;} .mall_view_top .mall_view_btn > li .btn .icon{ font-size:1.5em; padding-right:5px} .mall_view_top .mall_view_btn > li.st1 .btn{ background:#c60909; color:#fff} .mall_view_top .mall_view_btn > li.st2 .btn{ background:#666; color:#fff} .mall_view_top .mall_view_btn > li.st3 .btn{ background:#fff; border-color:#aaa; color:#777} .mall_view_top .mall_view_btn > li.st4 .btn{ background:#844890; color:#fff} .mall_view_top .mall_view_btn > li .btn .arrow{ width:0; overflow:hidden} .mall_view_top .mall_view_btn > li .btn .arrow:after{ content:"\e93f"; padding-left:3px} .mall_view_top .mall_view_btn > li:hover .btn .arrow{ width:20px} .mall_view_top .mall_view_btn2{ margin:-.125em; margin-top:1em} .mall_view_top .mall_view_btn2 .btn{ padding:.5em 1em; color:#fff; font-size:.938em; margin:.125em; transition:.3s; border-radius:3em} .mall_view_top .mall_view_btn2 .btn .tt{ margin:0 .25em} .mall_view_top .mall_view_btn2 .btn:hover{ border-radius:3em} .mall_view_top .mall_view_btn2 .b1 .btn{ background:#FF0000} .mall_view_top .mall_view_btn2 .b2 .btn{ background: #003366} .mall_view_top .mall_view_btn2 .b3 .btn{ background: #330066} .mall_view_top .mall_view_btn2 .b4 .btn{ background: #336666} .mall_view_top .mall_view_btn2 .b5 .btn{ background: #990000} .mall_view_add{ } .mall_view_add .tit_wrap{ background:#375fff; color:#fff; padding:.5em 1em; font-size:.938em} .mall_view_add .tit_wrap .t1{ font-weight:700} .mall_view_add .tit_wrap .t2{ margin-left:.25em; opacity:.7; font-size:.938em} .mall_view_add .tit_wrap .btn{ border:1px solid #ddd; width:1.5em; line-height:1.5em; background:#fff; text-align:center; color:#375fff} .mall_view_add .list{ font-size:.938em} .mall_view_add .list > li .wrap_in{ border-top:1px solid #ddd; padding:1em} .mall_view_add .list > li .wrap_in .img_wrap{ width:7em; border:1px solid #ddd; margin-right:1em} .mall_view_add .list > li .wrap_in .con_wrap .t1{ font-weight:700} .mall_view_add .list > li .wrap_in .con_wrap .t2{ margin-top:.5em; font-weight:500; color:#375fff} .mall_view_add .list > li .wrap_in .con_wrap .opt{ margin-top:.75em} .mall_view_add .list > li .wrap_in .con_wrap .opt .opt_t1{ margin-bottom:.25em; color:#777; font-weight:500} .mall_view_add.on .list{ display:none} .mall_view_add.on .tit_wrap .btn{ transform:rotate(180deg)} .mall_view_top .top_title{ margin-bottom:1.5em; margin-top:-1em} .mall_view_top .top_title .info{ padding:1em 0} .mall_view_top .top_title .info .tit .t1{font-size:2em; color:#111; vertical-align:baseline} .mall_view_top .top_title .info .tit .t2{ color:#777; margin-left:2em; vertical-align:baseline; font-size:.875em; position:relative} .mall_view_top .top_title .info .tit .t2:before{ content:""; position:absolute; left:-1.5em; width:1em; bottom:.25em; height:1px; background:#111} .mall_view_top .top_title .info .type { margin-right:1em} .mall_view_top .top_title .info .type .type_st{ display:inline-block; *display:inline; zoom:1; width:3em; line-height:3em; border-radius:100%; color:#fff; text-align:center; font-size:.813em; margin-top:.125em} .mall_view_top .top_title .info .type .type_st.c1{ background: #990033} .mall_view_top .top_title .info .type .type_st.c2{ background: #003366} .mall_view_top .top_title .info .shop{ float:right; padding:.625em 1em; border:1px solid #ddd; color:#666; font-size:.813em} .mall_view_top .top_title .hash{ padding:.5em 1em; background:#f5f5f5} .mall_view_top .top_title .hash > li > a{ border:1px solid #ddd; background:#fff; color:#8b6262; font-size:.813em; padding:.25em 1em; border-radius:2em; margin-right:.5em} .mall_view_top .top_title .hash > li > a:before{ content:"# "} .mall_view_top.shop{ position:relative} .mall_view_top.shop .mall_view_img{ width:44%} .mall_view_top.shop .mall_view_img .big{ display:inline-block; *display:inline; zoom:1; vertical-align:bottom; width:80%; margin-bottom:0; padding:0} .mall_view_top.shop .mall_view_img .thumb{ display:inline-block; *display:inline; zoom:1; vertical-align:bottom; width:12.4%; margin:0 0 0 1%} .mall_view_top.shop .mall_view_img .thumb > li{ display:block; width:100%; margin-top:.25em} .mall_view_top.shop .mall_view_img .thumb > li > a{ margin:0} .mall_view_top.shop .mall_view_info{ width:55%} .mall_view_top.shop .mall_view_btn2{ margin-top:2em} .mall_view_top.shop .board_btn_wrap{ margin-top:1em} .mall_view_top.shop .board_btn_wrap .input_st{ min-width:12em} .mall_view_option{ font-size:.875em; background:#f9f9f9; color:#666} .mall_view_option > li{ border-top:1px solid #ddd; padding:0 1em} .mall_view_option > li:first-child{ border-top:none} .mall_view_option > li .va_wrap{ height:4em; text-align:left} .mall_view_option > li .tit{float:left;width: 50%;} .mall_view_option > li .vol{ float:left; width:20%} .mall_view_option > li .price{float:left; width:20%;text-align:right;} .mall_view_option > li .del{ float:left; width:7%; margin-left:3%; text-align:center} .mall_view_option > li .del button{ border:none; background:none} .mall_view_option > li .del .xi{ font-size:1.75em} .mall_view_wrap{ border:1px solid #ddd; padding:2.5em; min-height:18em} .mall_view_wrap.deli{} .mall_view_wrap.deli h3{ margin-bottom:.5em;} .mall_view_wrap.deli .t1{ font-size: .875em;;} .mall_view_wrap.deli .t1 strong{font-weight: 600;} .mall_view_wrap.deli .t2{ padding-left: 1em; font-size:0.875em;} .mall_view_wrap2{ border-bottom:1px solid #ddd; padding-bottom:3em } .mall_view_wrap2 .wrap_tit{ border-top:1px dashed #333; margin-top:3em; padding:1em; border-bottom:1px solid #ddd} .mall_view_wrap2 .wrap_tit .tt{ font-size:1.313em;} .mall_view_wrap2 .wrap_tit .xi:before{content:"\e937"; font-size:1.125em; margin-top:-1em; margin-right:.25em} .mall_view_wrap2 .wrap_con{ padding:1em 1em 1em 3em; line-height:1.5} .mall_view_wrap .board_search_wrap{ margin-bottom: 1em;} .tab_st{ border-bottom:1px solid #111; padding-right:1px;} .tab_st > li{ width:33.33%} .tab_st > li > a{ background:#f5f5f5; height:3.5em; color:#777; border:1px solid #ddd; margin-right:-1px; border-bottom:none; position:relative} .tab_st > li > a:after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#fff; display:none; z-index:1} .tab_st > li > a .va{ font-size:1.125em; font-weight:500;} .tab_st > li:hover > a{ color:#111} .tab_st > li.on > a{ background:#fff; border-color:#111; color:#111; z-index:1} .tab_st > li.on > a:after{ display:block} .tab_st > li.btn{ width:auto !important} .tab_st > li.btn > a{ margin-left:1em; background:#8c655d; border-color:transparent; color:#fff; padding:0 1.5em} .tab_st > li.btn > a .xi{ margin-top:-.125em} .tab_st1{ text-align:center; padding-left:1px} .tab_st1 > li{ width:25%} .tab_st1 > li > a{ display:block; border:1px solid #ddd; border-bottom:none; padding:1em 0; background:#f5f5f5; margin-left:-1px; position:relative; color:#777} .tab_st1 > li.on > a{ background:#fff; border-color:#ddd; z-index:1; color:#111} .tab_st1 > li.on > a:before{ content:""; position:absolute; left:-1px; top:-1px; padding-right:1px; width:100%; height:2px; background:#000} .tab_st1 > li.on > a:after{ content:""; position:absolute; left:0; bottom:-1px; padding-right:1px; width:100%; width:calc(100% - 1px); height:1px; background:#fff} .tab_st1 > li > a .ko{ display:block; font-size:1em; color:#666; font-weight:500;} .tab_st1 > li > a .en{ display:block; font-size:.75em; color:#aaa; padding-top:5px; text-transform:uppercase;} .tab_st1 > li.on .ko{ color:#111} .tab_st1 > li.on .en{ color:#777} /* 차량용품 상세페이지 */ html.pop .popWrap.review{top:2em} .BStit.on + .BScon{ display: table-row!important;} /* 리뷰, 문의 */ html.pop .popWrap.shop .popIn{ padding-top:4.5em;} html.pop .popWrap.shop .popIn:before { content: attr(data-tit); position: absolute; left: 0; top: 0; width: 100%; z-index: 1; color: #fff; display: block; left: 0; top: 0; padding: 0.7em 4em 0.7em 1em; font-size: 1.25em; background: #111; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; } html.pop .popWrap.shop .popIn .popCon .board_btn_wrap .input_st{ width:auto;} /* cart */ .prod_info_wrap.s1 {display: flex; align-items: center;} .table_st.shop td .vol_st{ zoom:.7;} /* order2.php */ .box_st{ padding:3em 2em; box-sizing: border-box;} /* myShopping */ .board_cate.myshop { margin-bottom:3em;} .table_st.shop.myorder td{ text-align: center;} .my_search_wrap{ padding:2em; border:1px solid #ddd; font-size:.938em; color:#666} .my_search_wrap .tit{ font-size:1.188em; margin-bottom:.5em; color:#111} .my_search_wrap .tit .xi{ font-size:1.5em; vertical-align: top; margin-top:-.2em} /* .my_search_wrap .date_btn{ display:block; margin-bottom: 0.8em;} */ .my_search_wrap .date_sel{} /* .my_search_wrap .order_num{ display:block; margin-top: 0.8em; text-align: center;} */ .my_search_wrap .input_st{ min-width:3em} .my_order_state{ margin-top:2em; border-top:1px solid #111} .my_order_state > li{ width:20%} .my_order_state > li .in{ padding:2em 1em; text-align:center; position:relative} .my_order_state > li .in:after{ content:""; position:absolute; left:-1px; top:30%; height:40%; width:1px; background:#ddd} .my_order_state > li:first-child .in:after{ display:none} .my_order_state > li .in .icon{ font-size:2.5em; color:#bbb; line-height:1em} .my_order_state > li .in .tt{ padding:.75em 0 0 0; font-size:.875em; color:#777} .my_order_state > li .in .no{ font-size:2em; color:#111; font-weight:500;} .memo_st.shop{ border:1px solid #ddd; background:#f7f7f7; padding:1.5em; margin-bottom:2em} .memo_st.shop .tt{ font-size:.938em; color:#666; margin-top:.5em; line-height:2em; position:relative; padding-left:2rem;} .memo_st.shop .tt:before{ content:"\e9a6"; font-family:xeicon!important; font-size:1.75em; color:#aaa; position:absolute; left:0; top:0} .memo_st.shop .tt:first-child{ margin-top:0} .memo_st.shop .tt * { vertical-align:baseline;} .memo_st.shop .tt strong{ font-weight:600;} .memo_st.shop .tt.t1{ font-size:1.063em; color:#111} .memo_st.shop .tt.t1:before{ color:#666;} .memo_st.shop .btn{ background:#3db4b3; color:#fff; font-size:.938em; padding:.25em 1em; border-radius:.5em} .sub_wishList .tit{ margin-bottom:1em} .sub_wishList .tit .t1{ font-weight:700; font-size:1.5em} .sub_wishList .tit .input_st{ margin-left:1em; border-radius:2em; padding:.5em 1em; font-size:.875em} .sub_wishList .list{ display:flex; flex-wrap:wrap; gap:.25em; margin-bottom:2em} .sub_wishList .list > li{ width:calc( (100% - 1.5em ) / 7);} .sub_wishList .list > li > a{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1em; text-align:center; border:1px solid #ddd; border-radius:.5em; color:#666; box-sizing:border-box; height:100%} .sub_wishList .list > li > a .ico{ display:block; font-size:1.375em} .sub_wishList .list > li > a .tt{ margin-top:.5em; line-height:1.1; display:flex; align-items:center; justify-content:center; flex:1 1 0%; min-width:0;word-break: break-all;} .sub_wishList .list > li:not(.add) > a .ico:before{content:"\ea11"; font-family:xeicon} .sub_wishList .list > li:hover > a{ background:#f5f5f5} .sub_wishList .list > li.on > a { background:#375fff; border-color:#375fff; color:#fff} .sub_wishList .list > li.add > a{ background:#000000; border-color:#000000; color:#fff} .total_point{ padding-right: 1em; font-weight: 600; font-size: 1.125em;} .total_point .num{ padding: 0 5px; font-weight: 800; font-size: 1.2em; color:#4e95ff} /***** 인증중고차 *****/ /* search */ .carList .priceList{ padding-right: 1em; gap:.2em;} .carList .priceList > li{ display:flex; justify-content: space-between; align-items: center;} .carList .priceList > li .tit{ margin-top: 0.2em; text-align-last: left; font-size: .875em; color:#777;} .carList .priceList > li .price{ padding-left:3em; text-align: right;} .carList .priceList > li .price .num{ margin-right:.2em; font-weight: 600; font-size: 1.25em; color:#c60909; } /* view */ .carList.st1 .usedPrice{ margin-top:1em;} .carList.st1 .usedPrice > .priceList{ gap:2em; } .carList.st1 .usedPrice > .priceList > li{ display: flex; justify-content: center; align-items: center; gap:1em; padding-right: 2em; border-right: 1px solid #ddd;} .carList.st1 .usedPrice > .priceList > li:last-child{ border-right: none;} .carList.st1 .usedPrice > .priceList > li .tit{ margin-top:.2em; font-size:.875em; color:#777; } .carList.st1 .usedPrice > .priceList > li .price{ padding-left:0;} .carList.st1 .usedPrice > .priceList > li .price .num{ font-weight: 600; font-size: 1.25em; color:#c60909; } .seller_box{display:flex;align-items:center;gap: 1em;margin-bottom:.5em;padding: 1em 2em;box-sizing:border-box;border:1px solid #ddd;border-radius:10px;background-color:#fff;} .seller_box .seller_img{} .seller_box .seller_img .img{ width: 6em;height: 6em; border-radius:50%; background-position: center top; box-shadow: 1px 1px 10px rgba(0, 0, 0, .1); position: relative;} /* .seller_box .seller_img .img::after{ content:"\e900"; display:flex; justify-content:center; align-items: center; width: .8em; height:.8em; padding:.5em; border-radius: 50%; background-color: #c60909; font-family:xeicon; color:#fff; position: absolute; right: 0; bottom: 0;} */ .seller_box .seller_info{ flex:1;} .seller_box .seller_info .infoTit{margin: .5em 0 .3em;} .seller_box .seller_info .infoTit .name{margin-right:.3em;font-weight: 600;font-size: 1.125em;} .seller_box .seller_info .infoTit .group{ font-size:.875em;} .seller_box .seller_info .infoList{gap: 2em;font-size: .875em;color:#555;} .seller_box .seller_info .infoList > li{ position: relative;} .seller_box .seller_info .infoList > li:not(:last-child)::after{content: "·";position: absolute;left: 100%;top: 0;width: 2em;text-align: center;} .seller_box .seller_info .infoList > li:hover > a{ color:#0039c4} /* 인증중고차 팝업 */ .popWrap.usedCar{ max-width: 65vw!important; top:2em;} .popWrap.usedCar .popCon{} .popWrap.usedCar .popCon .notice_wrap{ margin-bottom:.5em; padding:1em 1.5em; border:1px solid #ddd; border-radius: .5em; } .popWrap.usedCar .popCon .notice_list{} .popWrap.usedCar .popCon .notice_list > li{ padding-left:.8em; line-height:1.5; color:#555; position: relative;} .popWrap.usedCar .popCon .notice_list > li::after{ content: ''; width: 3px; height: 3px; border-radius:.5; background-color: #777; position: absolute; left: 0; top: 10px;} .popWrap.usedCar .popCon .img_wrap{ height: 35em; padding:1em; border:1px solid #ddd; border-radius: .5em;} /* 판매자 정보 */ .seller_box.s2{ gap:3em; align-items: flex-start;} .seller_box.s2 .seller_img{} .seller_box.s2 .seller_img .img{ width:10em;height:10em;} .seller_box.s2 .seller_img .img::after{ display: none;;} .seller_box.s2 .seller_info_wrap{ width:calc( 100% - 13em); justify-content: space-between;} .seller_box.s2 .seller_info{ width:50%;} .seller_box.s2 .seller_info .infoTit{margin: .5em 0 .3em;} .seller_box.s2 .seller_info .infoTit .name{margin-right:.3em;font-weight: 600;font-size: 1.125em;} .seller_box.s2 .seller_info .infoTit .group{ font-size:.875em;} .seller_box.s2 .seller_info .infoList{gap: 2em;font-size: .875em;color:#555;} .seller_box.s2 .seller_info .infoList > li{ position: relative;} .seller_box.s2 .seller_info .infoList > li:not(:last-child)::after{content: "·";position: absolute;left: 100%;top: 0;width: 2em;text-align: center;} .seller_box.s2 .seller_info .infoList > li:hover > a{ color:#0039c4} /* 등록완료 */ .fin_btn_wrap{margin-top: 3em;} /* 승계 view_wi12 */ .form_con_wrap{ gap:4em; position: relative;} .form_con_wrap .form_con.img_wrap{ width: 50%; max-height: 50vh; padding-bottom: 6em; position: sticky; top: 0;} .form_con_wrap .form_con.img_wrap .viewSlider{ border:1px solid #eee;} .form_con_wrap .form_con.img_wrap .viewSlider .el .resize{ padding-bottom: 85%;} .form_con_wrap .form_con.info{ flex:1; } .form_con_wrap .form_con.info .info_tit{ margin-bottom: 1em; font-weight: 700; font-size: 1.75em;} .form_con_wrap .form_con.info .info_cont{ padding: 1em 0; border-top:1px solid #111;} .form_con_wrap .form_con.info .info_cont .t1{ font-weight: 700; font-size: 1.125em;} .form_con_wrap .form_con.info .info_cont > ul{ margin-top: .8em; padding:1.5em 1em; background: #f8f8f8;} .form_con_wrap .form_con.info .info_cont > ul li{ display: flex; gap:1em;} .form_con_wrap .form_con.info .info_cont > ul li + li{ margin-top: 0.8em;} .form_con_wrap .form_con.info .info_cont > ul li .dt{ width: auto; font-weight: 700; color:#555;} .form_con_wrap .form_con.info .info_cont > ul li .dd{ flex:1;} .form_con_wrap .form_con.info .info_price{ } .form_con_wrap .form_con.info .info_price > ul{ gap:.25em;} .form_con_wrap .form_con.info .info_price > ul > li{ padding: 1.5em; box-sizing: border-box; border:1px solid #ddd; border-radius: .5em;} .form_con_wrap .form_con.info .info_price > ul > li .pri_list{ } .form_con_wrap .form_con.info .info_price > ul > li .pri_list > li{ display: flex; justify-content: space-between;} .form_con_wrap .form_con.info .info_price > ul > li .pri_list > li + li{ margin-top: 0.5em;} .form_con_wrap .form_con.info .info_price > ul > li .pri_list .tt{} .form_con_wrap .form_con.info .info_price > ul > li .pri_list .td{} .form_con_wrap .form_con.info .info_price > ul > li .pri_list .td span{ margin-left:10px; font-weight: 700; font-size: 1.25em; color:var(--siteC); vertical-align: baseline;} .form_con_wrap .form_con.info .info_price > ul > li.mon{ flex: 0 0 100%;} .form_con_wrap .form_con.info .info_price > ul > li.mon .tit{} .form_con_wrap .form_con.info .info_price > ul > li.ini{ flex: 0 0 100%;} .form_con_wrap .form_con.info .info_price > ul > li .tit{ margin-bottom: 1em; font-weight: 700; color:#333;} .form_con_wrap .form_con.info .info_price > ul > li .pri{ text-align: right;} .form_con_wrap .form_con.info .info_price > ul > li .pri span{ margin-left:10px; font-weight: 700; font-size: 1.25em; color:var(--siteC); vertical-align: baseline;} .form_con_wrap .form_con.info .info_cont.seller{ margin-top: 1em; padding-bottom: 0; border-color:#ddd;} .form_con_wrap .form_con.info .info_cont.seller > ul li .dt{ width: 15%;} /* 프로모션 */ .board_gallery.prom{ gap:4em 1.5em} .board_gallery.prom > li { width: calc((100% - 3em) / 3); transition: all .3s;} .board_gallery.prom > li .img_wrap{ position: relative;} .board_gallery.prom > li .img_wrap .logo{ width: 20%; height: 3em; position: absolute; left: 10px; top: 10px;} .board_gallery.prom > li .con_wrap{ padding: 0; border-width: 0 1px; border-style: solid; border-color:#eee;} .board_gallery.prom > li .con_wrap .car_tit{ text-align:center; font-weight: 700; font-size:1.25em; color:#111; letter-spacing:-1px; padding:10px; border-bottom: 1px solid #eee; background: #f8f8f8; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; transition: all .3s;} .board_gallery.prom > li .con_wrap .car_info{ padding:15px} .board_gallery.prom > li .con_wrap .car_info > li{ display: flex; gap:.25em} .board_gallery.prom > li .con_wrap .car_info > li + li{margin-top: 0.5em;} .board_gallery.prom > li .con_wrap .car_info > li .t1{ flex:0 0 auto; font-size:.9375em; color:#111} .board_gallery.prom > li .con_wrap .car_info > li .t2{ flex:1; font-size:.9375em; color:#777} .car_price_st{} .car_price_st > li{ width:33.33%} .car_price_st > li > .in{ text-align:center; padding-bottom:2px} .car_price_st > li > .in .tit{ font-size:.875em; color:#fff; padding:5px 5px;} .car_price_st > li:nth-child(1) > .in{ background:var(--siteC)} .car_price_st > li:nth-child(2) > .in{ background: #2e343e} .car_price_st > li:nth-child(3) > .in{ background:#7b8390} .car_price_st > li > .in .price{ border-left:1px solid #ddd; padding:10px 5px; background:#fff} .car_price_st > li:first-child > .in .price{ border-left:none} .car_price_st > li > .in .price .t1{ font-family:shsR,sans-serif; font-size:.938em; color:#111; vertical-align:baseline} .car_price_st > li > .in .price .t2{ font-size:.813em; color:#777; vertical-align:baseline; padding-left:5px} .car_price_st.view > li > .in{ font-size:1.313em} .car_price_st.view > li > .in .tit{ padding:15px} .car_price_st.view > li > .in .price{ padding:15px} .board_gallery.prom > li:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, .15);} .board_gallery.prom > li:hover .con_wrap .car_tit{ background: #2e343e; color:#fff;} .form_con_wrap.prom{ gap: 2em; padding: 2em 1em 1.5em; border-top:3px solid #111; border-bottom: 1px solid #ddd; } .form_con_wrap.prom .form_con.img_wrap{ width: 45%; max-height: auto; padding: 1.5em; border-radius: .5em; background: #f6f6f6; position: unset;} .form_con_wrap.prom .form_con.img_wrap .photo{ padding-bottom: 100%; } .form_con_wrap.prom .form_con.info{ padding: 0;} .form_con_wrap.prom .form_con.info .info_cont { padding-top: 0; border-top:none;} /* user ID */ /* .userId > ul{ gap:.35em;} .userId > ul > li{} .userId > ul .badge{ width: 1em; height: 0; padding-bottom: 100%;} .userId > ul .id{ font-weight: 600;} .userSt .lv, .userNd .lv, .userId > ul .lv{ padding-left: 0.25em; border-radius: .5em; font-size: .75em; color:#777;} */ .userId { display: flex; justify-content: center;align-items: center; gap:.25em;} /* .userId .badge{ width: 1em; height: 0; padding-bottom: 100%;} */ .userId .id{ font-weight: 600;} .userSt .lv, .userNd .lv, .userId .lv{ padding-left: 0.25em; border-radius: .5em; font-size: .875em; color:#777;} i.badge{ display: block; width: 1em; height: 1em; background: url(/images/icon/id_badge.png) no-repeat center 100% / contain;} #header .userId .lv{ padding-top:2px; font-size:.875em; vertical-align:baseline; letter-spacing:-1px} /* mypage myLevel */ .myLevel{margin: 0 1.5em 3em; padding: 2.5em 2em; border: 1px solid #ddd; border-radius: 1em; box-shadow: 0 0 10px rgba(0, 0, 0, .05);} .myLevel .userId_wrap{ margin-bottom: 1em;} .myLevel .userId{ justify-content: flex-start; padding-left: 0.5em; zoom: 1.75; cursor: none;} .myLevel .userId_wrap > .t1{ padding-left: 0.25em; font-size: 1.125em;} .myLevel .btn_wrap{} .myLevel .btn_wrap > ul{ padding: .5em; gap:.25em; background: #f8f8f8;} .myLevel .btn_wrap > ul > li{ display: flex; flex-direction: column; gap:.5em; align-items: center; width: calc((100% - .5em) / 3); padding: 1em 1.5em; box-sizing: border-box; border:1px dashed #ddd; background: #fff;} .myLevel .btn_wrap > ul > li .xi{ font-size: 2em; color:#b49f76} .myLevel .btn_wrap > ul > li .tit{ font-weight: 600; font-size: 1.125em; text-align: center;} .myLevel .btn_wrap > ul > li.levelInfo{} .myLevel .btn_wrap > ul > li.levelInfo .lv{ vertical-align: bottom;} .myLevel .btn_wrap > ul > li.levelInfo .lv .tt{ padding-top: 5px; font-weight: 600; font-size: 1.25em; color:#777;} .myLevel .btn_wrap > ul > li.levelInfo .lv .num{ font-weight: 800; font-size: 2em; color:#555;} .myLevel .btn_wrap > ul > li.levelInfo .expCon{ width: 100%; height: 1em; border:1px solid #eee; border-radius: 1em; background: #f9f9f9; position: relative; overflow: hidden; } .myLevel .btn_wrap > ul > li.levelInfo .expCon .exp{ height: 100%; background: #b49f76; font-weight: 600; font-size: .9375em; line-height: 1.5rem; color:#fff; text-align: center; position: absolute; left: 0; top: 0; box-shadow: 5px 0 5px rgba(0, 0, 0, .05);} .myLevel .btn_wrap > ul > li.levelInfo .expCon + .tt{ margin-top: 0.25em; font-weight: 600;} .myLevel .myAct{ margin-top: 1.5em;} .myLevel .myAct .tit{ margin-bottom: 0.5em; font-weight: 600; font-size: 1.5em; color:#333;} .myLevel .myAct .con{ border-top:1px solid #ddd;} .myLevel .myAct .con dl{ display: flex; gap:1em; min-height: 2.5em; padding: 0 .5em; border-bottom:1px solid #ddd;} .myLevel .myAct .con dl dt{ width: 8em;} .myLevel .myAct .con dl dt .tt{ font-size: 1.125em; color:#333; line-height: 2.5rem;} .myLevel .myAct .con dl dd{ flex:1; padding: .5em 1em;} .myLevel .myAct .con dl dd .snsList{} .myLevel .myAct .con dl dd .snsList > li{} .myLevel .myAct .con dl dd .snsList > li .icon{ margin-right: 5px; transition: all .3s;} .myLevel .myAct .con dl dd .snsList > li:hover a{ text-decoration: underline;} html.pop .popWrap.levelRule{ width: 50vw;} html.pop .popWrap.levelRule .popTit { background: #b49f76; color:#fff;} .levelRule{ padding: 2.5em 2em;} .levelRule .tit{} .levelRule .dot_list{} .levelRule .dot_list > .dot{ padding-left: 0.8em; position: relative;} .levelRule .dot_list > .dot + .dot{ margin-top: 0.5em;} .levelRule .dot_list > .dot::before{ content: ''; width: 0.25em; height: 0.25em; border-radius: 50%; background: #555; position: absolute; left: 0; top: 8px;} /* 커뮤니티 아이디 */ /* .userId_wrap{ position: relative; cursor: pointer; } .userId_wrap .userBox{ position: absolute; left: 12px; top:calc(100% + 2px);} .userId_wrap .userBox > ul{display: flex;flex-direction: column;gap:.5em;padding: .25em 0;border:1px solid #ddd;border-radius: .5em;background: #fff;} .userId_wrap .userBox > ul >li{ } .userId_wrap .userBox > ul >li a{ display: flex; align-items: center; gap:.25em; padding:0 .5em;} .userId_wrap .userBox > ul >li a .tt{ font-size: .875em; color:#555;} .userId_wrap.on .userBox{ display: block!important; } .userId_wrap:hover .userId > ul .id{ text-decoration: underline;} .userId_wrap .userBox > ul >li:hover a .tt{text-decoration: underline;} */ html.pop .popWrap.profile{ width: 40vw;} html.pop .popWrap.profile .popTit{ align-items: center; background-color: #fff;} html.pop .popWrap.profile .popTit .tit{ padding-top: 0;} html.pop .popWrap.profile .popTit .userId{ zoom:1.25;} html.pop .popWrap.profile .popCon .btn_wrap{ gap:1em;margin-top: 1em;} html.pop .popWrap.profile .popCon .seller_box .input_st{ width: auto; margin:0;} html.pop .popWrap.profile .popCon .seller_box{ padding: 1em 1.5em; border-width: 1px 0 1px; border-top-color:#111; border-radius: 0;} .profile_bottom{ padding:1em 1.5em 1em 8.5em; border-bottom: 1px solid #ddd;} .profile_bottom .snsList{ } .profile_bottom .snsList > li{ padding-left: 1em; position: relative;} .profile_bottom .snsList > li + li{ margin-top: 0.8em; } .profile_bottom .snsList > li::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c60909; position: absolute; left: 0; top: 8px;} .profile_bottom .snsList > li > a{ display: block; } .profile_bottom .snsList > li dl{ display: flex; gap:1em; } .profile_bottom .snsList > li dt{ width: 15%; font-weight: 600; color:#777 } .profile_bottom .snsList > li dd{ flex:1; } .profile_bottom .snsList > li:hover dd{ text-decoration: underline;} html.pop .popWrap.report{ width: 50vw;} /* 에디터 */ .note-editor .note-toolbar .note-insert .note-btn[aria-label="그림"]:has(.note-icon-picture){ padding:.25em 1.5em .25em 1.25em!important; box-sizing: border-box; background: var(--siteC); } .note-editor .note-toolbar .note-insert .note-btn[aria-label="그림"] .note-icon-picture{ font-size: 1.375em; color:#fff; } .form-group.note-group-image-url::after{content: '호스팅된 사진의 URL 전체 입력'; display: block; margin-top: 5px; margin-left: 5px; font-size: .875em; color:#666;} /* 안내멘트 */ .miniBanner{ padding: 1em; border-radius: .25em; border:1px solid #ddd; background:#fafafa;} /*제휴*/ .promotion_wrapper{} .promotion_wrapper .promotion_bg{ position: relative; width: 100%; padding: 4em 0; box-sizing: border-box;} .promotion_wrapper .promotion_bg.pd_st2 {padding: 6.5em 0;} .promotion_wrapper .promotion_bg:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .3); content: '';} .promotion_wrapper .promotion_bg .infoArea{ position: relative; z-index: 2; padding: 0 3vw; box-sizing: border-box;} .promotion_wrapper .promotion_bg .infoArea > .tit{ color: #fff; font-size: 2.515em; font-weight: 600; line-height: 1.4;} .promotion_wrapper .promotion_bg .infoArea > .tit > i{ vertical-align: baseline; font-style: italic; /* background: #1d6ce5; */ background: var(--siteC); padding: .1em .75em; font-weight: 800; clip-path: polygon(3% 0, 100% 0%, 97% 100%, 0% 100%);} .promotion_wrapper .promotion_bg .infoArea > .txt{ font-size: 2.515em; font-weight: 800; color: #fff; margin-top: 1em;} .promotion_wrapper .promotion_bg .infoArea > .txt > i{ position: relative; vertical-align: baseline; color: var(--siteC2);} .promotion_wrapper .promotion_bg .infoArea > .txt > i:before{ /* position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: #1d6ce5; opacity: .7; content: ''; z-index: -1; */} .promotion_wrapper .proBox{ margin-top: 5em;} .promotion_wrapper .proBox .title{ font-size: 1.715em; font-weight: 800; margin-bottom: 1em;} .promotion_wrapper .proBox .title > i{ vertical-align: baseline;} .promotion_wrapper .proBox .proCon{ display: flex; gap: 4em; align-items: center;} .promotion_wrapper .proBox .proCon .img_con{ width: 40%; height: 17em; border-radius: .5em; overflow: hidden;} .promotion_wrapper .proBox .proCon .img_con.w2 {width: 25%; height: 26em;} .promotion_wrapper .proBox .proCon .img_con > img{ width: 100%; height: 100%; object-fit: cover;} .promotion_wrapper .proBox .proCon .infoCon{ width: 60%;} .promotion_wrapper .proBox .proCon .infoCon.w2 {flex: 1;} .promotion_wrapper .proBox .proCon .infoCon li{ margin-bottom: 1em;} .promotion_wrapper .proBox .proCon .infoCon li:last-of-type{ margin-bottom: 0em;} .promotion_wrapper .proBox .proCon .infoCon li > .con{ display: flex; gap: 1.5em; background: #f1f1f1; align-items: center; box-sizing: border-box; border-radius: 10em; overflow: hidden;} .promotion_wrapper .proBox .proCon .infoCon li > .con > .num{ display: flex; font-size: 1.1em; align-items: center; border-radius: 10em; overflow: hidden; justify-content: center; color: #fff; font-weight: 800; padding: 0 1.5em; height: 2.5em; background: var(--siteC);} .promotion_wrapper .proBox .proCon .infoCon li > .con > .txt{ font-size: 1.215em; font-weight: 700;} .promotion_wrapper .subTit{ margin-bottom: 1.5em; margin-top: 4em;} .promotion_wrapper .subTit > p{ font-size: 2.15em; font-weight: 800;} .flex_box.s1{ margin: 0 0 -1em -1em} .flex_box .fst4{ display: flex;} .flex_box .fst4 > li{ width: calc(25%);} .flex_box .fst4 > li > .in{ margin: 0 0 1em 1em;} .BoxList{ margin-top: 5em;} .BoxList > li{ display: flex;} .BoxList > li > .in{ flex: 1; padding: 2.5em; box-sizing: border-box; background: #edf1f4; border-radius: 1em;} .BoxList > li > .in > .icon{ text-align: center; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #ddd;} .BoxList > li > .in > .icon > img{ width: 8em; height: 120px; object-fit: contain;} .BoxList > li > .in > .txt{ font-size: 1.415em; font-weight: 800; text-align: center;} .BoxList > li > .in > .txt > i{ vertical-align: baseline;} .wordImg{ position:relative; width: 100%; height: 15em; margin-top: 4em; border-radius: 1em; overflow: hidden;} .wordImg:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .15); content: '';} .wordImg > img{ width: 100%; height: 100%; object-fit: cover;} .wordImg > .tt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 2.315em; font-weight: 800;} .wordList { display:flex; flex-wrap:wrap; justify-content:center; gap:.5em; margin-top: 1em; padding: 2em; border-radius: 1em; box-sizing: border-box; border: 1px solid #e9e9e9;} .wordSt { height:2.5em; display:flex; align-items:center; justify-content:center; border-radius:7vmin; background:#eee; box-sizing:border-box; padding:0 1em; font-size: 1.163em; color:#666; } .wordSt .t1 { font-weight:600 } .sub_inquiry_wrap{ position:relative; overflow:hidden; background:rgba(0,96,174,.1); border-radius:0 0 1em 0} .sub_inquiry_wrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:0 0 12em 0; overflow:hidden} .sub_inquiry_wrap .wrap_in{ padding:4em ; position:relative; color:#fff; z-index:1} .sub_inquiry_wrap .wrap_in .tt{ font-size:1.8em; line-height:1.6em; font-weight:300} .sub_inquiry_wrap .wrap_in .tt span { font-weight:800; vertical-align: baseline;} .sub_inquiry_wrap .dot{ position:absolute; border-radius:50%; width:8%; padding-bottom:8%} .sub_inquiry_wrap .dot.d1{ right:3%; bottom:8%; background:#0060ae; opacity:1} .sub_inquiry_wrap .dot.d2{ right:6%; bottom:24%; border:.25em dashed #fff; transform:scale(.5)} .sub_inquiry_wrap2 { position:relative; z-index:1 } .sub_inquiry_wrap2 .inquiry {} .sub_inquiry_wrap2 .wInc { border-radius:1em; box-sizing:border-box; overflow:hidden; position:relative } .sub_inquiry_wrap2 .img_wrap { order:-1; width:30vw; padding:5vmin; position:relative } .sub_inquiry_wrap2 .img_wrap .bg { position:absolute; left:0; top:0; width:100%; height:100%; filter:saturate(0) brightness(2); transition:.5s } .sub_inquiry_wrap2 .img_wrap .bg:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.5; transform-origin:0 0; transition:1s } .sub_inquiry_wrap2 .img_wrap > * { position:relative } .sub_inquiry_wrap2 .con_wrap { flex:1; min-width:0; background:#f4f4f4; border: 1px solid #ddd; padding:5vmin } /* .sub_inquiry_wrap2 .btn_wrap { width:12vw; border:1px solid var(--siteC); display:flex; align-items:center; justify-content:center; } .sub_inquiry_wrap2 .btn_wrap button.st { position:relative; flex:1; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5em; background:var(--siteC); color:#fff; display: inline-flex; outline: none; } */ .sub_inquiry_wrap2 .btn_wrap {border: 1px solid var(--siteC); display: flex; align-items: center; justify-content: center; } .sub_inquiry_wrap2 .btn_wrap button.st { position: relative; flex: 1; height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; background: var(--siteC); color: #fff; outline: none; border: none; font-size: 1rem; padding: 1em 1em; cursor: pointer; transition: background 0.3s ease; } .sub_inquiry_wrap2 .btn_wrap .st:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; outline: none; background:#fff; transform:scaleX(0); transform-origin:0 0 } .sub_inquiry_wrap2 .btn_wrap .st .t1 { font-weight:700; font-size:1.375em } .sub_inquiry_wrap2 .btn_wrap .st .arrow { font-size:2em } .sub_inquiry_wrap2 .btn_wrap .st > * { position:relative } .sub_inquiry_wrap2 .btn_wrap .st:hover { color:var(--siteC) } .sub_inquiry_wrap2 .btn_wrap .st:hover:before { transform:scaleX(1); transition:.5s } .sub_inquiry_wrap2 .btn_wrap:hover ~ .img_wrap .bg { filter:saturate(2) } .sub_inquiry_wrap2 .btn_wrap:hover ~ .img_wrap .bg:before { opacity:0 } .sub_inquiry_wrap2 .formSt { display:flex; flex-wrap:wrap; gap:1vmin; position:relative } .sub_inquiry_wrap2 .formSt > li { width:100% } .sub_inquiry_wrap2 .formSt .wrap_in { display:flex; align-items:center; gap:1em } .sub_inquiry_wrap2 .formSt .wrap_in > * { flex:1 1 0%; min-width:0 } .sub_inquiry_wrap2 .formSt .input_st { background-color:none } .sub_inquiry_wrap2 .formSt textarea { height:15vmin; padding:1.5em } .sub_inquiry_wrap2 .formSt .label_wrap {} .sub_inquiry_wrap2 .formSt .label_st { font-weight:700; color:#666; background: #fff;} .sub_inquiry_wrap2 .formSt .label_st .xi { border-color:#ccc } .sub_inquiry_wrap2 .formSt .btnW > * { flex:0 0 auto } .sub_inquiry_wrap2 .formSt .btnW .link { padding:.25em 1.25em; border-radius:2em; border:1px solid rgba(0,0,0,.3); font-size:.875em; font-weight:500; display:flex; align-items:center; color:#666 } .sub_inquiry_wrap3 {border: 1px dashed var(--siteC); padding: 1.5em;} .sub_inquiry_wrap3 .tt {background: #f4f4f4; border-radius: 4em; margin-bottom: .5em; font-size: 1.05em;} .sub_inquiry_wrap3 .tt:last-child {margin-bottom: unset;} .sub_inquiry_wrap3 .tt .num {background: var(--siteC); color: #fff; font-weight: 800; width: 3em; text-align: center; padding: .5em; border-radius: 5em; margin-right: 1em;} .sub_inquiry_wrap3 .tt span {font-weight: 800; vertical-align: baseline; font-size: 1.125em;}