@charset "utf-8";

/*=================================
루트리 레이아웃 css
2018-10-05 주필규(websre@naver.com)
================================= */

img.pc {display:block;}
img.mobile {display:none;}

/* 헤더영역 */
#header {position:fixed; width:100%; height:115px;margin:0px auto;/* box-shadow:0px 1px 3px rgba(0,0,0,0.11);*/z-index:1990;opacity:1;}

#header .header_top {background:#fff;content:'';position:relative;width:100%;height:40px;border-bottom:solid 1px #e7e7e7;}
#header .inner_menu {margin:0px auto;position:relative;width:1060px;}
#header .inner {clear:both; content:''; display:block; z-index:1100;}
#header #logo {padding-top:20px; position:absolute;z-index:1100}
#header #logo a {display:inline-block; width:233px;}
#header #logo a img.pc {width:auto; display:block;color:#222;}
#header #logo a img.mobile {width:100%; display:none}
#header .m_gnb a {display:block; width:auto; height:100%; position:absolute; top:0; left:0; z-index:2000}
#header .gnbOpen {position:absolute; left:20px; top:24px; display:none; transition:all 0.3s ease}
#header .gnbOpen:after {clear:both; content:''; display:block}
#header .gnbOpen span.gnbBar {position:absolute; display:block; width:24px; height:2px; background:#929292; transition:all 0.3s ease}
#header .gnbOpen span.gnbBar.gnbBar1 {top:0}
#header .gnbOpen span.gnbBar.gnbBar2 {width:20px; top:8px; left:0px}
#header .gnbOpen span.gnbBar.gnbBar3 {top:16px}
#header .gnbOpen.open span.gnbBar.gnbBar1 {top:15px;left:5px; transform:rotate(45deg); background:#fff}
#header .gnbOpen.open span.gnbBar.gnbBar2 {left:50px; opacity:0}
#header .gnbOpen.open span.gnbBar.gnbBar3 {top:15px;left:5px; transform:rotate(-45deg); background:#fff}
.login_wrap_m {display:none;}

nav#gnb > ul > li:nth-child(2) {display:none;}

body.scrollfix #topmenu {position:fixed;top:0px;}
#topmenu {width:100%;height:80px;background:#fff;border-bottom:solid 5px #00299d;}
nav#gnb {position:relative;float:right; top:0px; right:0px;}
nav#gnb > ul {display:inline-block;vertical-align:top;padding-right:0px;}
nav#gnb > ul > {display:table; table-layout:fixed; text-align:center}
nav#gnb > ul > li {display:table-cell; width:auto; position:relative; /*min-width:130px;*/ text-align:center;}
nav#gnb > ul > li a {display:inline-block; padding:32px 20px; font-size:16px; color:#222222; transition:all 0.3s ease;font-weight:inherit;font-style:inherit;font-family: 'Roboto Condensed', 'notokr';font-weight:400;letter-spacing:0.1px;line-height:1;border:solid 0px red;}
nav#gnb > ul > li:last-child a {padding-right:0px;}
nav#gnb > ul > li.on a {color:#0028a1;}
nav#gnb > ul > li a:hover {color:#0028a1}
nav#gnb > ul > li ul.snb {position:absolute; width:210px;left:50%; margin-left:-105px;background:#fff;border:solid 1px #f1f1f1; /*box-shadow:3px 3px 10px 0px rgba(0,0,0,0.1);*/ display:none;padding:0px;padding-bottom:20px;z-index:-1;margin-top:0px;}
nav#gnb > ul > li ul.snb .menu_arrow {position:absolute;left:50%;margin-left:-9px;top:-17px;}
nav#gnb > ul > li ul.snb > li {text-align:center;}
nav#gnb > ul > li ul.snb > li:first-child {padding-top:20px;}
nav#gnb > ul > li ul.snb > li:last-child {padding-bottom:20px;}
nav#gnb > ul > li ul.snb > li.on a {background:#94775f;color:#fff;}
nav#gnb > ul > li ul.snb > li a {text-align:center; display:block; width:100%; height:100%; padding:2px 8px; /*border-bottom:1px solid #d9d9d9;*/ font-size:14px;color:#222; transition:all 0.3s ease; line-height:1.75; word-break:keep-allfont-family:'Roboto Condensed', sans-serif,notokr;}
nav#gnb > ul > li ul.snb > li a:hover {/*background:#a8b4c2;*/ color:#f67500; /*border-bottom:1px solid #a8b4c2*/}
#lnb {position:absolute; top:28px; right:120px;font-family:Gotham;}
#lnb:after {content:''; clear:both; display:block}

