@charset "utf-8";


body {min-width: 320px; margin: 0; padding: 0; min-width: 320px; font-size: 15px; font-family: "Noto Sans KR",Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", 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; margin-bottom: 45px;}
.sub-text {font-size:20px; word-break: keep-all; color:#666; letter-spacing: -1px;}
.op-animate {opacity: 0;}
.fl {float:left;}
.fr {float:right;}
#container:after {content: ''; display: block; clear: both;}

/* 상단 */
#topmenu {position:fixed; top:0; left:0; width:100%;height:140px;text-align:center;z-index:100; transition:all .3s; background:transparent;}
#topmenu:hover {background:rgba(22,26,28,0.8); transition: all .4s;}
#topmenu.on {height:195px;}
#topmenu .inner {width:1200px;}
#topmenu h1 {position:absolute; top:20px; width:100%; text-align:center; z-index:99;}
#topmenu h1 img {width:200px;}
#topmenu .top-board {position:absolute; top:50px; 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 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.youtube {margin-top: -2px;}
#topmenu .top-board ul li.youtube img {width: 32px;}

#topmenu .top-nav {position:relative; font-size:0; padding-top:95px; 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 20px 18px; overflow:hidden; transition: all .2s; font-size: 18px; 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:55px 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:70px; 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: 15px; 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:70%; top:56px; 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:73%; color:#444; font-size:12px; width:300px; display: block; text-align: center; font-weight: 400;}
#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; text-align: center;}
#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 h1 {left:0; top:10px; width:auto; padding:0; text-align:left;}
#topmenu.fixmenu h1 img {width:175px;}
#topmenu.fixmenu .top-board {top:20px;}
#topmenu.fixmenu .top-board a img {width:20px;}
#topmenu.fixmenu .top-board ul li.youtube img {width: 25px;}
#topmenu.fixmenu .top-nav {padding-top:16px; border-bottom:0; }
#topmenu.fixmenu .top-nav > ul {text-align:right; width:970px; margin:0 auto;}
#topmenu.fixmenu .top-nav > ul > li > a {font-size:18px; padding:0 15px 17px;}
#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:60px; border-bottom:0; z-index: 90; padding:0 5%; box-sizing: border-box;}
#mTopmenu h1 {left:0; top:20px; width:auto; padding:0; text-align:center; margin:3px 0;}
#mTopmenu h1 img {width:170px; vertical-align: middle;}
#mTopmenu .menu {font-size:1em; margin-top:10px;position: absolute;top: 8px;}
#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;}
.m-sub-topmenu { background:#161a1c;}
.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-wrap-top {height:55px; border-bottom:1px solid #dbdbdb; box-sizing: border-box; margin-top: 15px;}
.left-warp .depth {padding:25% 0 20%;}
.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: 500px;  padding:10px 0; border-top:1px solid #161a1c;}
.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 span.more {position: absolute; right:5px; transform: rotate(90deg); display: block; padding: 10px; top:6px; z-index: 99;}
.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 .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;}
.left-warp .m-insta img {width: 26px; margin: 0 5px;}
.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;}
#topmenu.sub-topmenu .top-board a img {width:20px;}
#topmenu.sub-topmenu .top-nav {padding-top:16px; border-bottom:0;}
#topmenu.sub-topmenu .top-nav > ul {text-align:right; width:1030px; margin:0 auto;}
#topmenu.sub-topmenu .top-nav > ul > li > a {font-size:18px; padding:0 15px 18px;}
#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;}
.sub-title01 .visual {background:url("../images/sub-title01.jpg")no-repeat center top; background-size: cover;}
.sub-title02 .visual {background:url("../images/sub-title01.jpg")no-repeat center top; background-size: cover;}
.sub-title03 .visual {background:url("../images/sub-title01.jpg")no-repeat center top; background-size: cover;}
.sub-title04 .visual {background:url("../images/sub-title02.jpg")no-repeat center top; background-size: cover;}
.sub-title05 .visual {background:url("../images/sub-title02.jpg")no-repeat center top; background-size: cover;}
.sub-title06 .visual {background:url("../images/sub-title02.jpg")no-repeat center top; background-size: cover;}
.sub-title07 .visual {background:url("../images/sub-title03.jpg")no-repeat center top; background-size: cover;}
.sub-title08 .visual {background:url("../images/sub-title02.jpg")no-repeat center top; background-size: cover;}
.sub-title09 .visual {background:url("../images/sub-title04.jpg")no-repeat center top; background-size: cover;}
.sub-title10 .visual {background:url("../images/sub-title04.jpg")no-repeat center top; background-size: cover;}
.sub-title11 .visual {background:url("../images/sub-title01.png")no-repeat center top; background-size: cover;}
.sub-title12 .visual {background:url("../images/sub-title01.png")no-repeat center top; background-size: cover;}

.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;}
.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; line-height: 67px;}

@-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;}
.main-slider.slick-initialized { opacity: 1; visibility: visible; }
.main-slider .slick-slide {display: none; float: left; min-height: 1px; overflow: hidden;}
.main-slider .slick-slide::before { background-color: #000; opacity: .3; z-index: 1; }
.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: 100%}



