@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto;}
#main .contain {max-width: 1460px;}

.ready {height: calc(100vh - 400px); background: #555; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 50px;}

/* header */
#header {position:relative; top:0; left:0; width:100%; transition:.2s; z-index:100;}
#header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width:1460px; z-index:2;}
#header .sitelogo {padding: 15px 0; z-index: 10;}
#header .sitelogo a {display: block;}
#header .sitelogo img {max-height: 70px;}

#gnb {flex:1 1 auto; min-width:0; width:1%; padding-right: 40px;}
#gnb > ul {display:flex; justify-content:flex-end; margin: 0 -40px;}
#gnb > ul > li {position:relative;}
#gnb > ul > li > a {display:flex; align-items:center; justify-content:center; height:99px; padding:0 40px; color:#242424; font-size:19.81px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
#gnb .submenu {display:none; position:absolute; left:50%; width:180px; transform:translateX(-50%); background:#fff; border:1px solid #ddd; border-top:0; text-align:center;}
#gnb .submenu ul {padding: 33px 5px 38px;}
#gnb .submenu ul li {position:relative; padding:8px 0;}
#gnb .submenu ul li a {position: relative;display:block; line-height:1.5em; letter-spacing:-.03em; }
#gnb .submenu ul li a:hover {color:#1f51a2; text-decoration: underline; text-underline-offset: 5px;}
#gnb > ul > li > a:after {content:""; position:absolute; top:25px; left:50%; width:0; height:2px; transform: translateX(-50%); border-radius: 100%; background:#0a6a7e; transition:.2s;}
#gnb > ul > li.active > a:after {width:4px; height: 4px; }
#header.active #gnb > ul > li.active > a {color: #1f51a2; font-weight: 700;}


/* for mobile */
.btn-m-menu {display:none; position:relative; width:26px; height:26px; overflow:hidden; text-indent:-9999em; z-index:50;}
.btn-m-menu span {position:absolute; top:50%; left:0; width:100%; height:2px; margin-top:-1px; background:#242424;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:0; width:100%; height:2px; background:#242424;}
.btn-m-menu span:before {top:-10px;}
.btn-m-menu span:after {bottom:-10px;}

.mobile-navigation {display:none; position:fixed; top:0; right:0; width:320px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:150;}
.mobile-navigation .home {display:flex; align-items:center; height:80px; padding:0 20px;}
.mobile-navigation .home img {height:45px;}
.mobile-navigation .nav-menu>ul {border-top:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:11px 48px 11px 20px; display:block; color:#2c2c2c; font-size:20px; font-weight:700; line-height:1.5em;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-78%) rotate(45deg); width:13px; height:13px; border-right:1px solid #505050; border-bottom:1px solid #505050;}
.mobile-navigation .nav-menu>ul>li.active>a {color:#fff; background:#1f51a2;}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:#fff;}
.mobile-navigation .nav-menu .submenu {display:none; padding:10px 20px; background:#fafafa; color:#454545; font-size:18px; font-weight:400; line-height:1.5em;}
.mobile-navigation .nav-menu .submenu > ul > li {padding:3px 0;}
.mobile-navigation .nav-menu .submenu > ul > li > a {display:block; padding:3px 0;}
.mobile-navigation .nav-menu .submenu > ul > li.active>a {color:#1f51a2;}
.mobile-navigation .close {position:absolute; top:25px; right:18px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#454545; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

.ico img {vertical-align: middle; margin-top: -0.2em;}
.point {color: #1f51a2  !important;}

/* main */
.main-visual {position:relative; overflow:hidden; text-align:center; color:#242424;}
.main-visual .item {position:relative; overflow:hidden; height:100vh; max-height: 600px;}
.main-visual .item img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:5s; transform:scale(1.1);}
.main-visual .caption {position:absolute;  top:100px; left:50%; transform: translateX(-50%); width:100%; max-width: 1460px; padding: 0 30px; line-height:1.3em; letter-spacing:-.03em; transition:1.4s; text-align: center;}
.main-visual .caption .tag {font-family: 'TmoneyRoundWindExtraBold'; text-shadow: -2px 0px #fff, 0px 2px #fff, 2px 0px #fff, 0px -2px #fff;}
.main-visual .caption h2 {font-family: 'TmoneyRoundWindExtraBold'; text-shadow: -3px 0px #fff, 0px 3px #fff, 3px 0px #fff, 0px -3px #fff; font-size: 50px; line-height: 1.280em; margin-top: 10px; margin-bottom: 30px; font-weight: 800;}
.main-visual p {line-height: 1.750em; font-size: 16px;}
.main-visual .slick-arrow {display:flex; align-items:center;font-weight:700; border:0; z-index:50; text-indent: -9999em; overflow: hidden;  width:26px; height:25px;}
.main-visual .controls {opacity: 0; position: absolute; max-width: 1460px; padding: 0 30px; width: 100%; left: 50%; top: 318px; transform: translateX(-50%); height: 21px; display:flex; align-items: center; justify-content: center;}
.main-visual .slick-prev {background:url("../images/main/slide_prev.png") 50% 50% no-repeat; background-size: contain;}
.main-visual .slick-next {background:url("../images/main/slide_next.png") 50% 50% no-repeat; background-size: contain;}
.main-visual .active .item img {transform:scale(1);}

.controls .paging {font-family:'Montserrat', sans-serif; font-size:12px; font-weight:600; margin-right:10px; color:#000; line-height:1.3em; letter-spacing:0; display: flex; white-space: nowrap; position:absolute; right:0;}
.controls .paging .current {position:absolute; left:0; letter-spacing:-.1em;}
.controls .progress {position:relative; width:90px; height:2px; background:#fff; margin: 0 10px;}
.controls .progress:after {content:""; position:absolute; top:0; left:0; width:0; height:100%; background:#1f51a2;}
.controls .progress.active:after {width:100%; transition:4s;}
.controls .current {width:10px;	 font-size:18px; color:#1f51a2; letter-spacing:-.03em; font-weight:700; line-height:1em;}
.controls .total {width:30px; text-align:right; font-size:18px; color:#242424; letter-spacing:0; font-weight:700; line-height:1.3em;}
.controls .btn-controls {position: relative; width: 26px; height: 26px; margin: 0 3px;;}
.controls .btn-controls button {position: absolute; top: 0; left: 0; border: none; background: #000; display: none; width: 26px; height: 26px; font-size: 0; overflow: hidden; text-indent: -9999em;}
.controls .btn-controls button.active {display: block;}
.controls .btn-controls button.pause {background: url('../images/main/slide_pause.png') no-repeat center center; background-size: contain;}
.controls .btn-controls button.play {background: url('../images/main/slide_play.png') no-repeat center center; background-size: contain;}

.main-visual .slick-dots  { display:flex; position:relative;}
.main-visual .slick-dots li {display:inline-block; position:absolute; left:0;}
.main-visual .slick-dots li button {display:none; position:relative; border:0; font-size:16px; font-weight:500; line-height:1.4em; color:#000; background:0;}
.main-visual .slick-dots li.slick-active button {display:block; text-indent:-999em;}
.main-visual .slick-dots li.slick-active button:before  {content:""; position:absolute; leftn:0; height:4px; width:170px; background:#898989;}
.main-visual .slick-dots li.slick-active button:after {content:""; position:absolute;left:0px; height:4px; width:0; background:#000; animation:proBar 3s 0.3s 1;}

.main-menu {transform: translateY(-50%);}
.main-menu .main-cnt {display: flex; align-items: center; background: #fff; padding: 35px 40px; border-radius: 90px; box-shadow: 8px 8px 30px rgba(0,0,0,.1); gap: 50px;}
.main-menu .item {flex: 1; display: flex; gap: 20px;}
.main-menu .item .txt {display: flex; flex-direction: column; justify-content: space-between;}
.main-menu .item .tit {font-family: 'TmoneyRoundWindExtraBold'; font-size: 20px; color: #242424; line-height: 1.5em;}
.main-menu .item .btn-more {display: flex; align-items: center; font-size: 16px; gap: 10px; transition: .3s;}
.main-menu .item .btn-more .ico {filter:grayscale(1) brightness(1.5); transition: .3s;}
.main-menu .item:hover .btn-more {color: #1f51a2;}
.main-menu .item:hover .btn-more .ico {filter:none;}

.main-tit {display: flex; align-items: flex-end; font-family: 'TmoneyRoundWindExtraBold'; margin-bottom: 35px;}
.main-tit h2 { font-size: 40px; color: #242424; width: fit-content; line-height: 1em; padding-right: 20px; border-right: 1px solid #ddd; margin-right: 20px;}
.main-tit p {font-family: 'TmoneyRoundWindRegular'; line-height: 1em; color: #242424; font-weight: 400;}
.main-sections .contain {display: flex;}
.main-notice {width: 60.71%;}
.main-notice .slick-list {margin: 0 -15px;}
.main-notice .slick-slide {padding: 0 15px;}
.main-notice .item {border-radius: 30px; padding: 40px 33px; height: 280px; border: 1px solid #ddd; display: flex !important; flex-direction: column; justify-content: space-between; gap: 15px;}
.main-notice .item .tit {font-weight: 600; font-size: 20px; color: #242424; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: keep-all;}
.main-notice .item .txt {font-size: 16px; line-height: 1.75em; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.main-notice .item .bot {display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #898989; font-size: 14px;}
.main-notice .item .bot .ico {filter:grayscale(1) brightness(1.5); transition: .3s;}
.m-notice-slide {position: relative;}
.m-notice-slide .controls {position: absolute; top: -64px; right: 0; display: flex; align-items: center;gap: 25px; }
.m-notice-slide .controls .btn-controls, .m-notice-slide .controls .btn-controls button {width: 10px; height: 10px;}
.m-notice-slide .controls .btn-controls button.pause {background: url('../images/main/notice_pause.png') no-repeat center center; background-size: contain;}
.m-notice-slide .controls .btn-controls button.play {background: url('../images/main/notice_play.png') no-repeat center center; background-size: contain;}
.m-notice-slide .slick-dots {position: absolute; height: 34px; width: 100%; top: -64px; right: 0; display: flex; justify-content: flex-end; padding-right: 65px;}
.m-notice-slide .slick-dots li {margin: 0 5px; display: flex; align-items: center;}
.m-notice-slide .slick-dots li button {width: 8px; height: 8px; border-radius: 100%; background: #b7b7b7; border: none; font-size: 0; overflow: hidden; text-indent: -9999em;}
.m-notice-slide .slick-dots li.slick-active button {background: #1f51a2;}

.main-info {flex: 1; padding-left: 60px;}
.main-info .main-cnt {background: #1f51a2; border-radius: 30px; height: 280px; padding: 44px; display: flex; flex-direction: column; gap: 28px; justify-content: center;}
.main-info .tit {display: flex; font-family: 'TmoneyRoundWindExtraBold'; color: #fff; font-size: 20px; gap: 12px; min-width: 150px; border-right: 1px solid #ddd; margin-right: 28px;}
.main-info .item {display: flex;}
.main-info .item-cnt {font-size: 16px; color:#ddd; line-height: 1.75em;}
.main-info .item-cnt li {display: flex; }
.main-info .item-cnt li span {min-width: 63px;}
.main-info .item-cnt strong {color :#fff; font-weight: 600;}
.main-info .item-cnt strong.large {font-size: 28px;}

.main-center {padding: 100px 0; margin-top: 100px; position: relative;}
.main-center:before {position: absolute; content: ''; top: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 160px); height: 50%; background: url('../images/main/bg_m_center.jpg') no-repeat center center; background-size: cover; border-radius: 50px; overflow: hidden; z-index: -1;}
.main-center .video-container {border-radius: 30px; overflow: hidden;}

.main-center .items {position: relative;}
.main-center .item {position: relative; width: 100%; padding-bottom: 100%; overflow: hidden;}
.main-center .item img {position: absolute; width: 100%; height: 100%; top: 50%; transform: translateY(-50%); left: 0; object-fit: cover;}
.main-center .slick-dots {position: absolute; top: -60px; right: 0;display: flex; gap: 10px;}
.main-center .slick-dots button {border: none; width: 12px; height: 12px; border-radius: 100%; background: #fefefe; overflow: hidden; font-size: 0; text-indent: -9999em; opacity: .7;}
.main-center .slick-dots .slick-active button {background: #1f51a2;} 

/* sub */
.sub-visual {position:relative; height:330px; color:#fff; text-align:center; overflow:hidden; background:#333;}
.sub-visual .bg {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:2s; opacity:0; transform:scale(1.1); background-repeat:no-repeat; background-position:50% 0; background-size:cover;}
.sub-visual .inner {position:absolute; top:58%; left:0; width:100%; transform:translateY(-50%);}
.sub-visual h2 {margin-bottom: 10px; font-family: 'TmoneyRoundWindExtraBold'; font-size:40px;line-height:1.3em; letter-spacing:-.03em;}
.sub-visual .bg1 {background-image:url("../images/common/sv1.jpg");}
.sub-visual .bg2 {background-image:url("../images/common/sv2.jpg");}
.sub-visual .bg2-2 {background-image:url("../images/common/sv2_2.jpg");}
.sub-visual .bg2-3 {background-image:url("../images/common/sv2_3.jpg");}
.sub-visual .bg3 {background-image:url("../images/common/sv3.jpg");}
.sub-visual .bg4 {background-image:url("../images/common/sv4.jpg");}
.sub-visual .bg5 {background-image:url("../images/common/sv5.jpg");}
.sub-visual.none-lnb .inner {padding:0;}
.loaded .sub-visual .bg {transform:scale(1); opacity:1;}

#lnb {width:270px;margin-bottom:50px; margin-right: 130px; margin-top: -40px; z-index: 1; border-radius: 30px; overflow: hidden;}
.lnb h2 {display:flex; flex-direction:column; justify-content:center; align-items:center; height:144px; padding:10px; text-align:center; color:#fff; font-size:26px; line-height:1.33em; background:#1e6ed1 url('../images/common/bg_lnb.jpg') no-repeat center center;}
.lnb > ul {border: 1px solid #ddd; border-top: none; border-radius: 0 0 30px 30px; padding: 0 30px 50px;}
.lnb > ul > li {border-bottom:1px solid #dfdfdf;}
.lnb > ul > li > a {display:flex; justify-content:space-between; align-items:center; min-height:60px; padding:10px 0; color:#898989; font-size:16px; font-weight:600; line-height:1.33em;}
.lnb > ul > li > a:after {content:""; width:19px; height:19px; margin-left:20px; background:url("../images/common/lnb_off.png") 50% 50% no-repeat; background-size:contain; transition:.2s;}
.lnb > ul > li > a:hover {color:#1f51a2;}
.lnb > ul > li > a:hover::after {transform:translateX(5px); background-image:url("../images/common/lnb_on.png");}
.lnb > ul > li.active > a {color:#1f51a2; font-weight:700;}
.lnb > ul > li.active > a:after {background-image:url("../images/common/lnb_on.png");}
.lnb .submenu {padding:13px 20px; background:#fafafa; border-top:2px solid #1f51a2;}
.lnb .submenu ul li {padding:6px 0;}
.lnb .submenu ul li a {position:relative; display:block; padding:0 0 0 12px; color:#505050; font-size:15px; line-height:1.33em;}
.lnb .submenu ul li a:before {content:""; position:absolute; top:6px; left:0; width:4px; height:4px; background:#ccc;}
.lnb .submenu ul li a:hover,
.lnb .submenu ul li.active a {color:#1f51a2;}

.lnb-m {display:none;}
.lnb-m .depth1 ul {display:flex; position: relative; border-radius: 20px; overflow: hidden;}
.lnb-m .depth1 ul:before {position: absolute; content: ''; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid #ddd; border-radius: 20px;}
.lnb-m .depth1 ul li {flex:1; text-align:center;border-left:0;}
.lnb-m .depth1 ul li:last-child {border-right:0;}
.lnb-m .depth1 ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:50px; padding:0 15px; color:#242424; font-size:16px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.lnb-m .depth1 ul li.active {background:#1f51a2; border-color:#1f51a2;}
.lnb-m .depth1 ul li.active a {color:#fff;}
.lnb-m .depth2 {padding:15px 5px; background:#fafafa; border-bottom:1px solid #ddd;}
.lnb-m .depth2 ul {display:flex;}
.lnb-m .depth2 ul li {width:auto; padding:0 15px;}
.lnb-m .depth2 ul li a {position:relative; display:block; padding:0 0 0 12px; color:#505050; font-size:14px; line-height:1.33em;}
.lnb-m .depth2 ul li a:before {content:""; position:absolute; top:6px; left:0; width:4px; height:4px; background:#ccc;}
.lnb-m .depth2 ul li.active a {color:#1f51a2;}

.path-wrap {position:relative;}
.path-wrap .wrap {max-width:1200px; margin:0 auto;}
.path-wrap .inner {display:flex;}
.path-wrap .home a {display:block; width:12px; background:url("../images/common/home.png") 50% 50% no-repeat; background-size:12px; text-indent:-999em; overflow:hidden;}
.path-wrap .part {position:relative; z-index:50; display: flex; padding-left: 10px; margin-left: 10px;}
.path-wrap .part > a {display:flex; align-items:center; position:relative; color:#454545; font-size:15px; line-height:1.3em;}
.path-wrap .part:last-child > a {font-weight: 700;}
.path-wrap .part > a:after {content:""; position:absolute; top:12px; left:-12px; width:6px; height:11px; background:url("../images/common/path_arrow.png") 50% 50% no-repeat;}
.path-wrap .part ul {display:none; position:absolute; left:-1px; right:-1px; background:#fff; border:1px solid #ddd; z-index:50;}
.path-wrap .part ul li {color:#505050; line-height:1.3em; border-bottom:1px solid #ddd;}
.path-wrap .part ul li:last-child {border-bottom:0;}
.path-wrap .part ul li a {display:block; padding:17px 24px;}
.path-wrap .part ul li a:hover,
.path-wrap .part ul li.active a {color:#242424; background:#f8f8f8;}

@media (max-width: 1024px) {
	.path-wrap .home a {width:52px; height:52px;}
	.path-wrap .part > a {height:52px;}
	.path-wrap .part ul li a {padding:15px 24px;}
}

@media (max-width: 1024px) {
	#sub #container {display:block; padding:0;}
	#lnb {width:auto; margin:0;}
	.lnb {display:none;}
	.lnb-m {display:block;}

}


.sub-title {max-width: 1460px; display: flex;}
#contArea.wide .sub-title {padding-left: 30px; padding-right: 30px;}
.sub-title > * {flex: 1;}
.sub-title h2 {font-family: 'TmoneyRoundWindExtraBold'; font-size: 33px; line-height: 1.3em; color: #2c2c2c;}
.sub-title .doc-tit {margin-bottom: 22px;}

#contArea {max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto; display: flex; align-items: flex-start;}
#contArea.wide {max-width:100%; padding:0;}

.sub-cnt {flex:1; padding-top: 66px; padding-bottom: 80px;}
.doc-top {display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; margin-bottom: 40px; border-bottom: 1px solid #ddd;}


/* footer */
#footer {background: #333; color: #b8b8b8;}
#footer .contain {max-width: 1460px;}
.f-terms {padding: 40px 0;}
.f-terms .contain {display: flex; gap: 34px; justify-content: flex-start;}
.f-bot .contain {position: relative; display: flex; gap: 55px; padding-top: 35px; padding-bottom: 55px;}
.f-bot .contain:before {position: absolute; content: ''; width: calc(100% - 60px); left: 30px; top: 0; height: 1px; background: #484848;}
.f-bot address span {font-size: 15px; margin-right: 25px; font-style: normal; line-height: 1.6em;}
.f-bot address {line-height: 1em;}
#footer .copyright {font-size: 14px; margin-top: 15px;}
#footer .copyright span {color: #686868;}


.scroll-top {position:fixed; bottom:160px; right:60px; width:70px; height:70px; color:#242424; border-radius: 100%; font-size:15px; line-height:1em; text-align:center; display:flex; justify-content:center; align-items:center; background-color: #fff; z-index:80; box-shadow: 0 0 5px rgba(0,0,0,.1)}
.scroll-top span:before {content:""; display:block; margin:0 auto 10px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:7px solid #242424;}