.sec-l-title {
	display: block;
	margin-bottom: 13px;
	font-size: var(--font-m-sec-txt3);
	font-weight: 600;
	color: var(--primary-color);
	letter-spacing: 0.005em;
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .8s ease-in-out, opacity .8s ease-in-out 0.1s;
	transition-delay: .1s;
	word-break: keep-all;
}

.sec-title {
	display: block;
	margin-bottom: 60px;
	font-size: var(--font-m-sec-txt2);
	font-weight: 700;
	line-height: 1.2;
	color: var(--black-color);
	letter-spacing: -0.05em;
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .8s
	ease-in-out, opacity .8s
	ease-in-out 0.1s;
	transition-delay: .3s;
	word-break: keep-all;
}
.sec-title span { color: var(--primary-color); }

.add-animation {
	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	transition: transform .8s ease-in-out, opacity .8s ease-in-out 0.1s;
	transition-delay: .1s;
}

/*/////////////////////////////////////////// sec-1 ///////////////////////////////////////////*/
.sec-1 {
	width: 100%;
	height: 920px;
	overflow: hidden;
}
.sec-1 .swiper-slide {
	width: 100%;
	height: 920px;
}
.sec-1 .swiper-slide .sec-in {
	justify-content: space-between;
	position: relative;
	height: 100%;
}
.sec-1 .left {
	width: 100%;
	position: absolute;
	top: 48%;
	left: 0;
	transform: translateY(-30%);
}
.hidden {
	overflow: hidden;
    display: block;
    vertical-align: top;
}
.sec-1 .left .hidden:last-child {
    /*margin-bottom: -5px;*/
	margin-top:30px;

}

.sec-1 .left h1 strong {
	line-height:1.15;
	letter-spacing: -0.03em;
}

.sec-1 .left .hidden.tlt-s h1 {
	font-size:var(--font-mv-title1);
	font-weight:540;
}

.sec-1 .left .mv-txt {
	margin: 42px 0 30px;
}

.sec-1 .left h1 {
	display: block;
	font-size: var(--font-mv-title2);
	font-weight: 400;
	color: var(--white-color);
	letter-spacing: -0.01em;
	line-height: 1.5;
	transform: translateY(100%);
	opacity: 0;
    visibility: hidden;
	transition: transform 1s ease-in-out, opacity 1s ease-in-out 0.1s;
	transition-delay: 1.5s;
}

.sec-1 .left img {
	opacity: 0;
    visibility: hidden;
	transition: transform 1s ease-in-out, opacity 1s ease-in-out 0.1s;
	transition-delay: 1s;
}
.sec-1 .swiper-slide-active .left img, .sec-1 .swiper-slide-active .left h1, .sec-1 .swiper-slide-active .left h1, .sec-1 .swiper-slide-active .left p {
	transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.sec-1 .left .hidden:last-child h1 {
	transition-delay: 2s;
}
.sec-1 .left h1 span {
	display: block;
	color: var(--white-color);
}
.sec-1 .left p {
	font-size: var(--font-main-sec-title3);
	font-weight: 400;
	color: var(--brown-color);
	letter-spacing: -0.05em;
	line-height: 1.5;
	opacity: 0;
    visibility: hidden;
	transition: transform 1s ease-in-out, opacity 1s ease-in-out 0.1s;
	transition-delay: 2.5s;
	word-break: keep-all;
}
.sec-1 .left p span {
	font-weight: 600;
	color: #ff9900;
}
.sec-1 .right {
	position: relative;
	width: 420px;
	margin-left: auto;
}
.sec-1 .right img {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) scale(1.2);
	opacity: 0;
    visibility: hidden;
	transition: 1s ease-in-out;
	transition-delay: 2.5s;
}
.sec-1 .swiper-slide-active .right img {
	opacity: 1;
    visibility: visible;
	transform: translateX(-50%) scale(1);
}
.sec-1 .paging-box {
	position: relative;
    width: 1480px;
    margin: 0 auto;
	border-right: 1px solid rgb(255, 255, 255, 0.15);
}
.sec-1 .paging-box .pos-r {
	position: absolute;
    bottom: 180px;
    left: 0;
	width: 250px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.sec-1 .custom-pagination-current {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translate(0px, -50%);
	font-size: var(--font-footer);
	color: var(--white-color);
	z-index: 1;
}
.sec-1 .custom-pagination-total {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translate(0px, -50%);
	font-size: var(--font-footer);
	color: var(--white-color);
	z-index: 1;
}
.sec-1 .swiper-progress-bar {
	display: block;
	width: calc(100% - 100px);
	height: 30px;
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 1;
}
.sec-1 .swiper-progress-bar .bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: rgb(255, 255, 255, 0.2);
	clear: both;
	opacity: 0;
	transform: translate(0px, -50%);
}
.sec-1 .swiper-progress-bar .bar:after {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--white-color);
	width: 0;
	height: 100%;
	content: "";
	transition: 0.01s height linear;
}
.sec-1 .swiper-progress-bar.active .bar {opacity: 1;}
.sec-1 .swiper-progress-bar.animate .bar:after {
	width: 100%;
	transition: width linear;
	transition-delay: unset;
	transition-duration: 4s;
}
.sec-1 .swiper-button-prev {
	left: auto !important;
	right: -40px !important;
	color: var(--white-color);
}
.sec-1 .swiper-button-next {
	right: -80px !important;
	color: var(--white-color);
}
.sec-1 .swiper-button-prev:after, .sec-1 .swiper-button-next:after {
	font-size: 20px;
}
.sec-1 .swiper-pagination {
	display: none;
}
/*/////////////////////////////////////////// sec-1 ///////////////////////////////////////////*/