.main-title-text {margin:130px auto 0;}
.main-title-text strong {display: block; font-size: 30px; margin-bottom: 20px; }
.main-title-text p {color:#666; font-size:17px; line-height: 1.4;  margin-bottom: 30px; 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:170px auto 80px;}
.main-port .main-port-title {font-size:30px; text-align:center; font-family: "Open Sans",sans-serif; font-weight: normal; font-weight: 600; 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:25%; padding:18px 15px; box-sizing: border-box; text-align: center;}
.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(2) {transform: translateY(-10%)}
.portfolio .main-port-item li:nth-child(2).slide {transform: translateY(0)}
.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(4) {transform: translateY(-20%)}
.portfolio .main-port-item li:nth-child(4).slide {transform: translateY(0)}
.main-port .main-port-item li .thumb {margin-bottom: 20px; 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);}
.main-port .main-port-item li .brand {border-bottom: 2px solid #e2e2e2; padding-bottom: 20px;}
.main-port .main-port-item li .brand img {height:20px;display: block;margin: 8px auto 0;}
.main-port .main-port-item li .brand strong {font-size:18px; font-family: 'Nanum Gothic', sans-serif; font-weight: 800; color: #000; display: block; margin-top: 10px;}
.main-port .main-port-item li .brand span {display:block; font-size: 13px; margin-top: 10px; word-break: keep-all;}
.main-port .main-port-item li .brand img + span {font-size: 16px;}
.main-port .main-port-item li .info {font-size:13px; margin-top:15px;}
.main-port .main-port-item li .info p {line-height: 1.5;}
.main-port .main-port-item li .info span.red {color:rgb(139, 0, 0); font-weight: bold; font-family: "Roboto"; font-size: 13px; padding-right:5px;}
.main-port .main-port-item li .info span {font-size: 12px;}



/* 모달팝업 */
.pc-slider {position: relative;}
.modal { display:none; position: fixed; z-index: 990; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); padding-right: 22px; overflow-x: hidden;}
.modal-content { position: relative; padding: 2.5% 0 0 0; width: 80%; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 991; }
#close-btn {position: absolute; top:0; right:0; color:#fff;}
.m-tab {display:none; position: relative;}

.tabList {position: absolute; bottom:-21%;}
 .hidden_obj { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0 }
}
.tab_wrap { position: relative;width: 100%; }
.tabList { width:100%;}
.tabList:after {display:block;content:'';clear:both }
.tabList li { float: left; width:14.28%;text-align:center;}
.tabList li.on { }
.tabList li.on a {color:#68a945; font-weight: bold;}
.tabList li a { display: block; color:#fff;text-decoration: none; font-size: 12px; word-break: keep-all;}
.tabGroup li { position:absolute; width: 100%; display: none;}
.tabGroup li:first-child { display: block;}
.tabGroup li div {}
.tabGroup li img {width: 100%;}
.tab-content {position: relative; height:0; padding-bottom: 49%;}



/* 메인 glance */
.main-glance {background:url("../images/glance-bg.jpg")no-repeat; background-size: cover; padding:5% 0 7%; font-size: 0;}
.glance-wrap h2 {text-align: center; font-size: 30px; color:#fff; margin-bottom: 60px;}
.glance-wrap ul:after {content: ''; display: block; clear: both;}
.glance-wrap ul li {position: relative; display: inline-block; width:20%;}
.glance-wrap ul li a {display: block; font-size: 18px; color:#fff;}
.glance-wrap ul li img {display: block; margin:0 auto 30px;}
.glance-wrap ul li img:last-child {display:none;}
.glance-wrap ul li a:hover {color:#306ad2;}
.glance-wrap ul li a:hover img:first-child {display:none;}
.glance-wrap ul li a:hover img:last-child {display:block;}

.m-glance {display: none;}
.m-glance-wrap {display: table; width:100%;}
.m-glance ul {display: table-row;}
.m-glance ul li {display: table-cell; width:33.333%; font-size:17px; color:#fff; vertical-align: middle; box-shadow: 1px 1px #fff; padding: 15px 0;}
.m-glance ul:first-child li:first-child {font-weight: bold; font-size: 20px; line-height: 1.5; }
.m-glance ul li a {color:#fff;}
.m-glance ul li a img {width:40%; display: block; margin:0 auto 15px;}


/* main carousel */
.main-bottom-slider {position: relative;}
.main-bottom-wrap {margin-top:130px;}
.main-bottom-wrap h1 {font-size:30px; text-align:center; font-family: "Open Sans",sans-serif; font-weight: normal; font-weight: 600; padding:0 15px; margin-bottom: 30px} 
.main-bottom-wrap .thumb img {width:100%;}
.main-bottom-wrap .thumb-m {display:none;}

.main-bottom-wrap .slick-arrow {position: absolute; width:45px; height:15px; bottom:-38px; text-indent: -9999px;}
.main-bottom-wrap .slick-arrow:focus {outline: none;}
.main-bottom-wrap .slick-prev {background:url("../images/main-b-left.png")no-repeat; right:60px;}
.main-bottom-wrap .slick-next {background:url("../images/main-b-right.png")no-repeat; right:0;}
.slider-info {width:100%; margin-top: 20px;}
.slider-num {float:left; font-size: 17px;}
.slider-progress {float:left; margin-left:15px; margin-top:7px; position: relative; width: 80%; height: 1px; background-color: #e5e5e5;}
.slider-progress .progress { 
    position: absolute;
    background-color: #000;
    top: 0px;
    left: 0px;
    height: 1px;
    width: 0px;
    z-index: 0;
    opacity: 1;
}
.slide-info { position: absolute; top: 0; bottom:0; width: 50%; height: 100%; left: 50%; color: #fff; display: table;}
.slide-info div {display: table-cell; vertical-align: middle; font-size: 18px; line-height: 1.5;}
.slide-info div h2 {font-size: 30px; text-transform: uppercase; margin-bottom: 40px;}







/* 견적상담 */
#contact {position: relative; padding-top: 65px;}
#contact .contact-title {position: relative;}
#contact .contact-title h2 {position: absolute; top:-40px; font-size: 25px;}
#contact .star-info {position: absolute; top:-30px; right:0; font-size: 17px; color:#000; letter-spacing: -1px;}
#contact .star-info i {color:#e10009;}
.contact-wrap {margin-top:30px; margin-bottom: 13%;}
.contact-wrap:nth-child(4) {margin-bottom: 6%;}
.text-left {text-align:left;}
.table {width:100%;}
.board {border-top:2px solid #64877a;}
.board-table th {background:#ecf4fb; word-break: keep-all;}
.board-table th.text-left {color:#444; text-align: center;}
.board-table tr:nth-child(1) td {line-height:45px; font-weight: bold;}
.board-table td {padding: 20px 40px; text-align: left;}
.board-table th, .board-table td {border-bottom:1px solid #dbdbdb; font-size:17px; letter-spacing: -0.5px;}
.board-table .ico-star {color:#ff0000;}
.board-table .radio-group {line-height: 45px;}
.board-table .radio-group .radio-btn {float:left; margin-right: 35px;}
.board-table .radio-group .radio-btn input {vertical-align: -1px;}
.board-table .input-group label {float:left; width:50%; text-align: left; margin-bottom: 10px;}
.board-table .input-group:last-child label {margin-bottom: 0;}
.board-table .input-group span {font-size: 15px; display:block; min-width: 85px; margin-bottom: 5px;}
.board-table .input-group input {border: 1px solid #dbdbdb; height:40px; line-height: 40px; width:73%; margin-bottom: 5px;}
.board-table .input-info {display: inline-block; vertical-align: top;}
.board-table .input-info span {min-width:auto; margin-right:8px; display: inline-block;}
.board-table .info-name {width:18%;}
.board-table .info-name input {width:64%;}
.board-table .info-tel {width:30%;}
.board-table .info-tel input {width:52%;}
.board-table .info-mail {width:50%; font-size: 0;}
.board-table .info-mail input {width:30%; font-size: 15px;}
.board-table .info-mail span {display: inline-block; font-size: 15px; vertical-align: -1px; margin:0 5px;}
.board-table .info-mail span.label-title {margin: 0 8px 0 0;}
.board-table .info-mail select {display: inline-block; font-size: 15px; width:22%; margin-left: 1%;
	height:42px;
	border:1px solid #dbdbdb;
    font-family: inherit;  /* 폰트 상속 */
    background: url('../images/select-icon.png') no-repeat 95% 50%; /* 네이티브 화살표를 커스텀 화살표로 대체 */
    border-radius: 5px; /* iOS 둥근모서리 제거 */
    -webkit-appearance: none; /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    padding-left: 1%;
    vertical-align: top;
}
.board-table .info-mail select::-ms-expand {
    display: none;
}
.board-table .textarea-control {width:100%; border:1px solid #dbdbdb; box-sizing: border-box; resize:none; height: 180px; padding: 20px; font-family: inherit; font-size: 17px; border-radius: 3px;}
.board-table .input-control {width:60%; height:40px; line-height: 40px; border:1px solid #dbdbdb; box-sizing: border-box; padding: 0 10px; font-family: inherit; font-size: 17px; border-radius: 3px;}
.board-table .addr01 {width:43%; margin-right: 1%;}
.board-table .addr02 {width:100%; margin-top: 15px;}
.board-table .addr-search {display:inline-block; background:#d7d7d7; color:#666; border:1px solid #d7d7d7; border-radius: 3px; padding:9px 15px; vertical-align: top;}
.board-table .addr-search i {margin-left:5px;}
.board-table .file-info {color:#888; font-size: 14px; line-height: 1.7; margin-top: 15px; font-family: "Nanum Gothic";}
.file-wrap .fileName {display:inline-block; width:35%; height:30px; padding-left:10px; margin-right:5px; line-height:30px; border:1px solid #dbdbdb; background-color:#fff; vertical-align:middle}
.file-wrap .btn_file {display:inline-block; border:1px solid #999; background:#999; color:#fff; width:100px; height:30px; line-height:30px; text-align:center; vertical-align:middle; font-size:13px;}
/*.file-wrap input[type="file"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.file-plus {position: relative; display: inline-block; vertical-align: middle; width:40px; height:30px; border:1px solid #c1c1c1; margin-left:5px; background:#fff; font-size: 12px; cursor: pointer;}
.file-plus:before {content:''; display:block; width:15px; height:1px; border-top:1px solid #999; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.file-plus:after {content:''; display:block; width:1px; height:15px; border-left:1px solid #999; position: absolute; top:50%; left:51%; transform: translate(-50%, -50%);}
.file-list .plus {margin-bottom: 5px;}*/
.file-wrap input[type="button"] {display: inline-block; vertical-align: middle; width:40px; height:30px; border:1px solid #a1a1a1; background:#a1a1a1; margin-left:5px; color:#000; font-size: 12px; cursor: pointer;}
.file-wrap input[type="file"]  {width:35%;}
.file-minor {position: relative; display: inline-block; vertical-align: middle; width:40px; height:30px; border:1px solid #c1c1c1; text-indent: -9999px; margin-left:5px;}
.file-minor:before {content:''; display:block; width:15px; height:1px; border-top:1px solid #999; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.file-minor:after {display:none;}
.file-list {margin-bottom: 5px; font-size: 0;}
#attachFileDiv {max-height:160px; overflow:hidden;}
.privacy {margin-top:70px; font-size: 17px;}
.privacy-wrap {width:100%; height:190px; border:1px solid #dbdbdb; overflow-y: auto; margin-top: 15px; padding:30px; letter-spacing: -0.5px; box-sizing: border-box;font-size: 17px; border-radius: 3px;}
.privacy-check {border:1px solid #dbdbdb; border-radius: 3px; height:50px; line-height: 50px; padding: 0 20px; margin-top: 15px;}
.privacy-check .radio-group {float:left; margin-left: 20px; font-size: 0.9em;}
.privacy-check .radio-group input {vertical-align: -2px;}
.privacy-check-title {float:left; letter-spacing: -1px;}
.privacy-check .radio-list {float:right;}
.privacy-comment {color:#898989; letter-spacing: -1px; margin-top:20px;}
.contact-submit {margin-top:60px;}
.contact-submit button {background:#0f4c81; color:#fff; display: block; width:150px; height:40px; line-height: 40px; font-size: 1.05em; margin:0 auto;}


/* 서브 포트폴리오 */
#portfolio { width:100%; }
#portfolio #tabs{ overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; }
#portfolio #tabs li{ float: left; width:20.07%; height:40px; text-align:center; font-size:14px; line-height:40px; border:1px solid #dbdbdb; box-sizing: border-box; margin-right: -1px;}
#portfolio #tabs li:first-child { position:relative; }
#portfolio #tabs a { position: relative;  display:block; width:100%; height:38px; text-decoration: none; color: #999; font-family: 'Open Sans',sans-serif;}
#portfolio #tabs a::after{ position:absolute; z-index: 1; top: 0; right: -.5em; background: #f9f9f9; border:1px solid #e3e3e3; }
#portfolio #tabs .current a, #tabs #current a::after{ background: #161a1c; color:#fff; height:40px;  font-family: 'Open Sans',sans-serif; font-weight:700; }
#portfolio #tabs .tabs_bot { display:block; position:absolute; width:231px; border:2px solid #382a27;}
#portfolio #content { background: #fff; position: relative; z-index: 2; }
.main-port.sub-port {margin:50px auto;}
.product-modal {position: fixed; top:0; left:0; bottom:0; right:0; z-index: -1; opacity: 0; transition:all .3s;}
.p-modal-bg {position: fixed; top:0; left:0; bottom:0; right:0; z-index: 99;}
.p-modal-content {background:#fff; border:1px solid #e1e1e1; width:100%; position: fixed; z-index: 990; top:50%; left:50%; transform: translate(-50%,-50%); padding:3% 5%; box-sizing: border-box; max-width: 1070px;}
.p-modal-content .modal-thumb {float:left; width:55%; text-align: center; margin-right: 5%;}
.p-modal-content .slick-slide img {height:300px; margin:0 auto;}
.p-modal-content .slick-prev {left:3%; background:url("../images/pop-prev.png")no-repeat;width:25px;}
.p-modal-content .slick-prev:focus {outline: none;}
.p-modal-content .slick-next {right: 3%; background:url("../images/pop-next.png")no-repeat;width:25px;}
.p-modal-content .slick-next:focus {outline: none;}
.p-modal-content .slick-arrow {position:absolute; top:50%; display: block; text-indent: -9999px; z-index: 90; height:50px;}
.p-modal-content .modal-info {float: right; width:40%; border-left: 2px solid #a1a1a1; box-sizing: border-box; text-align: left;}
.p-modal-content .modal-info > div {margin:15px 0;}
.p-modal-content .modal-info > div.product-name {min-height: 200px}
.p-modal-content .modal-info strong {display: inline-block; font-size: 18px; color: #545454; font-weight: normal; vertical-align: top; min-width:80px; margin:0 25px 0 35px;}
.p-modal-content .modal-info span {display: inline-block; font-size: 18px; color:#000; vertical-align: top; width:58%; word-break: keep-all;}
.p-modal-content .p-modal-close {position: absolute; top:0; right:0; z-index: 999;}

.pagenation {width:100%; text-align: center;}
.pagenation ul li {display: inline-block; border:1px solid #bcbcbc; width:20px; margin:0 2px;}
.pagenation ul li a {display: block; padding: 1px 0 3px; font-size: 14px;}
.pagenation ul li a.on {background:#ccc; font-weight: bold;}



/* 서브인사말 */
.info01 .info01-title p {font-size:18px; color:#666; line-height: 1.3; letter-spacing: -1.6px; text-align: center; word-break: keep-all;}
/*.info01 .info01-title.info-just p {text-align: left;}*/
.info01 .info01-title p strong {display: block; font-size: 20px;}
.info01:after {content: ''; display: block; clear: both;}
.info01 .fl {width:70%; text-align: left; letter-spacing: -2px; margin-right: 2%; float: none; margin:0 auto;}
.info01 .fl.slideon {transform: translate(-50%,0);}
.info01 .fl.slide {transform: translate(0,0);}
.info01 .fr.slideon {transform: translate(50%,0); transition-duration: 1.5s;}
.info01 .fr.slide {transform: translate(0,0);}
.info01 .fl strong {display: block;}
.info01 .fr {width:40%;}
.info01-img .info01-caption {display: none;}
.info01-img .img-wrap {padding-top:35px;}
.info01-caption {max-width: 800px; margin:60px auto 0; color:#666; padding-bottom: 15px; text-align: center;}
.info01-caption p {margin-bottom: 15px; font-size: 20px; text-align: center!important;}
.info01-caption strong {font-size:24px; font-weight: normal; word-break: keep-all;}
.company-ci {background:#fafdfe; margin-top: 100px; padding:70px 0 170px;}
.company-ci .inner div {background:#fff;}
.company-ci .inner div.animated div {display: inline-block; padding: 10% 0; vertical-align: middle;}
.company-ci .inner div p {text-align: left; font-size: 18px;}
.company-ci .inner div p.animated {padding:20px; line-height: 1.7; word-break: keep-all;}
.company-ci img {width:100%;}






/* 서브 기업이념 */
.info02 {background:url("../images/value-bg.jpg")no-repeat center; background-attachment:fixed; padding:10% 0; margin-top: 5%; background-size:cover;}
.info02 .info02-box {color:#fff;}
.info02 .info02-box strong {font-size:48px; font-family: "AritaBuri", serif; font-weight:700;}
.info02 .info02-box p {font-size:20px; margin-top: 20px;}
.info02-1 {margin-top:10%;}
.info02-1 .content-title {margin-bottom: 30px;}
.p-info02 {background:#f1fafd; font-size:0; margin-top: 60px; padding:4% 0;}
.p-info02 strong {font-size: 25px; color:#4d4d4d; display: block; margin-bottom: 55px;}
.p-info02 .inner:before {content:'';display:block;background:#e0f3fa;border-radius: 25px; border-radius: 200px;position: absolute;z-index: -1;width: 1280px; left:-37px; padding-bottom: 21%;}
.p-info02 li {display:inline-block; vertical-align: top; font-size:20px; width:20%; text-transform: uppercase; margin-top: 3.5%;}
.p-info02 li .thumb {background:#fff;border-radius: 50%;width: 70%;height: 0;margin: 0 auto;padding-bottom: 70%;}
.p-info02 li .thumb img {width:100%;}
.p-info02 li strong {color:#030303; display: block; margin:35px 0 15px; font-weight: normal;}
.p-info02 li strong:before {content:''; display: block; background:url("../images/value-icon.png")no-repeat; width:5px; height:40px; margin:0 auto 20px;}
.p-info02 li p {color:#676666; line-height:1.2; font-size: 18px;}
.m-info02 {display: none;}
.m-info02 > strong {background: #f1fafd; font-size: 20px; color:#4d4d4d; display: block; margin-top: 25px; padding:30px 0;}
.m-info02 ul li {width:94.5%; padding:0 3%; background:#e0f3fa; display: table;}
.m-info02 ul li:nth-child(2n) {background:#f1fafd;}
.m-info02 ul li .thumb {display: table-cell; vertical-align: middle; width:33.333%;}
.m-info02 ul li strong {display: table-cell; vertical-align: middle; width:33.333%; font-size: 20px; text-transform:uppercase;}
.m-info02 ul li p {display: table-cell; vertical-align: middle; width:33.333%; font-size: 17px;}






/* 서브 연혁 */
.info03 {text-align:left; position:relative; margin-top: 7%; overflow: hidden;}
.info03::before {content:''; position:absolute; top:37px; left:50%; width:1px; height:98%; background:#535353; z-index:-1;}
.info03 .left {width:43%; text-align: right;}
.info03 .dInlineB {bottom:0;}
.info03 .right {width:43%; margin-left:57%;}
.info03 .bottom ul {margin-bottom:29px;}
.info03 div.title {font-size:66px; color:#ff5e8d; letter-spacing:-2px; margin:65px 0 30px; padding:12% 0 9.5%;}
.info03 div.title span.point {position:absolute; left:50%; margin-left:-7px; display:block; background:#fff; border:1px solid #ff5e8d; border-radius:50%; padding:3px; z-index:-1; margin-top:-14px;}
.info03 div.title span.point i {background:#ff5e8d; display:block; width:5px; height:5px; border:1px solid #ff5e8d; border-radius:50%;}
.info03 div ul li {position: relative; color:#585858; font-size:17px; font-weight: bold; line-height:1.6; padding-left:10px; word-break: keep-all;}
.info03 div ul li:first-child:before {display: none;}
.info03 div ul li span {display: inline-block; width:0; height:0; border:1px solid #585858; background: #585858; border-radius: 50%; margin:11px 10px 0 -10px; vertical-align: 5px;}
.info03 div ul li.comTitle {padding-left:0;}
.info03 ul li strong {color:#000; font-size:48px; letter-spacing:-0.5px; display:block; font-weight: 600;}
.info03 .left .stLine {position:absolute; right:50%; margin-right:-4px; display:block; width:7px; height:7px; background:#f7f7f7; border:1px solid #535353; border-radius:50%; z-index:-1;margin-top:35px;}
.info03 .left .slideon {transform: translateX(-5%);}
.info03 .left .slide {transform: translateX(0);}
.info03 .left ul {width:70%; display: inline-block;}
.info03 .right div.title {margin:0 0 30px;}
.info03 .right .stLine {position:absolute; left:50%; margin-left:-4px; display:block; width:7px; height:7px; background:#f7f7f7; border:1px solid #535353; border-radius:50%; z-index:-1;margin-top:35px;}
.info03 .right ul {width:70%; display: inline-block;}
.info03 .right ul li span {left:60%;}
.info03 .right .slideon {transform: translateX(5%);}
.info03 .right .slide {transform: translateX(0);}





/* 서브 프로세스 */
.process {margin-top:70px;}
.process h3 {font-size: 30px; margin-bottom: 10px; padding-top: 30px;}
.process-wrap {background:#f1fafd;}
.process-title {text-align: center;}
.process-title p {font-size:26px; font-weight: 500; margin-bottom: 7px; color:#000;}
.process-title p span {color:#2372a0; font-weight: bold;}
.process-title span.process-sub-text {color:#686868; font-size: 18px; font-weight: 400; word-break: keep-all;}
.process-line {margin-top:55px; }
.process-line ul li {position: relative; display:inline-block; width:130px; vertical-align: top;}
.process-line ul li .process-icon {margin-bottom: 20px;}
.process-line ul li .process-icon img {vertical-align: bottom;}
.process-line ul li .process-check {position: relative; margin-bottom: 15px;}
.process-line ul li .process-check img {position: relative;z-index: 2;}
.process-line ul li .process-gr {display:block; position: absolute; background:#35afd2; width:0px; height: 3px; top:50%; left: 51%; z-index: 0;}
.process-line ul li .process-step {color:#9ec478; font-size: 13px; margin-bottom: 5px;}
.process-line ul li .process-text {line-height: 1.3; font-weight: bold; font-size:17px; color:#000; letter-spacing: -1px;}
.process01 .process-line ul li:nth-child(7) .process-gr {display: none;}
.process02 {background:#fff; padding: 40px 0 7%;}
.process02 .process-line ul li:nth-child(8) .process-gr {display: none;}
.process03  {margin-top: 0px; padding-bottom: 5%;}
.process03 h3 {padding-top: 50px; text-align: center;}
.process03 .process03-img img {width:100%;}
.process03 .process03-img-m {display: none;}
.process03 .process03-img-m img {width:100%; max-width: 392px;}
.process03 ul {text-align: left; font-size: 0;}
.process03 ul li {width:148px; padding-right: 53px; text-align: center; margin-bottom: 70px;}
.process03 .process-line {padding-top: 0;}
.process03 .process-line ul li .process-icon img {vertical-align: bottom; position: relative; z-index: 0;}
.process03 .process-line ul li .process-gr {z-index: 1;}
.process03 ul li:nth-child(3) { padding-right:35px;}
.process03 ul li:nth-child(4) { width:595px; padding-right:0;}
.process03 ul li:nth-child(4) .process-check {text-align: right; left:-11%; margin-top: -18px;}
.process03 ul li:nth-child(4) .process-icon img {top:-1px;}
.process03 ul li:nth-child(4) .process-gr {left:97.5%;}
.process03 ul li:nth-child(5) {width:186px; padding-right: 42px;}
.process03 ul li:nth-child(5) .process-check {left:-9%;}
.process03 ul li:nth-child(6) { width:325px; padding-right: 35px;}
.process03 ul li:nth-child(7) { width:188px; padding-right: 52px;}
.process03 ul li:nth-child(8) { padding-right: 52px; }
.process03 ul li:nth-child(9) {padding-right: 0;}
.process03 ul li:nth-child(10) { width:555px; padding-right: 35px;}
.process03 ul li:nth-child(10) .process-check {left:11%; text-align: left;}
.process03 ul li:nth-child(11) { padding-right: 50px; }
.process03 ul li:nth-child(12) { width:186px; }
.process03 ul li:nth-child(13) { padding-right: 0; }
.process03 .process-line ul li .process-icon {margin-bottom: 0;}
.process-line ul li .process-check {margin:-16px 0 0;}





/* R&D 센터 */
.rd-slider {margin-top: 40px;}
.rd-slider .swiper-pagination {text-align:right; margin-top: 55px!important;}
.rd-slider .swiper-pagination-bullet {width:12px; height:12px; background:#f8f8f8; border:2px solid #989898; margin:0 0 0 15px!important;}
.rd-slider .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {width:12px; height:12px; border:1px solid #636363; background:#636363;}
.rd-slider .swiper-slide .thumb {width:100%;}
.rd-slider .swiper-slide .thumb img {width:100%;}
.rd-slider .swiper-slide {overflow: visible;}
.rd-slider .swiper-slide-active .swiper-info {display: block;}
.rd-slider .swiper-slide .thumb-p {}
.rd-slider .swiper-slide .thumb-m {display: none;}
.rd-slider .swiper-slide span {display: none; font-size: 20px;position: absolute;left: 0;bottom: -60px;}
.rd-slider .swiper-slide-active span {display: block;}
.swiper-info {z-index: 9; position: absolute; width:calc(100% - 245px); left:0; bottom: 0; text-align: left; border-bottom:1px solid #222;}
.rd02 {margin-top: 10%;}
.rd02 .sub-text {color:#000; font-size: 24px;}
.rd02 ul {margin-top: 30px;}
.rd02 ul li {float:left; width:33.33%; padding:18px 15px; box-sizing: border-box; text-align: center; font-size:20px; color:#000; font-weight: bold;}
.rd02 ul li:nth-child(1) {transform: translateY(5%)}
.rd02 ul li:nth-child(1).slide {transform: translateY(0)}
.rd02 ul li:nth-child(2) {transform: translateY(10%)}
.rd02 ul li:nth-child(2).slide {transform: translateY(0)}
.rd02 ul li:nth-child(3) {transform: translateY(15%)}
.rd02 ul li:nth-child(3).slide {transform: translateY(0)}
.rd02 ul .thumb {margin-bottom: 10px; overflow: hidden;}
.rd02 ul .thumb img {width:100%; transition: all .5s;}
.rd02 ul li .info-wrap {margin-top:30px; letter-spacing: -1px;}






/* 인증현황 */
.grid { margin:0 auto; max-width: 1200px; }
.grid-item,
.grid-col-sizer { width: 32%; }
.grid-pad-sizer { width: 2%; }
.grid-item, .grid-col-sizer { width: 31%; }
.grid-item { margin-bottom: 20px; float: left; border:1px solid #dbdbdb; padding:3%; box-sizing: border-box; }
.grid-item img { display: block; max-width: 100%; }







/* 파트너사 */
.partner {font-size: 0; margin-top: 8%; text-align: left;}
.partner li {display: inline-block; vertical-align: top; border:1px solid #dbdbdb; box-sizing: border-box; width:23%; margin:1%;}
.partner li img {width:100%;}



/* 오시는길 */
#daumRoughmapContainer1585135635178 {width:100%; margin-top: 150px;}
#daumRoughmapContainer1585135635178 .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-info01 .thumb + div {width:90%;}
.map-info .map-info02 {width:20%;}














/* 하단 */
#footer {position: relative; background:#0f3353; margin-top:100px; text-align: left; padding:85px 0 75px; color:#fff;}
#footer h1 {text-align: left; margin-bottom: 30px;}
#footer h1.m-logo {display: none;}
#footer h1 img {width:200px;}
#footer h1.m-logo img {width:145px; margin-left: 10px;}
#footer .footer-info {margin-bottom: 25px;}
#footer .footer-info span {display: inline-block; margin-right:24px; font-size: 20px;}
#footer .footer-address {font-weight: 300; line-height: 1.7; font-size:16px;}
#footer .footer-address p {letter-spacing: -1px;}
#footer .footer-address p.copy {margin-top: 5px;}
#footer a.footer-link {position: absolute; bottom:0; right:0; color:#fff;}
#footer a.contact {font-size: 26px; font-weight: bold; bottom:55px;}
#footer a.contact img {vertical-align: middle; margin-left:55px;}
#footer a.shop {border:1px solid #fff; padding:3px 30px; font-size:14px; right:10%;}
#footer .footer-brands {position: relative; bottom: 15px;}
#footer .footer-brands ul {display:none; position: absolute; right:11%; text-align: center;}
#footer .footer-brands ul li a {color:#fff;}





/* PC Full */
@media screen and (min-width: 1381px){}
/* PC size */
@media screen and (max-width: 1320px){
	#topmenu.fixmenu .top-nav > ul,
	#topmenu.sub-topmenu .top-nav > ul {width:auto; padding-right:6%; margin-right: 80px;}
	#topmenu .inner {width:90%;}
	.main-right .main-right-wrap {width:100%;}
	.main-right ul {right:10%;}
	#topmenu.fixmenu h1 {left:5%;}
	.info02-grid5 .inner:before {width:100%; left:0; padding-bottom: 20%;}
	.info02-grid5 li {width:18%;}
}


@media screen and (max-width: 1220px){
	.inner {width:100%; padding:0 5%; box-sizing: border-box;}
	#contact .star-info {padding-right:2%;}
	.board-table .input-group label input {width:80%;}
	.board-table th {width:20%;}
	.file-wrap input[type="file"] {width:50%;}
	.process-line ul li {width:112px;}
	.info01-video {padding-bottom:41%;}
	.rd-center {font-size: 15px;}
	.rd-center strong {font-size: 21px;}
	#footer a.footer-link {right:5%;}
	#footer a.shop {right:11%;}
	#footer .footer-brands ul {right:12%;}

	.process03 .process-line ul li {width:14%;}
	.process03 .process-icon img {width:100%;}
	.process03 ul li:nth-child(3) { padding-right:35px;}
	.process03 ul li:nth-child(4) { width:595px; padding-right:0;}
	.process03 ul li:nth-child(4) .process-check {text-align: right; left:-11%; margin-top: -18px;}
	.process03 ul li:nth-child(4) .process-icon img {width:auto;}
	.process03 ul li:nth-child(4) .process-gr {left:97.5%;}
	.process03 ul li:nth-child(5) {width:186px; padding-right: 42px;}
	.process03 ul li:nth-child(5) .process-check {left:-9%;}
	.process03 ul li:nth-child(6) { width:325px; padding-right: 35px;}
	.process03 ul li:nth-child(7) { width:188px; padding-right: 52px;}
	.process03 ul li:nth-child(8) { padding-right: 52px; }
	.process03 ul li:nth-child(9) {padding-right: 0;}
	.process03 ul li:nth-child(10) { width:555px; padding-right: 35px;}
	.process03 ul li:nth-child(10) .process-check {left:11%; text-align: left;}
	.process03 ul li:nth-child(11) { padding-right: 50px; }
	.process03 ul li:nth-child(12) { width:186px; }
	.process03 ul li:nth-child(13) { padding-right: 0; }

	.p-info02 li {width:20%;}

	.p-info02 li img {width:90%;}

	.info03 ul li strong {font-size:40px;}

	.rd02 ul li {font-size: 20px;}

	.p-modal-content {width:78%;}

	.board-table .info-mail {width:100%; margin-top: 20px;}
	.board-table .info-name {width:40%;}
	.board-table .info-tel {width:50%;}

	.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%;}

	.info03 .left ul, .info03 .right ul {width:85%;}

	.swiper-info span {margin-right:4%; font-size: 17px;}

}

/* Notebook size */
@media screen and (max-width: 1024px){
	#mTopmenu {display:block;}
	#topmenu {display: none;}
	#container {margin-top: 0;}
	.content-title {font-size: 1.7em;}
	.navigation.grid5 li {width:20%;}

	.info01 .info01-title h3 {font-size:17px;}
	.info01 .info01-title span {font-size: 16px;}
	.info01-img .img-wrap img {width:100%;}
	.info01 .info01-title p {font-size: 16px;}
	.info01 .fr {width:45%;}
	.company-ci .inner div.animated div {width:40%;}

	.sub-title .visual {min-height: 410px;}

	.main-bottom-wrap .slick-arrow {width:30px; background-size: 100%;}
	.main-bottom-wrap .slick-prev {right:45px;}
	.slider-progress {width:75%;}

	.board-table .input-group label span {font-size:1em; min-width:80px;}
	.board-table .input-group label:nth-child(2n) span {margin-left: 15px;}
	.board-table th.text-left {font-size: 15px;}
	.glance-wrap ul li {width:19.333%; margin-bottom: 35px;}
	.glance-wrap ul li img {width:80%;}
	.main-port .main-port-more {right:7%;}
	.main-port .main-port-title {font-size: 27px;}
	.main-port .main-port-item li .brand span {font-size: 14px;}
	.main-title-text strong {font-size: 27px;}
	.glance-wrap {padding:8% 0 5%;}
	.m-tab {display:block;}
	.info01-video {padding-bottom:49%;}
	.process h3 {font-size:25px;}
	.process-line ul li {width:24%; margin:3% 0;}
	.process-line ul li:nth-child(4) .process-gr, 
	.process-line ul li:nth-child(8) .process-gr {opacity: 0;}
	.rd-images li {width:50%;}
	.rd-images li:nth-child(5) {width:100%;}
	.certification .cert-name {font-size: 15px;}
	.certification .cert-right ol li {font-size: 15px; margin:5px 0;}
	.certification .cert-item a {width:160px; font-size: 15px;}
	.certification .cert-name strong {margin-bottom: 10px;}

	.main-bottom-wrap h1 {font-size:27px;}

	#footer .footer-info span {font-size:18px;}
	#footer .footer-address {font-size:15px;}
	#footer a.contact {font-size:24px; display: block; margin: 25px 0 15px;}
	#footer a.contact img {margin-left: 25px;}
	#footer a.shop {right:9%;}
	#footer .footer-brands ul {right:10%;}

	.navigation {margin-bottom: 105px;}

	.info03 ul li strong {font-size:35px;}
	.info03::before {top:25px;}
	.info03 .left .stLine,
	.info03 .right .stLine {margin-top: 25px;}
	.info03 .left li {padding-left:10px;}
	.info03 .right li {padding-right:10px;}

	.rd02 ul li {font-size: 17px; word-break: keep-all;}

	.grid-item, .grid-col-sizer { width: 31%; }
	.grid-item { margin-bottom: 50px !important; }
	.grid-pad-sizer { width: 3.533%; }

	.privacy {font-size: 15px;}
	.board-table .info-mail input {width:28%;}

	.contact-wrap {margin-bottom: 18%;}

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

	.process-line {margin-top: 20px;}

	.swiper-info {width:calc(100% - 225px)}
	.swiper-info span {margin-right:2%; font-size: 14px;}

	#footer .footer-brands {bottom:30px;}

	.info03 .left ul, .info03 .right ul {width:95%; }
}


@media screen and (max-width: 890px){
	.info01-video {padding-bottom:56%;}
}


/* Tablet size */
@media screen and (max-width: 768px){
	.portTitle {margin-top: 60px}
	.board-table th.text-left {text-align: center; padding-left: 0;}
	.board-table .input-group label {width:100%;}
	.board-table .input-group label:nth-child(2n) span {margin-left: 0}
	.slider-progress {width:70%;}
	.file-wrap input[type="file"] {width:80%;}
	.main-slider .slick-dots li.slick-active { display: inline; width:100%;}
	.main-slider .slick-dots li.slick-active a {font-weight: normal; border-bottom:0;}
	.main-slider .slick-arrow {top:auto; bottom:15px; }
	.main-slider .slick-slide {height:auto!important;}
	.slide-info { bottom: 0; top: auto; left: 0; right: auto;  width: 100%; height: 50%; }
	.slide-info div h2 {font-size: 22px; margin-bottom: 15px;}
	.slide-info div {font-size: 15px;}

	.info01 > div {float:none;}
	.info01 .fl {width:100%; margin-right: 0;}
	.info01 .fr {width:100%; text-align:center;}
	.info01-img .img-wrap img {width:60%;}
	.company-ci .inner div p {font-size: 15px;}
	.info01-title .info01-caption {display: none;}
	.info01-img .info01-caption {display: block;}
	.company-ci .inner div.animated div {width:80%; display: block; margin:0 auto;}


	.main-port .main-port-item li {width: 50%;}
	.main-port .main-port-title {font-size: 24px;}
	.main-title-text strong {font-size: 24px;}
	.main-title-text p {font-size: 16px;}
	.p-glance {display: none;}
	.m-glance {display: block;}
	.main-glance {padding:0;}
	.glance-wrap h2 {font-size: 27px;}
	.glance-wrap .glance-desc {font-size: 4.5em;}
	.glance-wrap ul li {margin-bottom: 5%; width:27.333%;}
	.main-slider .slick-arrow {display:none!important; width:40px; height:40px; background-size: 40px 40px!important;}
	.main-bottom-wrap {margin-top: 90px;}
	.info01 .info01-title h3 {font-size:15px;}
	.info01 .info01-title span {font-size: 14px;}
	.info01-caption .caption-l span {font-size:13px;}
	.process-line {padding:40px 15px;}
	.process-line ul li .process-text {font-size: 13px;}
	.process h3 {font-size:22px;}
	.rd-images .rd-name strong {font-size: 14px;}
	.rd-center {font-size: 14px;}
	.rd-images li p {font-size: 13px;}
	.rd-center strong {font-size: 19px;}
	.certification .cert-item a {width:150px; height:35px; line-height: 35px; font-size: 13px;}
	.certification .cert-right ol li {font-size: 14px;}
	.certification .cert-name {font-size: 14px;}
	.certification .cert-popup {width:315px;}
	.main-slider-img {display:block;}
	.main-slider .slick-slide video {display: none; visibility: hidden;}
	.main-bottom-wrap .thumb-p {display:none;}
	.main-bottom-wrap .thumb-m {display:block;}
	.main-bottom-slider {padding: 0 5%;}
	.slide-bar-wrap {width:90%;}
	.swiper-button-prev, .swiper-button-next {top:30%!important; transform: translateY(-50%); width:40px!important; height:40px!important; background-size:40px!important;}
	.main-bottom-wrap h1 {font-size:24px;}
	#footer a.footer-link {bottom: auto; top:50px;}
	#footer a.shop {top:125px; margin-right: 15px;}
	#footer .footer-info span {display: block;}
	.navigation.grid2 li {box-sizing: border-box; width:50%; font-size:18px;}
	.navigation.grid3 li {box-sizing: border-box; width:33.33%; font-size:18px;}
	.navigation.grid4 li {box-sizing: border-box; width:25%; font-size:18px;}
	.navigation.grid5 ul {border-bottom: 1px solid #acacac; height: 120px;}
	.navigation.grid5 li {width:33.333%;}

	.info01 .info01-title p {font-size: 17px; width:90%; margin:0 auto;}
	.info01 .info01-title p strong {font-size: 20px;}
	.info01-img {margin-top: 13%;}
	.info01-caption p {font-size:17px;}
	.info01-caption strong {font-size:20px;}
	.info02 {padding:15% 0;}
	.info02 .info02-box strong {font-size: 32px;}
	.info02 .info02-box p {font-size: 20px;}
	.p-info02 li p {margin-bottom: 15%; font-size:17px;}
	.sub-text {font-size: 20px;}
	.rd02 .sub-text {font-size: 20px;}
	.info03 ul li strong {font-size: 30px;}
	.info03 div ul li {font-size:13px;}
	.rd-slider .swiper-pagination {margin-top: 10px!important; text-align: center;}
	.swiper-info {width:100%; text-align: center;}
	.rd-slider .swiper-container {padding-bottom: 70px;}
	.rd02 ul li {width:100%; font-size: 20px;}
	.rd02 ul .thumb img {width:80%;}
	.rd-slider .swiper-slide .thumb-p {display: none;}
	.rd-slider .swiper-slide .thumb-m {display: block;}
	.rd-slider .swiper-slide span {width:100%; bottom: -90px; font-size: 17px;}

	.grid-item, .grid-col-sizer { width: 47%; 	}
	.grid-pad-sizer { width: 6%; }
	.grid-item { margin-bottom: 45px !important; }

	.p-modal-content .modal-thumb {width:100%; margin-right: 0;}
	.p-modal-content .slick-slide img {height: auto; max-height: 200px;}
	.p-modal-content .modal-info {width:100%; border-left: 0; border-top:2px solid #a1a1a1;}
	.p-modal-content .slick-prev, .p-modal-content .slick-next {background-size: 20px auto!important; transform: translateY(10px);}

	.partner li {width:31.333%;}

	.board-table .radio-group .radio-btn {font-size: 15px;}
	.board-table .input-info span {font-size: 15px;}
	.board-table td {padding: 20px 20px 20px 40px;}
	.board-table .info-mail select {font-size: 15px;}
	.board-table .addr-search {font-size: 15px; padding:10px 15px;}
	.board-table .info-tel {width:58%;}

	.contact-wrap {margin-bottom: 20%;}

	.company-ci .inner div.animated {position: relative;}
	.company-ci .inner div.animated div:first-child {padding-top: 40%;}
	.company-ci .inner div.animated div:last-child {position: absolute; top:0; width:100%;}
	.company-ci .inner div.animated div:last-child img {width:50%;}

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

	.m-info02 {display: block;}
	.p-info02 {display: none;}

	.process03 .process03-img {display: none;}
	.process03 .process03-img-m {display: block;}

	#footer h1.m-logo {display: block;}
	#footer h1.p-logo {display: none;}
	#footer .footer-brands {display: none;}

}


/* Mobile1*/
@media screen and (max-width: 640px){
	.privacy-check-title, .privacy-check .radio-list {font-size: 13px;}
	.board-table th {width:25%;}
	.tabList {bottom: -25%;}
	.slider-progress {width:58%;}
	.slide-info div h2 {font-size: 18px; margin-bottom: 15px;}
	.slide-info div {font-size: 12px;}
	.portTitle {margin-top: 80px}

	.company-ci .inner div.animated div {padding: 0;}

	.main-title-text strong {font-size: 20px;}
	.main-title-text p {font-size: 14px;}
	/*.main-port .main-port-item:before {content:''; display: block; border-bottom:1px solid #dbdbdb; margin-bottom: 5px;}
	.main-port .main-port-item > li {padding:6px 5px; width:100%;}
	.main-port .main-port-item > li:after {content:''; clear:both; display:block; border-bottom:1px solid #dbdbdb;}
	.main-port .main-port-item > li .thumb {width:30%; float:left; box-sizing: border-box; padding-right:10px;}
	.main-port .main-port-item > li .info-wrap {float:left; width:70%; margin-top: 10px;}
	.main-port .main-port-item > li .brand {line-height: 1.2; padding-bottom: 10px; display:inline-block;}
	.main-port .main-port-item > li .info {margin:10px 0;}*/
	.main-port .main-port-more {top:auto; bottom:0;}
	.main-port .inner {padding-bottom: 8%;}
	.glance-wrap h2 {margin-bottom: 40px;}
	.glance-wrap .glance-desc {font-size: 3.5em;}
	.main-right ul li {font-size:13px; padding:17px;}

	.info01 .info01-title h3 {font-size: 13px;}
	.info01 .info01-title span {font-size: 12px;}
	.info01-caption .caption-l span {font-size: 12px;}
	.process-line ul li .process-text {font-size: 14px; margin-top: 5px;}
	.process-line ul li .process-icon img {height:75px;}
	.process-line ul li .process-check img {width:22px;}
	.process-title span.process-sub-text {font-size: 14px;}
	.process-title p {font-size: 22px;}

	.rd-images li {width:100%;}
	.rd-images li:nth-child(4) {width:100%;}
	.rd-center {font-size: 13px;}
	.rd-center strong {font-size: 17px;}
	.certification .cert-name { width:100%; margin-bottom: 10px;}
	.certification .cert-right {width:100%;}
	.certification .cert-popup {width:295px; left:50%; transform: translateX(-50%);}

	#footer {padding:55px 0 45px;}
	#footer a.footer-link {top:55px;}
	#footer a.shop {top:130px; right:19%; font-size: 12px;}

	.sub-title .visual {min-height: 320px;}

	.navigation {margin-bottom: 65px;}
	.content-title {margin-bottom: 40px; font-size: 23px;}

	.info02 .info02-box strong {font-size: 28px;}
	.info02 .info02-box p {font-size:18px; margin-top: 15px;}
	.info02-grid5 li img {width:80%;}
	.info02-grid5 li strong {margin:20px 0 15px; font-size: 17px;}
	.m-info02 ul li strong {font-size: 17px;}
	.m-info02 ul li p {font-size: 15px;}
	.info02-grid5 li p {font-size:16px;}

	.info03::before {left:10%;}
	.info03 .right {margin-left: 17%; width:80%;}
	.info03 .left {margin-left: 17%; width:80%; text-align: left;}
	.info03 .left, .info03 .right {margin-bottom:10%;}
	.info03 .left .stLine, .info03 .right .stLine {left:10%; right:auto; margin:20px 0 0 -4px;}
	.info03 div ul li {font-size:17px;}

	.swiper-info h2 {font-size: 20px;}

	.rd02 ul li {font-size: 17px;}

	.p-modal-content .modal-info strong {font-size: 14px; margin:0;}
	.p-modal-content .modal-info span {font-size: 14px;}
	.p-modal-content .modal-info > div.product-name {min-height:130px;}

	.board-table td {padding: 20px 0 20px 20px;}
	.board-table .info-mail select {padding-left: 1%; font-size: 14px; width:26%;}
	.board-table .info-mail input {width:26%;}
	.board-table .info-tel input {width:49%;}
	.board-table .addr-search {font-size: 14px;}
	.board-table .info-name {width:100%;}
	.board-table .info-tel {width:100%;}

	.contact-wrap {margin-bottom: 25%;}
	#contact .contact-title h2 {font-size: 20px; top:-65px;}
	#contact .star-info {font-size: 15px;}

	.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;}

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


/* Mobile2 */
@media screen and (max-width: 480px){
	.main-port .main-port-title {font-size:24px; text-align: center;}
	.main-port .main-port-more {font-size:12px;}
	.main-port .main-port-item li .brand span {font-size: 12px;}
	.slider-progress {width:50%;}
	.glance-wrap h2 {font-size: 24px;}
	.glance-wrap ul li img {margin: 0 auto 15px;}
	.glance-wrap ul li a {font-size: 16px;}
	.tabList {bottom: -40%;}
	.tabList li {width:25%; height:25px;}

	.navigation li a {font-size: 15px;}

	.company-ci .inner div p {font-size: 14px;}

	#footer .footer-info span {font-size:15px;}
	#footer .footer-address {font-size:13px;}
	#footer a.contact {font-size:18px;}

	.m-glance ul li:first-child {font-size: 17px;}
	.m-glance ul li {font-size: 15px;}

	.navigation.grid3 li {font-size:15px;}

	.info01 .info01-title p {font-size: 15px;}

	.m-info02 ul li p {font-size: 13px;}

	.info02 .info02-box strong {font-size:22px;}
	.info02 .info02-box p {font-size:16px;}

	.sub-text {font-size:15px;}

	.info03 div ul li {font-size:15px;}

	.rd02 .sub-text {font-size: 18px;}
	.rd02 ul .thumb img {width:100%;}

	.grid-item, .grid-col-sizer { width: 100% !important; }
	.grid-item { margin-bottom: 40px !important; }

	.grid-pad-sizer { width: 0% !important; }
	.grid-item .gbn	{color:#666; font-size:0.9rem; margin-top:15px;}
	.grid-item .content	{font-size:0.9rem;margin-bottom:0px;}

	.board-table .info-mail select {width:62%; margin: 9px 0 0 52px;}
	.board-table .info-name {width:100%;}
	.board-table .info-tel {width:100%;margin-top: 15px;}
	.board-table .addr-search {padding: 10px 3px; font-size: 12px;}
	.board-table .info-name > span {width:40px;}
	.board-table .info-tel > span {width:40px;}
	.board-table .info-mail > span:nth-child(1) {width:45px;}
	.board-table .info-mail {margin-top: 15px;}
	.board-table .addr01 {width:35%;}

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

	#footer a.shop {top:120px; right:17%;}
	#footer a.contact img {width:25px; margin-left: 15px;}

	.process-line ul li .process-icon img {height:55px;}
	.process-line ul li .process-check img {width:18px;}
	.process-line ul li .process-text {font-size: 12px;}

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

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


@media screen and (max-width: 380px){
	.slider-progress {width:40%;}
	.glance-wrap ul li a {font-size: 14px;}
	.glance-wrap .glance-desc {font-size: 3em;}
	.tabList {bottom: -50%;}

	.sub-text {font-size:14px;}

	.m-glance ul li:first-child {font-size: 15px;}
	.m-glance ul li {font-size: 13px;}

	.p-info02 li {width:100%;}
	.p-info02 li img {width:50%;}

	.m-info02 ul li {padding: 5% 3%;}

	.info03 div ul li {font-size:13px;}

	#contact .contact-title h2 {font-size: 18px;}
	#contact .star-info {font-size: 13px;}

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

	.board-table .addr-search {font-size: 13px;}
	.board-table .addr01 {width:30%;}
}