@charset "euc-kr";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/notosans.css); /* ³ëÅä»ê½º*/


/* main page*/
#mainWrap{width:100%; height:100%; overflow:hidden; position:relative; z-index:1;}
.mainFrame{width:100%; height:100%; position:relative; z-index:1;}

.mainScreen01{width:100%; height:100%; overflow:hidden; position:absolute; top:0; left:0; z-index:2; background:url(../images/mainBg_01.jpg) no-repeat center center; background-size:cover !important;}
.mainScreen02{width:100%; height:100%; overflow:hidden; position:absolute; top:100%; left:0; z-index:2; background:url(../images/mainBg_02.jpg) no-repeat center center; background-size:cover !important;}
.mainScreen03{width:100%; height:100%; overflow:hidden; position:absolute; top:200%; left:0; z-index:2; background:url(../images/mainBg_03.jpg) no-repeat center center; background-size:cover !important;}
.mainScreen04{width:100%; height:100%; overflow:hidden; position:absolute; top:300%; left:0; z-index:2; background:url(../images/mainBg_04.jpg) no-repeat center center; background-size:cover !important;}

.screenWrap{width:1150px; margin:0 auto; height:100%; position:relative;}

#mPageNav{width:170px; position:fixed; top:50%; margin-top:-64px; right:0; z-index:100;}
#mPageNav ul{width:100%;}
#mPageNav li{display:inline-block; width:100%; height:32px; position:relative; cursor:pointer;}
#mPageNav li a{display:inline-block;}
#mPageNav li span{display:inline-block;}
#mPageNav li span.pageTit{padding-left:55px; color:#fff; font-size:15px; line-height:30px; padding-top:2px; position:relative;}
#mPageNav li span.pageTit span.tit{display:none;}
#mPageNav li span.pageTit::before{content:''; display:inline-block; width:3px; height:3px; background:#ffffff; position:absolute; top:15px; left:65px;}
#mPageNav li span.pageBar01{position:absolute; bottom:0; right:100px; height:3px; background:#ffffff; width:32px;}
#mPageNav li span.pageBar02{position:absolute; bottom:1px; right:0px; height:1px; background:#ffffff; width:94px;}


#mPageNav li span.pageBar01{-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;}


#mPageNav li.on span.pageTit{color:#fff;}
#mPageNav li.on span.pageTit span.tit{display:inline-block; padding-left:25px;}
#mPageNav li.on span.pageBar01{transition:0.3s; background:#e22a27; width:62px;}
#mPageNav li.on span.pageBar02{background:#e22a27;}
#mPageNav li.on span.pageTit::before{display:none;}

#mPageNav li:hover span.pageTit{color:#fff;}
#mPageNav li:hover span.pageTit span.tit{display:inline-block; padding-left:25px;}
#mPageNav li:hover span.pageBar01{transition:0.3s; background:#e22a27; width:62px;}
#mPageNav li:hover span.pageBar02{background:#e22a27;}
#mPageNav li:hover span.pageTit::before{display:none;}

#mPageNav li.active span.pageTit{color:#fff;}
#mPageNav li.active span.pageTit span.tit{display:inline-block; padding-left:25px;}
#mPageNav li.active span.pageBar01{transition:0.3s; background:#e22a27; width:62px;}
#mPageNav li.active span.pageBar02{background:#e22a27;}
#mPageNav li.active span.pageTit::before{display:none;}

#mScroll{width:56px; height:85px; position:fixed; z-index:100; background:url(../images/scroll.png) no-repeat center center; bottom:0; left:50%; margin-left:-28px; cursor:pointer; cursor:pointer; display:none;}
#mScroll:hover{ background:url(../images/scroll_02.png) no-repeat center center;}
#mScroll a{display:inline-block; width:100%; height:100%;}

.active #mScroll{display:block;}

