h1, h2, h3, h4, h5, strong, span, p, em, i, li, input, label, textarea, select, a, button, table, div {font-family: "Volvo Centum", "NotoSansCJK", sans-serif; letter-spacing: -0.008em;}


#visual { position: relative; margin: 0px auto 66px; width: 100%; max-width: 1920px; height: calc(100vw * 9/21); max-height: 672px;}
#visual .box-img { width: 100%; height: 100%; position: relative; overflow: hidden; }
#visual .box-img img { position: absolute; height: 100%; width: 100%; object-fit: cover;}
#visual .box-copy { position: absolute; top: 50%; left: 0%; text-align: left; transform: translateY(-50%); padding-inline-start: 5rem; }
#visual .box-copy p { color: #FFF; font-size: 60px; font-weight: 600; line-height: normal; }
#visual .box-copy p span { color: #FFF; font-size: 30px; font-weight: 400; line-height: normal; }
#visual .box-copy a { display: flex; align-items: center; justify-content: center; width: fit-content; padding: 12.5px 24px; margin-top: 1.9em; border-radius: 100px; background: #FFF; color: #141414; font-size: 16px; font-weight: 400; line-height: normal; }
#visual .box-img img.mo {display:none;}

@media (min-width: 1920px) {
	#visual {max-width:100%;}
	#visual .box-img img {position:relative; height:100%; width:100%; object-fit: cover; }
}
@media screen and (min-width: 992px) {
	/* #visual {height: calc(100vw * 9/21);} */
    
}

@media screen and (max-width: 991px) and (min-width: 500px) {
	#visual {height: calc(100vw * 9/16);}
    
   
}
@media (max-width:730px) {
	#visual {margin-bottom: 0;}
    #visual .box-img {height: 100%;}
    #visual .box-img img {transform:scale(1); object-position: 45%;}
}

@media (max-width:500px) {
	#visual {height: 276px;}
	#visual .box-img {height: 100%;}
    #visual .box-img img {position: relative; top: auto; left: auto;}


}

@media (max-width: 480px) {
    #visual { }
}

@keyframes add_text {
	0% { opacity: 0;}
	100% { opacity: 1;}
}


.main section {width: calc(100% - 40px); max-width: 1280px; margin-inline: auto;}
.main section.full {width: 100%; max-width: none;}



/* 비디오 */
.sec_video {padding-top: 50px; margin-bottom: 80px;}
.sec_video .video-container { position: relative; width: 100%; }
.sec_video video { display: block; width:100%; max-width:1280px; margin: 0 auto; aspect-ratio: 259 / 121; object-fit: cover;}

/* 터치 디바이스에서 커스텀 버튼 숨김 */
body.touch-device .sec_video .play-button { display: none; }

