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

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
.moBr{display:none;}

/* MAIN PAGE */


#mainRollWrap{width:100%; height:calc(100% - 140px);  overflow:hidden; position:relative; z-index:10; margin-top:140px;}
#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/mRoll02.jpg) no-repeat center right; background-size:cover;}
#mainRollWrap .mainRoll .mRollBox01{background-image:url(../images/mRoll/mRoll01.jpg);}
#mainRollWrap .mainRoll .mRollBox02{background-color:#131c3d; background-image:url(../images/mRoll/mRoll02.jpg); background-position:center center; background-size:auto 100%;}
#mainRollWrap .mainRoll .mRollBox03{background-image:url(../images/mRoll/mRoll03.png);}
#mainRollWrap .mainRoll .mRollTxt{width:96%; max-width:1200px; position:absolute; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%);}
#mainRollWrap .mainRoll .mRollTxt img{width:100%;}
#mainRollWrap .mainRoll .mRollTxt img.moImg{display:none;}
#mainRollWrap .mainRoll .mRollTxt .rollTxt01{font-size:1.5rem; font-weight:600; color:#fff; padding-top:20px; opacity:0; line-height:1.5rem;}
#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 p.dateBox{display:flex; flex-wrap:wrap;}
#mainRollWrap .mainRoll .mRollTxt .rollTxt03 span.item{display:inline-block; font-size:1rem; text-align:left; padding:2px 12px; background:#ffffff; border-radius:20px; color:#000; font-weight:500;}
#mainRollWrap .mainRoll .mRollTxt .rollTxt03 span.date{padding:0 10px;}

#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 .mRollVdieoBox{width:100%; height:100%; position:relative; z-index:2; overflow:hidden;}
#mainRollWrap .mainRoll .mRollVdieo{width:100%; aspect-ratio:16 / 9; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
#mainRollWrap .mainRoll .mRollVdieo video{width:100%; height:100%;}

#mainRollWrap .mainRoll .mRollBlank{width:100%; height:100%; position:absolute; z-index:3; overflow:hidden;top:0; left:0; background:rgba(0,0,0,.6);}

#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:100px; left:0; width:100%; z-index:10;}
#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%;}
#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:#272a60; border:1px solid #272a60;}


#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;
	   }	
	
}



