@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'KBO-Dia-Gothic_bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

.fnPoppins{	
  font-family: 'Poppins', sans-serif;	
}

/* MAIN PAGE */

.section{width:100%; height:100%; position:relative;}


#mainRollWrap{width:100%; height:100%; overflow:hidden; position:relative; float:left; z-index:1;}
#mainRollWrap .mainRoll{width:100%; height:100%; overflow:hidden;}

#mainRollWrap .mainRoll .swiper-container{width:100%; height:100%; overflow:hidden;}
#mainRollWrap .mainRoll .swiper-slide{width:100%; height:100%; opacity:0;}


#mainRollWrap .mainRoll .swiper-slide .mRollBox{width:100%; height:100%; opacity:1; position:relative; 
                                                       background-position:center center; background-size:cover; background-color:#000;
                                                       }
													   
#mainRollWrap .mainRoll .swiper-slide .mRollBox01{background-image:url(../images/mRoll/mRoll04.jpg);}
#mainRollWrap .mainRoll .swiper-slide .mRollBox02{background-image:url(../images/mRoll/mainVideo02.jpg);}
#mainRollWrap .mainRoll .swiper-slide .mRollBox03{background-image:url(../images/mRoll/mRoll05.jpg);}

#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollVideo{width:100%; height:100%; position:relative; overflow:hidden; z-index:1; opacity:0.6;}
#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollVideo video{width:1920px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

#mainRollWrap .mainRoll .swiper-slide .mRollBox02 .mRollVideo{display:none;}

#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxtBox{width:100%; position:absolute; top:50%; left:50%; text-align:right; transform:translate(-50%,-50%); z-index:2;}
#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt01{font-weight:600; font-size:4em; text-align:center; display:block;}
#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt02{font-weight:200; font-size:1.2em; text-align:center; display:block; clear:both; text-shadow:1px 1px 3px #d2d2d2;}

#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxtBox{
	
	 -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;
		box-sizing:border-box;
	
}


/* Main Roll Text Effect */
.mainRoll .swiper-slide .mRollBox .mRollTxtBox .mRollTxt01 span {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;	
    -webkit-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    transform: translate(0,50%);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    animation-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    -o-transition-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    transition-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
	
	opacity:0; 
	padding-top:10px;
	/*font-size:0.5em;*/
	display:inline-block;
}


.mainRoll .swiper-slide-active .mRollBox .mRollTxtBox .mRollTxt01 span {
    opacity: 1;
	padding-top:0px;
	/*font-size:1em;*/
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}


/*

#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:-30px; 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); display:none;}
#mainRollWrap .mainRoll .swiper-button-prev{left:2%; background-image:url(../images/arrowL02.png); display:none;}


#mainRollWrap .mainRoll .swiper-pagination-bullet{width:20px; margin:0 5px; height:10px; position:relative; opacity:1; border:1px solid #c0ab60; background:#ffffff; border-radius:5px;}
#mainRollWrap .mainRoll .swiper-pagination-bullet-active{background:#c0ab60;}
*/


#mainRollWrap .mainRoll .swiper-pagination{width:200px; top:60%; margin-top:-100px; right:-53px; z-index:10; height:4px; border-radius:3px; transform-origin:top; transform:rotate(90deg); overflow:hidden;}
#mainRollWrap .mainRoll .swiper-pagination-progress{background:rgba(255,255,255,.6);}
#mainRollWrap .mainRoll .swiper-pagination-progress .swiper-pagination-progressbar{background:#ffffff;}

#mainRollWrap .mainRoll .swiper-button{position:absolute; z-index:10; width:40px; height:40px; background-repeat:no-repeat; 
                                       background-position:center center; background-size:20px 20px; border-radius:100%; }
#mainRollWrap .mainRoll .swiper-button-prev{top:60%; left:auto; right:30px; margin-top:-260px; background-image:url(../images/arrowU02.png); }
#mainRollWrap .mainRoll .swiper-button-next{top:60%; left:auto; right:30px; margin-top:20px; background-image:url(../images/arrowD02.png);}


