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


/*common*/
.wrap{overflow:auto;}

.container{position:relative;top: 56px;/*height: 650px;*/}
.container .visual{width:100%;height: 300px;/* 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 #c3c3c3;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;/* position: relative; */}
.container .inwrap .roll_com {float:none;width: 90%;margin: 0 auto;margin-bottom: 25px;}
.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: 15px;}
.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:85px;}
 .tabs_item h3 + div{line-height:19px;font-size: 12px;}


.flexslider .slides > li:after{display:block; clear:both; content:''}
.flexslider .slides > li .left{float:left; display:block; vertical-align:middle; background:#efefef; width:65px;height:65px;padding:20px 10px; font-size:12px; font-weight:600; text-align:center; box-sizing:border-box;}
.flexslider .slides > li .right{float:right;width: 215px !important;font-size:12px;line-height:15px;margin-top: 10px;}
.flexslider .slides > li .right>ul{}
.flexslider .slides > li .right>ul li{line-height:20px;}
.flexslider .slides > li .right>ul li.part{color:#3c3c3c; font-weight:600; }
.flexslider .slides > li .right>ul li.part:before{display:none;}
.flexslider .slides > li .right>ul li>span{font-weight:600;color: #717171;}
.flexslider .slides > li .right>ul li>span:after{display:inline-block; content:':';padding:0 5px;}
.flexslider .slides > li .right>ul li:before{display:inline-block; width:3px; height:3px; background:#b3b3b3; margin-right:5px; vertical-align:middle; content:'';}
.flexslider .slides img {
  /* width: 100%; */
  display: block;
}

.flexslider .slides > li h3 {float:left;display:inline-block;width: 115px;}

.flexslider .slides > li h3 + div{line-height: 15px;font-size: 12px;}

.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}



/*** 메인 롤링배너2 ***/
.roll_bus{float:none;width: 90%;margin: 0 auto;margin-bottom: 0px;}



/*** 메인 롤링배너3 ***/
.contact{float:none;width: 90%;margin: 0 auto;}
.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:670px;*height:100%;*/}



/* Wrapper */
.icon-button {
	width: 60px;
	height: 60px;
	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.3s;
	width: 0;
}
.icon-button:hover span {
	width: 60px;
	height: 60px;
	border-radius: 3.6rem;
	margin: -29px;
}


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

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

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

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

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

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

.btn04 {
	margin-left: 10px;
	border: 1px solid #e94f16;
	background:url(/images/m_btn04.png) no-repeat center center;
	background-size:60px 60px;
}

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




/**/
/** RESET AND LAYOUT
===================================*/

.bx-wrapper {position: absolute;width: 100%;height: 300px;overflow: hidden;margin: 0 auto 0;padding: 0; *zoom: 1;display: n;}

.bx-wrapper img { /* width: 100%; */ display: block; }
===================================*/

.slider1{background:url(/images/main_v01_bg.png) no-repeat;background-size: 100% 100%;}
.slider2{background:url(/images/main_v02_bg.png) no-repeat;background-size: 100% 100%;}
.slider3{background:url(/images/main_v03_bg.png) no-repeat;background-size: 100% 100%;}
.slider_box1{
    display: block;
     width: 100%;
    height: 300px;
    background: url(/images/main_v01.png) no-repeat center 0;
    background-size: auto 100%;
}

.slider_box2{display: block;
    width: 100%;
    height: 300px;
    background: url(/images/main_v02.png) no-repeat center 0;
    background-size: auto 100%;}

.slider_box3{display: block;
  width: 100%;
    height: 300px;
    background: url(/images/main_v03.png) no-repeat center 0;
    background-size: auto 100%;}

.slider_box1 > img{/*width:812px; */ width:80%; margin:0 auto; padding-top:60px;}
.slider_box2 > img{/*width:492px; */width:80%; margin:0 auto; padding-top:60px;}
.slider_box3 > img{/*width:659px; */width:80%; margin:0 auto; padding-top:60px;}

[class^="slider_box"] .mobile_txt{display:block;color:#fff;padding:35px 20px;font-size:25px;line-height:35px;text-align:center;letter-spacing: -1.5px;font-weight: 300;}
[class^="slider_box"] .mobile_txt >span{font-weight:600;}
[class^="slider_box"] .mobile_txt .br_mob{display:block;}
[class^="slider_box"] > img{display:none;}

.slider_box1 .mobile_txt{
    padding-top: 70px;
}
.slider_box2 .mobile_txt{padding-top: 100px;}
.slider_box3 .mobile_txt{padding-top: 68px;}


.bx-wrapper .bx-viewport {
	left: 0px;
}

.flexslider {
  margin: 0 0 -15px!important;
}



/* ====================================================================================================================
 * footer
 * ====================================================================================================================*/

.footer{position:absolute; width:100%;padding:35px 0;background:#efefef;border-top: 1px solid #e8e8e8;}
.footer .inwrap .b_logo{float:left;width: 230px;}
.footer .inwrap .b_logo > span{display:block;width:198px; height:58px;  background:url(/images/f_logo.png) no-repeat 0 0; }
.footer .inwrap .copy{float:left;line-height:20px;color: #7f7f7f;font-size: 12px;}
.footer .inwrap .family{float:right;width: 150px;text-align:right; }
.footer .inwrap .family >select{margin-top:15px;}

.family .sns{margin-top:0px;}
.family .sns > ul li > a{}
.family .sns .face > a{ background:url(/images/f_btn_facebook.png) no-repeat 0 0; }
.family .sns .twiter > a{ background:url(/images/f_btn_twiter.png) no-repeat 0 0; }
.family .sns .blog > a{background:url(/images/f_btn_blog.png) no-repeat 0 0;}


.footer{position: absolute;/* height: 100%; */box-sizing: border-box;padding: 20px 20px 30px;margin-top: 15px;}
.footer .inwrap .copy{letter-spacing: -1px;}
 .family .sns{float: left; margin-top: 15px;}
 .sns > ul li:first-child {margin-left:0px; }
 .footer .inwrap .family >select{margin-top: 10px;float: right;padding: 3px 5px;height: 30px;}
 .footer .inwrap .b_logo{display:none}
 .footer .inwrap .family{float: none; width: 100%; text-align: right; padding-bottom: 20px; }

 /*동영상*/
 .mov_box {z-index: 1000;position: relative;top: -5px;left: 0;margin-left: 0;height: 0;}
 .mov_box01{z-index: 1000;/* margin-top: -10px; *//* outline: none; *//* border: 1px solid #e0dddd; */focus: none;position: relative;height: 230px;}

 .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;display: none;}
 .mov_box .video {/* position: absolute; *//* top: 0; */z-index: 10000;width: 100%;height: 215px;/* box-shadow: 0px 0px 8px 0px #0000002b; *//* background: #ffffff; */outline: none;}
 .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: 0px solid #f4f4f4;}

 .mov_box01 .video {position: absolute;z-index: 1;width: 100%;height: 192px;outline: none;/* border: 1px solid #e0dddd; */margin-top: 15px;padding-bottom: 20px;}
  .mov_box01 .video > iframe{width:100%; height:190px;}
 .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: 22px;color: #fff;width: 90%;/* position: absolute; *//* top: 50%; *//* left: 50%; */text-align: center;/* margin-top: -100px; */margin-left: 0;font-weight: 300;line-height: 22px;font-family: '나눔바른고딕' , Nanum Barun Gothic,'맑음고딕', Malgun Gothic, dotum, gulim, sans-serif;text-shadow: 0 0 5px #000;margin: 0 auto;padding-top: 40px;}
 [class^="slider_box"] .pc_txt > span{font-weight:600}

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

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

 .visual_box {
     display: block;
     top: 16%;
 }
 .button--large {
         z-index: 1;
    position: relative;
    width: 150px;
    height: 150px;
    background: url(/images/main_v_logo.png) no-repeat 0 0;
    background-size: 100%;
    box-shadow: none;
    outline: none;
    /* display: none; */
    margin-top: 85px;
 }