/* ----- Import URL ----- */
@import url("../css/common.css");

/* ----- SubIntro Section ----- */
.subIntro {background-image: url("../images/sub-bgImg.png"); background-size: 100% auto; height: 800px; display: flex; align-items: center;}
.subIntro .titleArea h2 {font-size: 58px;}
.subIntro .titleArea img {margin: 42px 0;}
.subIntro .titleArea p {font-size: 24px; font-weight: 400; line-height: 1.4;}

/* -----Solution Section ----- */
.solution {padding: 150px 0 150px 200px; display: flex; position: relative;}
.solution .titleArea {display: flex; flex-direction: column; justify-content: center; position: relative;}
.solution .slideArea .subSlider {margin-left: 150px;}
.solution .slideArea .subSlider .slick-slide {width: 271px; margin-right: 30px;}
.solution .slideArea .subSlider .slideImg {width: 100%;}
.solution .slideArea .subSlider .slideTitle {width: 100%; text-align: center;}
.solution .slideArea .subSlider div .slideTitle span {font-size: 14px; font-weight: 700; color: #2e2e2e; display: block; margin-bottom: 7px;}
.solution .slideArea .subSlider div .slideTitle p {font-size: 14px; font-weight: 400; color: #4f4f4f; line-height: 20px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.solution .dotsWrap {position: absolute; left: 200px; top: 65%;}
.solution .dotsWrap .customDots {font-size: 0;}
.solution .dotsWrap .customDots li {display: inline-block; width: 13px; height: 13px; background: #d9d9d9; border-radius: 50%; margin-right: 8px; cursor: pointer;}
.solution .dotsWrap .customDots li.slick-active {background: #0a8000;}
.solution .dotsWrap .customDots li button {display: none;}

/* -----Value Section ----- */
.value {padding: 100px 0;}
.value .title h{text-align: center; margin-bottom: 50px;}
.value .contentsArea {width: 1520px; height: 717px; background-image: url("../images/value-bg.png"); background-repeat: no-repeat; background-position: center; position: relative;}
.value .contentsArea span {display: block; margin-bottom: 8px; font-size: 22px; font-weight: 700; line-height: 28px;}
.value .contentsArea p {font-weight: 400; color: #4f4f4f; line-height: 24px;}
.value .contentsArea div {position: absolute;}
.value .contentsArea .txtBox1 {left: 415px; top: 87px;}
.value .contentsArea .txtBox2 {text-align: right; right: 430px; top: 120px;}
.value .contentsArea .txtBox3 {left: 548px; bottom: 102px;}

/* ----- Numbers Section ----- */
.numbers {width: 100%; padding: 100px 0;}
.numbers .titleArea h3 {text-align: center; margin-bottom: 70px;}
.numbers .cardWrap {display: flex; justify-content: center;}
.numbers .cardWrap .card {width: 275px; height: 350px; border-radius: 30px; background: #cde6c8; text-align: center; padding: 48px 60px; box-sizing: border-box; margin-right: 70px;}
.numbers .cardWrap .card:last-child {margin-right: 0;}
.numbers .cardWrap .card img {width: 136px; margin-bottom: 22px;}
.numbers .cardWrap .card .title {display: block; font-size: 18px; font-weight: 700; line-height: 24px; color: #25358c; margin-bottom: 28px;}
.numbers .cardWrap .card .number {font-size: 36px; font-weight: 700; line-height: 44px;}
.numbers .cardWrap .card em {font-size: 16px; font-weight: 400; line-height: 24px;}

/* ----- BtmBanner Section -----*/
.btmBanner {padding: 80px 0;}
.btmBanner .wrap {width: 100%; height: 317px; background-image: url("../images/sub-event-banner.png"); background-repeat: no-repeat; background-size: 100% auto;}
.btmBanner .wrap .box {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.btmBanner .wrap .box p {font-size: 32px; font-weight: 700; line-height: 40px; color: #fff; text-align: center; margin-bottom: 30px;}
.btmBanner .wrap .box button {display: block; width: 150px; height: 45px; padding: 10px; border: none; border-radius: 20px; background: #fff; color: #0A8000; font-weight: 700;}