@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
body {min-width: 320px; margin: 0; padding: 0; min-width: 320px; font-size: 15px; font-family:'Malgun Gothic','Noto Sans KR','Nanum Gothic',sans-serif; }
#wrap{width:100%;position:relative;text-align:center;}
.inner {position:relative; width:1200px; margin:0 auto;}
.slideon { opacity: 0; transform: translateY(50%); transition-duration: 1s; transition-delay: .5s;}
.slide { opacity: 1; transform: translateY(0%);}
.clear {clear:both;}
.content-title {display: inline-block; font-size:2.1em; letter-spacing: -1px; font-weight: bold; font-family: "Malgun gothic"; margin-bottom: 45px;}
.sub-text {font-size:20px; word-break: keep-all; color:#666; font-family: "Malgun Gothic"; letter-spacing: -1px;}
.op-animate {opacity: 0;}
.fl {float:left;}
.fr {float:right;}
#container {margin-top: 150px;}
#container:after {content: ''; display: block; clear: both;}

/* 상단 */
/* #topmenu {position:fixed; top:0; left:0; width:100%;height:85px;text-align:center;z-index:100; transition:all .3s; background:rgba(22,26,28,0.8);} 
#topmenu:hover {background:rgba(22,26,28,0.8); transition: all .4s;}
*/
#topmenu {position:fixed; top:0; left:0; width:100%;height:85px;text-align:center;z-index:100; transition:all .3s; background:rgba(253,126,20,0.5);}
#topmenu:hover {background:rgba(253,126,20,1); transition: all .4s;}
#topmenu:hover .top-nav > ul > li > a {color:#fff;}
#topmenu:hover h1 img.logo-black {display: none;}
#topmenu:hover h1 img.logo-white {display: block;}
#topmenu.on {height:195px;}
#topmenu .inner {width:1200px;}
#topmenu h1 {position:absolute; top:15px; left:0; text-align:center; z-index:99;}
#topmenu h1 img {width:200px;}
#topmenu h1 img.logo-white {display: none;}
#topmenu h1 img.logo-black {display:block; margin-top: 5px;}
#topmenu .top-board {position:absolute; top:10px; right:0; transition:all .3s; z-index:100;}
#topmenu .top-board ul li {position: relative; float:left; margin:0 8px;}
#topmenu .top-board ul li img {width:26px;}
#topmenu .top-board ul li div {display:none; position: absolute; top:35px; background:#666; padding:3px 0;}
/* #topmenu .top-board ul li div a {color:#fff; display: inline-block; padding:1px 5px; font-size: 17px; font-weight: bold;} */
/* #topmenu .top-board ul li div a.on {color:#00417a;} */
#topmenu .top-board ul li div a.on {color:#fff;}
#topmenu .top-board .searchForm {position: relative; background: #fff; margin-top: 10px;}
#topmenu .top-board .searchForm input { width:100%; padding: 5px 0;}
#topmenu .top-board .searchForm i {position: absolute; right: 5px; top:5px; color:#999;}

#topmenu .top-nav {position:relative; font-size:0; padding-top:26px; transition:all .3s; }
#topmenu .top-nav > ul > li {display:inline-block; vertical-align:top; font-size:19px; font-weight:400; }
#topmenu .top-nav > ul > li > a {position:relative; color:#fff; display:block; padding:0 15px 33px; overflow:hidden; transition: all .2s; font-size: 18px; font-family: "Malgun Gothic"; font-weight: bold;}
#topmenu .top-nav > ul > li > a:hover {color:#c5deff;}
#topmenu .top-nav > ul > li.on > a:after {content:''; position: absolute; left:20px; right:20px; bottom:0; border-bottom:4px solid #dbdbdb; transition: all .2s;}
#topmenu .top-nav-title span {position:absolute; display:none; width:100%; height:2px; background:#fff; top:96%!important;}
#topmenu .top-nav-title span.line {display:block!important; left:0!important;}
#topmenu .top-nav .sub-wrap {opacity:0; visibility:hidden; position:absolute; width:100vw; left:0; z-index:999; transition:all .2s; transform:translateY(-2px); background:#fff; margin-top:1px;}
#topmenu .top-nav .sub-wrap:before {content:''; background:#dbdbdb; position: absolute;left:0; width:33.333%; top:0; bottom:0;}
#topmenu .top-nav .sub-wrap.active {opacity:1; visibility:visible;}
#topmenu .top-nav .sub-wrap .sub-content {overflow:hidden; position:relative; z-index:10; height:372px; max-width:1280px; margin:0 auto;}
#topmenu .top-nav .sub-wrap .sub-content .sub-left {width:35%; background:#dbdbdb; height:100%; float:left; text-align:left; padding:35px 50px 40px 10px; box-sizing: border-box;}
#topmenu .top-nav .sub-wrap .sub-content .sub-left h2 {margin-bottom: 20px;}
#topmenu .top-nav .sub-wrap .sub-content .sub-left p {font-size:13px; line-height: 1.7; letter-spacing: -1px; word-break:keep-all;}
#topmenu .top-nav .sub-wrap .sub-content .sub-left a {color:#444; font-size:13px; letter-spacing: -1px;}
#topmenu .top-nav .sub-wrap .depth1 {float:left; text-align: left; margin-top:35px; width:60%;}
#topmenu .top-nav .sub-wrap .depth1 > li {font-size:15px; margin:0 0 0 8%;}
#topmenu .top-nav .sub-wrap .depth1 li a {display:inline-block; color:#444; font-size: 14px; padding:8px 10px; transition: all .3s;}
#topmenu .top-nav .sub-wrap .depth1 > li > a:after {content:'>'; position: absolute; margin-left: 7px;}
#topmenu .top-nav .sub-wrap .depth1 li a:hover {color:#005295; text-decoration: underline;}
#topmenu .top-nav .sub-wrap .depth2 {position: absolute; left:55%; top:35px; bottom:50px; width:30%; }
#topmenu .top-nav .sub-wrap .depth2 div {font-weight: bold; color:#444; font-size:13px; width:288px; font-weight: 400;}
#topmenu .top-nav .sub-wrap .depth2 div p {line-height: 1.5; margin-top:15px;}
#topmenu .top-nav .sub-wrap .sub-right-img {position: absolute; top:7%; left:70%; color:#444; font-size:13px; width:370px; display: block; text-align: center; font-weight: 400;}
#topmenu .top-nav .sub-wrap .sub-right-img img { width:70%;}
#topmenu .top-nav .sub-wrap .sub-right-img p {line-height: 1.5; margin-top:15px; text-align:left; word-break: keep-all; letter-spacing: -1px;}
#topmenu .top-nav .sub-menu {transition:all .2s;}
#topmenu .top-nav-bg {position:absolute; left:0; width:100%; height:0; background:rgba(0,0,0,0.3); transition:all .2s; opacity:0; z-index:98;}
/* #topmenu.fixmenu {height:60px; background:rgba(22,26,28,0.8); border-bottom:0;} */
#topmenu.fixmenu {height:60px; background:rgba(0,123,255,0.5); border-bottom:0;}
#topmenu.fixmenu:hover {background:rgba(0,123,255,1); transition: all .4s;}
/*#topmenu.fixmenu h1 {left:0; top:10px; width:auto; padding:0; text-align:left;}*/
#topmenu.fixmenu h1 {left:0; top:10px; width:auto; padding:0; text-align:left;}
#topmenu.fixmenu h1 img {width:150px;}
#topmenu.fixmenu h1 img.logo-white {display: block;}
#topmenu.fixmenu h1 img.logo-black {display: none;}
#topmenu.fixmenu .top-board {top:20px; display: none;}
#topmenu.fixmenu .top-notice {top:20px; display: none;}
#topmenu.fixmenu .top-board a img {width:20px;}
#topmenu.fixmenu .top-nav {padding-top:16px; border-bottom:0; }
#topmenu.fixmenu .top-nav > ul {text-align:right; width:1200px; margin:0 auto;}
#topmenu.fixmenu .top-nav > ul > li > a {font-size:18px; padding:0 15px 17px; color: #fff;}
#topmenu.fixmenu .cd-stretchy-nav {top:8px;}
#topmenu.fixmenu .cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after, #topmenu.fixmenu .cd-stretchy-nav.nav-is-visible ul li:first-of-type span {color:#232323;}
#topmenu.fixmenu .cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {border:1px solid #ebebeb; background:rgba(235,235,235,0.8);}
#topmenu.fixmenu .cd-stretchy-nav ul a {color:#757575;}
#topmenu.fixmenu .m_menu {top:24px}
#topmenu.fixmenu .top-nav-bg {background:rgba(255,255,255,0.8);}
#topmenu.fixmenu .top-nav .sub-wrap ul li a {color:#111111;}


/* 모바일 상단 */
#mTopmenu {display:none; position:fixed; top:0; left:0; width:100%; height:50px; border-bottom:0; z-index: 90; padding:0 5%; box-sizing: border-box; background:rgba(22,26,28,0.8);}
#mTopmenu h1 {position: relative; left:0; top:10px; width:auto; padding:0; text-align:center;}
#mTopmenu h1 img {width:130px; vertical-align: middle;}
#mTopmenu .menu {font-size:1em; margin-top:10px;position: absolute;top: 5px;}
#mTopmenu .menu a {position: relative; display:block; width:28px; height:21px;}
#mTopmenu .menu a span {position: absolute; background:#fff; display:block; width:28px; height:2px;}
#mTopmenu .menu a span:nth-child(1) {top:2px;}
#mTopmenu .menu a span:nth-child(2) {top:10px; width:22px;}
#mTopmenu .menu a span:nth-child(3) {top:18px;}
#mTopmenu .search {position: absolute; right: 70px; top:13px;}
#mTopmenu .search i {font-size: 1.5em; color: #fff;}
.search-form {display: none; position: fixed; top:50px; left: 0; width:100%; background: #fff; z-index: 999; padding: 10px; box-sizing: border-box;}
.search-form input {border:1px solid #dbdbdb; width:90%; height:30px;}
.search-form a {margin-left: 10px;}
.search-form i {font-size: 1.3em;}
.m-sub-topmenu {  background:rgba(22,26,28,0.8);}
.m-topmenu { background:transparent; transition: all .3s;}
.m-topmenu.fixmenu { background:rgba(22,26,28,0.8);}
.scroll-func {width:100%;}
.left-warp  {width:300px;position: absolute; left:-110%;display: none;z-index: 400;height:100%;background: #fff;overflow: hidden; padding: 0 4%; box-sizing: border-box;}
.left-warp h1 {float:left; padding:11px 0;}
.left-warp h1 img {width:145px;vertical-align: middle;}
.left-warp .depth {padding:10% 0;}
.left-warp .depth li a {display:block; padding:15px 3%;}
.left-warp .depth01 {position: relative; border-bottom: 1px solid #dbdbdb;}
.left-warp .depth01.active .depth02 {max-height: 650px; border-top:1px solid #161a1c;}
.left-warp .depth01.active .depth02 > li > a:after {content:"\f107"; font-family: FontAwesome; position: absolute; right:5%;}
.left-warp .depth02 li.active .depth03 {max-height: 500px;  border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; margin-bottom: -1px;}
.left-warp .depth02.nochild > li > a:after {display: none;}
.left-warp .depth01 > a {color:#1c1c1c; font-size:16px; position: relative;}
.left-warp .depth01 > a:after {content:"\f107"; font-family: FontAwesome; position: absolute; right:5%;}
.left-warp .depth01.nochild > a:after {display: none;}
.left-warp .depth02 { background:#f7f7f7; max-height: 0; overflow: hidden; -webkit-transition: max-height .2s; -moz-transition: max-height .2s; transition: max-height .2s;}
.left-warp .depth02 > li > a {color:#949494; font-size:13px; padding:10px 3% 10px 10%;}
.left-warp .depth03 { max-height: 0; overflow: hidden; -webkit-transition: max-height .2s; -moz-transition: max-height .2s; transition: max-height .2s;}
.left-warp .depth03 > li > a {color:#222; font-size:12px; padding:10px 3% 10px 15%;}
.left-warp .country {text-align:center;}
.left-warp .country li {display:inline-block; vertical-align: middle; margin:0 2%;}
.left-warp .country li a {color:#888;}
.left-warp .country li.on a {border-bottom:2px solid #161a1c; box-sizing:border-box; line-height:17px; color:#161a1c; padding-bottom: 5px;}
.left-warp .m-insta {text-align: center; margin-bottom: 20px;}
.black-bg {position: absolute;background:#000;width:100%;height: 100%;left:0;top:0;opacity: 0.6;z-index: 100;display: none;}
.not-scroll {position:fixed;overflow:hidden;width:100%;height:100%}
.side-close {float:right; margin-right:20px;}
.side-close a {position: relative;}
.side-close span {position: absolute; top:27px; display: block; width:23px; height:1px; background:#161a1c;}
.side-close span:nth-child(1) {transform:rotate(-45deg);}
.side-close span:nth-child(2) {transform:rotate(45deg);}








/* 서브 상단 */
#topmenu.sub-topmenu {height:60px; background:rgba(22,26,28,0.7); border-bottom:0;}
#topmenu.sub-topmenu h1 {left:0; top:10px; width:auto; padding:0; text-align:left;}
#topmenu.sub-topmenu h1 img {width:175px;}
#topmenu.sub-topmenu .top-board {top:21px; display: none;}
#topmenu.sub-topmenu .top-board a img {width:20px;}
#topmenu.sub-topmenu .top-nav {padding-top:20px; border-bottom:0;}
#topmenu.sub-topmenu .top-nav > ul {text-align:right; width:1200px; margin:0 auto;}
#topmenu.sub-topmenu .top-nav > ul > li > a {font-size:18px; padding:0 15px 20px;}
#topmenu.sub-topmenu .m_menu {top:24px}
#topmenu.sub-topmenu .top-nav-bg {background:rgba(255,255,255,0.8);}
#topmenu.sub-topmenu .top-nav .sub-wrap ul li a {color:#111111;}

.sub-title {width:100%; overflow: hidden;}
.sub-title .visual { min-height: 540px; animation:subTitle 5s; -webkit-animation:subTitle 5s;}

.navigation {text-align: center; font-size:0; margin-bottom: 145px; border-bottom:1px solid #acacac; height:60px;}
.navigation li {display: inline-block; font-size:16px; width:200px; font-family: "Noto Sans KR", sans-serif;}
.navigation li:last-child {border-right:0;}
.navigation li a {display: block; text-transform: uppercase; color:#666; transition:all .2s; height:60px; line-height: 60px;}
.navigation li a.on {font-weight: bold; color:#010101;  border-bottom:1px solid #000;}

@-webkit-keyframes subTitle { 
	0% { -webkit-transform: scale(1.2); transform: scale(1.2) rotate(0.1deg); }
  100% { -webkit-transform: scale(1); transform: scale(1) rotate(0); } }

@keyframes subTitle { 
	0% { -webkit-transform: scale(1.2); transform: scale(1.2)  rotate(0.1deg); }
  100% { -webkit-transform: scale(1); transform: scale(1)  rotate(0); } }

/* 메인배너 우측 */
#main {position: relative;}
.main-right {display:none; position: absolute; top:30%; left:0; width:100%;}
.main-right .main-right-wrap {position: relative; width:1200px; margin:0 auto;}
.main-right ul {position: absolute; right:0; top:50%;}
.main-right ul li {border:1px solid rgba(255, 255, 255, 0.4); background:rgba(0,0,0,0.3); text-align:left; padding:20px; margin-bottom: -1px;}
.main-right ul li:first-child {background:rgba(96,171,76,0.4);}
.main-right ul li a {display: block; color:#fff; line-height: 1.5;}


/* 메인비디오 */
.main-slider { position: relative; width: 100%; min-height: 8vw; opacity: 0; visibility: hidden; margin-top: 85px;}
.main-slider.slick-initialized { opacity: 1; visibility: visible; }
.main-slider .slick-slide {display: none; float: left; min-height: 1px; }
.main-slider .slick-slide::before { background-color: #000; opacity: .3; z-index: 1; }
.main-slider .slick-slide img {width:100%;}
.main-slider .slick-slide video { display: block; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.main-slider .slick-slide iframe { position: relative; pointer-events: none; }
.main-slider .slick-slide figure { position: relative; height: 100%; }
.main-slider .slick-slide .slide-image { opacity: 0;  height: 100%; background-size: cover; background-position: center; -webkit-transition: all .8s ease; transition: all .8s ease; }
.main-slider .slick-slide .slide-image.show { opacity: 1; }
.main-slider .slick-slide .image-entity { width: 100%; opacity: 0; visibility: hidden; }
.main-slider .slick-slide .loading { position: absolute; top: 44%; left: 0; width: 100%; }
.main-slider .slick-slide .slide-media { -webkit-animation: slideOut 0.4s cubic-bezier(0.4, 0.29, 0.01, 1); animation: slideOut 0.4s cubic-bezier(0.4, 0.29, 0.01, 1); }
.main-slider .slick-slide.slick-active { z-index: 1; }
.main-slider .slick-slide.slick-active .slide-media { -webkit-animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1); animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1); }
.main-slider .slick-arrow { position:absolute; z-index: 9; top:50%; display: block; width:50px; height:70px; transition: all .2s;}
.main-slider .slick-arrow:focus {outline: none;}

.main-slider .slick-prev {left:3%; text-indent: -9999px; background:url("./images/main_left.png")no-repeat;}
.main-slider .slick-next {right:3%; text-indent: -9999px;  background:url("./images/main_right.png")no-repeat;}

.main-slider .slick-prev:hover,
.main-slider .slick-next:hover {opacity: 1;}
.main-slider .slick-dots {position: absolute; bottom:10px; width:100%; text-align: center;}
.main-slider .slick-dots li {position: relative; display: inline-block;  vertical-align: top;}
.main-slider .slick-dots li button {display: inline-block; text-indent: -9999px; width:15px; height:13px; border:2px solid #fff; opacity: .6; background:transparent; margin:0 2px;}
.main-slider .slick-dots li.slick-active button {background:#fff;}
/*.main-slider .slick-dots {position: absolute; bottom:0; left:0; width:90%; background:#f1f1f1; padding: 0 5%;}
.main-slider .slick-dots li {position: relative; display: inline-block; width:33.333%; vertical-align: top;}
.main-slider .slick-dots li.slick-active {}
.main-slider .slick-dots li.slick-active a { font-weight: bold; color:#161a1c; border-bottom: 3px solid #161a1c;}
.main-slider .slick-dots li a {font-size: 1.3em; color:#999; padding:25px 0; display: inline-block; font-family: 'Noto Serif';}
*/
.main-slider-img {display: none;}
.main-slider-img img {width: 150%}



.main-title-text {margin:130px auto 0;}
.main-title-text strong {display: block; font-size: 30px; margin-bottom: 20px; font-family: "Malgun Gothic";}
.main-title-text p {color:#666; font-size:17px; line-height: 1.4;  margin-bottom: 30px; font-family: "Malgun Gothic"; letter-spacing: -1px}
.main-title-text div {display: inline-block; position: relative;}
.main-title-text div span {transition: all 1s;}
.main-title-text div .line1.slideon {position:absolute; top:0; left:0; width:0; background:#999; height:1px;}
.main-title-text div .line2.slideon {position:absolute; top:0; right:0; width:1px; background:#999; height:0;}
.main-title-text div .line3.slideon {position:absolute; bottom:0; right:0; width:0; background:#999; height:1px;}
.main-title-text div .line4.slideon {position:absolute; bottom:0; left:0; width:1px; background:#999; height:0;}
.main-title-text div .line1.slide {position:absolute; top:0; left:0; width:100%; background:#999; height:1px;}
.main-title-text div .line2.slide {position:absolute; top:0; right:0; width:1px; background:#999; height:100%;}
.main-title-text div .line3.slide {position:absolute; bottom:0; right:0; width:100%; background:#999; height:1px;}
.main-title-text div .line4.slide {position:absolute; bottom:0; left:0; width:1px; background:#999; height:100%;}
.main-title-text a {display: block; padding: 8px 20px; transition:all .3s;}
.main-title-text a:hover {background:#999; color:#fff;}



/* 메인 포트폴리오 */
.main-port {position: relative; margin:95px auto 80px;}
.main-port .main-port-title {text-align: left; font-weight: normal; font-size:24px; padding:0 15px; margin-bottom: 30px; }
.main-port .main-port-title a:after {content:"\f105"; font-family:FontAwesome; margin-left:10px;}
.main-port .main-port-item { font-size: 0; text-align: left;}
.main-port .main-port-item > li {display:inline-block; width:33.333%; padding:18px 15px; box-sizing: border-box; text-align: center;}
.main-port .main-port-item > li a {display: block; font-size: 15px; text-align: left; color:#fff; border:1px solid #cecece;}
.portfolio .main-port-item li:nth-child(1) {transform: translateY(-5%)}
.portfolio .main-port-item li:nth-child(1).slide {transform: translateY(0)}
.portfolio .main-port-item li:nth-child(1) .info-wrap {background:#362612}
.portfolio .main-port-item li:nth-child(2) {transform: translateY(-10%)}
.portfolio .main-port-item li:nth-child(2).slide {transform: translateY(0)}
.portfolio .main-port-item li:nth-child(2) .info-wrap {background:#75506b}
.portfolio .main-port-item li:nth-child(3) {transform: translateY(-15%)}
.portfolio .main-port-item li:nth-child(3).slide {transform: translateY(0)}
.portfolio .main-port-item li:nth-child(3) .info-wrap {background:#965619}
.main-port .main-port-item li .thumb { overflow: hidden;}
.main-port .main-port-item li .thumb img {width:100%; transition: all .5s; min-width: 90px;}
.main-port .main-port-item li .thumb img:hover {transform:scale(1.05);}
.portfolio .main-port-item li .info-wrap {padding:15px 25px}
.portfolio .main-port-item li .info-wrap p {font-size: 18px; letter-spacing: -1px;}
.portfolio .main-port-item li .info-wrap span {display: block; font-size: 13px; letter-spacing: -1px; margin:10px 0 20px;}


/* 메인 상품 */
.main-product {margin-top: 85px;}
.main-product h1 {text-align: center; font-weight: normal; font-size:24px; padding:0 15px; margin-bottom: 50px; position: relative;}
.main-product h1:before {content: ''; width:100%; height:1px; background:#e1e1e1; position: absolute; top:50%; left:0;}
.main-product h1 span {background:#fff; display: inline-block; position: relative; padding: 0 3%;}
.main-product h1 + p {font-size: 14px; color:#777; margin-bottom: 20px;}
.main-product ul li {float:left; position: relative;}
.main-product ul li .thumb {margin-bottom: 15px; position: relative;}
.main-product ul li .thumb a {display: block; position: relative;}
.main-product ul li .thumb a:before {content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,0.03);z-index:3;}
.main-product ul li .thumb img {width:100%;}
.main-product ul li .main-p-info {text-align: left;}
.main-product ul li .main-p-info .name a {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; letter-spacing: -0.5px;}
.main-product ul li .main-p-info .price {font-weight: bold; font-family: "Roboto",sans-serif; font-size: 20px; letter-spacing: -0.5px; margin-top: 7px;}
.main-product ul li .main-p-info .price span {display: inline-block; font-weight: normal; font-size: 14px;}
.main-product .info-wrap {text-align: left;padding-left: 5%; letter-spacing: -1px; margin:20px 0 25px;}
.main-product .info-wrap p {font-size: 18px; margin-bottom: 5px;}
.main-product .info-wrap span {color:#757575; font-size: 13px;}
.main-product ul li .main-p-info .sale {display: inline-block; color:#777; font-size: 14px;}

.main-product00 p.red {font-size: 13px; color:#e10009; font-weight: bold; margin-bottom: 5px;}
.main-product00 .info-wrap span {font-size: 16px; color: #222;}

.main-product02 {position: relative;}
.main-product02 ul li .main-p-info .price {font-size: 18px; display: inline-block;}
.main-product02 .slick-arrow {position: absolute;top:40%;display:block; width: 45px; height: 45px; text-indent: -99999px; z-index: 999;}
.main-product02 .slick-arrow:focus {outline: none;}
.main-product02 .slick-prev {background:url("/css/images/visual-left.png")no-repeat; background-size: 100%; left:-60px; }
.main-product02 .slick-next {background:url("/css/images/visual-right.png")no-repeat; background-size: 100%; right:-60px;}

.main-product ul.grid2 li {width:580px; margin:15px 35px 0px 0;}
.main-product ul.grid2 li:nth-child(2n) {margin-right: 0;}
.main-product ul.grid3 li {width:375px; margin:15px 35px 0px 0;}
.main-product ul.grid3 li:nth-child(3n) {margin-right: 0;}
.main-product ul.grid4 li {width:275px; margin:15px 33px 40px 0;}
.main-product ul.grid4 li:nth-child(4n) {margin-right: 0;}
.main-product ul.grid6 li {width:180px; margin:15px 24px 40px 0;}
.main-product ul.grid6 li:last-child {margin-right: 0;}



.more-btn {clear: both; padding-top: 30px;}
.more-btn a {display: block;border:1px solid #222;width: 40%; margin: 0 auto 9%;padding: 15px 0; letter-spacing: -1px;}
.more-btn a img {margin-left: 5px; width:12px; margin-top: 5px;}


.main-video-wrap {margin-top: 80px;}
.main-video-wrap h1 {text-align: center; font-weight: normal; font-size:24px; padding:0 15px; margin-bottom: 50px; position: relative;}
.main-video-wrap h1:before {content: ''; width:100%; height:1px; background:#e1e1e1; position: absolute; top:50%; left:0;}
.main-video-wrap h1 span {background:#fff; display: inline-block; position: relative; padding: 0 3%;}
.main-video-wrap ul {padding: 0 15px;}
.main-video-wrap ul li {position:relative;background:#fff;float:left;width:282px;height:255px;margin-top:10px;margin-right:10px;text-align:center;font-size:15px;border: 1px solid #ececec;box-sizing: border-box;} 
.main-video-wrap ul li:last-child {margin-right:0;}
.main-video-wrap ul li .video-thumb {width:100%;}
.main-video-wrap ul li .thumb {cursor:pointer; margin-bottom: 20px;}
.main-video-wrap ul:after {content:''; display:block; clear:both;}
#play-btn {position:absolute;top: 10%;left:0;right:0;margin:0 auto;width: 25%;}
.plan-detail-img img {width:100%; max-width: 750px;}


#tabs{ overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; }
#tabs li{ display:inline-block; width:30%; height:40px; text-align:center; font-size:25px; line-height:40px; border-right:1px solid #e3e3e3;  }
#tabs li:last-child { border-right:none;}
#tabs a { position: relative;  display:block; text-decoration: none; color: #999; font-family: 'Open Sans',sans-serif;}
#tabs .current a { background: #fff; z-index: 3; color:#382a27; height:40px;  font-family: 'Open Sans',sans-serif; font-weight:700; }
#content { background: #fff; position: relative; z-index: 2; }

#daumRoughmapContainer1589537659117 {width:100%; margin-top: 50px;}
#daumRoughmapContainer1589537659117 .wrap_map { height:670px!important;}
.map-info {font-size: 0; text-align: left; margin-top: 30px;}
.map-info > div {display: inline-block; color:#666; font-size: 20px;}
.map-info > div .thumb {display: inline-block; vertical-align: middle; margin-right: 2%;}
.map-info > div .thumb + div {display: inline-block; vertical-align: middle; text-align: left;}
.map-info > div .thumb + div p {margin:10px 0;}
.map-info > div .thumb + div strong {display: inline-block; margin-right: 5px;}
.map-info .map-info01 {width:70%; padding-left: 4%;}
.map-info .map-info02 {width:20%;}


/* FAQ */
.sub-faq {margin-top: 50px;}
.sub-faq h2 {font-size: 40px; font-weight: normal; color:#555;}
.sub-faq ul li {border-bottom: 1px solid #e1e1e1; margin:0; text-align: left;}
.sub-faq ul li .q-line {position: relative; padding:15px 0; background:url("./images/board-icon.svg")no-repeat 98% center; background-size: 25px 25px; font-size: 17px; padding-right: 10%; word-break: keep-all;}
.sub-faq ul li .q-line span.q-num {display: inline-block; font-weight: bold; margin-right:10px;}
.sub-faq ul li .a-line {display: none; background:#f8f8f8; font-size: 16px; line-height: 1.5; padding:3%; border-top:1px solid #e1e1e1; word-break: keep-all;}


/* 하단 */
#footer {position: relative; margin-top:100px; text-align: left; font-family: 'Noto Sans KR', sans-serif; margin-bottom: 20px;}
#footer .footer-menu {border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; padding: 14px 0;}
#footer .footer-menu .inner > a {font-size: 13px; color:#666; position: relative; padding: 0 17px 0 10px;}
#footer .footer-menu .inner > a:after {content: ''; display: block; width:1px; height: 10px; background:#e1e1e1; position: absolute; top:5px; right: 0;}
#footer .footer-menu .inner > a:nth-child(4):after {display: none;}
#footer .footer-menu .inner > a strong {color:#e10009; font-weight: normal;}
#footer .footer-menu .family_site {float: right; position:relative; display:block; color:#777; font-family:"Nanum Gothic";}
#footer .footer-menu .family_site .family {position:absolute;right:350px;top:10px; background:#f8f8f8; float:left; width:190px; height:20px; }
#footer .footer-menu .family_site button {display:block;text-align:left;padding-left:9px;
 width:200px;background:#f8f8f8 url("./images/select-btn.jpg") 100% 0 no-repeat;color:#555;border:1px solid #ddd;box-sizing:border-box; font-family:"Nanum Gothic";}
#footer .footer-menu .family_site button:focus {outline: none;}
#footer .footer-menu .family_site .family_select {display:none;position:absolute;bottom:20px;left:0;width:100%;border:1px solid #ddd;box-sizing:border-box;border-bottom:0; background:#fff; font-family:"Nanum Gothic";}
#footer .footer-menu .family_site .family_select ul li a {font-size: 13px;padding-left: 8px;display: block;margin: 5px 0;}
#footer .mall-name {font-weight: bold; color:#222; font-size: 12px;}
#footer .footer-menu + .inner > div {margin-top: 20px;}
#footer .footer-menu + .inner:after {content: ''; display: block; clear: both;}
#footer .tel span {font-size: 18px;}
#footer .tel p {display: inline-block; background:url("./images/footer.png")no-repeat 0px 4px; padding-left: 26px; margin: 5px 10px 5px 0;}
#footer .footer-link {display: inline-block; vertical-align: middle; padding: 2px 8px 2px 6px; border:1px solid #ececec; font-size: 11px; font-family: "Nanum Gothic"; letter-spacing: -1px;}
#footer .footer-link:after {display:inline-block;margin:4px 0 0 6px;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid #ff5b59;vertical-align:top;content:''}
#footer .address {color: #999; font-family: "Nanum Gothic"; font-size: 12px; letter-spacing: -0.5px; margin: 5px 0;}
#footer .address span {display: inline-block; margin:3px 0;}
#footer .footer-sns {text-align: right; margin-bottom: 20px;}
#footer .footer-sns a {display: inline-block; width:45px; height: 45px; font-size:0; margin-left: 5px; vertical-align: middle;}
#footer .footer-sns a.facebook {background: url("./images/footer-sns.png")no-repeat;}
#footer .footer-sns a.insta {background: url("./images/footer-sns.png")no-repeat 0px -50px}
#footer .footer-sns strong{display:inline-block;margin:15px 9px 0 25px;font-weight:normal;vertical-align:top;font-size: 12px; color:#999;}
#footer .footer-app span {display: inline-block; width:70px; height:70px; background: url("./images/footer.png")no-repeat -200px -150px; text-indent: -9999px;}





/* PC Full */
@media screen and (min-width: 1381px){
	.root_daum_roughmap { width:80%;}
	.inner_company {position:relative; width:900px; margin:0 auto;padding-top: 50px;}
	.custom_map_resize {width:600px;}
}
/* PC size */
@media screen and (max-width: 1320px){
	
	#topmenu.fixmenu .top-nav > ul,
	#topmenu.sub-topmenu .top-nav > ul {width:auto; padding-right:3%;}
/* 	#topmenu .top-nav > ul {text-align: right; padding-right: 3%;} */
/* 	.top-board {display: none;} */
	#topmenu .inner {width:90%;}
	.main-right .main-right-wrap {width:100%;}
	.main-right ul {right:10%;}
	#topmenu.fixmenu h1 {left:0;}
	.info02-grid5 .inner:before {width:100%; left:0; padding-bottom: 20%;}
	.info02-grid5 li {width:18%;}
	
	.inner_company {position:relative; width:900px; margin:0 auto;padding-top: 50px;}
}


@media screen and (max-width: 1220px){
	
	
	#wrap {width: 88%;}
	.inner {width:100%; padding:0 5%; box-sizing: border-box;}
	.main-product ul.grid4 li {width: 22.75%;margin: 15px 3% 40px 0;}
	.main-product ul.grid6 li {width: 15%;margin: 15px 2% 40px 0;}
	.main-product ul.grid3 li {width: 32%;margin: 15px 2% 0px 0;}
	.main-product ul.grid2 li {width: 49%;margin: 15px 2% 0px 0;}
	.main-product04 ul.fl {width:70%;}
	.main-product04 ul.fr {width:28%;}
	.main-product04 ul.fl li {width: 45%;margin-right: 6%;}	
	.main-product05 ul.gridBig li.big {width:48%;}
	.main-product05 ul.gridBig li:nth-child(2), .main-product05 ul.gridBig li:nth-child(3) {margin-bottom: 123px;}
	.main-product05 ul.gridBig li:nth-child(4) {margin-right: 2%;}
	.main-product05 ul.grid4 li {margin:15px 2% 40px 0;}
	.main-video ul {padding: 0;}
	.main-video ul li {width: 24.2%;height:225px;margin-right: 1%;}

	.map-info .map-info01 {padding-left: 0;}
	.map-info > div {font-size: 18px;}
	.map-info .map-info02 {width:25%;}
	.map-info .map-info01 {width:71%;}
}

/* Notebook size */
@media screen and (max-width: 1024px){
	
	.inner {width:100%; padding:0 5%; box-sizing: border-box;}
	.inner_company {position:relative; width:900px; margin:0 auto;padding-top: 50px;}
	.custom_map_resize {width:100%;}

	
	#topmenu.sub-topmenu h1 {top:15px;}
	#topmenu.sub-topmenu h1 img {width:140px;}
	#topmenu.fixmenu h1 {top: 15px;}
	#topmenu.fixmenu h1 img {width:140px;}
	#topmenu.fixmenu .top-nav {padding-top: 20px;}
	#topmenu.fixmenu .top-nav > ul > li > a {font-size: 15px; padding: 0 7px 17px;}
	#topmenu .top-nav > ul > li > a {font-size: 15px;}
	#topmenu.sub-topmenu .top-nav > ul > li > a {font-size:15px; padding:0 7px 17px}

	.main-product ul li .main-p-info .price {font-size: 17px;}
	.main-product02 ul li .main-p-info .price {font-size: 15px;}
	.main-product ul li .main-p-info .sale {font-size: 13px;}

	#footer .footer-menu + .inner > div.fl {width:65%;}
	#footer .footer-menu .family_site {margin-top: 2px;}
	#footer .footer-menu .family_site button {width:130px;}

/* 	.map-info > div {width:100%!important;} */
	.map-info .map-info01 {margin-bottom: 25px;}

}

/* Tablet size */
@media screen and (max-width: 768px){
	#mTopmenu {display:block;}
	#topmenu {display: none;}
	
	#container {margin-top: 80px; width:100%}
	.inner_company {position:relative; width:95%; margin:0 auto;}
	
	.main-slider {margin-top: 50px;}

	.main-product h1, .main-video h1 {font-size: 20px;}

	.main-product ul.grid3 li {width:49%;}
	.main-product ul.grid3 li:nth-child(2n) { margin-right: 0; }
	.main-product ul.grid3 li:nth-child(3) {margin-right: 2%}

	.main-product ul.grid4 li {width:48%;}
	.main-product ul.grid4 li:nth-child(2n) {margin-right: 0;}

	.main-product ul.grid6 li {width:32%;}
	.main-product ul.grid6 li:nth-child(3n) {margin-right: 0;}

	.main-product02 .slick-arrow {top:auto; bottom:0; width:35px; height: 35px;}
	.main-product02 .slick-prev {left: 40%;}
	.main-product02 .slick-next {right: 35%;}

	.main-product04 ul.fl, .main-product04 ul.fr {float: none; width:100%;}
	.main-product04 ul.fl li {width:47%;}
	.main-product04 ul.fr li {float: left; width:32%; margin-right: 2%;}
	.main-product04 ul.fr li:last-child {margin-right: 0;}

	.main-product05 ul.gridBig li.big {width:100%;}
	.main-product05 ul.gridBig li {margin:15px 2% 40px 0;}
	.main-product05 ul.gridBig li:nth-child(2), .main-product05 ul.gridBig li:nth-child(3) {margin-bottom: 40px;}
	.main-product05 ul.gridBig li:nth-child(2n) {margin-right: 4%;}
	.main-product05 ul.gridBig li:nth-child(5), .main-product05 ul.gridBig li:nth-child(7) {margin-right: 0;}

	.main-product ul li .main-p-info .price {font-size: 15px;}
	.main-product ul li .main-p-info .price span {font-size: 12px;}

	.main-product .info-wrap p {font-size: 16px;}
	.main-product .info-wrap span {font-size: 12px;}

	.more-btn a {font-size: 13px; padding: 13px 0;}

	.more-btn a {background-position: 72% center;}

	.main-video ul li {width:49%; margin-right: 2%; height:auto; margin-bottom: 2%;}
	.main-video ul li:nth-child(2n) {margin-right: 0;}
	.main-video ul li .detail {min-height: 85px; font-size: 14px;}


	.customer{padding-top : 50px;}

	.map-info > div {font-size: 15px;}

	#tabs li {font-size: 20px;}
	.sub-faq ul li .q-line {font-size: 15px;}
	.sub-faq ul li .a-line {font-size: 14px;}

	#footer .footer-menu .inner > a {font-size: 12px;}
	#footer .footer-menu .family_site {display: none;}
	#footer .footer-menu + .inner > div.fl {width:100%;}
	#footer .footer-menu + .inner > div {float: none;}
	#footer .footer-sns {text-align: left;}
	#footer .footer-menu {text-align: center;}
	#footer .footer-menu a {display: inline-block;}
	#footer .footer-sns strong {margin: 15px 9px 0 0px;}

}


/* Mobile1*/
@media screen and (max-width: 640px){
	#wrap {width: 100%;}
	.main-product ul li .main-p-info .name a {font-size: 12px;}

	.main-product .info-wrap p {font-size: 14px;}
	.main-product .info-wrap {margin: 20px 0 25px}
	.main-product03 .thumb span {width:30px; height: 30px;}

	.main-product00 ul.grid3 li {width:100%;}

	.map-info > div .thumb + div {width:85%;}
	.map-info > div.map-info01 .thumb + div strong {display: block;}
	.map-info .map-info01 .thumb {vertical-align: top;}

	#daumRoughmapContainer1589537659117 .wrap_map {height:400px!important;}

	.sub-faq ul li .q-line {font-size: 14px;}
	.sub-faq ul li .a-line {font-size: 13px;}

	.main-video-wrap ul li {position:relative;background:#fff;float:left;width:auto;height:255px;margin-right:13px;text-align:center;font-size:15px;border: 1px solid #ececec;box-sizing: border-box;} 
}


/* Mobile2 */
@media screen and (max-width: 480px){
	#wrap {width: 100%;}
	.main-product h1, .main-video h1 {font-size: 18px;}

	.map-info > div .thumb + div {width:80%;}

	.map-info > div.map-info01 .thumb + div { margin-top: -10px; }
	.map-info > div.map-info01 .thumb + div p {white-space:pre-line;}

	#daumRoughmapContainer1589537659117 .wrap_map {height:315px!important;}

	#tabs li {font-size: 18px;}
	.sub-faq ul li .q-line {font-size: 13px;}
	.sub-faq ul li .a-line {font-size: 12px;}
	
	.main-video-wrap ul li {position:relative;background:#fff;float:left;width:auto;height:255px;margin-right:13px;text-align:center;font-size:15px;border: 1px solid #ececec;box-sizing: border-box;} 
}


@media screen and (max-width: 380px){
	#wrap {width: 100%;}
	.main-product ul.grid4 li {width:100%;}
	.main-product ul.grid6 li {width:49%; }
	.main-product ul.grid6 li:nth-child(2n) {margin-right: 0;}
	.main-product ul.grid6 li:nth-child(3) {margin-right: 2%;}
	.main-product ul.grid3 li {width: 100%;}
	.main-product04 ul.fr li {width:100%;}
	.main-video ul li {width:100%; margin-right: 0; margin-bottom: 5%;}
	.main-video ul li .detail {height: 80px;}

	.map-info > div .thumb + div {width:78%;}

	.main-video-wrap ul li {position:relative;background:#fff;float:left;width:auto;height:255px;margin-right:13px;text-align:center;font-size:15px;border: 1px solid #ececec;box-sizing: border-box;} 
}