h3.tit {font-size:2.50em}
h3.tit + p {font-size:1.11em;  margin-top:10px; font-weight:300}
h3.flex {align-items:flex-end}
h3.flex a {margin-left:auto; display:flex; align-items:center;  font-size:16px; font-weight:400}
h3.flex a:after {content:'';  flex-shrink:0; margin-left:10px;  width:28px; height:29px;  background:url('/common/img/arrow.svg') no-repeat right; background-size:100%}
h3.flex a:hover:after {  background:url('/common/img/arrow_c.svg') no-repeat right; background-size:100% }

 @media all and (max-width:900px) {
  
	h3.tit {font-size:2em}
	h3.tit + p {font-size:1em; }
	h3.flex a {font-size:14px}
	h3.flex a:after {   width:23px; height:23px;  }

}

#main section {font-size:18px; line-height:1.35}
.vi {width:100%; height:100vh; overflow:hidden }
.vi .in {position:relative; z-index:99.999}
.vi .t {width:100%; z-index:999999; color:#fff;  position:absolute; left:50%; top:37%; transform: translate(-50%, 0);}
.vi .t p {font-size:30px}
.vi .t b {font-size:70px; width:100%; display:inline-block; margin-top:11px}
.vi .iframe_div {width:100%; height:100%;   position:absolute; top:0; left:0; overflow:hidden }
.vi .iframe_div video {   object-fit: cover; width: 100%;  height: 100%; }

.rgba_bg {background:rgba(0,0,0,.5); width:100%; height:100%; position:absolute; left:0; top:0; z-index:999}
.rgba_bg2 {background:url('/common/img/vi_bg1.jpg') no-repeat; width:100%; height:100%; position:absolute; left:0; top:0; z-index:9}



.swiper {height:100vh}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {max-width: 1547px; margin: 0 auto;   left:50%; transform: translate(-50%, 0); bottom:200px; text-align:left}
.swiper-pagination-bullet {width:12px; height:12px;   background-color:#fff; opacity:1}
.swiper-pagination-bullet-active {width:50px; border-radius:30px; background-color:var(--main_c)}


@media all and (max-width:1547px) {

  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {padding-left:3%; box-sizing:border-box;}


}


@media all and (max-width:900px) {
		.vi {height:100vw}
		.vi .t p {font-size:1em}
		.vi .t b {font-size:2em; width:100%;  }

		.swiper {height:100%; }
		.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {display:none}
		
		.vi .iframe_div {width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; background:none !important }
 


}


.section1 {width:100%; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; position:Relative; color:#2F2F2F}

.section1 * {transition: all 0.3s ease-out;}

.section1 ul {width:100%; height:100%; }
.section1 ul li { cursor:pointer; box-sizing:border-box; transition: all 0.3s ease-out;}
.section1 .bg {position:absolute; right:0; top:50%;  transform: translate(0, -50%); opacity:0;  z-index:-99}
.section1 ul li .box { width:1547px; margin:0 auto; position:relative; z-index:99999; opacity:.3;  box-sizing:border-box; }
.section1 ul li .box_in {border-left:3px solid #ddd; padding:30px 0;  padding-left:50px;   width:650px; box-sizing:border-box }


.section1 ul li h4 {font-size:2.22em;  display:flex; width:100%; align-items:center }
.section1 ul li h4:after {content:'';  margin-left:auto;  width:35px; height:35px; display:inline-block;  background:url('/common/img/arrow.svg') no-repeat right; flex-shrink:0; background-size:cover}
.section1 ul li.active h4:after {  background:url('/common/img/arrow_c2.svg') no-repeat right; background-size:cover }

.section1 ul li p {margin-top:20px; font-size:0.94em; color:#2F2F2F; line-height:1.3 }
.section1 ul li ul {display:flex; align-items:flex-end;  width:100%; margin-top:20px; }
.section1 ul li ul li { width:20%; font-size:0.88em; font-weight:700; text-align:center; border-left:none; padding:0}
.section1 ul li ul li img:nth-child(2) {display:none}
.section1 ul li ul li:hover img:nth-child(2) {display:inline}
.section1 ul li ul li:hover img:nth-child(1) {display:none}

.section1 ul li.active .box { opacity:1}
.section1 ul li.active .box_in {border-left:3px solid var(--main_c); }
.section1 ul li.active .bg {opacity:1}
 
@media all and (max-height:800px) {
  .section1 { height:125vh}

}

@media all and (max-width:1547px) {
 	   .section1 ul li .box { width:100%;}
}

@media all and (max-width:900px) {
 		.section1 .in {padding:0}
		.section1 {height:auto; padding:0; display:inline-block}
		

		.section1 ul {width:100%; } 
		.section1 ul > li { height:350px; display:flex; align-items:center; position:Relative}
		.section1 ul li .box {padding:0 4% }
		.section1 ul li.bg1 { background:url('/common/img/section1_bg1.png') no-repeat center; background-size:cover}
         .section1 ul li.bg2 { background:url('/common/img/section1_bg2.png') no-repeat center; background-size:cover}
         .section1 ul li.bg3 { background:url('/common/img/section1_bg3.png') no-repeat center; background-size:cover}
		 .section1 ul li:after {content:''; width:100%; height:100%; background:rgba(255,255,255,.7); position:absolute; left:0; top:0}
		 .section1 ul li.active .box_in {border-left:none }
		 .section1 ul li .box_in {width:100%; padding:0;  border:none; position:relative; z-index:99}


		.section1 ul li h4 {font-size:1.3em; }
		.section1 ul li h4:after { width:28px; height:28px; margin-left:10px }
 		.section1 ul li p {font-size:.92em}
		.section1 ul li ul { padding-top:0; flex-wrap:wrap} 
		.section1 ul li ul li {background:none !important;  height:auto; width:20%; font-size:14px; font-weight:400;  display:inline-block }
 		.section1 ul li ul li:after {display:none}
 		.section1 ul li ul li img:nth-child(1) {display:none}
 		.section1 ul li ul li img:nth-child(2) {display:inline}

		.section1 .bg {  display:none}

}
/*VR*/
.section2 {  padding:80px 0; background:url('/common/img/main_section2_bg.png') no-repeat center; background-size:cover; width:100%; display:inline-block; color:#fff; cursor:pointer}
.section2 h3 {transition: all 0.3s ease-out; font-size:2.50em; cursor:pointer;  display:inline-block; align-items:center;  color:#fff}
.section2 h3 svg  {width:29px; height:29px;  margin-left:5px; vertical-align:middle; margin-bottom:5px }
/* .section2:hover h3  {color:var(--main_c) }
.section2:hover h3 path  {stroke: var(--main_c)   } */


 @media all and (max-width:900px) {
		.section2 {position:relative; margin-top:80px; padding:70px 0;  background:url('/common/img/main_section2_bg_m.png') no-repeat center;  background-size:cover;}
		.section2:after {content:''; width:100%; height:100%; background:rgba(0,0,0,.5); display:inline-block; position:absolute; left:0; top:0}
		.section2 h3 {position:relative; z-index:9; font-size:1.6em;   }
		.section2 h3 svg  {width:35px; }
		.section2 p {position:relative; z-index:9;  }
		.section2 h3 + p {margin-bottom:0}


}



/*라이브러리*/
.section3 {margin-top:200px; width:100%; display:inline-block; position:relative}
.section3:after { content:''; position:absolute; width:580px; height:580px; display:inline-block; left:20px; top:-110px; background:url('/common/img/main_section3_bg.png') no-repeat center; background-size:cover; z-index:-9}


 @media all and (max-width:900px) {

  		.section3 {margin-top:110px; }
		.section3:after { width:70vw; height:70vw; top:-20vw}


}
/*뉴스룸*/
.section4 {margin-top:180px;  width:100%; display:inline-block}

 @media all and (max-width:900px) {

  		.section4 {margin-top:80px; }

}

/*문의하기*/
.section5 {margin-top:180px;  background-color:#ddd; border-radius:50px 50px 0 0; padding:80px 0 130px 0; background:url('/common/img/main_form_bg.png') no-repeat center; background-size:cover}
.section5 .input_div {margin-top:30px; margin-bottom:20px}
.section5 .input_div div {background-color:#fff; display:flex;  margin-right:20px; border-radius:50px; overflow:hidden }
.section5 .input_div div a {width:150px; font-size:16px; margin:3px; text-align:center; color:#fff;  line-height:50px; border-radius:50px; display:inline-block; background:var(--main_c)  }
.section5 .input_div div input { border:none; padding-left:30px; font-size:16px; }
.section5 .input_div.type2 div {background:none; line-height:50px; border-radius:0; justify-content:flex-start }
 
/* input box color */


.section5  p:last-child {font-size:.89em}
.section5 .styled-checkbox + label:before {background:none; border:2px solid #333; box-sizing:border-box; }
.section5 .input_div div a:hover {background-color:#2F2F2F; color:var(--main_c); }

    
.section5 .styled-checkbox:checked + label:after {
   content: "";
  position: absolute;
   left: 6px; 
    top: 50%;
	margin-top:-7px;
    width: 5px;
     height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
 }

 
.section5 .styled-checkbox:checked + label:before {
  background: var(--main_c);
  border:2px solid  var(--main_c);
}
 
 
 


@media all and (min-width:900px) {
		.section5 .input_div div:nth-child(1) input {width:135px;}
		.section5 .input_div div:nth-child(2) input {width:235px}
		.section5 .input_div div:nth-child(3) input {width:400px}

		.section5 .input_div.type2 div:nth-child(1)   {width:165px; font-size:1.2em; font-weight:600}
		.section5 .input_div.type2 div:nth-child(2)   {width:265px; background-color:#fff; justify-content:center; border-radius:0}
		.section5 .input_div.type2 div:nth-child(3)   {width:200px; border-radius:10px;   justify-content:flex-start}
		.section5 .input_div.type2 div input {padding-left:20px; font-size:1.05em; }
 }

@media all and (max-width:900px) {
		.section5 {margin-top:100px; border-radius:30px 30px 0 0}
		.section5 .input_div div {width:100%; background:none; justify-content:center;   border-radius:0; margin-bottom:10px; margin-right:0; flex-wrap:wrap}
		.section5 .input_div div input {width:100%; height:50px; border-radius:50px; padding-left:15px}
		.section5 .input_div div {align-items:center}
		.section5 .input_div div a {width:150px;  font-size:15px; margin:0;   }
		.section5 .input_div div:last-child input {  margin-bottom:20px}
	    .section5 .input_div.type2 div:nth-child(1)   {display:none}
 
}