@charset "utf-8";

/* main */

.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:1rem; }
h3.m_sec_tit strong { font-size: 2.25rem; color: #000; letter-spacing: -1px; position: relative; }

/* m_sec1 */
.m_sec1{background:url(/asset/images/main_bg.jpg) no-repeat; width: 100%; height: 1231px; padding-top: 100px; background-size:cover;}
.m_sec1 .inner{padding-top:8.75rem;}
.m_sec1 .inner .text{}
.m_sec1 .inner .text p{color:#aceeff;}
.m_sec1 .inner .text h1{text-align:center;}
.m_sec1 .inner .quick{}
.m_sec1 .inner .quick .wrap{background-image:url(/asset/images/sec1_bg.jpg); 
background-repeat:no-repeat; background-size: cover; border-radius:20px; width: 19%; height: 282px;  overflow:hidden; transition: all 0.3s; display: flex; align-items: center; justify-content: center; box-shadow:3px 3px 4px rgb(0 0 0 / 28%);}
.m_sec1 .inner .quick .wrap:hover{background-image:url(/asset/images/sec1_0bg.jpg); }
.m_sec1 .inner .quick .wrap a{background-repeat:no-repeat; width: 100%; height: 100%; background-position: 50% 30%; transition: all 0.3s; }
.m_sec1 .inner .quick .wrap:nth-child(1) a{background-image:url(/asset/images/sec1_1.png);}
.m_sec1 .inner .quick .wrap:nth-child(2) a{background-image:url(/asset/images/sec1_2.png);}
.m_sec1 .inner .quick .wrap:nth-child(3) a{background-image:url(/asset/images/sec1_3.png);}
.m_sec1 .inner .quick .wrap:nth-child(4) a{background-image:url(/asset/images/sec1_4.png);}
.m_sec1 .inner .quick .wrap:nth-child(5) a{background-image:url(/asset/images/sec1_5.png);}
.m_sec1 .inner .quick .wrap:nth-child(1):hover a{background-image:url(/asset/images/sec1_01.png);}
.m_sec1 .inner .quick .wrap:nth-child(2):hover a{background-image:url(/asset/images/sec1_02.png);}
.m_sec1 .inner .quick .wrap:nth-child(3):hover a{background-image:url(/asset/images/sec1_03.png);}
.m_sec1 .inner .quick .wrap:nth-child(4):hover a{background-image:url(/asset/images/sec1_04.png);}
.m_sec1 .inner .quick .wrap:nth-child(5):hover a{background-image:url(/asset/images/sec1_05.png);}
.m_sec1 .inner .quick .wrap a p{transition: all 0.3s; text-align: center;}
.m_sec1 .inner .quick .wrap a p:first-child{color:#2599ef; margin-top: 5rem;}
.m_sec1 .inner .quick .wrap a p:last-child{color:#666666; margin-top:0.8rem;}
.m_sec1 .inner .quick .wrap:hover a p{color:#fff;}
.m_sec1 .inner .photo{}
.m_sec1 .inner .photo .left{width:calc(100% - 67.1875%);}
.m_sec1 .inner .photo .left button a{display:block; width: 150px; height: 40px; line-height:40px; text-align:center; background:#fff;}
.m_sec1 .inner .photo .left button a:hover{background:#2e88d2; color:#fff;}




.m_sec1 .inner .photo .right{width: 67.1875%; position:relative;}

/*
.m_sec1 .photo .slide_big { width: 50%; overflow: hidden; }
.m_sec1 .photo .slide_big ul li { width: 100%; padding-bottom: 70%; border: .625rem solid #fff; position: relative; height: fit-content; }
.m_sec1 .photo .swiper-pagination  { position: absolute; left: 0; top: 0; width: fit-content; bottom:auto;}
.m_sec1 .photo .swiper-pagination-bullet  { opacity: 1; background: transparent; border: 1px solid #fff; }
.m_sec1 .photo .swiper-pagination-bullet-active  { background: #fff; }
.m_sec1 .photo .slide_small { width: calc(33.3333% - 10px); }
.m_sec1 .photo .slide_small ul li { width: 100%; padding-bottom: 80%; position: relative; border: .3rem solid #fff; }
*/
.m_sec1 .photo button.arrow { width: 2rem; height: 2rem; background: rgba(255, 255, 255, .2); position: absolute; top: 45%; }
.m_sec1 .photo button.arrow::after { content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%) rotate(45deg); width: .5rem; height: .5rem; border-bottom: 1px solid #fff; border-left: 1px solid #fff; }
.m_sec1 .photo button.prev { left: -75px; }
.m_sec1 .photo button.next { right: -75px; transform: rotate(180deg); }


.m_sec1 .photo .slide_big { width: 50%; overflow: hidden; }
.m_sec1 .photo .slide_big li.img_box { width: 100%; padding-bottom: 6.1%; margin-right: 1.25rem; border: .625rem solid #fff; position: relative; height: fit-content; }
.m_sec1 .photo .slide_small_wrap { width: 48%; padding-top: 30px; position: relative; overflow: hidden; }

.m_sec1 .slide_title li.slick-slide { opacity: 0 !important; }
.m_sec1 .slide_title li.slick-active { opacity: 1 !important; }
.m_sec1 .slide_title li a { color: #fff; line-height:70px;}
.m_sec1 .photo .slide_small { gap: .625rem; margin-bottom: 0; }
.m_sec1 .photo .slide_small li.img_box { margin-right: 1rem; padding-bottom: 6%; position: relative; border: .3rem solid #fff; transform: translateX(calc(-100% - 1rem)); }
.m_sec1 .photo .slick-dots { left: 0; top: -90px; text-align: left; z-index: 99; width: fit-content; height: fit-content; }
.m_sec1 .photo .slick-dots li { width: 9px; height: 9px; margin: 0 3px; border: 1px solid #fff; border-radius: 50%; position: relative; overflow: hidden; }
.m_sec1 .photo .slick-dots li.slick-active { background: #fff; }
.m_sec1 .photo .slick-dots li button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; }



.m_sec1 .inner .photo .right > p{position: absolute; top: 44%; right: 250px;}

/* m_sec2 */
.m_sec2{}
.m_sec2 .inner{justify-content:center;}
.m_sec2 .inner .wrap{align-items:center; justify-content:center; gap:1rem; position:relative; width:30%;}
.m_sec2 .inner .wrap:after{content:''; position:absolute; display:block; background:#f1f1f1; width:1px; height: 7.75rem; left:0;}
.m_sec2 .inner .wrap:nth-child(1):after{display:none;}
.m_sec2 .inner .wrap > p{background-repeat:no-repeat; width:140px; height:124px; transition:all .3s;}
.m_sec2 .inner .wrap:nth-child(1) > p{background-image:url(/asset/images/sec2_1.png);}
.m_sec2 .inner .wrap:nth-child(2) > p{background-image:url(/asset/images/sec2_2.png);}
.m_sec2 .inner .wrap:nth-child(3) > p{background-image:url(/asset/images/sec2_3.png);}
.m_sec2 .inner .wrap:nth-child(1):hover > p{background-image:url(/asset/images/sec2_01.png);}
.m_sec2 .inner .wrap:nth-child(2):hover > p{background-image:url(/asset/images/sec2_02.png);}
.m_sec2 .inner .wrap:nth-child(3):hover > p{background-image:url(/asset/images/sec2_03.png);}
.m_sec2 .inner .wrap .txt{}
.m_sec2 .inner .wrap .txt p:first-child{ color:rgb(8 98 166 / 30%);}
.m_sec2 .inner .wrap .txt p:last-child{}

/* m_sec3 */
.m_sec3{}
.m_sec3 .inner{}
.m_sec3 .inner .left{}
.m_sec3 .inner .left h3{align-items: center;}
.m_sec3 .inner .left h3 p{}
.m_sec3 .inner .left h3 p a{display: block; width: 40px; height: 40px;  border: 1px solid #d5d5d5;  border-radius: 50%; position: relative; transition: all 0.3s;}
.m_sec3 .inner .left h3 p a:after { position: absolute; display: block; content: '+'; left: 14px; top: 5px; color: #2599ef;width: 12px; height: 12px;}
.m_sec3 .inner .left h3 p a:hover{transform:rotate(90deg);}
.m_sec3 .inner .left ul{border-top:2px solid #000;}
.m_sec3 .inner .left ul li{width: 100%;}
.m_sec3 .inner .left ul li a{border-bottom: 1px solid #d3d3d3;width: 100%;height: 76px; line-height: 76px; transition: all .3s; padding:0 0.5rem;}
.m_sec3 .inner .left ul li a:hover{background:#f1f1f1;}
.m_sec3 .inner .left ul li a p:first-child{font-weight:500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:78%;}
.m_sec3 .inner .left ul li a p:first-child em{margin-right:0.3rem;}
.m_sec3 .inner .left ul li a p:last-child{ color:#989898;}
.m_sec3 .inner .right{}
.m_sec3 .inner .right .wrap{background-repeat:no-repeat; background-size:cover; width: 49%; padding:80px 40px 35px; display: flex; flex-flow: column nowrap; justify-content: space-between;}
.m_sec3 .inner .right .wrap:first-child{background-image:url(/asset/images/sec3_1.jpg);}
.m_sec3 .inner .right .wrap:last-child{background-image:url(/asset/images/sec3_2.jpg);}
.m_sec3 .inner .right .wrap .txt{}
.m_sec3 .inner .right .wrap .txt p{}
.m_sec3 .inner .right .wrap button{}
.m_sec3 .inner .right .wrap button a{display:block; border:1px solid #4c8fb2; width: 10rem; height:2.5rem; line-height:2.5rem;}
.m_sec3 .inner .right .wrap button a:hover{background:#4c8fb2; color:#fff !important;}
.m_sec3 .inner .right .wrap:last-child button a{display:block; border:1px solid #ccc;}
.m_sec3 .inner .right .wrap:last-child button a:hover{border:1px solid #fff; background:#fff; color:#cc4c5a !important;}

/* m_sec4 */
.m_sec4{}
.m_sec4 .inner{background:url(/asset/images/sec4_1.jpg) no-repeat; /* height: 172px; */ align-items:end; padding:40px 85px 45px;}
.m_sec4 .inner button a{display:block; border:1px solid #ccc; width: 10rem; height:2.5rem; line-height:2.5rem;}
.m_sec4 .inner button a:hover{background:#fff; color:#000 !important;}

/* m_sec5 */
.m_sec5{}
.m_sec5 .inner{}
.m_sec5 .inner .wrap{width:15.5%;}
.m_sec5 .inner .wrap a{width: 100%; background:#f9f9f9; border-radius:10px; box-shadow:1px 3px 5px rgb(0 0 0 / 18%); height: 66px; position:relative; padding: 0 2.5rem; height: 4.125rem; display: flex; align-items: center; line-height: 1.25rem;}
.m_sec5 .inner .wrap a:after{position:absolute; display:block; content:''; width:14px; height:14px; border-top:2px solid #b8b8b8; border-right:2px solid #b8b8b8; transform:rotate(45deg); top: 40%; right: 2.5rem;}
.m_sec5 .inner .wrap a:hover{color:#fff; background:#0862a6;}
.m_sec5 .inner .wrap a:hover:after{border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg);}
.m_sec5 .inner .wrap a p{width: 75%;}














/*--반응형----------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1450px) {
	.m_sec1 .photo button.arrow {top:48%; z-index: 999999;}
	.m_sec1 .photo button.next {right:0;}
	.m_sec1 .photo button.prev {left:auto; right:2.5rem;}
}

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

}


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

}


@media screen and (max-width: 1024px) {
	.flex_box .half { width: 100%; }

	.m_sec1 {padding-top: 60px; height:67.5rem;  background-size: cover;}
	.m_sec1 .inner .quick .wrap {height: 190px;}
	.m_sec1 .inner .quick .wrap a {background-position: 50% 25%; background-size: 25%;}
	.m_sec1 .inner .quick .wrap a p:first-child {margin-top: 4rem;  font-size: 1.25rem;}
	.m_sec1 .inner .quick .wrap a p:last-child {margin-top: 0.2rem;}	

	.m_sec2 .inner .wrap > p {width: 120px; height: 106px; background-size: contain;}
	
	.m_sec3 .inner {gap: 1rem 0;}
	.m_sec3 .inner .left h3 p a:after {left:calc(50% - 3px); top: 8px;}
	.m_sec3 .inner .left ul li a {height: 60px; line-height: 60px;}
	.m_sec3 .inner .right .wrap {padding: 40px; background-position: 50%}
	.m_sec3 .inner .right .wrap .txt p.fs26 {margin-top: 0 !important;}
	.m_sec3 .inner .right .wrap .txt p.mt20 {margin-top: 0.5rem !important;}
	.m_sec3 .inner .right .wrap button {margin-top: 1rem;}

	.m_sec4 .inner {/* height: 150px; */ padding: 30px 40px 40px;}

	.m_sec5 .inner {gap: 1rem 0;}
	.m_sec5 .inner .wrap {width: 32%;}

}


@media screen and (max-width: 900px) {
	.m_sec2 .inner .wrap > p{width: 100px; height: 88px;}
}


@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;}
	
	.m_sec1 {height:93rem;}
	.m_sec1 .inner .quick {justify-content: center; gap: 1rem;}
	.m_sec1 .inner .quick .wrap {width: 30%;}
	.m_sec1 .inner .photo { flex-flow: column nowrap; gap: 2rem;}
	.m_sec1 .inner .photo .left {width:100%; display:flex; flex-flow:row wrap; align-items:end; justify-content:space-between; gap:1rem;}
	.m_sec1 .inner .photo .left button a {margin-top: 0 !important;}
	.m_sec1 .inner .photo .right {width:100%;}
	.m_sec1 .photo button.arrow {top:40%;}
	.m_sec1 .photo .swiper-pagination {}
	.m_sec1 .photo .slide_title .swiper-slide{top:-2.2rem;}

	.m_sec2 .inner .wrap {flex-flow:column nowrap; text-align:center; width:33.33%;}
	.m_sec2 .inner .wrap:after {/* display:none; */ height:5rem;}

}


@media screen and (max-width: 640px) {
	.m_sec3 .inner .right .wrap {padding: 20px;}
	.m_sec3 .inner .right .wrap .txt p.fs26 {font-size: 1.38rem;}
	.m_sec3 .inner .right .wrap .txt p.mt20 {font-size: 0.95rem;}

	.m_sec4 .inner {/* height: 130px; */ padding:1.875rem; gap:0.5rem;}
	.m_sec4 .inner p:first-child{font-size: 1.875rem;}
	.m_sec4 .inner p:last-child{margin-top:0 !important;}

	.m_sec5 .inner .wrap a:after {width: 10px; height: 10px;}
}


@media screen and (max-width: 480px) {
	h3.m_sec_tit strong { font-size: 26px; }
	h3.m_sec_tit span { display: block; margin:0 !important; }
	
	.m_sec1 {height:85rem;}
	.m_sec1 .inner {padding-top:6rem;}
	.m_sec1 .inner .quick {gap:0.4rem; margin-top:2.5rem;}
	.m_sec1 .inner .quick .wrap {width:32%; height:11rem;}
	.m_sec1 .inner .quick .wrap a p:first-child {margin-top:3rem; font-size:1rem;}
	.m_sec1 .inner .quick .wrap a p:last-child {margin-top:0; font-size:0.875rem;}
	
	.m_sec2 .inner .wrap > p {width:80px; height:70px;}
	.m_sec2 .inner .wrap:after {height:2rem;}

	.m_sec3 .inner .right .wrap button a {width:100%;}

	.m_sec4 .inner button{width: 100%;}
	.m_sec4 .inner button a{width: 100%;}

	.m_sec5 .inner .wrap a {padding: 0 1.3rem;}
	.m_sec5 .inner .wrap a:after {right: 1rem;}
}


@media screen and (max-width: 420px) {
	.m_sec1 {height:100rem;}
	.m_sec1 .inner .photo {margin-top: 5rem; gap:1.5rem;}
	.m_sec1 .photo .slide_big {width:80%;}
	.m_sec1 .photo .slide_small_wrap {width:100%;}
	.m_sec1 .photo button.arrow {top:48%; /* top:auto; bottom:160px; */}
	.m_sec1 .photo .swiper-pagination {top:30px; right:0; left:auto;}
	.m_sec1 .photo .slide_title .swiper-slide {top:0;}
}

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

}