@charset "utf-8";
/* CSS Document */

.moBr{display:none;}

/* MAIN PAGE */


#mainRollWrap{width:100%; height:680px; overflow:hidden; position:relative; z-index:10; margin-top:80px;}
#mainRollWrap .mainRoll {width:100%; height:100%; position:relative; z-index:1;}

#mainRollWrap .mainRoll .swiper-container{width:100%; height:100%; overflow:hidden;}
#mainRollWrap .mainRoll .swiper-slide{width:100%; height:100%; opacity:0;}
#mainRollWrap .mainRoll .mRollBox{width:100%; height:100%; position:relative; z-index:1; background:url(../images/mRoll/mRoll01.jpg) no-repeat center center; background-size:cover;}
#mainRollWrap .mainRoll .mRollBox01{background-image:url(../images/mRoll/mRoll01.jpg);}
#mainRollWrap .mainRoll .mRollBox02{background-image:url(../images/mRoll/mRoll02.jpg);}
#mainRollWrap .mainRoll .mRollTxt{width:96%; max-width:1200px; position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);}
#mainRollWrap .mainRoll .mRollTxt .rollTxt01{font-size:1.8rem; font-weight:600; color:#fff; padding-top:20px; opacity:0; line-height:1.8rem;}
#mainRollWrap .mainRoll .mRollTxt .rollTxt02{font-size:3rem; font-weight:600;  color:#fff; padding-top:40px; opacity:0; line-height:3rem;}
#mainRollWrap .mainRoll .mRollTxt .rollTxt03{font-size:1.2rem; font-weight:600; line-height:140%;  color:#fff; padding-top:60px; opacity:0;}
#mainRollWrap .mainRoll .mRollTxt .rollTxt03 p{padding:5px 0;}
#mainRollWrap .mainRoll .mRollTxt .rollTxt03 span{display:inline-block; padding:0 20px; background:#ffffff; border-radius:20px; color:#000;}



#mainRollWrap .mainRoll  .swiper-slide-active .mRollTxt .rollTxt01{padding-top:0px; opacity:1;}
#mainRollWrap .mainRoll  .swiper-slide-active .mRollTxt .rollTxt02{padding-top:20px; opacity:1;}
#mainRollWrap .mainRoll  .swiper-slide-active .mRollTxt .rollTxt03{padding-top:20px; opacity:1;}


#mainRollWrap .mainRoll  .swiper-slide-active .mRollTxt .rollTxt01{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.3s, 0.3s;
		-moz-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.3s;
		-moz-transition:0.3s;
		-webkit-transition:0.3s;

		}
		
#mainRollWrap .mainRoll  .swiper-slide-active .mRollTxt .rollTxt02{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.5s, 0.5s;
		-moz-transition-duration: 0.5s, 0.5s;
		transition-duration: 0.5s, 0.5s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.5s;
		-moz-transition:0.5s;
		-webkit-transition:0.5s;		
		
		}
		
#mainRollWrap .mainRoll  .swiper-slide-active .mRollTxt .rollTxt02{-webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 0.7s, 0.7s;
		-moz-transition-duration: 0.7s, 0.7s;
		transition-duration: 0.7s, 0.7s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:0.7s;
		-moz-transition:0.7s;
		-webkit-transition:0.7s;		
		
		}



#mainRollWrap .mainRoll .swiper-pagination{width:100%; bottom:20px; left:0; width:100%; z-index:10; display:none;}
#mainRollWrap .mainRoll .swiper-button{position:absolute; z-index:10; width:60px; height:60px; top:50%; margin-top:10px; background-color:rgba(255,255,255,0.2); background-repeat:no-repeat; 
                                       background-position:center center; background-size:30px 30px; border:1px solid #ffffff; border-radius:100%; display:none;}
#mainRollWrap .mainRoll .swiper-button-next{right:2%; background-image:url(../images/arrowR02.png); }
#mainRollWrap .mainRoll .swiper-button-prev{left:2%; background-image:url(../images/arrowL02.png);}


#mainRollWrap .mainRoll .swiper-pagination-bullet{width:10px; margin:0 5px; height:10px; position:relative; opacity:1; border:1px solid #ffffff; background:#ffffff; border-radius:100%;}
#mainRollWrap .mainRoll .swiper-pagination-bullet-active{background:#55bcab;}


#mainRollWrap .mainRollBox .swiper-button{position:absolute; z-index:10; width:60px; height:60px; top:50%; margin-top:-50px; background-color:rgba(255,255,255,0.2); background-repeat:no-repeat; 
                                       background-position:center center; background-size:30px 30px; border:1px solid #ffffff; border-radius:100%; cursor:pointer; display:none;}
