@charset "utf-8";

.main .contents {position:relative; margin:0 auto; padding:76px 0 161px; width:100%}
@media (max-width: 1160px) {
    .main .contents {padding:50px 0 110px}
}
@media (max-width: 767px) {
    .main .contents {padding:50px 0 90px}
}

.ttlArea {display:flex; align-items:center; justify-content:space-between}
.ttlArea p {line-height:59px; letter-spacing:-1.2px; font-size:40px; font-weight:300; color:#1A1311}
.ttlArea p strong {font-weight:700}
.ttlArea p br {display:none}
.ttlArea span {display:block; margin-top:9px; line-height:27px; letter-spacing:-0.54px; font-size:18px; font-weight:300; color:#1A1311}
.ttlArea .btnMore {display:flex; align-items:center; width:90px; height:40px; line-height:22px; letter-spacing:0.75px; font-size:15px; color:transparent; background:url("../images/main/btn-more-black.svg") no-repeat center right/40px auto; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s}
.ttlArea .btnMore:hover {color:#1A1311}
/* .ttlArea .btnMore {display:flex; align-items:center; width:90px; height:40px; line-height:22px; letter-spacing:0.75px; font-size:15px; color:#FFFFFF; background:url("../images/main/btn-more-black.svg") no-repeat center right/40px auto; transition-duration:0.5s; -moz-transition-duration:0.5s; -webkit-transition-duration:0.5s; -o-transition-duration:0.5s}
.ttlArea .btnMore:hover {transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg)} */
@media (max-width: 1160px) {
    .ttlArea p {line-height:52px; font-size:34px}
    .ttlArea span {margin-top:5px; line-height:24px; font-size:16px}
    .ttlArea .btnMore {font-size:14px}
}
@media (max-width: 767px) {
    .ttlArea {align-items:inherit; position:relative}
    .ttlArea p {line-height:34px; font-size:22px}
    .ttlArea p br {display:block}
    .ttlArea span {margin-top:10px; line-height:22px; font-size:14px}
    .ttlArea .btnMore {position:absolute; top:6px; right:0; width:30px; height:30px; text-indent:-9999px; background-size:100% auto}
}

/* BANNER */
.banner {display:flex; align-items:center; justify-content:center; position:relative; top:0; width:100%; height:50px; background: no-repeat center/cover; overflow:hidden;}
.banner > div, .banner > div img {width:100%;}
.banner .bannertit {display:flex}
.banner .bannertit p {line-height:28px; letter-spacing:-0.6px; font-size:20px; color:#FFFFFF}
.banner .bannertit strong {display:inline-block; position:relative; margin-left:20px; line-height:32px; letter-spacing:-0.84px; font-size:28px; font-weight:500; color:#FFFFFF}
.banner .bannertit strong:before {display:block; content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#FFFFFF}
.banner .btnClose {display:block; position:absolute; top:calc(50% - 24px); right:40px; width:48px; height:48px; text-indent:-9999px; background:url("../images/main/btn-close.svg") no-repeat center/100% auto}
@media (max-width: 1160px) {
    .banner {height:70px}
    .banner .btnClose {top:calc(50% - 15px); right:20px; width:30px; height:30px}
}
@media (max-width: 767px) {
    .banner .bannertit {flex-direction:column; align-items:center}
    .banner .bannertit p {line-height:15px; font-size:15px}
    .banner .bannertit strong {margin:5px 0 0; line-height:24px; font-size:24px}
}

/* VISUALAREA */
.visualArea {position:relative; padding-bottom:47px}
.visualSwiper {overflow:hidden}
.visualSwiper .swiper-slide {height:480px}
.visualSwiper .swiper-slide img {width:100%; height:100%; object-fit:cover}
.visualSwiper .swiperBtn {display:flex; position:absolute; bottom:0; left:50%; padding:0 20px; width:1320px; max-width:100%; transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0)}
.visualSwiper .swiperBtn * + * {margin-left:10px}
.visualSwiper .swiperBtn .swiper-pagination {display:flex; align-items:center; position:relative}
.visualSwiper .swiperBtn .swiper-pagination .swiper-pagination-bullet {border-radius:20px; width:15px; height:15px; background:#1A1311; opacity:.2}
.visualSwiper .swiperBtn .swiper-pagination .swiper-pagination-bullet-active {width:40px; background:#009F97; opacity:1}
.visualSwiper .swiperBtn .swiper-pagination .swiper-pagination-bullet:nth-child(3n+2).swiper-pagination-bullet-active {background:#EF7500}
.visualSwiper .swiperBtn .swiper-pagination .swiper-pagination-bullet:nth-child(3n+3).swiper-pagination-bullet-active {background:#0058A9}
.visualSwiper .swiperBtn button[class^=btn] {width:24px; height:24px; border:none; text-indent:-9999px; background-repeat:no-repeat; background-position:center; background-size:100% auto; background-color:transparent; cursor:pointer}
.visualSwiper .swiperBtn .btnStop {background-image:url("../images/main/btn-stop.svg")}
.visualSwiper .swiperBtn .btnStart {display:none; background-image:url("../images/main/btn-start.svg")}
@media (max-width: 1160px) {
    .visualArea {padding-bottom:35px}
    .visualSwiper .swiper-slide {height:400px}
    .visualSwiper .swiperBtn * + * {margin-left:8px}
}
@media (max-width: 767px) {
    .visualArea {padding-bottom:30px}
    .visualSwiper .swiper-slide {height:350px}
    .visualSwiper .swiperBtn .swiper-pagination .swiper-pagination-bullet {width:12px; height:12px}
    .visualSwiper .swiperBtn .swiper-pagination .swiper-pagination-bullet-active {width:30px}
}

/* SCROLL MOVE */
.scrollMove {display:none; position:fixed; top:50%; left:50%; z-index:110; width:1572px; max-width:100%; text-align:right; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0)}
.scrollMove ul {display:inline-block; width:110px; vertical-align:top; text-align:left}
.scrollMove ul li + li {margin-top:10px}
.scrollMove ul li a {display:block; position:relative; padding-left:32px; text-indent:-9999px; line-height:24px; font-weight:700; color:#1A1311}
.scrollMove ul li a:before {display:block; content:""; position:absolute; top:8px; left:0; border-radius:50%; width:8px; height:8px; background:#1A1311; opacity:.2}
.scrollMove ul li.on a {text-indent:inherit}
.scrollMove ul li.on a:before {top:0; left:-6px; width:20px; height:24px; background:url("../images/main/ico-symbol.svg") no-repeat center/100% auto; opacity:1}
.scrollMove ul li a:hover {text-indent:inherit}
.scrollMove ul li a:hover:before {top:0; left:-6px; width:20px; height:24px; background:url("../images/main/ico-symbol.svg") no-repeat center/100% auto; opacity:1}
@media (max-width: 1160px) {
    .scrollMove {display:none !important}
}

/* 메인 1단 */
.cont01 {position:relative; z-index:50; margin:0 auto; padding:0 20px; width:1320px; max-width:100%}
.subscribe {display:flex; margin-top:40px}
.subscribe .radiusBox {overflow:hidden}
.radiusBox.left .top {margin:-30px -30px 8px; padding-left:40px; line-height:60px; letter-spacing:-0.6px; font-size:20px; font-weight:500; color:#1A1311; background:rgba(26,19,17,.1)}
.radiusBox.left .bottom {display:flex; align-items:center; justify-content:space-between; margin:30px -30px -30px; padding:0 40px; height:100px; background:rgba(26,19,17,.03)}
.radiusBox.left .bottom p {line-height:36px; letter-spacing:-0.72px; font-size:24px; font-weight:700; color:#1A1311}
.radiusBox.left .bottom strong {line-height:59px; letter-spacing:-1.2px; font-size:40px; font-weight:700; color:#1A1311}
.radiusBox.left .bottom strong em {display:inline-block; margin-left:5px; vertical-align:baseline; line-height:26px; letter-spacing:-0.54px; font-size:18px; font-weight:400; color:#1A1311}
.radiusBox.left .grayBox.v2 {padding:24px 30px 5px}
.radiusBox.right {display:flex; flex-direction:column; justify-content:space-between; margin-left:40px}
.radiusBox.right .agree {margin:10px 0 30px}
@media (max-width: 1160px) {
    .subscribe {flex-direction:column}
    .radiusBox.left .top {font-size:18px}
    .radiusBox.left .bottom {height:80px}
    .radiusBox.left .bottom p {font-size:22px}
    .radiusBox.left .bottom strong {font-size:35px}
    .radiusBox.right {margin:30px 0 0}
}
@media (max-width: 767px) {
    .radiusBox.left .top {margin:-20px -30px 0; line-height:50px; font-size:16px}
    .radiusBox.left .bottom {margin:20px -10px -20px; padding:0 20px; height:70px}
    .radiusBox.left .bottom p {line-height:28px; font-size:18px}
    .radiusBox.left .bottom strong {line-height:34px; font-size:22px}
    .radiusBox.left .bottom strong em {font-size:16px}
    .radiusBox.left .grayBox.v2 {padding:20px 10px}
}

/* 메인 2단 */
.cont02 {position:relative; z-index:0; margin:-154px auto 0; padding:294px 0 0; background:url("../images/main/bg.png") no-repeat center bottom 213px/cover; box-sizing:content-box}
.cont02 .inner {position:relative; margin:0 auto; width:1460px; max-width:100%}
.cont02 .inner .ttlArea {margin:0 auto; padding:0 20px; width:1320px; max-width:100%}
.cont02 .inner .ttlArea p,
.cont02 .inner .ttlArea span {color:#fff}
.cont02 .inner .ttlArea .btnMore {background-image:url("../images/main/btn-more.svg")}
.cont02 .inner .ttlArea .btnMore:hover {color:#fff}
.cont02 .inner .contWrap {position:relative; padding:0 90px;}
.cont02 .inner .contWrap .contSwiper01 {position:relative; overflow:hidden; margin:0 -20px; padding:140px 20px 20px}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide {top: -50px;}/* 2022-07-21 수정 */
/* .cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+2) {top:-50px}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+3) {top:-100px}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+4) {top:-20px} *//* 2022-07-21 수정 */
.cont02 .inner .contWrap .contSwiper01 .swiper-slide {display:block; border-radius:24px; box-shadow:0px 4px 16px #00000033; transition:transform 0.3s linear; -moz-transition:transform 0.3s linear; -webkit-transition:transform 0.3s linear; -o-transition:transform 0.3s linear}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inImg {overflow:hidden; border:none; border-radius:24px 24px 0 0; height:273px}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inImg img {width:100%; height:100%; background:#fff; object-fit:cover; transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg {position:relative; padding:20px; border-radius:0 0 24px 24px; min-height:127px; background:#009F97}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg:before {display:block; content:""; position:absolute; top:0; left:0; border-radius:0 0 24px 24px; width:0; height:100%; background:#0058A9; opacity:0; transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition-duration:0.3s; -moz-transition-duration:0.3s; -webkit-transition-duration:0.3s; -o-transition-duration:0.3s}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg div {position:relative; z-index:5}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg div strong {display:block; line-height:29px; letter-spacing:-0.6px; font-size:20px; font-weight:700; color:#FFFFFF}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg div p {margin-top:10px; line-height:24px; letter-spacing:-0.48px; font-size:16px; color:#FFFFFF}
/* .cont02 .inner .contWrap .contSwiper01 .swiper-slide:hover {transform:translateY(-20px); -ms-transform:translateY(-20px); -moz-transform:translateY(-20px); -webkit-transform:translateY(-20px)}
	수정사항 반영 2022-11-08
*/
.cont02 .inner .contWrap .contSwiper01 .swiper-slide:hover .inImg {border:6px solid #0058A9; border-bottom:none}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide:hover .inImg img {transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1)}
.cont02 .inner .contWrap .contSwiper01 .swiper-slide:hover .inBg:before {width:100%; opacity:1}
.cont02 .inner .contWrap .swiper-button-prev.contSwiper01-prev,
.cont02 .inner .contWrap .swiper-button-next.contSwiper01-next {/* top:inherit; bottom:14px; */ z-index:100; width:60px; /* height:calc(100% - 160px) */}    /* 2022-07-21 수정 */
.cont02 .inner .contWrap .swiper-button-prev.contSwiper01-prev {left:0; background:url("../images/main/btn-prev.svg") no-repeat center left}
.cont02 .inner .contWrap .swiper-button-next.contSwiper01-next {right:0; background:url("../images/main/btn-next.svg") no-repeat center right}
.cont02 .inner .contWrap .swiper-button-prev.contSwiper01-prev.swiper-button-disabled {background-image:url("../images/main/btn-prev-disabled.svg"); opacity:1}
.cont02 .inner .contWrap .swiper-button-next.contSwiper01-next.swiper-button-disabled {background-image:url("../images/main/btn-next-disabled.svg"); opacity:1}
@media (max-width: 1320px) {
	.cont02 .inner .contWrap {padding:0 30px}
}
@media (max-width: 1160px) {
    .cont02 {margin:-200px auto 0; padding:0}
    .cont02 .inner {padding:270px 0 0}
	.cont02 .inner .contWrap {padding:0}
    .cont02 .inner .contWrap .contSwiper01 {padding:80px 20px 20px; margin:0}
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide {width:250px !important; top: -30px}
	/* .cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+2) {top:-40px}
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+3) {top:-60px}
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+4) {top:-20px} */ /* 2022-07-21 수정 */
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inImg {height:250px}
    .cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg {padding:15px}
    .cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg div strong {line-height:28px; font-size:18px}
    .cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg div p br {display:none}
    .cont02 .inner .contWrap .swiper-button-prev.contSwiper01-prev,
    .cont02 .inner .contWrap .swiper-button-next.contSwiper01-next {/* bottom:25px; */ width:40px;/*  height:calc(100% - 100px);  */background-size:100% auto}   /* 2022-07-21 수정 */
	.cont02 .inner .contWrap .swiper-button-prev.contSwiper01-prev.swiper-button-disabled,
	.cont02 .inner .contWrap .swiper-button-next.contSwiper01-next.swiper-button-disabled {opacity:0}
}
@media (max-width: 767px) {
    .cont02 .inner {padding:250px 0 0}
    .cont02 .inner .contWrap .contSwiper01 {padding:75px 20px 20px}
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide {width:200px !important; top: -15px;}
	/* .cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+2) {top:-30px}
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+3) {top:-45px}
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide:nth-child(4n+4) {top:-15px} */    /* 2022-07-21 수정 */
	.cont02 .inner .contWrap .contSwiper01 .swiper-slide .inImg {height:200px}
    .cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg div strong {line-height:24px; font-size:16px}
    .cont02 .inner .contWrap .contSwiper01 .swiper-slide .inBg div p {line-height:22px; font-size:14px}
    /* .cont02 .inner .contWrap .swiper-button-prev.contSwiper01-prev,
    .cont02 .inner .contWrap .swiper-button-next.contSwiper01-next {bottom:48px; height:calc(100% - 90px)} */   /* 2022-07-21 수정 */
}

/* 메인 3단 */
.cont03 {position:relative; z-index:50; margin:120px auto 0; width:1460px; max-width:100%}
.cont03 .ttlArea {padding:0 20px; margin:0 auto; width:1320px; max-width:100%}
.cont03 .contWrap {position:relative; padding:0 90px; margin-top:59px; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.cont03 .contWrap .contSwiper02 {position:relative; overflow:hidden; margin:-20px; padding:20px}
.cont03 .contWrap .contSwiper02 .swiper-slide {display:block; position:relative; overflow:hidden; border-radius:24px; box-shadow: 0px 4px 16px rgba(0,0,0,.2); transition:transform 0.3s linear; -moz-transition:transform 0.3s linear; -webkit-transition:transform 0.3s linear; -o-transition:transform 0.3s linear}
.cont03 .contWrap .contSwiper02 .swiper-slide img {width:100%; height:300px; object-fit:cover}
.cont03 .contWrap .contSwiper02 .swiper-slide p {display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; line-height:32px; letter-spacing:-0.66px; font-size:22px; color:#FFFFFF; background:rgba(0,88,169,.8); opacity:0; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s}
/*
.cont03 .contWrap .contSwiper02 .swiper-slide:hover {transform:translateY(-20px); -ms-transform:translateY(-20px); -moz-transform:translateY(-20px); -webkit-transform:translateY(-20px)}
수정사항 반영 2022-11-08
*/
.cont03 .contWrap .contSwiper02 .swiper-slide:hover p {opacity:1}
.cont03 .contWrap .swiper-button-prev.contSwiper02-prev,
.cont03 .contWrap .swiper-button-next.contSwiper02-next {top:inherit; bottom:0; z-index:100; border:none; width:60px; height:100%; text-indent:-9999px}
.cont03 .contWrap .swiper-button-prev.contSwiper02-prev {left:0; background:url("../images/main/btn-prev.svg") no-repeat center left}
.cont03 .contWrap .swiper-button-next.contSwiper02-next {right:0; background:url("../images/main/btn-next.svg") no-repeat center right}
.cont03 .contWrap .swiper-button-prev.contSwiper02-prev.swiper-button-disabled {background-image:url("../images/main/btn-prev-disabled.svg"); opacity:1}
.cont03 .contWrap .swiper-button-next.contSwiper02-next.swiper-button-disabled {background-image:url("../images/main/btn-next-disabled.svg"); opacity:1}
@media (max-width: 1320px) {
	.cont03 .contWrap {padding:0 30px}
}
@media (max-width: 1160px) {
    .cont03 {margin:70px auto 0}
	.cont03 .contWrap {padding:0 20px}
	.cont03 .contWrap .contSwiper02 .swiper-slide {width:260px !important; height:260px}
    .cont03 .contWrap .contSwiper02 .swiper-slide p {line-height:28px; font-size:18px}
    .cont03 .contWrap .swiper-button-prev.contSwiper02-prev,
    .cont03 .contWrap .swiper-button-next.contSwiper02-next {width:40px; background-size:100% auto}
	.cont03 .contWrap .swiper-button-prev.contSwiper02-prev.swiper-button-disabled,
	.cont03 .contWrap .swiper-button-next.contSwiper02-next.swiper-button-disabled {opacity:0}
}
@media (max-width: 767px) {
    .cont03 {margin:50px auto 0}
    .cont03 .contWrap {margin-top:30px}
	.cont03 .contWrap .contSwiper02 .swiper-slide {width:200px !important; height:200px}
    .cont03 .contWrap .contSwiper02 .swiper-slide p {line-height:22px; font-size:14px}
}