@charset "utf-8"; /* ******************* *
* 공통
* ******************* */
.msec-title { margin-bottom: 30px; } 
.msec-title > .title { color: #000; font-size: 2.0em; font-weight: 500; } 

@media all and (max-width: 768px){
 .msec { margin-bottom: 80px; } 
 .msec-title { margin-bottom: 15px; } 
 }

#container { margin-top:0 } 
/* ******************* *
* main_slide_banner
* ******************* */
 .main_slide_banner { height:550px; } 
 .main_slide_banner .mySwiper { height:100% } 
 .main_slide_banner .mySwiper .swiper-wrapper { } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide { height:100%; background: url(../img/main/banner01.png) no-repeat center center /cover; } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div { display: flex; flex-direction: column; align-items: flex-start; padding-top: 100px; } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div > span { font-size: 1em; color: #Ffff; background: var(--color-main); padding: 10px 30px; display: flex; align-items: center; justify-content: center; border-radius: 30px; } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div > h2 { font-size: 2.7em; line-height: 1.2; margin: 30px 0 15px; } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div > h2 span { } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div > h2 span:nth-child(1) { font-weight: 400; } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div > h2 span:nth-child(2) { color: var(--color-main); font-weight: 700; } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div > p { font-size: .9em; line-height: 1.5; color: #313131; } 
 .main_slide_banner .mySwiper .swiper-wrapper .swiper-slide > div > p span { } 


/* ******************* *
* msec01
* ******************* */
.msec01 { border-bottom:1px solid #D9D9D9 } 
.msec01 ul { display: flex; justify-content: space-between; } 
.msec01 ul li { width: calc(100% / 3); display: flex; align-items: center; justify-content: center; gap: 20px; padding: 40px 0; position:relative } 
.msec01 ul li:before { position:absolute; content:''; background: #D9D9D9; width:1px; height:50px; right:0; top:50%; transform: translateY(-50%); } 
.msec01 ul li:last-child:before { display:none } 
.msec01 ul li .img_wrap { } 
.msec01 ul li .img_wrap img { max-width:80px } 
.msec01 ul li .txt_wrap { } 
.msec01 ul li .txt_wrap h3 { font-size: 1.1em; } 
.msec01 ul li .txt_wrap span { font-size: .8em; color: #898989; } 


/* ******************* *
* msec02
* ******************* */
.msec02 { padding:60px 0; position:relative; } 
.msec02 .swiper-slide .txt_wrap { display: flex; flex-direction: column; align-items: center; padding-top: 15px; } 
.msec02 .swiper-slide .txt_wrap span { font-size: 16px; color: #666; } 
.msec02 .swiper-slide .txt_wrap p { font-size: 1.1em; color: #000; font-weight: 500; } 
.msec02 .swiper-pagination-bullet { background: #D9D9D9 !important; opacity: 1; } 
.msec02 .swiper-pagination-bullet-active { background: #2D3386 !important; } 
/* .msec02 .swiper { padding-bottom:50px } */
.msec02 .swiper-pagination { bottom:0 !important; top:unset!important } 
.swiper-button-next, .swiper-button-prev { height:auto!important } 
.swiper-button-prev:after { content:""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-left: 4px solid #fff; border-bottom: 4px solid #fff; transform: translate(-50%, -50%) rotate(45deg); box-sizing: border-box; } 
.swiper-button-next:after { content:""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-left: 4px solid #fff; border-bottom: 4px solid #fff; transform: translate(-50%, -50%) rotate(225deg); box-sizing: border-box; } 



/* ******************* *
* msec03
* ******************* */
.msec03 { padding:100px 0 } 
.msec03 .msec-title { text-align:center } 
.msec03 ul { display: flex; align-items: center; justify-content: space-between; gap:20px } 
.msec03 ul li a { display: flex; flex-direction: column; align-items: center; gap: 20px; } 
.msec03 ul li .img_wrap { } 
.msec03 ul li .img_wrap img { } 
.msec03 ul li .txt_wrap { } 
.msec03 ul li .txt_wrap h3 { font-size: 1.1em; } 
.msec03 ul li .txt_wrap span { } 



/* ******************* *
* msec04
* ******************* */
.msec04 { } 
.msec04 .cinner { display: flex; } 
.msec04 .msec04_list { background:url(../img/main/sec04_img01.png)no-repeat center center/cover ; width:50%;aspect-ratio: 700/270;position:relative} 
.msec04 .msec04_list:last-child {background:url(../img/main/sec04_img02.png)no-repeat center center/cover}
.msec04 .msec04_list a img { } 
.msec04 .msec04_list a div { position: absolute; left: 70px; top: 50%; transform: translateY(-50%); } 
 .msec04 .msec04_list:last-child a div { left:unset; right:50px } 
.msec04 .msec04_list a div h3 { font-size: 1.5em; font-weight: 600; color: #1A1462; margin-bottom: 10px; } 
.msec04 .msec04_list a div p { color: #333; font-size: .9em; line-height: 1.6; } 
.msec04 .msec04_list a div p span { } 



/* ******************* *
* msec05
* ******************* */
.msec05 { padding-top:100px } 
.msec05 .cinner { display: flex; justify-content: space-between; align-items: center; background: #f4f7fa; border-radius: 20px; padding: 50px 50px; } 
.msec05 .cinner > div:nth-child(1) { padding-left:100px; position:relative } 
.msec05 .cinner > div:nth-child(1) h3 { font-size: 1.25em; } 
.msec05 .cinner > div:nth-child(1) span { color:#4C4C4C; font-size:.9em } 
.msec05 .cinner > div:nth-child(1):before { content:''; position:absolute; left:0; top:50%; transform: translateY(-50%); background: url(../img/main/sec05_img01.png)no-repeat center center; width:80px; aspect-ratio: 1/1; } 
.msec05 .cinner > div:nth-child(2) { } 
.msec05 .cinner > div a { background: var(--color-main); color: #fff; padding: 15px 35px; border-radius: 30px; } 




/* ******************* *
* msec06
* ******************* */
.msec06 { margin:15px 0 70px; } 
.msec06 .cinner { display:flex; gap:10px } 
.msec06 .cinner .msec06_list { width: calc(100% / 3 - 7px); border-radius: 10px; padding: 40px; box-sizing: border-box; max-height: 180px; } 
.msec06 .cinner .msec06_list:nth-child(1) { border: 1px solid #E8E8E8; } 
.msec06 .cinner .msec06_list:nth-child(1) .notice_title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } 
.msec06 .cinner .msec06_list:nth-child(1) .notice_title h3 { font-size: 1.25em; font-weight: 500; } 
.msec06 .cinner .msec06_list:nth-child(1) .notice_title a { font-size: 14px; } 
.msec06 .cinner .msec06_list:nth-child(1) .notice_list_wrap { display: flex; flex-direction: column; gap: 10px;} 
.msec06 .cinner .msec06_list:nth-child(1) .notice_list_wrap .list {padding-left:7px; position:relative}
.msec06 .cinner .msec06_list:nth-child(1) .notice_list_wrap .list:before {position:absolute; left:0; top:50%;transform: translateY(-50%);width:3px ;aspect-ratio: 1/1;; background:var(--color-main); border-radius: 50%;content:'';}
.msec06 .cinner .msec06_list:nth-child(1) .notice_list_wrap .list a { display: flex; align-items: center; justify-content: space-between; color: #565656; } 
.msec06 .cinner .msec06_list:nth-child(1) .notice_list_wrap .list p { font-size: 16px; } 
.msec06 .cinner .msec06_list:nth-child(1) .notice_list_wrap .list span { font-size: 14px; } 
.msec06 .cinner .msec06_list:nth-child(2) { background: #F6F8FF; display: flex; align-items: center; gap: 25px; } 
.msec06 .cinner .msec06_list:nth-child(2) .img_wrap { } 
.msec06 .cinner .msec06_list:nth-child(2) .txt_wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } 
.msec06 .cinner .msec06_list:nth-child(2) .txt_wrap img { } 
.msec06 .cinner .msec06_list:nth-child(2) .txt_wrap span { font-size: 1.5em; font-weight: 600; } 
.msec06 .cinner .msec06_list:nth-child(2) .txt_wrap span:last-child { font-size: 16px; text-align: right; display: block; width: 100%; font-weight: 400; } 
.msec06 .cinner .msec06_list:nth-child(3) { background: #2D3386; color: #fff; display: flex; align-items: center; justify-content: space-between; } 
.msec06 .cinner .msec06_list:nth-child(3) .img_wrap { } 
.msec06 .cinner .msec06_list:nth-child(3) .txt_wrap { } 
.msec06 .cinner .msec06_list:nth-child(3) .txt_wrap h3 { font-size: 1.25em; font-weight: 500; margin-bottom: 5px; } 
.msec06 .cinner .msec06_list:nth-child(3) .txt_wrap span { display: block; font-size: .8em; } 
.msec06 .cinner .msec06_list:nth-child(3) .btn_wrap { background: #fff; width:80px; aspect-ratio: 1/1; border-radius: 5px; text-align: center; display: flex; align-items: center; justify-content: center;; } 
.msec06 .cinner .msec06_list:nth-child(3) .btn_wrap a { font-size: 16px; font-weight: 500; color: #2D3386; } 



/* ******************* *
* msec07
* ******************* */
.msec07 { background:var(--color-main); color:#fff } 
.msec07 .cinner { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; } 
.msec07 h3 { font-size: 1.6em; font-weight: 500; } 
.msec07 ul { display: flex; align-items: center; gap: 30px; } 
.msec07 ul li { } 
.msec07 ul li p { display: flex; align-items: center; gap: 10px; } 
.msec07 ul li p img { } 
.msec07 ul li p span { font-size: 1.2em; font-weight: 500; } 





@media(max-width:1399px){
    .msec06 .cinner .msec06_list .img_wrap { max-width:25% } 
    .msec06 .cinner .msec06_list:nth-child(2) .txt_wrap span { font-size: 1.2em; } 
}

@media(max-width:1199px){
    .msec04 .msec04_list a div { left:30px; } 
    .msec04 .msec04_list:last-child a div { right:30px; } 
    .msec06 .cinner .msec06_list { padding:20px } 
    .msec01 ul li .img_wrap { width:15%; } 
    .msec01 ul li .img_wrap img { max-width:100%; } 
    .msec03 ul li a span { font-size:15px } 
}
@media(max-width:1024px) {
    .msec01 ul li .txt_wrap h3 { font-size: 1em; } 
    .msec01 ul li .txt_wrap span { font-size: 14px;; } 
    .msec03 ul { flex-wrap:wrap } 
    .msec03 ul li { width:calc(100% / 4 - 15px) } 
    .msec03 ul li a span { font-size: 1em; } 
    .msec06 .cinner { flex-wrap:wrap } 
    .msec06 .cinner .msec06_list { width:calc(50% - 5px); max-height:none; padding:40px } 
    .msec06 .cinner .msec06_list:nth-child(1) { width:100% } 
 }
@media(max-width:768px){
    .msec04 .msec04_list  {width:100%}
    .msec {margin-bottom:40px;}
    .msec07 {margin-bottom:0}
    .msec05 
    .main_slide_banner{margin-bottom:0}
    .msec01 ul,
    .msec04 .cinner,
    .msec05 .cinner,
    .msec07 .cinner, 
    .msec07 ul{ flex-direction: column; } 
    .msec01 ul li { width:100% ;gap:30px} 
    .msec01 ul li:before { bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; top: unset; } 
    .msec05 .cinner { gap:50px }  
    .msec06 .cinner .msec06_list {width:100%}
    .msec07 ul {gap:10px}
    .msec07 .cinner {gap:30px}
    .msec05 .cinner > div:nth-child(1) h3 {margin-bottom:10px}
    .msec05 .cinner > div:nth-child(1) span{font-size:1em}
    .msec02  {padding:40px 0;}
    .msec03 {padding:40px 0}
    .msec05 {padding-top:40px}
    .msec02 .swiper-slide img{width:100%}
    .msec06 .cinner .msec06_list:nth-child(2) {    justify-content: center;}
 }
@media(max-width:640px) { 
    .msec03 ul li {width:calc(50% - 10px)}
    .msec04 .msec04_list  {aspect-ratio: 300/ 180;}} 
@media(max-width:500px) { }