@charset "UTF-8";
html {height:100%}
body {height:100%; background-color:#111}

article.sub {width:100%;  }
 .sub_vi_top_wrap {width:100%; position:relative;     height:570px;display:inline-block; background-color:#111;}

.product .sub_vi_top_wrap {height:100%; background-color:#0d1a34;  }

section.sub_vi {width:100%; height:100%; background:url('/flexa/img/sub/sub_vi1.png') no-repeat; background-size:cover; display:inline-block;   }

.product section.sub_vi {background:url('/flexa/img/sub/car_bg_pc_1.png') no-repeat bottom; background-size:100%;   }
.product section.sub_vi_bg2 {background:url('/flexa/img/sub/car_bg_pc_1.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg3 {background:url('/flexa/img/sub/car_bg_pc_2.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg4 {background:url('/flexa/img/sub/car_bg_pc_3.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg5 {background:url('/flexa/img/sub/car_bg_pc_4.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg6 {background:url('/flexa/img/sub/car_bg_pc_5.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg7 {background:url('/flexa/img/sub/car_bg_pc_6.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg8 {background:url('/flexa/img/sub/car_bg_pc_8.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg9 {background:url('/flexa/img/sub/car_bg_pc_9.png') no-repeat bottom; background-size:cover;}
.product section.sub_vi_bg10 {background:url('/flexa/img/sub/car_bg_pc_10.png') no-repeat bottom; background-size:cover;}
  
@keyframes zoom-a {
	0% { opacity:0; }
	100% {opacity:1; }
}
.type-a {
 animation: zoom-a 3s;
  }

#sub h3 {width:100%; display:inline-block; font-size:1.1em; color:#fff; font-weight:600}



section.guide_wrap {width:100%; position:absolute;  height:100%;  display:inline-block; top:0; left:0; box-sizing:border-box;  }

 
section.guide_wrap div {width:100%; text-align:Center; position:absolute; top:50%; transform: translate(0, -50%); left:0; padding:0 5%; box-sizing:border-box;}


  
section.guide_wrap b {width:100%; text-align:Center;  color:#fff; font-size:27px; line-height:1.4em;  }


section.guide_wrap h1 {width:100%; text-align:Center; color:#fff; font-family:'GmarketSansBold'; font-size:52px;     }
section.guide_wrap h6 {width:100%; text-align:Center; color:#fff; font-family:'GmarketSansBold'; font-size:52px;     }
section.guide_wrap span.s_line {width:1px; height:15px; background-color:#fff; display:inline-block; margin-bottom:10px; }

section.guide_wrap p {width:100%; text-align:Center; line-height:1.6em; color:rgba(255,255,255,.8); font-size:18px;   }

.product section.guide_wrap b {width:100%; display:inline-block; text-align:Center;  color:rgba(255,255,255,.9); font-size:2em;  font-weight:600; padding-bottom:15px; line-height:1.6em; letter-spacing:-2px    }


ul.sub_nav {width:100%; left:0; bottom:10%; display:inline-block; position:absolute; text-align:Center;}
ul.sub_nav li {width:170px; display:inline-block; font-size:1em;  line-height:45px; margin:0 5px; box-sizing:border-box; transition: background-color 0.3s ease-in; border:1px solid rgba(255,255,255,.4);}
ul.sub_nav li a {width:100%; display:inline-block; color:#fff !important; }

ul.sub_nav li:hover {background-color:rgba(255,255,255,.2);  border:1px solid rgba(255,255,255,.2);}

ul.sub_nav li.ov {background-color:rgba(255,255,255,.2);  border:1px solid rgba(255,255,255,.2);}

ul.sub_nav2 {width:100%;   display:inline-block;   text-align:Center;}
ul.sub_nav2 li {width:170px; display:inline-block; font-size:1em;  line-height:45px; margin:0 5px; box-sizing:border-box; transition: background-color 0.3s ease-in; border:1px solid rgba(255,255,255,.4);}
ul.sub_nav2 li a {width:100%; display:inline-block; color:#fff !important; }

ul.sub_nav2 li:hover {background-color:rgba(255,255,255,.2);  border:1px solid rgba(255,255,255,.2);}

ul.sub_nav2 li.ov {background-color:rgba(255,255,255,.2);  border:1px solid rgba(255,255,255,.2);}


  /*서브메뉴*/
 .navigatonBox {
  padding:8px 3%;  box-sizing:border-box;   
background-color:#111; border-bottom:1px solid rgba(255,255,255,.2); border-top:1px solid rgba(255,255,255,.2); 
height:50px;
  width:100%;  float:left; position:absolute; bottom:0;
}

 .buttonGroup {
  overflow-x: auto;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
}
.navButton, .option {
  display: inline-block;
  margin-right:12px;
  cursor:default;
}

.navButton {}
.navButton a {font-size:1.01em; line-height:30px; font-weight:400; color:#999; position:relative; z-index:999999999 }
a.button_ov {font-weight:500; color:#fff !important;  }

.navButton:last-child {
  margin-right:20px;
}
.navButton:first-child {
  margin-left:20px;
}
.optionGroup {
  width:100%;
  height:100px;
  position:absolute;
  top:50px;
  left:0;
}

.option {
  position:absolute;
  top:0;
  left:0;
  padding: 5px 10px;
  border:1px solid #DDD;
  border-radius:3px;
}

.option p {
  margin:0 0 5px;
  white-space: nowrap;
}

.option p:hover {
  background-color:#EEE;
}

.arrow {
  width:30px;
  height:15px;
  position:absolute;
  top:16px;
  
  
}

.arrow::before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-size:100% 100%;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDMwNiAzMDYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwNiAzMDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY2hldnJvbi1yaWdodCI+CgkJPHBvbHlnb24gcG9pbnRzPSI5NC4zNSwwIDU4LjY1LDM1LjcgMTc1Ljk1LDE1MyA1OC42NSwyNzAuMyA5NC4zNSwzMDYgMjQ3LjM1LDE1MyAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}

.arrow.left {
  left:0;
  transform:rotate(180deg);
}
.arrow.right {
  right:0;
}


section.content {width:100%; max-width:1240px; margin:0 auto; padding-top:100px;  } 
section.content .content_in {width:100%; display:inline-block}

 

section.content h2.guide {text-align:center; width:100%; display:inline-block;  font-size:30px; color:#fff;   margin-bottom:20px;}

section.content {width:100%; max-width:1240px; margin:0 auto; padding-top:100px;  }
section.content .content_in {width:100%; display:inline-block}

.text_box {font-size:0.97rem; color:rgba(255,255,255,.8); line-height:1.4em}
.t {font-size:0.97rem; color:rgba(255,255,255,.8); line-height:1.4em}

.brand section.content {margin:0 auto; padding-top:70px;}

.brand section.content div {font-size:1.05em; text-align:center; width:60%; line-height:2em; color:rgba(255,255,255,.8); margin-left:20%; display:inline-block}
.brand section.content div  b {font-size:1.7em; font-weight:700; width:100%; display:inline-block; padding-bottom:10px; color:#fff ; font-family:'GmarketSansBold'; }

.brand section.content div  b:nth-child(3) {font-size:1.4em; font-family:'Noto Sans KR';  font-weight:600; padding-bottom:20px }



#sub .shop_list {width:60%; float:left;}
#sub .shop_list table {width:100%; border-top:1px solid rgba(255,255,255,.5)}
#sub .shop_list table th {padding:12px; border-bottom:1px solid rgba(255,255,255,.5); font-size:15.5px; color:#fff; line-height:1.3em;  text-align:left; font-weight:600; }
#sub .shop_list table td {padding:12px;  border-bottom:1px solid rgba(255,255,255,.2); font-size:15px; color:#fff; line-height:1.3em;  }
#sub .shop_list table tr.cur_over:hover    {cursor: pointer;}
#sub .shop_list table tr.tr_ov  {  cursor: pointer;}


#sub .right_wrap {width:35%;   float:right;}
#sub .shop_map {width:100%; height:250px; margin-top:40px;  }
#sub .shop_map_info {width:100%;  margin-top:15px; font-size:0.95em; color:#fff; line-height:1.4em}
#sub .shop_map_info h5 {font-size:1.1em; padding-bottom:5px; line-height:1.3em; color:#fff; font-weight:600}


#sub .shop {width:100%; margin-top:20px; display:inline-block}
#sub .shop li {  border:1px solid #ddd; box-sizing:border-box; padding-bottom:15px; margin-bottom:10px; line-height:1.3em;}

#sub .shop li img {width:100%; height:200px; margin-bottom:10px; display:inline-block; background-color:#ddd;}
#sub .shop li b {font-size:1.05em; font-weight:600; color:#333; width:100%; padding:0 10px; box-sizing:border-box; }
#sub .shop li p {font-size:0.95em;  font-weight:400; color:#666; width:100%; padding:6px 10px; box-sizing:border-box;}
#sub .shop li span {font-size:0.85em; font-weight:400; color:#888;width:100%; padding:0 10px; box-sizing:border-box; }

#sub .form_box {width:100%; background-color:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.2); box-sizing:border-box; padding:15px 20px; float:left;  margin-top:10px;}

#sub .form  ul {width:100%; display:inline-block;}
#sub .form li {font-size:0.90em; color:rgba(255,255,255,.8); line-height:1.4em;  width:100%; display:inline-block; padding-bottom:15px; margin-bottom:15px;  border-bottom:1px solid rgba(255,255,255,.14);   }
#sub .form li:last-child {padding-bottom:0; border-bottom:none; margin-bottom:0}
#sub .form li b {font-size:1.1em; color:#fff; font-weight:500; line-height:1.25em; width:100%; display:inline-block; padding-bottom:5px; }


.price section.content div { width:80%; margin-left:10%; display:inline-block}




#sub .step  {width:100%; margin-top:18px; display:flex;  justify-content :space-between}
#sub .step li {display:inline-block; box-sizing:border-box; text-align:center; padding-right:42px; background:url('/flexa/img/sub/step_arrow.png') no-repeat right;  vertical-align:top; color:#fff; font-size:1em; line-height:1.2em; letter-spacing:-0.3px; }
#sub .step li p {width:100%; height:100%;   box-sizing:border-box;  } 
#sub .step li img { border-radius:50%; margin-bottom:10px; max-width:100%}
#sub .step li:first-child {padding-left:10px}
#sub .step li:last-child {background:none; padding-right:10px; font-weight:600; color:#665cc7}
#sub .info3  div {font-size:0.93em;  border-top:1px solid  rgba(255,255,255,.3); padding-top:13px;   font-weight:400; color:rgba(255,255,255,.8); width:100%; display:inline-block; box-sizing:border-box; line-height:1.4em}
 #sub .info3  div  b {font-weight:600;  color:#fff;  font-size:1.1em; display:inline-block; padding-bottom:3px}



/*제품소개*/

.product section.guide_wrap {height:85%; top:15%; overflow:hidden  }

.product section.guide_wrap div { height:85%; top:15%; transform: translate(0, 15%);  }
.product .bg8_wrap section.guide_wrap div  {height:95%; top:5%;  }
.product ul.sub_nav   {top:0;}

section.product_content {width:100%;  margin:0 auto; padding-top:100px;  } 
section.product_content .product_content_in {width:100%;  box-sizing:border-box; padding:0 3%; max-width:1600px; margin:0 auto; } 


#sub .product1_box {width:100%; margin-bottom:100px; float:left;  box-sizing:border-box;    }
#sub .product1_box p.img {background-color:#ddd; height:300px; display:inline-block;  width:100%;} 
#sub .product1_box div.text {width:100%; padding-bottom:50px; box-sizing:border-box;  font-size:1.15em; color:rgba(255,255,255,.8);  font-weight:300; line-height:1.6em;   text-align:center}  
#sub .product1_box h4 {font-size:1.6em; font-weight:700; color:#fff; line-height:1.4em; width:100%; }
#sub .product1_box h4 span {background-color:#333; padding:0 10px; color:#fff; vertical-align:2px; font-size:0.80em;font-weight:500;  }
#sub .product1_box b {width:100%; padding:25px 0 20px 0;  display:inline-block; font-size:1.2em; line-height:1.4em; font-weight:500; color:rgba(255,255,255,.9);  }
 
 
#sub .product_con {width:100%; display:inline-block; margin-bottom:100px; }
  
#sub .product_con p {width:100%; box-sizing:border-box; padding:0 15% 60px 15%; font-size:1.4em; color:rgba(255,255,255,.8); font-weight:300; line-height:1.7em; text-align:Center;  }
#sub .product_con p span {font-weight:700; font-size:1.8em; padding-bottom:20px; width:100%; display:inline-block; color:#fff}
#sub .product_con p b {font-weight:700; font-size:1.2em; padding-bottom:20px; width:100%; display:inline-block; color:#fff}




#sub .scene_img {width:100%;  background-size:cover; box-sizing:border-box; float:left; }
#sub .scene_img div {background:url('/vtech/img/sub/scene_img.png') no-repeat; width:33.333%; float:left; box-sizing:border-box;   }
#sub .scene_img div div {width:100%; background:rgba(0,0,0,.7); text-align:Center;  font-size:1.5em; line-height:1.2em; font-weight:600; color:#fff; padding:200px 0; }
#sub .scene_img div:nth-child(2)  div{background:rgba(0,0,0,.5);  } 
#sub .scene_img div:nth-child(3) div {background:rgba(0,0,0,.3);  } 
#sub .scene_img div:nth-child(4)  div{background:rgba(0,0,0,.15);  } 
 
     
 
/*스크롤시 이미지 줌*/

@media all and (min-width:800px)  {

.product .product_info  {display:none}
[data-scroll]{ transition: all 0.5s linear; }

[data-scroll] img{  transform: scale(calc(.8 + .2 * var(--visible-y))); }

[data-scroll="out"]{ opacity: 0; }

  
}


/*추가*/

 
.product section.guide_wrap img.car_img  {height:80%; right:0; bottom:0;  }

.product_content_in .t {color:rgba(255,255,255,.7)}
.product_content_in .s_t {color:rgba(255,255,255,.7)}

#footer {   border-top:1px solid rgba(255,255,255,.1);   }
 
/********************************/

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


		.sub_vi_top_wrap {height:330px;  }
		ul.sub_nav {display:none}

		section.content  { float:left; box-sizing:border-box; padding:50px 4% 80px 3%;  }

		section.product_content  { float:left; box-sizing:border-box; padding:0px 3% 70px 3%; padding-top:80px }


		ul.sub_nav2  {   width:94%; margin-left:3%;    display:flex; align-items:center;  }
		ul.sub_nav2 li {font-size:0.90em; width:20%; line-height:1em; padding:12px 0;  margin:0 0; border-right:none;}
		ul.sub_nav2 li:first-child {width:30%}
		ul.sub_nav2 li:last-child {border-right:1px solid rgba(255,255,255,.4); }

		section.guide_wrap div {  top:50%; transform: translate(0, -35%);  }
		section.guide_wrap b {font-size:1.3rem;  }
		section.guide_wrap h1 {font-size:2.5rem}
        section.guide_wrap h6 {font-size:2.0rem}
		section.guide_wrap p {font-size:1rem}


		/*제품소개*/

		.product section.guide_wrap {height:83%; top:17%;}

		.product section.guide_wrap div { height:83%; top:17%; transform: translate(0, 17%);  }
		.product section.guide_wrap div p {font-size:1em} 


		#sub .product_con p {padding: 0 10% 20px 10%; font-size:1.2em}
		#sub .product1_box div.text {font-size:1.1em; padding: 0 5% 30px 5%;}
		#sub .product1_box div.text h4 {font-size:1.45em}

		section.product_content .product_content_in {padding:0}


}


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

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

			section.sub_vi {background:url('/flexa/img/sub/m_sub_vi1.png') no-repeat bottom; background-size:cover;}

			section.guide_wrap h1 { font-size:3.3em; }
			section.guide_wrap h6 { font-size:3.3em; }
			section.guide_wrap span.s_line  {display:none}
			section.guide_wrap b { font-size:1.2em; }
			.product section.guide_wrap p {display:none; }
			.product section.guide_wrap b {width:100%; text-align:Center;  color:rgba(255,255,255,1); font-size:1.3em; line-height:1.5em; padding-bottom:10px; letter-spacing:0px;  }
			.product section.guide_wrap h1 { font-size:3em; }


			section.content h2.guide { font-size:1.5em;}

			section.guide_wrap h1 {font-size:1.9rem}
            section.guide_wrap h6 {font-size:1.9rem}
			section.guide_wrap b {font-size:1.2rem;  }

			section.guide_wrap span.s_line  {display:none}


			section.content h2.guide { font-size:1.5em;}

			.brand section.content div {width:100%; margin-left:0; font-size:0.974em; line-height:1.6em}
			.brand section.content div  b {font-size:1.5em}


			#sub .shop_list {width:100%; float:left;}

			#sub .right_wrap {width:100%;  margin-top:30px;  }
			#sub .right_wrap .shop_map {width:48%; height:150px; float:left; margin-top:0}
			#sub .right_wrap .shop_map_info {width:50%; float:right; margin-top:0;}

			.price section.content div { width:100%; margin-left:0; }

			#sub .step  {flex-wrap:wrap; margin-top:3px; justify-content:flex-start}
			#sub .step li {width:25%; padding-top:15px; font-size:0.95em; line-height:1.1em;  padding-right:20px;  background-size:19px}
			#sub .step li img {width:50px; margin-bottom:5px}
			#sub .step li:first-child {padding-left:0}
			#sub .step li:last-child { padding-right:20px}
			#sub .info3  div  b {   font-size:1.1em;}


			/*제품소개*/

			#sub .product_con {margin-bottom:70px}
			#sub .product_con:first-child {margin-top:0;}
			#sub .product_con p {  padding:0 3% 20px 3%;  font-size:0.95em; font-weight:400; line-height:1.55em;   letter-spacing:0px}
			#sub .product_con p b { padding-bottom:10px;}

			.product .sub_vi_top_wrap.bg8_wrap{height:550px; word-break: keep-all;  }
			.product .bg8_wrap section.guide_wrap{top:0}
			.product section.sub_vi_bg2 {background:url('/flexa/img/sub/car_bg_m_1.png') no-repeat bottom; background-size:100%;}
			.product section.sub_vi_bg3 {background:url('/flexa/img/sub/car_bg_m_2.png') no-repeat bottom; background-size:100%;}
			.product section.sub_vi_bg4 {background:url('/flexa/img/sub/car_bg_m_3.png') no-repeat bottom; background-size:100%;}
			.product section.sub_vi_bg5 {background:url('/flexa/img/sub/car_bg_m_4.png') no-repeat bottom; background-size:100%;}
			.product section.sub_vi_bg6 {background:url('/flexa/img/sub/car_bg_m_5.png') no-repeat bottom; background-size:100%;}
			.product section.sub_vi_bg7 {background:url('/flexa/img/sub/car_bg_m_6.png') no-repeat bottom; background-size:100%;}
			.product section.sub_vi_bg8 {background:url('/flexa/img/sub/car_bg_m_8.png') no-repeat bottom; background-size:100%;}



			.product .product_info {color:#444; font-size:1em; font-weight:400; text-align:center; width:100%; border:1px solid #ddd;  padding:15px; box-sizing:border-box; margin-bottom:10px;  }


			#sub .product1_box {margin-bottom:70px}
			#sub .product1_box div.text { padding:0 3% 20px 3%;  font-size:0.95em;    line-height:1.55em;  }
			#sub .product1_box div.text  b {padding:15px 0; }
			#sub .product1_box div.text h4 {font-size:1.4em}  


			.product table.basic th.tit {font-size:0.90em}
			.product table.basic th {font-size:0.85em }
			.product table.basic td {font-size:0.85em  }
			.product section.guide_wrap div {  top:23%; transform: translate(0, -23%); }

			.product .bg8_wrap section.guide_wrap div  {height:75%; top:25%;   }
			.product .bg8_wrap section.guide_wrap b  {font-size:1.2em}

}