@charset "utf-8";
/* ===================================================================
   파인오토 메인 화면 스타일 (2026-11-02 리뉴얼)
   옛 theme/basic/css/default.css 에서 메인 화면에 쓰는 부분만 옮김
   - 본고딕(Noto Sans KR)은 index.php 의 구글 폰트 링크로 불러옴
   - 기본 파란색 #0092dd  (바꾸려면 아래 #0092dd 를 모두 바꾸기)
   =================================================================== */

@font-face {font-family: 'TmonMonsori'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff'); font-weight: normal; font-style: normal}

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family: 'Noto Sans KR', sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: 'Noto Sans KR', sans-serif; letter-spacing:-1px}
ul, dl, dt, dd {margin:0;padding:0;list-style:none}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button, select {margin:0;font-family: 'Noto Sans KR', sans-serif;font-size:1em}
button {cursor:pointer}
p {margin:0;padding:0;word-break:break-all}
a {color:#000;text-decoration:none}
*, :after, :before {box-sizing:border-box}
input[type=text], input[type=tel] {transition:all 0.30s ease-in-out; outline:none}
input[type=text]:focus, input[type=tel]:focus, select:focus {box-shadow:0 0 5px #9ed4ff; border:1px solid #558ab7 !important}

.color_01 {color:#0092dd}
.fw_800 {font-weight:800}
.brs {display:none}

/* 빠른 메뉴 */
#quick {position:fixed; left:0; bottom:0; height:100%; background:#fff; border:1px solid #e5e5e5; z-index:9999}
#quick li {display:block; border-bottom:1px solid #e5e5e5; text-align:center}
#quick li:hover {background:#eee}
#quick li p {font-size:17px; color:#383838; font-weight:500; margin-top:5px}
#quick li:nth-child(2) {display:none} /* PC 에서는 전화상담 숨김 */
#quick .mb {display:block}
a.btn_09 {display:inline-block; width:100%; padding:20px}

@media screen and (max-width:1200px) {
#quick {width:100%; height:60px}
#quick .mb {display:none}
#quick li {float:left; width:25%; border-bottom:0}
#quick li img {height:20px; width:auto}
#quick li:nth-child(2) {display:block}
#quick li:hover {background:#fff}
#quick li p {font-size:0.75em; margin-top:5px}
a.btn_09 {padding:10px 0 0}
}

#wrap:after, #container:after {display:block;visibility:hidden;clear:both;content:""}
#container {width:100%; margin:0 auto}

@media screen and (max-width:1200px) {
img {width:100%; height:auto}
.brs {display:block}
}

/* ① 첫 화면 */
#mct_01 {overflow:hidden; background:#f9f9f9}
#mct_01 .counts {width:1200px; margin:0 auto; padding:20px 0; background:#fff}
#mct_01 .counts:after {display:block;visibility:hidden;clear:both;content:""}
#mct_01 .counts li {float:left; width:25%; text-align:center; font-size:17px; font-weight:500; color:#242424}
#mct_01 .counts dl {display:table; margin-left:auto; margin-right:auto}
#mct_01 .counts dt span {font-size:17px; width:100%; font-weight:500; margin:0 5px; color:#fff; padding:0 10px; border:2px solid #0092dd; border-radius:20px; background:#0092dd}
#mct_01 .counts dt {float:left}
#mct_01 .hd {position:absolute; width:1200px; left:50%; margin-left:-600px; padding:15px 50px; background:#0092dd; border-bottom-right-radius:35px; border-bottom-left-radius:35px}
#mct_01 .hd:after {display:block;visibility:hidden;clear:both;content:""}
#mct_01 .hd h1 {float:left}
#mct_01 .hd h2 {float:right; font-size:22px; color:#fff; font-weight:600; margin-top:7px}
#mct_01 .box {background:url('../img/bg_01.jpg') center no-repeat; background-size:cover; padding:220px 0 0}
#mct_01 .box .title {text-align:center}
#mct_01 .box .title h3 {font-size:60px; color:#383838; font-family:'TmonMonsori', sans-serif; margin:10px 0 5px}
#mct_01 .box .title h4 {font-size:25px; color:#383838; font-weight:500}
#mct_01 .box .title h5 {font-size:22px; color:#383838; font-weight:400}
#mct_01 .box .btns {position:relative; width:250px; margin:30px auto 0; z-index:9}
#mct_01 .box .img {position:relative; text-align:center; margin-top:-50px; z-index:1}
a.btn_01 {display:inline-block; width:100%; border-radius:30px; background:#0092dd; text-align:center; font-size:22px; font-weight:600; padding:15px 0; color:#fff}

@media screen and (max-width:1200px) {
#mct_01 .counts {width:100%; padding:20px 10px}
#mct_01 .counts li {width:50%; text-align:left; margin-bottom:10px; font-size:1em; letter-spacing:-0.5px}
#mct_01 .counts li:nth-child(3), #mct_01 .counts li:nth-child(4) {margin-bottom:0}
#mct_01 .counts dt span {font-size:1em}
#mct_01 .hd {width:100%; left:0; margin-left:0; padding:20px 10px; border-radius:0}
#mct_01 .hd h1 {width:150px}
#mct_01 .hd h2 {font-size:1.25em; margin-top:5px}
#mct_01 .box {background-size:100% 100%; padding:125px 10px 0 10px}
#mct_01 .box .title h3 {font-size:3em}
#mct_01 .box .title h4 {font-size:2em}
#mct_01 .box .title h5 {font-size:1.5em}
#mct_01 .box .btns {width:75%; margin:20px auto 0}
a.btn_01 {font-size:1.5em; padding:15px 0}
#mct_01 .box .img {margin-top:30px}
}

/* ② 차량 가격 */
#mct_02 {width:1200px; margin:0 auto; padding:100px 0; overflow:hidden}
#mct_02:after {display:block;visibility:hidden;clear:both;content:""}
#mct_02 .title {margin-bottom:50px; text-align:center}
#mct_02 .title h1 {font-size:60px; color:#37414f; font-weight:500}
#mct_02 .title h2 {font-size:25px; color:#383838; font-weight:400; line-height:35px}
#mct_02 li {float:left; width:32%; border-radius:50px; text-align:center; padding:50px 0}
#mct_02 li:first-child {background:#0092dd}
#mct_02 li:nth-child(2) {margin:0 2%; background:#383838}
#mct_02 li:last-child {background:#0092dd}
#mct_02 .img {margin:50px 0}
#mct_02 h3 {font-size:32px; color:#fff; font-weight:500}
#mct_02 h4 {font-size:45px; color:#fff; font-weight:800}
#mct_02 p {font-size:17px; color:#fff; font-weight:400}
#mct_02 .btns {width:75%; margin:30px auto 0}
a.btn_02 {display:inline-block; width:100%; border-radius:25px; background:#383838; text-align:center; font-size:22px; font-weight:600; padding:15px 0; color:#fff}
a.btn_03 {display:inline-block; width:100%; border-radius:25px; background:#fff; text-align:center; font-size:22px; font-weight:600; padding:15px 0; color:#383838}

@media screen and (max-width:1200px) {
#mct_02 {width:100%; padding:75px 0}
#mct_02 .title {margin-bottom:30px}
#mct_02 .title h1 {font-size:3em; line-height:1.25em; margin-bottom:15px}
#mct_02 .title h2 {font-size:1.5em; line-height:1.25em}
#mct_02 .box {padding:0 20px}
#mct_02 li {float:none; display:block; width:100%; padding:20px 0; border-radius:25px}
#mct_02 li:nth-child(2) {margin:10px 0}
#mct_02 .img {margin:20px 0}
#mct_02 img {width:200px}
#mct_02 h3 {font-size:2em}
#mct_02 h4 {font-size:2.5em}
#mct_02 p {font-size:1.25em}
#mct_02 .btns {margin:20px auto 0}
a.btn_02, a.btn_03 {font-size:1.25em}
}

/* ③ 최저가는 없다 */
#mct_03 {padding:100px 0; background:#fafafa; overflow:hidden}
#mct_03 .img {text-align:center}
#mct_03 .txt {margin-top:50px; text-align:center}
#mct_03 .txt p {font-size:30px; font-weight:300; color:#383838}
#mct_03 .title {text-align:center; margin-bottom:50px}
#mct_03 .title h1 {font-size:50px; color:#37414f; font-weight:400}

#tag-cloud {
    height:600px; width:600px; display:block; text-align:center; margin:0 auto; overflow:hidden;
    opacity:0; transition:opacity .5s;
    border-radius:50%; box-shadow:2px 2px 10px rgba(0,0,0,0.2);
    padding-top:90px; background-color:rgba(255,255,255,0.5);
}
#tag-cloud.on {opacity:1}

@media screen and (max-width:1200px) {
#tag-cloud {height:300px; width:300px; padding-top:0; font-size:1px}
#mct_03 {padding:75px 0}
#mct_03 .txt p {font-size:1.5em}
#mct_03 .img {padding:0 10px}
#mct_03 .title h1 {font-size:2.5em; line-height:1.25em; margin-bottom:10px}
}

/* ④ 현실적인 최저가 */
#mct_04_bg {background:#383838}
#mct_04 {position:relative; width:1200px; margin:0 auto; padding:50px 20px; overflow:hidden}
#mct_04 .area {padding:50px 0; background:#fff}
#mct_04 .title {text-align:center; margin-bottom:50px}
#mct_04 .title h1 {font-size:50px; color:#37414f; font-weight:400}
#mct_04 .title p {font-size:25px; color:#383838; font-weight:400; line-height:30px}
#mct_04 .box {width:65%; margin:0 auto}
#mct_04 .box:after {display:block;visibility:hidden;clear:both;content:""}
#mct_04 .box li {float:left; width:30%; margin-right:5%; margin-bottom:5%; text-align:center}
#mct_04 .box li:nth-child(3n) {margin-right:0}
#mct_04 .txt {margin-top:10px}
#mct_04 .txt p {font-size:20px; color:#777; font-weight:400; line-height:25px}
#mct_04 .btxt {text-align:center}
#mct_04 .btxt h2 {font-size:37px; color:#37414f; font-weight:400}
#mct_04 .object {position:absolute; bottom:10px; right:30px}

@media screen and (max-width:1200px) {
#mct_04 {width:100%; padding:25px 10px}
#mct_04 .area {padding:50px 10px}
#mct_04 .title h1 {font-size:2.5em; line-height:1.25em; margin-bottom:10px}
#mct_04 .title p {font-size:1.25em; line-height:1.25em}
#mct_04 .box {width:100%}
#mct_04 .box li {width:47.5%}
#mct_04 .box li:nth-child(3) {margin-right:5%}
#mct_04 .box li:nth-child(2n) {margin-right:0}
#mct_04 .txt p {font-size:1.25em; line-height:1.25em}
#mct_04 .object {display:none}
#mct_04 .btxt {margin-top:20px}
#mct_04 .btxt h2 {font-size:2em}
}

/* ⑤ 허위광고 */
#mct_05 {position:relative; width:1200px; margin:0 auto; padding:100px 0; overflow:hidden}
#mct_05 .title {text-align:center}
#mct_05 .title h1 {font-size:50px; color:#383838; font-weight:400}
#mct_05 .title p {font-size:25px; color:#383838; font-weight:400}
#mct_05 .img {text-align:center; margin:50px 0}
#mct_05 .btns {width:30%; margin:0 auto}
#mct_05 .object {position:absolute; bottom:0; right:0}
a.btn_04 {display:inline-block; width:100%; font-size:30px; font-weight:600; padding:15px 0; color:#0092dd; border:5px solid #0092dd; text-align:center}

@media screen and (max-width:1200px) {
#mct_05 {width:100%; padding:75px 0}
#mct_05 .title h1 {font-size:2.25em; line-height:1.25em}
#mct_05 .title p {font-size:1.25em; line-height:1.25em; margin-top:10px}
#mct_05 .img {padding:0 10px; margin:50px 0 25px 0}
#mct_05 .btns {width:90%}
#mct_05 .object {position:relative; width:70%; margin:50px auto 0}
a.btn_04 {font-size:1.25em; border:2px solid #0092dd}
}

/* ⑥ 비교견적 */
#mct_06_bg {background:#383838}
#mct_06 {position:relative; width:1200px; margin:0 auto; padding:175px 100px 0 100px; overflow:hidden}
#mct_06:after {display:block;visibility:hidden;clear:both;content:""}
#mct_06 .object {float:left}
#mct_06 .box {float:right; margin-top:-75px}
#mct_06 .title {margin-bottom:20px}
#mct_06 .title h1 {font-size:50px; color:#fff; font-weight:500; line-height:50px; margin-bottom:20px}
#mct_06 .title h2 {font-size:40px; color:#fff; font-weight:500}
#mct_06 .title p {font-size:17px; color:#fff; font-weight:400; line-height:27px}
#mct_06 .btns {width:50%; margin-top:30px}
a.btn_05 {display:inline-block; width:100%; font-size:17px; font-weight:600; padding:10px 0; background:#3b3b3b; color:#fff; box-shadow:1px 5px 10px 1px black; text-align:center}

@media screen and (max-width:1200px) {
#mct_06 {width:100%; padding:75px 10px 0 10px}
#mct_06 .box {float:none; margin-top:0}
#mct_06 .object {float:none; width:45%; margin:0 auto}
#mct_06 .btns {width:50%; margin:20px auto}
#mct_06 .title {text-align:center}
#mct_06 .title h1 {font-size:2.25em; line-height:1.25em; margin-bottom:10px}
#mct_06 .title h2 {font-size:2.25em}
#mct_06 .title p {font-size:1em; line-height:1.5em}
}

/* ⑦ 비밀 소책자 */
#mct_07 {position:relative; width:1200px; margin:0 auto; padding:50px; overflow:hidden}
#mct_07:after {display:block;visibility:hidden;clear:both;content:""}
#mct_07 .area {float:left; margin-top:100px}
#mct_07 .area .title {margin-bottom:20px}
#mct_07 .area .title h1 {font-size:60px; color:#3b3b3b; font-weight:500; line-height:70px}
#mct_07 .area .txt p {font-size:25px; color:#3b3b3b; font-weight:400; line-height:35px}
#mct_07 .area .btns {margin-top:30px}
#mct_07 .img {float:right}
a.btn_06 {display:inline-block; width:100%; font-size:17px; font-weight:600; padding:20px 0; background:#3b3b3b; color:#fff; box-shadow:1px 5px 10px 1px #878787; text-align:center}

@media screen and (max-width:1200px) {
#mct_07 {width:100%; padding:75px 10px}
#mct_07 .area {float:none; margin-top:0; text-align:center}
#mct_07 .area .title {margin-bottom:10px}
#mct_07 .area .title h1 {font-size:2.25em; line-height:1.25em}
#mct_07 .area .txt p {font-size:1.25em; line-height:1.5em}
#mct_07 .area .btns {width:50%; margin:30px auto 0}
#mct_07 .img {float:none; width:75%; margin:50px auto 0}
a.btn_06 {font-size:1.5em; padding:10px 0}
}

/* ⑧ 영업사원 없음 */
#mct_08 {background:url('../img/bg_02.jpg') center no-repeat; background-size:cover; padding:100px 0; overflow:hidden}
#mct_08 .title {margin-bottom:20px; text-align:center}
#mct_08 .title h1 {font-size:40px; color:#fff; font-weight:500; margin-bottom:10px}
#mct_08 .title h2 {font-size:25px; color:#fff; font-weight:400; line-height:35px}
#mct_08 .img {text-align:center}
#mct_08 .btns {width:1200px; margin:0 auto}
a.btn_07 {display:inline-block; width:100%; font-size:25px; font-weight:600; padding:20px 0; background:#0092dd; color:#fff; text-align:center}

@media screen and (max-width:1200px) {
#mct_08 {background-size:100% 100%; padding:75px 0}
#mct_08 .title {margin-bottom:10px}
#mct_08 .title h1 {font-size:2.25em; margin-bottom:5px}
#mct_08 .title h2 {font-size:1.25em; line-height:1.5em}
#mct_08 .img {margin-top:20px}
#mct_08 .btns {width:100%}
a.btn_07 {font-size:1.5em; padding:10px 0}
}

/* ⑨ 상담 신청서 */
#mct_09 {padding:100px 0; background:#f2f2f2}
#mct_09 .title {margin-bottom:20px; text-align:center}
#mct_09 .title h1 {font-size:45px; color:#383838; font-weight:400}
#mct_09 .box {width:50%; margin:0 auto}
#mct_09 li {display:block; margin-bottom:20px}
#mct_09 li:after, #mct_09 dl:after {display:block;visibility:hidden;clear:both;content:""}
#mct_09 li:last-child {margin-bottom:0; margin-top:50px}
#mct_09 dt {float:left; width:20%; line-height:50px}
#mct_09 dd {float:left; width:80%; line-height:50px}
#mct_09 .rd {display:inline-block; margin-right:20px; font-size:17px; cursor:pointer}
#mct_09 .rd .ckbox {width:20px; height:20px}
#mct_09 .ipfull {display:inline-block; width:100%; height:50px; line-height:50px; border:1px solid #e5e5e5; padding:0 10px; font-size:17px; color:#555; background:#fff}
#mct_09 p {font-size:25px; color:#505153; font-weight:500}
#mct_09 .agrees {text-align:center; font-size:17px}
#mct_09 .privacy_btn {border:0; background:none; color:#0092dd; font-size:inherit; padding:0 5px}
#privacy_box {display:none; margin-top:10px; padding:15px; background:#fff; border:1px solid #e5e5e5; text-align:left; font-size:14px; line-height:1.7; color:#555}
#privacy_box.on {display:block}
.btn_08 {display:inline-block; width:100%; padding:20px 0; background:#0092dd; font-size:25px; color:#fff; font-weight:600; text-align:center; border:0}
.btn_08:disabled {opacity:.6}
.hp_field {position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} /* 스팸 로봇 걸러내기용 숨김칸 */

@media screen and (max-width:1200px) {
#mct_09 {padding:75px 0}
#mct_09 .title {margin-bottom:15px}
#mct_09 .title img {width:40%}
#mct_09 .title h1 {font-size:2.25em}
#mct_09 .box {width:90%}
#mct_09 li {margin-bottom:5px}
#mct_09 li:last-child {margin-top:20px}
#mct_09 .ipfull {font-size:1em}
#mct_09 p {font-size:1em}
#mct_09 .agrees {font-size:1em}
#mct_09 .rd {margin-right:10px; font-size:1em}
#mct_09 .rd .ckbox {width:15px; height:15px}
.btn_08 {font-size:1.5em}
}

/* 하단 */
#ft {padding:50px 0; text-align:center}
#ft p {font-size:15px; color:#383838; font-weight:400; line-height:25px}
@media screen and (max-width:1200px) {
#ft {padding:20px 10px; margin-bottom:75px}
#ft p {font-size:1em}
#ft .mb {display:none}
}