@charset "utf-8";

/* main Visual */
.mainVisual {position: relative; width: 100%; height: 100vh; max-height: 960px; overflow: hidden;}
.mainVisual .mainVisual_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background: url('/images/page/main/mainVisual.jpg') no-repeat 50% bottom; background-size: cover;}

/* main Visual title */
.mainVisual .mainVisual_tit {position: relative; display: table; width: 100%; height: 100%;}
.mainVisual .mainVisual_tit .mainVisual_tit_table {display: table-cell; vertical-align: middle;}
.mainVisual .mainVisual_tit h1 {display: block; font-size: 70px; font-weight: bold; color: #fff; font-family: 'GmarketSans', 'Pretendard'; line-height: 1.1;}
.mainVisual .mainVisual_tit p {font-size: 24px; font-weight: 400; color: rgba(255, 255, 255, .8); line-height: 1.3; margin-top: 60px;}

/* scroll down */
.scroll_down {position: absolute; right: 100px; bottom: 80px; font-size: 1rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0;}
.scroll_down .arr {display: inline-block; position: relative; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); vertical-align: middle; margin-left: 20px; transition: all .3s;}
.scroll_down .arr:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 12px; height: 14px; background: url('/images/page/common/icon_down.png') no-repeat 50% 50%; background-size: 12px auto; transition: all .3s;}
.scroll_down:hover .arr {border-width: 2px; border-color: #fff;}
.scroll_down:hover .arr:after {top: 60%;}


/* section common */
section {position: relative; padding: 160px 0;}
.section_title {position: relative; display: block; margin-bottom: 60px; z-index: 1;}
.section_title > h1 {position: absolute; top: 0; left: 0; font-size: 160px; font-weight: bold; font-family: 'Ubuntu'; opacity: .08; line-height: 1;}
.section_title > h3 {font-size: 50px; font-weight: 700; color: #000; line-height: 1.3; padding-left: 70px; padding-top: 115px;}

/* more arw button */
.more_arw {position: relative; display: inline-block; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6);}
.more_arw:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 15px; height: 15px; background: url('/images/page/common/icon_arw_wh.png') no-repeat 50% 50%; background-size: 15px auto; transition: all .3s;}
.more_arw:hover {background-color: #fff; border-color: #fff;}
.more_arw:hover:after {background-image: url('/images/page/common/icon_arw_red.png');}

.more_arw_btn {text-align: center;}
.more_arw_btn span:not(.more_arw) {display: block; font-size: 18px; font-weight: 400; color: #fff; margin-top: 10px;}

/* more button */
.more_btn {position: relative; display: inline-block; min-width: 200px; height: 60px; line-height: 56px; font-size: 18px; font-weight: 500; color: #fff; background-color: rgba(0, 0, 0, .8); border: 2px solid #000; padding: 0 30px; border-radius: 30px; text-align: left; transition: all .25s;}
.more_btn:before,
.more_btn:after {content: ''; position: absolute; top: 20px; right: 30px; width: 15px; height: 15px; background: no-repeat 50% 50%; background-image: url('/images/page/common/icon_arw_wh.png'); background-size: auto 15px; transition: all .2s;}
.more_btn:after {top: 28px; opacity: 0;}
.more_btn:hover {background-color: rgba(202, 31, 28, .85); border-color: var(--mitc-main);}
.more_btn:hover:before {top: 0; opacity: 0;}
.more_btn:hover:after {top: 20px; opacity: 1;}

/* thumb list */
/* .thumb_list .thumb_item {} */
.thumb_list .thumb_item .img_box {position: relative; width: 100%; height: 0; border-radius: 20px; overflow: hidden; background: no-repeat 50% 50%; background-size: cover;}
.thumb_list .thumb_item .img_box > img {position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: cover;}
.thumb_list .thumb_item .img_box .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: table; background-color: rgba(0, 0, 0, .8); backdrop-filter: blur(5px); z-index: 2; opacity: 0; visibility: hidden; border-radius: 20px; box-shadow: 0 0 0 2px var(--mitc-main) inset; transition: all .25s;}
.thumb_list .thumb_item .img_box .bg .more_arw_btn {display: table-cell; vertical-align: middle;}
.thumb_list .thumb_item .txt_box {padding: 30px 20px;}
.thumb_list .thumb_item .txt_box .tit {height: 2.8em; font-size: 20px; font-weight: 700; line-height: 1.35; color: #000; margin-bottom: 20px;}
.thumb_list .thumb_item .txt_box .date {font-size: 18px; font-weight: 400; color: #777; letter-spacing: 0;}

.thumb_list .thumb_item:hover .img_box .bg {opacity: 1; visibility: visible;}
.thumb_list .thumb_item:hover .txt_box .tit {text-decoration: underline;}

.main_news .news .thumb_list .thumb_item.nodata,
.thumb_list .thumb_item.nodata {width: 100% !important;}

/* section1 */
.main_service {background-color: #000; padding-top: 80px;}
.main_service:after {content: ''; position: absolute; right: -123px; top: 140px; display: block; width: 800px; height: 800px; background: linear-gradient(to bottom, #ca1f1c, transparent, transparent, transparent); border-radius: 50%; opacity: .25; z-index: 0;}
.main_service .section_title > h1 {color: #fff;}
.main_service .section_title > h3 {color: #fff;}

.main_service .service {position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; z-index: 1;}
.main_service .service .item {position: relative; width: calc(50% - 20px); height: 0; background: no-repeat 50% 50%; background-size: cover; border-radius: 40px 40px; overflow: hidden; padding-bottom: 44%;}
.main_service .service .item.item1 {background-image: url('/images/page/main/service_item1.jpg');}
.main_service .service .item.item2 {background-image: url('/images/page/main/service_item2.jpg');}
.main_service .service .item .item_inner {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 60px 60px; transition: all .25s;}
.main_service .service .item.item1 .item_inner {background: linear-gradient(0deg, rgba(202, 31, 28, 1), transparent);}
.main_service .service .item.item2 .item_inner {background: linear-gradient(0deg, rgba(39, 55, 204, 1), transparent);}
.main_service .service .item .tit {display: block; font-size: 44px; font-weight: 700; color: #fff;}
.main_service .service .item .txt {font-size: 20px; font-weight: 500; color: #fff; line-height: 1.4; margin-top: 20px;}
.main_service .service .item .more_arw {position: absolute; bottom: 60px; right: 40px;}

.main_service .service .item:hover .more_arw {background-color: #fff; border-color: #fff;}
.main_service .service .item:hover .more_arw:after {background-image: url('/images/page/common/icon_arw_red.png');}
.main_service .service .item.item2:hover .more_arw:after {background-image: url('/images/page/common/icon_arw_blue.png');}

.main_service .service .item.item1:hover .item_inner {background-color: rgba(202, 31, 28, .5); backdrop-filter: blur(5px);}
.main_service .service .item.item2:hover .item_inner {background-color: rgba(39, 55, 204, .5); backdrop-filter: blur(5px);}


/* section2 */
.main_news {background-color: #fff;}
.main_news .tab {position: absolute; bottom: 0; right: 0;}
.main_news .tab .tab_item {position: relative; display: inline-block; font-size: 18px; font-weight: 500; color: #666; padding-left: 30px; margin-left: 10px;}
.main_news .tab .tab_item:before {content: ''; position: absolute; top: 50%; left: 0; margin-top: -12px; width: 24px; height: 24px; background: var(--mitc-main) url('/images/page/common/icon_check.png') no-repeat 50% 50%; background-size: 12px auto; border-radius: 50%; display: none;}
.main_news .tab .tab_item.active {font-weight: 700; color: var(--mitc-main); margin-left: 30px;}
.main_news .tab .tab_item.active:before {display: block;}
.main_news .tab .more_btn {margin-left: 40px;}

.main_news .tab_content {display: none;}
.main_news .tab_content.active {display: block;}
.main_news .news {overflow: visible !important;}
.main_news .news .thumb_list .thumb_item {width: 570px !important;}
.main_news .news .thumb_list .thumb_item .img_box {padding-bottom: 67%;}

.main_news .news .thumb_ect {display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
.main_news .news .thumb_ect .swiper-scrollbar {display: inline-block; width: 1320px; height: 5px; background-color: #ddd;}
.main_news .news .thumb_ect .swiper-scrollbar-drag {background-color: var(--mitc-main);}
.main_news .news .thumb_ect .thumb_ctrl {display: inline-block; vertical-align: middle;}
.main_news .news .thumb_ect .thumb_ctrl button {position: relative; left: auto; right: auto; display: inline-block; background-color: transparent; width: 60px; height: 60px; background: no-repeat 50% 50%; background-size: 14px auto; border: 1px solid var(--mitc-gray); border-radius: 50%; vertical-align: middle; margin: 0 5px;}
.main_news .news .thumb_ect .thumb_ctrl button.swiper-button-prev {background-image: url('/images/page/common/icon_prev_bk.png');}
.main_news .news .thumb_ect .thumb_ctrl button.swiper-button-next {background-image: url('/images/page/common/icon_next_bk.png');}
.main_news .news .thumb_ect .thumb_ctrl button.swiper-button-prev:after,
.main_news .news .thumb_ect .thumb_ctrl button.swiper-button-next:after {content: none;}

.main_news .news .thumb_ect .thumb_ctrl button:hover {border-color: #000;}
.main_news .news .thumb_ect .thumb_ctrl button:hover:after {border-color: #000;}

.main_news .news .nodata {padding: 40px 20px; border: 2px solid rgba(30, 31, 36, .05); border-radius: 20px;}

/* section3 */
.main_banner {background-color: #f5f5f5; overflow: hidden;}
.main_banner:after {content: ''; position: absolute; top: 0; right: 0; width: 1000px; height: 1080px; background: url('/images/page/main/section3_bg.png') no-repeat 50% 50%; background-size: contain; z-index: 0;}
.main_banner .section_title .more_btn {position: absolute; right: 0; bottom: 0;}
.main_banner .banner {position: relative; z-index: 1;}
.main_banner .banner .thumb_list {display: flex; flex-wrap: wrap; gap: 40px 40px;}
.main_banner .banner .thumb_list .thumb_item {width: calc(25% - 30px);}
.main_banner .banner .thumb_list .thumb_item .img_box {padding-bottom: 100%;}



/* drag cursor */
.cursor {position: fixed; top: 0; left: 0; z-index: 10; pointer-events: none; mix-blend-mode: hard-light;}
.cursor .cont {display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: var(--mitc-main); width: 50px; height: 50px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: all .2s;}
.cursor .cont .arw {display: block; margin-bottom: 10px; width: 12px; height: 12px; background: url('/images/page/common/icon_arw_wh.png') no-repeat 50% 50%; background-size: 12px auto;}
.cursor .cont span {display: block; color: #fff; font-size:16px; font-weight:700; letter-spacing:-0.02em; line-height:1;}
.cursor.on .cont {width: 100px; height: 100px; opacity: 1;}


/* 메인용 팝업 - 멀티_싱글 팝업 */
.main_popup{background:rgba(16, 25, 36, .4);; width:100%; height:100%; position:fixed; top:0; left:0; z-index: 9999; backdrop-filter: blur(5px);}
.ms_popup_wrap{width:fit-content; max-width:calc(100% - 40px); min-width:340px; height:fit-content; max-height:90vh; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; border-radius:15px; overflow:hidden;}
.ms_popup_con{background:#000; display: flex; flex-wrap: wrap; justify-content: space-between;}
.ms_slide img{max-width:100%; max-height:100%;}
.ms_slide{font-size:0;}
.ms_slide a{display:block; width:100%;}

.ms_tab{background:#000; width:calc(100% - 64px); margin:0 auto; order:3;}
.ms_tab ul{display:flex; min-width:100%; width:fit-content !important;}
.ms_tab ul li + li{border-left: 1px solid #333;}
.ms_tab ul li.swiper-slide:only-child{width:100% !important;}
.ms_tab ul li.swiper-slide{width:fit-content !important; min-width:calc(500px / 3); max-width:500px; text-align:center; padding:5px; font-size:0;}
.ms_tab ul li.swiper-slide span{display:inline-block; color:#fff; font-size:15px; opacity: 0.4; cursor: pointer; padding:0 10px;}
.ms_tab ul li.swiper-slide-thumb-active span{opacity:1;}

.ms_remote{display:block; width:32px; height:32px; text-align: center; line-height: 34px; color: #fff;}
.ms_remote.prev{order:2; border-right: 1px solid #333;}
.ms_remote.next{order:4; border-left:1px solid #333;}

.ms_popup_foot{background:#fff; padding:10px; font-size:14px; display:flex; justify-content: space-between; align-items: center;}
.ms_popup_foot .modal_close{border:1px solid #ddd; border-radius:4px; padding:5px 15px;}


/* **************************************** *
 * responsive
 * **************************************** */
@media (max-width: 1600px) {
	/* main Visual */
	.mainVisual .mainVisual_tit h1 {font-size: 60px;}
	.mainVisual .mainVisual_tit p {font-size: 20px;}

	/* scroll down */
	.scroll_down {right: 2%;}

}

@media (max-width: 1440px) {
	/* main Visual */
	.mainVisual .mainVisual_tit h1 {font-size: 55px;}
	.mainVisual .mainVisual_tit p {margin-top: 50px;}

	/* section common */
	.section_title > h1 {font-size: 140px;}
	.section_title > h3 {font-size: 45px; padding-top: 95px;}

}

@media (max-width: 1280px) {
	/* section common */
	section {padding: 120px 0;}
	.section_title {margin-bottom: 40px;}

	/* section1 */
	.main_service .service .item .item_inner {padding: 40px 40px;}
	.main_service .service .item .tit {font-size: 34px;}
	.main_service .service .item .more_arw {bottom: 40px;}

	/* section2 */
	.main_news .tab {position: static; margin-top: 40px; text-align: right;}
	.main_news .news .thumb_list .thumb_item {width: 33.3% !important;}

	.main_news .news .thumb_ect {display: block;}
	.main_news .news .thumb_ect .swiper-scrollbar {width: 100%;}
	.main_news .news .thumb_ect .thumb_ctrl {display: block; text-align: right; margin-top: 20px;}
}

@media (max-width: 1024px) {
	/* main Visual */
	.mainVisual .mainVisual_tit h1 {font-size: 45px; line-height: 1.3;}
	.mainVisual .mainVisual_tit p {font-size: 18px; line-height: 1.5;}

	/* scroll down */
	.scroll_down .arr {width: 50px; height: 50px;}

	/* section common */
	.section_title > h1 {font-size: 120px;}
	.section_title > h3 {font-size: 40px; padding-top: 75px; padding-left: 4%;}

	/* more arw button */
	.more_arw {width: 50px; height: 50px;}
	.more_arw:after {width: 10px; height: 10px; background-size: 10px auto;}

	/* more button */
	.more_btn {min-width: 160px; height: 50px; line-height: 46px; font-size: 1rem; padding: 0 20px;}
	.more_btn:before,
	.more_btn:after {top: 18px; right: 20px; width: 10px; height: 10px; background-size: 10px auto;}

	/* thumb list */
	.thumb_list .thumb_item .txt_box {padding: 15px 10px;}

	/* section2 */
	.main_news .news .thumb_ect .thumb_ctrl button {width: 50px; height: 50px;}

	/* section3 */
	.main_banner .banner .thumb_list .thumb_item {width: calc(50% - 30px);}

	/* 메인용 팝업 - 멀티_싱글 팝업 */
	/*.ms_slide img{width:100% !important; height:fit-content; max-height:calc(100% - 85px);}*/
	.ms_slide img{width:100% !important; height:auto; max-height:100%; object-fit: contain;}
}


@media (max-width: 768px) {
	/* section common */
	section {padding: 100px 0;}
	.section_title > h1 {font-size: 100px;}
	.section_title > h3 {font-size: 34px;}

	/* thumb list */
	.thumb_list .thumb_item .txt_box .tit {font-size: 16px;}
	.thumb_list .thumb_item .txt_box .date {font-size: 1rem;}

	/* section1 */
	.main_service:after {width: 500px; height: 500px;}
	.main_service .service .item {width: 100%; padding-bottom: 85%;}
	.main_service .service .item .tit {font-size: 28px;}
	.main_service .service .item .txt {font-size: 1rem; margin-top: 10px; margin-bottom: 10px;}
	/* .main_service .service .item .more_arw {position: relative; bottom: auto; right: auto; float: right;} */

	/* section2 */
	.main_news .news .thumb_list .thumb_item {width: 50% !important;}

	/* section3 */
	.main_banner:after {content: none;}
	.main_banner .banner .thumb_list {gap: 20px 20px;}
	.main_banner .banner .thumb_list .thumb_item {width: calc(50% - 10px);}

}

@media (max-width: 640px) {
	/* main Visual */
	.mainVisual .mainVisual_tit h1 {font-size: 40px;}
	.mainVisual .mainVisual_tit p {font-size: 1rem; margin-top: 40px;}

}

@media (max-width: 576px) {
	.section_title > h1 {font-size: 70px;}
	.section_title > h3 {font-size: 30px; padding-top: 45px;}

	/* section1 */
	.main_service .service .item .item_inner {padding: 30px 30px;}

	/* section3 */
	.main_banner .section_title .more_btn {position: relative; margin-top: 40px; float: right;}
	.main_banner .banner {clear: both; padding-top: 40px;}

}

@media (max-width: 420px) {
	.mainVisual .mainVisual_tit {text-align: center;}
	.mainVisual .mainVisual_tit h1 {font-size: 34px;}
	.mainVisual .mainVisual_tit p > br {display: none; word-break: keep-all;}

	/* scroll down */
	.scroll_down {left: 50%; right: auto; transform: translateX(-50%);}

	/* section common */
	section {padding: 60px 0;}
	.section_title > h1 {position: relative; font-size: 20px; margin-bottom: 10px; opacity: .2;}
	.section_title > h3 {padding-left: 0; padding-top: 0;}

	/* section1 */
	.main_service {padding-top: 60px;}

	/* section2 */
	/* .main_news .tab {} */
	.main_news .tab .tab_item {font-size: 16px; padding-left: 24px;}
	.main_news .tab .tab_item:before {width: 20px; height: 20px; margin-top: -10px; background-size: 10px auto;}
	.main_news .tab .more_btn {margin-top: 20px; margin-left: 0;}
	.main_news .news .thumb_list .thumb_item {width: 100% !important;}

	/* section3 */
	.main_banner .banner .thumb_list .thumb_item {width: calc(100% - 10px);}
}

@media (max-width: 360px) {
	.mainVisual .mainVisual_tit h1 {font-size: 28px;}

	.section_title > h3 {font-size: 24px;}
}