/*/////////////////////////////////////////// sec-2 ///////////////////////////////////////////*/
.sec-2 { background: #fafafa; }
.sec-2 .sec-in {
	padding: 80px 0;
}

.sec-2 .sec-l-title, .sec-2 .sec-title { text-align: center; }
.sec-2 .sec-title span { display: block;   }

.sec-2 .cont-area > ul { display:flex; flex-wrap: wrap; gap: max(24px, 1.3020833333vw); padding-top: 0px; }
.sec-2 .cont-area > ul > li { position: relative; height: max(630px, 24.0885416667vw); cursor: pointer; flex:1; transition: 0.5s ease-in-out; border-radius: 20px; overflow: hidden;  }

.sec-2 .cont-area > ul > li:nth-of-type(1){
	background: url(/img/main/service01.png) center no-repeat;
	background-size: cover;
}
.sec-2 .cont-area > ul > li:nth-of-type(2){
	background: url(/img/main/service02.png) center no-repeat;
	background-size: cover;
}
.sec-2 .cont-area > ul > li:nth-of-type(3){
	background: url(/img/main/service03.png) center no-repeat;
	background-size: cover;
}

/*.sec-2 .cont-area > ul > li:hover { flex: 2.6;  }*/
.sec-2 .cont-area > ul > li:hover:after {
	content: "";
	width: 100%;
	height: 100%;
	/*filter: brightness(75%);*/
	position: absolute;
	z-index: 1;
	background: rgba(26, 40, 117, 0.90);
}

.sec-2 .cont-area > ul > li .text-box {
	width: 100%; text-align: center;
	position: absolute;
	height: 50px;
	bottom: 95px;
	color: #ffffff;
	overflow: hidden;
	transition: height 0.5s;
	z-index: 9;
}
.sec-2 .cont-area > ul > li .text-box .tlt-en { margin-bottom: 10px; font-size: var(--font-medium1); font-weight:600; line-height:1.5; }
.sec-2 .cont-area > ul > li .text-box .tlt { font-size: var(--font-medium2); font-weight:500;}
.sec-2 .cont-area > ul > li:hover .text-box {
	height: 135px;
}
.sec-2 .cont-area > ul > li .text-box p {
	display: block;
	letter-spacing: -0.02em;
	line-height: 1.3333333333;
	word-break: keep-all;
	word-wrap: break-word;
	font-size: var(--font-basic1);
	padding-top:0;
}

.sec-2 .cont-area > ul > li:hover .btn-box{z-index: 999; color: #fff }
.sec-2 .cont-area .btn-box {position: absolute; height: 50px; bottom: 35px; left:50%; transform: translate(-50%);}
.sec-2 .cont-area .btn-box > div{
	position: absolute;
	width: 46px;
	height: 46px;
	border: 1px solid #fff;
	border-radius: 50%;
	left:50%;
	transform: translate(-50%);
	color: #fff;
	transition: all 0.2s ease;
}
.sec-2 .cont-area .btn-box > div:after{
	content: "×";
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	font-size: 34px;
	font-weight: 200;
}
.sec-2 .cont-area .btn-box:hover > div { background:#fff; color: var(--primary-color); }

/*/////////////////////////////////////////// sec-3 ///////////////////////////////////////////*/

#section.sec-3 .sec-in {
	position: relative;
	z-index: 1;
	padding: 130px 0 50px 0;
}

.sec-3 .cont-area {	text-align: center; }

.sec-3 .con2 .text{
	position: relative;
	display: inline;
	margin: 0;
	font-size: var(--font-m-sec-txt2);
	font-weight: 700;
	line-height: 100%;
	margin-bottom: 18px;
	text-align: center;
	word-break: keep-all;

	background: linear-gradient(
			to right,
			#1a2875 50%,
			#e7e7e7 50%
	);

	background-size: 200% 100%;
	background-position-x: 100%;

	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;

	transition: background-size cubic-bezier(.1, .5, .8, 1) 2s;
}

/*

.sec-3 .con2 .text {
	position: relative;
	display: block;
	margin: 0;
	font-size: var(--font-m-sec-txt2);
	font-weight: 700;
	line-height: 100%;
	margin-bottom: 18px;
	text-align: center;
	color: rgb(229, 229, 229, 0.2);
	background: linear-gradient(to right, #1a2875, #1a2875) no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 0%;
	transition: background-size cubic-bezier(.1, .5, .8, 1) 2s;
	word-break: keep-all;
}

 */

.sec-3 .sec-in .sec-title {     margin-bottom: 25px; }

.sec-3 .sec-in .sec-m-title { 
	display: block; 
	margin-top:10px;
	font-size: var(--font-m-sec-txt1);
	font-weight:500; 
	line-height:1.5; 
	color: #333;	
	position: relative;	
	z-index: 2; 
}

.sec-3 .btn-wrap {
	margin-top: 35px;
}

.sec-3 .btn-wrap a {
	border: 1px solid #000;
	color: #000;
	text-align: left;
}
.sec-3 .btn-wrap a:hover {
	background-color: var(--primary-color, #c4242e);
	color: rgb(255, 255, 255);
	border: 1px solid var(--primary-color, #c4242e);
}

.sec-3 .marquee-wrap {
	position: relative;
	width: 100%;
	height: 210px;
}
.sec-3 .marquee {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 370%;
	height: 276px;
	overflow: hidden;
	animation: marquee 18s linear infinite;
}
.sec-3 .marquee .item {
	float: left;
	width: 100%;
	padding-right: 24px;
	line-height: 1;
	font-size: 320px;
	letter-spacing: -5px;
	font-weight: 600;
	color: #f4f4f7;
}
.sec-3 .marquee:after {
	content: "";
	display: block;
	clear: both;
}
@keyframes marquee {
	0% {
		left: 0;
	}
	100% {
		left: -100%;
	}
}


/*/////////////////////////////////////////// sec-3 ///////////////////////////////////////////*/

/*/////////////////////////////////////////// sec-4 ///////////////////////////////////////////*/
#section .sec-in {
	padding: 130px 0;
}

.sec-4 {
	width: 100%;
	background: url("/img/main/sec04-bg.jpg") no-repeat center / cover;
}

.sec-4 .top { text-align: center; }
.sec-4 .sec-l-title, .sec-4 .sec-title { color: var(--white-color); }

.sec-4 .cont-area {margin-top: 10px;}

.sec-4 .contents ul { display:flex; flex-wrap: wrap; gap:30px; justify-content: center; overflow: hidden; }
.sec-4 .contents ul li { width: calc( (100% - 90px) / 4 ); overflow:hidden; position: relative; cursor: pointer; border-radius: 15px; }
.sec-4 .contents ul li img {
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	-moz-transform: scale(1.0);
	-ms-transform: scale(1.0);
	-o-transform: scale(1.0);

	transition: transform 0.5s;
}
.sec-4 .contents ul li:hover img {
	transform: scale(1.2);
	-webkit-transform: scale(1.2); /* 크롬, 사파리 */
	-moz-transform: scale(1.2);  /* 파이어폭스 */
	-ms-transform: scale(1.2); /* IE */
	-o-transform: scale(1.2);  /* 오페라 */

	transition: transform 0.5s;
}

.sec-4 .contents ul li img+img { display:none; }


.sec-4 .contents ul li .txt{
	position: absolute;
	bottom: 0;
	color: #fff;
	z-index: 2;

	padding: 30px;
}

.sec-4 .contents ul li .txt .txt-name { 
	font-size: var(--font-medium); 
	font-weight: 700;
	padding-top: 6px;
}

/*/////////////////////////////////////////// sec-4 ///////////////////////////////////////////*/


/*/////////////////////////////////////////// sec-5 ///////////////////////////////////////////*/
.sec-5 {
	width: 100%;
	/*height: 450px;*/
	padding: 100px 0;
}
#section.sec-5 .sec-in {
	border-radius : 30px;
	padding: 100px 0;
	background: url("/img/main/sec05-bg.jpg") no-repeat center / cover;
}

.sec-5 .top { text-align: center; }

.sec-5 .sec-l-title, .sec-5 .sec-title { color: var(--white-color); }
.sec-5 .sec-title { margin-bottom: 20px;   }
.sec-5 .sec-in .sec-m-title { font-size: var(--font-m-sec-txt1); color: var(--white-color); font-weight:600; padding-top:10px; line-height:1.4; }

.sec-5 .cont-area { margin-top: 40px; }

.sec-5 .btn-wrap { gap: 15px; justify-content: center;}
.sec-5 .btn-wrap a { width: 220px; text-align: left;}
.sec-5 .btn-wrap a:after { background: url(/img/ico_arrow_w.svg) no-repeat; }
.sec-5 .btn-wrap a:first-child { margin-right: 20px; }
.sec-5 .btn-wrap a:hover {
	background-color: var(--primary-color, #c4242e);
	color: rgb(255, 255, 255);
	border: 1px solid var(--primary-color, #c4242e);
}
/*/////////////////////////////////////////// sec-5 ///////////////////////////////////////////*/

.sec-2 .sec-in.on .hidden .sec-l-title,
.sec-2 .sec-in.on .hidden .sec-title,
.sec-2 .sec-in.on .hidden .sec-txt,
.sec-2 .sec-in.on .hidden .add-animation,
.sec-3 .sec-in.on .hidden .sec-title,
.sec-3 .sec-in.on .hidden .sec-l-title,
.sec-3 .sec-in.on .hidden .sec-txt,
.sec-4 .sec-in.on .hidden .sec-title,
.sec-4 .sec-in.on .hidden .sec-l-title,
.sec-4 .sec-in.on .hidden .sec-txt,
.sec-4 .sec-in.on .hidden .add-animation,
.sec-5 .sec-in.on .hidden .sec-title,
.sec-5 .sec-in.on .hidden .sec-l-title,
.sec-5 .sec-in.on .hidden .sec-txt,
.sec-5 .sec-in.on .hidden .add-animation {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.sec-2 .sec-in.on .hidden .sec-txt span, .sec-4 .sec-in.on .hidden .sec-txt span {
	display: block;
}


@media all and (min-width:1921px){
	.sec-1, .sec-1 .swiper-slide {height: 100vh;}
}

@media all and (max-width:1501px){
	.sec-1 .left {top: 40%;}
	.sec-1 .paging-box {width: 90%;}
	.sec-1, .sec-1 .swiper-slide {height: 880px;}
	.sec-1 .right {width: 360px;}

}

@media all and (max-width:1281px){
	.sec-title { margin-bottom: 35px; }
	#section .sec-in {padding: 120px 0;}
	.sec-1, .sec-1 .swiper-slide {height: 800px;}
	.sec-1 .left {top: 45%;}
	.sec-1 .left .mv-txt {margin: 32px 0 20px;}
	.sec-1 .left img {height: 36px;}
	.sec-1 .right {width: 330px;}
	.sec-1 .paging-box .pos-r {bottom: 100px;}
	
	.sec-1 .left .hidden:last-child { margin-top:30px; }

	.sec-2 .cont-area { flex-direction: column; margin-left: initial;}
	.sec-2 .cont-area .left { width:90%; min-width: inherit; margin:0 auto; padding-top:0px; }
	.sec-2 .arrow-wrap { position: relative; margin-top: 30px; margin-bottom: 30px; }
	.sec-2 .cont-area .right { margin-left:5%; }

	.sec-2 .product-item .txt > div { margin-bottom:7px; }
	.sec-2 .product-item .txt > div+div { margin-bottom:17px; }

	#section.sec-3 .sec-in { padding: 120px 0 10px 0; }

	.sec-3 .roll-txt-wrap .swiper-slide span { display: block; }
	.sec-3 .marquee-wrap, .sec-3 .marquee {height: 180px;}
	.sec-3 .marquee .item {	font-size: 205px; }

	.sec-4 .contents ul { gap:20px; }
}

@media all and (max-width:1025px){
	#section .sec-in {padding: 90px 0;}
	.sec-txt {margin-bottom: 34px;}
	.sec-1, .sec-1 .swiper-slide {height: 700px;}
	/*.sec-1 .left {width: calc(100% - 250px); top: 35%;}*/
	.sec-1 .left { top: 40%;}
	.sec-1 .left img {height: 34px;}
	.sec-1 .right {width: 280px;}
	.sec-1 .swiper-button-prev:after, .sec-1 .swiper-button-next:after {font-size: 16px;}
	.sec-1 .paging-box .pos-r {bottom: 130px;}

	.sec-2 .product-item .img {	max-width: 200px; }

	.sec-2 .cont-area > ul { flex-direction: column; }
	.sec-2 .cont-area > ul li { width: 100%; height: 400px; flex: auto; }
	.sec-2 .cont-area > ul > li .text-box { height: auto; left: 35px; bottom: 100px; text-align: center; padding-right:70px; }
	.sec-2 .cont-area > ul > li:hover { flex: auto;  }
	.sec-2 .cont-area > ul > li:hover .text-box { height: auto; }
	.sec-2 .cont-area > ul > li:after {
		content: "";
		width: 100%;
		height: 100%;
		filter: brightness(75%);
		position: absolute;
		z-index: 1;
		background: #0000002e;
	}

	#section.sec-3 .sec-in { padding: 90px 0 5px 0; }

	.sec-4 .contents ul { gap:20px; }
	.sec-4 .contents ul li { width: calc( (100% - 30px) / 2 ); }
	.sec-4 .contents ul li > a > img { display:none; }
	.sec-4 .contents ul li > a > img+img { display:inline-block; }

	.sec-5 { padding: 65px 0; }
	.sec-5 .btn-wrap a { width: 200px;  height: 50px; }

}

@media all and (max-width:768px){
	.sec-1 .left {width: 100%; top: 40%;}
	.sec-1 .left img {height: 30px;}
	.sec-1 .right {width: 220px;}
	.sec-1 .paging-box .pos-r {width: 180px;}
	.sec-1 .swiper-button-prev:after, .sec-1 .swiper-button-next:after {font-size: 14px;}
	.sec-1 .swiper-button-prev {right: -25px !important;}
	.sec-1 .swiper-button-next {right: -50px !important;}
	.sec-1 .custom-pagination-current {font-size: 12px;}
	.sec-1 .left h1 span { display: inherit; }

	.sec-2 .arrow-wrap { margin-top: 25px; margin-bottom: 30px; }
	
	.sec-4 .contents ul li .txt .txt-name { padding-top: 4px; }
	.sec-4 .contents ul li > a > img { height: 150px; }

	.sec-3 { background-position: right ; }
	.sec-3 .marquee-wrap, .sec-3 .marquee {height: 105px;}
	.sec-3 .marquee .item {	font-size: 123px; }
}

@media all and (max-width:641px){
	.sec-title { margin-bottom: 30px; }

	.sec-1 .left {width: 100%; top: 40%; }
	.sec-1 .left img {height: 24px;}
	.sec-1 .left .mv-txt {margin: 26px 0 15px;}

	#section.sec-3 .sec-in { padding: 90px 0 5px 0; }

	.sec-3 .shop-wrap > div:first-child { margin-bottom: 45px; }

	.sec-3 .sec-in .sec-m-title { margin-top:0; }

}

@media all and (max-width:481px){
	.sec-1, .sec-1 .swiper-slide { background-position:70% center !important; }
	.sec-l-title {font-size: 14px;}
	.sec-1 .left h1 {font-size: 34px;}
	.sec-1 .left .mv-txt {margin: 22px 0 15px;}
	.sec-1 .right {width: 200px;}

	.sec-3 { background-position: right ; }
	.sec-3 .marquee-wrap, .sec-3 .marquee {height: 70px;}
	.sec-3 .marquee .item {	font-size: 80px; }

	.sec-4 .contents ul {gap:10px;}
	.sec-4 .contents ul li {width: calc((100% - 10px) / 2);}
	.sec-4 .contents ul li .txt{ padding: 20px; }
	.sec-4 .contents ul li > a > img { height: 120px; }


}