@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
html, body {display:block;margin:0;padding:0}
.doc-wrap {color:#000;font-size:18px;font-weight:400;min-width:320px;line-height:1.3;font-family:"Nanum Gothic", sans-serif;overflow-x:hidden;overflow-y:auto;margin:0 auto;box-sizing:border-box}

@media all and (max-width:999px) {
	.doc-wrap {font-size:17px}
}
@media all and (max-width:768px) {
	.doc-wrap {font-size:15px}
}
@media all and (max-width:599px) {
	.doc-wrap {font-size:14px}
}

/* ==============================
 * main 공통
================================= */
main {font-family:"Nanum Gothic", sans-serif}
main button {background-color:transparent;border:0}
main .main-sec {position:relative}
main .main-sec .inner {max-width:1032px;margin:0 auto}
main .eng {font-family:"Inter"}
main .br {}

@media all and (max-width:1112px) {
	main .main-sec .inner {padding:0 40px;max-width:initial}
}
@media all and (max-width:999px) {
}
@media all and (max-width:768px) {
}
@media all and (max-width:599px) {
	main .main-sec .inner {padding:0 30px}
}
@media all and (max-width:399px) {
	main .main-sec .inner {padding:0 20px}
}

/* ==============================
 * main 섹션1
================================= */
.main-sec1 {position:relative;word-break:keep-all}

.mVisual-wr {}
.mVisual-wr .swiper-slide {position:relative}
.mVisual-wr .swiper-slide .txt-box {position:absolute;left:50%;top:192px;width:100%;max-width:1032px;transform:translateX(-50%);padding:0 40px;text-align:center;box-sizing:border-box}
.mVisual-wr .txt-box > span {display:block;color:#fff}
.mVisual-wr .txt-box .tit {font-size:48px;font-family:"Montserrat";font-weight:700;margin-bottom:30px}
.mVisual-wr .txt-box .txt {font-size:1.11em}

.mVisual-wr .data-pkg {position:absolute;left:50%;bottom:288px;display:flex;align-items:center;transform:translateX(-50%);padding:0 70px;z-index:1}
.mVisual-wr .data-ctrl {width:100%;z-index:1}
.mVisual-wr .data-ctrl > button {position:absolute;display:flex;justify-content:center;align-items:center;background:none;border:1px solid #fff;width:50px;height:50px;border-radius:25px;top:50%;transform:translate(0,-50%);margin:0 -7px;box-sizing:border-box;transition:all .3s ease-out}
.mVisual-wr .data-ctrl > button:before,
.mVisual-wr .data-ctrl > button:after {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
.mVisual-wr .data-ctrl > button:before,
.mVisual-wr .data-ctrl > button:after {background:#fff;border:0;width:2px;height:14px}
.mVisual-wr .data-ctrl > .btn-prev {left:0}
.mVisual-wr .data-ctrl > .btn-next {right:0}
.mVisual-wr .data-ctrl > .btn-prev:before {transform:translateY(-35%) rotate(39deg)}
.mVisual-wr .data-ctrl > .btn-prev:after {transform:translateY(35%) rotate(-39deg)}
.mVisual-wr .data-ctrl > .btn-next:before {transform:translateY(35%) rotate(39deg)}
.mVisual-wr .data-ctrl > .btn-next:after {transform:translateY(-35%) rotate(-39deg)}
.mVisual-wr .data-ctrl > .btn-prev:hover {transform:translate(-5px,-50%)}
.mVisual-wr .data-ctrl > .btn-next:hover {transform:translate(5px,-50%)}
.mVisual-wr .data-pkg .swiper-pagination {position:static;display:flex}
.mVisual-wr .data-pkg .swiper-pagination > span {width:12px;height:12px;background-color:transparent;border:1px solid #fff;margin:0 10px;opacity:1;box-sizing:border-box}
.mVisual-wr .data-pkg .swiper-pagination > span:nth-child(1) {margin-left:0}
.mVisual-wr .data-pkg .swiper-pagination > span:last-child {margin-right:0}
.mVisual-wr .data-pkg .swiper-pagination > .swiper-pagination-bullet-active {background-color:#fff}
.mVisual-wr .data-pkg .data-auto {position:relative;flex-shrink:0;width:7px;height:10px;margin-left:20px;box-sizing:border-box;z-index:1}
.mVisual-wr .data-auto.disabled {display:none}
.mVisual-wr .data-auto > button {position:absolute;left:0;top:0}
.mVisual-wr .data-auto > .btn-play {display:none;width:0;height:0;border:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff;top:-1px}
.mVisual-wr .data-auto > .btn-stop {width:7px;height:10px;border-left:2px solid #fff;border-right:2px solid #fff}

.main-sec1 .link-box {position:absolute;width:100%;max-width:1032px;left:50%;bottom:30px;transform:translateX(-50%);box-sizing:border-box;z-index:1}
.main-sec1 .link-box:after {content:"";display:block;clear:both}
.main-sec1 .link-box > div {float:left;width:386px;height:200px;box-sizing:border-box;overflow:hidden}
.main-sec1 .link-box > div > a {position:relative;display:block;width:100%;height:100%;padding:35px 110px 35px 35px;box-sizing:border-box;transition:all .4s ease;isolation:isolate}
.main-sec1 .link-box > div > a:before {content:"";display:block;position:absolute;width:70px;height:70px;right:35px;bottom:35px;border-radius:35px;background-repeat:no-repeat;background-position:center}
.main-sec1 .link-box > div span {display:block;font-size:0.833em}
.main-sec1 .link-box > div .tit {font-size:1.11em;font-weight:700;margin-bottom:10px}

.main-sec1 .link-box .arr-deco {display:inline-flex;align-items:center;position:absolute;width:35px;height:35px;left:35px;bottom:35px;box-sizing:border-box;z-index:1;transition:transform .3s ease-out}
.main-sec1 .link-box .arr-deco:before {display:block;content:"";position:absolute;top:0;right:0;width:100%;height:100%;border-radius:100px;border:1px solid #fff;z-index:-1;box-sizing:border-box;transition:all .3s ease;}
.main-sec1 .link-box .arr-deco span:before {display:block;content:"";position:absolute;top:50%;right:12px;margin-top:-5px;width:8px;height:8px;border-bottom:2px solid #fff;border-right:2px solid #fff;transform:rotate(-45deg);transition:all .3s ease;z-index:1}
.main-sec1 .link-box .arr-deco span:after {display:block;content:"";position:absolute;top:0;right:11px;bottom:0;margin:auto 0;width:15px;height:2px;background:#fff;transition:all .3s ease;z-index:1}

.main-sec1 .link-box .intro-link > a {color:#fff;background-color:rgba(0,0,0,.6)}
.main-sec1 .link-box .intro-link > a:before {background-image:url(/_Img/UBI_Main/mVis_ico01.png);background-color:#C41019}

.main-sec1 .link-box .cs-link > a {color:#000000;background-color:#fff}
.main-sec1 .link-box .cs-link > a:before {background-image:url(/_Img/UBI_Main/mVis_ico02.png);background-color:#181818}
.main-sec1 .link-box .cs-link .arr-deco:before {border-color:#000}
.main-sec1 .link-box .cs-link .arr-deco span:before {border-color:#000}
.main-sec1 .link-box .cs-link .arr-deco span:after {background-color:#000}

.main-sec1 .link-box .recruit-link {position:relative;width:260px;}
.main-sec1 .link-box .recruit-link > a {flex-direction:column;align-items:center;justify-content:center;padding:35px;background-color:rgba(255, 255, 255, 0.10);isolation:isolate}
.main-sec1 .link-box .recruit-link > a:before {content:"";display:block;position:absolute;width:100%;height:0;left:0;bottom:0;background-color:rgba(0,0,0,.4);transition:height .4s ease;border-radius:0;z-index:-1}
.main-sec1 .link-box .recruit-link span {color:#fff;}
.main-sec1 .link-box .recruit-link .eng {margin-top:10px}

/* 호버 */
.main-sec1 .link-box > div.recruit-link > a:hover:before {height:100%}
.main-sec1 .link-box a:hover .arr-deco {transform:translateX(8px)}

@supports (backdrop-filter:blur(20px)) {
	.main-sec1 .link-box .recruit-link > a {backdrop-filter:blur(20px)}
}

@media all and (min-width:1920px) {
	.mVisual-wr .swiper-slide {height:auto;padding-top:0}
	.mVisual-wr .swiper-slide > img {width:100%;max-width:100%}
}
@media all and (max-width:1919px) {
	.mVisual-wr .swiper-slide {height:680px}
	.mVisual-wr .swiper-slide > img {position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%)}
}
@media all and (max-width:1112px) {
	.mVisual-wr .swiper-slide {height:580px}
	.mVisual-wr .swiper-slide .txt-box {top:142px}
	.mVisual-wr .data-pkg {bottom:258px}
	.main-sec1 .link-box {padding:0 40px}
	.main-sec1 .link-box > div {width:calc((100% - 180px)/2);height:180px}
	.main-sec1 .link-box .recruit-link {width:180px}
}
@media all and (max-width:999px) {
	.main-sec1 .link-box > div > a,
	.main-sec1 .link-box .recruit-link > a {padding:25px}
	.main-sec1 .link-box > div > a:before {width:40px;height:40px;right:25px;bottom:25px;background-size:auto 25px}
	.main-sec1 .link-box .arr-deco {left:25px;bottom:25px}
}
@media all and (max-width:820px) {
	.main-sec1 .link-box .br {display:none}
}
@media all and (max-width:768px) {
	.mVisual-wr .swiper-slide {height:480px}
	.mVisual-wr .swiper-slide .txt-box {top:100px}
	.mVisual-wr .txt-box .tit {font-size:32px;margin-bottom:10px}
	.mVisual-wr .data-pkg {padding:0 50px}
	.mVisual-wr .data-ctrl > button {width:35px;height:35px}
	.mVisual-wr .data-ctrl > button:before,
	.mVisual-wr .data-ctrl > button:after {height:11px}
}
@media all and (max-width:699px) {
	.main-sec1 .link-box .arr-deco {display:none}
}
@media all and (max-width:599px) {
	.mVisual-wr .swiper-slide {height:520px}
	.mVisual-wr .swiper-slide .txt-box {top:52px}
	.mVisual-wr .data-pkg {bottom:348px}
	.mVisual-wr .txt-box .tit {font-size:26px}
	.mVisual-wr .txt-box .txt {font-size:.944em}
	.main-sec1 .link-box {padding:0 30px}
	.main-sec1 .link-box > div {float:none;width:100%;height:auto}
	.main-sec1 .link-box > div > a {padding:20px 75px 20px 20px}
	.main-sec1 .link-box > div > a:hover {transform:scale(1.025)}
	.main-sec1 .link-box .recruit-link {width:100%;text-align:left}
	.main-sec1 .link-box .recruit-link > a {padding:20px;align-items:baseline}
}
@media all and (max-width:399px) {
	.main-sec1 .link-box {padding:0 20px}
}

/* ==============================
 * main 섹션2
================================= */
.main-sec2 {position:relative;background-color:#171717;padding:100px 0;overflow:hidden;isolation:isolate}
.main-sec2:before,
.main-sec2:after {content:"";display:block;position:absolute;width:801px;height:801px;border-radius:401px}
.main-sec2:before {background: linear-gradient(150deg, #2B0FF9 0%, rgba(177, 19, 34, 0.00) 92.02%);left:-390px;top:-557px;z-index:1}
.main-sec2:after {background: linear-gradient(-30deg, #F00017 0%, rgba(240, 0, 23, 0.00) 92.02%);right:-231px;bottom:-557px}
.main-sec2 .inner {position:relative}
.main-sec2 .inner:before,
.main-sec2 .inner:after {content:"";display:block;position:absolute;z-index:-1}
.main-sec2 .inner:before {width:876px;height:518px;background:url(/_Img/UBI_Main/main_sec2_bg.png) no-repeat;right:-200px;top:50%;transform:translateY(-50%)}
.main-sec2 .inner:after {width:65px;height:65px;background:url(/_Img/UBI_Main/msec2_deco.png) no-repeat;top:0;right:150px;animation:rotateAni 28s linear infinite}
.main-sec2 .tit-box {color:#fff;font-family:"Inter";margin-bottom:40px}
.main-sec2 .tit-box .s-tit {display:block;font-size:16px;margin-bottom:10px;font-weight:900}
.main-sec2 .tit-box .m-tit {display:block;font-size:28px;font-weight:500}
.main-sec2 .tit-box .m-tit .br {}
.main-sec2 .product-link-list {width:400px;border-top:2px solid #fff}
.main-sec2 .product-link-list:after {content:"";display:block;clear:both}
.main-sec2 .product-link-list li {float:left;width:50%;border-bottom:1px solid rgba(217, 217, 217, 0.20);box-sizing:border-box}
.main-sec2 .product-link-list li a {display:block;width:100%;height:100%;color:#fff;box-sizing:border-box}
.main-sec2 .product-link-list li a span {display:block;font-size:15px;width:100%;box-sizing:border-box}
.main-sec2 .product-link-list li a span:before {content:"";display:inline-block;width:60px;height:60px;background-repeat:no-repeat;background-position:center;vertical-align:middle;transition:background-image .2s ease}
.main-sec2 .product-link-list li.link1 a span:before {background-image:url(/_Img/UBI_Main/msec2_ico01.png)}
.main-sec2 .product-link-list li.link2 a span:before {background-image:url(/_Img/UBI_Main/msec2_ico02.png)}
.main-sec2 .product-link-list li.link3 a span:before {background-image:url(/_Img/UBI_Main/msec2_ico03.png)}
.main-sec2 .product-link-list li.link4 a span:before {background-image:url(/_Img/UBI_Main/msec2_ico06.png)}
.main-sec2 .product-link-list li a:hover span:before {background-image:url(/_Img/UBI_Main/msec2_ico05.png) !important}
.main-sec3 .svc-swiper {overflow: visible !important;}

@media all and (max-width:999px) {
	.main-sec2:after {right:-300px;bottom:-700px}
	.main-sec2 .inner:before {width:500px;height:295px;background-size:500px auto;right:-20px}
}
@media all and (max-width:768px) {
	.main-sec2 .inner:before {right:-50px;opacity:.8}
	.main-sec2 .tit-box {position:relative;z-index:10}
}
@media all and (max-width:599px) {
	.main-sec2:before {width:500px;height:500px;left:-250px;top:-357px}
	.main-sec2 .inner:before {top:40%;opacity:.3}
	.main-sec2 .inner:after {width:45px;height:45px;background-size:45px 45px}
	.main-sec2 .product-link-list {width:100%}
}
@media all and (max-width:499px) {
	.main-sec2 {padding:120px 0 90px}
	.main-sec2 .inner:before {display:none}
	.main-sec2 .inner:after {top:-50px;width:32px;height:32px;background-size:32px 32px;right:unset;left:50%;margin-left:-15px}
	.main-sec2 .tit-box {text-align:center;margin-bottom:30px}
	.main-sec2 .product-link-list li a span:before {width:50px;height:50px}
}
@media all and (max-width:399px) {
	.main-sec2 .tit-box .s-tit {font-size:14px;margin-bottom:8px}
	.main-sec2 .tit-box .m-tit {font-size:22px}
	.main-sec2 .product-link-list li a span {font-size:13px}
}

/* ==============================
 * main 섹션3
================================= */
.main-sec3 {padding:60px 0;background-color:#F2F2F2;isolation:isolate}
.main-sec3 .tit-box {display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.main-sec3 .tit-box .m-tit {display:block;font-family:"Inter";font-size:26px;font-weight:700;line-height:1.4;letter-spacing:-.78px}
.main-sec3 .tit-box .service-time {background-color:#171717;color:#fff;padding:13px 29px;border-radius:30px}
.main-sec3 .svc-swiper {overflow:hidden}
.main-sec3 .service-list {display:flex;justify-content:space-between;text-align:center;align-items: flex-start;box-sizing:border-box}
.main-sec3 .service-list a {display:block;position:relative;width:113px;height:101px;box-sizing:border-box}
.main-sec3 .service-list .tit {display:block;position:relative;color:#333;font-size:15px;font-weight:700;padding:10px 0;overflow:hidden;}
.main-sec3 .service-list .tit:before,
.main-sec3 .service-list .tit:after {display:block;content:'';position:absolute;bottom:0;left:50%;width:0;height:3px;background:#E93144;z-index:-1;transition:all .3s;}
.main-sec3 .service-list .tit:after {top:48px;transition:all .3s .3s;}
.main-sec3 .service-list .icon {display:block;position:relative;width:60px;height:60px;margin:0 auto;background:no-repeat 100% 0;background-size:100% 100%;transition:all 0.3s ease;}
.main-sec3 .service-list .icon1 {background-image:url(/_Img/UBI_Main/nmsec3_ico01.png)}
.main-sec3 .service-list .icon2 {background-image:url(/_Img/UBI_Main/nmsec3_ico02.png)}
.main-sec3 .service-list .icon3 {background-image:url(/_Img/UBI_Main/nmsec3_ico03.png)}
/* .main-sec3 .service-list .icon4 {background-image:url(/_Img/UBI_Main/nmsec3_ico04.png)} */
.main-sec3 .service-list .icon5 {background-image:url(/_Img/UBI_Main/nmsec3_ico04.png)}
.main-sec3 .service-list .icon6 {background-image:url(/_Img/UBI_Main/nmsec3_ico05.png)}
.main-sec3 .service-list .icon7 {background-image:url(/_Img/UBI_Main/nmsec3_ico06.png)}

.main-sec3 .service-list a:hover .tit:before,
.main-sec3 .service-list a:hover .tit:after {left:0;width:100%;}
.main-sec3 .service-list a:hover .icon {transform:translateY(-10px)}

.main-sec3 .data-ctrl {display:none}
.main-sec3 .data-ctrl > button {display:block;position:absolute;background:none;border:0;width:25px;height:25px;bottom:70px;transition:transform .3s ease-out}
.main-sec3 .data-ctrl > button:before,
.main-sec3 .data-ctrl > button:after {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
.main-sec3 .data-ctrl > button:before,
.main-sec3 .data-ctrl > button:after {background:#171717;border:0;width:2px;height:14px}
.main-sec3 .data-ctrl > .btn-prev {left:0}
.main-sec3 .data-ctrl > .btn-next {right:0}
.main-sec3 .data-ctrl > .btn-prev:before {transform:translateY(-35%) rotate(39deg)}
.main-sec3 .data-ctrl > .btn-prev:after {transform:translateY(35%) rotate(-39deg)}
.main-sec3 .data-ctrl > .btn-next:before {transform:translateY(35%) rotate(39deg)}
.main-sec3 .data-ctrl > .btn-next:after {transform:translateY(-35%) rotate(-39deg)}

@media all and (max-width:999px) {
	.main-sec3 {padding:40px 0}
	.main-sec3 .tit-box {flex-direction:column}
	.main-sec3 .tit-box .m-tit {margin-bottom:15px;text-align:center}
	.main-sec3 .tit-box .m-tit .br {display:block}
	.main-sec3 .tit-box .service-time {padding:9px 19px 10px;font-size:15px}
	.main-sec3 .service-list a {padding:0 5px;width:auto;height:auto}
	.main-sec3 .service-list .icon {width:64px;height:64px;}
	.main-sec3 .service-list .tit {font-size:1em}
	.main-sec3 .data-ctrl {display:block}
}
@media all and (max-width:399px) {
	.main-sec3 .tit-box .m-tit {font-size:18px;line-height:1.3;margin-bottom:10px}
	.main-sec3 .tit-box .service-time {padding:7px 14px;font-size:11px}
	.main-sec3 .service-list .icon {width:50px;height:50px;}
	.main-sec3 .service-list .tit {font-size: 0.9em;padding-top:5px;}
}

/* ==============================
 * Animation 
================================= */
@keyframes rotateAni {
	to {transform: rotateZ(360deg)}
}

/* floating */
.floating {	width: 100px;	height: auto;	position: fixed;	top: 20%;	right: 0;	background-color: #fff;	z-index: 999;	border-radius: 8px 0 0 8px;	padding: 20px 15px; box-sizing: border-box;}
.floating ul {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.floating ul li {width: 100%; height: 68px; margin-bottom: 10px; position: relative;}
.floating ul li::before {content: ''; position: absolute; width: 50%; border-bottom: 1px solid #d9d9d9; bottom: 0; left: 50%; transform: translateX(-50%);}
.floating ul li:last-child {margin-bottom: 0; height: 58px;}
.floating ul li:last-child::before {border: 0;}
.floating ul li a {width: 100%; font-size: 13px; font-weight: 700; letter-spacing: -1px; line-height: 1.4; color: #555; display: flex; flex-direction: column; align-items: center;}
.floating ul li a .floating-icon {width: 40px; height: 40px;}

.floating ul li a .floating-icon-1 {background-image: url('/_Img/UBI_Main/quick_ico01.png');}
.floating ul li a .floating-icon-2 {background-image: url('/_Img/UBI_Main/quick_ico02.png');}
.floating ul li a .floating-icon-3 {background-image: url('/_Img/UBI_Main/quick_ico03.png');}
.floating ul li a .floating-icon-4 {background-image: url('/_Img/UBI_Main/quick_ico04.png');}

.floating ul li a .floating-icon-1:hover {background-image: url('/_Img/UBI_Main/nmsec3_ico01.png');background-size:100%;}
.floating ul li a .floating-icon-2:hover {background-image: url('/_Img/UBI_Main/nmsec3_ico02.png');background-size:100%;}
.floating ul li a .floating-icon-3:hover {background-image: url('/_Img/UBI_Main/nmsec3_ico03.png');background-size:100%;}
.floating ul li a .floating-icon-4:hover {background-image: url('/_Img/UBI_Main/nmsec3_ico04.png');background-size:100%;}