#mainRollWrap .mainRoll .swiper-pagination-bullet{width:40px; margin:0 5px; height:4px; position:relative; opacity:1; background:#ffffff; border-radius:0;}
#mainRollWrap .mainRoll .swiper-pagination-bullet-active{background:#000000;}






#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt01{
        -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;
		box-sizing:border-box;
	
}


#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt02{
        -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;
		box-sizing:border-box;
		
		-webkit-transition-delay:0s ;
		-moz-transition-delay: 0s ;
		transition-delay: 0s ;
	
}



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

#mainRollWrap .scrollBtn .scrollBarWrap{display:inline-block; width:100%; height:100%; text-align:center; position:relative; overflow:hidden;}
#mainRollWrap .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;

}

#mainRollWrap .scrollBtn:hover{background:#ffffff; color:#000000;}
#mainRollWrap .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;
	   }	
	
}







/* MAIN Full Page */



.sectionbox{height:100%; width:100%; padding:0; box-sizing:border-box; position:relative; margin:0 auto;}
.mVisionWrap{width:100%; height:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.mVisionWrap .mVisionBox{width:25%; height:100%; position:relative; background:#000000;}
.mVisionWrap .mVisionBox .mVisionBg{width:100%; height:100%; position:relative; z-index:1; background-repeat:no-repeat; background-size:cover; background-position:center center; opacity:.8;}
.mVisionWrap .mVisionBox .mVisionBg01{background-image:url(../images/mCont03_01.jpg);}
.mVisionWrap .mVisionBox .mVisionBg02{background-image:url(../images/mCont03_02.jpg);}
.mVisionWrap .mVisionBox .mVisionBg03{background-image:url(../images/mCont03_03.jpg);}
.mVisionWrap .mVisionBox .mVisionBg04{background-image:url(../images/mCont03_04.jpg);}

.mVisionTxt{position:absolute; height:30%; bottom:0; left:0; width:100%; padding:0 3%; color:#ffffff; opacity:1; z-index:2; font-size:0.92vw; font-weight:400; text-align:center;}
.mVisionTxt span.tit{font-weight:600; font-size:2vw; padding-bottom:30px; display:inline-block; text-align:center; width:100%;}
.mVisionTxt span.taLeft{text-align:left !important; display:inline-block;width:100%;}

.mVisionWrap .mVisionBox:hover .mVisionBg{opacity:.4;}



/************************************************************/



.scrollBtnWrap{position:absolute; z-index:30; width:40px; height:40px; padding:0px; bottom:5px; left:50%; margin-left:-20px; text-align:center; cursor:pointer; overflow:hidden;}
.scrollBtnWrap .scrollBtn{width:100%; height:100%; position:relative; display:inline-block;}
.scrollBtnWrap .scrollBtn::before{width:15px; height:15px; content:''; display:inline-block; position:absolute; top:0%; left:50%;
                                             border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; transform:rotate(-45deg) translate(-50%,-50%);}
.scrollBtnWrap .scrollBtn::after{width:15px; height:15px; content:''; display:inline-block; position:absolute; top:50%; left:50%;
                                             border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; transform:rotate(-45deg) translate(-50%,-50%);}




#mContWrap .scrollBtnWrap .scrollBtn::before{
         animation-name:scrollBtn01;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:0s;
		 animation-iteration-count:infinite;
		 

}


#mContWrap .scrollBtnWrap .scrollBtn::after{
         animation-name:scrollBtn02;
		 animation-duration:2s;
		 animation-timing-function:linear;
		 animation-delay:1.5s;
		 animation-iteration-count:infinite;
}



@keyframes scrollBtn01{

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



@keyframes scrollBtn02{

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




.mContNavi{display:inline-block; width:40px; position:fixed; top:50%; right:10px; margin-top:-20px; z-index:30; display:none;}
.mContNavi ul{width:100%;}
.mContNavi ul li{width:100%; padding:8px 0; text-align:center;}
.mContNavi ul li a{display:inline-block; width:40px; height:10px; border-bottom:1px solid #d2d2d2; position:relative;}
.mContNavi ul li a::before{display:inline-block; width:10px; height:10px; content:''; position:absolute; top:0px; left:0; background:#d2d2d2; border-radius:100%;}
.mContNavi ul li.active a{border-bottom:1px solid #c0ab60;}
.mContNavi ul li.active a:before{background:#c0ab60;}



/* Main : Section04 */
#section04 .totBgBox{height:100%; position:relative;}
#section04 .totBgBox .sucessBox{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-shadow:1px 1px 3px #222; width:100%; text-align:center;} 


#section04 .totBgBox .sucessBox span {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;	
    -webkit-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    transform: translate(0,50%);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    animation-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    -o-transition-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
    transition-delay: calc(400ms + var(--char-index) * 50ms - 50ms);
	
	opacity:0; 
	padding-top:20px;
	display:inline-block;
	font-size:0.5em;
}


#section04 .totBgBox .sucessBox .aos-animate span {
    opacity: 1;
	padding-top:0;
	font-size:1em;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
}


#section04 .subContTit03{font-size:4em; font-weight:bold;}



/* Main : Section03 */
.mContWrap01{width:100%; height:100%; box-sizing:border-box; padding:0; float:left; position:relative; background:#000;}
.mContWrap01 .mContBox01{width:100%; height:100%; overflow:hidden; margin:0 auto; position:relative;}
.mContWrap01 .mContBox01 .mContBg{width:100%; height:100%; position:relative; z-index:10; background-color:#000;}
.mContWrap01 .mContBox01 .mContBg .mBg{width:100%; height:100%; position:absolute; top:0; top:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; opacity:1; z-index:10;}
.mContWrap01 .mContBox01 .mContBg .mBg:first-child{background-image:url(../images/mCont03_bg_01.jpg);}
.mContWrap01 .mContBox01 .mContBg .mBg:nth-child(2){background-image:url(../images/mCont03_bg_02.jpg);}
.mContWrap01 .mContBox01 .mContBg .mBg:nth-child(3){background-image:url(../images/mCont03_bg_03.jpg);}
.mContWrap01 .mContBox01 .mContBg .mBg:nth-child(4){background-image:url(../images/mCont03_bg_04.jpg);}

.mContWrap01 .mContBox01 .mContBg .mBgAct{top:0; opacity:0.9; z-index:20;}

.mContWrap01 .mContBox01 .mContBg .mBg{
        -webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 1s, 1s;
		-moz-transition-duration: 1s, 1s;
		transition-duration: 1s, 1s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:1s;
		-moz-transition:1s;
		-webkit-transition:1s;
		box-sizing:border-box;		
	
}


.mContWrap01 .mContBox01 .mContBg .mBgOn{
        -webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 1s, 1s;
		-moz-transition-duration: 1s, 1s;
		transition-duration: 1s, 1s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:1s;
		-moz-transition:1s;
		-webkit-transition:1s;
		box-sizing:border-box;
		
	
}


.mContWrap01 .mContBox01 .mContBg .mBgOn{top:0; opacity:1; z-index:20;}
.mContWrap01 .mContBox01 .mContBg .mBgRight{top:100%; opacity:1; z-index:12;}

.mContBox01 .mContCate{width:96%; height:100%; position:absolute; z-index:20; top:0; left:2%; border-left:1px solid #dddddd;}
.mContBox01 .mContCate .mCateBox{width:25%; height:100%; display:table; float:left; border-right:1px solid #dddddd;}
.mContBox01 .mContCate .mCateBox .cateBox{display:table-cell; vertical-align:middle; text-align:center;}
.mContBox01 .mContCate .mCateBox .cateBox p{color:#ffffff; padding:10px; font-size:2.4em; padding-top:200px; font-weight:600;}
.mContBox01 .mContCate .mCateBox .cateBox p.cateTxt{opacity:0; padding-top:50px; font-size:0.9em; font-weight:normal;}
.mContBox01 .mContCate .mCateBox .cateBox p.cateMore{opacity:0; padding-top:50px; font-size:0.9em;  font-weight:normal;}
.mContBox01 .mContCate .mCateBox .cateBox p.cateMore a{display:inline-block; padding:10px 20px; border:1px solid #ffffff; line-height:20px; border-radius:20px; color:#ffffff;}
.mContBox01 .mContCate .mCateBox .cateBox p.cateMore a:hover{background:#ffffff; color:#303339;}



.mContBox01 .mContCate .mCateBox .cateBox p{
        -webkit-transition-property:all ;
		-moz-transition-property: 	all ;
		transition-property: 		all ;
		-webkit-transition-duration: 1s, 1s;
		-moz-transition-duration: 1s, 1s;
		transition-duration: 1s, 1s; 
		-webkit-transition-timing function: linear, ease-in-out;
		-moz-transition-timing function: linear, ease-in-out; 
		transition-timing function: linear, ease-in-out;
		transition:1s;
		-moz-transition:1s;
		-webkit-transition:1s;
		box-sizing:border-box;
	
}

.mContBox01 .mContCate .mCateBox .cateBox:hover p{padding-top:10px;}
.mContBox01 .mContCate .mCateBox .cateBox:hover p.cateTxt{opacity:1; padding-top:10px;}
.mContBox01 .mContCate .mCateBox .cateBox:hover p.cateMore{opacity:1; padding-top:10px;}

.mContBox01 .mContCate .cateBoxAct{background: rgba(192, 171, 96, 0); background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 70%, rgba(192, 171, 96, 1) 100%); background-size:cover;}
.mContBox01 .mContCate .cateBoxAct .cateBox p{padding-top:10px;}
.mContBox01 .mContCate .cateBoxAct .cateBox p.cateTxt{opacity:1; padding-top:10px;}
.mContBox01 .mContCate .cateBoxAct .cateBox p.cateMore{opacity:1; padding-top:10px;}




.goDownButton{width:40px; height:60px; position:absolute; bottom:5px; left:50%; margin-left:-20px; cursor:pointer; z-index:30; overflow:hidden; border:1px solid #fff; border-radius:20px;}
.goDownButton .goDownBarWrap{width:100%; height:100%; position:relative; display:inline-block;}
.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:60%;
                                             border-left:2px solid #ffffff; border-bottom:2px 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:60%;
                                             border-left:2px solid #ffffff; border-bottom:2px 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:-60px;
	   opacity:0;
	   }
   to{
	  top:60px; 
	  opacity:1;
	   }	
	
}



@keyframes goDownBtn02{

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




.totBgBox{width:100%; float:left; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.totBg01{background-image:url(../images/strategy.jpg); background-attachment:fixed;}
.totBg02{background-image:url(../images/messageBg.jpg); height:100%; position:relative;}
.totBg03{background:#272727; position:relative;}


/********* main Section02 **************/
#section02{height:100% !important; background-size:cover; background-position:center center; background-repeat:no-repeat; background-color:#000000; background-image:url(../images/mainBg01.jpg);}
#section02 .center{width:90%; margin:0 auto;}

.mScreenBgWrap{width:100%; height:100%; position:absolute; z-index:1; top:0; left:0; overflow:hidden; }
.mScreenMovie{width:100%; height:100%; position:relative; z-index:1; background:#000000;}
.mScreenMovie .bgVideo{
	    position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color:#000000; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit:cover; /*cover video background */
   		z-index:3;
		
		}
		
.mScreenMovie .bgVideo02{opacity:0.8;}


.screenBoxWrap{width:100%; height:100%; display:table; position:relative; z-index:10;}
.screenBox{width:100%; height:100%; display:table-cell; vertical-align:middle;}

.mScr01Txt01{margin-left:50px; padding:15px 0px; color:#fff; font-size:40px;  line-height:50px; display:inline-block; font-family: 'Noto Sans', sans-serif; !important; font-weight:bold;}
.mScr01Txt01 span{color:#e22a27;}
.mScr01Txt02{margin-left:50px; padding:0px 0 50px; color:#fff; font-size:20px; line-height:30px; font-weight:bold;}
.mScr01Txt02 span{color:#e22a27;}
.mScr01Btn{margin-left:50px;}

.mainBtn{display:inline-block; box-sizing:border-box;width:45%; max-width:300px; padding:10px 3%; line-height:160%; font-size:1.2rem; text-align:left; background-repeat: no-repeat; background-position:90% center;}

.mainBtn01{color:#fff; background-image:url(../images/main/blet_arrow02.png);  background-color:#e22a27; border:1px solid #e22a27;}
.mainBtn01:hover{border:1px solid #ffffff; background-color:#ffffff; color:#e22a27; background-image:url(../images/main/blet_arrow.png);}


.mainBtn02{color:#fff; background-image:url(../images/main/blet_arrow02.png);  background-color:none; border:1px solid #ffff; text-align:left; margin-left:50px;}
.mainBtn02:hover{border:1px solid #ffffff; background-color:#ffffff; color:#e22a27; background-image:url(../images/main/blet_arrow.png);}

.mScr02Txt01{padding:30px 0 50px; color:#fff; font-size:1rem;  text-align:center; font-weight:500;}
.mScr02Txt01 span{font-size:5rem; font-weight:bold;line-height:120%; }

.mScr02Txt02{padding:50px 0; color:#fff; font-size:1.2rem; line-height:120%; text-align:center; position:relative;}
.mScr02Txt02 span{font-weight:bold; color:#e22a27; }

.mScr02Txt02::before{display:inline-block; content:''; width:30%; height:1px; position:absolute; bottom:40px; left:50%; transform:translateX(-50%); background:#ffffff;}
.mScr02Txt02::after{display:inline-block; content:''; width:1px; height:200px; position:absolute; top:100%; left:50%; border-left:2px dashed #ffffff; margin-top:-40px;}

.mScr02Btn{text-align:center; display:flex; justify-content:center;}
.mScr02Img{padding-top:50px; text-align:center;}

.mScr02ImgBox{text-align:center; position:relative; display:flex; justify-content:space-between; padding:50px 10%;}
/*.mScr02ImgBox::before{width:80%; height:1px; position:absolute; z-index:1; top:50%; left:10%; border-bottom:1px dashed #ffffff; content:'';}*/
.mScr02ImgBox .mScr02Box{width:20%; border:1px solid #ffffff; background-repeat:no-repeat; display:flex; flex-wrap:wrap; box-sizing:border-box; position:relative; z-index:2;}
.mScr02ImgBox .mScr02Box::before{content:''; position:absolute; width:33%; height:1px; background:#ffffff; right:100%; top:110px;}
.mScr02ImgBox .mScr02Box:first-child::before{display:none;}
.mScr02ImgBox .mScr02Box span{display:inline-block; color:#ffffff; font-size:1rem; font-weight:600; line-height:120%; box-sizing:border-box; width:100%; padding:20px 0 40px;}
.mScr02ImgBox .mScr02Box span.projectImg{padding:0; padding-top:10px;}
.mScr02ImgBox .mScr02Box span.projectImg img{width:90%;}



/* main Section04 */
#section04{height:100% !important; background-size:cover; background-position:center center; background-repeat:no-repeat; background-color:#000000; background-image:url(../images/strategy.jpg);}
#section04 .mScrBoxWrap{width:80%; margin:0 auto; display:flex; justify-content:space-between; padding-top:30px; flex-wrap:wrap;}

.mScr04Txt01{padding:30px 0 40px; color:#fff; font-size:4rem; line-height:100%; font-weight:bold; text-align:center;}
.mScr04Txt01 span{font-size:1.5rem; font-weight:normal;}
.mScr04Line{width:100px; height:1px; background:#fff; margin:0 auto;}

.mScrBoxWrap .mScr04Box{ display:inline-block; width:32.5%; padding:40px; box-sizing:border-box; overflow:hidden; background:#ffffff; border-radius:20px;}
.mScrBoxWrap .mScr04Box .mScrTxtBox{width:100%;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit{width:100%; padding:0; line-height:160%; font-size:1.4rem; font-weight:600; color:#292929; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit a{display:inline-block; position:absolute; top:0; right:10px; width:20px; height:20px; background:#e7e7e7; color:#989898; line-height:20px; font-size:20px; border-radius:100%; text-align:center;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit a:hover{background:#000;}
/*.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit span{display:inline-block; padding:0 30px; position:relative;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit span::before{content:"";display:inline-block; width:20px; height:20px; background:url(../images/main/mark_01.png) no-repeat center center; position:absolute; top:0; left:0;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit span::after{content:"";display:inline-block; width:20px; height:20px; background:url(../images/main/mark_02.png) no-repeat center center; position:absolute; top:0; right:0;}*/
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Txt{width:100%; padding-top:20px;line-height:120%; font-size:1rem;color:#292929; text-align:center; overflow:hidden;}

.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox{width:49%; display:inline-block; position:relative;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox .customInfo{width:100%; padding-bottom:20px; padding-left:5%; padding-right:5%; box-sizing:border-box; font-weight:bold; font-size:1.125rem;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox .customInfo span{font-size:1rem; font-weight:400;}

.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox:nth-child(2)::before{display:inline-block; content:''; width:1px; height:90%; background:#c2c2c2; left:-5px; top:0; position:absolute;}

.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox .time{color:#a00404;}

.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap{width:100%; display:flex; justify-content:space-between;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn{width:49%; display:inline-block; box-sizing:border-box; padding:10px 0; text-align:center; color:#ffffff; font-size:1.25rem; border-radius:10px;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn01{background:#c0ab60; border:1px solid #c0ab60;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn01:hover{background:#ffffff; color:#c0ab60;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn02{background:#f70000; margin-left:2%; border:1px solid #f70000;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn02:hover{background:#ffffff; color:#f70000;}


.onGoProjectWrap{width:100%; float:left; padding:0; background:#fff;}
.onGoProjectWrap .onGoingCenter{width:100%; padding-top:10px;}
.onGoProjectWrap .onGoProjectTR{width:100%; padding:5px 0; display:flex; justify-content:space-between;}
.onGoProjectWrap .onGoProjectTR .onGoSubj{display:inline-block; font-size:1rem; color:#292929; line-height:120%;overflow:hidden;
                                          white-space:nowrap; text-overflow:ellipsis; text-align:left;}
.onGoProjectWrap .onGoProjectTR .onGoDate{font-size:0.9rem; color:#121212; width:30%; text-align:right;}
.onGoProjectWrap .onGoProjectTR a{width:70%; padding-right:15px; font-size:1rem;}
.onGoProjectWrap .onGoProjectTR a .onGoSubj{width:100%; display:inline-block; font-size:1rem; color:#292929; line-height:120%;overflow:hidden;
                                          white-space:nowrap; text-overflow:ellipsis; text-align:left;}



.noticeWrap{width:100%; float:left; padding:0px 0 20px; positon:relative;}

.noticeWrap .noticeTit{width:100%; float:left;}
.noticeWrap .noticeTit .notTit01{display:none; width:80px; height:30px; line-height:30px; text-align:center; color:#fff; font-size:16px; background:#c71313; float:left;}
.noticeWrap .noticeTit .notTit02{display:none; padding:10px 0; height:30px; line-height:30px; text-align:left; color:#191919; font-size:17px; font-weight:600; float:left; clear:both;}
.noticeWrap .noticeTit .notDate{display:none; padding:10px 0; height:30px; line-height:30px; color:#191919; font-size:16px; font-weight:normal; float:right;}
.noticeWrap .noticeCont{width:100%; float:left; padding-top:10px; font-size:1rem; color:#191919; line-height:120%; text-align:left;}
.noticeWrap .noticeCont span{display:inline-block; width:100%;}
.noticeWrap .noticeCont span.subject{width:100%; padding-bottom:5px;font-weight:600;}
.noticeWrap .noticeCont span.contents{width:100%;}






/**********************************/
/*******Mobile*********************/
/**********************************/


/* MAIN PAGE */




@media screen and (max-width:1500px){
	
	#mainRollWrap{height:auto;}
	
    #mainRollWrap .mainRoll .mRollBox .mRollTxt{width:75%;}	
	#mainRollWrap .mainRoll .movieTxt01{font-size:50px; margin-top:-70px;}
    #mainRollWrap .mainRoll .movieTxt02{font-size:20px;}
	
  
}


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

    #mainRollWrap .mainRoll .mRollBox .mRollTxt{width:65%;}
	#mainRollWrap .mainRoll .movieTxt01{font-size:40px; margin-top:-60px;}
    #mainRollWrap .mainRoll .movieTxt02{font-size:18px;}
	
	#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt01{font-size:3em;}
    #mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt02{font-size:1em;}
	
	
	.mScr02ImgBox{padding:50px 0;}
	
	
	/* SECTION 04 */
	#section04 .mScrBoxWrap{width:90%;}
	.mScrBoxWrap .mScr04Box{padding:20px;}

	
}

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

    #mainRollWrap .mainRoll .mRollBox .mRollTxt{width:100%; text-align:center;}			
	#mainRollWrap .mainRoll .movieTxt01{ text-shadow:none;}
    #mainRollWrap .mainRoll .movieTxt02{text-shadow:none;}
	
	/*.swiper-button{display:none;}*/
	.mainRoll .scrollBtn{display:none;}
	
	/* SECTION03*/
	.mContBox01 .mContCate{width:100%; left:0;}
	.mContBox01 .mContCate .mCateBox .cateBox p{font-size:1.8em;}
	
	
	/* SECTION02*/
	.mScr02Txt02::before{width:60%;}
    .mScr02Txt02::after{height:180px;}
	
	
	.mScr02ImgBox{padding:30px 0;}
	.mScr02ImgBox .mScr02Box{width:23%;}	
	.mScr02ImgBox .mScr02Box::before{width:12%; height:1px; background:#ffffff; right:100%; top:110px;}
	.mScr02ImgBox .mScr02Box span{font-size:1rem;}
	
	
	/* SECTION 04 */
	#section04{height:auto !important; padding:100px 0;}
	.mScrBoxWrap .mScr04Box{ width:100%; margin:5px 0;}


	
	
}

@media screen and (max-width:850px){
	
	.sectionbox{padding:0;}
	
	
	#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt01{font-size:2.5em;}
	
	.mVisionWrap{}
	.mVisionWrap .mVisionBox{width:50%; height:50%;}
	.mVisionTxt{position:absolute; height:auto; bottom:20px; font-size:1em;}
	.mVisionTxt span.tit{font-size:1.4em;}
    .mVisionTxt span.tit{padding-bottom:10px;}
	
	
	/* SECTION03*/
	.mContBox01 .mContCate .mCateBox .cateBox p{font-size:1.2em;}
	
	/*SECTION04*/
	#section03 .subContTit03{font-size:3em;}
	
	
}


@media screen and (max-width:640px){
		
		
	#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt01{font-size:2.2em;}
	
	

    	/* SECTION03*/
	.mContBox01 .mContCate .mCateBox .cateBox p{font-size:1em;}
	.mContBox01 .mContCate .mCateBox .cateBox p.cateTxt{font-size:0.8em;}
	.mContBox01 .mContCate .mCateBox .cateBox p.cateMore{font-size:0.8em;}
	
	
	/*SECTION04*/
	#section03 .subContTit03{font-size:2.5em;}
	
	
		/* SECTION02*/
	.mScr02ImgBox{padding:20px 0;}	
	.mScr02ImgBox .mScr02Box span{font-size:0.8rem;}
	
	.mScr02Txt01{padding:20px 0 30px; font-size:0.9rem;}
    .mScr02Txt01 span{font-size:3rem;}
    .mScr02Txt02{padding:20px 0 30px; font-size:0.9rem; line-height:120%;}
    .mScr02Img{padding-top:30px; text-align:center;}

    	/* SECTION02*/
	.mScr02Txt02::before{width:80%; bottom:20px;}
    .mScr02Txt02::after{height:120px; margin-top:-20px;}

	.mScr02ImgBox .mScr02Box::before{top:80px;}

     /* SECTION04*/
	 .mScr04Txt01{padding:20px 0 30px; font-size:3rem; }
    .mScr04Txt01 span{font-size:1.2rem;}
	

}


@media screen and (max-width:480px){
	
	.goDownButton{left:30px;}
	
	#mainRollWrap .mainRoll .swiper-slide .mRollBox .mRollTxt01{font-size:1.8em;}
	#mainRollWrap .mainRoll .swiper-pagination{right:-80px;}
	#mainRollWrap .mainRoll .swiper-button-prev{right:5px;}
	#mainRollWrap .mainRoll .swiper-button-next{right:5px;}
	
	
	
	.mVisionWrap .mVisionBox{width:100%; height:25%;}
	
	
	/*SECTION03*/
	#section03 .coreTit02{display:none;}
	.mContBox01 .mContCate .mCateBox{width:50%; height:50%; background-repeat:no-repeat; background-position:center center; background-size:cover;}

	.mContBox01 .mContCate .mCateBox:first-child{background-image:url(../images/mCont03_bg_01.jpg);}
	.mContBox01 .mContCate .mCateBox:nth-child(2){background-image:url(../images/mCont03_bg_02.jpg);}
	.mContBox01 .mContCate .mCateBox:nth-child(3){background-image:url(../images/mCont03_bg_03.jpg);}
	.mContBox01 .mContCate .mCateBox:nth-child(4){background-image:url(../images/mCont03_bg_04.jpg);}
	
	.mContBox01 .mContCate .mCateBox .cateBox p{padding-top:0;}
	.mContBox01 .mContCate .mCateBox .cateBox p.cateTxt{opacity:1; padding-top:10px;}
	.mContBox01 .mContCate .mCateBox .cateBox p.cateMore{display:none;}
	
	.mContBox01 .mContCate .mCateBox:first-child .cateBox p{color:#000000;}
	
	
	/*SECTION04*/
	#section03 .subContTit03{font-size:2em;}
	
	/*SECTION02*/
	
#section02{height:auto !important; padding:100px 0 80px;}	
.mScr02ImgBox::before{display:none;}
.mScr02ImgBox{flex-wrap:wrap;}
.mScr02ImgBox .mScr02Box{width:48%; margin:5px 0;}

.mScr02Txt02{padding:0px;}
.mScr02Txt02::before{display:none;}
.mScr02Txt02::after{display:none;}
.mScr02ImgBox .mScr02Box::before{display:none;}

.mScr02Txt02 br.tbBr{display:none;}

.mScr02ImgBox .mScr02Box span{padding:10px 0 10px;}
.mScr02ImgBox .mScr02Box span.projectImg img{width:60%;}


	/*SECTION04*/
	
#section04{ padding:100px 0 80px;}	
 .mScr04Txt01{font-size:2.3rem;padding:0;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit {font-size:1.2rem;}

.noticeWrap .noticeCont a{display:flex; width:100%; flex-wrap:wrap;}
.noticeWrap .noticeCont a span{display:inline-block; width:100%;}
.noticeWrap .noticeCont span.contents{font-size:0.9rem;display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;}

.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox{width:100%;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox .customInfo{padding-bottom:10px;}

.mScrBoxWrap .mScr04Box{padding:15px;}	
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn{font-size:1rem;}

.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .customerBox:nth-child(2)::before{width:90%; height:1px; left:5%; top:-2px; display:none;}

.onGoProjectWrap .onGoProjectTR a{width:100%; box-sizing:border-box; padding-right:0;}
.onGoProjectWrap .onGoProjectTR .onGoDate{display:none;}
.onGoProjectWrap .onGoProjectTR a .onGoSubj{font-size:0.9rem;}


.noticeWrap{padding:0;}

	
}