#mContWrap{width:100%; position:relative; z-index: 1;}
.bgGray{background: #f1f1f1;}
.bgPrimary{background: #272a60;}

#mContWrap .mContBoxWrap{width:100%;padding:50px 0;}
#mContWrap .mContBoxWrap02{width:100%;padding:20px 0;}
#mContWrap .mContBoxWrap .mContBox{width:90%;max-width:1400px; margin:0 auto;}

 .mCounterBox{width:100%; display:flex; justify-content:space-around;}
 .mCounterBox .mCntBox{width:30%; text-align:center; box-sizing:border-box; padding:20px;}
 .mCounterBox .mCntBox .dItem{width:100%; padding:10px 0; font-size:0.9rem;}
 .mCounterBox .mCntBox .dItem span{font-weight:600; font-size:0.8rem;}
 .mCounterBox .mCntBox .dCnt{width:100%; font-size:2rem; font-weight:600; font-family: "Archivo Black", sans-serif;}


 .mQuickBox{width:100%; display:flex; justify-content:space-around;}
 .mQuickBox .mQBoxTit{width:20%; box-sizing:border-box; padding:50px 20px; font-size:2rem; position:relative; font-weight:bold; font-family: "Archivo Black", sans-serif; }
 .mQuickBox .mQBoxCont{width:18%; background-color:#ffffff; position:relative; border-radius:10px; box-shadow: 0 0 5px #c2c2c2;}

 .mQuickBox .mQBoxCont{background:#f2f6fd;}
 .mQuickBox .mQBoxCont:nth-child(2){background:#f6f2fd;}
 .mQuickBox .mQBoxCont:nth-child(3){background:#fef3f7;}
 .mQuickBox .mQBoxCont:nth-child(4){background:#f2fbf5;}


 .mQuickBox .mQBoxCont a{display:inline-block; box-sizing:border-box; border:1px solid #ffffff; border-radius:10px; padding:50px 20px; position:relative; font-weight:bold;}
 .mQuickBox .mQBoxCont a span{display:inline-block; width:100%; text-align: right; padding-top:3rem;}
 .mQuickBox .mQBoxCont a span img{width:50%;max-width:150px; opacity: 0.7;}
 .mQuickBox  .mQBoxCont a:hover{border:1px solid #31357b;}
 .mQuickBox .mQBoxCont a:hover span img{opacity:1;}

 .mainTit{width:100%; box-sizing:border-box; padding-bottom:20px; text-align:center; font-size:2rem; position:relative; font-weight:bold; font-family: "Archivo Black", sans-serif; }
 .mBbsBox{width:100%; display:flex; justify-content:space-around;}
 .mBbsBox .mBbsTit{width:20%; box-sizing:border-box; padding:50px 20px; font-size:2rem; position:relative; font-weight:bold; font-family: "Archivo Black", sans-serif; }
 .mBbsBox .mBbsCont{width:22%; background-color:#f1f1f1; position:relative; border-radius:10px; box-shadow: 0 0 5px #c2c2c2;}
 .mBbsBox .mBbsCont a{display:inline-block; padding:50px 20px;}
 .mBbsBox .mBbsCont .subject{width:100%; padding-bottom: 10px; font-weight:600; font-size:1rem; }
 .mBbsBox .mBbsCont .date{position:absolute; text-align:right; font-size:0.9rem; bottom:30px; right:20px; }

 .mSpeakerBox{width:100%; aspect-ratio: 16 / 5; }
 .mSpeakerBox .swiper-slide{width:20%; box-sizing: border-box; padding:10px;}
 .mSpeakerBox .mSpeaker{width:100%; position:relative; border-radius:10px; box-shadow: 0 0 5px #c2c2c2;}
 .mSpeakerBox .mSpeaker a{display:inline-block; padding:50px 20px;}
 .mSpeakerBox .mSpeaker .speaker{width:100%; aspect-ratio: 1; overflow:hidden; margin-bottom: 10px; border:1px solid #f1f1f1; border-top-left-radius:10px; border-top-right-radius:10px; }
 .mSpeakerBox .mSpeaker .speaker img{width:100%; aspect-ratio: 1; object-fit:cover;}
 .mSpeakerBox .mSpeaker .name{padding:10px 0; text-align: center; font-size:1rem; font-weight: 600; }
 .mSpeakerBox .mSpeaker .name span{font-size:0.9rem;font-weight: 400; color:#999;}
 .mSpeakerBox .mSpeaker .name span.company{}
 .mSpeakerBox .mSpeaker .name span.nation{font-style:italic;}

.mSpeakerBox .mSpeaker .speaker:hover img{transition:0.3s; transform:matrix(1.20, 0, 0, 1.20, 0, 0); -webkit-transform:matrix(1.20, 0, 0, 1.20, 0, 0); -moz-transform:matrix(1.20, 0, 0, 1.20, 0, 0);}

.sponserBoxWrap{width:100%; display:flex;  justify-content: space-between; padding:10px 0;}
.sponserBoxWrap .mainTit{width:10%; font-size:1.5rem; padding-bottom: 0;}
.sponserBoxWrap .mainTit span.grade{display:inline-block; width:100%; text-align: center; border-radius: 20px; font-size:1rem;margin-top:10px; padding:10px 0;}
.sponserBoxWrap .mainTit span.diamond{background:#ffe699;}
.sponserBoxWrap .mainTit span.platinum{background:#e2efda;}
.sponserBoxWrap .mainTit span.gold{background:#fce4d6;}

.sponserBoxWrap .mSponserBox{width:90%; padding:0 30px;}
.sponserBoxWrap .mSponserBox .swiper-slide{width:12.5%; box-sizing: border-box; padding:5px;}
.sponserBoxWrap .mSponserBox a{display:inline-block;}
.sponserBoxWrap .mSponserBox a img{width:100%;}

.sponserBoxWrap .mSponserBox02{width:90%; padding:0 30px; display:flex; flex-wrap:wrap;}
.sponserBoxWrap .mSponserBox02 a{display:inline-block; width:14.6%;  margin:10px 1%; padding:2px 5px; text-align: center;}
.sponserBoxWrap .mSponserBox02 a img{width:100%; border:1px solid #c2c2c2;}


.DDayBox{position:absolute; top:10%; left:10%; width:30%; max-width:150px; aspect-ratio: 1; border-radius: 100%; background:#ebea43; z-index: 999999; }
.DDayBox .dBoxWrap{width:100%; height:100%; position:relative;}
.DDayBox .dBoxWrap .dBox{position:absolute; width:100%; text-align:center; left:0; top:50%; transform: translateY(-50%); font-size:0.8rem;}
.DDayBox .dBoxWrap .dBox .day{font-size:1.5rem; font-weight: 600; font-family: "Archivo Black", sans-serif; }

.DDayBox .dBoxWrap::before{content:''; display:inline-block; position:absolute;border-radius: 100%; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; border:1px solid #ebea43; }
.DDayBox .dBoxWrap::after{content:''; display:inline-block; position:absolute;border-radius: 100%;  top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; border:1px solid #ebea43; }




.DDayBox .dBoxWrap::before{
         animation-name:dDayBox01;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;
		 

}


.DDayBox .dBoxWrap::after{
         animation-name:dDayBox02;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:1.5s;
		 animation-iteration-count:infinite;
}



@keyframes dDayBox01{

    from{
	   width:100%;
	   height:100%;
	   opacity:1;
	   }
   to{
	  width:120%;
	  height:120%;
	   opacity:0;
	   }		
	
}



@keyframes dDayBox02{

   from{
	   width:100%;
	   height:100%;
	   opacity:1;
	   }
   to{
	  width:120%;
	  height:120%;
	   opacity:0;
	   }	
	
}




/* Go Down Button */
.goDownButton{width:40px; height:50px; position:absolute; bottom:5px; left:50%; margin-left:-20px; cursor:pointer; z-index:30; overflow:hidden;}
.goDownButton .goDownBarWrap{width:100%; height:100%; position:relative; display:inline-block; border:1px solid #ffffff; box-sizing:border-box; border-radius:20px; overflow:hidden;}
.goDownButton .goDownBarWrap::before{display:inline-block; width:4px; height:4px; background:#ffffff; content:''; position:absolute; top:-2px; left:50%; margin-left:-2px; border-radius:100%; display:none;}
.goDownButton .goDownBarWrap .goDownBarBox{width:100%; height:100%; position:relative; overflow:hidden;}


.goDownButton .goDownBarWrap .goDownBarBox::before{width:15px; height:15px; content:''; display:inline-block; position:absolute; top:0%; left:57%;
                                             border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; transform:rotate(-45deg) translate(-50%,-50%);}
.goDownButton .goDownBarWrap .goDownBarBox::after{width:15px; height:15px; content:''; display:inline-block; position:absolute; top:50%; left:57%;
                                             border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; transform:rotate(-45deg) translate(-50%,-50%);}




.goDownButton .goDownBarWrap .goDownBarBox::before{
         animation-name:goDownBtn01;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;
		 

}


.goDownButton .goDownBarWrap .goDownBarBox::after{
         animation-name:goDownBtn02;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:1.5s;
		 animation-iteration-count:infinite;
}



@keyframes goDownBtn01{

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



@keyframes goDownBtn02{

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

#nextPage{width:100%; height:140px; margin-top:-140px;}

/* Reflect */



@media screen and (max-width:1400px){
	
  #mainRollWrap{height:calc(100% - 80px); margin-top:80px;}
	#mainRollWrap .mainRoll .swiper-button{display:none;}
	
	.mSpeakerBox .mSpeaker .name{font-size:0.9rem;}
	.sponserBoxWrap .mSponserBox .swiper-slide{width:16.66%; box-sizing: border-box; padding:5px;}
}


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

 .mQuickBox .mQBoxTit{display:none; }
 .mQuickBox .mQBoxCont{width:24%;}
 .mQuickBox .mQBoxCont a{padding:30px 10px;}
 .mQuickBox .mQBoxCont a span{padding-top:2rem;}
	
 .mBbsBox{flex-wrap: wrap;}
 .mBbsBox .mBbsCont{width:48%; margin:5px 0;}
 .mBbsBox .mBbsCont a{display:inline-block; padding:20px 10px;}
 .mBbsBox .mBbsCont .date{bottom:20px; right:10px; }

	.mSpeakerBox{aspect-ratio:16 / 8;}
 .mSpeakerBox .swiper-slide{width:33.33%;}
	.mSpeakerBox .mSpeaker .speaker{margin-bottom:0;}
	
.sponserBoxWrap{flex-wrap:wrap;}
.sponserBoxWrap .mainTit{width:100%;padding-bottom:10px;}
.sponserBoxWrap .mSponserBox{width:100%; padding:0 10px;}
.sponserBoxWrap .mSponserBox .swiper-slide{width:20%; box-sizing: border-box; padding:5px;}
	
	
.sponserBoxWrap .mSponserBox02{width:100%; padding:0 10px;}
.sponserBoxWrap .mSponserBox02 a{width:24%;}

	
	
#mainRollWrap .mainRoll .mRollBox02{background-image:url(../images/mRoll/mRoll02_m.jpg); background-position:center bottom; background-size:100% auto;}	
#mainRollWrap .mainRoll .mRollTxt img.pcImg{display:none;}
#mainRollWrap .mainRoll .mRollTxt img.moImg{display:block;}
	
}

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

	
  .mQuickBox{flex-wrap: wrap;}
  .mQuickBox .mQBoxCont{width:48%; margin:5px 0;}
	
  .mCounterBox .mCntBox {width:33%; padding:20px 5px;}
	
  .mBbsBox .mBbsCont{width:100%;}

 .mSpeakerBox{aspect-ratio:16 / 10;}
  .mSpeakerBox .swiper-slide{width:50%;}
	
 .sponserBoxWrap .mSponserBox .swiper-slide{width:25%;}	

 .sponserBoxWrap .mSponserBox02 a{width:32%;}
	
}


@media screen and (max-width:480px){
	
	#mainRollWrap .mainRoll .mRollTxt .rollTxt03 span{padding:0 10px;}
    .mQuickBox .mQBoxCont a span{padding-top:1rem;}
	.mQuickBox .mQBoxCont a span img{max-width:100px;}
	
	
	.sponserBoxWrap .mSponserBox .swiper-slide{width:33.33%;}
	
	.mCounterBox{flex-wrap:wrap;}
	.mCounterBox .mCntBox{width:100%;}
	.mCounterBox .mCntBox:nth-child(2){border-top:1px solid #c2c2c2; border-bottom:1px solid #c2c2c2;}
	
	

	
}


@media screen and (max-width:420px){
	#mContWrap .mContBoxWrap{padding:10px 0;}
	.mCounterBox{flex-wrap:wrap;}
	.mCounterBox .mCntBox {width:100%; padding:10px 5px; border-top:1px solid #c2c2c2;}
	.mCounterBox .mCntBox:first-child{border-top:none;}

	
}