@import url('reset.css');
@import url('//fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&family=Noto+Sans+KR:wght@300;400;700;900&display=swap');

@font-face {
     font-family: 'S-CoreDream-4Regular';
     src: url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

/*
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Montserrat', sans-serif;
*/


/* LAYOUT */
.container {width:1200px; margin:0 auto;}
.container.sm {width:1000px;margin:0 auto;}
hr.hr {border:none; border-top:1px solid #e4e4e4; margin: 0;}
.mg27 {margin: 27px 0;}
body {padding-top:102px;}
.sec {padding: 108px 0;}
.pd30 {padding:30px;}
.pd50 {padding:50px;}
.mgb20 {margin-bottom: 20px;}
.mgb27 {margin-bottom: 27px;}
.mgb35 {margin-bottom: 35px;}
.mgb54 {margin-bottom: 54px;}
.mgr54 {margin-right:54px;}
.mgt54 {margin-top: 54px;}
.lh27 {line-height: 27px;}

.box {position:relative;}
.box:before, .box:after {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;}

/* FONT */
h1, h2, h3, h4, h5, h6, p, span, em, li, a, input, label, td, th,address,button, textarea {font-family: 'Noto Sans KR', sans-serif; color:#343434;}
.bold {font-weight: bold;}
.blue {color:#3F66B0;}
.section-tt {font-size: 30px; font-weight: bold; line-height: 35px; margin-bottom: 37px; text-transform:capitalize;}
.section-tt.white, .section-desc.white {color:#fff;}
.section-desc {font-size: 20px; line-height: 35px; text-transform:capitalize;}
.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}
.bg_typo {font-size: 96px; color:#f6f6f6; text-transform: uppercase; font-weight: 800; text-align: right; display: inline-block; font-family: 'Montserrat', sans-serif; }
.bg_typo.service {position: absolute; top: -64px; right: -6px; z-index: -1;text-align: right; }
.sub-main-tt {font-size: 40px; font-weight: bold; line-height: 70px; margin-bottom: 27px;}
.f_gray {color:#888;}
/* 占쎌뵥占쎌뒠�뤃占� */
.sub-tt {font-size: 35px; line-height: 55px; font-weight: 500; width:700px; text-align: center; position:relative; margin:0 auto 54px; letter-spacing: -0.05em;}
.sub-tt:before {content:""; display: inline-block; position:absolute; left:0; top:0; background-image: url("../img/sprites.png"); background-repeat:no-repeat; background-position:-110px 0; width:48px; height:55px; }
.sub-tt:after {content:""; display: inline-block; position:absolute; right:0; top:0; background-image: url("../img/sprites.png"); background-repeat:no-repeat; background-position:-180px 0; width:48px; height:55px;}

/* COLOR */
.gradient {background: linear-gradient(200deg, #323883 1%, #3F66B0 83%); position:relative;}
.dashring:after {content:""; position:absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: 50%; border: 1px dashed #9a9a9a;}
.bg-gray {background:#F5F5F5;}
.bg-darkgray {background:rgba(0,0,0,0.5);}

/* HOVER */
.hover_shadow {transition: 0.3s;}
.hover_shadow:hover {box-shadow: 4px 4px 15px rgba(20,40,98,0.3), -4px -4px 15px rgba(20,40,98,0.3);}
.hover_scale:hover {transform:scale(1.05);}

/* FORM */
.select, .input {border:1px solid #ccc; font-size: 16px; height:35px; padding:0 15px; box-sizing: border-box;  }
.vtc-md {vertical-align: middle; }
.height50 {height:50px; line-height: 50px;}
.select {min-width:100px;}
.input.size-sm {width:100px;}
.input.size-md {width:350px;}
.input.size-lg {width:550px;}
.input::placeholder {color:#cacaca;}
.textarea { vertical-align: middle;  border:1px solid #ccc; resize: none; margin: 10px 0; line-height: 27px; font-size: 16px; padding:10px;}
.req {display: inline-block;}
.req:before { content: "*  "; color:#f44336;}

/* TABLE */
.table {font-size: 16px; border-top:1px solid #333; border-bottom:1px solid #888; width:100%; text-align: center;}
.table th, .table td {line-height: 27px; padding:15px; }
.table th {background:#F5F5F5; }
.table tbody tr {border-bottom:1px solid #ccc;}
.table tbody tr:last-child {border-bottom:none;}

.table.list th,.table.list td {border-right:1px solid #ccc;}
.table.list th:last-child,.table.list td:last-child {border-right:none;}
.table.view td {border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align: left;}
.table.view td:last-of-type {border-right:none; }
.table.view tr:last-child td {border-bottom:none;}
.table.view td.tac {text-align: center;}
.content-area {min-height: 500px;}
.page-wrap {min-width: 300px; max-width: 500px; margin: 27px auto;}
.page-wrap .material {color:#666;}
.page-wrap .arrow {vertical-align: middle;}
.ptext a, .ptext .active {display: inline-block; min-width: 30px; height: 30px; line-height: 30px; border: 1px solid #ccc; margin: 0 2px;}
.ptext {text-align: center; font-size: 16px;}
.ptext .active {background: #f5f5f5; border: 1px solid #444;}

/* TAB */
.tab-wrap {border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin: 27px 0; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center;}
.tab-wrap button {line-height: 40px; display: inline-block; width:300px; position: relative; font-size: 17px; font-weight: bold;}
.tab-wrap button:after {content:""; position: absolute; bottom: 0; left: 0; right: 0; height:2px; background: #3F66B0; display: none;}
.tab-wrap button.active:after {display: block;}

/* BUTTON */
.btn-wrap {margin: 27px 0;}
a.link {display: inline-block; border:1px solid #444; color:#444; min-width:200px; line-height: 35px; text-align: center; transition:0.3s; padding:5px;margin: 0 10px; font-size: 18px;}
a.link:hover {background:#f5f5f5;}
a.link.white {border:1px solid #fff; color:#fff;}
a.link.white:hover {background:rgba(255,255,255,0.2);}
a.button {display: inline-block; line-height: 50px; box-sizing: border-box; vertical-align: top;}
.button {font-size: 17px; text-align: center; min-width:150px; height:50px; transition:0.3s; }
.button.blue {background:#3F66B0; color:#fff;}
.button.blue:hover {background:#2e559f;}
.button.white {background: #fff; border:1px solid #ccc;}
.button.white:hover {background:#f5f5f5;}

/* TAB AREA */
.tab-area {border-top:1px solid #ddd; border-bottom:1px solid #ddd; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; align-items: center;}
.tab-area .tab-button {width:400px; height:60px; display: inline-block; line-height: 60px; font-size: 22px; position:relative; }
.tab-area .tab-button.active:after {content:""; position:absolute; bottom: 0; left: 0; height: 3px; background:#5779BA; width:100%; display: block;}

/* HEADER */
header {position:fixed; top: 0; left: 0; right: 0; background:#fff; z-index: 500;}
.head-top {overflow: hidden; height:30px; border-bottom:1px solid #ccc;}
.head-top ul {overflow: hidden; text-align: right;}
.head-top ul li {float:right; }
.head-top ul li a {padding:0 15px; font-size: 14px; line-height: 30px;}
.head-top ul li a:hover {color:#3F66B0;}
.head-bottom {border-bottom:1px solid #ccc; height:70px; transition: 0.3s; background: linear-gradient(180deg, #fff 70px, #f5f5f5 70px);}
.head-bottom.down{height:394px;}
.head-bottom .container {display: -webkit-flex; display: -ms-flex; display: flex;    justify-content: space-between; align-items: flex-start; height:70px;}
.head-bottom-right {display: -webkit-flex; display: -ms-flex; display: flex; align-items: center;}
.sub-menu > ul {display: -webkit-flex; display: -ms-flex; display: flex; align-items: center;}
.sub-menu > ul > li {width:185px;}
.sub-menu > ul > li:hover ul {background: #fff;}
.sub-menu > ul > li ul {border-right:1px solid #e4e4e4;}
.sub-menu > ul > li:first-child ul {border-left:1px solid #e4e4e4;}
.sub-menu a { line-height: 54px;}
.sub-menu .depth1 {display: block; text-align: center; font-size: 17px; line-height: 70px; position:relative; display: flex; align-items: center; justify-content: center;}
.sub-menu .depth1:after {content:""; width:0; height:2px; background:#3F66B0; display: inline-block; z-index: 2; transition: width 0.3s; position: absolute; bottom: 0; left: 0;}
.sub-menu li:hover .depth1 {color:#5779BA; font-weight: bold;}
.sub-menu li:hover .depth1:after {width:100%; }
button.sitemap {width:54px; height:54px; position: relative;}
button.sitemap span {width:28px; height:2px; position: absolute; left:13px; background:#fff; top:15px; }
button.sitemap span:nth-child(2) {top:27px;}
button.sitemap span:nth-child(3) {top:39px;}
.depth2 {position: absolute; top:101px; height:0; overflow: hidden; transition: height 0.3s;}
.depth2.down {height:324px;}
.depth2 li {text-align: center;}
.depth2 li a {width:185px; display: inline-block; transition:color 0.3s;}
.depth2 li a:hover {color:#3F66B0; background:#f9f9f9 ;}

/* FOOTER */
footer {border-top:1px solid #ccc; }
.footer-top {border-bottom:1px solid #ccc;}
.footer-top .container {display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; justify-content: space-between; height:50px;}
.footer-top-left a {color:#999; padding:0 15px; display: inline-block;}
.footer-bottom {display: -webkit-flex; display: -ms-flex; display: flex; padding:27px 0;}
.footer-bottom-left {width:300px; text-align: center;}
.footer-bottom address,.copyright {line-height: 30px; font-size: 15px; color:#999;}

#gotop {position: fixed; bottom:245px; right: 25px; width:54px; height:54px; display: none;}
#gotop button {text-indent: -9999em; width:54px; height:54px; background-image: url("../img/sprites.png"); background-repeat: no-repeat; background-position:-44px -5px; }

/* SUB-HEADER-TOP */
#sub-header:before {background-size:100%;}
#sub-header {height:400px; display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; position: relative;}
#sub-header:after {background: rgba(0,0,0,0.4);}
#sub-header.intro:before {background: url("../img/sub1_top_bg.png") no-repeat center 25%;}
#sub-header.business:before {background: url("../img/sub3_top_bg.png") no-repeat center 52%;}
#sub-header.cafeplan:before {background: url("../img/sub2_top_bg.png") no-repeat center 56%;}
#sub-header.center:before {background: url("../img/main_bg7.png") no-repeat center 93%;}
#sub-header.etc:before {background: url("../img/sub5_top_bg.jpg") no-repeat center 25%;}
#sub-header.recruit:before {background: url("../img/sub6_top_bg.png") no-repeat center 52%;}

#sub-header.wave:before {animation:subWave 3s forwards;}
#sub-header h2 {font-size: 50px; font-weight: bold; color:#fff; margin-bottom: 27px;}
#sub-header p {font-size: 18px; color:#fff;}
.root {position: absolute; bottom: 0; left: 0; right: 0;  background: rgba(255,255,255,0.2);  }
.root .container {display: -webkit-flex; display: -ms-flex; display: flex; justify-content: flex-end; align-items: center; height:40px;}
.root a {display: inline-block; margin-right: 40px; color:#fff; position: relative;}
.root a:last-child {margin-right: 0;}
.root a:after {content:""; display: inline-block; width:20px; height:20px; position: absolute; right: -34px; top:0px; background: url("../img/sprites.png"); background-position: 0 -34px;}
.root a:last-child:after {display: none;}

#sub-main .desc {word-break: keep-all;}
#sub-main .img-desc {text-indent: -99999em; }


@keyframes slideWave {
    0% { background-size: auto 520px;}
    100% {background-size: auto 490px;}
}
@keyframes subWave {
    0% { background-size: 120%;}
    100% {background-size: 100%;}
}

@keyframes slideSvgDash {
    100% { stroke-dashoffset : 0;}
}

@keyframes showLeft {
    0% {transform: translateX(-50px); opacity: 0;}
    100% {transform : translateX(0); opacity: 1;}
}

@keyframes showBottom {
    0% {transform: translateY(100px); opacity: 0;}
    100% {transform : translateY(0); opacity: 1;}
}

@keyframes showLeftFast {
    0% {transform: translateX(1000px); opacity: 0;}
    100% {transform : translateX(0); opacity: 1;}
}