@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800|Roboto:300,400,700,900|Titillium+Web:200,300,400,600');
@import url(../../hiun/NanumSquare/master/nanumsquare.html);
@import url(../../innks/NanumSquareRound/master/nanumsquareround.min.html);

/*
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Titillium Web', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Nanum Myeongjo', serif;

font-family:'Nanumsquare';
font-family:'Open Sans', sans-serif;
*/

/* 초기화 */
html {width:100%;height:100%;/*background:#f3f3f3;*/overflow-y:scroll}
body {width:100%;height:100%;margin:0;padding:0;font-family:'NanumSquareRound','Nanum Gothic', 'Malgun Gothic', dotum, sans-serif;font-size:14px;color:#444;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'NanumSquareRound','Nanum Gothic', 'Malgun Gothic', dotum, sans-serif;font-size:14px;color:#444;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;}
input, button {margin:0;padding:0;font-family:'NanumSquareRound','Nanum Gothic', 'Malgun Gothic', dotum, sans-serif;font-size:14px;color:#444;}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'NanumSquareRound','Nanum Gothic', 'Malgun Gothic', dotum, sans-serif;font-size:14px;color:#444;}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;}
a {color:#444;text-decoration:none}

* {wrod-break:keep-all;word-wrap:break-word;}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text],input[type=password], textarea {}
input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {}
input::placeholder {color:#aaa !important; }

.placeholdersjs {color:#aaa !important; }

/* layout */
#container_wrap {position:relative;width:100%;}
#container_wrap:after {display:block;visibility:hidden;clear:both;content:""}
#header_wrap {position:fixed;top:0;width:100%;background:rgba(0,0,0,0.8);z-index:99999;}
#header_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.header {position:relative;width:100%;}
#body_wrap {position:relative;width:100%;}
#body_wrap:after {display:block;visibility:hidden;clear:both;content:""}
#footer_wrap {position:relative;width:100%;}
#footer_wrap:after {display:block;visibility:hidden;clear:both;content:""}

/* default */
.sticky {top:0px;background-color: rgba(0, 0, 0, 0.6) !important;opacity:1;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.sticky_logo {top:0 !important;}
.sticky_logo img {width:auto;height:60px !important;margin:0;}
.sticky_tnb {top:6px !important;}

.logo {display:block;position:absolute;left:2%;top:10px;z-index:99999;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo img {width:auto;/*height:100%;*/
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

/* gnb */
#gnb {display:block;position:relative;width:800px;margin:0 auto;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#gnb:after {display:block;visibility:hidden;clear:both;content:""}
#gnb ul {text-align:center;}
#gnb ul li {display:inline-block;position:relative;padding:0 8px;zoom:1;}
#gnb ul li span.arrow {display:none;}
#gnb ul li a {display:block;position:relative;height:100px;color:#fff;font-size:16px;font-weight:normal;line-height:97px;white-space:nowrap;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#gnb ul li a .hover_line {display:block;width:1px;height:3px;margin:0 auto;background:#569ffd;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

filter:alpha(opacity=0); /* ie  */
opacity: 0; /* css standard, currently it works in most modern browsers like firefox,  */ 
}
#gnb ul li a:hover {color:#569ffd;}
#gnb ul li a:hover .hover_line {display:block;width:100%;
filter:alpha(opacity=100); /* ie  */
opacity: 1; /* css standard, currently it works in most modern browsers like firefox,  */ 
}
#gnb ul li a.on {color:#569ffd;}
#gnb ul li a.on .hover_line {display:block;width:100%;
filter:alpha(opacity=100); /* ie  */
opacity: 1; /* css standard, currently it works in most modern browsers like firefox,  */ 
}

#gnb ul li ul {display:block;position:absolute;left:50%;top:100px;width:160px;height:0;margin:0 0 0 -80px;overflow:hidden;z-index:9999;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#gnb ul li ul li {width:100%;padding:0;}
#gnb ul li ul li a {display:block;height:40px;color:#666;font-size:12px;font-weight:normal;line-height:40px;text-align:left;text-indent:20px;background:#fff;border-bottom:solid 1px #eee;}
#gnb ul li ul li a:hover {color:#fff;background:#569ffd;}

/* gnb sticky*/
#gnb.sticky_gnb {display:block;margin:0 auto;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#gnb.sticky_gnb:after {display:block;visibility:hidden;clear:both;content:""}
#gnb.sticky_gnb ul {text-align:center;}
#gnb.sticky_gnb ul li {display:block;float:left;position:relative;zoom:1;}
#gnb.sticky_gnb ul li span.arrow {display:none;}
#gnb.sticky_gnb ul li a {display:block;position:relative;height:60px;color:#fff;font-size:16px;font-weight:normal;line-height:57px;white-space:nowrap;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#gnb.sticky_gnb ul li a .hover_line {display:block;width:1px;height:3px;margin:0 auto;background:#569ffd;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

filter:alpha(opacity=0); /* ie  */
opacity: 0; /* css standard, currently it works in most modern browsers like firefox,  */ 
}
#gnb.sticky_gnb ul li a:hover {color:#569ffd;}
#gnb.sticky_gnb ul li a:hover .hover_line {display:block;width:100%;
filter:alpha(opacity=100); /* ie  */
opacity: 1; /* css standard, currently it works in most modern browsers like firefox,  */ 
}
#gnb.sticky_gnb ul li a.on {color:#569ffd;}
#gnb.sticky_gnb ul li a.on .hover_line {display:block;width:100%;
filter:alpha(opacity=100); /* ie  */
opacity: 1; /* css standard, currently it works in most modern browsers like firefox,  */ 
}

#gnb.sticky_gnb ul li ul {display:block;position:absolute;left:50%;top:60px;width:140px;height:0;overflow:hidden;margin:0 0 0 -70px;z-index:9999}
#gnb.sticky_gnb ul li ul li {width:100%;}
#gnb.sticky_gnb ul li ul li a {display:block;height:40px;color:#666;font-size:12px;font-weight:normal;line-height:40px;text-align:left;text-indent:10px;background:#fff;border-bottom:solid 1px #eee;}
#gnb.sticky_gnb ul li ul li a:hover {color:#fff;background:#27a6ff;}

#tnb {position:absolute;right:2%;top:26px;color:#fff;font-family: 'Titillium Web', sans-serif;font-weight:300;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#tnb:after {display:block;visibility:hidden;clear:both;content:""}
#tnb a {color:#fff;}
#tnb strong {color:#569ffd;font-size:24px;}

#tnb_m {display:none;position:absolute;right:2%;top:10px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#tnb_m a {display:block;width:42px;height:42px;line-height:42px;text-align:center;border:solid 1px #fff;border-radius:50%;}

#top_btn {position:fixed;bottom:20px;right:20px;width:39px;height:39px;overflow:hidden;line-height:999;background:url(../images_/btn_top.html) no-repeat 50% 50%;border:solid 1px #999}
#top_btn:hover{}

#section1 {position:relative;padding:120px 0 40px 0;background:url(images_/bg.html) repeat-x 0 0 #eee;z-index:9}

.wrapper-2 {width:100%;max-width:1200px;margin:0 auto;}
.example-2 {position:relative;width:100%;height:auto;overflow:hidden;}
.example-2 ul {overflow:hidden;margin:0;zoom1;}
.example-2 ul li {float:left;}
.example-2 ul li img {width:100%;height:auto;}

.dots-2 {position:absolute;left:50%;bottom:60px;width:300px;margin:0 0 0 -150px;padding:0;text-align:center;}
.dots-2 li {display:inline-block;*display:inline;*zoom: 1;list-style:none;width:11px;height:11px;margin:0 3px;background:rgba(0,0,0,0.4);border-radius:50%;cursor:pointer}
.dots-2 li:hover, .dots-2 li.active {background:rgba(0,0,0,0.8);}

#section2 {position:relative;margin:-80px 0 0 0;padding:0 0 80px 0;text-align:center;}
#section2 h1 {display:block;margin:0 0 10px 0;color:#222;font-size:36px;}
#section2 p {margin:0 0 40px 0;font-size:24px;font-family: 'Titillium Web', sans-serif;font-weight:300;}

#notice_wrap {position:relative;width:100%;max-width:1200px;margin:0 auto 80px auto;z-index:999;}
ul.notice {width:100%;}
ul.notice:after {display:block;visibility:hidden;clear:both;content:""}
ul.notice li {display:block;position:relative;float:left;width:50%;height:340px;text-align:left;}
ul.notice li.notice_img {background:url(../images_/notice_bg.html) no-repeat 50% 50%;background-size:cover;}
ul.notice li.notice_img a {display:block;position:absolute;right:20px;bottom:20px;color:#fff;font-size:36px;font-family: 'Titillium Web', sans-serif;font-weight:300;}
ul.notice li.notice_list {padding:100px 40px 0 40px;background:#f63941}
ul.notice li.notice_list h2 {display:block;height:60px;color:#fff;font-size:36px;line-height:normal;font-family: 'Titillium Web', sans-serif;font-weight:300;border-bottom:solid 1px;border-color:rgba(255,255,255,0.3)}
ul.notice li.notice_list div {display:block;margin:0;padding:0 20px;line-height:normal;border-bottom:solid 1px;border-color:rgba(255,255,255,0.3)}
ul.notice li.notice_list div a {display:block;height:50px;overflow:hidden;color:#fff;font-size:18px;line-height:50px;white-space:nowrap;background:url(../images_/bullet.html) no-repeat right 50%;}

#guide {}


#section3 {}
#section3 ul.prod {width:100%;}
#section3 ul.prod:after {display:block;visibility:hidden;clear:both;content:""}
#section3 ul.prod li {display:block;float:left;width:25%;height:380px;padding:20px 0 0 0;overflow:hidden;font-size:16px;text-align:center;font-family: 'Titillium Web', sans-serif;font-weight:300;}
#section3 ul.prod li strong {display:block;margin:0;color:#fff;font-size:30px;font-weight:300;line-height:40px;}
#section3 ul.prod li.prod1 {background:url(../images_/prod_bg1.html) no-repeat 50% 50%;background-size:cover;color:#000}
#section3 ul.prod li.prod2 {background:url(../images_/prod_bg2.html) no-repeat 50% 50%;background-size:cover;}
#section3 ul.prod li.prod3 {background:url(../images_/prod_bg3.html) no-repeat 50% 50%;background-size:cover;}
#section3 ul.prod li.prod4 {background:url(../images_/prod_bg4.html) no-repeat 50% 50%;background-size:cover;}
#section3 ul.prod li .img {width:100%;max-width:340px;margin:0 auto;}
#section3 ul.prod li .img img {width:100%;height:auto}
#section3 ul.prod li p {padding:0 10px;color:#fff;line-height:22px;}


#section4 {padding:60px 0;background:url(../images_/uc_bg.html) no-repeat 50% 50%;background-size:cover;}
#section4 h1 {display:block;margin:0 0 40px 0;color:#fff;font-size:36px;text-align:center;font-family: 'Titillium Web', sans-serif;font-weight:300}
#section4 ul.utube_list {display:block;width:100%;max-width:1200px;margin:0 auto;}
#section4 ul.utube_list:after {display:block;visibility:hidden;clear:both;content:""}
#section4 ul.utube_list li {display:block;float:left;width:50%;padding:0 10px;}
#section4 ul.utube_list li label {display:block;margin:10px 0 0 0;color:#fff;font-size:24px;text-align:center;font-family: 'Titillium Web', sans-serif;line-height:32px}
#section4 ul.utube_list li .utube {position: relative;width:100%;padding-bottom:56.25%;}
#section4 ul.utube_list li .utube iframe {position:absolute;width:100%;height:100%;}

#section5 {}
#section5 h1 {font-size:36px;color:#fff;font-weight:300;text-align:center;font-family: 'Titillium Web', sans-serif;line-height:80px;background:#569ffd;}

ul.case {width:100%;}
ul.case:after {display:block;visibility:hidden;clear:both;content:""}
ul.case li {display:block;position:relative;float:left;width:25%;height:250px;overflow:hidden;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
ul.case li img {width:100%;height:auto;}
ul.case li a {display:block;position:absolute;left:0;top:0;width:100%;height:100%;padding:80px 0 0 0;color:#fff;font-size:18px;text-align:center;background:#000;opacity:0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
ul.case li a:hover {opacity:0.8;}
ul.case li strong {display:block;width:120px;height:50px;margin:10px auto 0 auto;text-align:center;font-size:14px;;line-height:50px;border:solid 1px;;border-color:rgba(255,255,255,0.3)}


#section6 {padding:80px 0;text-align:center;}
#section6 h1 {display:block;margin:0 0 10px 0;color:#222;font-size:48px;font-family: 'Titillium Web', sans-serif;font-weight:300}
#section6 p {margin:0 0 40px 0;font-size:24px;}
#section6 ul {display:block;width:100%;max-width:1000px;margin:0 auto;}
#section6 ul:after {display:block;visibility:hidden;clear:both;content:""}
#section6 ul li {display:block;float:left;width:20%;}
#section6 ul li a {display:block;width:160px;margin:0 auto;border:solid 1px #ccc;border-radius:50%;}
#section6 ul li a img {width:100%;height:auto}


#section7 {}
#section7:after {display:block;visibility:hidden;clear:both;content:""}
#section7 ul {width:100%;}
#section7 ul:after {display:block;visibility:hidden;clear:both;content:""}
#section7 ul li {display:block;float:left;width:33.3%;}
#section7 ul li a {display:block;padding:50px 0;color:#fff;font-size:18px;text-align:center;line-height:40px;background-size:cover !important;}
#section7 ul li a.q1 {background:url(../images_/q_bg1.html) no-repeat 50% 50%;}
#section7 ul li a.q2 {background:url(../images_/q_bg2.html) no-repeat 50% 50%;}
#section7 ul li a.q3 {background:url(../images_/q_bg3.html) no-repeat 50% 50%;}
#section7 ul li a.q4 {background:url(../images_/q_bg4.html) no-repeat 50% 50%;}
#section7 ul li a.q5 {background:url(../images_/q_bg5.html) no-repeat 50% 50%;}
#section7 ul li a.q6 {background:url(../images_/q_bg6.html) no-repeat 50% 50%;}


#section8 {position:relative;background:#eee;}
#section8 .section8_area {display:block;position:relative;width:100%;max-width:1100px;height:180px;overflow:hidden;margin:0 auto;font-family: 'Titillium Web', sans-serif;}
#section8 .img {display:block;position:absolute;left:0;top:0;z-index:9;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#section8 .txt {position:absolute;left:40%;top:60px;padding:0 0 0 100px;font-size:24px;line-height:30px;z-index:99;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#section8 .txt strong {color:#222;font-size:48px;font-weight:300;}
#section8 .txt_v2 {position:absolute;left:0;top:0;}
#section8 a {display:block;position:absolute;width:100px;height:50px;right:0;top:50%;margin:-25px 0 0 0;font-size:24px;text-align:center;color:#fff;line-height:50px;background:#5bc0de;border-radius:5px;z-index:999;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#section8 a:hover {background:#444;}


#section9 {padding:80px 0;color:#fff;text-align:center;background:url(../images_/contact_bg.html) no-repeat 50% 50%;background-size:cover}
#section9 h1 {display:block;margin:0 0 40px 0;color:#fff;font-size:48px;font-family: 'Titillium Web', sans-serif;font-weight:200;}
#section9 p {margin:0 0 40px 0;font-size:24px;line-height:36px;}
#section9 ul {margin:0 0 60px 0;}
#section9 ul li {display:block;margin:0;font-size:30px;font-family: 'Titillium Web', sans-serif;font-weight:200;}
#section9 a {display:block;width:240px;height:60px;margin:0 auto;color:#fff;font-family: 'Titillium Web', sans-serif;font-size:30px;text-align:center;line-height:60px;font-weight:200;border:solid 1px #fff;border-radius:5px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#section9 a:hover {background:#f63941}


#footer_wrap {padding:60px 0;text-align:center;background:#222;}
#footer_wrap h2 {display:block;margin:0 0 20px 0;}
#footer_wrap ul {text-align:center;}
#footer_wrap ul li {display:inline-block;margin:0 8px 10px 0;padding:0 8px 0 0;color:#ccc;border-right:solid 1px #666;}
#footer_wrap ul li:last-child {margin:0;padding:0;border-right:none}
#footer_wrap .copy {display:inline-block;color:#999;}


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








@media screen and (max-width:1024px) {
#header_wrap {height:60px}

.logo {left:50%;top:0;margin:0 0 0 -94px}
.logo img {width:auto;height:60px;}

#gnb {display:none}
#gnb.sticky_gnb {display:none}

#tnb {display:none}

#tnb_m {display:block;}

ul.case li {width:33.3%;height:220px;}
ul.case li a {padding:60px 0 0 0;}

}





@media screen and (max-width:768px) {
#tnb {display:none;}

#section1 {padding:80px 0 10px 0;background:url(images_/bg.html) repeat-x 0 0 #f6f6f6;z-index:9}

.dots-2 {bottom:10px;}

#section2 {margin:0 auto}
#section2 h1 {font-size:30px;}
#section2 p {font-size:18px;}

#notice_wrap {width:100%;max-width:1200px;margin:0 auto 80px auto;z-index:999;}
ul.notice li {float:none;width:100%;height:auto;}
ul.notice li.notice_img {height:100px;}
ul.notice li.notice_img a {bottom:10px;font-size:30px;}
ul.notice li.notice_list {padding:40px 10px;}
ul.notice li.notice_list h2 {font-size:30px;}
ul.notice li.notice_list div {padding:0 10px;}
ul.notice li.notice_list div a {height:40px;right:10px;font-size:16px;line-height:40px;}


#section3 ul.prod li {width:50%;height:380px;padding:20px 0 0 0;}
#section3 ul.prod li .img {width:100%;max-width:340px;margin:0 auto;}
#section3 ul.prod li .img3 {margin:0 0 0 -150px;}
#section3 ul.prod li p {font-size:16px;}

#section4 ul.utube_list li {float:none;width:100%;margin:0 0 30px 0;padding:0 20px;}

#section5 h1 {font-size:30px;}

ul.case li {width:50%;height:220px;}
ul.case li a {padding:60px 0 0 0;}

#section6 {padding:60px 0;}
#section6 h1 {font-size:36px;}
#section6 p {font-size:18px;}
#section6 ul li {width:50%;margin:0 0 20px 0;}
#section6 ul li a {width:120px;}

#section7 ul li {width:50%;}
#section7 ul li a {padding:40px 0;}

#section8 .section8_area {background:#222}
#section8 .img {left:-100px;top:0;z-index:9;opacity:0.4}
#section8 .txt {position:absolute;left:20%;top:30px;padding:0 0 0 80px;color:#fff;font-size:18px;line-height:24px;}
#section8 .txt strong {font-size:36px;color:#fff;}
#section8 .txt_v2 img {width:60px;height:auto}
#section8 a {width:100px;height:40px;left:20%;top:65%;margin:0 0 0 0;line-height:40px;font-size:18px;}

#section9 {padding:80px 40px;}
#section9 h1 {font-size:36px;}
#section9 p {font-size:20px;line-height:26px;}
#section9 ul li {font-size:24px;}
#section9 a {width:220px;height:50px;font-size:24px;line-height:50px;}

#footer_wrap ul {margin:0 0 10px 0;}
#footer_wrap ul li {display:block;margin:0 0 10px 0;;padding:0;border-right:none;}
#footer_wrap ul li:last-child {margin:0 0 10px 0;}
#footer_wrap .copy span {display:block;margin:0 0 10px 0}
}





@media screen and (max-width:480px) {
.demo-inner-content {margin:120px auto;}

#section3 ul.prod li {width:100%;height:360px;padding:20px 0 0 0;}

ul.case li {width:100%;height:200px;}
ul.case li a {padding:60px 0 0 0;}

#section8 .img {left:-160px;top:0;z-index:9;}
#section8 .txt {left:10%;}
#section8 a {left:10%;}
}