nav#gnb > ul > li ul.snb_car {position:absolute; width:950px;left:50%;margin-left:-475px;/*background:#fff;*/display:none;padding-bottom:20px;text-align:left;margin-top:0px;}
nav#gnb > ul > li ul.snb_car:after {content:'';background:#fff;width:100%;height:264px;left:0px;position:fixed;top:120px;z-index:-1;/*box-shadow:3px 3px 10px 0px rgba(0,0,0,0.1);*/ border-top:solid 0px #f1f1f1;border-bottom:solid 5px #00299d;}
nav#gnb > ul > li ul.snb_car .menu_arrow {position:absolute;left:50%;top:-17px}
nav#gnb > ul > li ul.snb_car .menu_close {position:absolute;right:-100px;top:20px;}
nav#gnb > ul > li ul.snb_car > li {position:relative;display:inline-block;text-align:left;z-index:2;}
nav#gnb > ul > li ul.snb_car > li a span.car {display:block;position:relative;}
nav#gnb > ul > li ul.snb_car > li a {padding:15px 10px;}
nav#gnb > ul > li ul.snb_car > li a:hover { color:#f67500;}

nav#gnb > ul > li ul.snb_car > li a span.car:before {position:absolute; top:0; left:0; bottom:0; right:0; content:''; border:3px solid transparent; z-index:10; transition:all .5s ease}
nav#gnb > ul > li ul.snb_car > li a span.car:hover {/*box-shadow:0 18px 20px rgba(0, 0, 0, .1)*/}
nav#gnb > ul > li ul.snb_car > li a span.car:hover:before {border-color:#f67500}