.sec_video .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(20, 20, 20, 0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; }
.sec_video .play-button:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(20, 20, 20, 0.5); }
.sec_video .play-button.hidden { opacity: 0; pointer-events: none; }
.sec_video .play-icon,
.sec_video .pause-icon { width: 0; height: 0; transition: all 0.3s ease; }
.sec_video .play-icon { border-left: 25px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; margin-left: 5px; }
.sec_video .pause-icon { width: 30px; height: 30px; display: none; position: relative; }
.sec_video .pause-icon::before,
.sec_video .pause-icon::after { content: ''; position: absolute; width: 8px; height: 30px; background: #fff; }
.sec_video .pause-icon::before { left: 5px; }
.sec_video .pause-icon::after { right: 5px; }
.sec_video .playing .play-icon { display: none; }
.sec_video .playing .pause-icon { display: block; }
.sec_video .video-container:hover .play-button { opacity: 1; }
.sec_video .video-container.playing .play-button { opacity: 0; transition: opacity 0.3s ease; }
.sec_video .video-container.playing:hover .play-button { opacity: 1; }


.sec_new { padding-bottom: 120px;}
.sec_new > p { color: #141414; font-size: 32px; font-weight: 500; line-height: normal; padding-top: 10px; margin-bottom: 30px;}
.sec_new .img_box { width: 100%; margin-bottom: 30px;}
.sec_new .img_box img.m {display: none;}
.sec_new .img_box img {width: 100%;}
.sec_new a.btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 246px; margin-inline: auto; padding: 12px 0; border-radius: 5px; border: 1px solid #284E80; color: #284E80; text-align: center; font-size: 16px; font-weight: 400; line-height: normal; }
.sec_new a.btn em {display: inline-block; width: 14px; aspect-ratio: 1; margin-left: 0.4em; background: url(../image/new/icon_link.svg) no-repeat center / contain; }


.sec_items {}
.sec_items > p { color: #141414; font-size: 32px; font-weight: 500; line-height: normal; }
.sec_items > span { padding-top: 5px; color: #141414; font-family: "Noto Sans KR"; font-size: 22px; font-weight: 300; line-height: normal; }
.sec_items .slide_area {padding-top: 65px;}
.sec_items .swiper {  user-select: none;  width: 100%; padding-bottom: 12px; }
.sec_items .swiper-slide { height: auto; background: #fff; }
.sec_items .card { display: flex; flex-direction: column; height: 100%; border: 1px solid #DDD; background: #FFF; }
.sec_items .card-image {width: 100%; aspect-ratio: 102/127; overflow: hidden; background: #f0f0f0; }
.sec_items .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.sec_items .card:hover .card-image img { transform: scale(1.03); }
.sec_items .card-body { flex: 1; padding: 20px 1em; }
.sec_items .card-title { margin-bottom: 10px; color: #141414; font-size: 16px; font-weight: 500; line-height: 150%; }
.sec_items .card-desc { word-break: keep-all; color: #5E5E5E; font-size: 16px; font-weight: 350; line-height: 150%; }

.sec_items .swiper-nav { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sec_items .swiper-button-prev,
.sec_items .swiper-button-next { position: static !important; width: 40px !important; height: 40px !important; border-radius: 50%; background: #000000; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; margin: 0 !important; }
.sec_items .swiper-button-prev::after {transform: translateX(-1px);}
.sec_items .swiper-button-next::after {transform: translateX(1px);}
.sec_items .swiper-button-prev::after,
.sec_items .swiper-button-next::after { font-size: 15px !important; color: #fff; font-weight: 500; }
.sec_items .swiper-button-prev.swiper-button-disabled,
.sec_items .swiper-button-next.swiper-button-disabled { opacity: 0.2 !important; }

.sec_items .swiper-scrollbar { flex: 1; position: static !important; height: 2px !important; margin-left: 16px; background: rgba(0, 0, 0, 0.10); border-radius: 0; }
.sec_items .swiper-scrollbar-drag { background: #000 !important; border-radius: 0; }
.sec_items .swiper-nav-wrapper { display: flex; align-items: center; gap: 8px; }


.sec_boxtxt {width: calc(100% - 40px); max-width: 1280px; margin-inline: auto; padding-top: 156px;}
.sec_boxtxt img {width: 100%;}
.sec_boxtxt .cont_box { display: flex; align-items: center; column-gap: 70px; background: #FAFAFA; }
.sec_boxtxt .cont_box .img_box {flex: 1 1 50%; width: 100%; max-width: 628px; aspect-ratio: 628 / 478; }
.sec_boxtxt .cont_box .img_box img {height: 100%; object-fit: cover;}
.sec_boxtxt .txt_wrap {flex: 1 1 50%; padding: 20px 1em; word-break: keep-all;}
.sec_boxtxt .txt_wrap > .ti { margin-bottom: 15px; color: #141414; font-size: 32px; font-weight: 500; line-height: normal; }
.sec_boxtxt .txt_wrap > .desc { display: inline-block; color: #5E5E5E; font-size: 16px; font-weight: 300; line-height: 150%; }
.sec_boxtxt .txt_wrap > .desc + .desc { padding-top: 0.5em; }
.sec_boxtxt .txt_wrap > .cap { display: block; margin-top: 15px; margin-bottom: 26px; color: #5E5E5E; font-size: 14px; font-weight: 300; line-height: normal; text-indent: -0.4em; padding-left: 0.4em;}
.sec_boxtxt .txt_wrap > a { display: inline-block; width: 100%; max-width: 246px; padding: 12px 0; border-radius: 5px; border: 1px solid #284E80; color: #284E80; text-align: center; font-size: 16px; font-weight: 400; line-height: normal; }


.sec_gallery { padding-top: 140px; margin-bottom: 160px;}
.sec_gallery .grid_wrap {}
.sec_gallery .grid_wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.sec_gallery .grid_wrap .item.top { aspect-ratio: 623 / 374; }
.sec_gallery .grid_wrap .item.bottom { aspect-ratio: 314 / 233; }
.sec_gallery .grid_wrap .item img { width: 100%; height: 100%; object-fit: cover; }

.sec_bottom {}
.sec_bottom .visual_box { position: relative;}
.sec_bottom .visual_box img {width: 100%;}
.sec_bottom .visual_box .txt_wrap {position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 1280px;}
.sec_bottom .visual_box .txt_wrap strong { display: inline-block;  color: #FFF; font-size: 52px; font-weight: 600; line-height: normal; }
.sec_bottom .visual_box .txt_wrap p { padding-top: 10px; color: #FFF; font-size: 24px; font-weight: 400; line-height: normal; }
.sec_bottom .visual_box .txt_wrap p br {display: none;}
.sec_bottom .visual_box .btn_wrap { padding-top: 2.2em;} 
.sec_bottom .visual_box .btn_wrap a { display: inline-block; padding: 12.5px 24px; border-radius: 100px; background: #FFF; color: #141414; font-size: 16px; font-weight: 400; line-height: normal; }
.sec_bottom .visual_box .btn_wrap a.blue {color: #fff; background: #2A609D;}
.sec_bottom .visual_box .btn_wrap a + a {margin-left: 20px;}


.sec_boxtxt.bottom {padding-top: 108px; padding-bottom: 160px;}
.sec_boxtxt.bottom .cont_box {column-gap: 16px; background-color: transparent;}
.sec_boxtxt.bottom .cont_box .img_box {flex: 1; max-width: 378px; aspect-ratio: 0;}
.sec_boxtxt.bottom .txt_wrap {flex: 1 1 100%; width: 100%; max-width: 45%; padding-inline: 4em; }
.sec_boxtxt.bottom .txt_wrap .desc { color: #141414; font-size: 22px; font-weight: 300; line-height: normal; }
.sec_boxtxt.bottom .txt_wrap .ti { margin-bottom: 1em; }


@media (max-width: 1400px) {
	.sec_bottom .visual_box .txt_wrap {padding-inline-start: 2rem;}

}
@media (max-width: 1200px) {
	#visual .box-copy p { font-size: 50px;}
	#visual .box-copy p span {font-size: 25px;}
	#visual .box-copy a {margin-top: 1.5em;}

	.sec_bottom .visual_box .txt_wrap strong {font-size: 42px;}
	.sec_bottom .visual_box .txt_wrap p {font-size: 20px;}

	.sec_boxtxt.bottom .txt_wrap {padding-inline: 2em;}
	.sec_boxtxt.bottom .txt_wrap .desc {font-size: 20px;}
	.sec_boxtxt.bottom .txt_wrap .ti {font-size: 28px;}
	
}
@media (max-width: 1024px) {
	#visual .box-copy {padding-inline-start: 2rem;}

	#visual .box-copy p { font-size: 40px;}
	#visual .box-copy p span {font-size: 20px;}
	#visual .box-copy a { font-size: 15px;}

	.sec_new > p {font-size: 26px;}

	.sec_items > p {font-size: 26px;}
	.sec_items > span {font-size: 20px;}

	
	.sec_boxtxt .cont_box {column-gap: 40px;}
	.sec_boxtxt .cont_box .img_box {height: stretch;}
	.sec_boxtxt .txt_wrap > .ti {font-size: 28px;}
	.sec_boxtxt .txt_wrap > .desc br {display: none;}

	.sec_bottom .visual_box {height: 350px;}
	.sec_bottom .visual_box img {height: 100%; object-fit: cover;}
	.sec_bottom .visual_box .txt_wrap p br {display: block;}
 

}
@media (max-width: 768px) {
	#visual .box-copy p { font-size: 30px;}
	#visual .box-copy p span {font-size: 17px;}
	#visual .box-copy a {padding: 10px 20px;}
	
	.main section.sec_video {width: 100%; margin-bottom: 50px;}

	.sec_new a.btn {max-width: 180px; font-size: 15px; padding: 10px 0;}
	
	.sec_boxtxt {padding-top: 80px;}
	.sec_boxtxt .cont_box {column-gap: 20px;}
	.sec_boxtxt .txt_wrap > .desc {font-size: 16px;}
	.sec_boxtxt .txt_wrap > a {max-width: 180px; font-size: 15px; padding: 10px 0;}
	.sec_boxtxt .txt_wrap > .cap {margin-top: 10px; margin-bottom: 20px;}

	.sec_gallery {padding-top: 80px; margin-bottom: 100px;}

	.sec_bottom .visual_box .txt_wrap {padding-inline-start: 1rem;}
	.sec_bottom .visual_box .txt_wrap strong {font-size: 36px;}
	.sec_bottom .visual_box .btn_wrap {padding-top: 20px;}
	.sec_bottom .visual_box .btn_wrap a + a {margin-left: 10px;}

	.sec_boxtxt.bottom {padding-top: 50px; padding-bottom: 80px;}
	.sec_boxtxt.bottom .cont_box {flex-wrap: wrap;}
	.sec_boxtxt.bottom .txt_wrap { padding: 3em 0; max-width: 100%; text-align: center;}
	
	
}

@media (max-width: 700px) {
	.sec_boxtxt .cont_box {flex-wrap: wrap;}
	.sec_boxtxt .cont_box .img_box {flex: 1 1 100%; max-width: 100%;}

	.sec_bottom .visual_box .txt_wrap strong {font-size: 30px;}
	.sec_bottom .visual_box .txt_wrap p {font-size: 16px;}
	.sec_bottom .visual_box .btn_wrap a {font-size: 15px; padding: 10px 18px;}

}

@media (max-width: 500px) {
	#visual .box-copy {padding-inline-start: 1.5rem;}
	#visual .box-copy p { font-size: 25px;}
	#visual .box-copy p span {font-size: 16px;}
	#visual .box-copy a { padding: 8px 18px; margin-top: 1em;}

	.sec_new {padding-bottom: 80px;}
	.sec_new > p {font-size: 22px; margin-bottom: 20px;}
	.sec_new .img_box img.pc {display: none;}
	.sec_new .img_box img.m {display: block;}

	.main section.sec_items {width: 100%;}

	.sec_items .slide_area {padding-top: 30px;}
	.sec_items .card-image {aspect-ratio: 102 / 105;}
	.sec_items > p {font-size: 22px; padding-inline: 20px;}
	.sec_items > span {font-size: 18px; padding-inline: 20px;}
	.sec_items .swiper-nav-wrapper {width: calc(100% - 40px); margin-inline: auto;}

	.sec_items .swiper-button-prev, .sec_items .swiper-button-next {width: 35px !important; height: 35px !important;}
	.sec_items .swiper-scrollbar {margin-left: 8px;}

	.sec_boxtxt .txt_wrap > .ti {font-size: 25px;}


	.main section.sec_gallery {width: 100%;}
	.sec_gallery {padding-top: 50px;}
	.sec_gallery .grid_wrap { gap: 8px;}
	.sec_gallery .grid_wrap .item.top {aspect-ratio: 314 / 260;}
	.sec_gallery .grid_wrap .item.bottom {aspect-ratio: 314 / 260;}

	.sec_bottom .visual_box img {object-position: 65%;}
	.sec_bottom .visual_box .txt_wrap {top: 10%;}
	.sec_bottom .visual_box .txt_wrap strong {font-size: 22px;}
	.sec_bottom .visual_box .btn_wrap {padding-top: 15px;}
	.sec_bottom .visual_box .btn_wrap a {font-size: 14px; padding: 8px 16px;}
	.sec_bottom .visual_box .btn_wrap a + a {margin-left: 6px;}

	.sec_boxtxt.bottom {padding-bottom: 50px;}
	.sec_boxtxt.bottom .cont_box {column-gap: 10px;}
	.sec_boxtxt.bottom .txt_wrap {padding: 2em 0;}
	.sec_boxtxt.bottom .txt_wrap .desc {font-size: 18px; margin-bottom: 5px;}
	.sec_boxtxt.bottom .txt_wrap .ti {font-size: 24px;}
	
	
}
@media (max-width: 400px) {
	#visual .box-copy {top: 35%;}

	.sec_items > p {font-size: 20px; word-break: keep-all;}
}