@charset "utf-8"; 

.Video_Container {
  position:relative;
  height:0;
  padding-bottom:49.977%;
  overflow:hidden}
  
 .Video_Container iframe {
   position:absolute;
   width:100%;
   height:100%;
   top:0%;
   left:0%;
  }



.main_text {position:absolute; text-align:center; left:50%; transform:translateX(-50%); top:40%; z-index:10;}
.main_text ul { position:relative; width:1400rem; margin:0 auto; text-align:center; }
.main_text ul h2 { line-height:1.1; font-size:50rem; font-weight:600; letter-spacing:0rem; color:#fff;}
.main_text ul h3 { line-height:1.5; font-size:50rem; font-weight:600; letter-spacing:0rem; color:#fff;}
.main_bt {margin-top:20rem;}
.main_bt a {margin:0 10rem;}

@media (max-width:1400px){
	.main_text ul {  width:100%; }
}

@media (max-width:800px){
	.main_text { width:100%;}
	.main_text ul h2 { font-size:15rem;font-weight:800;}
	.main_text ul h3 { font-size:15rem;font-weight:800;}
}


/* main visual */
#main_visual{overflow:hidden; position:relative; z-index:1; height:calc(821rem); margin-top:120rem; color:#fff; text-align:center;}
#main_visual .bx-wrapper{height:100%; margin-bottom:0; background:transparent; border:0; box-shadow:none;}
#main_visual .bx-viewport{height:100% !important;}
#main_visual .slider{height:100%;}
#main_visual .roll{}
#main_visual .roll_txt{ width:1400rem; margin:0 auto; text-align:left; }
#main_visual .roll_img{z-index:-1; position:absolute; left:0; top:0; width:100%;height:100%; background-size:cover; background-position:50%;  animation: imagescale 5s infinite; -webkit-animation: imagescale 5s infinite; -moz-animation: imagescale 5s infinite; -o-webkit-animation: imagescale 5s infinite;}
#main_visual .roll01{background-image:url(../img/main/visual01.jpg);}
#main_visual .roll02{background-image:url(../img/main/visual02.jpg);}
#main_visual .roll03{background-image:url(../img/main/visual03.jpg);}
#main_visual .roll{height:100%;}
#main_visual h2{ line-height:1.3; font-weight:300; font-size:55rem; }
#main_visual h2 b{display:block; font-weight:bold;}
#main_visual p{line-height:2.4; margin:290rem 0 0 0; font-size:18rem; letter-spacing:2rem; text-transform:uppercase;}
#main_visual .btn_more{margin-top:50rem}
#main_visual .roll_txt2{display:inline-block; margin-right:80rem; text-align:left;}
#main_visual .bx-controls{ z-index:100; width:100%; text-align:center;}
#main_visual .bx-controls-direction{}
#main_visual .bx-pager{display:inline-block; vertical-align:middle;}
#main_visual .bx-pager > div{display:inline-block;}
#main_visual .bx-pager a{display:inline-block; width:12rem; height:12rem; margin:0 5rem; border:2px solid #fff; font-size:0; text-indent:-9000px; border-radius:50%;}
#main_visual .bx-pager a.active{background:#fff;}
#main_visual .bx-controls-auto{display:inline-block; vertical-align:middle;}
#main_visual .bx-controls-auto > div{display:inline-block;}
#main_visual .bx-controls-auto a{display:inline-block; width:20px; height:20px; margin:0 5px; background-position:center; font-size:0; color:#fff; text-indent:-9000px; background-repeat:no-repeat;}
#main_visual .bx-controls-auto a.bx-start{background-image:url(../img/btn_play.png);}
#main_visual .bx-controls-auto a.bx-stop{background-image:url(../img/btn_pause.png);}
#main_visual .bx-controls-auto a.active{display:none;}

/* 이전다음버튼일때 */
#main_visual .bx-default-pager{display:none; position: absolute; left:0; width: 100%;bottom:30rem;z-index: 60;}
#main_visual .bx-controls-direction{position: absolute; left:0; width: 100%;top:48%;z-index: 60;}
#main_visual .bx-controls-direction a.bx-prev:After{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
#main_visual .bx-controls-direction a:hover{}
#main_visual .bx-controls-direction a{display:block; position:absolute; overflow:hidden; width:28rem; height:46rem; text-indent:-9999px; transition:all 0.2s ease-out 0s;}
#main_visual .bx-controls-direction a:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/layout/icon_btn_arrow.svg) no-repeat 50% 50%;}
#main_visual .bx-controls-direction a.bx-next{right:100rem;}
#main_visual .bx-controls-direction a.bx-prev{left:100rem;}

@keyframes imagescale {
  0% {
    transform: scale(1.2)  rotate(.001deg);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
  }

  100% {
    transform: scale(1)  rotate(.001deg);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
}



    #mainvideo {
		width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #myVideo {
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-color: black;
        /* in case the video doesn't fit the whole page*/
        background-image:
            /* our video */
        ;
        background-position: center center;
        background-size: cover;
        object-fit: cover;
        /*cover video background */
        /*z-index: 3;*/
    }

    #mainvideo {
        position: relative;
        width: 100%;
        /*height: 100%;*/
/*            height: calc(100% - 50px);*/
        /*z-index: 1003;*/
        height: auto;

    }

    #video {
        position: absolute;
        width: 100%;
        height: 100%;
    }