.login_wrap {position:relative;float:right;right:0px;margin-top:7px;}
.login_wrap ul {}
.login_wrap ul li {position:relative; padding:0 20px;display:inline-block;border-right:solid 1px #eaeaea;}
.login_wrap ul li:last-child {border-right:0px;padding-right:0px;}
.login_wrap ul li:nth-child(3) {border-right:0px;}
.login_wrap ul li > a {display:block; font-size:14px; font-family:'Roboto Condensed', sans-serif;color:#888;}
.login_wrap ul li > a:hover {color:#5d4835;}
.login_wrap ul li > a i {}
.login_wrap ul li.lang {padding:0px;border:0px;}
.login_wrap span a {display:block; font-size:11px; color:#fff;font-family:Gotham;/*background:#f67500;padding:5px 10px;*/margin-left:3px;}
.mobile_icon {display:none;}
.mask {display:none; position:fixed; width:100%; height:0; background:#000; opacity:0; z-index:1000; transition:all 0.3s ease}
#header #nav li a:hover:after {width:80%}

/*메인비주얼*/
.wide_inner {position:relative;padding-top:120px;background:#f6f6f6;border-bottom:solid 1px #d1d1d1;}
#mainVisual {position:relative;z-index:9;width:100%;height:747px;}
#mainVisual .left_visual {float:left;width:70%;height:747px;}
#mainVisual .right_visual {float:left;width:30%;height:747px;}
#mainVisual .right_visual .main_small_visual {height:249px;background-size:cover;}
#mainVisual .right_visual .main_small_banner img {width:100%}
#mainVisual .right_visual .small_banner {width:100%;height:524x;}
#mainVisual .right_visual .small_banner .left {float:left;width:50%;background:#8a8a8a;height:249px;}
#mainVisual .right_visual .small_banner .backclr {background:#f0f1f2;height:249px;}
#mainVisual .right_visual .small_banner .right {float:right;width:50%;background:#585858;height:498px;}
#mainVisual .right_visual .small_banner {text-align:center;}
#mainVisual .right_visual .small_banner h1 {text-align:center;padding:50px 0px 30px;}
#mainVisual .right_visual .small_banner h1 img {display:inline-block;}
#mainVisual .right_visual .small_banner span {font-size:18px;margin-bottom:5px;display:block;}
#mainVisual .right_visual .small_banner p {font-size:13px;line-height:1.5;}
#mainVisual .right_visual .small_banner .left span {color:#fff;}
#mainVisual .right_visual .small_banner .left p {color:#fff;}
#mainVisual .right_visual .small_banner .right h1 {padding-top:70px;}
#mainVisual .right_visual .small_banner .right span {color:#fff;}
#mainVisual .right_visual .small_banner .right p {color:#fff;}
#mainVisual .right_visual .small_banner .right p.tel {color:#00c5d6;padding:15px 0px;position:relative;overflow:hidden;}
#mainVisual .right_visual .small_banner .right p.tel:before {content:'';position:absolute;width:200px;left:50%;margin-left:-100px;bottom:0px;height:1px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#949494+0,949494+51,949494+100&0+0,1+51,0+100 */
background: -moz-linear-gradient(left, rgba(148,148,148,0) 0%, rgba(148,148,148,1) 51%, rgba(148,148,148,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(148,148,148,0) 0%,rgba(148,148,148,1) 51%,rgba(148,148,148,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(148,148,148,0) 0%,rgba(148,148,148,1) 51%,rgba(148,148,148,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00949494', endColorstr='#00949494',GradientType=1 ); /* IE6-9 */
}
#mainVisual .right_visual .small_banner .right p.hand {color:#f67500;padding:15px 0px 10px;position:relative;overflow:hidden;}
#mainVisual .right_visual .small_banner .right p.hand:before {content:'';position:absolute;width:200px;left:50%;margin-left:-100px;top:0px;height:1px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#545454+0,292929+50,545454+100 */
background: #545454; /* Old browsers */
background: -moz-linear-gradient(left, #545454 0%, #292929 50%, #545454 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #545454 0%,#292929 50%,#545454 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #545454 0%,#292929 50%,#545454 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#545454',GradientType=1 ); /* IE6-9 */
}
#mainVisual .right_visual .small_banner .right p.mungu {color:#e2e2e2;padding-top:10px;}
#mainVisual .right_visual .small_banner .backclr span {color:#333;}
#mainVisual .right_visual .small_banner .backclr p {color:#333;}

/* 섹션1 - A Company Leading By Technology */
#content {clear:both;}
#content {position:relative;padding:80px 0;width:100%;}
#content .container_inner {position:relative;}
#content .title {text-align:center;color:#000;}
#content .title span.we {font-size:35px;}
#content .image {position:relative;margin-top:40px;font-size:0px;}
#content .image li {width:32%;margin-right:2%;float:left;text-align:left;vertical-align:top;}
#content .image li:last-child {margin-right:0px;}
#content .image li img {width:100%;border:solid 1px #000;}
#content .image span {font-size:18px;padding:20px 0px 0px 20px;display:block;color:#000;}
/*#content .image li:first-child span {padding-left:20px;}*/
#content .image p {line-height:1.5;font-size:14px;color:#666;margin-top:10px;}

/* 섹션2 - camping trailer */
#camping {}
#camping {position:relative;padding:80px 0;clear:both;}
#camping .container_inner {position:relative;}
#camping .title {text-align:center;color:#000;}
#camping .title span.we {/*background:url(../img/main_bottom_img.jpg) no-repeat top center;background-size:cover;height:540px;*/display:block;position:relative;}
#camping .title span.we img {width:100%;border:solid 1px #000;}
#camping .image {width:100%;position:relative;margin-top:40px;font-size:0px;display:inline-block;background:#f0f1f3;padding-bottom:20px;border:solid 1px #000;}
#camping .image li {width:16.3%;margin-right:0.44%;float:left;text-align:left;vertical-align:top;}
#camping .image li:last-child {margin-right:0px;}
#camping .image li img {width:100%;border:solid 0px #d1d1d1;}
#camping .image span {font-size:18px;padding:30px 0px 10px 10px;display:block;color:#000;}
#camping .image p {line-height:1.5;font-size:14px;color:#666;margin-top:5px;}

/* footer */
#footer {position:relative;clear:both; padding:0px;margin-top:50px; background:#c7c7c7;/*height:auto !important;*/}
#footer .footer {}
#footer .footer .foot_menu {padding:40px 0px 25px;border-bottom:solid 1px #a2a2a2;}
#footer .footer .foot_menu ul {font-size:0px}
#footer .footer .foot_menu > ul > li {display:inline-block;width:16.6%;vertical-align:top;font-size:18px;}
#footer .footer .foot_menu > ul > li > a {margin-bottom:10px;display:block;color:#636363;}
#footer .footer .foot_menu > ul > li:last-child {width:17%;}
#footer .footer .foot_menu > ul > li ul li a{font-size:14px;line-height:1.5;color:#636363;}
#footer .footer .foot_menu > ul > li ul li a:hover {color:#f67500;}

#footer .footer .info {position:relative;border-top:solid 1px #dfdfdf;}
#footer .info h1 {position:absolute;right:0px;top:25px;}
#footer .info .copyright {padding:25px 0px 35px;width:100%;display:inline-block;vertical-align:top;}
#footer .info .copyright span {display:inline-block;font-family:notokr;font-size:13px;line-height:1.8;letter-spacing:0px;}
#footer .info .copyright p {color:#fff;font-size:12px;font-family:Gotham;letter-spacing:1px;margin-top:10px;}
#footer .inner {clear:both; content:''; display:block;width:1060px;}
#footer .inner .info {width:100%;}
#footer .inner .info span {font-size:14px; font-weight:500; color:#636363; display:inline-block; padding:5px 20px 5px 0;}
#footer .inner .info span br.pcNone {display: none;}
#footer .inner .scrolltop {text-align:center;background:#6f6f6f;width:84px;height:44px;color:#fff;font-size:12px;line-height:1;padding-top:8px;position:absolute;right:0px;top:-44px;}

/* common css */
.inner {width:1060px; margin:0 auto; position:relative}
.inner:after {content:''; clear:both}
.inner3 {width:1160px; margin:0 auto; position:relative}
.inner3:after {content:''; clear:both}
.inner_content {width:1200px; margin:0 auto; position:relative}
.inner_content:after {content:''; clear:both}

/* btn style */
.btn {display:inline-block; position:absolute; font-size:17px;padding:15px 22px; color:#a1a7b7 !important; transition:all .3s ease}
.btn-gray {padding:15px 43px; border:1px solid #a1a7b7; background:#a1a7b7; color:#fff !important}
.btn-gray:hover {background:#7b849a; border:1px solid #7b849a}
.btn-gray-o {border:1px solid #a1a7b7}
.btn-gray-o:hover {border:1px solid #a1a7b7; background:#a1a7b7; color:#fff !important}
.down_wrap {position:absolute; bottom:20px; left:50%; width:auto; text-align:center; z-index:880; margin-left:-25px}
.down_wrap span {display:block; font-size:14px; font-weight:500; color:#000}
.down_wrap i {
    font-size:50px;
    color:#c4c5c7;
    animation-name: downArrow;
    -webkit-animation-name: downArrow;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1.4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
@keyframes downArrow {
    0% {
        padding-bottom:0;
    }
    50% {
        padding-bottom:5px
    }
    100% {
        padding-bottom:0
    }
}