@charset "utf-8";

.header-container { position: absolute; }


/* 공통 타이틀 */
.box-wrap { padding: 70px 0 80px; }
.box-wrap .title-area { text-align: center; margin-bottom: 55px; }
.box-wrap .title-area h4 { font-size: 4.5rem; font-weight: 900; color: var(--dark-color); font-family: 'Rajdhani'; }
.box-wrap .title-area p { font-size: 1.4rem; color: #999; font-weight: 400; display: block; margin-top: 10px; line-height: 21px; }

@media (max-width: 1200px) {
	.box-wrap .title-area h4 { font-size: 3.5rem; }
}

@media (max-width: 550px) {
	.box-wrap .title-area h4 { font-size: 3rem; }
	.box-wrap .title-area p { font-size: 1.2rem; }
	.box-wrap .title-area p br {display: none;}
}

/* 메인 비주얼 */
.main-visual-wrap { position: relative; overflow: hidden; height:0; padding-bottom: 20%; }
.main-visual-wrap .main-visual { height: 100%; width: 100%; position: relative; }
.main-visual-wrap .message { position: relative; text-align: center; padding: 10% 0 0; color: #fff; z-index: 2; }
.main-visual-wrap .message h2 { font-size: 5rem; display: block; text-shadow: 0 0 8px rgba(0,0,0,0.1); font-weight: 900; font-family: 'Rajdhani'; }

.main-visual-wrap .bg-slide { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
.main-visual-wrap .bg-slide .item-group { position: relative; bottom: 450%; float: left; width: calc(33.33% - 60px); margin: 0 30px; animation: slibeBgTop 60s linear infinite alternate; }
.main-visual-wrap .bg-slide .item-group:nth-child(2) { top: 0; animation: slibeBg 60s linear infinite alternate; }
.main-visual-wrap .bg-slide .item-group .item { position: relative; width: 100%; height: 0; padding-bottom: 50%; margin: 60px 0; }
.main-visual-wrap .bg-slide .item-group .item > img { width: 100%; height: auto; opacity: .3; }
@keyframes slibeBg {
	0% { top: 0; }
	100% { top: -400%; }
}
@keyframes slibeBgTop {
	0% { bottom: 450%; }
	100% { bottom: 0; }
}


.main-visual-wrap.visual-item .bg-item {position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 1;}
.main-visual-wrap.visual-item:after { content: ''; display: block; position: absolute; bottom:0; left:0; width: 100%; height: 100%; background: rgba(2,3,23,0.5); backdrop-filter: blur(25px); z-index: 1;}
.main-visual-wrap.visual-item .bg-item .item { border-radius: 50%; position: absolute; }
.main-visual-wrap.visual-item .bg-item .item.circle-fill { width: 500px; height: 500px; background: var(--main-blue); }
.main-visual-wrap.visual-item .bg-item .item.circle-outline {width: 330px; height: 330px; border: 60px solid var(--main-green);}
.main-visual-wrap.visual-item .bg-item .item.circle-sm-blue { width: 90px; height: 90px; background: var(--main-blue); }
.main-visual-wrap.visual-item .bg-item .item.circle-sm-white { width: 100px; height: 100px; background: #fff; }

/* visual 1 */
.main-visual-wrap.visual-item .bg-item .item.circle-fill { left: 130px; top: 125px; animation: topLeft 2s linear infinite alternate; }
.main-visual-wrap.visual-item .bg-item .item.circle-outline { right: 400px; top: 220px; animation: topRight 2s linear infinite alternate; }
.main-visual-wrap.visual-item .bg-item .item.circle-sm-blue { right: 195px; top: calc(50% - 45px); animation: toTop 2s linear infinite alternate; }
.main-visual-wrap.visual-item .bg-item .item.circle-sm-white { left: 40%; animation: topBottom 2s linear infinite alternate; }
@keyframes toTop {
	0% { top: 260px; }
	100% { top: 240px; }
}
@keyframes topBottom {
	0% { top: 50px; }
	100% { top: 80px; }
}
@keyframes topLeft {
	0% { left: 200px; }
	100% { left: 250px; }
}
@keyframes topRight {
	0% { right: 400px; }
	100% { right: 450px; }
}


@media (max-width: 1100px) {
	.main-visual-wrap.visual-item .bg-item .item { animation: none !important; }
	.main-visual-wrap.visual-item .bg-item .item.circle-fill { width: 300px; height: 300px; left: 100px; }
	.main-visual-wrap.visual-item .bg-item .item.circle-outline { width: 200px; height: 200px; border-width: 40px; top: 100px; right: 200px; }
}
@media (max-width: 768px) {
	.main-visual-wrap.visual-item .bg-item .item.circle-outline { width: 100px; height: 100px; border-width: 20px; right: 100px; }
}
@media (max-width: 425px) {
	.main-visual-wrap.visual-item .bg-item .item.circle-fill { width: 200px; height: 200px; left: 0; }
	.main-visual-wrap.visual-item .bg-item .item.circle-outline { right: 0; }
	.main-visual-wrap.visual-item .bg-item .item.circle-sm-white { left: 125px; bottom: 45%; }
	.main-visual-wrap.visual-item .bg-item .item.circle-sm-blue { display: none; }
}


.main-visual-wrap .intro-down-btn { border: 1px solid #fff; position: absolute; z-index: 2; top: 80px; right: 80px; color: #fff; border-radius: 5px; height: 50px; padding: 0 15px; line-height: 48px; transition: background .25s ease, border-color .25s ease; box-shadow: 0 3px 3px 0px rgba(0,0,0,0.1); text-shadow: 0 0 3px rgba(0,0,0,0.3); }
.main-visual-wrap .intro-down-btn img { width: 15px; margin: 15px 0 0 25px; }
.main-visual-wrap .intro-down-btn:hover { background: #0056D7; border-color: #0056D7; }

.main-visual-wrap .scroll-alert { width: 134px; height: 120px; position: absolute; left: 50%; margin-left: -67px; bottom: 0px; text-align: center; z-index: 4; }
.main-visual-wrap .scroll-alert .scroll-circle { background: #0056D7; border-radius: 50%; width: 60px; height: 60px; text-align: center; display: inline-block; margin-bottom: 15px; }
.main-visual-wrap .scroll-alert .scroll-circle img { width: 24px; animation: scrolling 1.5s ease-in infinite; }
.main-visual-wrap .scroll-alert p { color: #fff; }

@keyframes scrolling { 
	0% { opacity: 0; margin-top: 10px; }
	40% { opcitiy: .5; }
	100% { opacity: 1; margin-top: 25px; }
}
@media all and (max-width: 1100px)
{
	.main-visual-wrap { padding-bottom: 26%; }
	.main-visual-wrap .message { padding-top: 12%; }
	.main-visual-wrap .message h2 { font-size: 3.5rem; margin-bottom:10px; }
	.main-visual-wrap .message p { font-size: 1.6rem; padding: 0 10px; }
	.main-visual-wrap .intro-down-btn { top: 20px; right: 20px; transition: top .5s ease, right .5s ease; height: 40px; line-height: 38px; }
	.main-visual-wrap .intro-down-btn img { margin: 11px 0 0 8px; }
	.box-wrap .title-area p { padding: 0 30px; }
	.main-visual-wrap .scroll-alert { bottom:0; left: 50%; margin-left: -67px; }
	.main-visual-wrap .scroll-alert .scroll-circle { width: 45px; height: 45px; }
	.main-visual-wrap .scroll-alert .scroll-circle img { width: 18px; animation: scrolling-02 1.5s ease-in infinite; }
	
	.main-visual-wrap .bg-slide .item-group { animation: none; top: 0; width: calc(33.33% - 30px); margin: 0 15px; }
	.main-visual-wrap .bg-slide .item-group:nth-child(2) { animation: none; top: -25%; }
	.main-visual-wrap .bg-slide .item-group .item { margin: 15px 0; }
}
@media all and (max-width: 768px) 
{
	.main-visual-wrap { padding-bottom: 30%; }
	.main-visual-wrap .message { padding-top: 14%; }
}
@media all and (max-width: 580px) 
{
	.main-visual-wrap { padding-bottom: 0; height: 230px; }
	.main-visual-wrap .message { padding-top: 110px; }
}
@media all and (max-width: 420px)
{
	.main-visual-wrap .main-visual .message-box { width: 100%; height: 100%; bottom: 0; background: rgba(0,52,176,0.80); transition: all .5s ease; padding: 150px 30px 0; box-shadow: none; text-align: center; }
	.main-visual-wrap .main-visual .message-box .view-more-btn { margin-top: 20px; }
}
@keyframes scrolling-02 { 
	0% { opacity: 0; margin-top: 7px; }
	30% { opcitiy: .5; }
	100% { opacity: 1; margin-top: 18px; }
}

@media all and (max-width: 780px)
{
	.box-wrap { padding: 50px 0 60px; }
	.box-wrap .title-area { text-align: center; margin-bottom: 50px; }
	.box-wrap.business-wrap { padding-top: 50px; }
	.box-wrap.business-wrap .content-area ul li { padding: 0 30px; }
	.box-wrap.business-wrap .content-area ul li .view-more-btn { height: 40px; line-height: 38px; width: 150px; }
}

/* 서브 네비 */
.content-navi { height: 65px; background: var(--main-blue); }
.content-navi .depth-box { float: left; height: 100%; position: relative; }
.content-navi .depth-box:after { position: absolute; content: ''; width: 1px; height: 100%; background: #0961E3; right: 0; top: 0; }
.content-navi .depth-box .current-menu { height: 100%; line-height: 65px; color: #fff; font-weight: bold; font-size: 1.4rem; padding: 0 50px 0 30px; min-width: 200px; cursor: pointer; transition: background .25s ease; position: relative; }
.content-navi .depth-box .current-menu:hover { background: #1265E1; }
.content-navi .depth-box .current-menu:after { background: url("../../img/common/heavy_arrow_down.svg"); position: absolute; content: ''; width: 13px; height: 13px; right: 25px; top: 50%; margin-top: -7.5px; }
.content-navi .depth-box.en .current-menu { font-size: 1.8rem; font-family: 'Rajdhani';}
.content-navi .depth-box .menu-list { background: #0A61E4; position: relative; display: none; }
.content-navi .depth-box:hover .menu-list { display: block; }
.content-navi .depth-box .menu-list.select { display: block; }
.content-navi .depth-box .menu-list:after { position: absolute; content: ''; width: 1px; height: 100%; background: #0053CD; right: 0; top: 0; }
.content-navi .depth-box .menu-list li { display: block; height: 50px; }
.content-navi .depth-box .menu-list li a { display: block; height: 100%;  padding: 0 50px 0 30px; font-size: 1.4rem; line-height: 50px; color: #fff; position: relative; transition: background .25s ease; font-weight: 600; }
.content-navi .depth-box .menu-list li a:hover { background: #0057DC; }
.content-navi .depth-box .menu-list.en li a { font-size: 1.6rem; font-family: 'Rajdhani';}
.content-navi .depth-box .menu-list li a:hover:after { right: 20px; }

@media all and (max-width: 780px)
{
	.content-navi { height: 50px; }
	.content-navi .depth-box { width: 50%; }
	.content-navi .depth-box .current-menu { line-height: 50px; min-width: 0; font-size: 1.4rem; }
	.content-navi .depth-box .current-menu.en { font-size: 1.6rem; }
}

/* 모바일 타입셀렉트 */
.m-type-select { display: none; }
@media all and (max-width: 1250px)
{
	.m-type-select label { font-size: 1.8rem; font-weight: bold; height: 55px; line-height: 55px; text-align: center; display: block; background: #003384; color: #fff; position: relative; }
	.m-type-select label:after { background: url("../../img/common/heavy_arrow_down.svg"); width: 15px; height: 15px; position: absolute; content: ''; right: 20px; top: 50%; margin-top: -7.5px; }
	.m-type-select ul { display: none; }
	.m-type-select ul li { display: block; height: 55px; border-bottom: 1px solid #dee3eb; }
	.m-type-select ul li a { height: 100%; line-height: 55px; display: block; text-align: center; font-size: 1.5rem; font-weight: 800; background: #F8F9FA; }
	.m-type-select ul li a.en { font-size: 1.8rem; }
}
@media all and (max-width: 790px)
{
	.type-select { display: none; }
	.m-type-select { display: block; width: 100%; }
}
@media all and (max-width: 780px)
{
	.m-type-select { position: relative; }
	.m-type-select ul { position: absolute; left: 0; top: 55px; width: 100%; z-index: 2; }
}



/************************************** 페이징 **************************************/


.paging { text-align: center; margin-top: 50px;}
.paging ul {display: inline-block;}
.paging ul li {display: inline-block; height: 30px; line-height: 32px; width:30px; text-align: center; margin:0 2px; }
.paging ul li:hover a { background: #eaeaea; }
.paging ul li.select a {background: #333; color: #fff; }
.paging ul li a {display: block; width: 100%; height: 100%;color: #333; border-radius: 30px;}
.paging ul li:first-child a img {margin-left: -2px}
.paging ul li a img { width: 20px; height: 20px; margin-top: 5px; opacity: .7; }
.paging .rotate img {transform: rotate(180deg); margin-left: 1px}
.paging .rotate:last-child img {margin-left: 0}

@media all and (max-width: 580px) {
	.paging ul li {height: 25px; line-height: 23px; width: 25px; font-size: 1.2rem;}
	.paging ul li:first-child,
	.paging ul li:last-child {display: none;}
	.paging ul li a img {margin-top:3px;}
}

@media all and (max-width: 500px) {
	.paging ul {width: 100%;}
	.paging ul li {margin:0;}
	.paging ul li a {border: 0;}
}

@media all and (max-width: 375px) {
	.paging ul li { width: 21px; height: 21px; line-height: 20px; }
	.paging ul li a img { width: 15px; height: 15px; margin-top: 3px; }
}

@media all and (max-width: 1200px) {
	.section { padding: 80px 0; }
	.sec-width { padding: 0 30px; }
}