@charset "utf-8";


/* main */
.mainContainer {position:relative;min-height: calc(100vh - 216px);}
.mainContainer .bgBox {position:absolute;bottom:0;left:50%;width:100%;height:100%;background:url(../../images/main/main_bg.jpg) no-repeat bottom center/cover;transform:translateX(-50%);z-index:-1}
.mainContainer .bgBox:before {content:'';display:block;position:absolute;left:0;bottom:0;width:100%;height:14px;background-color:#a89c82}
.section {width:100%;max-width:1240px;margin:0 auto;display:flex;flex-wrap: wrap;position: relative;padding: 50px 0 270px;}
.section h2 {margin-bottom:40px;width:100%;text-align:center;font-size:30px;color:#333;font-weight:600}
.section h2 > strong {font-size:40px;color:#333;font-weight:800}
.section h2 > strong > em {color:#0d8549;font-weight:800}
.section .articleBox {width:50%;padding:0 10px 0 0}
.section .articleBox.right {padding:0 0 0 55px;width:50%}
.section .articleBox .noticeBox {position:relative;overflow:hidden;border: 2px solid transparent;border-radius:4px;background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, rgba(152,0,5,1), rgba(15,70,153,1));border-image-slice: 1;background-origin: border-box;background-clip: content-box, border-box;}
.section .articleBox .noticeBox h3 {width:100%;height:40px;line-height:40px;padding-left:20px;font-size:20px;color:#fff;font-weight:600;background-image:linear-gradient(to right, rgba(152,0,5,1), rgba(15,70,153,1))}
.section .articleBox .noticeBox .linkBtn {width:100%;padding:5px 55px 0}
.section .articleBox .noticeBox .linkBtn a {display:block;width:100%;height:46px;text-align:center;line-height:45px;border:1px solid #999;border-radius:4px}
.section .articleBox .noticeBox .linkBtn a span {position:relative;display:inline-block;width:fit-content;padding-right:32px;font-size:26px;font-weight:600}
.section .articleBox .noticeBox .linkBtn a span:before {content:'';display:block;position:absolute;top:50%;right:0;width:20px;height:14px;background:url(../../images/main/ico_arrow.png) no-repeat 0 0/100%;transform:translateY(-50%)}
.section .articleBox .noticeBox .listBox {padding:10px 55px}
.section .articleBox .noticeBox .listBox ul li {display:flex;justify-content: space-between;gap:40px;line-height:64px}
.section .articleBox .noticeBox .listBox ul li a {width:100%;font-size:19px;color:#333;font-weight:500;display: -webkit-box;overflow: hidden;word-break: break-word;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-overflow: ellipsis;}
.section .articleBox .noticeBox .listBox ul li span {width:fit-content;flex-shrink: 0;font-size:19px;color:#333;}
.section .articleBox .noticeBox .listBox ul li + li {border-top:1px solid #ccc}
.section .articleBox .noticeBox .listBox ul li:hover a,
.section .articleBox .noticeBox .listBox ul li:hover span {font-weight:600}
.section .articleBox .noticeBox .moreBtn {position:absolute;display:block;top:12px;right:25px;font-size:0}
.section .articleBox .noticeBox .moreBtn:before {content:'+';position:relative;display:block;font-size:24px;color:#fff;font-weight:600;line-height:0.7;transition:all 0.5s ease}
.section .articleBox .noticeBox .moreBtn:hover:before {transform:rotate(180deg)}
.section .articleBox .bannerBox {margin-top:10px}
.section .articleBox .bannerBox .bannerList {margin-bottom:0}
.section .articleBox .bannerBox .slick-dots {bottom:10px}
.section .articleBox .bannerBox .slick-dots li {margin:0 5px;width:10px;height:10px}
.section .articleBox .bannerBox .slick-slide img {width:100%}
.section .articleBox .bannerBox .slick-dots li button::before {background-color: #fff}
.section .articleBox .bannerBox .slick-dots li.slick-active button::before {background-color: #0d8549;transform: translateX(0);width:10px}
.section .articleBox .goBox {width:100%;height:100%;padding:50px 74px 0;background-color:#0d8549;border-radius:4px}
.section .articleBox .goBox h3 {display:flex;flex-direction: column;width:100%;max-width:340px;margin:0 auto}
.section .articleBox .goBox h3 em {display:flex;justify-content: space-between;line-height:1.25}
.section .articleBox .goBox h3 em span {font-size:80px;font-weight:700;color:#fff}
.section .articleBox .goBox .goBtn {width:100%;height:100px;margin-top:40px}
.section .articleBox .goBox .goBtn a {position:relative;padding-left:35px;display:flex;flex-direction: column;justify-content: center;width:100%;height:100%;background-color:#fff;border-radius:4px}
.section .articleBox .goBox .goBtn a:before {content:'';display:block;position:absolute;top:50%;right:30px;width:46px;height:54px;background:url(../../images/main/ico_main.png) no-repeat 0 0/100%;transform:translateY(-50%)}
.section .articleBox .goBox .goBtn a span {font-size:32px;color:#333;font-weight:600}
.section .articleBox .goBox .goBtn a strong {display:block;position:relative;font-size:32px;color:#0d8549;font-weight:800;width: fit-content;padding-right: 65px;}
.section .articleBox .goBox .goBtn a strong:before {content:'';display:block;position:absolute;top:50%;right:0;width:20px;height:14px;background:url(../../images/main/ico_arrow2.png) no-repeat 0 0/100%;transform:translateY(-50%)}
.section .articleBox .customerBox {position:absolute;bottom:165px;left:0;width:100%;height:60px;border:1px solid #ccc;border-radius:4px;background-color:#fff}
.section .articleBox .customerBox dl {position:relative;padding-left:55px;display:flex;height:100%;justify-content: center;align-items: center;gap:35px;width:fit-content;margin:0 auto}
.section .articleBox .customerBox dl:before {content:'';display:block;position:absolute;top:50%;left:0;width:50px;height:50px;background:url(../../images/main/ico_tel.png) no-repeat 0 0/100%;transform:translateY(-50%)}
.section .articleBox .customerBox dl dd + dt {margin-left:40px}
.section .articleBox .customerBox dl dt {font-size:24px;color:#333;font-weight:500}
.section .articleBox .customerBox dl dd {font-size:32px;color:#000;font-weight:800}
.section .articleBox .customerBox dl dd:last-child {font-size:26px;color:#333}
.subway {position:absolute;bottom:11px;left:calc(50% - 750px);width:180px;animation: bounceInUp 1.5s ease both}
.subway img {width:100%}
.bus {position:absolute;bottom:5px;right:calc(50% - 672px);width:216px;animation: slideInLeft 1.5s linear 1.5s both}
.bus img {width:100%}
.busStop {position:absolute;bottom:10px;right:calc(50% - 705px);width:18px;animation: bounceInUp 1s ease .5s both}
.busStop img {width:100%}
.taxi {position:absolute;bottom:5px;left:calc(50% - 120px);width:120px;animation: slideInLeft 2s linear 2s both}
.taxi img {width:100%}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-1800px);
    transform: translateX(-1800px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/* media Query */
@media screen and (max-width: 1440px) {

	.subway {left:0}
	.busStop {right:0}
	.bus {right:33px}
}

@media screen and (max-width: 1020px) {

	.section .articleBox .goBox {padding: 50px 50px 0;}
	.section .articleBox .goBox .goBtn a span {font-size:24px}
	.section .articleBox .goBox .goBtn a strong {font-size: 24px;padding-right: 50px;}
	.section .articleBox.right {padding: 0 0 0 15px;}
	.section .articleBox .customerBox dl dt {font-size: 20px;}
	.section .articleBox .customerBox dl dd {font-size:24px}
	.section .articleBox .noticeBox .linkBtn a span {font-size:22px}
	.section .articleBox .goBox h3 em span {font-size: 75px;}
	.section .articleBox .customerBox dl {gap:20px}

}


@media screen and (max-width:767px) {

	.mainContainer {min-height:auto}
	.section {flex-direction: column-reverse;padding:0 0 50px}
	.section h2 {position: absolute;top: 50px;font-size:14px}
	.section h2 strong {font-size:24px}
	.section .articleBox {width:100% !important;padding: 40px 15px 0;}
	.section .articleBox .bannerBox {margin-top:40px}
	.section .articleBox .noticeBox .linkBtn {padding: 13px 20px 0;}
	.section .articleBox .noticeBox .listBox {padding: 10px 20px;}
	.section .articleBox .noticeBox .linkBtn a span {font-size:20px}
	.section .articleBox .noticeBox .listBox ul li a {font-size:18px}
	.section .articleBox .noticeBox .listBox ul li span {font-size:14px}
	.section .articleBox .customerBox {position: relative;bottom: auto;left: 0;height:fit-content;margin-top:115px;padding:20px}
	.section .articleBox .customerBox:before {content:'';display:block;position:absolute;width:99px;height:70px;top:-70px;left:12px;background:url(../../images/main/img_subway.png) no-repeat 0 0/100%}
	.section .articleBox .customerBox:after {content:'';display:block;position:absolute;width:65px;height:30px;top:-30px;right:80px;background:url(../../images/main/img_taxi.png) no-repeat 0 0/100%}
	.section .articleBox .customerBox dl {width:100%;align-items: flex-start;flex-direction: column;padding:0;gap:10px}
	.section .articleBox .customerBox dl:before {top: -5px;left: auto;right: -5px;transform: none;}
	.section .articleBox .customerBox dl dt {font-size:22px}
	.section .articleBox .customerBox dl dd {font-size:32px;width:100%;text-align:center}
	.section .articleBox .customerBox dl dd + dt {margin-left: 0;font-size: 20px;}
	.section .articleBox.right {padding: 150px 15px 22px;background:url(../../images/main/main_bg_m.jpg) no-repeat bottom center/cover}
	.section .articleBox .goBox {padding: 15px 20px;position:relative}
	.section .articleBox .goBox:before {content:'';display:block;position:absolute;top:-42px;left:50%;width:100px;height:42px;background:url(../../images/main/img_bus.png) no-repeat 0 0/100%;transform:translateX(-50%)}
	.section .articleBox .goBox h3 {flex-direction: row;max-width: fit-content;gap:8px}
	.section .articleBox .goBox h3 em span {font-size:24px}
	.section .articleBox .goBox .goBtn {margin-top:10px}
	.section .articleBox .goBox .goBtn a {padding-left:20px;gap:5px}
	.section .articleBox .goBox .goBtn a:before {right:20px}
	.section .articleBox .goBox .goBtn a span {font-size:26px}
	.section .articleBox .goBox .goBtn a strong {font-size: 26px;padding-right: 53px;}
	.mainContainer .bgBox {display:none}
}

@media screen and (max-width:375px) {

	.section {padding:0 0 13.3vw}
	.section h2 {top: 13.3vw;font-size:3.7vw}
	.section h2 strong {font-size:6.4vw}
	.section .articleBox {padding: 10.7vw 4.0vw 0;}
	.section .articleBox .bannerBox {margin-top:10.7vw}
	.section .articleBox .noticeBox .linkBtn {padding: 3.5vw 5.3vw 0;}
	.section .articleBox .noticeBox .listBox {padding: 2.7vw 5.3vw;}
	.section .articleBox .noticeBox .linkBtn a span {font-size:5.3vw}
	.section .articleBox .noticeBox .listBox ul li a {font-size:4.8vw}
	.section .articleBox .noticeBox .listBox ul li span {font-size:3.7vw}
	.section .articleBox .customerBox {margin-top:30.7vw;padding:5.3vw}
	.section .articleBox .customerBox:before {width:26.4vw;height:18.7vw;top:-18.7vw;left:3.2vw;}
	.section .articleBox .customerBox:after {width:17.3vw;height:8.0vw;top:-8.0vw;right:21.3vw}
	.section .articleBox .customerBox dl {gap:2.7vw}
	.section .articleBox .customerBox dl:before {top: -1.3vw;right: -1.3vw;}
	.section .articleBox .customerBox dl dt {font-size:5.9vw}
	.section .articleBox .customerBox dl dd {font-size:8.5vw}
	.section .articleBox .customerBox dl dd + dt {font-size: 5.3vw;}
	.section .articleBox.right {padding: 40.0vw 4.0vw 5.9vw;}
	.section .articleBox .goBox {padding: 4.0vw 5.3vw}
	.section .articleBox .goBox:before {top:-11.2vw;width:26.7vw;height:11.2vw;}
	.section .articleBox .goBox h3 {gap:2.1vw}
	.section .articleBox .goBox h3 em span {font-size:6.4vw}
	.section .articleBox .goBox .goBtn {margin-top:2.7vw}
	.section .articleBox .goBox .goBtn a {padding-left:5.3vw;gap:1.3vw}
	.section .articleBox .goBox .goBtn a:before {right:5.3vw}
	.section .articleBox .goBox .goBtn a span {font-size:6.9vw}
	.section .articleBox .goBox .goBtn a strong {font-size: 6.9vw;padding-right: 14.1vw;}

}