@charset "utf-8";
@import url("reset.css");
@import url("common.css");
/* CSS Document */
html{overflow-y: auto;}


/*common*/


.container{position:relative;top:0;height: 650px;}
.container .visual{width:100%;height:460px;/* background: #373637; */margin-bottom: 30px;/* background-image: url(/images/main_bg_01.jpg); *//* background-size: 100% 100%; *//* background-position: 0 0; */background-position: center 0;background-repeat: no-repeat;}

.container .visual .inwrap {/* background-image: url(/images/main_bg.jpg); *//* background-size: 100% 333px; *//* height: 333px; */}
.container .visual .inwrap > ul{position:relative;width: 910px;top: 70px;left:50%;margin-left: -455px;}
.container .visual .inwrap > ul > li{/* background: url(/images/main_text.png) no-repeat center 0; */height: 333px;}
.container .visual .inwrap .quick{display:none; position:absolute;top:100px;left:50%; margin-left:-600px;width: 130px;background:#fff;border-radius:5px;padding: 10px;}
.quick >ul > li{line-height: 22px;border-bottom:1px solid #efefef;padding:5px;}
.quick >ul > li > a{font-size: 13px;letter-spacing: -1px;font-family:'맑음고딕', Malgun Gothic, dotum, gulim, sans-serif;}
.quick >ul > li > a:hover{font-weight:600;letter-spacing: -1.2px;color:#ee3212;}
.quick >ul > li:last-child{border-bottom:0px solid #efefef}


/* ====================================================================================================================
 * banner
 * ====================================================================================================================*/
.title{height:30px; padding-bottom: 12px;border-bottom: 1px solid #3c3c3c; margin-bottom: 15px;}
.title .h1{float:left; font:600 15px/15pt '맑음고딕', Malgun Gothic, dotum, gulim, sans-serif; letter-spacing:-1px; color:#000}
.title .btn_more{float:right; margin-top:5px;}

/*** 메인 롤링배너1 ***/
.container .inwrap .roll_com,
.container .inwrap .roll_bus,
.container .inwrap .contact{padding-top: 10px;}
.container .inwrap .roll_com {float:left; width:336px;}
.roll_com > ul{margin-bottom:15px;}
.roll_com > ul li{float:left; width:calc(100%/2)}
.roll_com > ul li > a{display:block;width:100%;height:27px;font-size:12px;font-weight:600;letter-spacing:-0.9px;border:1px solid #3c3c3c;text-align:center;padding:5px;box-sizing:border-box;line-height: 18px;}
.roll_com > ul li > a:hover{background:#666; color:#fff}
.roll_com > ul li.on > a{background:#3c3c3c; color:#fff}
.roll_com > ul li:first-child > a{border-right:0px solid #3c3c3c;}
.roll_com > ul li:last-child > a{border-left:0px solid #3c3c3c;}
.rool_com > div{margin-top:15px;}

.tabs { display: table; position: relative; overflow: hidden; margin: 0; width: 100%;
	li { float: left; line-height: 38px; overflow: hidden; padding: 0; position: relative; }
  a { background-color: #eff0f2; border-bottom: 1px solid #fff; color: #888; font-weight: 500; display: block; letter-spacing: 0; outline: none; padding: 0 20px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-bottom: 2px solid $color; }
}

.tabs_item { display: none; padding: 10px 0;
  h4 { font-weight: bold; color: $color; font-size: 20px; }
  img { width: 200px; float: left; margin-right: 30px; }
  &:first-child {display: block;}
  }
 .tabs_item h3 {float:left;display:inline-block;width: 95px;height: 120px;}
.tabs_item h3 > img{width:80px}
 .tabs_item h3 + div{line-height:19px;font-size: 12px;}



/*** 메인 롤링배너2 ***/
.roll_bus{float:left;width: 365px;margin:0 20px;}



/*** 메인 롤링배너3 ***/
.contact{float:right;width: 336px;}
.contact > ul li{float:left; width:50%; line-height:17px; font-size:12px;}
.contact > ul li > p{font-size:12px; margin-top:5px; line-height:20px;}
.contact > ul li > p >span{color:#999}


.footer{top:700px;height: 195px;}


/* Wrapper */
.icon-button {
	width:78px;
	height:78px;
	border-radius: 3.6rem;
	cursor: pointer;
	display: inline-block;
	line-height: 3.6rem;

	position: relative;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(108, 46, 185, 0.2);
}

/* Circle */
.icon-button span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.1s;
	width: 0;
}
.icon-button:hover span {
	width:78px;
	height:78px;
	border-radius: 3.6rem;
	margin: -39px;
}


.btn01 {
	margin-left: 0px;
	border:3px solid #e94f16;
	background:url(/images/m_btn01.png) no-repeat center center;
	background-size:78px 78px;
}

.btn01 span {
background:url(/images/m_btn01_on.png) no-repeat center center;
background-size:78px 78px;
}

.btn02 {
	margin-left:37px;
	border:3px solid #e94f16;
	background:url(/images/m_btn02.png) no-repeat center center;
 background-size:78px 78px;
}

.btn02 span {
background:url(/images/m_btn02_on.png) no-repeat center center;
background-size:78px 78px;
}

.btn03 {
	margin-left:37px;
	border:3px solid #e94f16;
	background:url(/images/m_btn03.png) no-repeat center center;
 background-size:78px 78px;
}

.btn03 span {
background:url(/images/m_btn03_on.png) no-repeat center center;
background-size:78px 78px;
}

.btn04 {
	margin-right:37px;
	border:3px solid #e94f16;
	background:url(/images/m_btn04.png) no-repeat center center;
 background-size:78px 78px;
}

.btn04 span {
background:url(/images/m_btn04_on.png) no-repeat center center;
background-size:78px 78px;
}

/*동영상*/
.mov_box {z-index: 1000;position: absolute;top: 235px;left: 50%;margin-left: 240px;}
.mov_box01{z-index: 1000;margin-top: -10px;/* outline: none; *//* border: 1px solid #e0dddd; */focus: none;}

.bxslider li.v3 .bgarea>video{width:auto; height:100%;}
.mov_box > h3{font-size: 17px;font-weight: 600;color:#fff;text-shadow:0px 0px 5px #000;padding-bottom: 7px;}
.mov_box .video {position: absolute;z-index: 1;width: 303px;height: 170px;box-shadow: 0px 0px 8px 0px #0000002b;background: #ffffff;outline: none;}
.mov_box .video >a{width:303px; height:170px;}
.mov_box .video >a>img{width:100%; height:100%}
.mov_box .video > button{position:absolute;top: 50%;left:50%;margin-left: -37px;margin-top: -37px;z-index: 1000;}
.mov_box .video video {width: 100% !important;height: 100% !important;outline: none;border: 1px solid #f4f4f4;display: none;}

.mov_box01 .video {position: absolute;z-index: 1;width: 325px;height: 185px;outline: none;border: 1px solid #e0dddd;}
.mov_box01 .video > iframe{width:325px; height:185px}
.mov_box01 .video > button{position:absolute;top: 50%;left:50%;margin-left: -37px;margin-top: -37px;z-index: 1000;}
.mov_box01 .video video {width: 100% !important;height: 100% !important;}

._m.video{display:none}

.video-wrapper {
  position: relative;
}

/*메인 비쥬얼 텍스트*/
[class^="slider_box"] .pc_txt{display:block;font-size: 38px;color: #fff;width: 980px;position: absolute;top: 50%;left: 50%;text-align: center;margin-top: -170px;margin-left: -450px;font-weight: 300;line-height: 45px;font-family: '나눔바른고딕' , Nanum Barun Gothic,'맑음고딕', Malgun Gothic, dotum, gulim, sans-serif;text-shadow: 0 0 5px #000;}
[class^="slider_box"] .pc_txt > span{font-weight:600}
[class^="slider_box"] .mobile_txt{display:none; }

.pcbr{display:block}
.mobilebr{display:none;}

.pc_none{display:none}
.mobile_none{display:inline-block}