@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000; position: fixed; z-index: 9999999;}

/* ****************** 메인 loading ********************** */
.main-wrap .nav-open-btn-wrap,
.main-wrap #headerInnerWrap,
.main-wrap .nav-open-btn{margin-top: calc(-1 * var(--header-height)); opacity: 0; transition: top 0.4s ease-in-out, margin-top ease-in-out 1.1s, height 0.4s ease-in-out, background-color 0.4s ease-in-out, transform 0.6s ease-in-out;}
.main-search-box{transform: translateY(var(--header-height)); opacity: 0; transition: transform ease-in-out 1.1s, opacity 0.4s ease-in-out;}

.index-active.main-wrap .nav-open-btn-wrap,
.index-active.main-wrap #headerInnerWrap,
.index-active.main-wrap .nav-open-btn{margin-top:0; opacity:1;}
.index-active.main-wrap .main-search-box{transform: translateY(0); opacity: 1;}

@media all and ( min-width: 801px ) and (max-height: 910px) {
	#mainVisual{min-height: 91rem;}
}
@media all and ( min-width: 801px ) and (max-height: 800px) {
	#mainVisual{min-height: 80rem;}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{position: relative; margin-bottom: 3rem; overflow: hidden; background-color: #f5f5f5;}
#mainVisual .area-box{height: 100%;}
.main-visual-container-m{position: absolute; top: 0; left: -999999px; width: 100%; visibility: hidden; opacity: 0;}

.main-visual-container{padding-top: 165px; height: calc(100% - 14rem); box-sizing: border-box; overflow: hidden;}
#mainVisual .main-visual-wrapper{position: relative; height: calc(100% - 8rem);} /*  ul */
.main-visual-slide{overflow: hidden;} /* li */

.main-visual-inner{position: relative; height: 100%; width: 100%; top: 0; left: 0;}
.main-visual-item{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: max(0.8rem,.325vw); grid-auto-flow: column; width: 100%; height: 100%;}
.main-visual-box{position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 100; box-sizing: border-box; transform: scaleX(1.02) translateX(10rem); will-change: transform; transition: transform .5s; transition-timing-function: cubic-bezier(.55,.09,.68,.53);}

.col-1-1-1-1 .main-visual-box:nth-child(1) {grid-column-start: 1; grid-row-start: 1; grid-row-end: span 2}
.col-1-1-1-1 .main-visual-box:nth-child(2) {grid-column-start: 2; grid-row-start: 1; grid-row-end: span 2}
.col-1-1-1-1 .main-visual-box:nth-child(3) {grid-column-start: 3; grid-row-start: 1; grid-row-end: span 2}
.col-1-1-1-1 .main-visual-box:nth-child(4) {grid-column-start: 4; grid-row-start: 1; grid-row-end: span 2}

.col-2-1-1 .main-visual-box:nth-child(1) {grid-column-start: 1; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 2}
.col-2-1-1 .main-visual-box:nth-child(2) {grid-column-start: 3; grid-row-start: 1; grid-row-end: span 2}
.col-2-1-1 .main-visual-box:nth-child(3) {grid-column-start: 4; grid-row-start: 1; grid-row-end: span 2}

.col-1-1-2 .main-visual-box:nth-child(1) {grid-column-start: 1; grid-row-start: 1; grid-row-end: span 2}
.col-1-1-2 .main-visual-box:nth-child(2) {grid-column-start: 2; grid-row-start: 1; grid-row-end: span 2}
.col-1-1-2 .main-visual-box:nth-child(3) {grid-column-start: 3; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 2}

.col-1-2-1 .main-visual-box:nth-child(1) {grid-column-start: 1; grid-row-start: 1; grid-row-end: span 2}
.col-1-2-1 .main-visual-box:nth-child(2) {grid-column-start: 2; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 2}
.col-1-2-1 .main-visual-box:nth-child(3) {grid-column-start: 4; grid-row-start: 1; grid-row-end: span 2}

.col-2-2 .main-visual-box:nth-child(1) {grid-column-start: 1; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 2}
.col-2-2 .main-visual-box:nth-child(2) {grid-column-start: 3; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 2}

.main-visual-slide.active-item .main-visual-box{gap: max(0.8rem,.325vw); transform: scaleX(1.0) translateX(0);}
.main-visual-slide.swiper-slide-prev .main-visual-box{transform: scaleX(1.0) translateX(0);}
.main-visual-slide.active-item .main-visual-box:nth-child(1) {transition-delay:0.2s;}
.main-visual-slide.active-item .main-visual-box:nth-child(2) {transition-delay:0.4s;}
.main-visual-slide.active-item .main-visual-box:nth-child(3) {transition-delay:0.5s;}
.main-visual-slide.active-item .main-visual-box:nth-child(4) {transition-delay:0.6s;}
.main-visual-slide.active-item .main-visual-box.right .main-visual-img{animation: image-zoom-out 3s 0s forwards;}
.main-visual-slide-m.active-item .main-visual-img,
.main-visual-slide.active-item .main-visual-box.center .main-visual-img{animation: image-zoom-out2 3s 0s forwards;}

@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes image-zoom-out2 {
	from {
		transform: translate(50%, 0) scale(1.12,1.12)
	}
	to {
		transform: translate(50%, 0) scale(1.0,1.0)
	}
}

/* first */
.main-visual-container{transform: scaleX(1.3) translateX(50%); will-change: transform; transition: transform 0.8s; transition-timing-function: ease;}
.index-active .main-visual-container{transform: scaleX(1.0) translateX(0);}
.main-visual-slide.first.active-item .main-visual-box{transform: scaleX(1.02) translateX(10rem); transition: transform 0.5s;}
.index-active .main-visual-slide.first.active-item .main-visual-box{gap: max(1.2rem,.625vw); transform: scaleX(1.0) translateX(0); opacity: 1;}
.index-active .main-visual-slide.first.active-item .main-visual-box:nth-child(1) {transition-delay:0.2s;}
.index-active .main-visual-slide.first.active-item .main-visual-box:nth-child(2) {transition-delay:0.3s;}
.index-active .main-visual-slide.first.active-item .main-visual-box:nth-child(3) {transition-delay:0.4s;}
.index-active .main-visual-slide-m.first.active-item .main-visual-img,
.index-active .main-visual-slide.first.active-item .main-visual-box.right .main-visual-img,
.index-active .main-visual-slide.first.active-item .main-visual-box.center .main-visual-img{animation-delay: 0.8s;}

.main-visual-box a{position: relative; width: 100%; height: 100%; display: block; color: #fff; border: 2px solid rgba(255,255,255,0.1); border-radius: 20px; box-sizing: border-box; overflow: hidden; transition: transform 0.3s; transition-timing-function: cubic-bezier(.55,.09,.68,.53);}

.main-visual-img{position: absolute; top: auto; left: auto; right: 0; height: 78.51%; bottom: 0; object-fit: initial; z-index: 5; max-width: 100%; max-height: 80%;}
.main-visual-box.right .main-visual-img{transform: scale(1.08,1.08);}
.main-visual-slide-m .main-visual-img,
.main-visual-box.center .main-visual-img{height: 56.31%; /*max-height: 50%;*/ right: 50%; transform: translate(50%, 0) scale(1.12,1.12);}

.main-visual-txt{position: relative; padding-top: calc(max(1rem, 0.8334vw) * (45 / 16)); box-sizing: border-box; z-index: 5;}
.main-visual-box.right .main-visual-txt{padding-left: calc(max(1rem, 0.8334vw) * (60 / 16)); padding-right: calc(max(1rem, 0.8334vw) * (60 / 16));}
.main-visual-slide-m .main-visual-txt,
.main-visual-box.center .main-visual-txt{max-width: calc(max(1rem, 0.8334vw) * (455 / 16)); padding-left: calc(max(1rem, 0.8334vw) * (45 / 16)); padding-right: calc(max(1rem, 0.8334vw) * (45 / 16));}

.main-visual-txt .txt01{padding: 0 2rem; font-size: 1.6rem; line-height: 3rem; letter-spacing: -0.025em; font-weight: 700; color: var(--main-color); background-color: #fff; border-radius: 3rem; display: inline-block; transition: background-color 0.3s, color 0.3s;}
.main-visual-txt .txt02{margin-top: 2rem; font-size: 4.2rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: #fff;}
.main-visual-txt .txt03{margin-top: 1rem; font-size: 1.8rem; line-height: 1.5; letter-spacing: -0.05em; font-weight: 600; color: #fff;}
.main-visual-box-m .btn-svg-box .btn-svg,
.main-visual-box .btn-svg-box .btn-svg{bottom: -10rem; left: -20rem; height: 130%; transition: left .3s cubic-bezier(.55,.09,.68,.53) 0s, bottom .3s cubic-bezier(.55,.09,.68,.53) 0s, height .3s cubic-bezier(.55,.09,.68,.53) 0s;}
.main-visual-box.right .btn-svg-box .btn-svg{bottom: -10rem; left: -20rem; height: 170%;}
.main-visual-box.center .btn-svg-box .btn-svg{bottom: -5rem; left: -15rem; height: 120%;}
.main-visual-box-m .btn-svg-box .morph-svg-show,
.main-visual-box .btn-svg-box .morph-svg-show{visibility: hidden !important;}
.main-visual-box-m .btn-svg-box .morph-svg-round,
.main-visual-box .btn-svg-box .morph-svg-round{visibility: visible !important;}

.btn-svg-box{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: block; opacity: 1; transition: opacity .3s cubic-bezier(.55,.09,.68,.53), border-color .3s cubic-bezier(.55,.09,.68,.53);}
.btn-svg-box .btn-svg{position: absolute; bottom: 0; left: 0; height: 100%;}
.btn-svg-box .morph-svg-show{visibility: hidden !important; /* opacity: 0.1; */}
.btn-svg-box .morph-svg-full{display: none;}
.btn-svg-box .morph-svg-round{visibility: visible !important;}
.btn-svg-box .btn-svg path{fill:#f5f5f5;/* fill:var(--main-color); */transition: var(--transition-custom); transition-property:fill;}

.btn-point {position: absolute; bottom: 1rem; left: 1rem; z-index: 2; width: 7.8rem; height: 7.8rem; background-color: var(--main-color); border-radius: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%,50%); transition: transform .2s cubic-bezier(.55,.09,.68,.53) 0s, opacity .2s cubic-bezier(.55,.09,.68,.53) 0s;}
.btn-point i{font-size: 4rem;color: #fff; transform: rotate(-45deg);}

/* 컬러값 변경 */
.main-visual-box.color1 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color1 .btn-svg-box .btn-svg path{fill:var(--slide-color1);}
.main-visual-box.color1 .btn-point,
.main-visual-slide-m.color1 .btn-point{background-color: var(--slide-color1);}
.main-visual-box.color1 .main-visual-txt .txt01,
.main-visual-slide-m.color1 .main-visual-txt .txt01{color: var(--slide-color1);}

.main-visual-box.color2 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color2 .btn-svg-box .btn-svg path{fill:var(--slide-color2);}
.main-visual-box.color2 .btn-point,
.main-visual-slide-m.color2 .btn-point{background-color: var(--slide-color2);}
.main-visual-box.color2 .main-visual-txt .txt01,
.main-visual-slide-m.color2 .main-visual-txt .txt01{color: var(--slide-color2);}

.main-visual-box.color3 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color3 .btn-svg-box .btn-svg path{fill:var(--slide-color3);}
.main-visual-box.color3 .btn-point,
.main-visual-slide-m.color3 .btn-point{background-color: var(--slide-color3);}
.main-visual-box.color3 .main-visual-txt .txt01,
.main-visual-slide-m.color3 .main-visual-txt .txt01{color: var(--slide-color3);}

.main-visual-box.color4 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color4 .btn-svg-box .btn-svg path{fill:var(--slide-color4);}
.main-visual-box.color4 .btn-point,
.main-visual-slide-m.color4 .btn-point{background-color: var(--slide-color4);}
.main-visual-box.color4 .main-visual-txt .txt01,
.main-visual-slide-m.color4 .main-visual-txt .txt01{color: var(--slide-color4);}

.main-visual-box.color5 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color5 .btn-svg-box .btn-svg path{fill:var(--slide-color5);}
.main-visual-box.color5 .btn-point,
.main-visual-slide-m.color5 .btn-point{background-color: var(--slide-color5);}
.main-visual-box.color5 .main-visual-txt .txt01,
.main-visual-slide-m.color5 .main-visual-txt .txt01{color: var(--slide-color5);}

.main-visual-box.color6 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color6 .btn-svg-box .btn-svg path{fill:var(--slide-color6);}
.main-visual-box.color6 .btn-point,
.main-visual-slide-m.color6 .btn-point{background-color: var(--slide-color6);}
.main-visual-box.color6 .main-visual-txt .txt01,
.main-visual-slide-m.color6 .main-visual-txt .txt01{color: var(--slide-color6);}

.main-visual-box.color7 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color7 .btn-svg-box .btn-svg path{fill:var(--slide-color7);}
.main-visual-box.color7 .btn-point,
.main-visual-slide-m.color7 .btn-point{background-color: var(--slide-color7);}
.main-visual-box.color7 .main-visual-txt .txt01,
.main-visual-slide-m.color7 .main-visual-txt .txt01{color: var(--slide-color7);}

.main-visual-box.color8 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color8 .btn-svg-box .btn-svg path{fill:var(--slide-color8);}
.main-visual-box.color8 .btn-point,
.main-visual-slide-m.color8 .btn-point{background-color: var(--slide-color8);}
.main-visual-box.color8 .main-visual-txt .txt01,
.main-visual-slide-m.color8 .main-visual-txt .txt01{color: var(--slide-color8);}

.main-visual-box.color9 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color9 .btn-svg-box .btn-svg path{fill:var(--slide-color9);}
.main-visual-box.color9 .btn-point,
.main-visual-slide-m.color9 .btn-point{background-color: var(--slide-color9);}
.main-visual-box.color9 .main-visual-txt .txt01,
.main-visual-slide-m.color9 .main-visual-txt .txt01{color: var(--slide-color9);}

.main-visual-box.color10 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color10 .btn-svg-box .btn-svg path{fill:var(--slide-color10);}
.main-visual-box.color10 .btn-point,
.main-visual-slide-m.color10 .btn-point{background-color: var(--slide-color10);}
.main-visual-box.color10 .main-visual-txt .txt01,
.main-visual-slide-m.color10 .main-visual-txt .txt01{color: var(--slide-color10);}

.main-visual-box.color11 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color11 .btn-svg-box .btn-svg path{fill:var(--slide-color11);}
.main-visual-box.color11 .btn-point,
.main-visual-slide-m.color11 .btn-point{background-color: var(--slide-color11);}
.main-visual-box.color11 .main-visual-txt .txt01,
.main-visual-slide-m.color11 .main-visual-txt .txt01{color: var(--slide-color11);}

.main-visual-box.color12 .btn-svg-box .btn-svg path,
.main-visual-slide-m.color12 .btn-svg-box .btn-svg path{fill:var(--slide-color12);}
.main-visual-box.color12 .btn-point,
.main-visual-slide-m.color12 .btn-point{background-color: var(--slide-color12);}
.main-visual-box.color12 .main-visual-txt .txt01,
.main-visual-slide-m.color12 .main-visual-txt .txt01{color: var(--slide-color12);}

@media all and ( min-width: 801px ){
	.main-visual-box a:hover{transform: scale(0.98);}
	.main-visual-slide .main-visual-box.right:hover .btn-svg-box .btn-svg{bottom: 0; left: 0; height: 110%;}
	.main-visual-slide .main-visual-box.center:hover .btn-svg-box .btn-svg{bottom: 0; left: 0; height: 110%;}
	.main-visual-slide .main-visual-box.center:hover a,
	.main-visual-slide .main-visual-box.right:hover a{border-color: transparent;}
	.main-visual-slide .main-visual-box.right:hover .btn-point,
	.main-visual-slide .main-visual-box.center:hover .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
}
@media all and ( min-width: 801px ) and ( max-height: 800px ){
	.main-visual-slide .main-visual-box.right:hover .btn-svg-box .btn-svg{height: 130%;}
	.main-visual-slide .main-visual-box.center:hover .btn-svg-box .btn-svg{height: 130%;}
}

@keyframes icon-btn-ani {
	0% {
		transform: scale(1)
	}

	50% {
		transform: scale(1.1)
	}

	70% {
		transform: scale(.98)
	}

	100% {
		transform: scale(1)
	}
}


/* 컨트롤러 */
.main-visual-container-m .main-visual-control-m,
.main-visual-container .main-visual-control {margin-top: 3rem; display: flex; position: relative; justify-content: center; align-items: center;}

.main-visual-container-m .swiper-pagination-bullets,
.main-visual-container .swiper-pagination-bullets {position: relative; width: fit-content; order: 2; bottom: 0 !important;}
.main-visual-container-m .swiper-pagination-bullets .num,
.main-visual-container .swiper-pagination-bullets .num{display: none;}
.main-visual-container-m .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
.main-visual-container .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{position: relative; width: 6rem;}
.main-visual-container-m .swiper-pagination-bullets .progress-bar,
.main-visual-container .swiper-pagination-bullets .progress-bar{position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--main-color); border-radius: 6px; display: block;}

.main-visual-container-m .swiper-pagination-bullets .swiper-pagination-bullet,
.main-visual-container .swiper-pagination-bullets .swiper-pagination-bullet {position: relative; margin: 0 5px; width: 6px; height: 6px; background-color: rgba(0,0,0,0.1); opacity: 1; transition: all .2s ease-out}

@media screen and (hover: hover) {
    .main-visual-container .swiper-pagination-bullets .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover,
	.main-visual-container .swiper-pagination-bullets .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):focus {
		transform:scale(2);
	}
}

.main-visual-container-m .swiper-pagination-bullets .swiper-pagination-bullet-active,
.main-visual-container .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background-color: #ffffff20;
}

.main-visual-container-m,
.main-visual-container {
    --per: 0;
}

.main-visual-container-m .swiper-pagination-bullet-ready,
.main-visual-container-m .swiper-pagination-bullet-active,
.main-visual-container .swiper-pagination-bullet-ready,
.main-visual-container .swiper-pagination-bullet-active {
    position: relative;
    overflow: hidden;
    width: calc(max(1rem, 0.8334vw) * (48 / 16));
    border-radius: calc(max(1rem, 0.8334vw) * (100 / 16));
    background-color: #d4d6db;
}

.main-visual-container-m .swiper-pagination-bullet-active::before,
.main-visual-container .swiper-pagination-bullet-active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
    transform-origin: right;
}

.main-visual-container.is-hold .swiper-pagination-bullet-active::before {
    animation-play-state: paused;
}

@keyframes progress-bar {
    0% {
        transform: scaleX(0)
    }

    100% {
        transform: scaleX(1)
    }
}

/* 검색창 */
.main-search-box{width:100%; height:10rem; padding-left: 2rem; padding-right:32rem; border:2px solid #eee; border-radius: 10rem; position: relative; box-sizing:border-box; display: flex; align-items: center; background-color: #f9f9f9;}	
.main-search-box .icon01{position: relative; width: 9.5rem; font-size: 3.6rem; color:var(--font-color); text-align: center;}
.main-search-box .icon01:before{position: absolute; top: 50%; margin-top: -1rem; right: 0; width: 2px; height: 2rem; background-color: rgba(0,0,0,0.2); content: '';}
.main-search-box .input{text-indent: 2.5rem; padding-right: 1.5rem; width:calc(100% - 10rem); height:10rem; background-color:transparent; border:0; font-size:2.4rem; letter-spacing: -0.025em; font-weight:700; color: var(--font-color); box-sizing: border-box; appearance: none;}
.main-search-box .input::placeholder{color:var(--font-color);}
.main-search-box .input:focus{outline: none;}
.main-search-box .icon02{width: 7rem; display: none;}
.main-search-box .btn{position:absolute; top:0.8rem; right:0.8rem; padding: 0 4.5rem; width:30rem; height:8rem; font-size: 2.4rem; letter-spacing: -0.025em; color: var(--font-color2); font-weight: 500; background-color: #333; border-radius: 8rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
.main-search-box .btn i{font-weight: 400; font-size: 3.6rem;}

@media all and (max-width:1280px){
	.main-visual-container{padding-top: 90px;}

	.main-visual-txt .txt02{margin-top: 2.5rem; font-size: 3.4rem; line-height: 1.3;}
	.main-visual-txt .txt03{margin-top: 1rem; font-size: 1.6rem; line-height: 1.27;}
}
@media all and ( max-width: 800px ){
	#mainVisual{height: auto !important; margin-bottom: 3rem; padding-bottom: 8rem;}
	#mainVisual .area-box{height: auto;}
	.main-visual-container{position: absolute; top: 0; left: -999999px; opacity: 0; visibility: hidden;}

	.main-visual-container-m{position: static; left: 0; opacity: 1; visibility: visible; padding-top: 90px; width: 100%; height: calc(100% - 10rem); height: auto; box-sizing: border-box;}
	#mainVisual .main-visual-wrapper-m{position: relative; height: calc(100% - 16rem); height: 55rem;}

	.main-visual-slide-m .main-visual-img,
	.main-visual-slide-m.center .main-visual-img{right: 42%; height: 50%; bottom: 3%; max-height: 50%;}

	.main-visual-slide-m .main-visual-txt{padding: 5rem 4.5rem 0; max-width: none;}
	.main-visual-slide-m .main-visual-txt br{display: none;}
	.main-visual-txt .txt01{font-size: 1.6rem; line-height: 3rem;}
	.main-visual-txt .txt02{margin-top: 3rem; font-size: 3.4rem; line-height: 1.3;}
	.main-visual-txt .txt03{margin-top: 1rem; font-size: 1.6rem; line-height: 1.27;}

	.main-visual-container-m .main-visual-control-m, .main-visual-container .main-visual-control {margin-top: 4rem;}

	.btn-point {bottom: 1rem; left: 1rem; z-index: 2; width: 7.8rem; height: 7.8rem;}
	.btn-point i{font-size: 4rem;}

	.main-visual-slide-m a{position: relative; width: 100%; height: 100%; display: block; color: #fff; border: 2px solid rgba(255,255,255,0); border-radius: 20px; box-sizing: border-box; overflow: hidden; transition: transform 0.3s; transition-timing-function: cubic-bezier(.55,.09,.68,.53);}
	.main-visual-slide-m .btn-svg-box .btn-svg{bottom: -10rem; left: -20rem; height: 130%;}

	.main-visual-slide-m.active-item a{border-color: transparent;}
	.main-visual-slide-m.active-item .main-visual-box.right .btn-svg-box,
	.main-visual-slide-m.active-item .main-visual-box.center .btn-svg-box{opacity: 1;}
	.main-visual-slide-m.active-item .main-visual-box.right .btn-svg-box .morph-svg-show{visibility: hidden !important;}
	.main-visual-slide-m.active-item .main-visual-box.center .btn-svg-box .morph-svg-round{visibility: visible !important;}
	.main-visual-slide-m.active-item .btn-svg-box .btn-svg{bottom: 0; left: 0; height: 104%; transition: left .3s cubic-bezier(.55,.09,.68,.53) 0s, bottom .3s cubic-bezier(.55,.09,.68,.53) 0s, height .3s cubic-bezier(.55,.09,.68,.53) 0s;}
	.main-visual-slide-m.active-item .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}

	/* 검색창 */
	.main-search-box {margin-top: 5rem; height: 8rem; padding-left: 0; padding-right: 7rem;}
	.main-search-box .icon01 {width: 7rem; font-size: 2.8rem;}
	.main-search-box .icon01:before{margin-top: -1rem; right: 0; width: 2px; height: 2rem;}
	.main-search-box .input {text-indent: 1.5rem; padding-right: 0; width: calc(100% - 8rem); height: 8rem; font-size: 1.8rem;}
	/* .main-search-box .input::placeholder{font-size: 0;} */
	.main-search-box .icon02{margin-left: 1rem; width: 3rem;}
	.main-search-box .icon02 img{height: 1.7rem;}
	.main-search-box .btn {padding: 0; width: 6rem; height: 6rem; font-size: 1.8rem; font-size: 0; justify-content: center;}
	.main-search-box .btn i {font-size: 2.4rem;}
}
@media all and ( max-width: 480px ){
	.main-search-box .input::placeholder{font-size: 1.35rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-text-effect .main-btn-style,
.main-text-effect.cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.animated .main-text-effect .main-btn-style,
.animated .main-text-effect.cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

.main-tit-box{}
.main-tit-box .main-tit{font-size:2.4rem; font-weight:600; letter-spacing: -0.025em; color: var(--font-color); display:block;}
.main-tit-box .main-sub-tit{margin-top:1rem; font-size:6rem; font-weight:700; letter-spacing: -0.05em; color: var(--font-color);}
.main-tit-box .main-btn{margin-top: 2.5rem; position: relative;}
.main-btn-style {width: 30rem; height: 6rem; font-size: 2.2rem; letter-spacing: -0.05em; color: var(--font-color); text-align: center; border-radius: 6rem; border: 1px solid rgba(0,0,0,0.2); box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition:var(--transition-custom); transition-property: background-color, border-color, color;}
.main-btn-style em{position: relative; top: 0.1rem; margin-right: 0.5rem; font-weight: 700;}
.main-btn-style i{position: relative; font-size: 2.4rem; transform: rotate(-45deg); transition:var(--transition-custom); transition-property: transform;}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	.main-tit-box .main-tit{font-size:2.2rem;}
	.main-tit-box .main-sub-tit{margin-top:1rem; font-size:4rem;}
	.main-tit-box .main-btn{margin-top: 2.5rem;}
	.main-btn-style {width: 30rem; height: 6rem; font-size: 2.2rem;}
	.main-btn-style em{margin-right: 0.5rem;}
	.main-btn-style i{font-size: 2.4rem; transform: rotate(-45deg);}
}

@media (hover: hover) and (min-width:801px) {
	.main-btn-style:hover{border-color:var(--main-color); color: #fff;}
	.main-btn-style:hover i{transform: rotate(-45deg) translate(0.5rem,0);}
	/* Over BG */
	.main-btn-style .btn-bg-box{position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; overflow:hidden;}
	.main-btn-style:hover .btn-bg-box::before{transition-duration: .5s; transform: translate3d(-50%, -50%, 0) scale(1.5);}
	.main-btn-style .cm-fill {
		position: absolute;
		display: block;
		width: 0px;
		height: 0px;
		transform: translate(-50%,-50%);
		border-radius: 50%;
		opacity: 0.95;
		background: var(--main-color);
		transition: width 0.7s, height 0.7s;
	}
	.main-btn-style:hover:hover .cm-fill{
		width: 35vw;
		height: 35vw;
	}
}

.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(PR VIDEO) -------- */
#mainPrCon{padding: 13rem 0 14rem; position: relative;}

.main-pr-con{margin-top: 6rem; position: relative; z-index: 1;}
.main-pr-container.swiper-container{overflow: visible;}
.main-pr-container .main-pr-wrapper {transition-timing-function: linear !important;}
.main-pr-wrapper{display: flex;}
.main-pr-item{width: 33.33%;}
.main-pr-item a{width: 100%; height: 65rem; padding: 1rem; border-radius: 2rem; transition:var(--transition-custom); position: relative; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;}
.main-pr-txt{padding: 4rem 4rem 0; position: relative;}
.main-pr-txt .category{padding: 0 1.5rem; font-size: 1.6rem; line-height: 3rem; letter-spacing: -0.025em; font-weight: 700; color: var(--font-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: inline-block; background-color: #fff; border-radius: 3rem;  transition: background-color 0.3s, color 0.3s;}
.main-pr-txt .tit{margin-top: 1.5rem; max-height: 2.74em; font-size: 2.4rem; line-height: 1.37; letter-spacing: -0.025em; font-weight: 600; color: var(--font-color); overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: var(--transition-custom); transition-property:color;}
.main-pr-txt .date{margin-top: 2.5rem; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: var(--font-color); opacity: 0.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: block; transition: var(--transition-custom); transition-property:color;}
.main-pr-img{position: relative; width: 100%; height: 0; padding-top: 61.16%; border-radius: 2rem; overflow: hidden;}
.main-pr-img span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}

.main-pr-item .btn-svg-box{}
.main-pr-item .btn-svg-box .btn-svg{left: auto; right: -20rem; bottom: auto; top: -10rem; height: 140%; transition: right .3s cubic-bezier(.55,.09,.68,.53) 0s, top .3s cubic-bezier(.55,.09,.68,.53) 0s, height .3s cubic-bezier(.55,.09,.68,.53) 0s;}
.main-pr-item .btn-point {bottom: auto; left: auto; top: 1rem; right: 1rem; width: 6rem; height: 6rem; transform: translate(50%,-50%);}
.main-pr-item .btn-point i{font-size: 3.2rem;}


@media all and (min-width:801px){
	.main-pr-item a:hover .btn-svg-box{opacity: 1;}
	.main-pr-item a:hover .btn-svg-box .morph-svg-show{visibility: hidden !important;}
	.main-pr-item a:hover .btn-svg-box .morph-svg-round{visibility: visible !important;}
	.main-pr-item a:hover .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 104%;}
	.main-pr-item a:hover .btn-svg-box .btn-svg path{fill:var(--main-color);}
	.main-pr-item a:hover .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
	.main-pr-item a:hover .main-pr-txt .category{color: var(--main-color);}
	.main-pr-item a:hover .main-pr-txt .tit{color: #fff;}
	.main-pr-item a:hover .main-pr-txt .date{color: #fff;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainPrCon{padding: 5rem 0 7.5rem; }

	.main-pr-con{margin-top: 6rem;}
	.main-pr-wrapper{display: flex;}
	.main-pr-item{width: 100%;}
	.main-pr-item a{height: 52rem; padding: 1rem; border-radius: 2rem;}
	.main-pr-txt{padding: 3rem 2rem 0;}
	.main-pr-txt .category{padding: 0 1.5rem; font-size: 1.6rem; line-height: 3rem; font-size: 1.6rem; border-radius: 3rem;}
	.main-pr-txt .tit{margin-top: 1rem; padding-right: 4rem; max-height: 2.74em; font-size: 2.4rem; line-height: 1.37;}
	.main-pr-txt .date{margin-top: 2rem; font-size: 1.3rem; line-height: 1.3;}

	.main-pr-item .btn-svg-box .btn-svg{left: auto; right: 0;}
	.main-pr-item .btn-point {bottom: auto; left: auto; top: 1rem; right: 1rem; /* width: 4.4rem; height: 4.4rem; */ width: 6rem; height: 6rem; transform: translate(50%,-50%);}
	.main-pr-item .btn-point i{font-size: 2.2rem;}

	.main-pr-item.active-item a{border-color: transparent;}
	.main-pr-item .btn-svg-box,
	.main-pr-item.active-item .btn-svg-box{opacity: 1;}
	.main-pr-item.active-item .btn-svg-box .morph-svg-show{visibility: hidden !important;}
	.main-pr-item .btn-svg-box .morph-svg-round,
	.main-pr-item.active-item .btn-svg-box .morph-svg-round{visibility: visible !important;}
	.main-pr-item .btn-svg-box .btn-svg{height: 130%;}
	.main-pr-item.active-item .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 130%;}
	.main-pr-item.active-item .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
	.main-pr-item.active-item .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
	.main-pr-item.active-item .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Security) -------- */
#mainSecurityCon{padding: 41rem 0 10rem; position: relative;}

.main-security-title{position: absolute; top: -25rem; font-size: 15rem; letter-spacing: -0.025em; font-weight: 900; color: var(--main-color); white-space: nowrap; z-index: -1;}

.main-security-title01,
.main-security-title02{}
.main-security-title01{left: 0; opacity: 0;}
.main-security-title02{margin-left: 16rem; opacity: 0;}

.main-security-con{position: relative; display: flex; flex-wrap:wrap; flex-direction: row-reverse;}

.main-security-left{width: 50%; padding-right: 5rem; box-sizing: border-box; position: relative;}
.main-security-left span{width: 100%; position: relative; display: block;}
.main-security-left span img{max-width: 100%;}
.main-security-left span:before{position: absolute; bottom: -9.4rem; left: -100%; width: calc(100% + 39rem); height: 26rem; border-radius: 26rem; background-color: var(--main-color); content: ''; z-index: -1;}

.main-security-right{padding-top: 12.5rem; width: 50%; position: relative;}
.main-security-list{margin-top: 12rem; max-width: 52.6rem; width: 100%;}
.main-security-item{width: 100%;}
.main-security-item + .main-security-item{margin-top: 1rem;}
.main-security-item a{padding: 0 8.5rem 0 5rem; width: 100%; height: 8rem; font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; color: var(--font-color); display: flex; align-items: center; border: 2px solid #000; border-radius: 8rem; position: relative; box-sizing: border-box; overflow: hidden; transition:var(--transition-custom); transition-property: background-color, border-color, color;}
.main-security-item a i{position: absolute; top: 50%; /* margin-top: -1.8rem; */ right: 4.5rem; font-size: 3.2rem; font-weight: 400; color: var(--font-color);  transform: translateY(-50%) rotate(-45deg); transition:var(--transition-custom); transition-property: transform, color;}
.main-security-item a em{position: relative; top: 0.4rem; font-weight: 700;}
.main-security-item .word {line-height: 1.3 !important;}
.main-security-item a .char{transition-delay:0s !important;}

@media (hover: hover) and (min-width:801px) {
	.main-security-item a:hover{border-color:var(--main-color); color: #fff;}
	.main-security-item a:hover i{transform: rotate(-45deg) translate(0.5rem,0); color: #fff;}
	/* Over BG */
	.main-security-item a .btn-bg-box{position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; overflow:hidden;}
	.main-security-item a:hover .btn-bg-box::before{transition-duration: .5s; transform: translate3d(-50%, -50%, 0) scale(1.5);}
	.main-security-item a .cm-fill {
		position: absolute;
		display: block;
		width: 0px;
		height: 0px;
		transform: translate(-50%,-50%);
		border-radius: 50%;
		opacity: 0.95;
		background: var(--main-color);
		transition: width 0.7s, height 0.7s;
	}
	.main-security-item a:hover:hover .cm-fill{
		width: 35vw;
		height: 35vw;
	}
}
@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainSecurityCon{padding: 5rem 0 13rem;}

	.main-security-title{position: absolute; top: -25rem; font-size: 15rem; visibility: hidden;}
	.main-security-title02{margin-left: 16rem;}

	.main-security-left{margin: 4rem auto 0; width: 100%; padding-right: 0; position: relative; /* max-width: 480px; */}
	.main-security-left span{position: relative; display: block;}
	.main-security-left span img{max-width: none; width: 100%;}
	.main-security-left span:before{bottom: -11.5rem; left: calc(-1 * 100% - 18rem); width: calc(100% + 39rem); height: 26rem; border-radius: 26rem;}

	.main-security-right{padding-top: 0; width: 100%; position: relative;}
	.main-security-list{margin: 5.5rem auto 0; max-width: none; width: 100%; /* max-width: 480px; */}
	.main-security-item{width: 100%;}
	.main-security-item + .main-security-item{margin-top: 1rem;}
	.main-security-item a{padding: 0 5rem 0 4rem; width: 100%; height: 8rem; font-size: 2.4rem; font-size: 2.2rem; line-height: 1.3;}
	.main-security-item a:after{position: absolute; top: 50%; margin-top: -1.8rem; right: 3.5rem; font-size: 3.2rem;}
	.main-security-item a em{position: relative; top: 0.2rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(분야별 적용) -------- */
/* #mainFieldCon{padding: 10rem 0;}

.main-field-con{margin-top: 4rem; position: relative; z-index: 1;}
.main-field-list{margin: 0 -0.2rem; display: flex; flex-wrap:wrap;}
.main-field-item{margin: 0 0.2rem; width: calc(25% - 0.4rem); position: relative; overflow: hidden; border-radius: 1.5rem;}
.main-field-item a{width: 100%; height: 50rem; display: flex; flex-direction: column; justify-content: center; border-radius: 1.5rem; box-sizing: border-box; transition:var(--transition-custom); overflow: hidden;}
.main-field-img{width: 71.64%; margin: 0 auto;}
.main-field-img span{position: relative; width: 100%; height: 0; padding-top: 73.49%; display: block;}
.main-field-txt{padding: 10% 2rem 0; position: relative; text-align: center;}
.main-field-txt h5{font-size: 4rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.main-field-txt p{margin-top: 1rem; font-size: 2rem; line-height: 1.35; letter-spacing: -0.05em; font-weight: 300; color: #fff; opacity: 0.4;}

.main-field-item .btn-svg-box{opacity: 1;}
.main-field-item .btn-svg-box .btn-svg{left: auto; right: 0rem; bottom: auto; top: -10rem; height: 120%; transition: right .3s cubic-bezier(.55,.09,.68,.53) 0s, top .3s cubic-bezier(.55,.09,.68,.53) 0s, height .3s cubic-bezier(.55,.09,.68,.53) 0s;}
.main-field-item:nth-child(1) .btn-svg-box .btn-svg path {fill: #0077bf;}
.main-field-item:nth-child(2) .btn-svg-box .btn-svg path {fill: #5cbc62;}
.main-field-item:nth-child(3) .btn-svg-box .btn-svg path {fill: #fbb938;}
.main-field-item:nth-child(4) .btn-svg-box .btn-svg path {fill: #f89c39;}
.main-field-item .btn-point {bottom: auto; left: auto; top: 0.5rem; right: 0.5rem; width: 6rem; height: 6rem; transform: translate(50%,-50%);}
.main-field-item:nth-child(1) .btn-point {background-color: #0077bf;}
.main-field-item:nth-child(2) .btn-point {background-color: #5cbc62;}
.main-field-item:nth-child(3) .btn-point {background-color: #fbb938;}
.main-field-item:nth-child(4) .btn-point {background-color: #f89c39;}
.main-field-item .btn-point i{font-size: 3.2rem;}

@media all and (min-width:801px){
	.main-field-item a:hover .btn-svg-box{opacity: 1;}
	.main-field-item a:hover .btn-svg-box .morph-svg-show{visibility: hidden !important;}
	.main-field-item a:hover .btn-svg-box .morph-svg-round{visibility: visible !important;}
	.main-field-item a:hover .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 120%;}
	.main-field-item a:hover .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
}
@media all and (max-width:1280px){
	.main-field-txt h5{padding-right: 4rem; font-size: 3rem;}
}
@media all and (max-width:800px){
	#mainFieldCon{padding: 5rem 0 7.5rem;}

	.main-field-con{margin: 5rem auto 0;}
	.main-field-list{margin: -0.2rem; display: flex; flex-wrap:wrap;}
	.main-field-item{margin: 0.2rem; width: calc(50% - 0.4rem);}
	.main-field-item:nth-child(1) {background-color: #0077bf;}
	.main-field-item:nth-child(2) {background-color: #5cbc62;}
	.main-field-item:nth-child(3) {background-color: #fbb938;}
	.main-field-item:nth-child(4) {background-color: #f89c39;}
	.main-field-item a{padding: 4rem 0; width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; border-radius: 1.5rem; box-sizing: border-box; transition:var(--transition-custom); overflow: hidden;}
	.main-field-txt{padding: 2.5rem 2rem 0;}
	.main-field-txt h5{padding-right: 0; font-size: 2.4rem; line-height: 1.3;}
	.main-field-txt p{margin-top: 1rem; font-size: 2rem; line-height: 1.35;}
	.main-field-img{margin-top: 1rem; padding-bottom: 2.5rem;}

	.main-field-item .btn-point {width: 6rem; height: 6rem; transform: translate(50%,-50%);}
	.main-field-item .btn-point i{font-size: 3.2rem;}

	.main-field-item a .btn-svg-box{opacity: 1; display: none;}
	.main-field-item a .btn-svg-box .morph-svg-show{visibility: visible !important;}
	.main-field-item a .btn-svg-box .morph-svg-round{visibility: hidden !important;}
	.main-field-item a .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 104%; height: 150%;}
	.main-field-item a .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s; visibility: hidden;}
} */

#mainFieldCon{padding: 10rem 0;}

.main-field-con{margin-top: 4rem; position: relative; z-index: 1;}
.main-field-list{margin: 0 -0.2rem; display: flex; flex-wrap:wrap;}
.main-field-item{margin: 0 0.2rem; width: calc(25% - 0.4rem); position: relative; overflow: hidden; border-radius: 1.5rem;}
/* .main-field-item a{width: 100%; height: 50rem; display: flex; flex-direction: column; justify-content: center; border-radius: 1.5rem; box-sizing: border-box; transition:var(--transition-custom); overflow: hidden;} */
.main-field-item a{width: 100%; height: 55rem; display: flex; flex-direction: column; justify-content: center; border-radius: 1.5rem; box-sizing: border-box; transition: var(--transition-custom); overflow: hidden;}
/* .main-field-img{width: 71.64%; margin: 0 auto;} */
/* .main-field-img{margin-top: 2rem; padding-bottom: 5.5rem;}
.main-field-img span{position: relative; width: 100%; height: 0; padding-top: 73.49%; display: block;} */
.main-field-img{margin: 4rem auto 0; padding-bottom: 3.5rem; width: 90%; max-width: 28.3rem;}
.main-field-img span{position: relative; width: 100%; height: 0; padding-top: 61.77%; display: block; background-size: contain !important;}
/* .main-field-txt{padding: 10% 2rem 0; position: relative; text-align: center;} */
.main-field-txt {padding: 10% 12.65% 0; position: relative;}
/* .main-field-txt h5{font-size: 4rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.main-field-txt p{margin-top: 1rem; font-size: 2rem; line-height: 1.35; letter-spacing: -0.05em; font-weight: 300; color: #fff; opacity: 0.4;} */
.main-field-txt h5{padding-right: 3rem; font-size: 4rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff;}
.main-field-txt p{margin-top: 1rem; font-size: 2rem; line-height: 1.35; letter-spacing: -0.05em; font-weight: 300; color: #fff; opacity: 0.4;}

.main-field-item .btn-svg-box{opacity: 1;}
.main-field-item .btn-svg-box .btn-svg{left: auto; right: 0rem; bottom: auto; top: -10rem; height: 120%; transition: right .3s cubic-bezier(.55,.09,.68,.53) 0s, top .3s cubic-bezier(.55,.09,.68,.53) 0s, height .3s cubic-bezier(.55,.09,.68,.53) 0s;}
.main-field-item:nth-child(1) .btn-svg-box .btn-svg path {fill: #0077bf;}
.main-field-item:nth-child(2) .btn-svg-box .btn-svg path {fill: #5cbc62;}
.main-field-item:nth-child(3) .btn-svg-box .btn-svg path {fill: #fbb938;}
.main-field-item:nth-child(4) .btn-svg-box .btn-svg path {fill: #f89c39;}
.main-field-item .btn-point {bottom: auto; left: auto; top: 0.5rem; right: 0.5rem; width: 6rem; height: 6rem; transform: translate(50%,-50%);}
.main-field-item:nth-child(1) .btn-point {background-color: #0077bf;}
.main-field-item:nth-child(2) .btn-point {background-color: #5cbc62;}
.main-field-item:nth-child(3) .btn-point {background-color: #fbb938;}
.main-field-item:nth-child(4) .btn-point {background-color: #f89c39;}
.main-field-item .btn-point i{font-size: 3.2rem;}

@media all and (min-width:801px){
	.main-field-item a:hover .btn-svg-box{opacity: 1;}
	.main-field-item a:hover .btn-svg-box .morph-svg-show{visibility: hidden !important;}
	.main-field-item a:hover .btn-svg-box .morph-svg-round{visibility: visible !important;}
	.main-field-item a:hover .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 120%;}
	.main-field-item a:hover .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
}
@media all and (max-width:1280px){
	.main-field-txt h5{padding-right: 4rem; font-size: 3rem;}
}
@media all and (max-width:800px){
	#mainFieldCon{padding: 13rem 0 7.5rem;}

	.main-field-con{margin: 5rem auto 0;}
	.main-field-list{margin: -0.2rem; display: flex; flex-wrap:wrap;}
	.main-field-item{margin: 0.2rem; width: calc(50% - 0.4rem);}
	.main-field-item:nth-child(1) {background-color: #0077bf;}
	.main-field-item:nth-child(2) {background-color: #5cbc62;}
	.main-field-item:nth-child(3) {background-color: #fbb938;}
	.main-field-item:nth-child(4) {background-color: #f89c39;}
	.main-field-item a{width: 100%; height: auto; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; transition:var(--transition-custom);}
	.main-field-txt{padding: 2rem 3rem;}
	.main-field-txt h5{padding-right: 0; font-size: 2.4rem; line-height: 1.3;}
	.main-field-txt p{margin-top: 1rem; font-size: 2rem; line-height: 1.35;}
	.main-field-img{margin-top: 3rem; padding-bottom: 1.5rem;}

	.main-field-item .btn-point {width: 6rem; height: 6rem; transform: translate(50%,-50%);}
	.main-field-item .btn-point i{font-size: 3.2rem;}

	.main-field-item a .btn-svg-box{opacity: 1; display: none;}
	.main-field-item a .btn-svg-box .morph-svg-show{visibility: visible !important;}
	.main-field-item a .btn-svg-box .morph-svg-round{visibility: hidden !important;}
	.main-field-item a .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; /* height: 104%; */ height: 150%;}
	.main-field-item a .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s; visibility: hidden;}
}

/***** 분야별 적용 모달 *****/
.main-apply-modal-content .apply-table-box {overflow-x: auto;}
.main-apply-modal-content .main-apply-table {width: 100%; border-top: 2px solid #000;}
.main-apply-modal-content .main-apply-table th {text-align: center; background-color: #f2f2f2; height: 5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.1); word-break: keep-all;}
.main-apply-modal-content .main-apply-table td {padding: 1.355rem 2.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.4em; color: #666; word-break: keep-all;}
.main-apply-modal-content .main-apply-table td.br {border-right: 1px solid rgba(0, 0, 0, 0.1);}
.main-apply-modal-content .main-apply-table td.center {text-align: center;}
.main-apply-modal-content .main-apply-table td.bgGray {background-color: #f2f2f2;}

@media all and (max-width: 1280px) {
	.main-apply-modal-content .main-apply-table td {padding: 1.355rem 1rem;}
}

@media all and (max-width: 800px) {
	.main-apply-modal-content .main-apply-table th, .main-apply-modal-content .main-apply-table td {font-size: 1.4rem;}
}
/* @media all and (min-width: 801px) {
	.main-apply-modal-content {padding: 4.5rem 6rem 7.5rem 6rem;}
}

.main-apply-modal-content .apply-table-box {overflow-x: auto;}
.main-apply-modal-content .main-apply-table {width: 100%; border-top: 2px solid #000;}
.main-apply-modal-content .main-apply-table th {text-align: center; background-color: #f2f2f2; height: 5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.05em; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.1); word-break: keep-all;}
.main-apply-modal-content .main-apply-table td {padding: 1.355rem 2.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.4em; color: #666; word-break: keep-all;}
.main-apply-modal-content .main-apply-table td.br {border-right: 1px solid rgba(0, 0, 0, 0.1);}
.main-apply-modal-content .main-apply-table td.center {text-align: center;} */

.main-apply-modal-content .tit-box {margin-bottom: 1.2rem;}
.main-apply-modal-content .main-apply-inner-box {border-top: 2px solid #000;}
.main-apply-modal-content .case-pop-list-box {display: flex; align-items: center; padding: 1.22rem 2.3rem; background-color: #f5f5f5; margin-top: 1.7rem;}
.main-apply-modal-content .case-pop-list-box a {display: flex; align-items: center;}
.main-apply-modal-content .case-pop-list-box a em {word-break: break-word; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1.6em; color: #000;}
.main-apply-modal-content .case-pop-list-box a i {padding-right: 1.5rem; font-size: 1.6rem; line-height: 1.6em; font-weight: 400; color: #000;}
.main-apply-modal-content .case-pop-txt {margin-top: 2.4rem; letter-spacing: -0.025em !important; font-size: 1.6rem; font-weight: 500; line-height: 1.62em; color: #666;}

/* @media all and (max-width: 1280px) {
	.main-apply-modal-content .main-apply-table td {padding: 1.355rem 1rem;}
}

@media all and (max-width: 800px) {
	.main-apply-modal-content .main-apply-table th, .main-apply-modal-content .main-apply-table td {font-size: 1.4rem;}
} */

/* -------- 메인 컨텐츠 :: 컨텐츠4(SMARTKEEPER News) -------- */
#mainNewsCon{padding: 10rem 0;}
#mainNewsCon .main-tit-box{text-align: center;}

.main-news-con{margin-top: 5.5rem;}
.main-news-list{}
.main-news-item{width: 100%; position: relative;}
.main-news-item:after{position: absolute; bottom: -2px; left: 0; width: 0; height: 4px; background-color: var(--main-color); content: ''; transition:var(--transition-custom);}
.main-news-item:first-child{border-top: 2px solid rgba(0,0,0,0.1);}
.main-news-item a{width: 100%; padding: 3rem 3.5rem; display: flex; flex-wrap:wrap; align-items: center; box-sizing: border-box; border-bottom: 2px solid rgba(0,0,0,0.1);}
.main-news-item a:after{position: absolute; top:50%; right: 6rem; margin-top: -4.5rem; width: 9rem; height: 9rem; background-color: var(--main-color); border-radius: 100%; font-size: 3.2rem; color: #fff; display: flex; align-items: center; justify-content: center; content: '\e907'; font-family:xeicon !important; transform: scale(0) rotate(-45deg); opacity: 0; transition:var(--transition-custom);}
.main-news-img{width: 36rem; width: 31.85%;}
.main-news-img div{position: relative; width: 100%; height: 0; padding-top: 52.77%; border-radius: 1rem; display: block;}
.main-news-txt{padding-left: 5.75%; padding-right: 12rem; width: 68.15%; box-sizing: border-box;}
.main-news-txt .category{padding: 0 1.5rem; font-size: 1.6rem; line-height: 3rem; letter-spacing: -0.025em; font-weight: 700; color: var(--font-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: inline-block; background-color: rgba(0,0,0,0.10); border-radius: 3rem;  transition: background-color 0.3s; transition: var(--transition-custom);}
.main-news-txt .category .word{line-height: 1; position: relative; top: 0.4rem;}
.main-news-txt .category .word .char{transition-delay:0s !important;}
.main-news-txt .tit{margin-top: 1.5rem; max-height: 2.74em; font-size: 2.8rem; line-height: 1.37; letter-spacing: -0.05em; font-weight: 700; color: var(--font-color); overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-news-txt .date{margin-top: 1rem; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 400; color: var(--font-color); opacity: 0.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: block;}

.main-news-con .main-btn{margin-top: 5rem;}
.main-news-con .main-btn-style{margin: 0 auto;}

.main-news-item:hover .main-news-txt .category {color: var(--font-color2);}

@media all and (min-width:801px){
	.main-news-item:hover:after{width: 100%;}
	.main-news-item:hover a:after{transform: scale(1) rotate(-45deg); opacity: 1;}
	.main-news-item:hover .main-news-txt .category{background-color: var(--main-color);}
}
@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainNewsCon{padding: 5rem 0 7.5rem;}

	.main-news-con{margin: 5.5rem auto 0; /* max-width: 480px; */}
	.main-news-item a{width: 100%; padding: 3rem 0;}
	.main-news-item a:after{display: none;}
	.main-news-img{display: none;}
	.main-news-txt{padding-left: 0; padding-right: 0; width: 100%;}
	.main-news-txt .category{font-size: 1.6rem; line-height: 3rem;}
	.main-news-txt .tit{margin-top: 2rem; max-height: 2.74em; font-size: 2.4rem; line-height: 1.37;}
	.main-news-txt .date{margin-top: 3rem; font-size: 1.8rem; line-height: 1.3;}

	.main-news-con .main-btn{margin-top: 4rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(Customer) -------- */
#mainCustomerCon{padding: 10rem 0 20rem;}

.main-customer-list{margin: 0 -0.25rem; display: flex; flex-wrap:wrap;}
.main-customer-item{margin: 0 0.25rem; width: calc(33.33% - 0.5rem); position: relative; overflow: hidden; border-radius: 1.5rem;}
.main-customer-item a{padding: 10% 11%; width: 100%; height: 50rem; display: flex; flex-direction: column; justify-content: space-between; border-radius: 1.5rem; box-sizing: border-box; transition:var(--transition-custom); overflow: hidden;}
.main-customer-icon{width: 8rem; height: 8rem; font-size: 3rem; color: #fff; background-color: var(--main-color); border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative; transition:var(--transition-custom);}
.main-customer-txt{padding-top: 2rem; position: relative;}
.main-customer-txt h5{font-size: 4rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: var(--font-color); transition:var(--transition-custom); transition-property: color;}
.main-customer-txt p{min-height: 8.1rem; margin-top: 2.5rem; font-size: 2rem; line-height: 1.35; letter-spacing: -0.05em; font-weight: 500; color: var(--font-color); opacity: 0.6; transition:var(--transition-custom); transition-property: color;}

.main-customer-item .btn-svg-box{opacity: 1;}
.main-customer-item .btn-svg-box .btn-svg{left: auto; right: -5rem; bottom: auto; top: -10rem; height: 120%; transition: right .3s cubic-bezier(.55,.09,.68,.53) 0s, top .3s cubic-bezier(.55,.09,.68,.53) 0s, height .3s cubic-bezier(.55,.09,.68,.53) 0s;}
.main-customer-item .btn-svg-box .btn-svg path{fill:#f2f2f2; transition:var(--transition-custom); transition-property: fill;}
.main-customer-item .btn-point {bottom: auto; left: auto; top: 1rem; right: 1rem; width: 6rem; height: 6rem; transform: translate(50%,-50%);}
.main-customer-item .btn-point i{font-size: 3.2rem;}

html[lang="en"] .main-customer-item .btn-svg-box .btn-svg{width: auto; top: -10rem; height: 125%;}

@media all and ( min-width: 801px ){
	.main-customer-item a:hover .main-customer-icon{color: var(--main-color); background-color: #fff;}
	.main-customer-item a:hover .btn-svg-box{opacity: 1;}
	.main-customer-item a:hover .btn-svg-box .morph-svg-show{visibility: hidden !important;}
	.main-customer-item a:hover .btn-svg-box .morph-svg-round{visibility: visible !important;}
	.main-customer-item a:hover .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 104%;}
	.main-customer-item a:hover .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s;}
	.main-customer-item a:hover .btn-svg-box .btn-svg path{fill:var(--main-color);}
	.main-customer-item a:hover .main-customer-txt h5{color: #fff;}
	.main-customer-item a:hover .main-customer-txt p{color: #fff;}

	html[lang="en"] .main-customer-item a:hover .btn-svg-box .btn-svg{bottom: auto; top: 0; height: 104%;}
}

@media all and (max-width:1280px){
	
}
@media all and (max-width:800px){
	#mainCustomerCon{padding: 5rem 0 10rem;}

	.main-customer-list{margin: -0.5rem auto; /* max-width: 480px; */justify-content: space-between;}
	.main-customer-item{margin: 0.5rem 0; width: 100%;}
	.main-customer-item a{padding: 4rem; width: 100%; height: auto; border-radius: 1.5rem;  background-color: #f2f2f2;}
	.main-customer-item a .btn-svg-box{opacity: 1; display: none;}
	.main-customer-item a .btn-svg-box .morph-svg-show{visibility: visible !important;}
	.main-customer-item a .btn-svg-box .morph-svg-round{visibility: hidden !important; opacity: 0.1;}
	.main-customer-item a .btn-svg-box .btn-svg{bottom: auto; top: 0; left: auto; right: 0; height: 150%;}
	.main-customer-item a .btn-point{opacity: 1; transform: translate(0,0); transition: transform .3s cubic-bezier(.55,.09,.68,.53) 0s, opacity .3s cubic-bezier(.55,.09,.68,.53) 0s; visibility: hidden;}
	.main-customer-icon{width: 8rem; height: 8rem; font-size: 2.4rem;}
	.main-customer-txt{padding-top: 4.5rem;}
	.main-customer-txt h5{font-size: 2.8rem; line-height: 1.3;}
	.main-customer-txt p{min-height: auto; margin-top: 2rem; font-size: 2rem; line-height: 1.35;}

	html[lang="en"] .main-customer-item a{height: 45rem;}
}


/* ****************** 메뉴버튼 ********************** */
#mainContainer{position: relative;}
#rightBar{position: fixed; bottom: 40px; right:4.5rem; z-index:99; text-align: right; opacity:0; visibility: hidden; transition:var(--transition-custom); transition-property: opacity, margin-top;}
#rightBar ul li{}
#rightBar ul li + li{margin-top: 1.7rem;}
.to-top-btn,
#rightBar ul li a{position: relative; padding: 0 1.5rem; min-width: 6rem; height: 6rem; font-size: 2.4rem; line-height: 6rem; text-align: center; color: var(--font-color2); background-color: var(--main-color); border-radius: 6rem; white-space: nowrap; display: inline-block; transition:var(--transition-custom); overflow: hidden; box-sizing: border-box;}
#rightBar ul li a img {max-width: 100%;}
#rightBar ul li a i{position: relative; top: 0.2rem;}
#rightBar ul li a em{position: absolute; left: 6rem; padding-left: 0; font-size: 1.8rem; letter-spacing: 0; color: #fff; display: inline-block; vertical-align: middle; opacity: 0; transition:var(--transition-custom);}
/* 메뉴오픈버튼 */
.rightbar-menu-toggle-btn{display: none;}
/* TOP버튼 */
.to-top-btn i{position: relative; top: 0.2rem; font-size: 2.8rem; letter-spacing: -0.025em; color: #fff; transition:var(--transition-custom);}

html[lang="en"] #rightBar ul li a em{left: 6rem;}

#rightBar.fixed{opacity:1.0; visibility: visible;}
#rightBar.abs-bottom{position: absolute; opacity:1.0; visibility: visible; bottom: -7rem; z-index: 99;}

@media all and (min-width:801px){
	#rightBar ul li a:hover{padding: 0 13rem 0 2.5rem; /* width: auto; */}
	#rightBar ul li a:hover em{opacity: 1;}
	.to-top-btn:hover i{transform:translateY(-3px)}
	html[lang="en"] #rightBar ul li a:hover{padding-right: 14rem;}
}

@media all and (max-width:1860px){
	#rightBar{right: calc(var(--area-padding) + 1rem);}
}
/* @media all and (max-width:1280px){
	#rightBar{top:auto; bottom: 15px; margin-top: 0; margin-bottom: -7rem; transition:var(--transition-custom); transition-property: opacity, margin-bottom;}
	#rightBar.fixed{bottom: 15px; margin-bottom: 0; opacity:1.0; visibility: visible;}
	#rightBar.abs-bottom{position: absolute; top: auto; margin-top: 0; opacity:1.0; visibility: visible; bottom: 0;}
} */
@media all and (max-width:800px){
	#rightBar ul li + li{margin-top: 1.5rem;}
	.to-top-btn,
	#rightBar ul li a{width: 6rem; height: 6rem; font-size: 2.4rem; line-height: 6rem;}
	#rightBar ul li a i{top: 0.2rem;}
	#rightBar ul li a em{display: none;}
}