@charset "utf-8";

/* main */

#main{display:flex;}

.m_sec1{width:50%;}
.m_sec2{width:50%; height:100vh;}

.flex_box > .half { width: 48.2%; }

.main_pop > .bg_white { position: relative; width: 100%; height: 100%; border: 1px solid #ccc; border-bottom: 0; overflow: hidden; }
.main_pop > .gray_bg { padding: .5rem; border: 1px solid #ccc; }
.main_pop a { word-break: break-all; }

h3.m_sec_tit { padding-bottom: 2rem; }
h3.m_sec_tit strong { font-size: 2.25rem; color: #000; letter-spacing: -1px; position: relative; }

.small_tit{font-size:48px; font-weight:300;}


.main_visual { width: 100%; height: 100vh; position: relative; }
.main_visual .main_vis_bg { width: 100%;  height: 100vh; right: 0; overflow: hidden; }
.main_visual .main_vis_bg li { position: relative; width: 100%; height: 100%; display: flex; }
.main_visual .main_vis_bg li .inner {position:relative;}
.main_visual .main_title {  position: absolute; z-index: 5; bottom:80px; left:80px; }
.main_visual .main_title h2 { font-size: 80px; line-height:100px;}
.main_visual .main_title .fs18 { margin-top: 1rem; position: relative; }
.main_visual .location{display:flex; margin-top:20px;}
.main_visual .location .small_p{font-size:14px; margin-right:40px; font-weight:200; margin-top:10px;}


.swiper_ctrl {position:absolute; bottom:80px; right:80px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.swiper_ctrl .toggle_btn { margin-left: 0; z-index: 11; }
.swiper_ctrl .toggle_btn button { display: none; position: relative; z-index: 0; }
.swiper_ctrl .toggle_btn .stop{ width: 0.9rem; height: 1.2rem; border-left: #fff 4px solid; border-right: #fff 4px solid; }
.swiper_ctrl .toggle_btn .play{ width: 0.9rem; height: 1.2rem; border-left: #fff 15px solid; border-top: transparent 11px solid; border-bottom: transparent 11px solid; }
.swiper_ctrl .toggle_btn .stop.on,
.swiper_ctrl .toggle_btn .play.on{ display: inline-block; z-index: 5;}
.swiper_ctrl .count { width: auto; z-index: 5; margin-top: 2px; }
.swiper_ctrl .count .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; border-radius: 100px; opacity: 0.5; margin:0 5px;}
.swiper_ctrl .count .swiper-pagination-bullet-active { background: #fff; height: 10px; opacity:1;}

.arrows { position: absolute; z-index: 9; top: 50%; display: block; width: 2rem; height: 2rem; border-top: 4px solid #fff; border-right: 4px solid #fff; }
.arrows.prev{ transform: translateY(-50%) rotate(-135deg); left: -6rem; display:none;}
.arrows.next{ transform: translateY(-50%) rotate(45deg); right: -6rem; }

.main_quick { z-index: 9; margin-top: -13.125rem; } 
.main_quick ul li { flex: 1; height: 13.125rem; background-color: rgba(0, 0, 0, .35); background-repeat: no-repeat; background-position: 50% 35%; position: relative; overflow: hidden; } 
.main_quick ul li::before { opacity: 0; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(120deg, #ce354e, #b10e29); transition: .3s; } 
.main_quick ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 3rem; text-align: center; } 
.main_quick ul li a span { display: block; margin-top: 1.5rem; font-weight: 400; color: #fff; } 
.main_quick ul li:last-child { border-radius: 0 90px 0 0; }
.main_quick ul li:hover::before { opacity: 1; }


h3{font-size:30px; font-weight:500;}
.m_sec2{position:relative;}
.m_sec2 .inner{position:absolute; bottom: 0px; width:calc(100% - 160px); margin-bottom:80px; }
.m_sec2 .notice{background-color:#f2f2f2; border-radius: 20px;  width:50%;  padding:40px 40px 25px; position:relative; height:430px;}
.m_sec2 .notice h3{margin-bottom:20px;}
.m_sec2 .notice p{margin-bottom:8px;}
.m_sec2 .notice > div a p:first-child{text-overflow: ellipsis; overflow: hidden;  display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.8rem;}
.m_sec2 .notice > div a:last-child p{width: 87%;}
.m_sec2 .notice .small_p{margin-bottom:15px; font-size:14px; color:#989898;}
.m_sec2 .notice .small_p::after{content:""; display:block; width:100%; height:1px; border-bottom:2px dotted #ddd; margin-top:15px;}
.m_sec2 .notice > div > a:last-child .small_p::after{display:none;}
.m_sec2 .notice > div > a:hover{background-color:#fff;}
.m_sec2 .notice .notice_btn{display: block ;width:60px; height:60px; border-radius:15px; background-color:#474891; color:#fff; text-align:center; line-height:60px; font-size:30px; font-weight:100; position:absolute; bottom:0; right:0;outline:15px solid #fff;}
.m_sec2 .notice .notice_btn:hover{opacity:0.9; transition:all 0s;}
.m_sec2 .notice > img{position:absolute;}
.m_sec2 .notice .cover1{right:0; bottom:72px;}
.m_sec2 .notice .cover2{right:72px; bottom:0;}

.m_sec2 .top{display:flex; gap:40px;}
.m_sec2 .top .banner{width:50%;}
.m_sec2 .top .banner1, .banner2{background:url(../images/banner1.jpg) no-repeat center; background-size:cover; height:50%; border-radius:20px; margin-bottom:30px; height:204px; color:#fff; display:flex; justify-content:space-between; align-items:center; padding:40px;}
.m_sec2 .top .banner > a:hover{opacity:0.9; transition:all 0s ;}
.m_sec2 .top .banner img{}
.m_sec2 .top .txt{margin-top:50px;}
.m_sec2 .top .txt p{margin-top:5px;}
.m_sec2 .top .banner2{background:url(../images/banner2.jpg) no-repeat center; margin:0; background-size:cover;}

.m_sec2 .bottom div{display:grid; grid-template-columns: repeat(3, 1fr); background-color:#f2f2f2; border-radius:20px; padding:20px 40px; margin-top:30px;}
.m_sec2 .bottom div a{display:flex; align-items:center; height:40px; width:180px; justify-content:space-between; margin:0 auto;}
.m_sec2 .bottom div a:hover .link{opacity:1;}
.m_sec2 .bottom div a:hover{font-weight:500;}
.m_sec2 .bottom div a p{width:60%;}
.m_sec2 .bottom div a .link{opacity:0.3;}



@media screen and (max-width: 1700px) {

	.main_visual .main_title h2{font-size:62px; line-height:70px;}
	.small_tit{font-size:30px;}
	.main_visual .location{display:block;}

	.m_sec2 .notice{width:60%; padding:20px 30px;}
	.m_sec2 .top .banner > a {flex-direction:column-reverse; align-items:flex-start; padding:30px; margin-bottom:20px;}
	.m_sec2 .top .txt{width:100%; margin:0;}
	.m_sec2 .top .banner > a img{width:70px; margin:10px;}
	.m_sec2 .top .banner2 img{width:60px !important;}
	.m_sec2 .top .txt p{margin:0;}
	.m_sec2 .bottom div{margin:0; gap:15px;}
	.m_sec2 .bottom div a{width:150px; height:auto;}
	.m_sec2 .top{gap:20px;}
	.m_sec2 .inner{width:calc(100% - 100px); margin:0 50px; margin-bottom:50px; }
	

}

@media screen and (max-width: 1400px) {
	.m_sec2 .notice > div > a:last-child{}
	.m_sec2 .notice .small_p::after{}
}

@media screen and (max-width: 1280px) {
	.m_sec2 .top{flex-direction:column;}
	.m_sec2 .top .banner{display:flex; width:100%; gap:20px;}
	.m_sec2 .top .banner > a{width:50%; height:150px; flex-direction:row; align-items:center;}
	.m_sec2 .top .banner > a .txt h3{font-size:24px;}
	.m_sec2 .top .txt p{font-size:15px;}
	.m_sec2 .notice{width:100%; height:auto;}
	.m_sec2 .notice h3{font-size:24px; margin-bottom:15px;}
	.m_sec2 .notice p{margin:0;}
	.m_sec2 .notice > div > a:last-child p{padding-right:50px;}
	.m_sec2 .bottom div{gap:5px;}
	.m_sec2 .bottom div a{width:120px;}
	.m_sec2 .bottom div a img{width:15px;}
	.m_sec2 .bottom div a img.link{width:12px;}
	.m_sec2 .top .banner > a img{width:65px;}

	.m_sec2 .notice > div a p:first-child{margin-bottom:0.4rem;}
}

@media screen and (max-width: 1024px) {
	#main{flex-direction:column;}
	#main > section{width:100%;}
	.main_visual .main_vis_bg{height:550px;}
	.main_visual{height: 550px;}
	.main_visual .location{display:flex;}
	.main_visual .location p{font-size:16px; text-align:left;}
	.main_visual .main_title{bottom:50px; left:50px;}
	.swiper_ctrl{bottom:50px; right:50px;}
	.img_box{background-position:50% 30%; }
	.m_sec2{ height:auto;}
	.m_sec2 .inner{position:relative; padding:40px; margin:0; width:100%;}
	
	.flex_box .half { width: 100%; }
	.m_sec2 .left { margin-bottom: 20px; }
	.m_sec2 .right { height: 300px; }
	.m_sec2 .right li.half { width: 49%; }
	.m_sec2 .right li.half + .half { margin: 0; }

	.m_sec2 .left ul p.fs18 { max-width: calc(100% - 60px); }
	.m_sec2 .bottom div{grid-template-columns: repeat(6, 1fr);}
	.m_sec2 .bottom div a{width:auto; gap:10px;}
	.m_sec2 .bottom div a p{width:auto;}
}

@media screen and (max-width: 870px) {
	.m_sec2 .bottom div{grid-template-columns: repeat(3, 1fr);}
	.m_sec2 .bottom div a{max-width:160px; width:90%;}
	.m_sec2 .bottom div a p{width:60%;}
}

@media screen and (max-width: 767px) {
	.main_pop { max-width: 95% !important; max-height: 60vh; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%)!important;}

	.main_visual .main_title { text-align: center; line-height: 1.5; }
	.main_visual .main_vis_btn { left: 50%; transform: translateX(-50%); }
	.swiper_ctrl_wrap { top: auto; bottom: 10%; right: 0; }

	.swiper_ctrl{display:none;}
	.main_visual .main_title{left:50%; bottom:50px; transform:translateX(-50%); width:90%;}
	.main_visual .location .small_p{margin-right:0; text-align:left;}
	.main_visual .main_title h2{font-size:52px;}
	.small_tit{font-size:24px;}
	.main_visual .location{gap:20px; justify-content:center;}
	.m_sec2 .inner{padding:25px;}
	.m_sec2 .top, .m_sec2 .top .banner{gap:15px;}
	.m_sec2 .top .banner > a{margin-bottom:15px;}
}

@media screen and (max-width: 640px) {
	.main_visual .main_title{bottom:30px;}
}

@media screen and (max-width: 480px) {
	.main_visual .main_title{bottom:15px;}
	.main_visual .main_title h2 { font-size: 38px; }
	.small_tit{font-size:16px;}
	.main_visual .location p{font-size:15px; text-align:left;}
	.main_visual .location .small_p{font-size:13px;}
	.main_visual .main_title h2{margin-bottom:100px; line-height:50px;}
	
	h3.m_sec_tit strong { font-size: 26px; }
	h3.m_sec_tit span { display: block; margin:0 !important; }
	.m_sec2 .right li.long { margin-bottom: 10px; }
	.m_sec2 .right li.half { width: 100%; }
	.m_sec2 .right li.half + .half { margin-top: 10px; }
	.m_sec2 .right li i { width: 50px; height: 50px; background-size: 50%; }
	.m_sec2 .right li a { padding-left: 20px; }
	
	.m_sec3 ul li { height: 180px; }
	.m_sec3 ul li a:before {bottom: 60px;}
	.m_sec3 ul li a:after {bottom: 50px;}
	.m_sec2 .inner{padding:15px;}

	.m_sec2 .top .banner > a{flex-direction: column-reverse; padding:10px 0 15px 20px;   align-items: flex-start;    justify-content: flex-start;}
	.m_sec2 .top .banner > a img{width:60px; margin-top:15px;margin-bottom: 5px;}
	.m_sec2 .top .banner2 img{width:50px !important; }

	.m_sec2 .bottom div{grid-template-columns:repeat(2, 1fr);}
	.m_sec2 .bottom div{gap:20px;}
	.m_sec2 .top .banner > a .txt h3{font-size:20px; margin-top:5px;}
	.m_sec2 .top .txt p{font-size:13px; }
}


@media screen and (max-width: 390px) {
	.m_sec2 .right li i { display: none; }
	.m_sec2 .bottom div{gap:15px; padding:20px 25px;}
}