@charset "UTF-8";

body.fixed {position: fixed; width:100%; height: 100%; overflow: hidden;}

/* Header wrap layout & display */
.header {position: fixed; top: 0; z-index: 9999; width: 100%; border-bottom: 1px solid #ddd; background-color: #fff; overflow: hidden; transform: translateY(0); transition: .2s;}
.header.alpha {background-color: transparent; border-bottom: none;}
.header .inner {position: relative; display: flex; justify-content: center; height: 100px; margin: 0 auto; transition: height .2s ease-in-out;}
.header.up {top: 0; transform: translateY(-100%); transition: .5s;}
.header .header-logo {position:absolute; z-index: 12; top: 38px; left: 30px;}
.header .header-logo a {display: block; width: 180px; height: 28px; background-image: url('../images/common/ci-color.svg'); background-repeat: no-repeat;}
.header .header-logo.white a {background-image: url('../images/common/ci-white.svg'); background-repeat: no-repeat;}
.header .header-logo a span {display: none;}
.header .side-navigation {position: absolute; top:36px; right: 30px;}
.header .side-navigation a {font-size: 1rem; color: #121212; margin-right: 20px;}
.header .side-navigation a:last-child {margin-right: 0;}
.header .side-navigation a::after {display: inline-block; content: ''; font-family: 'Line Awesome Free'; font-weight: 900; margin: 0 0 0 8px;}
.header .side-navigation a.contact::after {content: '\f041';}
.header .side-navigation a.sitemap::after {content: '\f0c9';}
.header .main-navigation .main-list {display: flex;}
.header .main-navigation .main-list .main-item {padding: 0 40px;}
.header .main-navigation .main-list > li:first-child {padding-left: 0;}
.header .main-navigation .main-list > li:last-child {padding-right: 0;}
.header .main-navigation .main-list .main-item > a {position: relative; display: flex; align-items: center; width: 140px; height: 100px; font-size: 18px; font-weight: 600; color: #121212;}
.header .main-navigation .main-list .main-item > a::after {position: absolute; content:''; bottom: 15px; left: 0; width: 0; height: 2px; background: #121212; transition: width .2s ease-in-out;}
.header .main-navigation .main-list .main-item:hover > a::after {width: 100%; background: #121212;}
.header .sub-navigation {margin-top: 0;}
.header .sub-navigation .sub-list .sub-item {padding: 6px 0;}
.header .sub-navigation .sub-list .sub-item > a {color: #121212; font-size: 16px; font-weight: 500; line-height: 1;}
.header .sub-navigation .sub-list .sub-item > a:hover {color: #0154c4; text-decoration: underline;}
	/* main mode */
	.header.main-mode {background-color: transparent; border-bottom: 0;}	
	.header.main-mode .header-logo a {background-image: url('../images/common/ci-white.svg');}
	.header.main-mode .header-logo a.original {background-image: url('../images/common/ci-color.svg');}
	.header.main-mode .side-navigation a {color: #fff;}
	.header.main-mode .main-navigation .main-list .main-item > a {color: #fff; }
	.header.main-mode .main-navigation .main-list .main-item > a::after {background-color: #121212;}
	.header.main-mode .sub-list .sub-item > a {color: #fff;}
	.header.main-mode .inner.white {background-color: #fff; transition: all .2s ease;}
	.header.main-mode .inner {background: transparent; transition: all .2s ease;}
	.header.main-mode .main-navigation:hover .main-list .main-item > a {color: #121212;}
	.header.main-mode .main-navigation:hover .sub-list .sub-item > a {color: #121212;} 	
	.header.main-mode.reverse .header-logo a {background-image: url('../images/common/ci-color.svg');}
	.header.main-mode .side-navigation a.dark,
	.header.main-mode.reverse .main-navigation .main-list .main-item > a,
	.header.main-mode.reverse .side-navigation a {color: #121212;}
	/* sitemap on */
	.header.sitemap-on {background: none;}
	.header.sitemap-on .header-logo {}
	.header.sitemap-on .main-navigation,
	.header.sitemap-on .side-navigation .contact {display: none;}
	.header.sitemap-on .side-navigation a.sitemap::after {content: '\f00d';}

/* ========================================================
Container display 설정
======================================================== */
.container-wrap .inner {max-width: 1600px; width: 100%; height: 100%; margin: 0 auto;}

/* top navigation */
.pageTop {position: fixed; z-index: 8; bottom: 40px; right: 40px; opacity: 0; visibility: hidden; transition:all .5s ease;}
.pageTop.active {bottom: 60px; opacity: 1; visibility: visible;}
.pageTop a {display:block; width:68px; height:68px; font-size: 28px; color:#fff; line-height:1.25; text-align: center; padding: 8px 0 0 0; border-radius: 8px; background-color: #2055c9;}
.pageTop a::before {display: block; content: '\f062'; font-family: 'Line Awesome Free'; font-weight: 900;}
.pageTop a span {display: block; font-size: 14px; font-weight: 700;}

/* ========================================================
Footer display 설정
======================================================== */
.footer {width:100%; padding: 100px 0;}
.footer .inner {width: 100%; max-width: 1600px; margin:0 auto;}
/* footer top */	
.footer .footer-top {display: flex; align-items: flex-start;}
.footer .footer-top .footer-left-wrap,
.footer .footer-top .footer-right-wrap {width: 50%;}
	/* top-left position */
	.footer .footer-left-wrap .footer-slogan {font-size: 40px; font-weight: 800; line-height: 1.15;}
	.footer .footer-left-wrap .footer-slogan img {height: 44px;}
	.footer .footer-left-wrap .footer-address {margin-top: 40px;}
	.footer .footer-left-wrap .footer-address .footer-address-info {display: flex; font-size: 1rem; font-weight: 300; padding-bottom: 4px;}
	.footer .footer-left-wrap .footer-address .footer-address-info p {display: flex; align-items: center; margin-right: 16px;}
	.footer .footer-left-wrap .footer-address .footer-address-info p:after {display: block; content: ''; width: 1px; height: 12px; margin-left: 16px; background-color: #ccc; opacity: .25;}
	.footer .footer-left-wrap .footer-address .footer-address-info p:last-child:after {display: none;}
	.footer .footer-left-wrap .footer-center {display: flex;  align-items: center; font-size: 18px; margin-top: 40px;}
	.footer .footer-left-wrap .footer-center dt {display: flex; align-items: center; font-size: 14px; font-weight: 500; padding: 4px 20px 4px 10px; background-color: #eaeaea; border-radius: 50px;}
	.footer .footer-left-wrap .footer-center dt i {display: inline-block; padding: 6px; margin-right: 8px; background-color: #fff; border-radius: 50px;}
	.footer .footer-left-wrap .footer-center dd {display: none;}
	/*.footer .footer-left-wrap .footer-center dd {font-size: 20px; font-weight: 700; margin-left: 12px;}*/
	.footer .footer-left-wrap .footer-center dd span {font-size: 14px; font-weight: 400; color: #333;}
	.footer .footer-left-wrap .footer-menu {display: flex; align-items: center; margin-top: 40px;}
	.footer .footer-left-wrap .footer-menu a {margin-right: 8px;}
	.footer .footer-left-wrap .footer-menu .private {font-size: 1rem; font-weight: 500; color: #121212;}
	.footer .footer-left-wrap .footer-menu .private::after {display: block; content: ''; width: 100%; height: 1px; margin-top: 2px; background-color: #777;}
	.footer .footer-left-wrap .footer-menu .footer-menu-sns {display: flex; align-items: center; margin-left: 40px;}
	/* top-right position */
	.footer .footer-right-wrap h3 {font-size: 20px; font-weight: 700; margin-top: 90px;}
	.footer .footer-right-wrap .footer-contact-list {margin-top: 40px;}
	.footer .footer-right-wrap .footer-contact-list li {padding-top: 12px;}
	.footer .footer-right-wrap .footer-contact-list li:first-child {padding-top: 0;}
	.footer .footer-right-wrap .footer-contact-list dl {display: flex; font-size: 1rem;}
	.footer .footer-right-wrap .footer-contact-list dl dt {width: 120px; font-size: 1rem; font-weight: 600;}
	.footer .footer-right-wrap .footer-contact-list dl dt:before {display: inline-block; content: '\f041'; font-family: 'Line Awesome Free'; font-weight: 900; margin-right: 8px;}
	.footer .footer-right-wrap .footer-contact-list dl dd {font-size: 1rem; font-weight: 300;}
/* footer bottom */	
.footer .footer-bottom {display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 40px; padding-top: 40px; border-top: 1px solid #ddd;}
.footer .footer-bottom .footer-ci {width: 120px;}
.footer .footer-bottom .copyright {font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; color: #999;}
/* footer dark-mode */
.footer.dark-mode {color: #fff; background-color: #000;}
.footer.dark-mode .footer-left-wrap .footer-slogan {color: #2055c9;}
.footer.dark-mode .footer-left-wrap .footer-center dt {background-color: #333;}
.footer.dark-mode .footer-left-wrap .footer-center dt i {background-color: #000;}
.footer.dark-mode .footer-left-wrap .footer-center dd span {font-size: 14px; font-weight: 400; color: #777;}
.footer.dark-mode .footer-left-wrap .footer-menu .private,
.footer.dark-mode .footer-left-wrap .footer-menu .selim-admin {color: #fff;}
.footer.dark-mode .footer-right-wrap h3 {font-size: 20px; font-weight: 700; color: #333;}
.footer.dark-mode .footer-right-wrap .footer-contact-list dl dt {font-weight: 400; color: #aeaeae;}
.footer.dark-mode .footer-right-wrap .footer-contact-list dl dd {font-weight: 300; color: #fff;}
.footer.dark-mode .footer-bottom {border-top: 1px solid #333;}
.footer.dark-mode .footer-bottom .footer-ci {color: #fff;}
.footer.dark-mode .footer-bottom .copyright {color: #555;}