@charset "utf-8"; @import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'); @import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css'); @import url('https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css'); /****************************************/ /* Name: DESIGN WAVE /* PART: CONTENTS STYLE /* Version: 1.0 /* Author: Kim Bo Reum /****************************************/ /*============================================================= 공통사용 =============================================================*/ *:focus {outline: none !important;} body {margin: 0 auto;} #exportCar-wrapper {position: relative; box-sizing: border-box; width: 100%; min-height: 100vh;} #exportCar-wrapper::before {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.55); content: ''; z-index: -1; transition: 300ms ease 50ms; opacity: 0; display: none;} #exportCar-wrapper h2 {font-size:29px;} #exportCar-wrapper h3 {font-size:25px;} #exportCar-wrapper h4 {font-size:23px;} #exportCar-wrapper h5 {font-size:21px;} #exportCar-wrapper h6 {font-size:17px;} /*== 인풋타입 ==*/ #exportCar-wrapper select {width: 100%; height:50px; border: 1px solid #e1e1e1; font-size: 15px; padding: 0 15px; background:url("../_img/resource/list-open-g.svg") no-repeat right 15px top 19px, #fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; background-size: 12px; border-radius: 5px;} #exportCar-wrapper select::-ms-expand { display:none; } #exportCar-wrapper input[type='text'] {width: 100%; height: 45px; border-radius: 5px; box-sizing: border-box; padding: 0 12px; font-size: 16px; border: 1px solid #e1e1e1} #exportCar-wrapper input[type='number'] {width: 100%; height: 45px; border-radius: 5px; box-sizing: border-box; padding: 0 12px; font-size: 16px; border: 1px solid #e1e1e1} #exportCar-wrapper input[type='password'] {width: 100%; height: 45px; border-radius: 5px; box-sizing: border-box; padding: 0 12px; font-size: 16px; border: 1px solid #e1e1e1} #exportCar-wrapper textarea {width: 100%; height: 150px; border-radius: 5px; box-sizing: border-box; padding: 20px 15px; font-size: 15px; border: 1px solid #e1e1e1; line-height: 1.37;} /*== 싱글 체크박스 ==*/ .single input[type=checkbox] {display:none;} .single input[type=checkbox] + label {position:relative; display:inline-block; cursor:pointer; padding-left:30px; font-size:16px; line-height: 20px; color: #303030;} .single input[type=checkbox] + label:before {position:absolute; left:0; top:0; display:inline-block; width:25px; height:25px; overflow: hidden; background-position: center; background-repeat: no-repeat; content: ''; background-size: 60%; background-image: url("../_img/resource/icon-check-non.png"); background-color:transparent; border: none;} .single input[type=checkbox]:checked + label:before {background-image: url("../_img/resource/icon-check-b.png");} /*== 싱글 체크박스 ==*/ .single input[type=radio] {display:none;} .single input[type=radio] + label {position:relative; display:inline-block; cursor:pointer; padding-left:24px; font-size:16px; line-height: 20px; color: #303030;} .single input[type=radio] + label:before {position:absolute; left:0; top:2px; display:block; width:16px; height:16px; overflow: hidden; border-radius: 100%; box-sizing: border-box; border: 2px solid #efefef; content: '';} .single input[type=radio]:checked + label:before {border-width: 5px; border-color: #2e73f2;} /*체크박스*/ ul.multi_line li input[type="checkbox"] {display:none;} ul.multi_line li input[type="checkbox"] + label {display:block; height:45px; line-height:45px; text-align:center; color:#212121; font-size: 14px; border:1px solid #e1e1e1; box-sizing: border-box; border-radius: 6px;} ul.multi_line li input[type="checkbox"]:checked + label {border:2px solid #2e73f2;} ul.multi_line li input[type="checkbox"]:checked + label span {background: url("../_img/resource/icon-check-b.png") no-repeat center right; background-size: 13px; padding-right: 20px} /*라디오버튼*/ ul.multi_line li input[type="radio"] {display:none;} ul.multi_line li input[type="radio"] + label {display:block; height:45px; line-height:45px; text-align:center; color:#212121; font-size: 14px; border:1px solid #e1e1e1; box-sizing: border-box; border-radius: 6px;} ul.multi_line li input[type="radio"]:checked + label {border:2px solid #2e73f2;} ul.multi_line li input[type="radio"]:checked + label span {background: url("../_img/resource/icon-check-b.png") no-repeat center right; background-size: 13px; padding-right: 30px} /*== 비디오비율 ==*/ .video-container {position:relative; padding-bottom:56.30%; height:0; overflow:hidden;} .video-container iframe,.video-container object,.video-container embed {position:absolute; top:0; left:0; width:100%; height:100%;} .video-container video,.video-container object,.video-container embed {position:absolute; top:0; left:0; width:100%; height:100%;} /*== 파일첨부 ==*/ .filebox {position: relative; box-sizing: border-box; padding-right: 55px;} .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .filebox label {display: inline-block; cursor: pointer; vertical-align: top; width: 50px; height: 45px; background: #2e73f2; color: #fff; text-align: center; line-height: 45px; margin-top: -1px; border-radius: 5px; font-size: 14px; position: absolute; top: 0; right: 0;} .filebox .upload-name {font-family: 'Pretendard'; display: inline-block; padding:10px; font-size:14px; border-radius: 5px; border: 1px solid #939393; vertical-align: middle; background-color: #fff; height: 45px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; box-sizing: border-box; color: #5f5e5e} /*== 공통사용버튼 ==*/ .comm_btns_wrap {position: relative; width: 100%; box-sizing: border-box;} .comm_btns_wrap button {width: 100%; height: 50px; border-radius: 5px; border:none; font-size: 15px; margin: 5px 0; box-sizing: border-box;} .comm_btns_wrap button.type1 {color: #fff; background: #2e73f2;} .comm_btns_wrap button.type2 {color: #5a5a5a; background: #fff; border: 2px solid #989898;} .comm_btns_wrap button.type3 {color: #fff; background: #c4c4c4;} .comm_btns_wrap button.type4 {color: #fff; background: #5a5a5a;} .comm_btns_wrap button.type5 {color: #2e73f2; background: #f4f4f4;} .comm_btns_wrap button.type6 {color: #2e73f2; background-color: transparent; border: 1px solid #2e73f2;} .comm_btns_wrap button.on {color: #fff !important; background: #2e73f2 !important;} .comm_btns_wrap button.not_btnDesign {font-size: 13px; height: auto; color: #989898; background-color: transparent;} .comm_btns_wrap button.not_rounding {border-radius: 0} .comm_btns_wrap button i {padding-right: 8px; vertical-align:middle;} .comm_btns_wrap dl {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 12px; padding: 0 5px; box-sizing:border-box;} .comm_btns_wrap dl dt {font-size: 15px; color: #484848; font-weight: 500; max-width: 60%} .comm_btns_wrap dl dd {font-size: 19px; color: #2e73f2; font-weight: 600; max-width: 37%; text-align: right;} .comm_btns_wrap dl dd span {font-size: 14px; color: #9d9d9d; padding-right: 10px; font-weight: 400;} .comm_btns_wrap.leng2 {display: flex; justify-content: space-between;} .comm_btns_wrap.leng2 button {width: 49%;} .comm_btns_wrap.leng2 button.not_rounding {width: 50%;} .point-blue {color: #2e73f2 !important;} .point-red {color: #f9002d !important;} /* header ========================================================================================== */ #exportCar-header {/*position:sticky; top: 0; left:0;*/position:relative; z-index: 11; width: 100%; padding:15px 20px; box-sizing: border-box; background: #2e73f2;} #exportCar-header>h1 {width: 130px; height: 40px; background-size: 100%; background-position: center; background-repeat: no-repeat;} #exportCar-header>h1 img {width: 100%;} /*전체메뉴*/ #gnbMenuBg {width: 100%; height: 100vh; background: rgba(0,0,0,0.55); position: absolute; top: 0; left: 0; display: none} #gnbM {position:fixed; top:0; right:-1000%; width:50%; height:100%; background:#fff; z-index:9999; overflow-y:auto; -webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;-ms-transition:all 0.7s;transition:all 0.7s; box-sizing:border-box; overflow:hidden;} #gnbM .my_info {width: 100%; box-sizing: border-box; padding: 20px; padding-top: 40px;} #gnbM .my_info p {font-size: 14px; color: #989898;margin: 5px 0} #gnbM .my_info p.name {font-size: 21px; font-weight: 700; color: #212121;} #gnbM .vertical_wrapper {width: 100%; height: 100%;} #gnbM .vertical_wrapper #gnbNavigation {width: 100%; height: 100%;} #gnbM .vertical_wrapper #gnbNavigation > ul {overflow:hidden; box-sizing: border-box; width: 100%; padding: 15px 0} #gnbM .vertical_wrapper #gnbNavigation > ul > li {position: relative; width: 100%; font-size: 16px; box-sizing: border-box;} #gnbM .vertical_wrapper #gnbNavigation > ul > li::after {display: block; position: absolute; right:15px; top: 25px; width: 20px; height: 10px; background-image: url("../_img/resource/gnb_arrow.png"); background-repeat: no-repeat; background-position: center; content: ''; transition: .3s;; background-size: 16px;} #gnbM .vertical_wrapper #gnbNavigation > ul > li.active::after {transform: rotate(-180deg)} #gnbM .vertical_wrapper #gnbNavigation > ul > li > a {position: relative; display:block; color:#212121; text-decoration:none; line-height:1; box-sizing: border-box; padding: 12px 20px;} #gnbM .vertical_wrapper #gnbNavigation > ul > li > a span {display: block;} #gnbM .vertical_wrapper #gnbNavigation > ul > li .gnb-2dep {display: none; box-sizing: border-box; background: #f4f4f4; overflow:hidden; padding: 7px 20px;} #gnbM .vertical_wrapper #gnbNavigation > ul > li .gnb-2dep li {position: relative; font-size: 14px; width: 50%; float: left;} #gnbM .vertical_wrapper #gnbNavigation > ul > li .gnb-2dep li a {transition: .3s; text-decoration: none; position: relative; padding: 10px 0; display: block; color: #000} #gnbM .vertical_wrapper #gnbNavigation > ul > li .gnb-2dep li a::after {width: 0; height: 1px; background: #78cced; position: absolute; left: 0; bottom: 0; transition: .3s; content: '';} #gnbM .vertical_wrapper #gnbNavigation > ul > li .gnb-2dep li a:hover {color:#78cced} #gnbM .vertical_wrapper #gnbNavigation > ul > li .gnb-2dep li a:hover::after {width: 100%;} #gnbM.open{right:-1px;} #gnbM.open #gnbNavigation> ul > li {animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);} #gnbM h1 { padding: 15px 0; background: #03ace5; text-align: center;} #gnbM h1 img {width: 200px;} #gnbM .menu_close {position: absolute;right:20px; top: 23px; text-align: center; cursor:pointer; z-index: 9} #gnbM .menu_close i {font-size: 18px; color: #212121} #gnbM .menu_close span {display:inline-block;position:relative;margin-top: 28%;width: 25px; height: 24px; color:#212121;} #gnbM .menu_close span::before, #gnbM .menu_close span::after {content: '';display: block;position: absolute;left: 0;width: 100%;border-bottom: 0.2rem solid #212121; border-radius: 10px;} #gnbM .menu_close span::before {top:50%;transform: rotate(-45deg);} #gnbM .menu_close span::after {bottom:43%;transform: rotate(45deg);} #gnbM .utilityBox {width: 100%; padding: 15px 20px; box-sizing: border-box;} #gnbM .utilityBox p {padding-bottom:15px} #gnbM .utilityBox p a {} #gnbM .utilityBox p a span {position: relative; color: #323232; font-size: 19px; font-weight: 500; padding-left: 27px; background-image: url("https://img.icons8.com/ios-glyphs/20/000000/lock--v1.png"); background-repeat: no-repeat; background-position: center left;} #gnbM .utilityBox p.logon a span {background-image: url("https://img.icons8.com/ios-glyphs/20/000000/unlock.png")} #gnbM .utilityBox p a span::after {width: 9px; height: 20px; display: inline-block; background: url("../_img/resource/arrow-right.png") no-repeat center; background-size: 100%; content: ''; margin-left: 30px; vertical-align: middle; margin-top: -5px} #gnbM .utilityBox button {border:1px solid #d2d2d2; background: #fff; font-size: 13px; color: #555; padding: 8px 12px; margin-right: 7px; border-radius:3px} #gnbM .check_myCar_banners {position: relative; background-color:#e0eaf4; overflow:hidden;} #gnbM .check_myCar_banners a {display: block; box-sizing: border-box; padding: 13px 20px; font-size: 17px; font-weight: 500; color: #212121;} #gnbM .check_myCar_banners i {position: absolute; top: 50%; right: 15px; transform: translate(0,-50%); font-size: 20px;} /* 콘텐츠 ========================================================================================== */ #exportCar-container {position: relative;} #exportCar-container::after {position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: #2e73f2; content: ''; z-index: -1} /* 바로가기버튼 ========================================================================================== */ #fixed_quick {width: 100%; position: sticky; bottom: 0; left: 0; background: #fff; border-top: 1px solid #e1e1e1; box-sizing: border-box; padding: 8px 0; display: flex; flex-wrap: wrap; justify-content: space-between; z-index: 10;} #fixed_quick .quick {position: relative; width: 25%; text-align: center;} #fixed_quick .quick a {font-size: 12px; color: #989898;} #fixed_quick .quick a::before {display: block; width: 25px; height: 25px; background-position: center; background-size: 100%; background-repeat: no-repeat; content: ''; margin: 5px auto;} #fixed_quick .quick.home a::before {background-image: url("../_img/resource/comm-ic03.png");} #fixed_quick .quick.list a::before {background-image: url("../_img/resource/comm-ic02.png");} #fixed_quick .quick.sell a::before {background-image: url("../_img/resource/comm-ic04.png"); width: 28px;} #fixed_quick .quick.mypage a::before {background-image: url("../_img/resource/comm-ic01.png");} #fixed_quick .quick.on a {color: #0651a7} #fixed_quick .quick.home.on a::before {background-image: url("../_img/resource/comm-ic03-on.png");} #fixed_quick .quick.list.on a::before {background-image: url("../_img/resource/comm-ic02-on.png");} #fixed_quick .quick.mypage.on a::before {background-image: url("../_img/resource/comm-ic01-on.png");} #fixed_quick .quick.sell.on a::before {background-image: url("../_img/resource/comm-ic04-on.png");} /* footer ========================================================================================== */ #footer {background: #fafafa; box-sizing: border-box; padding: 30px 20px;} #footer p {font-size: 13px; color: #737373; line-height: 1.4; text-align: center;} #footer h1 {filter: grayscale(1); width: 100px; margin: 0 auto;} #footer h1 img {width: 100%;} #footer ul {display: flex; margin: 13px 0; justify-content: center;} #footer ul li {margin:0 5px;} #footer ul li a {padding: 2px 6px; border: 1px solid #ddd; color: #5a5a5a} /* 모달 ========================================================================================== */ .modal {position: fixed; left: 0; border-radius: 30px 30px 0 0; background: #fff; width: 100%; min-height: 60%; transition: all 300ms; bottom: -100%; padding: 40px 20px; box-sizing: border-box; z-index: 13;} .caluse_pop {position: fixed; left: 0; background: #fff; width: 100%; height: 100vh; transition: all 300ms; bottom: -200%; padding: 40px 20px; box-sizing: border-box; z-index: 90; overflow-y: scroll} .modal-head {position: relative; width: 100%; box-sizing: border-box;} .modal-head h5 {font-weight: 600; color: #212121;} .modal-head p {font-size: 15px; color: #b0b0bb; padding-top: 5px} .modal-body {padding: 15px 0} .modal-body p {text-align: center; font-size: 15px;} .modal-body p strong {color: #212121;} .modal-tail {position: absolute; bottom: 30px; left: 0; width: 100%; box-sizing: border-box; padding: 0 30px;} .modal-body.caluse {padding-left: 0 !important; padding-right: 0 !important;} .modal-head .modal_pop-close, .modal-head .caluse_pop-close {position: absolute; right:0; top: -4px; text-align: center; cursor:pointer; z-index: 9} .modal-head .modal_pop-close span, .modal-head .caluse_pop-close span {display:inline-block;position:relative; width: 25px; height: 24px; color:#212121;} .modal-head .modal_pop-close span::before, .modal-head .modal_pop-close span::after, .modal-head .caluse_pop-close span::before, .modal-head .caluse_pop-close span::after {content: '';display: block;position: absolute;left: 0;width: 100%;border-bottom: 0.2rem solid #212121; border-radius: 10px;} .modal-head .modal_pop-close span::before, .modal-head .caluse_pop-close span::before {top:50%;transform: rotate(-45deg);} .modal-head .modal_pop-close span::after, .modal-head .caluse_pop-close span::after {bottom:43%;transform: rotate(45deg);} #delect-address {min-height: 30%} #delect-address .modal-body p {padding: 30px 0} /*팝업오픈*/ #exportCar-wrapper.modal-open::before {opacity: 1; z-index: 12; display: block;} #exportCar-wrapper.modal-open .modal {bottom: 0;} #exportCar-wrapper.agree_pop-open #agree_pop {bottom: 0;} #exportCar-wrapper.agree_pop-open::before {opacity: 1; z-index: 12; display: block;} #exportCar-wrapper.caluse1-open .caluse_pop#caluse1 {bottom: 0;} #exportCar-wrapper.caluse2-open .caluse_pop#caluse2 {bottom: 0;} #exportCar-wrapper.caluse3-open .caluse_pop#caluse3 {bottom: 0;} #exportCar-wrapper.caluse4-open .caluse_pop#caluse4 {bottom: 0;} #exportCar-wrapper.myCar_check_inputNum_pop-open #myCar_check_inputNum-modal {bottom: 0;} #exportCar-wrapper.myCar_check_inputNum_pop-open::before {opacity: 1; z-index: 12; display: block;} /*차량번호입력*/ #myCar_check_inputNum-modal {} #myCar_check_inputNum-modal #modal-body input[type='text'] {border-color:#212121; border-width: 2px;} /* 작은 모달 ========================================================================================== */ .mini_pop {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.35); opacity: 0; visibility: hidden; z-index: 13; transition: all 300ms; box-shadow: 0 0 10px rgba(0,0,0,0.3)} .mini_pop .popCont {position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); border-radius:10px; overflow: hidden; background: #fff; width: 85%; box-sizing: border-box; } .mini_pop .popCont .pop-body {padding: 40px 20px; width: 100%; box-sizing: border-box;} .mini_pop .popCont .pop-body p {text-align: center; font-size: 13px; line-height: 1.35;} .mini_pop .popCont .pop-body p.mid-text {font-size: 18px;; margin-bottom: 10px;} .mini_pop .popCont .pop-tail {border-top: 1px solid #efefef; display: flex; flex-wrap: wrap; justify-content: flex-start; border-top: 1px solid #efefef;} .mini_pop .popCont .pop-tail button {width: 50%; height: 45px; border:0; border-left: 1px solid #efefef; box-sizing: border-box; font-size: 16px; background-color: #fafafa; color: #212121;} .mini_pop .popCont .pop-tail button.type1 {color: #2e73f2;} .mini_pop .popCont .pop-tail.full button {width: 100%;} .mini_pop.mini_pop-open {opacity: 1; visibility: visible;} /*카테고리 콜링버튼*/ .btn-category {width:25px; height:18px; cursor:pointer; margin: 10px 0; position: absolute; top: 13px; right: 20px;} .btn-category .bar {position: absolute; right:0; height:2px; border:0; background:#fff; transition:opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0.3s, 0.3s, 0s; border-radius: 5px;} .btn-category .bar:nth-child(1) {top:0; transform:rotate(0); width:100%;} .btn-category .bar:nth-child(2) {top:8px; opacity:1; width:100%;} .btn-category .bar:nth-child(3) {top:16px; transform:rotate(0); width:100%;} .btn-category.map {} .btn-category.map .bar {background:#000; transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0s, 0s, 0s, 0.3s; } .btn-category.map .bar:nth-child(1) {top:11px; background:#fff; transform:rotate(-45deg)} .btn-category.map .bar:nth-child(2) {opacity:0} .btn-category.map .bar:nth-child(3) {top:11px; background:#fff; transform:rotate(45deg)} .mtit01 {font-size: 45px; font-weight: 600; color: #333; letter-spacing: -1px; line-height: 1.2;} .mtxt01 {font-size: 17px; font-weight: 400; color: #999;} .mtxt02 {font-size: 21px; font-weight: 600; color: #333;} #epic_wrap {width: 100%; min-width: 1300px;} h2 {font-size:45px;} h3 {font-size:37px;} h4 {font-size:33px;} h5 {font-size:27px;} h6 {font-size:23px;} @media all and (max-width:1200px){ .mtit01 {font-size: 37px} .mtxt02 {text-align: center;} } @media all and (max-width:980px){ .mtit01 {font-size: 32px} .mtxt02 {font-size: 15px;} h2 {font-size:37px;} } @media all and (max-width:740px){ .mtit01 {font-size: 25px} h2 {font-size:33px;} h5 {font-size:21px;} h6 {font-size:19px;} } /*main_section*/ .contents {width:1200px; margin:0 auto; padding:40px 0 70px 0;} /* Business Area Icons */ .business_icon { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .business_content { flex: 1; } .business_item { display: flex; flex-direction: column; align-items: center; text-align: center; } @media all and (max-width:1200px){ .contents {width: 100%; box-sizing: border-box; padding: 40px 20px 70px 20px;} } @media all and (max-width:768px){ .contents {padding: 20px 15px;} } /* Business Area Icons */ .business_icon { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .business_content { flex: 1; } .business_item { display: flex; flex-direction: column; align-items: center; text-align: center; } @media all and (max-width:1200px){ .contents {width: 100%; box-sizing: border-box; padding: 40px 20px 70px 20px;} } @media all and (max-width:768px){ .contents {padding: 20px 15px;} } /*== 싱글 체크박스 ==*/ .single input[type=checkbox] {display:none;} .single input[type=checkbox] + label {position:relative; display:inline-block; cursor:pointer; padding-left:30px; font-size:16px; line-height: 20px; color: #303030;} .single input[type=checkbox] + label:before {position:absolute; left:0; top:0; display:inline-block; width:20px; height:20px; overflow: hidden; background-position: center; background-repeat: no-repeat; content: ''; background-size: 60%; background-image: url("/_img/common/check.png"); background-color: #fff; border: 1px solid #e8e8e8;} .single input[type=checkbox]:checked + label:before {background-color:#303030; border-color: #303030} .mt5 {margin-top: 5px;} .mt10 {margin-top: 10px;} .single input[type=checkbox]:checked + label:before {background-image: url("../_img/resource/icon-check-b.png");} /*== 싱글 라디오버튼 ==*/ .single input[type=radio] {display:none;} .single input[type=radio] + label {position:relative; display:inline-block; cursor:pointer; padding-left:30px; font-size:16px; line-height: 20px; color: #303030;} .single input[type=radio] + label:before {position:absolute; left:0; top:0; display:inline-block; width:20px; height:20px; border-radius: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; content: ''; background-size: 60%; background-image: url("/_img/common/check.png"); background-color: #fff; border: 1px solid #e8e8e8;} .single input[type=radio]:checked + label:before {background-color:#303030; border-color: #303030} /*== 리스트형 라디오&체크박스 ==*/ ul.multi_line {box-sizing:border-box; display: flex; flex-wrap: wrap; justify-content: space-between;} ul.multi_line li {position:relative; float:left; cursor: pointer; margin-right: 1%;margin-bottom: 1%;} ul.multi_line.leng3 li {width: 31%;} /*체크박스*/ ul.multi_line li input[type="checkbox"] {display:none;} ul.multi_line li input[type="checkbox"] + label {color:#9a9a9a; font-size:15px; width: 100%;} ul.multi_line li input[type="checkbox"] + label span {display:inline-block; width:100%; height:50px; cursor:pointer; background:#eee; text-align:center; line-height:48px; color:#9a9a9a; box-sizing:border-box; border-radius: 5px;} ul.multi_line li input[type="checkbox"]:checked + label {color:#fff;} ul.multi_line input[type="checkbox"]:checked + label span {border:2px solid #1d7dee; background:#fff; color:#1d7dee; font-weight: 500;} ul.multi_line input[type="radio"] {display:none;} ul.multi_line input[type="radio"] + label {color:#9a9a9a; font-size:15px; width: 100%;} ul.multi_line input[type="radio"] + label span {display:inline-block; width:100%; height:50px; cursor:pointer; background:#eee; text-align:center; line-height:48px; color:#9a9a9a; box-sizing:border-box; border-radius: 5px;} ul.multi_line input[type="radio"]:checked + label {color:#fff;} ul.multi_line input[type="radio"]:checked + label span {border:2px solid #1d7dee; background:#fff; color:#1d7dee; font-weight: 500;} @media screen and (max-width:768px) { ul.multi_line input[type="radio"] + label {font-size:13px;} ul.multi_line input[type="radio"] + label span {height:40px; line-height:40px;} ul.multi_line input[type="checkbox"] + label {font-size:13px;} ul.multi_line input[type="checkbox"] + label span {height:40px; l ine-height:40px;} } ul.multi_line.leng2 li{width: 49%} ul.multi_line.leng2 li:nth-of-type(2n) {margin-right: 0;} ul.multi_line.leng3 li{width: 32%} ul.multi_line.leng3 li:nth-of-type(3n) {margin-right: 0;} ul.multi_line.leng4 li{width: 24%} ul.multi_line.leng4 li:nth-of-type(4n) {margin-right: 0;} ul.multi_line.leng5 li{width: 19%} ul.colorType_list {} ul.colorType_list li {} ul.colorType_list li #color_type1 {background: #000} ul.colorType_list li.colorType2 input[type="radio"]:checked + label span {background: #000; color: #fff; border-color: #000;} ul.colorType_list li.colorType3 input[type="radio"]:checked + label span {background: #fff; color: #222; border-color: #eee;} ul.colorType_list li.colorType4 input[type="radio"]:checked + label span {background: #999; color: #fff; border-color: #999;} ul.colorType_list li.colorType5 input[type="radio"]:checked + label span {background: #E83538; color: #fff; border-color: #E83538;} ul.colorType_list li.colorType6 input[type="radio"]:checked + label span {background: #2e73f2; color: #fff;} ul.colorType_list li.colorType7 input[type="radio"]:checked + label span {background: #10cb9d; color: #fff; border-color: #10cb9d;} ul.colorType_list li.colorType8 input[type="radio"]:checked + label span {background: #ffe243; color: #222; border-color: #ffe243;} /*== 셀렉트박스 ==*/ select {height:45px; border: 1px solid #ddd; font-size: 14px; padding: 0 10px; background:url("/_img/common/btn_unfold.png") no-repeat right 10px top 21px, #fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; background-size: 12px;} select::-ms-expand { display:none; } @media screen and (min-width:990px) { ul.multi_line.leng5 li:nth-of-type(5n) {margin-right: 0;} } @media screen and (max-width:990px) { #top_btn {right:10px; width: 35px; height:35px;} #top_btn.on { bottom: 12px;} .fixed-cs_btn#kakao {background-size: 17px;} .fixed-cs_btn {right: 10px; width: 35px; height: 35px;} .fixed-cs_btn.on#kakao {bottom: 60px;} .fixed-cs_btn.on#call {bottom: 110px;} .fixed-cs_btn#call i {font-size: 17px; line-height: 35px;} .single input[type=checkbox] + label {font-size: 14px; padding-left: 24px;} .single input[type=checkbox] + label:before {width: 17px; height: 17px;} .single input[type=radio] + label {font-size: 14px; padding-left: 22px; line-height: 17px;} .single input[type=radio] + label:before {width: 15px; height: 15px;} ul.multi_line.leng5 li{width: 32%;} a.more_btns {font-size: 14px; padding: 14px 40px;} } a.more_btns {display: inline-block; margin: 0 auto; color: #fff; background: #2e73f2; border-radius: 50px; padding: 17px 50px; font-size: 18px; margin-top: 20px;} @media screen and (max-width:480px) { ul.multi_line.leng5 li{width: 49%;} } /*============================ sec01 =============================*/ .main_bannerBox{ width:100%; display: flex; justify-content: space-around;} .main_bannerBox .banner {width: 50%;} .banner .banner_txt {position: relative; box-sizing: border-box; padding-left: 110px; margin: 0 auto;} .banner .banner_txt::before {position: absolute; top:50%; transform: translate(0,-50%); left: 0; width: 85px; height: 85px; background-position: center; background-size: 100%; background-repeat: no-repeat; content: '';} .banner .banner_txt h4 {margin-bottom: 20px; } .banner .banner_txt a {background-color:#333; padding: 10px 20px; border-radius: 50px; transition: .3s;} .banner .banner_txt a:hover {background: #2e73f2;} .banner .banner_txt a span {background:url(/_img/common/nomal-arrow2-next-w.png) no-repeat center right; background-size: 16px; padding-right: 25px; color: #fff; font-size: 16px; font-weight: 500;} .banner#banner1 {border-right: 3px dashed #aaa;} .banner#banner1 .banner_txt::before {background-image:url('/_img/main/main_icon01.png');} .banner#banner2 .banner_txt::before {background-image:url('/_img/main/main_icon02.png');} .banner#banner3 .banner_txt {padding-left: 180px; margin: 0;} .banner#banner3 .banner_txt h4 {margin: 10px 0} .banner#banner3 .banner_txt::before { background-image:url('/_img/main/main_icon03.png'); background-size: 104px; width:150px; height: 150px; background-color: #e9e9e9; border-radius: 100%;} @media all and (min-width:1200px){ .banner .banner_txt {max-width: 400px;} } @media all and (max-width:1200px){ .main_bannerBox .banner {padding: 0 30px; box-sizing: border-box;} .banner .banner_txt {padding-left: 0} .banner .banner_txt::before {position: relative; top: auto; left: auto; transform: none; display: block; margin: 0 auto; margin-bottom: 15px;} .banner .banner_txt h4 {text-align: center;} .banner .banner_txt a {display: block; text-align: center; padding-top: 13px; padding-bottom: 13px;} .banner#banner3 .banner_txt {padding-left: 0} .banner#banner3 .banner_txt h4 br {display: none;} } @media all and (max-width:980px){ .banner#banner3 .banner_txt::before {width: 120px; height: 120px; background-size: 65%;} } @media all and (max-width:768px){ .m_sec01 .contents {padding: 0;} .main_bannerBox .banner {padding: 0 20px;} .banner .banner_txt::before {width: 70px; height: 70px; } .banner .banner_txt a { padding-top: 10px; padding-bottom: 10px;} .banner .banner_txt a span {font-size: 14px;} } @media all and (max-width:360px){ .banner .banner_txt h4 {font-size: 22px;} } .m_sec02 {position: relative; padding:80px 0;} .m_sec02 .contents {display: flex; flex-wrap: wrap; justify-content: space-between;} .m_sec02 .sec02_cont01 {width: 40%;} .m_sec02 .sec02_cont01 .bar {width:100%; border-radius: 50px; background-color: #c3c3c3; margin:30px 0 15px 0; overflow: hidden;} .m_sec02 .sec02_cont01 .bar .fill {display: block; width:60%; height: 10px; border-radius: 50px; background-color: #fd774f;} .m_sec02 .sec02_cont01 .counting_car {margin-bottom: 20px;} .m_sec02 .sec02_cont01 .counting_car p {margin-bottom: 7px;} .m_sec02 .sec02_cont01 .counting_car h5 {font-size: 45px; color: #333; font-weight: 800; letter-spacing: -1px; text-align: right;} .m_sec02 .sec02_cont01 .more_car_btn {width:100%; text-align: right; } .m_sec02 .sec02_cont01 .more_car_btn a {font-size: 16px; font-weight: 500; padding-right: 30px; background-image: url(/_img/common/nomal-arrow2-next-b.png); background-repeat: no-repeat; background-size: 16px; background-position: center right 5px;} .m_sec02 .sec02_cont02 h5 {margin-bottom: 30px; color: #212121; text-align: center;} .m_sec02 .sec02_cont02 h5 img {width: 126px; vertical-align: bottom;} .m_sec02 .sec02_cont02 {width: 100%; box-sizing: border-box; } .m_sec02 .sec02_cont02 ul.car_list_wrap {width:100%; display: flex; flex-wrap:wrap; justify-content: flex-start; margin-bottom: 30px;row-gap: 30px} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list {position: relative; width:23.5%; margin-right: 2%; border-radius: 20px; overflow: hidden; border: 1px solid #dedede; transition: 0.3s;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox {position: relative; box-sizing: border-box; width: 100%;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox .car_img {width: 100%; overflow: hidden;padding-bottom: 55%; transition: 0.3s; position: relative;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox .car_img img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox .car_info {width: 100%; padding: 20px 15px; box-sizing: border-box;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox .car_info h6 {font-size: 19px; margin-bottom: 10px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox .car_info p {font-size: 15px; color: #5a5a5a; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; height: 4.35em;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list:hover {box-shadow: 0 0 10px rgba(0,0,0,0.2);} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list:hover .car_infoBox .car_info h6 {color: #2e73f2} .m_sec02 a.more_btns {background: #333;} @media all and (max-width:1200px){ .m_sec02 .sec02_cont01 {width: 36%;} .m_sec02 .sec02_cont01 .bar {margin-top: 20px; margin-bottom: 20px;} .m_sec02 .sec02_cont01 .counting_car p {text-align: center;} .m_sec02 .sec02_cont01 .counting_car h5 {text-align: center; font-size: 40px;} .m_sec02 .sec02_cont01 .more_car_btn {text-align: center;} } @media all and (min-width:980px){ .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list:last-of-type {margin-right: 0} } @media all and (max-width:980px){ .m_sec02 {padding: 50px 0;} .m_sec02 .sec02_cont01 {width: 90%; margin:0 auto 40px auto;} .m_sec02 .sec02_cont01 .counting_car {display: flex; justify-content: space-between;} .m_sec02 .sec02_cont01 .counting_car p {vertical-align: middle;line-height: 40px;} .m_sec02 .sec02_cont01 .counting_car h5 {font-size: 34px;} .m_sec02 .sec02_cont02 ul.car_list_wrap {margin-bottom: 0} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list {width: 49%; margin-bottom: 2%; border-radius: 10px;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list:nth-of-type(2n) {margin-right: 0} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox .car_info h6 {font-size: 16px; line-height: 1; margin-bottom: 6px;} .m_sec02 .sec02_cont02 ul.car_list_wrap li.car_list .car_infoBox .car_info p {font-size: 14px;} } @media all and (max-width:768px){ .m_sec02 .sec02_cont02 h5 img {width: 100px} } @media all and (max-width:640px){ .m_sec02 .sec02_cont01 {width: 100%; position: relative;} .m_sec02 .sec02_cont01 .bar {margin: 15px 0;} .m_sec02 .sec02_cont01 .bar .fill {height: 7px;} .m_sec02 .sec02_cont01 .counting_car {display: block;} .m_sec02 .sec02_cont01 .counting_car p {font-size: 15px; line-height: 1; text-align: left;} .m_sec02 .sec02_cont01 .counting_car h5 {font-size: 27px; text-align: left;} .m_sec02 .sec02_cont01 .more_car_btn a {font-size: 15px; position: absolute; bottom: 17px; right: 0; width: auto;} } /*수출카 소개 && 수출카 APP*/ .m_sec03 {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; padding: 0;} .pic_banner {background-position: center; background-repeat: no-repeat; background-size: cover; width: 50%; height: 350px; position:relative; display: table;} .pic_banner#bn1 {background-image: url(../_img/main/sec3_banner-bg1.jpg); } .pic_banner#bn2 {background-image: url(../_img/main/sec3_banner-bg2.jpg); } .pic_banner .text_wrap {display: table-cell; vertical-align: middle; width: 100%; height: 100%;} .pic_banner .text_wrap h2 {color: #fff; text-align:center; font-weight: 600;} .pic_banner .text_wrap p {text-align: center; font-size: 17px; line-height: 1.3; color: #fff; margin-top: 15px;} .pic_banner .text_wrap p a {margin: 0 5px ; } .pic_banner .text_wrap p a img {width: 40px;} .pic_banner .text_wrap p a span {color: #fff; background: url(/_img/common/nomal-arrow2-next-w.png) no-repeat center right; background-size: 17px; padding-right: 25px;} .pic_banner#bn1 .text_wrap p a {background-color: #2e73f2; padding: 7px 23px; border-radius: 50px; display: inline-block; margin-top: 7px;} @media all and (max-width:980px){ .pic_banner {height: auto; padding: 50px 20px} } @media all and (max-width:768px){ .pic_banner {width: 100%;} .pic_banner .text_wrap p {font-size: 15px;} .pic_banner#bn1 .text_wrap p a {font-size: 14px;} } /*진단평가사 바로판매신청*/ .m_sec04 {background: url(/_img/main/sec4-bg.jpg) no-repeat center; background-size: cover; background-attachment: fixed; text-align: center; padding: 130px 0;} .m_sec04 h2 {text-align: center; color: #fff;} .m_sec04 p {font-size: 18px; color: #fff; text-align: center; margin: 20px 0; opacity: 0.8} @media all and (max-width:980px){ .m_sec00 { padding: 0 } html .m_sec00 .contents { padding: 70px 0 0 } .m_sec04 {padding: 100px 0} } @media all and (max-width:768px){ .m_sec04 {padding: 70px 0} } @media all and (max-width:360px){ .m_sec04 h2 {font-size: 31px;} } #kakao_link {position: fixed; bottom: 50px; right: 50px; width: 70px; height: 70px; border-radius: 100%; background: #fae100; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.2);} #kakao_link a {display: block; width: 100%; height: 100%;} #kakao_link img {width: 35px; margin: 16px auto; display: block;} @media all and (max-width:980px){ #kakao_link {width: 50px; height: 50px; bottom: 15px; right: 15px;} #kakao_link img {width: 50%; margin-top: 14px;} } #message {position: fixed; bottom: 140px; right: 50px; width: 70px; height: 70px; border-radius: 100%; background: #2e73f2; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.2);} #message a {display: block; width: 100%; height: 100%;} #message svg {width: 35px; margin: 16px auto; display: block; fill:#fff;} @media all and (max-width:980px){ #message {width: 50px; height: 50px; bottom: 75px; right: 15px;} #message svg {width: 50%; margin-top: 14px;} } /* 서브페이지 공통 ========================================================================================== */ #page_head {position: relative; width: 100%; height: 50px; box-sizing: border-box; display: flex;} #page_head h6 {font-weight: 500; color: #212121; line-height: 50px;} #page_head button.back {width: 55px; height: 50px; border: 0; background-color: transparent; text-align: center;} #page_head button.back i {font-size: 25px; color: #7f7f7f;} #page_head .step {position: absolute; top: 0; right: 0; line-height: 50px; font-size: 12px; color: #8b919f; width: 50px; letter-spacing: 2px} #page_head .prograss_bar {position: absolute; bottom: 0; left: 0; width: 100%; background: #e0e0e0; height: 3px;} #page_head .prograss_bar::before {position: absolute; top: 0; height: 100%; background: #2e73f2; content: '';} #page_head .prograss_bar.leng2.step1::before {width:50%;} #page_head .prograss_bar.leng3.step1::before {width:33.3%;} #page_head .prograss_bar.leng3.step2::before {width:66.6%;} #page_head .prograss_bar.step-final::before {width:100%;} #page_body {min-height: calc(100vh - 110px); padding: 40px 0; box-sizing: border-box;} #page_body.board_body {padding-top: 0;} #page_body .cont_section {position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding: 0 20px;} #page_body .cont_section.devide {margin: 40px 0} #page_body .cont_section.mt0 {margin-top:0;} #page_body .cont_section.mb0 {margin-bottom:0;} .no-tail_btns {min-height: calc(100vh - 50px) !important;}/*하단에 고정버튼 없을때 높이값*/ p.notice {font-size: 13px; color: #b0b0bb; background:url("../_img/resource/notice.png") no-repeat top 2px left; background-size: 14px; padding-left: 19px; line-height: 1.35;} p.mid-text {font-size: 20px; font-weight: 600; color: #212121;} p.big-text {font-size: 25px; font-weight: 700; color: #212121} p.small-text {font-size: 12px;} p.car_name {font-size: 15px;} p.car_name span {position: relative; padding: 0 10px;} p.car_name span::after {position: absolute; top: 2px; left: 0; width: 2px; height: 13px; background: #dedede; content: '';} p.car_name span:first-of-type {padding-left: 0} p.car_name span:first-of-type::after {display: none;} dl.info_inputForm {margin: 40px 0} dl.info_inputForm:first-of-type {margin-top: 0} dl.info_inputForm dt {font-size: 17px; color: #212121; font-weight: 500; margin-bottom: 13px;} dl.info_inputForm dt span {color: #b0b0b5} dl.info_inputForm dd {position: relative;} dl.info_inputForm dd.addr { box-sizing: border-box; padding-right: 80px; margin-bottom: 5px;} dl.info_inputForm dd.addr button {position: absolute; top: 0; right: 0; width: 70px; height: 45px; background: #333; color: #fff; font-size: 14px; border: 0; border-radius: 5px;} dl.info_inputForm dd.tell {display: flex; flex-wrap: wrap; justify-content: space-between;} dl.info_inputForm dd.tell input {width:32% !important; text-align: center;} dl.info_inputForm dd>ul{} dl.info_inputForm dd>ul>li{margin-top: 30px} dl.info_inputForm dd>ul>li>p.title {font-size: 14px; color: #4a4a4a; margin-bottom: 7px} dl.info_inputForm dd>ul>li>p.notice {margin-top: 7px} #page_tail {position:sticky; bottom: 0; left: 0; width: 100%; z-index: 2;} button.comm_fullBtn {width: 100%; height: 60px; background: #2e73f2; border: 0; font-size: 15px; color: #fff;} /* 내차수출차 결과페이지 ========================================================================================== */ .car_condition_result {} .car_condition_result p.mid-text {margin: 5px 0 17px 0} .car_condition_result p.car_name {font-size: 14px; color: #212121} /* 로딩페이지 ========================================================================================== */ /*============================ 내차팔기 =============================*/ #sub_container {width: 100%; background: #f8f8f8; padding-top: 100px; box-sizing: border-box; overflow: hidden;} #sub_container .verticalAlign-wrap {display: table; width: 100%; height: calc(100vh - 200px)} #sub_container .verticalAlign-inner {display: table-cell; vertical-align: middle; width: 100%;} .contents-inner {background: #fff; box-sizing: border-box; padding: 70px 50px; border-radius: 20px;} .page_title {text-align: center; font-size: 45px; font-weight: 700; color: #212121; margin-bottom: 70px; line-height: 1;} .page_title span {color: #fff; font-size:25px; padding: 10px 20px; display: inline-block; margin-left: 10px; vertical-align: middle; border-radius: 50px; margin-top: -5px;} .page_title span.type1 {background: #2e73f2;} .page_title span.type2 {background: #fd774f;} .wait_loading {width: 100%; height: 100vh; display: table;} .wait_loading .mid_arr {width: 100%; height: 100vh; display: table-cell; vertical-align: middle;} .wait_loading .mid_arr p {font-size:15px; color: #212121; text-align: center;} .wait_loading .mid_arr img {width: 70px; margin: 0 auto; display: block;} @media screen and (max-width:990px){ #sub_container {padding-top: 70px;} .page_title {font-size: 38px; margin-bottom: 50px; line-height: 1;} .page_title span {font-size: 21px;} } @media screen and (max-width:768px){ .contents-inner {padding: 30px 20px; border-radius: 20px;} .page_title {font-size: 29px; line-height: 1.4; margin-bottom: 30px;} .page_title span {font-size: 16px; font-weight: 500; padding: 6px 12px; margin-left: 6px;} .loading_container {position: relative; margin: 0 auto; width: 130px;} } .circle {border-radius:50%; width:5px; height:5px; background-color:#1e90ff; margin-bottom:25px; position:relative;} .rowc {display:inline-block; margin-left:2px;} .c1 {animation: c1 1.5s linear infinite;} .c2 {animation: c2 1.5s linear infinite; background-color:#3fd1ff;} @media screen and (max-width:280px){ .page_title span {margin-left: 0; margin-top: 4px;} } @media screen and (max-width:990px) { } @keyframes c1{ 0%{transform:translateY(0px) scale(1);} 25%{transform:translateY(10px) scale(1.5);background-color:#0c87ff;z-index:10;} 50%{transform:translateY(32px) scale(1);} 75%{transform:translateY(10px) scale(.6);background-color:#3a9eff;z-index:1;opacity:.1} 100%{transform:translateY(0px) scale(1);} } @keyframes c2{ 0%{transform:translateY(0px) scale(1);} 25%{transform:translateY(-10px) scale(.6);background-color:#75deff;z-index:1;opacity:.1} 50%{transform:translateY(-32px) scale(1);} 75%{transform:translateY(-10px) scale(1.5);background-color:#0fc3ff;z-index:10;} 100%{transform:translateY(0px) scale(1);} } .row2 .c1{animation-delay:.1s;}.row2 .c2{animation-delay:.1s;} .row3 .c1{animation-delay:.22s;}.row3 .c2{animation-delay:.22s;} .row4 .c1{animation-delay:.37s;}.row4 .c2{animation-delay:.37s;} .row5 .c1{animation-delay:.49s;}.row5 .c2{animation-delay:.49s;} .row6 .c1{animation-delay:.67s;}.row6 .c2{animation-delay:.67s;} .row7 .c1{animation-delay:.89s;}.row7 .c2{animation-delay:.89s;} .row8 .c1{animation-delay:.95s;}.row8 .c2{animation-delay:.95s;} .row9 .c1{animation-delay:1.2s;}.row9 .c2{animation-delay:1.2s;} .row10 .c1{animation-delay:1.45s;}.row10 .c2{animation-delay:1.45s;} .row11 .c1{animation-delay:1.62s;}.row11 .c2{animation-delay:1.62s;} .row12 .c1{animation-delay:1.88s;}.row12 .c2{animation-delay:1.88s;} .row13 .c1{animation-delay:2s;}.row13 .c2{animation-delay:2s;} .pics_upload .apicBox .innerBox span {text-align: center; font-size: 13px; color: #2e73f2; display: table-cell; vertical-align: middle;} .pics_upload .apicBox .innerBox span::before {width: 35px; height: 35px; background: url("../_img/resource/gallery.png") no-repeat center; background-size: 100%; display: block; content: ''; margin: 0 auto 10px auto;} /* 차량번호조회 결과화면 ========================================================================================== */ .myCar_numInfo {} .myCar_numInfo p.car_name {margin-top: 5px; color: #212121} #select_carType {width: 100%; justify-content: center; flex-wrap: wrap; display: flex; margin-bottom: 100px;} #select_carType .carType {width: 35%;background: #fff; box-sizing: border-box; border-radius: 20px; padding: 30px; margin: 0 30px; transition: 0.3s; cursor: pointer;} #select_carType .carType p {text-align: center; font-size: 17px; margin: 30px 0; line-height: 1;} #select_carType .carType p.name {font-size: 27px; font-weight: 600; color: #333;} #select_carType .carType p.name::before {display: block; width: 180px; height: 180px; background-position: center; background-repeat: no-repeat; background-size: 100%; content: ''; margin: 0 auto 20px auto;} #select_carType .carType p span {text-align: center; color: #2e73f2; font-weight: 500; background-image: url(/_img/common/nomal-arrow2-next-bl.png); background-repeat: no-repeat; background-position: center right; background-size: 20px; padding-right: 30px;} #select_carType .carType#type1 p.name::before {background-image: url(/_img/sub/car-type1.png);} #select_carType .carType#type2 p.name::before {background-image: url(/_img/sub/car-type2.png);} .info_table_wrap {margin: 30px 0} .info_table_wrap dl {margin: 13px 0; position: relative; box-sizing: border-box; padding-left: 90px;} .info_table_wrap dl dt {font-size: 15px; color: #b0b0bb; position: absolute; top: 0; left: 0; } .info_table_wrap dl dd {font-size: 15px; color: #212121;} .info_table_wrap dl dd span.not_info {color: #b0b0bb;} .info_table_wrap dl dd button {border:0; background-color: transparent; font-size: 13px; color: #2e73f2; margin-left: 10px; border-bottom: 1px solid #2e73f2;} .pics_upload {width: 100%; margin: 30px 0 10px 0; flex-wrap: wrap; justify-content:flex-start; display: flex;} .pics_upload .apicBox {position: relative; width: 32%; border: 2px solid #e1e1e1; box-sizing: border-box; padding-bottom: 31%; border-radius: 10px; margin-left: 2%; margin-top: 2%;} .pics_upload .apicBox:first-of-type, .pics_upload .apicBox:nth-of-type(3n+1) {margin-left: 0} .pics_upload .apicBox .innerBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: table;} .pics_upload .apicBox .innerBox span {text-align: center; font-size: 13px; color: #2e73f2; display: table-cell; vertical-align: middle;} .pics_upload .apicBox .innerBox span::before {width: 35px; height: 35px; background: url("../_img/resource/gallery.png") no-repeat center; background-size: 100%; display: block; content: ''; margin: 0 auto 10px auto;} /*판매후기 안*/ .info_table_wrap.inner_review {border-radius: 5px; background: #fafafa; box-sizing: border-box; padding: 10px 20px; margin: 20px 0} .info_table_wrap.inner_review dl {margin: 7px 0} .info_table_wrap.inner_review dl dt, .info_table_wrap.inner_review dl dd {font-size: 14px;} .info_table_wrap.inner_review {border-radius: 5px; background: #fafafa; box-sizing: border-box; padding: 10px 20px; margin: 20px 0} #select_carType .carType:hover {box-shadow: 0 0 15px rgba(0,0,0,0.1);} #select_carType .carType:hover p.name {color: #fff;} #select_carType .carType:hover p span {color: #fff; background-image: url(/_img/common/nomal-arrow2-next-w.png);} #select_carType .carType#type1:hover {background-color: #2e73f2} #select_carType .carType#type2:hover {background-color: #fd774f} @media screen and (max-width:768px){ #select_carType {margin-bottom: 40px;} #select_carType .carType {position: relative; width: 100%; padding: 50px; margin:0 0 20px 0;} #select_carType .carType p {text-align: left; margin: 20px 0 40px 0; padding-left: 55%;} #select_carType .carType p.name {font-size: 23px;} #select_carType .carType p.name::before {position: absolute; top:50%; left:30px; transform: translateY(-50%);} #select_carType .carType#type2{margin-bottom: 0;} } @media screen and (max-width:480px){ #select_carType .carType {padding: 30px;} #select_carType .carType p {margin: 20px 0; padding-left: 48%;} #select_carType .carType p.name {font-size: 21px;} #select_carType .carType p.name::before { left: 20px; width:100px; height: 100px;} #select_carType .carType p span {text-align: center; color: #2e73f2; font-weight: 500; background-image: url(/_img/common/nomal-arrow2-next-bl.png); background-repeat: no-repeat; background-position: center right; background-size: 20px; padding-right: 30px;} } /* 나의 등록 매물 리스트 ========================================================================================== */ .myCar_list {} .myCar_box {width: 100%; border-radius: 10px; box-sizing: border-box; overflow: hidden; margin-top: 30px} .myCar_box:first-of-type {margin-top: 0} .myCar_box .car_information {width: 100%; position: relative; padding: 25px 15px; padding-right: 130px; box-sizing: border-box; border: 2px solid #e1e1e1; border-bottom: 0; border-radius: 10px 10px 0 0;} .myCar_box .car_information ul {display: flex; margin-top: 20px} .myCar_box .car_information ul:first-of-type {margin-top: 6px} .myCar_box .car_information ul li {position: relative; padding: 0 10px; font-size: 14px; color: #212121} .myCar_box .car_information ul li::after {position:absolute; top: 5px; left: 0; width: 1px; height: 12px; background: #ccc; content: '';} .myCar_box .car_information ul li:first-of-type {padding-left: 0} .myCar_box .car_information ul li:first-of-type::after {display: none;} .myCar_box .car_information ul li a {color: #b0b0bb; font-size: 14px; vertical-align: middle;} .myCar_box .car_information ul li button {color: #b0b0bb; background-color: transparent; border: 0; font-size: 14px; line-height: 1;} .myCar_box .car_information .car_pics {position: absolute; top: 50%; right: 15px; width: 70px; height: 70px; border-radius: 100%; overflow: hidden; transform:translate(0,-50%);} .myCar_box .car_information .car_pics img {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;} .myCar_box .dealer_condition {width: 100%; background: #f0f0f0; border-radius: 0 0 10px 10px; border: 2px solid #e1e1e1; border-top: 0; box-sizing: border-box;} .myCar_box .dealer_condition a {display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box; padding: 10px 20px;} .myCar_box .dealer_condition p {color: #959595; font-size: 15px;} .myCar_box .dealer_condition span {color: #2e73f2; font-size: 15px; background-image: url("../_img/resource/next-arrow-bl.svg"); background-repeat: no-repeat; background-size: 10px; background-position: top 5px right; padding-right: 15px;} .myCar_box .dealer_condition.yet {background: #2e73f2; border-color:#2e73f2;} .myCar_box .dealer_condition.yet p {color: #fff;} .myCar_box .dealer_condition.yet span {color: #fff; background-image: url("../_img/resource/next-arrow-w.svg");} .inner_section {margin-bottom: 50px;} .inner_section-title {font-size: 24px; color: #333; margin-bottom: 20px;} /* 나의매물 딜러 선택 ========================================================================================== */ #dealer_select_wrap {position: relative; background: #f4f4fa;} .terms_bx {width: 100%; height: 200px; border: 1px solid #e0e0e0; box-sizing: border-box; overflow-y: scroll; padding: 15px; font-size: 14px; color: #606060; line-height: 1.7;} .input_chk {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px;} #dealer_select_wrap::after {position:absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: #fff; content: '';} .input_chk p {color: #606060; font-size: 16px; } #dealer_select_wrap #page_body {padding: 0;} .input_chk ul li {float: left; margin-left: 15px;} #dealer_select-top {padding-left: 35px !important; padding-right: 35px !important; background: #f4f4fa;} #dealer_select-top #item_info .pic {width: 80px; height: 80px; border-radius: 100%; overflow: hidden; position: relative; margin: -40px auto 0 auto;} #dealer_select-top #item_info .pic img {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;} #dealer_select-top #item_info .summary {width: 100%; display:flex; flex-wrap: wrap; justify-content: space-between; margin-top: 15px;} #dealer_select-top #item_info .summary dl.summaryBox {position: relative; width: 50%; box-sizing: border-box;} #dealer_select-top #item_info .summary dl.summaryBox::after {position: absolute; top: 50%; left: 0; width: 2px; height: 44px; margin-top: -22px; background: #e1e1e1; content: '';} #dealer_select-top #item_info .summary dl.summaryBox:first-of-type::after {display: none;} #dealer_select-top #item_info .summary dl.summaryBox dt {font-size: 13px; color: #5a5a5a; text-align: center;padding-bottom: 5px} #dealer_select-top #item_info .summary dl.summaryBox dd {font-size: 19px; color: #212121; font-weight: 500; text-align: center;} #dealer_select-top #item_info button.more_information {position: relative; border:0; font-size: 13px; color: #9a9a9a; text-align: center; background-color: transparent; width: 100%; height: 45px;} #dealer_select-top #item_info button.more_information span::after {content: '더보기'; padding-left: 5px} #dealer_select-top #item_info button.more_information::before {position: absolute; left: 50%; margin-left: 45px; top: 16px; width: 10px; height: 20px; background: url("../_img/resource/list-open-g.svg") no-repeat center; background-size: 100%; content: ''; transition: transform 0.2s;} #dealer_select-top #item_info #detail_info {display: none; box-sizing: border-box; width: 100%; padding: 0 30px;} #dealer_select-top #item_info #detail_info .info_table_wrap {border: solid #e1e1e1; border-width: 2px 0; margin: 20px 0 0 0 ; padding: 10px 0} #dealer_select-top .condition_tag {text-align: center; margin-bottom: 13px;} #dealer_select-top .condition_tag {text-align: center; margin-bottom: 13px;} .inputTable {border-top: 2px solid #333} .inputTable .col {width: 100%; border-bottom: 1px solid #e0e0e0; display: table;} .inputTable .col .title, .inputTable .col .select {display: table-cell; vertical-align: middle; padding: 20px;} .inputTable .col .title {font-size: 16px; color: #252525; text-align: center; width: 20%; font-weight: 500; background: #fafafa;} .inputTable .col .title span.primary {font-size: 12px; color: #E5282B; padding-left: 3px;} .inputTable .col .select {width: 80%; font-size: 16px;} .inputTable .col .select.filename {color: #157cb6} .inputTable .col .select ul {} .inputTable .col .select ul li {float: left; font-size: 16px;} .inputTable .col .select ul.type_select li {margin-right: 10px;} .inputTable .col .select .float_wrap {display: flex; flex-wrap: wrap; } /*.inputTable .col .select ul.multi_line li {width: 35%}*/ .inputTable .col .select ul.contest_info_list {} .inputTable .col .select ul.contest_info_list li {width: 100%;} .inputTable .col .select ul.contest_info_list li .single {float: left; margin-right: 15px; min-width: 60px;} .inputTable .col .select ul.contest_info_list li span {font-size: 16px; padding-left: 0; top: 3px;} .inputTable .col .select .etc_input-wrap {width: 100%; margin-top: 10px;} .inputTable .col .select .etc_input-wrap input[type='text'] {width: 100%; margin: 0} .inputTable .col .select .etc_input-wrap input[type='text']::placeholder {color: #9a9a9a} .inputTable .col input[type="text"], .inputTable .col input[type="password"], .inputTable .col select {box-sizing: border-box; border: 1px solid #e0e0e0; width: 180px; height: 50px; padding: 10px; font-size: 15px; color: #606060; margin-right: 5px; border-radius: 5px;} .inputTable .col input[type="text"]::placeholder {color: #aaa;} .inputTable .col em {padding: 0 7px; line-height: 40px; font-size: 14px;} #dealer_select-top .condition_tag span {font-size: 13px; color: #fff; background: #2e73f2; border-radius: 50px; padding: 5px 15px; line-height: 1;} .inputTable .col .num {width: 95px !important;} .inputTable .col .addr {width: 49% !important} .inputTable .col .full {width: 100% !important} .inputTable .col button {width: 85px; height: 40px; background: #157cb6; color: #fff; border: 0; margin-left: 5px} .inputTable .col textarea { width: 100%; height: 200px; border: 1px solid #e0e0e0; box-sizing: border-box; padding: 10px; font-size: 14px;} .inputTable .col>span {font-size: 12px; vertical-align:-webkit-baseline-middle; padding-left: 10px;} .inputTable .col>span.red {color: #ff4100;} .inputTable .col .line {width:100%;} .inputTable .col .line.top-m {margin-top: 5px;} .inputTable .col .line.bottom-m {margin-bottom: 5px;} .inputTable .col .mail_wrap {float: left;} #dealer_select-bottom p.alert {font-weight: 700; color: #212121; font-size: 17px; line-height: 1.35; padding: 20px 0; border-bottom: 2px solid #e1e1e1;} .dealer_list {position: relative; padding: 20px 0; border-bottom: 2px solid #e1e1e1; display: flex;} .dealer_list .inner {width: 50%;} .dealer_list .inner p {line-height: 1;} .dealer_list .inner p.small-text {color: #b0b0bb;} .dealer_list .inner p.dealer_name, .dealer_list .inner p.price {font-size: 17px; color: #212121; font-weight: 500; margin: 5px 0} .dealer_list .inner p.dealer_name {font-size: 17px; color: #212121; font-weight: 500; margin: 5px 0} .dealer_list .inner p.dealer_name span {font-size: 13px;} .dealer_list .profile {position: relative; padding-left: 57px; box-sizing: border-box;} .dealer_list .profile .pic {position: absolute; top: 50%; left: 0; margin-top: -23px; width: 45px; height: 45px; border-radius: 100%; overflow: hidden; border: 1px solid #e1e1e1; box-sizing: border-box;} .dealer_list .profile .pic img {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;} .dealer_list .profile .score_wrap .star {width: 60px; height: 9px;} .dealer_list .profile .score_wrap .star .fill {height: 9px; background-size: 60px auto;} .dealer_list .profile .score_wrap p {font-size: 11px;} .dealer_list button {width: 50px; height: 40px; font-size: 13px; border:0; border-radius: 5px; background: #e0eafd; color: #2e73f2; margin-top: 5px;} .dealer_list button.type1 {width: 70px; background: #f4f4f4; color: #545454;} .dealer_list button.type2 {width: 80px;} .filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .filebox label {display: inline-block; cursor: pointer; vertical-align: top; width: 80px; height: 40px; background: #157cb6; color: #fff; text-align: center; line-height: 40px; margin-top: -1px;} #dealer_select-top p.big-text {text-align: center;} .filebox .upload-name {display: inline-block; padding:10px; font-size: 14px; vertical-align: middle; background-color: #fff; border: 1px solid #e0e0e0; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 280px; box-sizing: border-box; color: #606060} #final_text {width: 100%; padding: 120px 0; border: 5px solid #f3f3f3 ; box-sizing: border-box; text-align: center; font-size: 16px; color: #606060; line-height: 1.7; margin-bottom: 30px;} #final_text strong {color:#252525; font-weight: 500; font-size: 21px;} /*방문평가판매 차랑번호*/ .unknown-car_num .single {line-height: 45px; margin-left: 10px;} #dealer_select-top #item_info {position: relative; background: #fff; box-sizing: border-box; border-radius: 7px; border: 2px solid #e1e1e1; margin-top: 55px} @media screen and (max-width:990px){ .inputTable .col input[type="text"], .inputTable .col select {margin-left: 0; width: 100%; height: 45px; font-size: 14px;} .inputTable .col ul.birth {display: flex; flex-wrap: wrap; justify-content: space-between;} .inputTable .col ul.birth li {width: 32%; margin: 0;} .inputTable .col ul.birth li em {display: none;} .inputTable .col ul.call {display: flex; flex-wrap: wrap; justify-content: space-between;} .inputTable .col ul.call li {position: relative; width: 31%; margin: 0;} .inputTable .col ul.call li::after {position: absolute; top: 10px; right: -10px; content: '-'; font-size: 13px;} .inputTable .col ul.call li:last-of-type::after {display: none;} .inputTable .col ul.call li .num {width: 100% !important} .inputTable .col ul.call li em {display: none;} .inputTable .col .mail_wrap {width: 100%; float: none;} .inputTable .col .mail_wrap {width: 100%; float: none;} .inputTable .col .mail_wrap:first-of-type {display: flex; justify-content: space-around; margin-bottom: 5px;} .inputTable .col .mail_wrap:first-of-type em {font-size: 13px; padding: 0 10px;} .inputTable .col .mail_wrap:first-of-type input[type='text'] {width:48%;} .inputTable .col .select .scholl_info {width: 100%; justify-content: space-between; display: flex;} .inputTable .col .select .scholl_info select {width: 49%;} } @media screen and (max-width:768px){ .inner_section-title {margin-bottom: 13px;} .input_chk {margin-top: 10px;} .input_chk p {font-size: 13px;} .inputTable .col {display: block; overflow: hidden; padding: 18px 0} .inputTable .col input[type="text"], .inputTable .col select {height: 40px;} .inputTable .col .title, .inputTable .col .select {display: block; width: 100%; box-sizing: border-box; padding: 0; text-align: left;} .inputTable .col .title {font-size: 15px; background:none; margin-bottom: 10px;} .inputTable .col .select {font-size: 14px;} .inputTable .col .select ul.contest_info_list li span {font-size: 14px; top: 4px;} .filebox label {font-size: 14px;} .inputTable .col .addr {width: 100% !important; margin-bottom: 5px;} .inputTable .col .select ul.type_select li {margin-top: 7px;} } .btns_wrap {width: 100%; justify-content: center; display: flex;} .btns_wrap a {display: block; width: 200px; height: 50px; border-radius: 5px; text-align: center; line-height: 50px; font-size: 16px; margin: 0 5px;} .btns_wrap a.prev {color: #fff; background: #aaa;} .btns_wrap a.regist {color: #fff; background: #2e73f2;} @media screen and (max-width:768px){ .btns_wrap a {width: 180px; height: 40px; line-height: 40px; font-size: 14px; margin: 0 5px;} } #final_page {background: #fff; border-radius: 20px; padding: 70px 30px; margin: 70px 0;} #final_page .page_title {position: relative; font-size: 35px; margin-bottom: 20px; padding-bottom: 30px;} #final_page .page_title::after {position: absolute; bottom: 0; left: 50%; margin-left: -25px; height: 3px; width: 50px; background: #ddd; content: '';} #final_page .page_title::before {display: block; margin: 0 auto 30px auto; width: 215px; height: 215px; background:url(/_img/common/laptop.png) no-repeat center; background-size: 100%; content: '';} #final_page ul#info_check {display:flex; width: 100%; flex-wrap: wrap; justify-content: center; margin-bottom: 60px;} #final_page ul#info_check li {padding: 0 13px; position: relative; font-size: 19px; color: #8a8a8a;} #final_page ul#info_check li::after {position: absolute; top: 2px; left: 0; width: 1px; height: 15px; background: #ccc; content: '';} #final_page ul#info_check li:first-of-type::after {display: none;} @media screen and (max-width:990px){ #final_page .page_title{font-size: 32px; padding-bottom: 20px;} } @media screen and (max-width:768px){ #final_page {padding: 40px 20px; margin: 40px 0;} #final_page .page_title{font-size: 28px; padding-bottom: 15px; margin-bottom: 10px;} #final_page .page_title::before {width: 180px; height: 180px;} #final_page ul#info_check{margin-bottom: 20px;} #final_page ul#info_check li{padding: 10px 0; font-size: 17px; width:100%; text-align: center;} #final_page ul#info_check li:after{top: -2px; left:50%; transform:translateX(-50%); width:4px; height: 4px; border-radius: 50%; background-color: #ddd;} } /*매매가이드*/ .hifu_step_wrap {} .hifu_step_wrap .stepBox {position: relative; width: 100%; box-sizing: border-box; border: 7px solid #dedede; padding: 40px 0; background: #fff; display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: 50px; border-radius: 10px;} .hifu_step_wrap .stepBox::after {position: absolute; bottom: -52px;; left: 50%; margin-left: -12px; width: 0; height: 0; border:25px solid transparent; border-top-color: #dedede; content: '';} .hifu_step_wrap .stepBox:last-of-type::after {display: none;} .hifu_step_wrap .stepBox .icon {width: 17%; text-align: center; display: table;} .hifu_step_wrap .stepBox .icon p {width: 100%; height: 100%; display: table-cell; vertical-align:middle; text-align: center;} .hifu_step_wrap .stepBox .icon p img {width: 60%;} .hifu_step_wrap .stepBox .text {position: relative; width: 83%; border-left: 1px solid #dedede; padding-left: 50px; box-sizing: border-box;} .hifu_step_wrap .stepBox .text p {font-size: 19px;} .hifu_step_wrap .stepBox .text p.stepName {font-size: 21px; font-weight: 600; color: #111; margin-bottom: 20px;} .hifu_step_wrap .stepBox .text p.stepName span {color:#2e73f2; vertical-align: baseline; padding-right: 10px;} .hifu_step_wrap .stepBox .text p.stepName span em {color:#2e73f2; padding-left: 5px;} .hifu_step_wrap .stepBox .text a {display: block;width: 170px; height: 40px; box-sizing: border-box; border: 1px solid #ddd; text-align: center; line-height: 40px; background: #ecf1f7; transition: 0.3s; color: #333; font-weight: 500;} .hifu_step_wrap .stepBox .text a span {font-size: 15px; background-image: url(/_img/utility/icon-down-b.png); background-repeat: no-repeat; background-position: center right; padding-right: 30px; background-size: 25px;} .hifu_step_wrap .stepBox .text a:hover {background: #309782; border-color: #309782; color: #fff;} .hifu_step_wrap .stepBox .text a:hover span {background-image: url(/_img/utility/icon-down-w.png)} .hifu_step_wrap .stepBox .text ul {} .hifu_step_wrap .stepBox .text>ul>li {font-size: 18px; margin: 7px 0; position: relative; padding-left: 15px; color: #212121; line-height: 1.5;} .hifu_step_wrap .stepBox .text>ul>li::before {position: absolute; top: 14px; left: 0; width: 7px; height: 1px; background: #aaa; content: '';} .hifu_step_wrap .stepBox .text>ul>li ul {margin-top: 5px;} .hifu_step_wrap .stepBox .text>ul>li ul li {position:relative; font-size: 16px; box-sizing: border-box; padding-left: 50px;} .hifu_step_wrap .stepBox .text>ul>li ul li span {font-weight: 500; position: absolute; top: 0; left: 10px;} .hifu_step_wrap .stepBox .text>ul>li ul li::before {position: absolute; top: 10px; left: 0; width: 4px; height: 4px; background: #aaa; content: '';} @media all and (max-width:1400px){ .sub02_01 .contents {padding-left: 0 !important; padding-right: 0 !important} } @media screen and (max-width:1200px) { .hifu_step_wrap .stepBox .icon p img {width: 60%} .hifu_step_wrap .stepBox .text ul li {margin: 7px 0} } @media screen and (max-width:980px) { .hifu_step_wrap .stepBox {margin-bottom: 30px; border-width: 5px;} .hifu_step_wrap .stepBox::after {border-width: 18px; bottom: -37px;} .hifu_step_wrap .stepBox .text {padding-left: 40px; padding-right: 40px;} .hifu_step_wrap .stepBox .text p.stepName {font-size: 18px; margin-bottom: 15px;} .hifu_step_wrap .stepBox .text ul li {font-size: 16px;} } @media screen and (max-width:768px) { .hifu_step_wrap .stepBox .text a {width: 100%; height: 45px; line-height: 45px;} .hifu_step_wrap .stepBox .icon p img {width: 70%} .hifu_step_wrap .stepBox .text {padding-left: 30px; padding-right: 20px;} .hifu_step_wrap .stepBox .text p.stepName {font-size: 16px; margin-bottom: 15px;} .hifu_step_wrap .stepBox .text ul li {font-size: 14px;} .hifu_step_wrap .stepBox .text ul li::before {top: 10px; } } @media screen and (max-width:640px) { .hifu_step_wrap .stepBox {display: block; padding: 25px 0} .hifu_step_wrap .stepBox .icon {width: 100%; margin-bottom: 10px;} .hifu_step_wrap .stepBox .icon p img {width: 100px;} .hifu_step_wrap .stepBox .text {padding-left: 20px; width: 100%; border-left: 0;} .hifu_step_wrap .stepBox .text p.stepName {font-size: 16px; margin-bottom: 25px; text-align: center;} .hifu_step_wrap .stepBox .text p.stepName span {display: block; margin-bottom: 8px; padding-right: 0} .hifu_step_wrap .stepBox .text ul li {font-size: 14px;} .hifu_step_wrap .stepBox .text ul li::before {top: 10px; } .hifu_step_wrap .stepBox .text>ul>li ul li {font-size: 13px; padding-left: 45px;} .hifu_step_wrap .stepBox .text>ul>li ul li::before {top: 8px;} } /*======================= 브랜드소개 =======================*/ #sub_container.sub0101, #sub_container.sub0102, #sub_container.sub0103{background-color: #fff; border-bottom: 1px solid #eee;} .brand_intro-text {} .brand_intro-text h5 {text-align: center; color: #2e73f2; line-height: 1.4;} .brand_intro-text p {font-size: 18px; text-align: center; line-height: 1.5; color: #5a5a5a; margin: 15px 0} ul.guide_list {} ul.guide_list li {width: 100%; border-radius: 7px; background: #f7f8fc; margin: 10px 0} ul.guide_list li a {position: relative; font-size: 14px; color: #212121; font-weight: 500; box-sizing: border-box; padding: 15px; display: block;} ul.guide_list li a::after {width: 20px; height: 20px; border-radius: 100%; background-color: #2e73f2; background-image: url("../_img/resource/next-arrow-w.svg"); background-size: 9px; background-position: center; background-repeat: no-repeat; content: ''; position: absolute; top: 50%; right: 15px; margin-top: -10px;} /*회원가입*/ dl.join-info_inputForm { margin: 40px 0} dl.join-info_inputForm dt {font-size: 14px; color: #575757; font-weight: 500; margin-bottom: 8px;} dl.join-info_inputForm dt span {color: #b0b0b5} dl.join-info_inputForm dd.num {display: flex; flex-wrap: wrap; justify-content: space-between; line-height: 50px; margin-bottom: 10px;} dl.join-info_inputForm dd.num input[type='text'] {width: 29% !important;} dl.join-info_inputForm dd button {width: 100%; height: 50px; border-radius: 5px; border: none; color: #fff; background: #e0e0e0; font-size: 14px;} dl.join-info_inputForm dd button.on {background: #2e73f2;} dl.join-info_inputForm dd.addr {position: relative;box-sizing: border-box; padding-right: 80px; margin-bottom: 5px;} dl.join-info_inputForm dd.addr button {position: absolute; top: 0; right: 0; width: 70px; height: 50px; background: #333; color: #fff; font-size: 14px; border: 0; border-radius: 5px;} /* 마이페이지 ========================================================================================== */ #my_page_wrap {padding: 40px 20px; box-sizing: border-box; background: #f4f4fa;} .my_page-section {background: #fff; margin: 30px 0; border-radius: 10px; padding: 5px 20px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1)} ul.my_page-list {} ul.my_page-list li {width: 100%; padding: 13px 25px 13px 5px; box-sizing: border-box; border-bottom: 1px solid #e4e4e4; font-size: 15px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between;} ul.my_page-list li:last-of-type {border-bottom: 0;} ul.my_page-list li.no-arrow::after {display: none;} ul.my_page-list li::after {position: absolute; top: 50%; margin-top: -7px; right: 5px; background: url("../_img/resource/next-arrow-g.svg") no-repeat center; background-size: 100%; content: ''; width: 10px; height: 15px;} ul.my_page-list li a {color: #484848; display: block;} ul.my_page-list li span {font-weight: 500; color: #2e73f2} .faq-category { padding: 10px 15px; box-sizing: border-box; border-bottom: 1px solid #efefef; display: flex;} .faq-category span {display: block; border-radius: 50px; border: 1px solid #efefef; color: #989898; padding: 7px 13px; line-height: 1; background: #fafafa; font-size: 14px; margin-right: 7px;} .faq-category span.on {background: #2e73f2; color: #fff; border-color:#2e73f2} /* 이용약관 ========================================================================================== */ .caluse {box-sizing: border-box; padding: 5px 20px 20px 20px;} .caluse p {font-size: 14px; margin: 7px 0; text-align: left; color: #212121} .caluse p strong {padding-top: 12px; display: block;} ul.faq_list {width: 100%; overflow: hidden; box-sizing: border-box; background: #fff;} ul.faq_list>li {border-bottom: 1px solid #efefef; cursor: pointer;} ul.faq_list>li .acc_head {position: relative; padding: 14px 15px; padding-right: 90px; width: 100%; box-sizing: border-box; line-height: 1.6; color: #212121; } ul.faq_list>li .acc_head .subject {} ul.faq_list>li .acc_head .subject p.title {color: #484848; font-size: 15px; font-weight: 600;} ul.faq_list>li .acc_head .subject p.date {font-size: 13px; color: #9a9a9a;} ul.faq_list>li .acc_head .subject p span {padding-right: 10px;} ul.faq_list>li .acc_content {position: relative; padding: 0 15px 10px 15px; padding-top: 0; padding-right: 90px;} ul.faq_list>li .acc_content p {margin: 15px 0; font-size: 14px; color: #636363; line-height: 1.5;} ul.faq_list>li .acc_content ul {margin-top: 20px } ul.faq_list>li .acc_content ul:first-of-type {margin-top: 0} ul.faq_list>li .acc_content ul li {position: relative; font-size: 14px; margin-top: 5px ; display: flex; flex-wrap: wrap; justify-content: space-between; color: #9d9d9d; padding-left: 11px;} ul.faq_list>li .acc_content ul li::before {position: absolute; top: 10px; left: 0; width: 6px; height: 1px; background: #c1c1c1; content: '';} ul.faq_list>li .acc_content ul li:first-of-type {margin-top: 0} ul.faq_list>li .acc_head::after {position: absolute; right: 15px; top: 21px; width: 25px; height: 20px; background: url("../_img/resource/list-open.svg") no-repeat center; background-size: 100%; content: ''; transition: transform 0.2s;} ul.faq_list>li.acc_active {background: #fafafa;} ul.faq_list>li.acc_active .acc_head::after {transform:rotateZ(180deg);} ul.faq_list>li.non-cont .acc_head::after {display: none;} .faq-category { padding: 10px 15px; box-sizing: border-box; border-bottom: 1px solid #efefef; display: flex;} .faq-category span {display: block; border-radius: 50px; border: 1px solid #efefef; color: #989898; padding: 7px 13px; line-height: 1; background: #fafafa; font-size: 14px; margin-right: 7px;} .faq-category span.on {background: #2e73f2; color: #fff; border-color:#2e73f2} /* 공지사항 ========================================================================================== */ #page-body.pageType-board { min-height: 100vh;} .notice_list-wrap {position: relative ;width:100%;} .notice_list-wrap li {border-bottom: 1px solid #efefef; overflow: hidden; box-sizing: border-box; padding:8px 15px;} .hifu_step_wrap .stepBox .text ul li {margin: 7px 0} .notice_list-wrap li:first-of-type {border-top: 0;} .notice_list-wrap li p {line-height: 1; margin: 7px 0} .notice_list-wrap li p.title {color: #484848; font-size: 15px; font-weight: 500;} .notice_list-wrap li p.title span { margin-right: 5px; margin-bottom: 0} .notice_list-wrap li p.date {font-size: 13px; color: #9a9a9a;} .notice_list-wrap li p.date span {padding-right: 10px;} .notice_list-wrap li span.condition {font-size: 12px !important; display: inline-block; padding: 5px 10px; color: #fff !important; border-radius: 30px; margin-bottom: 10px; font-weight: 400;} .notice_list-wrap li span.condition.type1 {background: #296cb5} .notice_list-wrap li span.condition.type2 {background: #999} #notice_title {border-bottom: 1px solid #d2d2d2; width: 100%; box-sizing: border-box; padding: 7px 15px;} #notice_title p {margin: 4px 0;} #notice_title p.title {font-size: 15px; font-weight: 600; color: #484848;} #notice_title p.date {font-size: 13px; color: #9a9a9a;} #notice_title p.date span {padding-right: 7px;} #notice_cont {width: 100%; box-sizing: border-box; padding: 30px 15px;} #notice_cont p {font-size: 14px; line-height: 1.5;} #notice_cont img {max-width:100%} #notice_reply {width: 100%; padding: 20px 15px; padding-bottom: 0; box-sizing: border-box;} #notice_reply .inner {background: #f8f8f8; box-sizing: border-box; padding: 20px; border-radius: 10px;} #notice_reply p {font-size: 14px; line-height: 1.5;} #notice_reply .writer {position: relative; box-sizing: border-box; padding-left: 35px; margin-bottom: 20px;} #notice_reply .writer span {display: block; line-height: 1;} #notice_reply .writer span.name {font-weight: 500;font-size: 14px; color: #484848;} #notice_reply .writer span.date {font-size: 12px; color: #9a9a9a; padding-top: 5px;} #notice_reply .profile {position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 100%; overflow: hidden; border: 1px solid #efefef; box-sizing: border-box; margin-right: 10px;} #notice_reply .profile img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} /* 후기작성 ========================================================================================== */ .review_write {} .review_write .myCar_box .car_information {border-bottom: 2px solid; border-radius: 10px; border-color: #efefef} .review_write .dealer_list.ver_pop {border-width: 2px; padding:15px; border-radius: 10px; margin-top: 5px;} .review_write .dealer_list.ver_pop p.dealer_name {margin-top: 5px} .review_write .score_wrap {} .review_write .score_wrap .star {position: relative; width: 200px; height: 30px;} .review_write .score_wrap .star .fill {background-size: 200px auto; height:30px } #review_write-sec2 {margin-top: 40px} /* 마이페이지 ========================================================================================== */ #my_page_wrap {padding: 40px 20px; box-sizing: border-box; background: #f4f4fa;} .my_page-section {background: #fff; margin: 30px 0; border-radius: 10px; padding: 5px 20px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.1)} ul.my_page-list {} ul.my_page-list li {width: 100%; padding: 13px 25px 13px 5px; box-sizing: border-box; border-bottom: 1px solid #e4e4e4; font-size: 15px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between;} ul.my_page-list li:last-of-type {border-bottom: 0;} ul.my_page-list li.no-arrow::after {display: none;} ul.my_page-list li::after {position: absolute; top: 50%; margin-top: -7px; right: 5px; background: url("../_img/resource/next-arrow-g.svg") no-repeat center; background-size: 100%; content: ''; width: 10px; height: 15px;} ul.my_page-list li a {color: #484848; display: block;} ul.my_page-list li span {font-weight: 500; color: #2e73f2} /*프로필사진변경*/ .profilePics {position: relative;} .profilePics .pics_wrap {position: relative; width: 150px; height: 150px; margin: 0 auto;} .profilePics .pics_wrap .pics {position: relative; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; box-sizing: border-box; border: 2px solid #fff; } .profilePics .pics_wrap .pics img {position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;} .hifu_step_wrap .stepBox .text ul li {margin: 7px 0} .profilePics .pics_wrap button {position: absolute; bottom: 0; left: 50%; margin-left: 30px; width: 40px; height: 40px; border: 1px solid #f1f1f1; box-sizing: border-box; border-radius: 100%; background: url("../_img/resource/camera.png") no-repeat center, #fff; background-size: 50%; text-indent: -99999px;} .profilePics p {text-align: center; font-size: 13px; color: #b0b0b4; margin-top: 5px;} /* 주요 사업영역 스타일 */ .business_info {background: #f8f9fa; padding: 40px 30px; margin-bottom: 50px; border-radius: 10px; border: 1px solid #e9ecef;} .business_info h3 {font-size: 32px; color: #2e73f2; margin-bottom: 30px; font-weight: 600; border-left: 4px solid #2e73f2; padding-left: 15px;} .business_info h3 svg {margin-right: 10px; vertical-align: middle;} .business_area {margin-bottom: 20px;} .business_item {margin: 25px 0; padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #e9ecef;} .business_item h4 {font-size: 20px; color: #333; margin-bottom: 15px; font-weight: 600;} .business_item h4 svg {margin-right: 8px; vertical-align: middle;} .business_item p {font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 0; padding-left: 28px;} .business_item p.region_text {font-size: 14px; color: #777; line-height: 1.8; letter-spacing: 0.5px;} /* 회사 소개 스타일 */ .company_intro {margin: 40px 0; padding: 30px; background: #fff; border-radius: 8px; border: 1px solid #e9ecef; text-align: center;} .company_intro h4 {font-size: 24px; color: #2e73f2; margin-bottom: 20px; font-weight: 600; line-height: 1.4;} .company_intro p {font-size: 16px; color: #666; line-height: 1.7; margin: 0;} /* 서비스 정보 스타일 */ .service_info {background: #f8f9fa; padding: 40px 30px; margin-top: 50px; border-radius: 10px; border: 1px solid #e9ecef;} .service_info h3 {font-size: 24px; color: #2e73f2; margin-bottom: 15px; font-weight: 600; border-left: 4px solid #2e73f2; padding-left: 15px;} .service_info h4 {font-size: 20px; color: #333; margin: 30px 0 15px 0; font-weight: 600;} .service_info p {font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 15px;} .service_info .promise_text {font-size: 18px; color: #2e73f2; font-weight: 500; text-align: center; margin: 30px 0; padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #e3f2fd;} .service_info .closing_text {font-size: 17px; color: #333; font-weight: 500; text-align: center; margin: 30px 0; padding: 20px; background: #fff; border-radius: 8px;} /* 서비스 세부 정보 */ .export_intro, .service_details, .why_choose {margin: 25px 0; padding: 20px; background: #fff; border-radius: 8px; border: 1px solid #e9ecef;} .service_details ul {margin: 15px 0; padding-left: 20px;} .service_details li {margin-bottom: 12px; line-height: 1.6;} .service_details strong, .why_choose strong {color: #2e73f2; font-weight: 600;} /* 해시태그 스타일 */ .hashtags {margin: 20px 0; text-align: center;} .hashtags span {display: inline-block; background: transparent; /*background: #2e73f2; *//*color: #fff;*/ color: #333; padding: 8px 15px; margin: 5px; border-radius: 20px; font-size: 14px; font-weight: 500;} /* 연락처 정보 */ .contact_info {background: #333; color: #fff; padding: 25px; border-radius: 8px; text-align: center; margin-top: 30px;} .contact_info p {font-size: 18px; font-weight: 500; margin: 10px 0; color: #fff;} .contact_info p svg {margin-right: 8px; vertical-align: middle;} .contact_info a {color: #ffd700; font-weight: 600; text-decoration: none;} .contact_info a:hover {text-decoration: underline; color: #fff;} /* 서비스 정보 제목에 SVG 아이콘 스타일 */ .service_info h4 svg {margin-right: 10px; vertical-align: middle;} .export_intro h4 svg, .service_details h4 svg, .why_choose h4 svg {margin-right: 10px; vertical-align: middle;} .brand_intro-text p span {font-size: 14px; letter-spacing: 10px; color: #2e73f2; opacity: 0.5; font-weight: 600;} .brans_intro-banner {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 80px 0} .brans_intro-banner:nth-of-type(even) {flex-direction: row-reverse;} .brans_intro-banner .pics {width: 50%;overflow: hidden; border-radius: 10px; position: relative;} .brans_intro-banner .pics img {width:100%; } .brans_intro-banner .brand_intro-text {width: 50%; box-sizing: border-box; display: table;} .brans_intro-banner .brand_intro-text .text_wrap {width:100%; display: table-cell; vertical-align:middle; padding: 0 50px; box-sizing: border-box;} .brans_intro-banner .brand_intro-text p, .brans_intro-banner .brand_intro-text h5 {text-align: left;} .brans_intro-banner .brand_intro-text h5 {color: #212121} .brans_intro-banner.greeting {display: block; margin: 0;} .brans_intro-banner.greeting .pics_wrap {display: flex; flex-wrap: wrap; justify-content:center;} .brans_intro-banner.greeting .pics {width:20%; margin: 0 20px; box-sizing: border-box; border: 1px solid #efefef;} .brans_intro-banner.greeting .pics img {border-radius: 10px;} .brand_intro-text.new {width:100%; background: #fafafa; padding: 300px 0 120px 0; margin-top: -250px;} .brand_intro-text.new h5 {color: #2e73f2; text-align: center;} .brand_intro-text.new p {text-align: center;} .brand_intro-text.new p strong {font-weight: 700; letter-spacing: 5px; padding-left: 10px;} .brand_intro-text.new p:last-of-type {margin-top: 30px;} .hide-768 {display: block;} .show-768 {display: none;} @media screen and (max-width:980px) { .brand_intro-text p {font-size: 16px; margin: 5px 0} .brand_intro-text p span {font-size: 12px; letter-spacing: 5px;} .brans_intro-banner {margin: 40px 0} .brans_intro-banner .pics {width: 100%;} .brans_intro-banner .brand_intro-text {width: 100%; padding-top: 10px;} .brans_intro-banner .brand_intro-text .text_wrap {/*padding-left: 0;*/ padding-left: 40px; padding-right: 0} /* 주요 사업영역 모바일 반응형 */ .business_info {padding: 30px 20px;} .business_info h3 {font-size: 28px;} .business_item {margin: 20px 0; padding: 15px;} .business_item h4 {font-size: 18px;} .business_item p {font-size: 14px; padding-left: 26px;} .business_item p.region_text {font-size: 13px;} .company_intro {margin: 30px 0; padding: 20px;} .company_intro h4 {font-size: 20px;} .company_intro p {font-size: 14px;} /* 서비스 정보 모바일 반응형 */ .service_info {padding: 30px 20px; margin-top: 40px;} .service_info h3 {font-size: 20px;} .service_info h4 {font-size: 18px;} .service_info p {font-size: 14px;} .service_info .promise_text {font-size: 16px; padding: 15px;} .service_info .closing_text {font-size: 15px; padding: 15px;} .hashtags span {font-size: 12px; padding: 6px 12px;} .contact_info {padding: 20px;} .contact_info p {font-size: 16px;} .contact_info p svg {width: 18px; height: 18px;} } a.more_view_btn {display: block; width: 100%; height: 45px; border-radius: 5px; border: 1px solid #e4e4e4; text-align: center; line-height: 45px; font-size: 14px; color: #212121; background: #fff; margin-top: 20px;} ul.notice_list {} ul.notice_list li {width: 100%; position: relative; box-sizing: border-box; padding-right: 50px; font-size: 14px;} ul.notice_list li a { color: #212121; display: block; padding: 7px 0; overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis;} ul.notice_list li span {position: absolute; top: 7px; right: 0; color: #b0b0b4;} @media screen and (max-width:768px) { .hide-768 {display: none;} .show-768 {display: block;} .brans_intro-banner.greeting {margin-bottom: 0;} .brans_intro-banner.greeting .pics_wrap {justify-content: space-between;} .brans_intro-banner.greeting .pics {width:48%; text-align: center; margin-bottom: 20px; margin-left: 0; margin-right: 0} .brans_intro-banner.greeting .brand_intro-text {width:100%} .brans_intro-banner .brand_intro-text .text_wrap {padding-left: 0;} .brand_intro-text.new {padding: 150px 0 80px 0; margin-top: -150px;} .sub0101 h5, .sub0102 h5, .sub0103 h5{font-size: 19px; letter-spacing: -0.5px;} .sub0102 .brans_intro-banner:last-child {margin-bottom: 0;} /*.sub0101 .contents-inner, .sub0102 .contents-inner, .sub0103 .contents-inner{padding:30px 10px;}*/ .sub0103 .one_pics img{max-width: 100%;} /* 주요 사업영역 모바일 스타일 */ .business_info {padding: 20px 15px;} .business_info h3 {font-size: 24px; padding-left: 12px; border-left-width: 3px;} .business_item {margin: 15px 0; padding: 12px;} .business_item h4 {font-size: 16px; margin-bottom: 10px;} .business_item p {font-size: 13px; padding-left: 24px;} .business_item p.region_text {font-size: 12px; line-height: 1.6;} .company_intro {margin: 20px 0; padding: 15px;} .company_intro h4 {font-size: 18px;} .company_intro p {font-size: 13px;} /* 서비스 정보 768px 모바일 스타일 */ .service_info {padding: 20px 15px; margin-top: 30px;} .service_info h3 {font-size: 18px; padding-left: 12px; border-left-width: 3px;} .service_info h4 {font-size: 16px; margin: 20px 0 10px 0;} .service_info p {font-size: 13px;} .service_info .promise_text {font-size: 15px; padding: 12px;} .service_info .closing_text {font-size: 14px; padding: 12px;} .export_intro, .service_details, .why_choose {margin: 15px 0; padding: 15px;} .hashtags span {font-size: 11px; padding: 5px 10px; margin: 3px;} .contact_info {padding: 15px;} .contact_info p {font-size: 15px; margin: 8px 0;} .contact_info p svg {width: 16px; height: 16px;} } .m_sec05 {width:100%; position:relative; background:#f0f4f8} .m_sec05 {position: relative; padding:80px 0;} .m_sec05 .contents {display: flex; flex-wrap: wrap; justify-content: space-between;} .m_sec05 .contents .layoutBox {width: 100%; flex-shrink: 1; position: relative;} .m_sec05 .contents .layoutBox p {text-align: center; font-size: 17px; line-height: 1.3; margin-top: 15px; } .video_area { position: relative; width: 568px; height: 320px; max-width: 100%; } @media screen and (max-width:768px) { .m_sec05 .contents .layoutBox {width:100%; margin-bottom:10px} .video_area {width:100%} } .video_section_title_wrap { width: 100%; text-align: center; margin-bottom: 30px; /* 영상과 제목 간의 간격 */ } .video_section_title { text-align: center; /* 제목을 중간으로 배치 */ font-size: 27px; /* h5 글자 크기 */ font-weight: 600; /* h5 글자 굵기 */ } .m_sec02 .sec02_cont02 h5 { margin-bottom: 30px; color: #212121; text-align: center; } h5 { font-size: 27px; } .logo_image { height: 35px; /* h5 글자 크기와 동일하게 설정 */ vertical-align: bottom; /* 텍스트와 이미지가 하단에 정렬되도록 설정 */ margin-right: 0px; /* 이미지와 텍스트 사이에 약간의 간격 추가 */ } /* 수수료 안내 */ .basic_table {border: 1px solid #e4e4e4; border-bottom: 0;} .basic_table tr {} .basic_table tr th, .basic_table tr td {color: #212121; font-size: 14px; padding: 20px 15px; text-align: center;} .basic_table tr th {font-weight: 700; background: #f7f8fc;} .basic_table tr td {border-bottom: 1px solid #e4e4e4; }