@charset "utf-8";

/* animation */
/* word */
.wordAni{opacity:0;}
.wordAni.active{opacity:1;}
.wordAni > span{display:inline-block;}
.wordAni .word{display:inline-block;}
/* motion rail */
[data-motion-rail]{position:absolute; left:0px; top:0px; text-transform:uppercase; font-size:200px; letter-spacing:2px; white-space:nowrap;}
[data-motion-rail] .eocjs-newsticker-container{position:relative; width:100%; padding-top:30%;}
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-one,
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-two{position:absolute; left:0; top:0; white-space:nowrap;}
/* hide show */
.ani_hide{overflow:hidden; opacity:0; transform:translateY(-20px); transition:opacity 0.8s ease-in-out 0s, transform 0.8s ease-in-out 0s;}
.ani_hide.motion_in{opacity:1; transform:translateY(0px);}
/* box show */
.ani_box{position:relative;}
.ani_box:before,
.ani_box:after{content:''; display:block; position:absolute; top:0px; z-index:3; width:50.5%; height:100%; background:#fff; transform:scaleX(1); transition:transform 0.7s ease-in-out 0s;}
.ani_box .obj_blank:before,
.ani_box .obj_blank:after{content:''; display:block; position:absolute; top:0px; z-index:2; width:50%; height:100%; background:#0083c3; transform:scaleX(1); transition:transform 0.6s ease-in-out 0s;}
.ani_box:before{left:-1px; transform-origin:0 0;}
.ani_box .obj_blank:before{left:0px; transform-origin:0 0;}
.ani_box:after{right:-1px; transform-origin:100% 0;}
.ani_box .obj_blank:after{right:0px; transform-origin:100% 0;}
.ani_box.motion_in:before,
.ani_box.motion_in:after{transform:scaleX(0);}
.ani_box.motion_in .obj_blank:before,
.ani_box.motion_in .obj_blank:after{transform:scaleX(0); transition-delay:0.15s;}

@keyframes path01{
	0%{stroke-dashoffset:1500;}
	100%{stroke-dashoffset:0;}
}



/**
 * #main-visual-section
**/
#main-visual-section{width:100%;height:1000px;overflow:hidden;position:relative;background-size: cover;}
.area_visual{position:relative;width:100%;height: 100% !important;}
.area_visual .swiper,
.area_visual .swiper .box{height:100%;}
.area_visual .swiper .box{overflow:hidden; position:relative;}
.area_visual [data-visual="text"]{display:flex;flex-flow:column wrap;justify-content:center;align-items:flex-start;position:absolute;top: -5%;left:50%;z-index:60;width: 100%;max-width: 1200px;height:100%;margin-left: -600px;color:#fff;}
.area_visual [data-visual="text"] > p{font-family: 'GmarketSansBold';width: 100%;text-align: left;font-size: 24px;font-weight: 400;padding-bottom: 0.2em;}
.area_visual [data-visual="text"] > span{display:block; margin:5px 0 30px; font-size:0px;}
.area_visual [data-visual="text"] > em{font-family: 'GmarketSansBold';width: 100%;text-align: left;font-size: 60px;font-weight: 700;padding-bottom: 0.5em;}
.area_visual [data-visual="text"] > .vlogo_img {opacity:0; display: inline-block; margin: 0 auto; text-align: center;}
.area_visual [data-visual="text"] > .vlogo_img img {width:100%;max-width:484px;}
.area_visual [data-visual="img"]{display:block; height:100%;}
.area_visual [data-visual="img"] i{display:block; height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover; transform:scale(1.08); transition:transform 4s ease-in-out;}
.area_visual .swiper-slide-active [data-visual="img"] i{transform:scale(1);}
.area_visual [data-visual="text"] > p span.bold .word1,
.area_visual [data-visual="text"] > p span.bold .word2,
.area_visual [data-visual="text"] > p span.bold .word3,
.area_visual [data-visual="text"] > p span.bold .word4 {font-weight:bold;}
.area_visual [data-visual="text"] > p span.bold .word4 .word:last-child {font-weight:normal;}
.area_visual .area_arrow {width: 150px !important;text-align: center;display: inline-block;position:absolute;left: 50%;margin-left: -75px;bottom: 50px;z-index:2;color: #fff;}
.swiper-pagination-bullet {width:10px !important;height: 6px !important;background-color:#ffffff !important;margin:0 3px;opacity: 0.5 !important;border-radius: 0;}
.swiper-pagination-bullet-active {width: 60px !important;opacity: 1 !important;background-color:#ffffff !important;}
.swiper-button-next, .swiper-button-prev {position:absolute;display:grid;width:70px;height: 70px;background-color : rgba(0,0,0,0.5);border-radius:50%;justify-content: center;align-items: center;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 1.6em; color:#fff;}
.swiper-button-next {right: 50%;margin-right: -700px;}
.swiper-button-prev {left: 50%;margin-left: -700px;}

@media screen and (max-width:1410px){
	.area_visual .mmark {left:10px;margin-left:inherit;}
	.area_visual .mmark img {width:300px;}
}
@media screen and (max-width:1200px){
	.area_visual .mmark {margin-top: 110px;}
	.area_visual .mmark img {width:270px;}
	.area_visual [data-visual="text"] {display: inline-block;width: 500px;max-width: inherit;top: 45%;left: 50%;margin: 0px;background-color: rgb(0,0,0,0.5);height: auto;transform: translate(-50%, -50%);text-align: center;padding: 2em;}
	.area_visual [data-visual="text"] > p{font-size:2vw; text-align:center;}
	.area_visual [data-visual="text"] > em{font-size: 4vw; text-align:center;}
	.area_visual [data-visual="text"] > .vlogo_img img {width:90%;}
}
@media screen and (max-width:980px){
	.area_visual .mmark img {width:250px;}
	.area_visual .area_arrow {width:140px;bottom: 30px;left: 50%;margin-left:-70px;}
	.area_visual .swiper_page {font-size:16px;}
	.area_visual [data-visual="text"] > .vlogo_img img {width:75%;}
}
@media screen and (max-width:768px){
	.area_visual .mmark img {width:220px;}
	.area_visual [data-visual="text"] > p{font-size:3vw}
	.area_visual [data-visual="text"] > em{font-size: 6vw;}
	.area_visual [data-visual="text"] > .vlogo_img img {width:60%;}
}
@media screen and (max-width:550px){
	.area_visual [data-visual="text"] {width: 300px;padding: 1em 10px;}
}
@media screen and (max-width:460px){
	.area_visual .mmark img {width:200px;}
	.area_visual [data-visual="text"] > p{font-size: 5vw;}
	.area_visual [data-visual="text"] > em{font-size: 9vw;}
	.area_visual [data-visual="text"] > .vlogo_img img {width:45%;}
}


.main-sec2 {padding:175px 0 120px;}
.main-sec2 .contain {max-width: 1200px;margin: 0 auto;}
.main-sec2 .top {position:relative;}
.main-sec2 .top .img {margin-bottom:45px;}
.main-sec2 .top .txt {display: block;text-align: center;font-size: 56px;font-weight: 700;color:#2c2c2c;line-height:1em;}
.main-sec2 .top .txt span {color:#d61719;}
.main-sec2 .top p {font-size: 22px;margin: 40px 0 140px 0;line-height:1.615em;text-align:center;font-weight:500;color: #2c2c2c;letter-spacing:-.04em;}
.main-sec2 .top p strong {font-weight:700;color: #044999;}
.main-sec2 ul {display:flex; max-width:1200px; margin:0 auto; text-align:center;}
.main-sec2 ul li {width: 33.333%;border-left:1px dashed #dfdfdf;padding: 20px 0;}
.main-sec2 ul li:last-child {border-right:1px dashed #dfdfdf;}
.main-sec2 ul li .icon {margin-bottom:35px;}
.main-sec2 ul li span {font-size:14px; font-weight:500; color:#878787; letter-spacing:-.04em; display:block;}
.main-sec2 ul li .tit {font-size: 24px;margin-bottom: 35px;font-weight:700;letter-spacing:-.04em;color: #2c2c2c;line-height:1.2em;}
.main-sec2 ul li p {font-size: 16px;line-height: 1.5;color: #2c2c2c;margin-bottom: 35px;}
.main-sec2 ul li a {width: 110px;height: 40px;display:flex;align-items:center;justify-content:center;margin:0 auto;border:1px solid #dfdfdf;border-radius: 15px;font-size: 14px;color: #555555;font-weight:500;letter-spacing:-.04em;}
.main-sec2 ul li:hover a {color:#fff; background-color:#044999; border-color:#044999;}

@media (max-width:1025px) {
	.main-sec2 ul {flex-wrap: wrap;}
	.main-sec2 ul li {width: 50%;}
	.main-sec2 ul li:nth-child(1) {border-bottom: 1px dashed #dfdfdf;}
	.main-sec2 ul li:nth-child(2) {border-bottom: 1px dashed #dfdfdf;}
}




.main-sec3 {padding:110px 0 120px; background-color:#f4f4f4;}
.m-tit {font-size:56px;margin-bottom:55px;font-weight: 700;color:#2c2c2c;line-height:1.2em;}
.main-sec .more-view {font-size:19px;top: 5px;right: 0px;font-weight:500;color:#2c2c2c;letter-spacing:-.04em;line-height:1.2em;position:absolute;}
.main-sec .more-view img {vertical-align:middle;}

.main-sec3 .m-tit {padding-left: 20px;}
.main-sec3 .wrap {padding-left: 340px;max-width:1920px;margin:0 auto;position:relative;}
.main-sec3 .more-view {right: 351px;}
.main-sec3 .swiper {width: 1900px;height:100%;}
.main-sec3 .swiper-slide {padding:0 20px 70px; width:100%;}
.main-sec3 .swiper-slide a:hover .thumb:after {left:0; right:0; top:0; bottom:0; background-image:url('../images/main/pro_on.png'); background-size:cover; background-repeat:no-repeat; position:absolute; content:'';}
.main-sec3 .swiper-slide a .thumb {position:relative;padding-bottom:100%;margin-bottom:15px;overflow:hidden;background-color:#fff;border: 1px solid #ddd;}
.main-sec3 .swiper-slide a .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.main-sec3 .swiper-slide a p {font-size: 16px;color:#2c2c2c;letter-spacing:-.04em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;  /* 말줄임 적용 */}
.main-sec3 .swiper-pagination {top: inherit;position:absolute;width:100%;margin-left:20px;height:5px;bottom:0;left:50%;transform:translateX(-50%);background:#dfdfdf;}
.main-sec3 .swiper-pagination-progressbar-fill {background-color:#272e3e !important;}

.main-sec4 {padding: 110px 0 110px;}
.main-sec4 .contain {position:relative;width: 100%;max-width: 1220px;margin: 0 auto;padding: 0 10px;}
.main-sec4 ul {display:flex; margin:0 -20px;}
.main-sec4 ul li {width:33.3333%; padding:0 20px;}
.main-sec4 ul li a {display:block;}
.main-sec4 ul li a .img-area {display: inline-block;position: relative;border:1px solid #dfdfdf;padding:0;margin:0;line-height:0;}
.main-sec4 ul li a .img-area img {width:100%;max-width:370px;}
.main-sec4 ul li a .tit {display: block; text-align: center; font-size: 18px; color: #2c2c2c; margin-top: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
main-sec4 ul li:hover a {background-color:#fafafa;}


@media (max-width:1500px) {
	.main-sec3 .wrap {padding-left:130px;}
	.main-sec3 .more-view {right:130px;}
}

@media (max-width:1300px) {
	.main-sec3 .wrap {padding-left: 0px;}
	.main-sec3 .more-view {right: 20px;}
}

@media (max-width:1250px) {
	.main-sec3 .m-tit {padding-left: 10px;}
	.main-sec3 .more-view {right: 10px;}
	.main-sec4 .more-view {right: 10px;}
	.main-sec .more-view img {width:50px;}
}

/* landscape tablet and desktop */
@media (max-width:1200px) {
	.main-sec2 .top .txt {font-size: 50px;}
	.main-sec2 .top p {font-size:20px; margin-bottom:50px;}
	.main-sec2 ul li .icon {margin-bottom:20px;}
	.main-sec2 ul li .tit {font-size:25px;}
	.main-sec2 {padding:120px 0 80px;}
	.main-sec3,
	.main-sec4 {padding:80px 0;}
	.m-tit {font-size: 50px;}
	.main-sec4 ul li a {/* padding:30px; */}
	.main-sec4 ul li a .tit {font-size:18px; margin-bottom:20px;}
}

@media (max-width:1024px) {
	.main-sec2 .top .img {margin-bottom:30px;}
	.main-sec2 .top .txt {font-size: 40px;}
	.main-sec2 .top p {font-size:16px; margin-bottom:30px;}
	.main-sec2 ul li .icon {margin-bottom:10px;}
	.main-sec2 ul li .icon img {height:50px;}
	.main-sec2 ul li span {line-height:1.3em;}
	.main-sec2 ul li .tit {font-size:20px; margin:10px 0;}
	.main-sec2 ul li p {margin-bottom: 15px;}
	.main-sec2 ul li a {width:100px; height:35px;}
	
	.m-tit {font-size: 40px;}

	.main-sec3, .main-sec4 {padding:60px 0;}
	.main-sec3 .m-tit {padding-left:10px;}
	.main-sec3 .swiper {width:100%;}
	.main-sec3 .swiper-slide {padding:0 10px 40px;}
	.main-sec3 .swiper-slide a .thumb {margin-bottom:10px;}
	.main-sec3 .swiper-slide a p {font-size:16px;}
	.main-sec3 .swiper-pagination {margin-left:10px;}
	
	.main-sec4 ul {margin:0 -10px;}
	.main-sec4 ul li {padding:0 10px;}
	.main-sec4 ul li a .date {margin-bottom:10px;}
	.main-sec4 ul li a .tit {font-size:16px; margin-bottom:10px;}
	.main-sec4 ul li a .in {margin-bottom:20px;}
} 

@media (max-width:640px) {
	.main-sec2 {padding:70px 0 50px;}
	.main-sec2 .top .txt {font-size: 30px;}
	.main-sec2 .top p {font-size: 14px;margin-bottom:20px;}
	.main-sec2 .top p br {display:none;}
	.main-sec2 ul {flex-wrap:wrap;}
	.main-sec2 ul li {padding:15px 0; width:100%; border:1px dashed #dfdfdf; margin-top:-1px;}
	.main-sec2 ul li .icon img {height:34px;}
	.main-sec2 ul li .tit {font-size:16px; margin:5px 0;}
	.main-sec2 ul li p {font-size: 14px;}

	.main-sec3 .swiper {width:100%;}
	.main-sec3 .wrap {padding-left:5px;}
	.main-sec3 .swiper-slide a p {font-size:14px;}
	.main-sec3 .more-view,
	.main-sec4 .more-view {right:15px;}

	.m-tit {font-size: 30px;margin-bottom:20px;}
	.main-sec3, .main-sec4 {padding:40px 0;}
	.main-sec4 ul {flex-wrap:wrap;margin: 0 auto;width: 100%;max-width: 370px;}
	.main-sec4 ul li {width:100%;margin-bottom:10px;padding:0;}
	.main-sec4 ul li a {padding:15px 20px;}
	.main-sec .more-view img {width:35px;}
} 

@media (max-width:500px) {
	.main-sec2 .top .txt {font-size: 24px;}
	.m-tit {font-size: 24px;}
	.main-sec .more-view img {width:20px;}
}