.fp-watermark {display:none;}
.fp-overflow {position:relative;}
.main .section {
  height: 100vh;
  position:relative;
  overflow:hidden;
}
@keyframes clipPathLeft {
    0% {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
    100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}
@keyframes clipPathright {
    0% {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
    100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}
@keyframes fadeInLeft {
    0% {opacity: 0; transform: translateX(-20px);}
    100% {opacity: 1; transform: translateX(0);	}
}
@keyframes fadeInRight {
    0% {opacity: 0; transform: translateX(20px);}
    100% {opacity: 1; transform: translateX(0);	}
}
@keyframes fadeInRight2 {
    0% {opacity: 0; transform: translateX(20px);}
    100% {opacity: 0.6; transform: translateX(0);	}
}
@keyframes fadeInUp {
    0% {opacity: 0; transform: translateY(20px);}
    100% {opacity: 1; transform: translateY(0);	}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}    

.btnCustom {width:60px; height:60px; background-color:var(--color02); border:none; cursor:pointer;}
.btnCustom i {font-size:25px; color:#fff;}
.btnCustom:hover {background-color:#62f5a1;}
.btnCustom:hover i {color:var(--color01);}
.main #section4 .mainCarSliderList .carInfo:hover .btnCustom {background-color:#62f5a1;}
.main #section4 .mainCarSliderList .carInfo:hover .btnCustom i {color:var(--color01);}
.main #section3 ul li:hover button {background-color:#62f5a1;}
.main #section3 ul li:hover button i {color:var(--color01);}


.main-slider {position:relative; height:100%;}
.main-slider .inner,
.mainSliderControl .inner {width: 100%; max-width:1480px;margin: 0 auto;}
.main-slider .slick-slide {opacity: 1 !important;z-index: 1; /* 기본값 낮게 설정 */}
.main-slider .slick-active {z-index: 2; /* 활성 슬라이드는 가장 위로 */}
.main-slider__item {height: 100vh; position: relative; display: flex !important; align-items: center; justify-content: center;}
.main-slider__bg {position: absolute; top: 0; bottom: 0; width: 100%; overflow:hidden;}
.main-slider__bg > div {position: relative; width: 100%; height: 100%;}
.main-slider__txt {position: relative; color: #fff;}
.main-slider__txt h2 {opacity: 0;  font-weight:800; font-size:80px;}
.main-slider__txt p {opacity: 0;  font-size:30px; font-weight:400; padding-bottom:20px;}
/* 배경이미지 슬라이드효과 삭제
.main-slider .slick-active .main-slider__bg {animation-name: clipPathLeft; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1s;  animation-fill-mode: forwards;}
.main-slider .slick-active .main-slider__bg > div {animation-name: leftFade; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-duration: 1.3s;  animation-fill-mode: forwards;}
*/
.main-slider .slick-active .main-slider__txt h2 {animation: fadeInLeft 1s 0s forwards cubic-bezier(0.4, 0, 0.2, 1) alternate;}
.main-slider .slick-active .main-slider__txt p {animation: fadeInRight2 1s 0s forwards cubic-bezier(0.4, 0, 0.2, 1) alternate;}
.mainSliderControl {position: absolute; left: 0; right: 0; bottom:60px; }
.mainSliderControl .inner {display: flex; align-items: center;}

.mainSliderDots .slick-dots {display: flex;}
.mainSliderDots .slick-dots li {display: flex; align-items: center; position: relative; margin-right:15px;}
.mainSliderDots .slick-dots li:before,
.mainSliderDots .slick-dots li:after {content: ''; display: none; position: absolute; left:50px; top:50%; transform:translateY(-50%); height:5px;}
.mainSliderDots .slick-dots li:before {width: 140px; background: rgba(255,255,255,0.2);}
.mainSliderDots .slick-dots li:after {background: #fff; width: 0;}
.mainSliderDots .slick-dots li button {width:35px; height:35px; display: flex; align-items: center; background: none; color: #fff; border: none; font-family: 'GmarketSans'; font-size:25px; font-weight:300;}
.mainSliderDots .slick-dots li.slick-active button {font-weight:bold;}
.mainSliderDots .slick-dots li button::before {content: "0";}
.mainSliderDots .slick-dots li:nth-child(n + 10) button::before {content: none;}
.mainSliderDots .slick-dots li.slick-active {padding-right:160px;}
.mainSliderDots .slick-dots li.slick-active:before,
.mainSliderDots .slick-dots li.slick-active:after {display: block;}
.mainSliderDots .slick-dots li.slick-active:after {animation:progressBarMain 3s both;}

.mainSliderArrows {width:1680px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.mainSliderArrows button {background: none; border: none; position:absolute; z-index:2; top:0; width:63px; height:63px; border-radius:50%; background-color:#969696; font-size:0; cursor:pointer;}
.mainSliderArrows button.slick-prev {left:0;}
.mainSliderArrows button.slick-next {right:0;}
.mainSliderArrows button:after {content: ''; display: block; width:8px; height:8px; position: absolute; left: 50%; top: 50%; margin-top:-5px; border-top: solid 3px #676867;}
.mainSliderArrows button.slick-prev:after {margin-left:-5px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); border-left: solid 3px #676867;}
.mainSliderArrows button.slick-next:after {margin-left:-7px; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-right: solid 3px #676867;}
.mainSliderArrows button:hover {background-color:#fff;}
.mainSliderArrows button:hover:after {border-top: solid 3px #000;}
.mainSliderArrows button.slick-prev:hover:after {border-left: solid 3px #000;}
.mainSliderArrows button.slick-next:hover:after {border-right: solid 3px #000;}
.main-slider-toggle {background-color:transparent; cursor:pointer;}
.main-slider-toggle i {font-size:30px; color:#fff;}

@keyframes progressBarMain {0% {width: 0;} 100% {width:140px;}}

@media only screen and (max-width:1480px) {
    .main-slider__txt h5 {font-size: 140px;}
    .main-slider__txt p {font-size: 20px;}
}
@media only screen and (max-width:1280px) {
    .main-slider__txt h5 {font-size: 120px;}
    .main-slider__txt p {font-size: 18px;}
}

/* section2 */
.main #section2 {justify-content:flex-start;}
.main #section2::after {content:''; width:calc(100% - 240px); height:calc(100% - 100px); position:absolute; left:0; bottom:0; background-color:#f9f9f9; z-index:-1;}
.main #section2 .textBox {padding:100px 0 0 200px;}
.main #section2 .textBox .tit { font-size:60px; font-weight:bold; color:#0d2644; line-height:1.1;}
.main #section2 .textBox .tit .color {display:inline-block; color:#ff3c41; line-height:1;}
.main #section2 .textBox p { font-size:26px; font-weight:200; color:#0d2644; line-height:1.3; padding-top:30px;}
.main #section2 .companyInfo {width:1250px; margin:55px auto 0 auto; padding-bottom:20px;}
.main #section2 .companyInfo li {width:300px; height:300px; border-radius:14px; background-color:#fff; box-shadow:3px 3px 10px rgba(0,0,0,0.1);}
.main #section2 .companyInfo li:hover {background-color:var(--color01);}
.main #section2 .companyInfo li a {padding:50px 0; width:100%; height:calc(100% - 60px); text-align:center; display:block;}
.main #section2 .companyInfo li h3 {font-size:24px; font-weight:400; color:#000000; line-height:1;}
.main #section2 .companyInfo li p {font-size:17px; font-weight:400; color:#a9a9a9; line-height:1.4;}
.main #section2 .companyInfo li p.mo {display:none;}
.main #section2 .companyInfo li:hover h3,
.main #section2 .companyInfo li:hover p {color:#fff;}
.main #section2 .companyInfo li .iconBox {height:119px; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.main #section2 .companyInfo li .iconBox .off {display:block;}
.main #section2 .companyInfo li .iconBox .on {display:none;}
.main #section2 .companyInfo li:hover .iconBox .off {display:none;}
.main #section2 .companyInfo li:hover .iconBox .on {display:block;}
.main #section2 .companyInfo li:nth-child(1) .iconBox img {width:76px;}
.main #section2 .companyInfo li:nth-child(2) .iconBox img {width:85px;}
.main #section2 .companyInfo li:nth-child(3) .iconBox img {width:88px;}
.main #section2 .companyInfo li:nth-child(4) .iconBox img {width:82px;}

.main #section2 .numBox {position:absolute; padding-top:250px; right:0; top:0;}
.main #section2 .numBox::before {content:''; width:480px; height:370px; background-color:var(--color01); position:absolute; top:0; right:0; z-index:-2;}
.main #section2 .numBox ul {width:240px; text-align:center; margin-top:20px;}
.main #section2 .numBox ul li {margin-bottom:35px;}
.main #section2 .numBox ul li .num {font-family: 'SCDream'; font-size:40px; font-weight:400; color:#000000; line-height:1; padding-bottom:15px;}
.main #section2 .numBox ul li .text {font-family: 'SCDream'; font-size:14px; font-weight:300; color:#888888; line-height:1;}
.main #section2 .numBox ul li:nth-child(2) .num::after {content:'+'; padding-left:8px; margin-right:-5px;}
.main #section2 .numBox ul li:nth-child(3) .num::after {content:'+'; padding-left:8px; margin-right:-5px;}
.main #section2 .numBox ul li:nth-child(1) {margin-bottom:80px;}
.main #section2 .numBox ul li:nth-child(1) .num, 
.main #section2 .numBox ul li:nth-child(1) .text {color:#fff;}

/* section3 */
.main #section3 {}
.main #section3 .inner {width:100%; height:100%; position:relative; display:flex; flex-direction:column; justify-content:center;}
.main #section3 .inner .bg {position:absolute; bottom:15%; right:13%; z-index:-1;}
.main #section3 .textBox {padding:130px 0 90px 200px;}
.main #section3 .textBox h2 span {display:block; font-size:60px; font-weight:bold; color:#0d2644; line-height:1.2; padding-bottom:40px;}
.main #section3 .textBox h2 .mo {display:none;}
.main #section3 .textBox p {font-size:26px; font-weight:200; color:#0d2644; line-height:1.3;}
.main #section3 ul {font-size:0; width:100%;}
.main #section3 ul li {width:24%; text-align:center;}
.main #section3 ul li a {display:block;}
.main #section3 ul li .imgBox,
.main #section3 ul li .imgBox img {width:100%;}
.main #section3 ul li dl {position:relative; top:30px;}
.main #section3 ul li dt {font-size:30px; font-weight:500; color:#0d2644; line-height:1;}
.main #section3 ul li dd {font-size:15px; font-weight:300; color:#ff6600; line-height:1; padding:10px 0 20px 0;}
.main #section3 ul li button {position:relative; bottom:-30px;}

/* section4 */
.main #section4::after {content:''; width:1580px; height:1450px; border-radius:50%; background-color:var(--color01); position:absolute; right:-600px; top:50%; transform:translateY(-50%); z-index:-1;}
.main #section4 >div {overflow:hidden; width:100%;}
.main #section4 .inner {width:1420px; margin:0 auto; position:relative;}
.main #section4 .slick-nav {position:absolute; top:50%; transform:translateY(-50%); left:0; width:180px;}
.main #section4 .slick-nav .slick-nav-item {border-bottom:1px solid #e3e3e3; padding:45px 0; width:100%; position:relative; cursor:pointer;}
.main #section4 .slick-nav .slick-nav-item.active::before {content:''; width:100%; height:2px; background-color:var(--color01); position:absolute; top:0; left:0;}
.main #section4 .slick-nav .slick-nav-item.active::after {content:''; width:100%; height:2px; background-color:var(--color01); position:absolute; bottom:0; left:0;}
.main #section4 .slick-nav .slick-nav-item p {padding-left:15px; font-size:20px; font-weight:500; color:#666666;}
.main #section4 .slick-nav .slick-nav-item p span {display:inline-block; font-size:14px; letter-spacing:-0.6px;}
.main #section4 .slick-nav .slick-nav-item.active p,
.main #section4 .slick-nav .slick-nav-item.active span {color:var(--color01);}
.main #section4 .slick-nav .slick-nav-item.active p {font-weight:bold;}
.main #section4 .slick-nav .slick-nav-item.active span {font-weight:600;}
.main #section4 .slick-nav .slick-nav-item:nth-child(1) {border-top:1px solid #e3e3e3;}
.main #section4 .mainSliderCar {width:100%; position:relative;}

.main #section4 .mainSliderCarArrows { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; z-index: 10; }
.main #section4 .mainCarSliderList {width:calc(100% - 320px); margin-left:320px; height:100%;}
.main #section4 .mainCarSliderList .box {display:flex; flex-direction:row; align-items:center;}
.main #section4 .mainCarSliderList dt {display:flex; flex-direction:row; align-items:flex-end; padding-bottom:30px;}
.main #section4 .mainCarSliderList dt strong {font-size:60px; font-weight:bold; color:#fff;}
.main #section4 .mainCarSliderList dt span {font-size:25px; font-weight:200; color:#ffffff; padding-left:5px; position:relative; top:-5px;}
.main #section4 .mainCarSliderList dd {font-size:25px; font-weight:400; color:#fff; opacity:0.8; line-height:1.4; padding-bottom:60px;}
.main #section4 .mainCarSliderList button {cursor:pointer;}
.main #section4 .mainCarSliderList .carInfo {padding:70px 0 0 70px;}
.main #section4 .mainSliderCarArrows button {background: none; border: none; position:absolute; z-index:2; top:0; width:60px; height:60px; border-radius:50%; background-color:#f4f4f4; font-size:0; cursor:pointer;}
.main #section4 .mainSliderCarArrows button.slick-prev {left:-120px;}
.main #section4 .mainSliderCarArrows button.slick-next {right:-120px;}
.main #section4 .mainSliderCarArrows button:after {content: ''; display: block; width:8px; height:8px; position: absolute; left: 50%; top: 50%; margin-top:-5px; border-top: solid 3px #aaaaaa;}
.main #section4 .mainSliderCarArrows button.slick-prev:after {margin-left:-5px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); border-left: solid 3px #aaaaaa;}
.main #section4 .mainSliderCarArrows button.slick-next:after {margin-left:-7px; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-right: solid 3px #aaaaaa;}
.main #section4 .mainSliderCarArrows button:hover {background-color:#fff;}
.main #section4 .mainSliderCarArrows button:hover:after {border-top: solid 3px #000;}
.main #section4 .mainSliderCarArrows button.slick-prev:hover:after {border-left: solid 3px #000;}
.main #section4 .mainSliderCarArrows button.slick-next:hover:after {border-right: solid 3px #000;}

/* section5 */
.main #section5 {position:relative; background-color:#f3f6fb; text-align:center;}
.main #section5 .bnWrap {background-color:var(--color02); width:100%; height:120px; position:absolute; bottom:0; left:0;}
.main #section5 .bnWrap:hover {background-color:var(--color01);}
.main #section5 .bnWrap a {width:100%; height:100%;}
.main #section5 .bnWrap h2, 
.main #section5 .bnWrap p {font-size:24px; font-weight:300; color:#fff; }
.main #section5 .bnWrap h2 {opacity:0.5; margin-right:70px;}
.main #section5 .bnWrap h2.mo {display:none;}
.main #section5 .bnWrap .circle {width:65px; height:65px; border-radius:50%; background-color:#ffffff; display:flex; flex-direction:column; justify-content:center; align-items:center; margin-right:20px;}
.main #section5 .textBox {padding-bottom:40px;}
.main #section5 .textBox h2 {font-size:60px; font-weight:bold; color:#0d2644; padding-bottom:25px;}

.main #section5 ul {width:1100px; margin:0 auto; border-top:1px solid #222222; box-sizing:border-box;}
.main #section5 ul li {width:100%; border-bottom:1px solid #222222; box-sizing:border-box;}
.main #section5 ul li a {padding:20px 30px; width:calc(100% - 60px);}
.main #section5 ul li .data {width:100px; font-size:17px; font-weight:bold; color:#222222; text-align:left;}
.main #section5 ul li .text {width:calc(100% - 150px); text-align:left;}
.main #section5 ul li .arrow {width:50px; text-align:right;}
.main #section5 ul li .text p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:20px; font-weight:300; color:#444444; max-width:calc(100% - 40px);}
.main #section5 ul li:hover .text p {color:#000;}
.main #section5 ul li .text span {padding-left:10px;}
.main #section5 ul li .text i {font-size:26px; color:var(--color01);}

/* section6 */
.main #section6 {text-align:center;}
.main #section6 .textBox {position:absolute; top:200px; left:50%; transform:translateX(-50%); z-index:2;}
.main #section6 .textBox dt span {font-size:20px; font-weight:500; color:#62f5a1; line-height:1;}
.main #section6 .textBox dt p {font-size:60px; font-weight:bold; color:#fff; padding:18px 0 40px 0; line-height:1;}
.main #section6 .textBox dd {font-size:28px; font-weight:400; color:#fff; opacity:0.5; line-height:1.3;}
.main #section6 ul {width:100%; height:100%;}
.main #section6 ul li {width:25%; height:100%;}
.main #section6 ul li:not(:last-child) {border-right:1px solid rgba(255,255,255,0.1); box-sizing:border-box;}
.main #section6 ul li a {font-family: 'SCDream'; font-size:32px; font-weight:600; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; width:100%; height:90%; padding-bottom:10%;}

/* section7 */
.main #section7 {background-color:#0c0f18;}
.main #section7 .textBox {position:relative; margin-bottom:80px; text-align:center; width:100%;}
.main #section7 h2 {font-size:60px; font-weight:bold; color:#fff; margin-left:-80px;}
.main #section7 .inner {padding-left:80px;}
.main #section7 a { display:block; background-color:#161a26; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.main #section7 a img {width:100%;}
.main #section7 .slick-list {overflow:initial; margin:0 -10px;}
.main #section7 .slick-slide {margin:0 10px;}
.main #section7 button {background: none; border: none; position:absolute; z-index:2; top:0; width:60px; height:60px; border-radius:50%; background-color:#f4f4f4; font-size:0; cursor:pointer;}
.main #section7 button.slick-prev {left:0;}
.main #section7 button.slick-next {right:80px;}
.main #section7 button:after {content: ''; display: block; width:8px; height:8px; position: absolute; left: 50%; top: 50%; margin-top:-5px; border-top: solid 3px #000;}
.main #section7 button.slick-prev:after {margin-left:-5px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); border-left: solid 3px #000;}
.main #section7 button.slick-next:after {margin-left:-7px; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-right: solid 3px #000;}
.main #section7 button.slick-disabled {opacity:0.3;}
.main #section7 button:hover {background-color:#fff;}
.main #section7 button:hover:after {border-top: solid 3px #000;}
.main #section7 button.slick-prev:hover:after {border-left: solid 3px #000;}
.main #section7 button.slick-next:hover:after {border-right: solid 3px #000;}

@media screen and (max-width:1780px) {
    /* 메인비주얼 */
    .main-slider .inner, .mainSliderControl .inner {max-width:80%;}
    .mainSliderArrows {width:calc(80% + 200px);}

    /* section2 */
    .main #section2::after {width:calc(100% - 180px);}
    .main #section2 .numBox ul {width:180px;}
    .main #section2 .companyInfo {width:1000px;}
    .main #section2 .companyInfo li {width:240px; height:240px;}
	.main #section2 .companyInfo li .iconBox {height:100px;}
	.main #section2 .companyInfo li a {padding: 30px 0;}
	.main #section2 .companyInfo li p {font-size: 17px;}
    .main #section2 .numBox ul li .num {font-size:31px;}
    .main #section2 .companyInfo li:nth-child(1) .iconBox img {width:56px;}
    .main #section2 .companyInfo li:nth-child(2) .iconBox img {width:65px;}
    .main #section2 .companyInfo li:nth-child(3) .iconBox img {width:68px;}
    .main #section2 .companyInfo li:nth-child(4) .iconBox img {width:62px;}


    .main #section4 .inner {width:80%;}
    .main #section4 .mainCarSliderList dd {font-size:20px;}
    .main #section4 .mainCarSliderList .carInfo {padding:60px 0 0 50px;}
    .main #section4 .slick-slide img {width:calc(100% - 470px);}
    .main #section4 .slick-nav .slick-nav-item {padding:40px 0;}
    .main #section4 .mainCarSliderList dt strong {font-size:50px;}
    .main #section4 .mainCarSliderList dt span {font-size:22px;}
    .main #section4 .mainCarSliderList dd {padding-bottom:45px;}
    .main #section4::after {right:-700px;}
}

@media screen and (max-width:1480px) {
    /* 메인비주얼 */
    .main-slider__txt h2 {font-size:60px;}
    .mainSliderArrows button {width:55px; height:55px;}
    .mainSliderDots .slick-dots li button {font-size:21px;}

    /* section2 */
    .main #section2 .textBox {padding:100px 0 0 0; width:1100px; margin:0 auto;}
    .main #section2::after {height:calc(100% - 85px); width:calc(100% - 170px);}
    .main #section2 .numBox ul {width:170px;}
    .main #section2 .numBox::before {width:390px;}
    .main #section2 .textBox .tit {font-size:60px;}
    .main #section2 .textBox p {font-size:24px; padding-top:25px;}
    .main #section2 .numBox ul li .text {font-size:13px;}
    .main #section2 .numBox ul li .num {font-size:31px;}

    /* section3 */
    .main #section3 .textBox {padding:0 0 90px 0; width:1100px; margin:0 auto;}
    .main #section3 .textBox h2 {font-size:50px;}

    /* section4 */
    .main #section4 .slick-nav {width:150px; }
    .main #section4 .mainCarSliderList {width:calc(100% - 220px); margin-left:220px;}
    .main #section4 .slick-nav .slick-nav-item p {padding-left:10px;}
    .main #section4::after {right:-65%;}
    
    .main #section4 .mainSliderCarArrows button.slick-prev {left:-90px;}
    .main #section4 .mainSliderCarArrows button.slick-next {right:-90px;}

    /* section5 */
    .main #section5 .bnWrap h2, .main #section5 .bnWrap p {font-size:20px;}
    .main #section5 .bnWrap .circle {width:50px; height:50px; margin-right:15px;}
    .main #section5 .bnWrap .circle img {width:25px;}

    .main #section5 .textBox h2 {font-size:50px;}

    .main #section6 .textBox dt p {font-size:50px;}
    .main #section6 .textBox dd {font-size:22px;}
    .main #section6 ul li a {font-size:26px;}

    .main #section7 h2 {font-size:50px;}
}
@media screen and (max-width:1380px) {
    .main #section2::after {width:calc(100% - 130px);}
    .main #section2 .numBox ul {width:130px;}
    .main #section2 .numBox ul li .text {font-size:12px;}
    .main #section2 .numBox ul li .num {font-size:26px;}    
    .main #section2 .numBox ul li:nth-child(3) .num::after {padding-left:3px;}
    .main #section4::after {right:-65%;}

    .main #section6 .textBox {width:100%;}
}
@media screen and (max-width:1280px) {
    .main #section2 .companyInfo {width:1050px;}
    .main #section2 .companyInfo li {width:250px; height:250px;}
    .main #section2 .companyInfo li a {padding:25px 0;}

    .main #section4 .slick-nav .slick-nav-item {padding:30px 0;}
    .main #section4 .slick-nav .slick-nav-item p {font-size:18px;}
    .main #section4 .mainCarSliderList dt strong {font-size:40px;}
    .main #section4 .mainCarSliderList dd {font-size:18px;}
    .main #section4 .mainCarSliderList button {width:50px; height:50px;}
    .main #section4 .mainCarSliderList .btnCustom i {font-size:20px;}

    .main #section5 .bnWrap h2 {margin-right:30px;}
    .main #section5 .bnWrap h2, .main #section5 .bnWrap p {font-size:18px;}
    .main #section5 .bnWrap .circle {width:48px; height:48px; margin-right:10px;}
    .main #section5 .bnWrap .circle img {width:22px;}

    .main #section7 h2 {margin-left:-60px;}
    .main #section7 .inner {padding-left:60px;}  
}
@media screen and (max-width:1200px) {
    .mainSliderArrows {display:none;}
    .main-slider .inner, .mainSliderControl .inner {max-width:calc(100% - 60px);} 
    .main-slider__txt .br {display:block;}
    .main-slider__txt p {font-size:34px; line-height:1.3;}
    .main-slider__txt h2 {font-family:70px;}

    .main #section2 {background-color:#f9f9f9;}
    .main #section2 .numBox {display:none;}
    .main #section2 .textBox {width:auto; padding:100px 0 0 5%;}

    .main #section3 .textBox {width:auto; padding:0 0 90px 5%; margin:0;}
    
    .main #section4::after {width:1450px; height:1450px; right:auto; top:40%; bottom:auto; left:50%; transform:translateX(-50%);}
    .main #section4 .slick-nav {position:relative; top:auto; transform:initial; width:100%; display:flex; flex-direction:row; align-items:center; justify-content:center; }     
    .main #section4 .slick-nav .slick-nav-item:nth-child(1) {border-top:none;}
    .main #section4 .slick-nav .slick-nav-item {width:auto; padding:20px 0; margin-right:40px; border-top:1px solid transparent; border-bottom:1px solid transparent;}
    .main #section4 .slick-nav .slick-nav-item:nth-child(4) {margin-right:0;}
    .main #section4 .slick-nav .slick-nav-item p {padding-left:0;}
    .main #section4 .slick-nav .slick-nav-item p span {display:none;}
    .main #section4 .mainCarSliderList .box {flex-direction:column;}
    .main #section4 .slick-slide img {width:auto; height:25vh; margin:80px auto 0 auto;}
    .main #section4 .mainCarSliderList {margin-left:0; width:100%; text-align:center;}
    .main #section4 .mainCarSliderList .carInfo {padding:60px 0 0 0;}
    .main #section4 .mainCarSliderList dt {display:none;}
    .main #section4 .slick-nav .slick-nav-item p {font-size:24px;}
    .main #section4 .mainCarSliderList dd {font-size:26px; padding-bottom:5vh;}
    .main #section4 .mainSliderCarArrows {display:none;}

    .main #section5 ul {width:calc(100% - 40px);}
}
@media screen and (max-width:1080px) {
    .main #section2, .main #section3, .main #section4, .main #section5, .main #section6, .main #section5, .main #section7,
    .main #section2 .fp-tableCell, .main #section3 .fp-tableCell, .main #section4 .fp-tableCell, .main #section5 .fp-tableCell, .main #section6 .fp-tableCell, .main #section7 .fp-tableCell  {height:auto !important;}
    .main #section2 {padding:180px 0;}
    .main #section3 {padding:180px 0 0 0;}
    .main #section4,
    .main #section5 {padding-top:180px;}
    
    .main #section2 .textBox {padding:0;}
    .main #section2 .textBox {width:calc(100% - 60px);}
    .main #section2 .companyInfo {width:680px; flex-wrap:wrap; justify-content:center;}
    .main #section2 .companyInfo li {width:245px; height:auto; margin-bottom:25px;}
    .main #section2 .companyInfo li:nth-child(2n) {margin-left:25px;}
    .main #section2 .companyInfo li a {display:block; padding:30px 0;}
    .main #section2 .companyInfo li h3 {font-size:24px;}
    .main #section2 .companyInfo li p.pc {display:none;}
    .main #section2 .companyInfo li p.mo {display:block; font-size:19px;}  

    .main #section3 .textBox {padding:0 30px 80px 30px; width:calc(100% - 60px);}
    .main #section3 .textBox h2 .pc {display:none;}
    .main #section3 .textBox h2 .mo {display:block;}    
    .main #section3 .textBox p br {display:none;}
    .main #section3 .textBox p .br {display:block;}

    .main #section3 ul li {width:100%;}
    .main #section3 ul {position:relative;}
    .main #section3 .slick-prev, .main #section3 .slick-next {position:absolute; z-index:2; top:calc(50% + 90px); transform:translateY(-50%);}
    .main #section3 .slick-prev {left:20px;}
    .main #section3 .slick-next {right:20px;}
    .main #section3 ul .slick-arrow {background: none; border: none; width:45px; height:45px; border-radius:50%; background-color:#f4f4f4; font-size:0; cursor:pointer;}
    .main #section3 ul .slick-arrow:after {content: ''; display: block; width:6px; height:6px; position: absolute; left: 50%; top: 50%; margin-top:-5px; border-top: solid 2px #000;}
    .main #section3 ul .slick-prev:after {margin-left:-3px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); border-left: solid 2px #000;}
    .main #section3 ul .slick-next:after {margin-left:-6px; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-right: solid 2px #000;}
    .main #section3 ul .slick-arrow:hover {background-color:#fff;}
    .main #section3 ul .slick-arrow:hover:after {border-top: solid 2px #000;}
    .main #section3 ul .slick-arrow.slick-prev:hover:after {border-left: solid 2px #000;}
    .main #section3 ul .slick-arrow.slick-next:hover:after {border-right: solid 2px #000;}
    .main #section3 ul  .slick-arrow.slick-disabled {
        opacity: 0.9;
    }    

    .main #section4 .mainCarSliderList button {margin-bottom:120px;}

    .main #section5 .inner {width:100%;}
    .main #section5 ul,
    .main #section5 .bnWrap {width:calc(100% - 60px); margin:0 auto; position:relative;}
    .main #section5 ul {margin-bottom:80px;}
    .main #section5 ul li a {display:block; padding:30px 20px; width:calc(100% - 40px);}
    .main #section5 ul li .data {width:100%; text-align:left; font-size:24px; padding-bottom:10px; line-height:1;}
    .main #section5 ul li .text {width:100%; }
    .main #section5 ul li .text p {font-size:26px; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; width:initial; max-width:initial; white-space:initial; position:relative; overflow:hidden;}

    .main #section5 ul li .arrow {display:none;}
    .main #section5 .bnWrap {padding:35px 0 55px 0; height:auto;}
    .main #section5 .bnWrap a {flex-direction:column; justify-content:center;}
    .main #section5 .bnWrap .imgBox {flex-direction:column;}
    .main #section5 .bnWrap h2 {display:none; margin-right:0;}
    .main #section5 .bnWrap h2.mo {display:block; line-height:1.3; font-size:30px; margin-bottom:30px;}
    .main #section5 .bnWrap a {display:block;}
    .main #section5 .bnWrap .circle {width:65px; height:65px; margin-right:0;}
    .main #section5 .bnWrap .circle img {width:30px;}
    .main #section5 .bnWrap p {font-size:34px; margin-top:24px;}
    
    .main #section6 ul {flex-direction:column;}
    .main #section6 ul li:not(:last-child) {border:none;}
    .main #section6 .textBox {position:relative; top:0; left:auto; transform:initial; padding:180px 0;}
    .main #section6 ul {padding-bottom:180px;}
    .main #section6 ul li {width: 100%;}
    .main #section6 ul li a {height:auto; padding-bottom:65px;}

    .main #section7 {padding:180px 0;}
    .main #section7 h2 {font-size:40px;}
    .main #section7 h2 .br {display:block;}
    .main #section7 button {display:none !important;}
}
@media screen and (max-width:720px) {
    .main-slider__txt p {font-size:22px; line-height:1.3;}
    .main-slider__txt h2 {font-size:40px;}
    .mainSliderControl {bottom:40px;}

    .main #section2 {padding:130px 0;}    

    .main #section2 .textBox {width:calc(100% - 40px);}
    .main #section2 .textBox .tit {font-size:46px;}
    .main #section2 .textBox p {font-size:20px; padding-top:20px;}
    .main #section2 .companyInfo {width:calc(100% - 40px); flex-wrap:wrap; justify-content:center;}    
    .main #section2 .companyInfo li {width:calc(50% - 10px); margin-bottom:20px;}
    .main #section2 .companyInfo li:nth-child(2n) {margin-left:20px;}
    .main #section2 .companyInfo li a {padding:22px 0;}
    .main #section2 .companyInfo li .iconBox {height:90px;}
    .main #section2 .companyInfo li:nth-child(1) .iconBox img {width:46px;}
    .main #section2 .companyInfo li:nth-child(2) .iconBox img {width:55px;}
    .main #section2 .companyInfo li:nth-child(3) .iconBox img {width:58px;}
    .main #section2 .companyInfo li:nth-child(4) .iconBox img {width:52px;}    

    .main #section3 {padding:130px 0 0 0;}
    .main #section3 .textBox {padding:0 20px 80px 20px; width:calc(100% - 40px);}
    .main #section3 .textBox h2 span {font-size:46px; padding-bottom:25px;}
    .main #section3 .textBox p {font-size:22px;}
    .main #section3 .inner .bg {width:110%; right:-5%; bottom:30%;}

    .btnCustom {width:45px; height:45px;}
    .btnCustom i {font-size:20px;}

    .main #section3 .btnCustom {bottom:-27.5px;}
    .main #section3 ul li dt {font-size:26px;}
    .main #section3 .slick-prev, .main #section3 .slick-next {top:calc(50% + 60px);}
    .main #section3 ul .slick-arrow {width:40px; height:40px;}
    .main #section3 .textBox {padding:0 20px 50px 20px;}
    .main #section3 .inner .bg {bottom:25%;}

    .main #section4 {padding-top:130px;}
    .main #section4 .inner {width:calc(100% - 60px);}
    .main #section4 .slick-nav .slick-nav-item {margin-right:30px;}
    .main #section4 .slick-nav .slick-nav-item p {font-size:20px;}
    .main #section4 .mainCarSliderList dd {font-size:20px;}
    .main #section4 .mainCarSliderList dd .br {display:block;}
    .main #section5 {padding-top:130px;}

    .main #section5 .textBox h2 {font-size:40px;}
    .main #section5 ul li .data {font-size:22px; padding-bottom:5px;}
    .main #section5 ul li .text p {font-size:21px;}
    .main #section5 .bnWrap {padding:35px 0 50px 0;}
    .main #section5 .bnWrap h2.mo {font-size:20px;}
    .main #section5 .bnWrap p {font-size:22px; margin-top:15px;}
    .main #section5 .bnWrap .circle {width:55px; height:55px; }
    .main #section5 .bnWrap .circle img {width:28px;}
    
    .main #section6 .textBox {padding:130px 0;}
    .main #section6 ul {padding-bottom:130px;}
    .main #section6 .textBox dt span {font-size:18px;}
    .main #section6 .textBox dt p {font-size:40px; padding:15px 0 30px 0;}
    .main #section6 .textBox dd {font-size:20px;}
    .main #section6 .textBox dd .br {display:block;}
    .main #section6 ul li a {padding-bottom:40px; font-size:21px;}

    .main #section7 {padding:160px 0 100px 0;}
    .main #section7 h2 {font-size:36px;}
}
@media screen and (max-width:580px) {
    .main #section4 .slick-slide img {height:auto; width:60%;}
    .main #section4 .slick-nav .slick-nav-item {margin-right:25px;}
    .main #section4 .slick-nav .slick-nav-item p {font-size:17px;}
    .main #section4 .mainCarSliderList dd {font-size:18px; letter-spacing:-1px;}
    .main #section4 .mainCarSliderList button {margin-bottom:90px;}
}
@media screen and (max-width:480px) {
    .main-slider .inner, .mainSliderControl .inner {max-width:calc(100% - 40px);} 

    
    .main-slider__txt p {font-size:18px; line-height:1.3;}
    .main-slider__txt h2 {font-size:31px;}
    .mainSliderDots .slick-dots li button {font-size:18px; width:20px; height:20px;}
    .mainSliderDots .slick-dots li.slick-active {padding-right:80px;}
    .mainSliderDots .slick-dots li:before {width:70px;}
    @keyframes progressBarMain {0% {width: 0;} 100% {width:70px;}}
    .mainSliderDots .slick-dots li:before, .mainSliderDots .slick-dots li:after {left:33px; height:3px; top:47%;}

    .main #section2 .textBox,
    .main #section2 .companyInfo {width:calc(100% - 40px);}

    .main #section2 {padding:100px 0;}    
    .main #section2 .textBox .tit {font-size:40px; line-height:1.1;}
    .main #section2 .textBox p {font-size:20px; padding-top:15px;}
    .main #section2 .companyInfo li a {padding:22px 0;}
    .main #section2 .companyInfo li h3 {font-size:21px;}
    .main #section2 .companyInfo li p.mo {font-size:16px;}
    .main #section2 .companyInfo li .iconBox {height:8.5vh;}
    .main #section2 .companyInfo li:nth-child(1) .iconBox img,
    .main #section2 .companyInfo li:nth-child(2) .iconBox img,
    .main #section2 .companyInfo li:nth-child(4) .iconBox img {width:auto; height:65%;}
    .main #section2 .companyInfo li:nth-child(3) .iconBox img {width:auto; height:70%;}   

    .main #section3 {padding:100px 0 0 0;}
    .main #section3 .textBox h2 span {font-size:40px; }
    .main #section3 .textBox p {font-size:20px;}

    .main #section4 {padding-top:100px;}
    .main #section4 .inner {width:calc(100% - 40px);}

    .main #section5 {padding-top:100px;}
    .main #section5 ul, .main #section5 .bnWrap {width:calc(100% - 40px);}
    .main #section5 .textBox h2 {font-size:31px; padding-bottom:20px;}
    .main #section5 ul li .data {font-size:19px; padding-bottom:0;}
    .main #section5 ul li .text p {font-size:18px;}

    .main #section6 .textBox {padding:80px 0;}
    .main #section6 ul {padding-bottom:80px;}
    .main #section6 .textBox dt span {font-size:16px;}
    .main #section6 .textBox dt p {font-size:32px; padding:10px 0 20px 0;}
    .main #section6 .textBox dd {font-size:16px;}
    .main #section6 ul li a {padding-bottom:30px;}

    .main #section7 {padding:100px 0 70px 0;}
    .main #section7 .textBox {margin-bottom:50px;}
    .main #section7 h2 {margin-left:-30px; font-size:26px;}
    .main #section7 .inner {padding-left:30px;}
    .main #section7 .slick-list {margin:0 -5px;}    
    .main #section7 .slick-slide {margin:0 5px;}
}
@media screen and (max-width:430px) {
    .main #section2 .textBox .tit {font-size:36px;}
    .main #section2 .textBox p {font-size:18px;}
    .main #section2 .companyInfo li {margin-bottom:10px; width:calc(50% - 5px);}
    .main #section2 .companyInfo li a {padding:2vh 0;}
    .main #section2 .companyInfo li:nth-child(2n) {margin-left:10px;}
    .main #section2 .companyInfo li h3 {font-size:19px;}
    .main #section2 .companyInfo li p.mo {font-size:15px; letter-spacing:-1.2px;}
    .main #section2 .companyInfo li .iconBox {height:8vh;}
    .main #section2 .companyInfo li:nth-child(1) .iconBox img,
    .main #section2 .companyInfo li:nth-child(2) .iconBox img,
    .main #section2 .companyInfo li:nth-child(4) .iconBox img {width:auto; height:65%;}
    .main #section2 .companyInfo li:nth-child(3) .iconBox img {width:auto; height:70%;}   

    .main #section5 .bnWrap h2.mo {font-size:18px;}
    .main #section5 .bnWrap p {font-size:20px;}
}
@media screen and (max-width:380px) {
    .main #section2 .textBox .tit,
    .main #section3 .textBox h2 span {font-size:31px;}
    .main #section2 .textBox p {font-size:16px;}
    .main #section3 .textBox p {font-size:16px; letter-spacing:-1px;}

    .main #section2 .companyInfo li {margin-bottom:10px; width:calc(50% - 5px);}
    .main #section2 .companyInfo li a {padding:20px 0;}
    .main #section2 .companyInfo li:nth-child(2n) {margin-left:10px;}
    .main #section2 .companyInfo li h3 {font-size:17px;}
    .main #section2 .companyInfo li p.mo {font-size:14px; letter-spacing:-1.2px;}
    .main #section2 .companyInfo li .iconBox {height:60px;}
    .main #section2 .companyInfo li:nth-child(1) .iconBox img,
    .main #section2 .companyInfo li:nth-child(2) .iconBox img,
    .main #section2 .companyInfo li:nth-child(4) .iconBox img {width:auto; height:65%;}
    .main #section2 .companyInfo li:nth-child(3) .iconBox img {width:auto; height:70%;}   


    .main #section4 .slick-slide img {margin:50px auto 0 auto;}
    .main #section4 .mainCarSliderList .carInfo {padding:40px 0 0 0; width:100%;}
    .main #section4 .mainCarSliderList dd {font-size:16px;}

    .main #section5 .bnWrap {padding:25px 0 40px 0;}
    .main #section5 .bnWrap h2.mo {font-size:16px;}
    .main #section5 .bnWrap .circle {width:50px; height:50px;}
    .main #section5 .bnWrap .circle img {width:24px;}
    .main #section5 .bnWrap p {margin-top:10px; font-size:17px;}
}
@media screen and (max-width:320px) {
    .main #section4 .mainCarSliderList .carInfo br {display:none;}
    .main #section3 .textBox p {font-size:14px; letter-spacing:-1px;}
}
@media screen and (max-width:306px) {
    .main #section2 .companyInfo li p.mo {font-size:12px; letter-spacing:-1.4;}
    .main #section2 .textBox p {padding-right:20px; word-break:keep-all;}
    .main #section2 .textBox p br {display:none;}

    .main #section2 .textBox .tit,
    .main #section3 .textBox h2 .mo {font-size:26px;}

    .main #section5 .bnWrap h2.mo  {font-size:13px; letter-spacing:-1px;}
}