@charset "utf-8";

/* 메인 비주얼 */
.main-visual-wrap { height: 740px; position: relative; transition: height .5s ease; }
.main-visual-wrap .main-visual { height: 100%; width: 100%; position: relative; }
.main-visual-wrap .message { text-align: center; padding: 145px 0 280px; color: #fff; }
.main-visual-wrap .message h2 { font-size: 5rem; display: block; margin-bottom: 70px; text-shadow: 0 0 8px rgba(0,0,0,0.1); }
.main-visual-wrap .message p { font-size: 4.2rem; font-weight: 300; line-height: 60px; text-shadow: 0 0 8px rgba(0,0,0,0.1); word-break: keep-all; }


.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: 75px; 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: 780px)
{
	.main-visual-wrap { height: 420px; }
	.main-visual-wrap .message { padding: 100px 0; }
	.main-visual-wrap .message h2 { font-size: 4.5rem; margin-bottom:25px; }
	.main-visual-wrap .message p { font-size: 3.1rem; line-height: 38px; 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; }
}
@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: 75px; background: #2373ea; }
.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: 75px; color: #fff; font-weight: bold; font-size: 1.5rem; 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: 15px; height: 15px; right: 25px; top: 50%; margin-top: -7.5px; }
.content-navi .depth-box .current-menu.en { font-size: 1.8rem; }
.content-navi .depth-box .menu-list { background: #0A61E4; position: relative; display: none; }
.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; }
.content-navi .depth-box .menu-list li a:hover { background: #0057DC; }
.content-navi .depth-box .menu-list li a.en { font-size: 1.6rem; }
.content-navi .depth-box .menu-list li a:after { position: absolute; content: ''; width: 15px; height: 15px; background: url("../../img/common/arrow_right.svg"); right: 25px; top: 50%; margin-top: -7.5px; transition: right .5s ease; }
.content-navi .depth-box .menu-list li a:hover:after { right: 20px; }

@media all and (max-width: 780px)
{
	.content-navi .depth-box { width: 50%; }
	.content-navi .depth-box .current-menu { min-width: 0; }
}

/* 모바일 타입셀렉트 */
.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: 15px; 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; }
}