#mainRollWrap .mainRollBox .swiper-button-next{right:2%; background-image:url(../images/arrowR02.png); }
#mainRollWrap .mainRollBox .swiper-button-prev{left:2%; background-image:url(../images/arrowL02.png);}



.scrollBtn{position:absolute; z-index:30; width:40px; height:80px; padding:10px; border-radius:20px; border:1px solid #ffffff; bottom:5px; left:50%; margin-left:-20px; color:#ffffff; 
                         font-size:10px; line-height:10px; vertical-align:middle; text-align:center; cursor:pointer; display:none;}

.scrollBtn .scrollBarWrap{display:inline-block; width:100%; height:100%; text-align:center; position:relative; overflow:hidden;}
.scrollBtn .scrollBarWrap .scrollBar{width:40px; height:125px; display:inline-block; position:absolute; top:0; left:50%; margin-left:-20px; background:url(../images/barD_02.png) no-repeat center center;

         animation-name:mScrollAni;
		 animation-duration:1.2s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;

}

.scrollBtn:hover{background:#ffffff; color:#000000;}
.scrollBtn:hover .scrollBarWrap .scrollBar{background:url(../images/barD_01.png) no-repeat center center;}

@keyframes mScrollAni{

   from{
	   top:-125px;
	   opacity:1;
	   }
   to{
	  top:125; 
	  opacity:0;
	   }	
	
}


.hamBoxWrap{width:96%; max-width:1200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:right; z-index:10;}
.hamBoxWrap .hamBox{padding:50px 30px; border:3px solid #26c2a5; border-radius:30px; display:inline-block; text-align:left;}
.hamBoxWrap .hamBox .hamTit{color:#fefcc1; font-size:2rem; font-weight:bold; padding-bottom:20px;}
.hamBoxWrap .hamBox .hamTxt{width:100%;}
.hamBoxWrap .hamBox .hamTxt p{color:#color; font-size:1.2rem; font-weight:bold; line-height:1.5rem; padding:5px 0; color:#ffffff;:}
.hamBoxWrap .hamBox .hamTxt p span{display:inline-block; padding:0 10px; border:1px solid #ffffff; font-weight:400; border-radius:5px;}





#mContWrap{width:100%; padding:80px 0;}
#mContWrap .mContBoxWrap{width:100%; max-width:1200px; margin:0 auto;}
#mContWrap .mContBoxWrap .mContBox{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
#mContWrap .mContBoxWrap .mContBox .mCont{width:24%;}
#mContWrap .mContBoxWrap .mContBox .mCont a{display:inline-block; width:100%; height:100%;  border-radius:20px; border:3px solid #cacaca; overflow:hidden;}
#mContWrap .mContBoxWrap .mContBox .mCont a:hover{border:3px solid #2e0e40;}
#mContWrap .mContBoxWrap .mContBox .mCont .mContImg{width:100%; padding:20px; background:#eaf9f6; text-align:center;}
#mContWrap .mContBoxWrap .mContBox .mCont .mContImg img{width:80%; max-width:92px;}
#mContWrap .mContBoxWrap .mContBox .mCont .mContTit{width:100%; padding:10px 0px; background:#2ec6a7; text-align:center; color:#ffffff; font-weight:600; font-size:1.5rem; position:relative;}
#mContWrap .mContBoxWrap .mContBox .mCont .mContTit span{display:inline-block; position:absolute; right:20px; top:50%; margin-top:-15px;}

#mContWrap .mContBoxWrap .mContBox .mCont:nth-child(2n) .mContTit{background:#249c84;}



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

#mainRollWrap .mainRoll .mRollTxt{top:10%; left:2%; transform:translate(0,0);}
.hamBoxWrap{left:2%; top:auto; bottom:10%; transform:translate(0,0); text-align:left;}
.hamBoxWrap .hamBox{padding:20px; border:3px solid #26c2a5; border-radius:20px; width:100%;}

.hamBoxWrap .hamBox .hamTxt{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.hamBoxWrap .hamBox .hamTxt p{width:29%;font-size:1rem; line-height:1.2rem; padding:5px 0; text-align:center;}
.hamBoxWrap .hamBox .hamTxt p span{width:100%; padding:0;}
.hamBoxWrap .hamBox .hamTxt p:nth-child(2n){width:69%; text-align:left;}

#mContWrap .mContBoxWrap .mContBox .mCont{width:49%; padding:5px 0;}
	
}

@media screen and (max-width:640px){
	
	
  #mainRollWrap{margin-top:60px;}
	
}


@media screen and (max-width:480px){
	
	#mainRollWrap .mainRoll .mRollTxt .rollTxt03 span{padding:0 10px;}
	
	#mContWrap .mContBoxWrap .mContBox .mCont .mContTit span{right:10px; margin-top:-10px;}
	#mContWrap .mContBoxWrap .mContBox .mCont .mContTit span img{width:20px;}
	
}