@charset "UTF-8";

/*
================================================================================
메인콘텐츠
================================================================================
*/

.swiper-container-vertical > .swiper-wrapper {
   flex-direction: column;
 }

.main_con{position: relative;;font-family: 'GmarketSans';letter-spacing: -1px;}
.main_con a{font-family: 'GmarketSans';}

.main_con h2,
.main_con h3{font-family: 'GmarketSans';}

.main_visual{position: fixed;top: 0;left: 0;width: 650px;height: 100%;background: url('/images/mayor/main/min_visual.jpg') no-repeat center top / cover;}
.main_visual p{display: none;}

.mConBox{position: relative;padding: 70px;max-width: 1270px;z-index: 2;}

.mConArea1{position: relative;display: flex;justify-content: space-between;/*gap: 60px;*/margin-bottom: 60px;}
.mnCon1{position: relative;width: 49%;max-width: 540px;z-index: 2;}
.mnCon1 .mSlide1{border-radius: 20px;}
.mnCon1 .mSlide1 ul li img{overflow: hidden;width: 100%;border-radius: 30px;}
.mnCon1 .control{display: flex;align-items: center;padding: 20px;}
.mnCon1 .control button{position: relative;flex-shrink: 0;margin-left: 10px;width: 30px;height: 30px;text-indent: -999px;overflow: hidden;background-repeat: no-repeat;background-position: center center;}
.mnCon1 .control .prevSlide1{background-image: url('/images/mayor/main/ico_prev1.png');}
.mnCon1 .control .nextSlide1{background-image: url('/images/mayor/main/ico_next1.png');}
.mnCon1 .control .con{position: relative;margin-right:auto;}
.mnCon1 .control .vPage{position: relative;display: flex;justify-content: space-between;align-items: center;width: 220px;text-indent: -9999px;overflow: hidden;bottom: 0;}
.mnCon1 .control .vPage span{text-indent: 0;font-family:'GmarketSans';font-size: 16px;color: #666;}
.mnCon1 .control .vPage .swiper-pagination-current{color: #000;}
.mnCon1 .control .lineBar{position: absolute;left:25px;top:40%;width: calc(100% - 55px);}
.mnCon1 .control .lineBar::after{position: absolute;top:0;left:0;width: 100%;height: 2px;content: '';background:#dbdbdb;z-index:1}
.mnCon1 .control .lineBar .line{position: relative;display:block;width: 0; height: 2px;background:#000;z-index:2 }
.mnCon1 .control .lineBar .line.on{animation: mymove 5s;animation-fill-mode: forwards;}
@keyframes mymove {
	100% {width: 100%;}
}

.mnCon1 .control .stopSlide1::before,
.mnCon1 .control .startSlide1::before{position: absolute;top: 50%;left: 50%;content: '';transform: translate(-50%, -50%);}
.mnCon1 .control .stopSlide1::before{width: 8px;height: 18px;border: 1px solid #000;border-width: 0 2px;}
.mnCon1 .control .startSlide1::before{width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid #000;}

.mnCon2{position: relative;width: 47%;}
.mnCon2 .con1{margin-bottom: 40px;}
.mnCon2 .con1 a{display: block;padding: 60px;height: 240px;background:#ffd77a url('/images/mayor/main/hop_bg.png') no-repeat right bottom;border-radius: 20px;}
.mnCon2 .con1 h3{font-size: 24px;color: #000;font-weight: normal;}
.mnCon2 .con1 p{margin-bottom: 30px;font-family: 'GmarketSans';font-size: 15px;color: #666;}
.mnCon2 .con1 .btn_go{display: inline-block;padding-right: 40px;font-size: 16px;color: #000;background: url('/images/mayor/main/ico_arrow.png') no-repeat right center;}
.mnCon2 .con1 a:hover .btn_go{text-decoration: underline;text-underline-offset: 4px;}

.mnCon2 .con2{padding: 30px 55px;min-height: 60%;background-color: #f2f2f2;border-radius: 20px;}
.mnCon2 .con2 p{margin-bottom: 20px;font-family: 'GmarketSans';font-size: 22px;color: #000;text-align: center;}
.mnCon2 .con2 p b{color: #2e3192;}
.mnCon2 .con2 ul li{margin-bottom: 20px;}
.mnCon2 .con2 ul li a{display: block;padding: 40px 40px 40px 170px;color: #8a8787;line-height: 1;background-color: #fff;background-repeat: no-repeat;background-position: 65px center;border-radius: 20px;}
.mnCon2 .con2 ul li a span{display: block;margin-bottom: 10px;font-size: 20px;color: #000;}
.mnCon2 .con2 ul li a:hover span{text-decoration: underline;text-underline-offset: 4px;}
.mnCon2 .con2 ul li.ic1 a{background-image: url('/images/mayor/main/ico_link1.png');}
.mnCon2 .con2 ul li.ic2 a{background-image: url('/images/mayor/main/ico_link2.png');}
.mnCon2 .con2 ul li.ic3 a{background-image: url('/images/mayor/main/ico_link3.png');}

.mnCon3{position: relative;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.mnCon3 h2{font-size: 30px;}
.mnCon3 .control{position:relative;display: flex;align-items: center;flex-shrink: 0;margin:0 0 20px auto;}
.mnCon3 .control::before{position: absolute;top: 50%;left: 60px;width: 0;height: 18px;content: '';border-left: 1px solid #b2b2b2;transform: translateY(-50%);}
.mnCon3 .control button{margin: 0 10px;width: 40px;height: 40px;text-indent: -999px;overflow:hidden;background-repeat: no-repeat;background-position: center center;}
.mnCon3 .control .prevSlide2{left: 0;background-image: url('/images/mayor/main/ico_prev1.png');}
.mnCon3 .control .nextSlide2{right: 0;background-image: url('/images/mayor/main/ico_next1.png');}
.mnCon3 .control .btnMore{display: inline-block;margin-left: 20px;}
.mnCon3 .control .btnMore a{display: block;width: 40px;height: 40px;text-indent: -999px;overflow: hidden;border-radius: 10px;box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);background: #fff url('/images/mayor/main/ico_more.png') no-repeat center center;}
.mnCon3 .mSlide2 ul li a{display: block;}
.mnCon3 .mSlide2 ul li a:hover .tit{text-decoration: underline;text-underline-offset: 3px;}
.mnCon3 .mSlide2 ul li .photo{display: block;margin-bottom: 20px;overflow: hidden;border-radius: 20px;}
.mnCon3 .mSlide2 ul li .photo img{width: 100%;transition: 0.3s ease;}
.mnCon3 .mSlide2 ul li .tit{display: block;margin-bottom: 15px;font-size: 18px;color: #333;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mnCon3 .mSlide2 ul li .data{display: block;padding-left: 25px;font-size: 16px;color: #888;background: url('/images/mayor/main/ico_data.png') no-repeat left center;}
.mnCon3 .mSlide2 ul li.ic1 a::before{background-image: url('/images/donggu/main/ico_link2_1.png');}
.mnCon3 .mSlide2 ul li.ic2 a::before{background-image: url('/images/donggu/main/ico_link2_2.png');}
.mnCon3 .mSlide2 ul li.ic3 a::before{background-image: url('/images/donggu/main/ico_link2_3.png');}
.mnCon3 .mSlide2 ul li.ic4 a::before{background-image: url('/images/donggu/main/ico_link2_4.png');}
.mnCon3 .mSlide2 ul li.ic5 a::before{background-image: url('/images/donggu/main/ico_link2_5.png');}
.mnCon3 .mSlide2 ul li.ic6 a::before{background-image: url('/images/donggu/main/ico_link2_6.png');}
.mnCon3 .mSlide2 ul li.ic7 a::before{background-image: url('/images/donggu/main/ico_link2_7.png');}
.mnCon3 .mSlide2 ul li.ic8 a::before{background-image: url('/images/donggu/main/ico_link2_8.png');}


/*
================================================================================
반응형 메인콘텐츠
================================================================================
*/

/* PC Device */
@media all and (max-width:1700px){

  .main_visual{width: 400px;}
  
}

/* PC Device */
@media all and (max-width:1500px){

  .mConArea1{display: block;}
  .mnCon1{margin-bottom: 20px;width: 100%;max-width: 100%;}
  .mnCon2{width: 100%;}

}

/* PC Device */
@media all and (max-width:1200px){

  .main_visual{position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 0 50px;width: 100%;height: 800px;background-position: center center;}
  .main_visual p{display: block;margin: 0 auto;max-width: 880px;width: 100%;font-family: 'GmarketSans';color: #fff;}
  .main_visual .txt1{margin-bottom: 35px;font-size: 30px;}
  .main_visual .txt2{font-size: 52px;line-height: 1.2;font-weight: bold;}

}


/* Tablet Device */
@media all and (max-width:990px){

  .mConBox{padding: 40px;}

  .mnCon2 .con2 p b{font-size: 20px;}

}

/* Tablet Device */
@media all and (max-width:990px){

  

}

/* mobile Device */
@media all and (max-width:640px){

  .main_visual{padding: 0 20px;height: 350px;}
  .main_visual .txt1{margin-bottom: 15px;font-size: 18px;}
  .main_visual .txt2{font-size: 24px;}

  .mConBox{padding: 20px;}

  .mConArea1{margin-bottom: 20px;}

  .mnCon1{margin: 0 auto 10px;max-width: 350px;}
  .mnCon1 .control .vPage{width: 140px;}

  .mnCon2 .con1{margin-bottom: 20px;}
  .mnCon2 .con1 a{padding: 30px;height: 200px;background-size: auto 70%;}
  .mnCon2 .con1 h3{font-size: 20px;}
  .mnCon2 .con1 p{font-size: 14px;}

  .mnCon2 .con2{padding: 20px;}
  .mnCon2 .con2 p{font-size: 20px;}
  .mnCon2 .con2 ul li{margin-bottom: 10px;}
  .mnCon2 .con2 ul li a{padding: 20px 30px 20px 70px;background-position: 20px center;background-size: 40px;}
  .mnCon2 .con2 ul li a span{margin-bottom: 5px;font-size: 18px;}

  .mnCon3 h2{font-size: 20px;}
  .mnCon3 .control::before{left: 40px;height: 15px;}
  .mnCon3 .control button{margin: 0 5px;width: 30px;height: 30px;}
  .mnCon3 .control .btnMore{margin-left: 0;}
  .mnCon3 .control .btnMore a{width: 30px;height: 30px;}
  .mnCon3 .mSlide2 ul li .tit{font-size: 16px;}
  .mnCon3 .mSlide2 ul li .data{font-size: 14px;}

}

/* mobile Device */
@media all and (max-width:450px){

  

}