@charset"utf-8";

/* Font */
@import url(font.css);

/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶사이즈
pc : 1200px
tablet : 980px ~
mobile : 767px ~ 320px

▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.
*/
/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
blockquote, body, button, code, dd, div, dl,dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, select, td, textarea, textarea, th, ul{margin:0;padding:0; font-family:'SCoreDream',sans-serif;}
dl, li, menu, ol, ul{list-style:none;}
body{font-family:'SCoreDream',sans-serif; font-size:16px; letter-spacing: -0.05rem; color:#000; font-weight:400; line-height: 1.6;}
dd, dt {line-height: 1.6;}
*, *:after, *:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
:focus{outline:0 !important}
iframe{border:none;width:100%}
a {font-family:'SCoreDream',sans-serif;color:inherit;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out}
a:active, a:focus, a:hover{text-decoration:none !important; color: inherit;}
img{max-width:100%}
textarea{max-width:100%;resize:none}
.hidden{font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
h1, h2, h3, h4, h5, h6 {line-height: 1.3;}

@media only screen and (min-width: 320px){
    body{overflow-x:hidden}
}

/* Parallax
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.parallax{background-position:0 0;background-repeat:no-repeat;background-size:100% auto;width:100%;background-size:cover;background-attachment:fixed}

/* Preloader
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.animationload{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999}
.loader{width:200px;height:200px;font-size:24px;text-align:center;position:absolute;left:50%;top:50%;background-image:url("/images/basic_resp/img/preloader.gif");background-repeat:no-repeat;background-position:center;margin:-100px 0 0 -100px}

/* Back to top (탑 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.back-to-top{width:60px;height:60px;position:fixed;bottom:40px;right:40px;display:none;text-align:center;z-index:10000;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:url(/images/kor05r-18-0411/common/btn_go_top.png) #f6f6f6 no-repeat center;box-shadow:3px 3px 3px rgba(0,0,0,.35);font-size:0;}
.back-to-top i{color:#fff;font-size:15px;display:block;line-height:33px}

@media only screen and (max-width: 767px){
    .back-to-top{width:50px;height:50px;right:20px;}
}
/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#wrapper {width: 100%; overflow: hidden;}
.inner {width: 100%; max-width: 1240px; padding-left: 20px; padding-right: 20px; margin: 0 auto;}
#header {position: fixed; left: 0; right: 0; top: 0; z-index: 1000; padding: 0 50px;}
#header:after {content: ''; display: block; height: 1px; background: rgba(255,255,255,0.1); position: absolute; left: 0; right: 0; bottom: 0;}
#header > .header_in {display: flex; align-items: center; justify-content: space-between;}
#L_SITE_LOGO a {display: block; width: 190px; height: 60px; text-indent: -9999px; background: url('/images/kor05r-18-0411/common/gnb_logo_wh.png')no-repeat center center / cover;}

@media only screen and (max-width: 1600px){
	#header {padding:0 30px;}
}

@media only screen and (max-width: 1400px){
	#L_SITE_LOGO a {width: 190px; height: 60px;}
}

@media only screen and (max-width: 1280px){
	#header {padding:0 20px;}
	#L_SITE_LOGO a {width: 190px; height: 60px;}
}

@media only screen and (max-width: 980px){
	#wrapper {padding-top: 50px;}
    #header {padding:0; background: #fff;}
	#L_SITE_LOGO {padding-left: 10px;}
    #L_SITE_LOGO a {width: 158px; height: 50px; background: url('/images/kor05r-18-0411/common/gnb_logo.png')no-repeat center center / 100% auto;}
}

@media only screen and (max-width: 767px){
    #L_SITE_LOGO a {}
}

/* Navigation (상단 메뉴)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#gnb {z-index:999;}
.gnb-bg, .m-menu-close, .m-menu-open {display:none}
.sub-menu {display: none;}
.navigation .menu-item {padding: 0 40px;}
.navigation .menu-item > a {font-weight: 500; height: 120px; font-size: 20px; color: #fff; display: flex; align-items: center; justify-content: center;}
.navigation .menu-item {position: relative;}

@media only screen and (min-width:1401px) and (max-width:1600px) {
	.navigation .menu-item {padding: 0 30px;}
}

@media only screen and (min-width:981px) and (max-width:1400px) {
	.navigation .menu-item {padding: 0 25px;}
	.navigation .menu-item > a {line-height: 80px; font-size: 18px;}
	.login-menu li a {font-size: 14px;}
}

@media only screen and (min-width:981px) and (max-width:1200px) {
	.navigation .menu-item {padding: 0 15px;}	
	.navigation .menu-item > a {font-size: 16px;}
	.sub-menu {min-width: 160px !important;}
    .sub-menu li a {padding: 10px; font-size: 14px;}
}


/* pc */
@media only screen and (min-width: 980px){
    .login-menu {position: absolute; right: 0; top: 50%; display: flex; align-items: center; -webkit-transform:translate(0, -50%); transform:translate(0, -50%);}
	.login-menu li {display: flex; align-items: center;}
	.login-menu li:after {content: ''; display: block; width: 1px; height: 12px; background: #cdcdcd; margin: 0 12px;}
	.login-menu li:last-child:after {display: none;}
	.login-menu li a {display: block; color: #585858; font-weight: 500;}
    .navigation {display: flex; justify-content: center;}
    .sub-menu {z-index: 999; position: absolute; top: 100%; left:50%; min-width: 200px; background: #fff; border: 1px solid #f1f1f1; border-top: 4px solid #25428e; -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0);}
    .sub-menu li {text-align: center;}
    .sub-menu li + li {border-top:1px solid #e2e2e2;}
    .sub-menu li:first-child {border-top: 0;}
    .sub-menu li a {display: block; padding: 12px 10px;}
    .sub-menu li a:active,
    .sub-menu li a:hover {color: #25428e; background: #fbfbfb;}
}

/* mobile */
@media only screen and (max-width: 980px){
    #gnb {display: none; position: fixed; top: 0; right: 0; padding: 80px 0 0; width: 100%; height: 100%; box-sizing: border-box; background:#25428e;}
    .m-menu-open{display:block;position:absolute;top:0;right:0;padding:15px 10px;width:48px;height:48px;cursor:pointer}
    .m-menu-open span{display:block;margin-top:6px;width:100%;height:2px;background:#25428e;}
    .m-menu-open span:first-child{margin-top:0}
    .m-menu-close{z-index:1000;display:block;position:absolute;top:0;right:0;width:48px;height:48px;cursor:pointer;padding:15px 11px}
    .m-menu-close span{position:relative;top:7px;left:0;display:block;width:25px;height:2px;background:#fff;transform:rotate(45deg)}
    .m-menu-close span:first-child{transform:rotate(-45deg);top:9px}

	.login-menu {display: flex; align-items: center; position: absolute; left: 40px; top: 30px;}
	.login-menu li {display: flex; align-items: center;}
	.login-menu li:after {content: ''; display: block; width: 1px; height: 12px; background: #cdcdcd; margin: 0 12px;}
	.login-menu li:last-child:after {display: none;}
	.login-menu li a {display: block; color: #fff; font-size: 12px;}

    .navigation {border-top:1px solid #25428e; height: 100%; padding: 0 40px; overflow-y: auto;}
    .navigation .menu-item{position: relative; display: block; text-align: left; padding: 0;}
    .navigation .menu-item > a{padding:0;width:100%; height:50px;font-size:17px;transition:none;border-bottom:1px solid #4463b6;color:#fff; justify-content: flex-start;}
    .navigation .menu-item.on > a{}
    .sub-menu {width:100%;background:#4463b6; margin:0; min-width:auto;}
    .sub-menu li {border-bottom:1px solid #25428e}
    .sub-menu li a{display:block;padding:0 20px;line-height:40px;font-size:14px;color:#fff}
    .sub-menu li a:before{display:inline-block;content:"";position:relative;top:-4px;margin-right:7px;width:5px;height:1px;background:#fff}
    .gnb-bg{z-index:888;display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}
}


/* main gnb */
@media only screen and (min-width: 980px){
	#header.scroll {background: #fff; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05);}
	#header.scroll #L_SITE_LOGO a {background: url('/images/kor05r-18-0411/common/gnb_logo.png')no-repeat center center / cover;}
	#header.scroll .navigation .menu-item > a {color: #000;}
	#header.scroll .login-menu li a {color: #585858;}
}


/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.btn{font-family:'NotoSansKR',sans-serif;text-transform:uppercase;border-radius:0;line-height:24px}
.btn:active, .btn:focus{outline:none;color:#fff}
.btn-custom{border-radius:3px;padding:0.8em 1.8em;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;text-transform:uppercase;background-color:#3d427c;border-color:#3d427c;color:#fff}
.btn-custom:focus, .btn-custom:hover{background-color:#36384e;border-color:#36384e;color:#fff}
.btn-custom-outline{border-radius:3px;padding:0.8em 1.8em;color:#fff;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;text-transform:uppercase;background-color:transparent;border-color:#fff}
.btn-custom-outline:focus, .btn-custom-outline:hover{color:#fff;background-color:rgba(255,255,255,.5)}
.btn-bar a{margin-right:10px}
.form-control{box-shadow:none;-webkit-box-shadow:none;border-radius:3px;height:38px}
.form-control:focus{outline:none;box-shadow:none;-webkit-box-shadow:none;border-color:#ab7763}

/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer {padding: 30px 0 90px; background: #222020;}
.ft-menu {display: flex; align-items: center;}
.ft-menu li {margin-right: 40px;}
.ft-menu li:last-child {margin-right: 0;}
.ft-menu li a {display: block; color: #fff;}
.ft-logo {display: block; width: 135px; margin-top: 50px;}
.ft-info {margin-top: 30px;}
.ft-info li {margin-bottom: 20px; display: flex; align-items: center;}
.ft-info li:last-child {margin-bottom: 0;}
.ft-info li strong {font-size: 12px; display: block; width: 80px; color: #fff; font-weight: 400;}
.ft-info li span {display: block; margin-right: 30px; color: rgba(255,255,255,0.5); font-weight: 300; font-size: 12px;}
.ft-info li span:last-child {margin-right: 0;}
.ft-copy {margin-top: 40px; color: rgba(255,255,255,0.3); font-weight: 300; font-size: 12px;}
.ft-copy br {display: none;}

@media only screen and (max-width:767px){
	#footer {padding: 30px 0 60px;}
	.ft-menu {justify-content: center;}
	.ft-menu li {margin-right: 20px;}
	.ft-menu li a {font-size: 12px;}
	.ft-logo {margin-left: auto; margin-right: auto; margin-top: 30px; -webkit-transform: translate(-10px, 0); transform: translate(-10px, 0);}
	.ft-info {text-align: center;}
	.ft-info li {display: block; margin-bottom: 10px;}
	.ft-info li strong {width: 100%; margin-bottom: 5px;}
	.ft-info li span {display: block; margin-right: 0; font-size: 11px;}
	.ft-copy {margin-top: 30px; font-size: 11px; text-align: center;}
	.ft-copy br {display: block;}
}


/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.main-contents {}
.main-video {position: relative;}
.main-video video {display: block; width: 100%;}
.main-video:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.1);}

.main-title {padding-top: 60px; padding-bottom: 50px;}
.main-title h3 {display: flex; align-items: center;}
.main-title h3 strong {font-size: 40px; font-weight: 600; margin-right: 20px;}
.main-title h3 span {font-size: 18px; font-weight: 400; color: #9c9c9c;}

.main-product {position: relative; padding-bottom: 130px;}
.main-product:before {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #f4f4f4;}
.main-product__list {display: flex; margin: 0 -8px; position: relative;}
.main-product__list li {padding: 0 8px; width: 33.3333%;}
.main-product__list li:nth-child(even) {-webkit-transform:translate(0, 60px); transform:translate(0, 60px);}
.main-product__list li a {display: block; border: solid 1px #dcdcdc; padding: 30px 0 50px; background: #fff; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
.main-product__list li a:hover {-webkit-transform:translate(0, -10px); transform:translate(0, -10px); -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1); box-shadow: 0 1px 10px rgba(0,0,0,.1);}
.main-product__list li a img {display: block; width: 100%; margin: 0 auto;}
.main-product__list li a h5 {margin-top: 20px; text-align: center; font-size: 30px; font-weight: 600;}

.main-bottom {padding: 50px 0;}
.main-half {display: flex; align-items: center;}
.main-cs {width: 50%;}
.main-cs dt {display: flex; align-items: center;}
.main-cs dt:before {content: ''; display: block; width: 93px; height: 80px; margin-right: 25px; background: url('/images/kor05r-18-0411/main/main_cs.png')no-repeat center center / cover;}
.main-cs dt p {font-size: 22px; font-weight: 500;}
.main-cs dt h5 {font-size: 45px; font-weight: 800; color: #304c99;}
.main-cs dd {margin-top: 60px;}
.main-cs dd ul li {margin-bottom: 10px; display: flex; align-items: center; font-size: 18px;}
.main-cs dd ul li:last-child {margin-bottom: 0;}
.main-cs dd ul li:before {content: ''; flex-shrink: 0; display: block; width: 30px; height: 30px; margin-right: 20px; -webkit-border-radius: 50%; border-radius: 50%;}
.main-cs dd ul li:nth-child(1):before {background: #56a949 url('/images/kor05r-18-0411/main/main_cs_mail.png')no-repeat center center / 22px auto;}
.main-cs dd ul li:nth-child(2):before {background: #56a949 url('/images/kor05r-18-0411/main/main_cs_time.png')no-repeat center center / 22px auto;}
.main-map {width: 50%; height: 320px;}
.main-map iframe {display: block; width: 100%; height: 100%;}

@media screen and (max-width:1280px){
	.main-product__list li a h5 {margin-top: 10px; font-size: 24px;}
	.main-cs dt p {font-size: 18px;}
	.main-cs dt h5 {font-size: 34px;}
	.main-cs dd {margin-top: 30px;}
	.main-cs dd ul li {font-size: 16px;}
}

@media screen and (max-width:980px){
	.main-title h3 strong {font-size: 34px; margin-right: 10px;}
	.main-title h3 span {font-size: 16px;}
	.main-product__list li a h5 {font-size: 20px;}
	.main-cs dt:before {width: 72px; height: 62px; margin-right: 15px;}
	.main-cs dt p {font-size: 16px;}
	.main-cs dt h5 {font-size: 26px;}
	.main-cs dd {margin-top: 20px;}
	.main-cs dd ul li {font-size: 14px;}
	.main-cs dd ul li:before {width: 24px; height: 24px; margin-right: 10px; background-size: 16px auto !important;}
}

@media screen and (max-width:767px){
	.main-title {padding-top: 40px; padding-bottom: 20px;}
	.main-title h3 strong {font-size: 26px;}
	.main-title h3 span {font-size: 13px;}
	.main-product {padding-bottom: 40px;}
	.main-product__list {margin: 0; display: block;}
	.main-product__list li {padding: 0; margin-bottom: 20px; width: 100%;}
	.main-product__list li:last-child {margin-bottom: 0;}
	.main-product__list li:nth-child(even) {-webkit-transform:translate(0, 0); transform:translate(0, 0);}
	.main-product__list li a {padding: 10px 0 30px;}
	.main-product__list li a img {max-width: 75%;}
	.main-product__list li a h5 {margin-top: 0; font-size: 18px;}
	.main-bottom {padding: 40px 0 0;}
	.main-half {display: block;}
	.main-cs {width: 100%; padding-bottom: 40px; text-align: center;}
	.main-cs dt {text-align: left; display: inline-flex;}
	.main-cs dt:before {width: 60px; height: 52px;}
	.main-cs dt p {font-size: 14px;}
	.main-cs dt h5 {font-size: 22px;}
	.main-cs dd {margin-top: 10px;}
	.main-cs dd {text-align: left; display: inline-block;}
	.main-cs dd ul li {margin-bottom: 3px; font-size: 13px;}
	.main-map {width: auto; margin: 0 -20px; height: 240px;}
}