:root {accent-color:#000;}

.pc {display:none;}
.mobile {display:block;}
.br {display:none;}
.mbr {display:block; width:100%; height:1px; }
.img-responsive {width:100%;}
.img-maxponsive {max-width:100%;}
.actnone {pointer-events: none; cursor: default;}
.bold {font-weight:700;}

.fc-b {color:#1c57fc;}
.fc-y {color:#fcd718;}
.fc-p {color:#ff623d;}
.fc-r {color:#ff2323;}

.container {width:100%; padding:0 15px; margin:0 auto; max-width:1280px;}

/* header */
#top { width:100%; position:fixed;  left:50%; top:0;  transform:translateX(-50%);   background:#fff;   z-index:8; box-shadow:3px 3px 3px rgba(0 0 0 / 5%); }
#top.scroll {z-index:99; box-shadow:3px 3px 5px rgba(0 0 0 / 17%); }
#top .pc .container {padding:35px 0; display:flex; align-items:center; justify-content:space-between;}
#top .pc .container .topwrap {gap:80px;}
#top .pc .container .logo a {display:block; width:200px;}
#top .pc .container .hmenu {display:flex; gap:50px;}
#top .pc .container .hmenu a {display:block; font-size:19px; font-weight:500; color:#000;}
#top .pc .container .hmenu a:hover {font-weight:700;}
#top .pc .container .hbtn {display:flex; align-items:center; gap:25px;}
#top .pc .container .hbtn img {width:40px; border-radius:12px; overflow:hidden;}
#top .pc .container .hbtn a {display:flex; align-items:center; gap:12px; font-size:28px; font-weight:bold; letter-spacing:-1px; color:#000;}

#top .mobile .container {display:flex; align-items:center; padding:15px; gap:13px; justify-content:space-between;}
#top .mobile .container .logo a {display:block; width:130px;}
#top .mobile .container .hbtn {display:flex; align-items:center; gap:7px;}
#top .mobile .container .hbtn img { width:28px; border-radius:5px; overflow:hidden;}

#top .menu { position: absolute; top: 0; right: 0;  height: 100%;  max-width: 0;  transition: 0.5s ease;  z-index: 1;  background-color: #222;}
#top .burger-icon {  cursor: pointer;  display: inline-block;  position: absolute;  z-index: 2;  padding: 8px 0;  top: 20px;  right: 12px;  user-select: none;  width: auto;  margin: 0;}
#top .burger-icon .burger-sticks {  background: #000;  display: block;  height: 2px;  position: relative;  transition: background .2s ease-out;  width: 20px;}
#top .burger-icon .burger-sticks:before,
#top .burger-icon .burger-sticks:after { background: #000;  content: '';  display: block;  height: 100%;  position: absolute;  transition: all .2s ease-out;  width: 100%;}
#top .burger-icon .burger-sticks:before {  top: 6px;}
#top .burger-icon .burger-sticks:after {  top: -6px;}
#top .burger-check {  display: none;}
#top .burger-check:checked~.menu {  max-width: 200px; height:100vh;}
#top .burger-check:checked~.menu ul {margin-top:60px;}
#top .burger-check:checked~.menu ul a {padding:16px 0 16px 16px; font-size:14px; border-top:1px solid #434343; color:#fff;}
#top .burger-check:checked~.burger-icon .burger-sticks { background: transparent;}
#top .burger-check:checked~.burger-icon .burger-sticks:before {transform: rotate(-45deg);}
#top .burger-check:checked~.burger-icon .burger-sticks:after {transform: rotate(45deg);}
#top .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before,
#top .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after { top: 0; background:#fff;}

/* visual */
.flex {display:flex;}
.flex.center {align-items:center;}
.flex.between {justify-content:space-between;}
.box-shadow {box-shadow:2px 3px 5px rgba(0 0 0 / 15%);}

#vtop {padding:80px 0 40px 0; background:#f8f8f8; }
#vtop .vcon {display:flex; justify-content:space-between; flex-direction:column; gap:20px;}
#vtop .vcon .visual {position:relative;  width:100%;  overflow:hidden; }
#vtop .vcon .visual .swiper-slide { height:400px; border-radius:30px;}
#vtop .vcon .visual .txt {position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); width:90%; z-index:9; color:#fff; text-align:center;}
#vtop .vcon .visual .txt h3 {padding: 0 0 0 3px; font-size:14px; opacity:30%;}
#vtop .vcon .visual .txt h2 {margin:20px 0 20px 0; font-size:42px; line-height:1.3; font-weight:600; letter-spacing:-1px;}
#vtop .vcon .visual .txt p {padding: 0 0 0 3px; font-size:16px; font-weight:400; line-height:1.6;}
#vtop .vcon .visual .swiper-pagination-bullet-active {background:#f81515 !important; }
#vtop .vcon .visual .swiper-pagination-bullet {margin:0 5px; width:8px; height:8px; background:#fff; opacity:1; }
#vtop .vcon .visual .swiper-pagination {bottom:20px;}

#vtop .vcon .mcounsel {position:relative; }
#vtop .vcon .mcounsel .img {position:absolute; top:-30px; right:-9px; width:100px; z-index:9; animation:mping 3s;}
@keyframes mping{
    0%{top:-30px}
	25% { top:-40px;}
	50%{top:-30px}
	75%{ top:-40px;}
    100%{ top:-30px;}
}

.mcounsel {padding:40px 20px; background:#fff; border-radius:30px; text-align:center;}
.counselForm h3 {font-size:24px; color:#000; letter-spacing:-0.5px;}
.counselForm p {margin:10px 0 20px 0; font-size:14px; color:#979797;}
.counselForm .cn-wrap {display:flex; flex-direction:column; gap:5px;}
.counselForm .cn-wrap input {padding:15px; font-size:15px;  border-radius:12px; border:1px solid #e9e9e9;}
.counselForm .cn-wrap input:focus {border:1px solid #000; color:#000;}
.counselForm .agree {margin:20px 0; font-size:13px; color:#9e9e9e; }
.counselForm .agree a {color:#9e9e9e;}
.counselForm button.btn {padding:15px 0; width:100%; background:#f81515; border:2px solid #f81515; border-radius:12px; color:#fff; text-align:center; font-weight:500; font-size:20px; letter-spacing:-1px;}
.counselForm button.btn:hover {background:#fff; border:2px solid #f81515; color:#f81515; transition:all 0.5s;}


.realList {position:relative; width:100%; background:#fff; border-radius:30px;}
.realList .img {display:none;}
.realList h2 { padding:25px 20px 20px 20px; font-size:20px; background:#f81515; border-top-right-radius:30px; border-top-left-radius:30px; text-align:center;}
.realList .listBox {padding:25px;}
.realList .listBox .vertical-slide {  height: 175px;  }
.realList .listBox .vertical-slide .txt {display:flex; align-items:center; gap:10px;}
.realList .listBox .vertical-slide .new {font-size:12px; font-weight:bold; color:#f81515;}
.realList .listBox .vertical-slide .carname {font-size:16px; width:95px; overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}
.realList .listBox .vertical-slide .result {padding:7px 10px; font-size:13px; font-weight:500; color:#f81515; background:#000;  border-radius:5px;}


.mbn ul {margin-top:20px; display:flex; align-items:center; flex-direction:column; gap:20px;}
.mbn ul li {width:100%;}
.mbn ul li a {position:relative; top:0; padding:20px 10px 20px 25px; background:#fff; border-radius:22px; color:#000;}
.mbn ul li a h3 {font-size:22px; font-weight:700;}
.mbn ul li a p {margin-top:10px; font-size:15px; opacity:80%;}
.mbn ul li a .img {width:65px;}
.mbn ul li.bg-y a {background:#f81515;}
.mbn ul li.bg-g a {background:#c4c4c4; color:#fff;}


/*vs*/
#vs {padding:40px 0; background:url('../_img/vs_bg_m.png') no-repeat center; background-size:cover; background-attachment:fixed; }
#vs .container {display:flex; flex-direction:column; gap:30px;}
#vs .txt {text-align:center; color:#fff; }
#vs .txt p {font-size:16px; opacity:0.6;}
#vs .txt h2 {margin:15px 0 20px 0; font-size:26px; line-height:1.4;}
#vs .vscon {background:#f81515; border-radius:22px; overflow:hidden; text-align:center;}
#vs .vscon .subject {padding:10px; filter: invert(1);}
#vs .vscon .subject img { }
#vs .price {position:relative; padding:0 35px; background:#1e2025; border-radius:20px; justify-content:center; }
#vs .price .up {position:absolute; bottom:-14px; right:-4px; width:50px; z-index:9;}
#vs .price .blink {animation:blink 1s infinite;}

.blink {animation:blink 3s infinite steps; opacity:1;}
@keyframes blink{
    0%{opacity:1;}
	50%{opacity:0;}
    100%{opacity:1;}
}


/*internal*/
.internal {padding:60px 0;}
.internal .tit {margin-bottom:30px; text-align:center;}
.internal .tit h3 {font-size:18px; font-weight:400;}
.internal .tit h2 {margin-top:10px; font-size:32px; letter-spacing:-1px;}
.internal .tit p  {margin-top:25px; font-size:15px; line-height:1.6; color:#404040;}

/*step*/
#step .steplist {display:flex; flex-direction:column; gap:20px;}
#step .steplist li {padding-bottom:20px; border-bottom:1px dotted #ececec; text-align:center; }
#step .steplist li img {border-radius:15px; overflow:hidden;}
#step .steplist li p {margin-top:15px; font-size:16px; line-height:1.5;}
#step .stepbtn {text-align:center;}
#step .stepbtn a {position:relative; display:inline-block; padding:22px 5px; width:100%; font-size:17px; font-weight:700; color:#fff; background:#ff623d; border-radius:7px; border:1px solid #ff623d; letter-spacing:-1px;}


/*company*/
#company {position:relative; padding:0 0 60px 0; background:url('../_img/company_bg.png') no-repeat center; background-size:cover; text-align:center; color:#fff;}
#company .medal {margin:0 auto; width:140px;}
#company h3  {font-size:18px; font-weight:300;}
#company h2 {margin:20px 0 10px 0; font-size:32px; letter-spacing:-1px;}
#company p {margin:25px 0; font-size:15px; line-height:1.7; color:#fff;}
#company .comtag {flex-direction:column; gap:10px; justify-content:center;}
#company .comtag li {padding:15px 0; width:80%; border-radius:50px; border:1px solid #fff; font-size:17px;}
#company .airplane {position:absolute; right:-40px; bottom:-22px; width:180px;  z-index:9; transform:scaleX(-1);}

/*merit*/
#merit .swiper {padding:6px 25px 6px 25px;}
#merit .con {padding:20px 25px 30px 25px; border-radius:22px; border:1px solid #e9e9e9;}
#merit .con .img {text-align:right;}
#merit .con .img img {position:relative; right:-10px; width:70px;}
#merit .con h3 { margin:15px 0 ; font-size:18px; line-height:1.5; font-weight:700;}
#merit .con p {font-size:15px; line-height:1.6; color:#404040;}
#merit .meritList {display:flex; flex-direction:column; gap:15px;}

/*fbn*/
#fbn {background:url('../_img/fbn_bg.png') no-repeat center; background-size:cover; color:#fff; }
#fbn .container {position:relative; padding:40px 25px 100px 25px;}
#fbn h2 {font-size:26px; font-weight:500; line-height:1.5; letter-spacing:-1px;}
#fbn a {margin-top:25px; font-size:18px; font-weight:600; color:#50a5ff;}
#fbn .img {position:absolute; right:0; bottom:-18px; width:260px;}

/*footer*/
#footer {padding:25px 0 60px 0; color:#404040; font-size:14px; letter-spacing:-0.5px; line-height:1.7; text-align:center;}
#footer .container {display:flex; flex-direction:column; gap:10px; padding:0 25px; }
#footer .fbtn {display:flex; align-items:center; justify-content:center; gap:15px;  }
#footer .fbtn a {color:#000; font-size:15px; font-weight:bold;}
#footer .copy {margin-top:10px; font-size:13px; font-weight:300; opacity:0.5;}


/*fixbn */
#fixbn {display:block; position:fixed; bottom:10px; width:100%;  z-index:999;}
#fixbn .container {display:flex; align-items:center; justify-content:space-between; gap:10px;}
#fixbn .container a {display:block; width:50%; padding:15px 0 13px 0; border-radius:5px; text-align:center; font-size:15px; font-weight:600; letter-spacing:-0.5px;}
#fixbn .container a.ftel {background:#f81515; color:#fff; }
#fixbn .container a.fkakao {background:#fee841; color:#000;}



@media (min-width: 1080px) { 

.pc {display:block;}
.mobile {display:none;}
#fixbn {display:none;}

.container {padding:0;}

#vtop {padding:160px 0 60px 0; background:#f8f8f8; }
#vtop .vcon {flex-direction:row;}
#vtop .vcon .visual {width:955px;}
#vtop .vcon .visual .swiper-slide { height:525px;}
#vtop .vcon .visual .txt {top:47%; left:0; width:100%; transform:translate(0,-50%);}
#vtop .vcon .visual .txt h3 {font-size:16px; }
#vtop .vcon .visual .txt h2 {font-size:63px; }
#vtop .vcon .visual .txt p {font-size:20px; }
#vtop .vcon .visual .swiper-pagination-bullet {margin:0 7px; width:11px; height:11px;}
#vtop .vcon .visual .swiper-pagination {bottom:40px;}
/*#vtop .vcon .visual .swiper-pagination {text-align:left; bottom:80px; left:110px;}

#vtop .vcon .mcounsel {position:absolute; top:50%; right:65px; transform:translate(0,-50%); z-index:9; }*/
#vtop .vcon .mcounsel {position:relative; width:305px; border: 1px solid #ececec;}
#vtop .vcon .mcounsel .img {top:-65px; right:-45px; width:150px; }
@keyframes mping{
    0%{top:-65px}
	25% { top:-75px;}
	50%{top:-65px}
	75%{ top:-75px;}
    100%{ top:-65px;}
}
.mcounsel {margin-top:0; padding:95px 30px; }
.counselForm h3 {font-size:24px;}
.counselForm .cn-wrap input {padding:20px 25px; font-size:16px; }
.counselForm button.btn {padding:20px 0; font-size:24px;}

.realList {width:305px;}
.realList .img {display:block; position:absolute; top:-65px; right:-45px; width:150px; z-index:9; animation:mping 3s;}
.realList h2 { padding:45px 30px 20px 30px; font-size:24px; text-align:left;}
.realList .listBox {padding:37px 30px 30px 30px;}
.realList .listBox .vertical-slide {  height: 370px;  }
.realList .listBox .vertical-slide .txt {display:flex; align-items:center; gap:10px;}
.realList .listBox .vertical-slide .new {font-size:14px; font-weight:bold; color:#f81515;}
.realList .listBox .vertical-slide .carname {font-size:18px; width:130px; }
.realList .listBox .vertical-slide .result {padding:7px 10px; font-size:14px; font-weight:500; color:#f81515; background:#000;  border-radius:5px;}

.mbn ul {justify-content:space-between; flex-direction:row; gap:20px;}
.mbn ul li {width:25%;}
.mbn ul li a {padding:35px;}
.mbn ul li a h3 {font-size:26px;}
.mbn ul li a p {margin-top:13px; font-size:17px;}
.mbn ul li a .img {width:90px;}
.mbn ul li a:hover {top:-3px; box-shadow:2px 3px 5px rgba(0 0 0 / 40%);}

/*vs*/
#vs {padding:100px 0; background:url('../_img/vs_bg.png') no-repeat center; background-attachment:fixed; background-size:cover;}
#vs .container {flex-direction:row; gap:160px; align-items:flex-end;}
#vs .img {width:410px;}
#vs .vscon {margin-bottom:5px; }
#vs .vscon .subject {padding:16px;}
#vs .price {padding:0 80px;}
#vs .price .up {width:116px; bottom:-43px; right:-62px;}
#vs .txt {text-align:left;}
#vs .txt p {padding-left:30px; font-size:18px;}
#vs .txt h2 {padding-left:30px;  margin:35px 0 60px 0; font-size:45px;}

/*internal*/
.internal {padding:160px 0;}
.internal .tit {margin-bottom:60px;}
.internal .tit h3 {font-size:33px; font-weight:300;}
.internal .tit h2 {margin-top:15px; font-size:60px;}
.internal .tit p {margin-top:60px; font-size:22px; line-height:1.8;}

/*step*/
#step .steplist {width:1120px; margin:0 auto; flex-direction:row;  flex-wrap:wrap; gap:55px;}
#step .steplist li {width:30%; padding-bottom:0; border:none;}
#step .steplist li p {margin-top:28px; font-size:20px; line-height:1.6;}
#step .stepbtn {margin:100px auto 0 auto; width:640px;}
#step .stepbtn a {padding:30px 10px; font-size:30px; border:2px solid #ff623d; border-radius:20px;}
#step .stepbtn a:hover {background:#fff; color:#ff623d; border:2px solid #ff623d;}

/*company*/
#company {padding:160px 0 130px 0;}
#company .container {position:relative;}
#company .medal {position:absolute; top:-180px; left:0; width:247px;}
#company h3 {font-size:33px; font-weight:300;}
#company h2 {font-size:60px;}
#company p {margin:50px 0 70px 0; font-size:22px; line-height:1.6; font-weight:200;}
#company .airplane {transform:scaleX(1); width:564px; bottom:inherit; top:-50px; right:60px; animation:flying 3s infinite; animation-play-state:paused}
#company:hover .airplane {animation-play-state:running;}
@keyframes flying{
    0%{ top:-10px; right:120px;}
    100%{ top:-50px; right:60px;}
}
#company .comtag {flex-direction:row; gap:20px; }
#company .comtag li {width:220px; font-size:20px; padding:27px;}

/*merit*/
#merit .swiper {margin-top:100px; padding:6px 60px 6px 280px;}
#merit .con {width:33.33%; padding:40px 50px 60px 50px}
#merit .con .img img {width:auto; right:-20px; width:100px;}
#merit .con h3 {height:auto; margin:55px 0 25px 0;  font-size:30px; letter-spacing:-1px;}
#merit .con p {height:auto; font-size:20px;  font-weight:400; line-height:1.8;}
#merit .meritList {flex-direction:row; gap:35px;}

/*fbn*/
#fbn .container {position:relative; padding:80px 0;}
#fbn h2 {font-size:37px;}
#fbn a {font-size:23px; gap:10px;}
#fbn a:hover {gap:20px;}
#fbn .img {right:-62px; bottom:-62px; width:auto;}


#footer {padding:55px 0 120px; font-size:18px;  line-height:1.8; text-align:left;}
#footer .container {align-items:baseline; flex-direction:row-reverse; justify-content:space-between;}
#footer .fbtn {flex-direction:column; gap:5px; align-items:end;}
#footer .fbtn a {font-size:18px;}


 }

@media (min-width: 1690px) { 
.mbr {display:none; width:100%; height:1px; }
.br {display:block; width:100%; height:1px; }
}