@charset "utf-8";

/* slick */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-slider *:focus, .slick-slider *:active {outline: none;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: inline-block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}

/* font */
.red {color: #df1e36 !important;}
.title {font-size: 60px; font-weight: 100;}
.f-roboto {font-family: 'Roboto', sans-serif !important;}

/* layout */
#wrap {position: relative;}
#wrap:after {content: ''; display: block; clear: both;}
.inner {margin: 0 auto; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.inner:after {content: ''; display: block; clear: both;}
.sub .content {min-width: 1280px; padding-top: 10rem;}

/* header */
#header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 10;}
#header .inner {min-width: 1280px;  max-width: 1580px; height: 10rem; margin: 0 auto;}
#header h1 {float: left; padding-top: 3rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#header h1 a {width: 10.3rem; height: 3.3rem; display: block; text-indent: -9999px; overflow: hidden; background: url('../images/common/logo.png') no-repeat center center; padding: 0.5rem 0;}
#header .gnb-wrap {float: right;}
#header .gnb-wrap > ul > li {float: left; text-align: center; margin: 0; position: relative;}
#header .gnb-wrap > ul > li > a {display: block;position: relative; font-size: 0; font-weight: 300; padding: 4.2rem 4.9rem 4.4rem 0.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative;}
#header .gnb-wrap > ul.gnb {float: left;}
#header .gnb-wrap > ul.gnb > li a span {position: relative; display: inline-block; font-size: 1.4rem; font-weight: 300; color: #000; letter-spacing: 0.05rem;}
#header .gnb-wrap > ul.gnb > li a span:before{content: '';display: block;position: absolute;right: -.8rem;top: -.5rem;width: 6px;height: 6px;background-color: #df1e36;border-radius: 50%;transition: .2s ease-in-out;-webkit-transition:.6s ease-in-out;-moz-transition:.2s ease-in-out;-ms-transition:.2s ease-in-out;-o-transition:.2s ease-in-out; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);}
#header .gnb-wrap > ul.gnb > li.active > a span:before,
#header .gnb-wrap > ul.gnb > li a:hover span:before{transition: .3s ease-in-out;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;  -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1;}
#header .gnb > li.report a {letter-spacing: -0.04rem;}
#header .gnb > li.report a::before {width: 0%; height: 1px; background: #df1e36; display: inline-block; content:''; position: absolute; bottom: -4rem; left: 0; transition: .4s ease-in;-webkit-transition:.3s ease-in;-moz-transition:.3s ease-in;-ms-transition:.3s ease-in;-o-transition:.3s ease-in;}
#header .gnb > li.report a:hover::before {width: 100%;}
#header .gnb-wrap > ul.utll {float: right;}
#header .gnb-wrap > ul.utll > li.report a {font-size: 1.4rem;letter-spacing: -0.04rem;}
#header .gnb-wrap > ul.utll > li.report a::before {width: 0%; height: 1px; background: #df1e36; display: inline-block; content:''; position: absolute; bottom: 4rem; left: 6px; transition: .3s ease-in-out;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:.3s ease-in-out;-o-transition:.3s ease-in-out}
#header .gnb-wrap > ul.utll > li.report a:hover::before {width: 62px;}
#header .gnb-wrap > ul.utll > li.lang {margin: 3.5rem 0 0; }
#header .gnb-wrap > ul.utll > li.lang .select {width: 56px;}
#header .gnb-wrap > ul.utll > li.lang .select .label { height: 2.7rem; background: url('../images/common/ico_select_arrow.png') no-repeat 85% center; border: 1px solid #df1e36;letter-spacing: 0; padding: 0.7rem 2.2rem 0.8rem 0.8rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#header .gnb-wrap > ul.utll > li.lang .select .label span {display: block; font-size: 1.2rem; color: #df1e36;}
#header .gnb-wrap > ul.utll > li.lang .select .select-list {width: 100%; position: absolute; top: 2.7rem; left: 0; border: 1px solid #ccc; border-top: 0; box-sizing: border-box;}
#header .gnb-wrap > ul.utll > li.lang .select .select-list > li a {background: #fff; font-size: 1.2rem; text-align: left; color: #898989; line-height: 2.7rem; padding: 0 1rem;}
#header .gnb-wrap > ul.utll > li.lang .select .select-list > li a:hover {color: #000; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
#header .gnb-wrap > ul.utll > li.go-jipyong a {
    display: block;
    width: 8.6rem;
    height: 2.2rem;
    background: url(../images/common/logo_jipyong.jpg) no-repeat 0 0;
    text-indent: -9999px;
    padding: 0;
    margin: 3.9rem 0 0 2rem;
}
#header .submenu {display: none; position: absolute; width: 100%; padding-top: 2rem; box-sizing: border-box;-webkit-transition: opacity 0.6s cubic-bezier(0.33, 0.25, 0.04, 0.87); -o-transition: opacity 0.6s cubic-bezier(0.33, 0.25, 0.04, 0.87); transition: opacity 0.6s cubic-bezier(0.33, 0.25, 0.04, 0.87); opacity: 0;}
#header .submenu ul li {text-align: left;}
#header .submenu ul li a {position: relative; display: inline-block; line-height: 3.5rem; font-size: 1.4rem; font-weight: 300; color: #000; text-align: left; padding-left: 0.5rem; box-sizing: border-box;}
#header .submenu ul li:nth-child(1) a{letter-spacing: 0.02rem;}
#header .submenu ul li a::before {content: ''; position: absolute; display: inline-block; position: absolute; bottom: 0.5rem; left: 0.5rem; width: 0; height: 1px; background: #df1e36; transition: .4s ease-in;-webkit-transition:.3s ease-in;-moz-transition:.3s ease-in;-ms-transition:.3s ease-in;-o-transition:.3s ease-in;}
#header .submenu ul li a:hover::before {width: 96%;}
#header .submenu .img-box img {float: left; display: block;}
.submenu_bg {display: none; width: 100%; height: 23rem; position: fixed; top: 10rem; left: 0; background: #fff; box-shadow: 0px 0px 25px 1px rgba(0,0,0,0.1);border-top: 1px solid #f2f2f2; overflow: hidden; z-index: 9;}
.submenu_bg .inner {min-width: 1280px;  max-width: 1580px; height: 100%; background-position: 0 2.3rem; margin: 0 auto; padding-top: 2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0;}
.submenu_bg.COMPANY .inner{background: url('../images/common/menu_depth01.jpg') no-repeat 0 2rem; opacity: 1; -webkit-transition: 0.8s ease 0.2s; -o-transition: 0.8s ease 0.2s; transition: 0.8s ease 0.2s; animation: fadeInUp 0.8s ease 0.2s;}
.submenu_bg.SERVICE .inner{background: url('../images/common/menu_depth02.jpg') no-repeat 0 2rem; opacity: 1; -webkit-transition: 0.8s ease 0.2s; -o-transition: 0.8s ease 0.2s; transition: 0.8s ease 0.2s; animation: fadeInUp 0.8s ease 0.2s;}
.submenu_bg.HOTLINE .inner{background: url('../images/common/menu_depth03.jpg') no-repeat 0 2rem; opacity: 1; -webkit-transition: 0.8s ease 0.2s; -o-transition: 0.8s ease 0.2s; transition: 0.8s ease 0.2s; animation: fadeInUp 0.8s ease 0.2s;}
.submenu_bg.CONTACT .inner{background: url('../images/common/menu_depth04.jpg') no-repeat 0 2rem; opacity: 1; -webkit-transition: 0.8s ease 0.2s; -o-transition: 0.8s ease 0.2s; transition: 0.8s ease 0.2s;  animation: fadeInUp 0.8s ease 0.2s;}
.submenu_bg .object{display: block; border-bottom: 40px solid #fff; border-left: 40px solid transparent;  position: absolute; right: auto; left: 58rem; bottom: 2rem; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); -o-transform: translate(50%,50%); transform: translate(50%,50%);}
.submenu_bg.COMPANY .object, 
.submenu_bg.SERVICE .object,
.submenu_bg.HOTLINE .object,
.submenu_bg.CONTACT .object{-webkit-transition: 1.2s cubic-bezier(0.33, 0.25, 0.04, 0.87) 0.4s; -o-transition: 1.2s cubic-bezier(0.33, 0.25, 0.04, 0.87) 0.4s; transition: 1.2s cubic-bezier(0.33, 0.25, 0.04, 0.87) 0.4s; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0);}

/* footer */
#footer {min-width: 1280px; background: #fff; z-index: 10; overflow: hidden;}
#footer .inner {max-width: 1580px; background: #fff; margin: 0 auto; padding-left: 16rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#footer .util-wrap {height: 7.6rem; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
#footer .util-wrap .menu {float: left;}
#footer .util-wrap .menu li {float: left; line-height: 7.6rem; margin-left: 3rem;}
#footer .util-wrap .menu li.partner {margin-left: 0;}
#footer .util-wrap .menu li.partner a {font-weight: 500;}
#footer .util-wrap .select {float: right; position: relative; display: block; width: 36.8rem; height: 100%;}
#footer .util-wrap .select::before {content: ''; display: inline-block; position: absolute; top: 50%; right: 2.6rem; width: 7px; height: 12px; background: url('../images/common/ico_arrow_gray.png') no-repeat 92% center; margin-top: -6px; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); transition: 0.3s ease;}
#footer .util-wrap .select.active-this::before {-webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform:  rotate(-90deg);}
#footer .util-wrap .select .label {height: 100%; line-height: 7.6rem; padding: 0 2.3rem; border-left: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#footer .util-wrap .select .select-list {position: absolute; top: 7.6rem; left: 0; width: 100%; background: #fff; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1;}
#footer .util-wrap .select .select-list a {display: block; line-height: 6.4rem; padding: 0 2.3rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#footer .util-wrap .select .select-list a:hover {background: #df1e36; color: #fff;}
#footer .address-wrap * {font-size: 1.4rem; color: #000; line-height: 2rem}
#footer .address-wrap {padding: 10rem 0 6.2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#footer .address-wrap .company {width: 10.3rem; height: 3.3rem; background: url('../images/common/logo.png') no-repeat 0 0; text-indent: -9999px;}
#footer .address-wrap .award {width: 58px; height: 80px; position: absolute; right: 0; top: 0; background: url('../images/common/logo_award.png') no-repeat 0 0; text-indent: -9999px; background-size: cover;}
#footer .address-wrap .address {margin: 3rem 0 2.8rem;}
#footer .address-wrap .address * {font-weight: 100; letter-spacing: -0.02rem;}
#footer .address-wrap .contact {overflow: hidden;}
#footer .address-wrap .contact li {float: left; margin-right: 1.2rem;}
#footer .address-wrap .copyright {font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.2rem; letter-spacing: -0.02rem;}