#sScroll{width:56px; height:85px; position:fixed; z-index:100; background:url(../images/main/scroll.png) no-repeat center center; bottom:0; left:50%; margin-left:-28px; cursor:pointer; cursor:pointer;}
#sScroll:hover{ background:url(../images/main/scroll_02.png) no-repeat center center;}
#sScroll a{display:inline-block; width:100%; height:100%;}



.mScroll02{background:url(../images/scroll03.png) no-repeat center center !important; position:absolute !important;}
.mScroll02:hover{ background:url(../images/scroll03_02.png) no-repeat center center !important;}






/*main screen01*/

.section{background-position:center center; background-size:cover;}

#section0{background:#000000;}
#section1{background:url(../images/main/mainBg_01.jpg); background-position:center center; background-size:cover;}
#section2{background:url(../images/main/mainBg_02.jpg); background-position:center center; background-size:cover;}
#section3{background:url(../images/main/mainBg_03.jpg); background-position:center center; background-size:cover;}


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

.mBtn{display:inline-block; box-sizing:border-box; width:200px; padding:12px 30px; line-height:24px; font-size:20px; text-align:left; background-repeat: no-repeat; background-position:160px center;}

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


.mBtn02{color:#fff; background-image:url(../images/main/blet_arrow02.png);  background-color:none; border:1px solid #ffff; text-align:left; margin-left:50px;}
.mBtn02: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:60px; line-height:70px; font-weight:bold; text-align:center;}
.mScr02Txt01 span{font-size:24px; font-weight:normal;}
.mScr02Line{width:100px; height:1px; background:#fff; margin:0 auto;}
.mScr02Txt02{padding:30px 0 50px; color:#fff; font-size:30px; line-height:50px; text-align:center;}
.mScr02Txt02 span{font-weight:bold; color:#e22a27; font-size:40px;}
.mScr02Btn{text-align:center;}
.mScr02Img{padding-top:50px; text-align:center;}

.mScr02ImgBox{padding-top:50px; text-align:center; position:relative; height:294px;}
.mScr02ImgBox::before{width:100%; height:1px; position:absolute; z-index:1; top:162px; left:0; border-bottom:1px dashed #ffffff; content:'';}
.mScr02ImgBox .mScr02Box{width:244px; height:244px; border-radius:100%; color:#ffffff; font-size:22px; line-height:24px; box-sizing:border-box; padding-top:170px;  display:inline-block; border:2px solid #e22a27;
                         background-repeat:no-repeat; background-position:center top; background-color:#e22a27; box-shadow:1px 1px 5px #cccccc; display:inline-block; float:left; margin-left:58px; position:relative; z-index:2;}
.mScr02ImgBox .mScr02Box01{background-image:url(../images/main/dIcon_01.png); margin-left:0;}
.mScr02ImgBox .mScr02Box02{background-image:url(../images/main/dIcon_02.png); background-color:#5b1b1b; border:2px solid #5b1b1b;}
.mScr02ImgBox .mScr02Box03{background-image:url(../images/main/dIcon_03.png);}
.mScr02ImgBox .mScr02Box04{background-image:url(../images/main/dIcon_04.png); background-color:#5b1b1b; border:2px solid #5b1b1b;}
.mScr02ImgBox .mScr02Box:hover{border:2px solid #ffffff;}


.scrScreen03{position:relative;}
.screenTit{position:absolute; top:0; left:0; z-index:20;}
.mScreenBgWrap{width:100%; height:100%; position:absolute; z-index:1; top:0; left:0; overflow:hidden;}
.mScreenBg{width:100%; height:100%; position:relative; z-index:1;}
.mScreenBg .mScreen{width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; position:absolute; top:100%; left:0;}
.mScreenBg .mScreen01{background-image:url(../images/main/mainBg03_01.jpg);}
.mScreenBg .mScreen02{background-image:url(../images/main/mainBg03_02.jpg);}
.mScreenBg .mScreen03{background-image:url(../images/main/mainBg03_03_02.jpg);}
.mScreenBg .active{top:0;}

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


.mScr03Txt01{padding:30px 0 50px; color:#fff; font-size:60px; line-height:70px; font-weight:bold; text-align:center;}
.mScr03Txt01 span{font-size:24px; font-weight:normal;}
.mScr03Line{width:100px; height:1px; background:#fff; margin:0 auto;}
.mScr03Btn{text-align:center;}
.mScrBoxWrap{width:100%; margin-top:30px; text-align:center;}
.mScrBoxWrap .mScr03Box{ display:inline-block; width:374px; height:508px; padding:0 15px 12px 0; background:url(../images/main/contBoxBg_02.png) no-repeat; margin-left:34px;}
.mScrBoxWrap .mScr03Box:first-child{margin-left:-9px;}
.mScrBoxWrap .mScr03Box .mScr03Icon{padding-top:70px; height:200px; text-align:center;}
.mScrBoxWrap .mScr03Box .mScr03Icon span.off{display:inline-block;}
.mScrBoxWrap .mScr03Box .mScr03Icon span.on{display:none;}
.mScrBoxWrap .mScr03Box .mScr03Tit{padding:20px 0; color:#292929; font-weight:600; font-size:24px; text-align:center;}
.mScrBoxWrap .mScr03Box .mScr03Line02{width:50px; height:1px; background:#e22a27; margin:0 auto;}
.mScrBoxWrap .mScr03Box .mScr03Txt{padding:20px 12px; color:#292929; font-size:18px; line-height:24px; text-align:center;}


.mScrBoxWrap .mScr03Box:hover{background:url(../images/main/contBoxBg_01.png) no-repeat;}
.mScrBoxWrap .mScr03Box:hover .mScr03Icon span.off{display:none;}
.mScrBoxWrap .mScr03Box:hover .mScr03Icon span.on{display:inline-block;}
.mScrBoxWrap .mScr03Box:hover .mScr03Tit{color:#fff;}
.mScrBoxWrap .mScr03Box:hover .mScr03Line02{background:#fff;}
.mScrBoxWrap .mScr03Box:hover .mScr03Txt{color:#fff;}

.mScrBoxWrap .mScr03BoxAct{background:url(../images/main/contBoxBg_01.png) no-repeat;}
.mScrBoxWrap .mScr03BoxAct .mScr03Icon span.off{display:none;}
.mScrBoxWrap .mScr03BoxAct .mScr03Icon span.on{display:inline-block;}
.mScrBoxWrap .mScr03BoxAct .mScr03Tit{color:#fff;}
.mScrBoxWrap .mScr03BoxAct .mScr03Line02{background:#fff;}
.mScrBoxWrap .mScr03BoxAct .mScr03Txt{color:#fff;}


.mScr04Txt01{padding:30px 0 50px; color:#fff; font-size:60px; line-height:70px; font-weight:bold; text-align:center;}
.mScr04Txt01 span{font-size:24px; font-weight:normal;}
.mScr04Line{width:100px; height:1px; background:#fff; margin:0 auto;}

.mScrBoxWrap .mScr04Box{ display:inline-block; width:353px; height:470px; padding:0; margin-left:39px;}
.mScrBoxWrap .mScr04Box:first-child{margin-left:0;}
.mScrBoxWrap .mScr04Box .mScr04Img{height:200px; width:100%; overflow:hidden; text-align:center;}
.mScrBoxWrap .mScr04Box .mScrTxtBox{width:353px; padding:25px 25px; background:#fff; height:272px; overflow:hidden;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Tit{width:100%; height:25px; padding:0px 0 40px; line-height:25px; font-size:22px; font-weight:600; color:#292929; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.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%; height:157px; padding-top:20px;line-height:24px; font-size:16px;color:#292929; text-align:center; overflow:hidden;}

.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer{width:100%; text-align:left;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .tel{padding-bottom:10px; font-weight:600; font-size:30px; letter-spacing:-0.4;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .tel span{display:inline-block; width:100px; font-weight:400; font-size:18px; padding-top:10px;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .time{padding-bottom:20px; padding-top:10px; font-weight:400; font-size:16px; line-height:24px; letter-spacing:-0.4;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .time span{font-weight:bold; letter-spacing:0;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .time span.red{color:#c71313;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap{width:100%;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn{width:48%; display:inline-block; box-sizing:border-box; padding:5px 0; text-align:center; color:#ffffff; font-size:18px;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn01{background:#c71313; border:1px solid #c71313;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn01:hover{background:#ffffff; color:#c71313;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn02{background:#000000; margin-left:2%; border:1px solid #000000;}
.mScrBoxWrap .mScr04Box .mScrTxtBox .mScr04Customer .btnWrap .btn02:hover{background:#ffffff; color:#000000;}


.onGoProjectWrap{width:100%; float:left; padding:20px 0; background:#fff;}
.onGoProjectWrap .onGoProjectTR{width:100%; padding:5px 0; float:left;}
.onGoProjectWrap .onGoProjectTR .onGoSubj{float:left; width:205px; display:inline-block; padding-left:15px; background:url(../images/dotRed.png) no-repeat 0 10px; font-size:17px; color:#292929; line-height:30px; font-weight:600; overflow:hidden;
                                          white-space:nowrap; text-overflow:ellipsis;}
.onGoProjectWrap .onGoProjectTR .onGoDate{float:right; display:inline-block; font-size:15px; color:#121212; line-height:24px;}



.noticeWrap{width:100%; float:left; padding:0px 0 20px; positon:relative;}
.noticeWrap .noticeCenter{width:360px; float:left; margin-left:20px; position: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:18px; color:#191919; line-height:24px; text-align:left;}




/* main Swipe */
#mSwipeWrap{width:100%; height:100%; float:left; position:relative; overflow:hidden; z-index:1;}
#mSwipeWrap .mSwipe{width:100%; height:100%; float:left; position:relative; z-index:1; overflow:hidden;}
#mSwipeWrap .mSwipe .swiper-container{width:100%; height:100%;}
#mSwipeWrap .mSwipe .swiper-wrapper{width:100%; height:100%;}
#mSwipeWrap .mSwipe .swiper-slide{width:100%; height:100%; background:#000000;}

#mSwipeWrap .mSwipe .swiper-slide .swipeBoxWrap{width:100%; height:100%; position:relative; overflow:hidden;}

#mSwipeWrap .mSwipe .swiper-slide .swipeVideo{
	    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;
		
		}
		
#mSwipeWrap .mSwipe .swiper-slide .movie03{opacity:0.6;}


#mSwipeWrap .mSwipe .swiper-slide .swipeBoxWrap .swipeBox{width:100%; display:inline-block; position:absolute; z-index:10; top:30%; left:10%; opacity:0; padding-top:100px;
        -webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);


}
#mSwipeWrap .mSwipe .swiper-slide-active .swipeBoxWrap .swipeBox{padding-top:0px; opacity:1;}

/* Hiding video controls
	* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
	* --------------------------------------- */
	video::-webkit-media-controls {
	  display:none !important;
	}

.swipeBoxWrap .swipeBox .mTxt01{ font-size:18px; color:#e22a27; line-height:24px; text-align:left; width:100%; text-shadow:0 0 10px #FFF;}
.swipeBoxWrap .swipeBox .mTxt02{ font-size:40px; color:#ffffff; line-height:50px; text-align:left; width:100%; text-shadow:0 0 10px #999999;}



.mSwipe .swiper-button-next{background-image:url(../images/arrow03R.png); background-size:50px 50px; width:50px; height:50px;}
.mSwipe .swiper-button-prev{background-image:url(../images/arrow03L.png);  background-size:50px 50px; width:50px; height:50px;}


.mSwipe .swiper-pagination{top:50% !important; left:10% !important; width:80%; text-align:left;}
.mSwipe .swiper-pagination-bullet{width:20px; height:20px; background:#ffffff; opacity:1 !important;}
.mSwipe .swiper-pagination-bullet-active{background:#e22a28;}



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