@media all and (max-width:800px){
	#mainvideo video {height:100%;}
}




@media (max-width: 1023px){

.layout-fixed.visual.mo .item-layout{display:block;width:100%;height:0;position:relative;overflow:hidden;padding-bottom:142.533333333333333%}
.layout-fixed.visual.mo .item-layout img{position:absolute;top:0;left:0;width:100%;height:100%}
.layout-fixed.visual.mo .item{position:absolute;top:0;left:0;width:100%;height:100%; }
.layout-fixed.visual.mo .item img{position:absolute;top:0;left:0;width:100%}

.main-visual-info{width:100%;text-align:center;position:absolute;top:50%;left:0;z-index:1;margin-top:-80rem}
.main-visual-txt .txt01{font-size:1.8em;font-weight:700;color:#fff;line-height:1.4; display:block;}
.main-visual-txt .txt02{font-size:1.8em;font-weight:700;color:#fff;margin-left:20px;margin-left:2rem;line-height:1.4}
.main-visual-txt .txt03{display:block;}
}


/* main content */
.main-content{margin-top:-8rem;}
.main-content *{}

.main-menu__list{display:grid; justify-content:center; align-items:center; text-align:center; grid-template-columns:repeat(3, 1fr);}
.main-menu__list > li{position:relative; background:#fff; background-size:cover; min-height:410rem;}
.main-menu__list > li a:before{opacity:0; content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:#324471;  transition:0.3s}
.main-menu__list > li :hover:before{opacity:0.3; transition:0.3s}
.main-menu__list > .color_white > *,
.main-menu__list > .color_white p{color:#fff;}
.main-menu__list > .color_white span{color:#fff;}
.main-menu__list > li {display:flex;align-items:center;padding: 120rem 0rem;flex-direction:column;font-style:normal;}
.main-menu__list > li a *{font-style:normal;}
.main-menu__list > li i{font-size: 12rem;display: block;margin-top: 25rem;}
.main-menu__list > li strong{margin:10rem 0; font-weight:700; font-size:30rem;}
.main-menu__list > li p{font-weight:500; font-size:22rem; word-break:keep-all; color:#666;}
.main-menu__list > li p:before {content: ""; display:block; margin:20px auto; width:1rem; height:30rem; background:#ddd; }
.main-menu__list > li span{margin-top:20rem; font-weight:300; font-size:20rem; word-break:keep-all; color:#666;}
.main-menu__list img{height:75rem;}

@media (max-width:1700px){
	.main-facilities__inner{width:100%; padding-left:30rem;}
	
	#main_visual .bx-controls-direction a.bx-prev{left:20rem;}
	#main_visual .bx-controls-direction a.bx-next{right:20rem;}
}

@media (max-width:1480px){
	#main_visual .roll_txt{width:80%;}
	
	.main-board__notice{width:65%; margin-right:5%;}
	.main-board__contact{width:30%;}
}

@media (max-width:1023px) {
	#main_visual{margin-top:80rem;}
	#main_visual h2{font-size:40rem}

	.main-content{display:block;}
	.wrap{width:100%; padding:0 20rem}	
	
	.main-company .main-company__img{width:45%; margin-right:5%;}
	.main-company__text{width:50%;}	

	.main-menu__list{grid-template-columns: repeat(3, 1fr);}
	.main-menu__list > .main-menu__item04,
	.main-menu__list > .main-menu__item07{background:#f1e9e1;}

	.main-facilities__text{margin-top:0}

	.main-board__notice{width:50%;}
	.main-board__contact{width:45%;}

}


@media (max-width:860px){
	#main_visual .bx-default-pager{display:block;}
	#main_visual .bx-controls-direction{display:none;}

	.main-company{padding:60rem 0; background:url(../img/main/img_logobg.jpg) no-repeat 50% 5%;}
	.main-company .main-company__inner{flex-direction: column;}
	.main-company .main-company__img{width:100%; margin-right:0}
	.main-company .main-company__img img{width:100%;}
	.main-company .main-company__text{width:100%; margin-top:30rem; text-align:center;}

	.main-menu__list{grid-template-columns: repeat(1, 1fr);}
	.main-menu__list img{height:60rem;}
	.main-menu__list > li a{padding:50rem 5rem}
	
	.main-facilities{padding:60rem 0}
	.main-facilities__text{ float:none; width:100%; margin-bottom:30rem; text-align:center;}
	.main-facilities__inner{padding:0 20rem;}

	.main-board{margin:60rem 0}
	.main-board__inner{ display:block;}
	.main-board__notice{width:100%; margin-right:0}
	.main-board__contact{width:100%; margin-top:30rem;}


}

@media (max-width:540px) {
	#main_visual{margin-top:80rem; height:300rem}
	#main_visual .roll{padding-top:0}
	#main_visual p{margin:50rem 0 0 ; font-size:12rem}
	#main_visual .btn_more{margin-top:25rem}
	
	.main-company{padding:30rem 0}
	.main-company .main-company__text h3{margin-bottom:15rem; font-size:22rem; word-break: keep-all;}
	
	.main-board__notice{margin-top:25rem}
	.main-facilities{padding:30rem 0}
	.main-facilities__text h3{font-size:22rem}
	.main-facilities__text p{margin:10rem 0 15rem 0}
	.main-board__contact strong{font-size:30rem}
	
	.main-menu__list{display:flex;flex-wrap: wrap;align-items: stretch;}
	.main-menu__list > li a:before{display:none;}
	.main-menu__list > li a{padding:50rem 15rem}
	.main-menu__list > li strong{font-size:25rem; font-weight:bold; margin: 15rem 0 10rem 0}
	#main_visual .roll{    background-position: 40%;}

	.main-menu__list img{height:40rem;}
	.main-menu__list > li p{font-size:20rem;}
	.main-menu__list > li span{font-size:18rem;}
	
	.main-board{margin:30rem 0}
	h3.main-board__title{margin-bottom:10rem; font-size:22rem;font-weight: bold;}
	.main-board__notice .pic_li_lt .lt_more{top:7rem}
	.main-board__contact > a{font-size:30rem}
	.main-board__contact ul li a{font-size:12rem}
}


#whoSec { text-align:center; padding:50rem 0;}
#whoSec .whoSecWrap {display: inline-block;overflow: visible;}
#whoSec .whoSecWrap .wsRight {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#whoSec .whoSecWrap .wsRight .sub {width: calc(100% /3 - 40rem); margin-right:40rem; margin-top: 100rem; opacity: 0; -webkit-transition: all 1s ease; transition: all 1s ease; }

#whoSec .whoSecWrap .wsRight .sub .thumb {width: 430rem; height: 700rem; float: left; position: relative; overflow: hidden; border:5px solid #324471; border-radius: 50px 0px 50px 0;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbWrap1 {background: url(../img/sec03_01.jpg) no-repeat; }
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbWrap2 {background: url(../img/sec03_02.jpg) no-repeat;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbWrap3 {background: url(../img/sec03_04.jpg) no-repeat;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbWrap4 {background: url(../img/sec03_05.jpg) no-repeat;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbWrap5 {background: url(../img/sec03_03.jpg) no-repeat;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbWrap {width:100%; height:100%; transition:0.5s;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbTxt { position: absolute; width:100%; padding:20rem; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbTxt h3 {transform: rotate(-0.03deg); font-size: 30rem; color: #324471; font-weight: 700;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbTxt p {transform: rotate(-0.03deg); font-size: 22rem; color: #333; font-weight: 700; padding:20rem 0;}
#whoSec .whoSecWrap .wsRight .sub .thumb .thumbTxt span {transform: rotate(-0.03deg); font-size: 17rem; color: #666; font-weight: 500; display:block;}
#whoSec .whoSecWrap .wsRight .sub .txt {position:absolute; background:#324471; text-align:center; right:0; transform:translateX(0%); color:#fff; font-weight:800; padding:10rem;}
#whoSec .whoSecWrap .wsRight .sub.aos-animate {opacity: 1; margin-top: 0;}
#whoSec .whoSecWrap .wsRight .sub:hover  .thumbWrap {transform:scale(1.2); transition:0.5s;}


@media( max-width:1200px) {
	#whoSec .whoSecWrap .wsRight {width:100%;}
	#whoSec .whoSecWrap .wsRight .sub {min-width: 320px; height: auto; }
	#whoSec .whoSecWrap .wsRight .sub .thumb {width: calc(100% - 20px); height: 600rem;}
}
@media( max-width:1100px) {
	#whoSec .whoSecWrap .wsLeft {height: auto;}
	#whoSec .whoSecWrap .wsRight {display: block; flex-wrap: initial; min-height: 0; height: auto;}
	#whoSec .whoSecWrap .wsRight .sub {width: 100%; margin-right: auto !important; }
	#whoSec .whoSecWrap .wsRight .sub .thumb {height: 500rem; margin-bottom:20rem;}
	#whoSec .whoSecWrap .wsRight .sub:nth-child(2n) {-webkit-transform: translateY(0px); transform: translateY(0px);}
	#whoSec .whoSecWrap .wsRight .sub:nth-child(2n-1) {-webkit-transform: translateY(0px); transform: translateY(0px);}
	#whoSec .whoSecWrap .wsRight .sub .thumb .thumbWrap {background-size: cover;}
}

@media( max-width:500px) {
	#whoSec .whoSecWrap .wsRight .sub .thumb {height: 600rem;}
}



#mainAbout {width:100%;  position:relative; margin-top:-8rem; }
.mainAbout_con {background: url("../img/main/main_step.jpg") center top no-repeat; min-height:750rem; height:100%; width:100%;  }
.mainAbout_con_inner {width:100%;  position:relative; display:flex; flex-wrap: wrap;  justify-content: space-between; border-right:1px solid rgba(255,255,255,0.1) }
.mainAbout_list {flex:1; text-align:center; position:relative; height:100%; min-height:750rem; border-left:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0); transition: all 0.6s; }
.mainAbout_list .mainCompany_list_txtbox {position:absolute; width:100%; left:50%; top:15%; transform: translate(-50%, 0%); transition: all 0.6s; vertical-align:top;}
.mainAbout_list .c_icon1 {background: url("../img/main/step_icon1.png") center top no-repeat; width:100rem; height:100rem; display:block; margin:0 auto;}
.mainAbout_list .c_icon2 {background: url("../img/main/step_icon2.png") center top no-repeat; width:100rem; height:100rem; display:block; margin:0 auto;}
.mainAbout_list .c_icon3 {background: url("../img/main/step_icon3.png") center top no-repeat; width:100rem; height:100rem; display:block; margin:0 auto;}
.mainAbout_list .c_txt1 {color:#fff; font-size:30rem; display:block; font-weight:800;}
.mainAbout_list .c_txt2 {color:#fff; font-size:22rem;  display:block; font-weight:800; padding:20rem 0;}
.mainAbout_list .c_txt3 {color:#fff; font-size:17rem;  display:block; font-weight:400;}

.c_more_btn {cursor:pointer; left:50%; transform:translateX(-50%); position:absolute; bottom:0; margin-bottom:100rem;  padding:10rem 25rem; background-color:#324471; font-weight:500; border:2px solid #324471; border-radius:30rem; color:#fff; font-size:15rem}

a.btn2_more:hover{background-color:#fff; border:2px solid #324471; color:#324471; }


.mainAbout_list:hover {background:rgba(0,0,0,0.3); transition: all 0.6s;}
.mainAbout_list:hover .mainCompany_list_txtbox {margin-top:-70rem; transition: all 0.6s;}
.mainAbout_list:hover .c_more_btn {opacity:1; transition: all 0.6s; margin-top:50rem;}

@media screen and (max-width:1050px){
     .mainAbout_list .c_txt1 { font-size:20rem;}
	 .mainAbout_list .c_txt2 { font-size:18rem;}
	 .mainAbout_list .c_txt3 { font-size:15rem;}
	 .mainAbout_con {background: url("../img/main/main_step_m.jpg") center top no-repeat; }
}

@media screen and (max-width:900px){
     .mainAbout_list {flex:1 1 100%;  border-bottom:1px solid rgba(255,255,255,0.3); border-right:0; border-left: 0;}

	 .mainAbout_list .c_txt1 {margin-top:0rem;}

}
