/* 공통 */
.main-tit {font-size: 5.5rem; color: #fff; font-weight: bold; line-height: 1.5;}
.main-tit > span {display: block; overflow: hidden;}
.main-tit > span > span {display:block;}
.main-tit.kr {font-family: 'Pretendard'; font-weight: 500;}
.main-tit.en {font-size: 6rem; font-weight: bold;}

.blue_line {position: relative;}
.blue_line:after {content: ''; position: absolute; top: 23px; left: calc(50% + 2px);  width: 1px; height: 200px;background: linear-gradient(180deg, rgba(21,96,174,1) 0%, rgba(21,96,174,1) 50%, rgba(21,96,174,0.2) 100%); z-index: -1;}
.blue_line.btm:after {bottom: 0;}

/* loading page */
.loadingPage { width: 100%; height: 100vh; background: #1e1e1e; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 10; }
.loadingPage .boxList { display: flex; height: 100vh; justify-content: center; align-items: center; gap: 79.2px; transition: all 0.8s; transition-delay: 0.58s; }
.loadingPage .boxList.off { gap:33px; }
.loadingPage .boxList.off .box  { transform: scale(1); }
.loadingPage img { height: 67px; }

.loadingPage .box { width: 179px; height: 179px; position: relative; transition: all 0.8s; transition-delay: 0.58s; transform: scale(1.2); }

.loadingPage .line { position: absolute; background: #fff; display: block; }
.loadingPage .line.hor { height: 1px; width: 0; }
.loadingPage .line.ver { height: 0; width: 1px; }

.loadingPage .box p { opacity: 0; transition: all 0.8s; transform: scale(1.6); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.loadingPage .box.on p { opacity: 1; transform: scale(1); background: #003da7; }



/* main */
#main {background: #1e1e1e; position: relative; overflow:hidden;}
#main .bg-line {position: fixed; width: 100%; height: 0; max-width: 1500px; top: 0; left: 50%; transform: translateX(-50%); display: flex; z-index: 1; border-right: 1px solid #dedede; opacity: 0.2; transition: 2s;}	
#main .bg-line span {width: 1px; height: 0; background: #dedede; opacity: 0.6; display: block; position: relative; transition: 1.2s;}
#main .bg-line span:nth-child(1) {left: 0;}
#main .bg-line span:nth-child(2) {left: 25%;}
#main .bg-line span:nth-child(3) {left: 50%;}
#main .bg-line span:nth-child(4) {left: 75%;}



/* #main .bg-line.on span:nth-child(1), 
#main .bg-line.on span:nth-child(2) {height: 100%;} 
#main .bg-line.on span:nth-child(3), 
#main .bg-line.on span:nth-child(4) {height: 100%; transition-delay: 0.4s;}*/
#main .bg-line.on {height: 100%;}
#main .bg-line.on span {height: 100%;  }



/* visual */
.m-visual {position: relative; z-index: 2; padding: 230px 0; overflow: hidden;}
.m-visual .bg {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.m-visual .bg img {width: 100%; height: 100%; object-fit: cover;}
.m-visual .cnt {display: flex; align-items: flex-end;}
.m-visual .cnt .txt {width: 50%; padding-bottom: 45px; box-sizing: border-box;}
.m-visual .cnt .txt h2 { /*font-size: 5.2rem; */ font-size: 5.5rem; color: #fff; font-weight: 800; line-height: 1.3; overflow: hidden;}
.m-visual .cnt .txt h2 span {display: block; opacity: 0;}
.m-visual .cnt .txt .btn-box {margin-top: 150px; position: relative; }
.m-visual .cnt .txt .btn-box .btnList {overflow: hidden; display: flex; flex-wrap: wrap; gap: 10px 10px; width:460px; }
.m-visual .cnt .txt .btn-box .btnList .btn {display: block; width: 100%; height: 62px; border: 1px solid rgba(225, 225, 225, 0.1); border-radius: 30px; font-family: 'Pretendard'; cursor: pointer; font-size: 1.6rem; font-weight: 500; color: #fff; text-align: center; opacity: 0;}
.m-visual .cnt .txt .btn-box .btnList .btn img, 
.m-visual .cnt .txt .btn-box .btnList .btn i {margin-left: 10px;}
.m-visual .cnt .txt .btn-box .btnList a.btn {display: flex; align-items: center; justify-content: center; width: calc(50% - 10px); }
.m-visual .cnt .img {width: 50%; box-shadow: 9px 0 29px rgba(0, 0, 0, 0.31); position: relative; overflow: hidden; opacity: 0;}
.m-visual .cnt .img img {width: 100%; height: 100%;}
.m-visual .cnt .arrow {position: absolute; bottom: -29px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%;  box-shadow: 5px 0 33px rgb(21, 96, 174, 1);}
.m-visual .cnt .arrow .circle {width: 100%; height: 100%; background: var(--color-blue); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center;  border-radius: 50%; z-index: 1; position: relative;}
.m-visual .cnt .arrow .circle:before, 
.m-visual .cnt .arrow .circle:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--color-blue); opacity: 0; transition: 0.4s; width: 0;}


.m-visual .cnt.on .arrow .circle:after,
.m-visual .cnt.on .arrow .circle:before {opacity: 0.25;}
.m-visual .cnt.on .arrow .circle:before {width: 280%; height: 280%;  animation: scale-up-center 1.5s ease-out infinite both;}
.m-visual .cnt.on .arrow .circle:after {width: 559%; height: 559%;  animation: scale-up-center 1.5s ease-out infinite both;}

.m-visual .cnt.on h2 > span { animation: up 0.8s both; }
.m-visual .cnt.on .txt .btn-box .btnList .btn {animation: right 0.8s both;}
.m-visual .cnt.on .img {animation: left 0.8s both;}

.m-visual .cnt .img p {transform: scale(1.2); transition: 1.2s; }
.m-visual .cnt .img:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0.2; transition: 1.2s;} 
.m-visual .cnt.on .img:after {height: 0;}
.m-visual .cnt.on .img p {transform: scale(1);}
.m-visual .ch-button {display: flex;}

/*  animation: up 1s both; */
@keyframes up {
	0%{transform: translateY(100px); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}

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

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


@keyframes scale-up-center {
	0% {
		-webkit-transform: translate(-50%, -50%) scale(0.5);
		transform: translate(-50%, -50%) scale(0.5);
	}
	100% {
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
	}
}



/* popup */
.m-visual .popup {position: absolute; background: var(--color-blue); max-width: 401px; width: 100%; padding: 25px 30px 40px; box-sizing: border-box; /* bottom: 0; */ bottom: -100px; left: 460px; display: none; z-index: 10;}
.m-visual .popup-cnt {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.m-visual .popup .close-btn {position: absolute; color: #71b2f5; right: 15px; top: 15px; font-size: 2rem;}
.m-visual .popup .tit {font-size: 2rem; color: #fff; font-weight: 500; margin-bottom: 25px;}
.m-visual .popup .form-control {width: 100%; color: #fff; }
.m-visual .popup .popup-cnt select option {font-size: 1.6rem;}
.m-visual .popup .popup-cnt input {margin-bottom: 5px;}
.m-visual .popup .popup-cnt .input{ position: relative; }
.m-visual .popup .popup-cnt .input input{ padding-right: 70px; }
.m-visual .popup .popup-cnt .input button{ height: calc(100% - 5px); background: #fff; border: none; font-family: inherit; font-size: 1.5rem; font-weight: 600; color: var(--color-blue); position: absolute; top: 0; right: 0; padding: 0 15px; box-sizing: border-box; }
.m-visual .popup .popup-cnt .txtBox {background: #11569e; color: rgba(255, 255, 255, 0.9); font-weight: 300; font-size: 1.4rem; line-height: 1.4; width: 100%; padding: 15px 15px; box-sizing: border-box; margin-top: 10px; text-align: center;}
.m-visual .popup .popup-cnt .ch-box {display: flex; align-items: center; justify-content: center; margin-top:10px; }
.m-visual .popup .popup-cnt .ch-box a {font-size: 1.6rem; color: rgba(255, 255, 255, 0.3); margin-left: 8px;}
.m-visual .popup .popup-cnt .ok-btn {width: 146px; height: 43px; color: var(--color-blue); font-size: 1.6rem; font-weight: 600; background: #fff; border-radius: 40px; font-family: 'Pretendard'; display: block; margin: 19px auto 0;}
.m-visual .popup .popup-cnt3 .txtCnt {font-size: 1.6rem; color: rgba(255 , 255, 255, 0.9); font-weight: 300; line-height: 1.5; width: 100%; text-align: center;}
.m-visual .popup .captcha_ip { display:flex; align-items: center; background-color: rgba(255, 255, 255, 0.1); font-weight: 300; font-size: 1.4rem; line-height: 1.4; width: 100%; padding: 15px 15px; box-sizing: border-box; margin-top: 19px; }
.m-visual .popup .captcha_ip * {display:inline-block; vertical-align:middle;}
.m-visual .popup .captcha_ip strong { font-weight:300; font-size:15px; color:#fff; width:88px; }
.m-visual .popup .captcha_ip input { background:none !important; outline:none; width:calc(100% - 100px - 95px); height:35px; padding:0 2px; margin:0; margin-left:5px; border:none }

.m-visual .popup .popup-cnt1 {display: block;}
.m-visual .popup .popup-cnt2 {display: none;}
.m-visual .popup .popup-cnt3 {display: none;}

.m-visual .policy_pop { display: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 55; background: var(--color-blue); max-width: 100%; width: 100%; padding: 25px; height: 500px; box-sizing: border-box; }
.m-visual .policy_pop * { color: #fff; box-sizing: border-box; }
.m-visual .policy_pop > p { text-align: center; font-size: 20px; font-weight: 500;}
.m-visual .policy_pop .sub-content,
.m-visual .policy_pop .privacy {padding: 0; }
.m-visual .policy_pop .close-btn {position: absolute; color: #71b2f5; right: 15px; top: 15px; font-size: 2rem;}
.m-visual .policy_pop .body { height: 420px; overflow: auto; margin-top:10px; background: rgba(255, 255, 255, 0.1); padding: 20px 10px; }
.m-visual .policy_pop .body .privacy p { font-size:13px; }
.m-visual .policy_pop .body .privacy dt { font-size:14px; }
.m-visual .policy_pop .body .privacy dd { font-size:13px; }
.m-visual .policy_pop .body .privacy dd ul{ padding:10px; }
.m-visual .policy_pop .body .privacy dd ul li,
.m-visual .policy_pop .body .privacy .sTxt h3 {  font-size:13px; }
.m-visual .policy_pop .body .privacy .txtBox {  font-size:13px; }
.m-visual .policy_pop .body .privacy .sTxt dd > span {width: 60px; padding:0; display:inline-block}
.m-visual .policy_pop .body .privacy > p { margin:0 0 15px 0; }



/* partner */
.m-partner {padding-top: 180px; box-sizing: border-box; overflow: hidden; position: relative; z-index: 2;}
.m-partner .b-txt {font-family: 'Poppins', sans-serif; font-size: 35rem; color: #282828; font-weight: bold; text-transform: uppercase; position: absolute; top: 0; left: 10.69%; opacity: 0.6; line-height: 1;}
.m-partner .main-tit .s-txt {font-size: 1.8rem; font-weight: 200; color: rgba(255, 255, 255, 0.8); margin-top: 15px;}
.m-partner .cnt {display: flex; position: relative; }
.m-partner .img {width: 50%;}
.m-partner .txt {width: 50%; display: flex; max-width: 750px; padding-top: 224px; box-sizing: border-box;}
.m-partner .txt .main-tit {width: 50%;}
.m-partner .txt .list {}
.m-partner .txt .list .item {padding-left: 53px; position: relative; box-sizing: border-box;}
.m-partner .txt .list .item:not(:last-child) {margin-bottom: 67px;}
.m-partner .txt .list .item:before {content: ''; width: 7px; height: 7px; border: 3px solid var(--color-blue); position: absolute; top: 10px; left: -3.5px; box-shadow: 5px 0 26px rgb(21, 96, 174, 1);}
.m-partner .txt .list .item .num {font-size: 6rem; color: #fff; font-family:"Century Gothic";}
.m-partner .txt .list .item span {display: block; font-size: 1.7rem; color: rgba(255, 255, 255, 0.4); font-weight: 200; margin-top: 25px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px;}
.m-partner .txt .list .item span b {color: #fff; font-weight: 400;}

/* service */
.m-service {position: relative; z-index: 1;  /* overflow:hidden; */}
.m-service .main-tit:after {top: initial; bottom: 115px; left: -1px; transform: initial; background: linear-gradient(-180deg, rgba(21,96,174,0.2) 0%, rgba(21,96,174,1) 60%, rgba(21,96,174,1) 100%);}
.m-service .main-tit:before {content: ''; width: 7px; height: 7px; border: 3px solid var(--color-blue); position: absolute; top: -38px; left: -7px; box-shadow: 5px 0 26px rgb(21 96 174);}
.m-service .cnt {display: flex; align-items: center;}
.m-service .link {width: 50%; padding: 80px 0 0 10.69%; box-sizing: border-box;}
.m-service .link .list {display: flex; flex-wrap: wrap; gap: 100px 0; margin: 130px 0 0; }
.m-service .link .list a {display: block; text-align: center; width: 25%; position: relative;}
.m-service .link .list a:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); transition: 0.4s; opacity: 0;}
.m-service .link .list a:after {width: 290px; height: 290px; background: url(/img/main/circle_hover03.png) no-repeat center/cover;}
.m-service .link .list span {display: inline-block;}
.m-service .link .list span img {}
.m-service .link .list p {font-size: 1.8rem; color: rgba(225, 225, 225, 0.8); font-weight: 300; line-height: 1.3; margin-top: 16px;}
.m-service .img {width: 50%;}

.m-service .link .list a.on p {color: #3287de; transition: 0.4s;}
.m-service .link .list a.on:after {transform: translate(-50%, -50%) scale(1); opacity: 1;}

/* research */
.m-research {position: relative; overflow: hidden; padding: 278px 0 180px; box-sizing: border-box; }
.m-research .bg {position: relative; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.m-research .bg img {width: 100%; height: 100%; object-fit: cover; }
.m-research .cnt {position: relative; z-index: 2; width: 100%;}
.m-research .blue_line:after {top: initial; bottom: 115px; background: linear-gradient(-180deg, rgba(21,96,174,0.2) 0%, rgba(21,96,174,1) 60%, rgba(21,96,174,1) 100%);}
.m-research .main-tit:before {content: ''; width: 7px; height: 7px; border: 3px solid var(--color-blue); position: absolute; top: -38px; left: calc(50% + 2px); transform: translateX(-50%); box-shadow: 5px 0 26px rgb(21 96 174);}
.m-research .main-tit {text-align: center;}
.m-research .tab {}
.m-research .tab ul {display: flex; align-items: center; justify-content: center; margin: 63px 0 0 0; gap: 0 58px; padding-left: 62px; box-sizing: border-box;}
.m-research .tab ul li {cursor: pointer;}
.m-research .tab ul li a {font-size: 1.8rem; color: rgba(255, 255, 255, 0.3); position: relative;}
.m-research .tab ul li a:after {content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: #1560ae; transition: 0.4s;}
.m-research .tab ul li.on a,
.m-research .tab ul li:hover a{color: #408fe2;}
.m-research .tab ul li.on a:after,
.m-research .tab ul li:hover a:after {width: 100%;}
.m-research .tabCnt {margin-top: 62px; padding: 0 0 0 10.69%; box-sizing: border-box;}
.m-research .tabCnt .list {position: relative;}
.m-research .tabCnt .slide {}
.m-research .tabCnt .slide .item {display: flex; align-items: center; width: 1500px; box-sizing: border-box;}
.m-research .tabCnt .slide .item .img {width: 50%; box-shadow: 8px 0 13px rgba(0, 0, 0, 0.1); position: relative; transform: scale(0.7); background: #000;  transition: 1.2s;  margin-left: -113px;  transform: scale(1); margin-left: 0; }
.m-research .tabCnt .slide .item .img:after { content: ""; display:block; padding-bottom:65.5%; }
.m-research .tabCnt .slide .item .img img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; opacity: 1; }
.m-research .tabCnt .slide .item .txtBox {width: 50%; color: #fff; padding-left: 100px; box-sizing: border-box; position: relative;}
.m-research .tabCnt .slide .item .txtBox .num {font-size: 15.3rem; color: rgba(255, 255, 255, 0.05); font-weight: 300; position: absolute; top: -77px; left: 40px;}
.m-research .tabCnt .slide .item .txtBox p {font-size: 4rem; font-weight: bold; line-height: 1.4;}
.m-research .tabCnt .slide .item .txtBox .txt {display: block; font-size: 1.7rem; opacity: 0.8; font-weight: 300; line-height: 1.6; margin-top: 30px;}
.m-research .tabCnt .slide .item .txtBox .more-btn {width: 180px; height: 61px; border-radius: 30px; background: rgba(255, 255, 255, 0.2); font-size: 16px; color: #fff; font-weight: 500; font-size: 1.6rem; font-family: 'Urbanist', sans-serif; letter-spacing: 0.6px; margin-top: 56px;}
.m-research .tabCnt .slide .item .txtBox .more-btn i {font-size: 13px; margin-left: 14px;}
.m-research .tabCnt .list .control {position: absolute; top: 65px; right: 0; width: 11.8%; display: flex; gap: 0 8px;}
.m-research .tabCnt .list .control button {color: #fff; opacity: 0.3; font-size: 1.6rem; transition: 0.4s;}
.m-research .tabCnt .list .control button:hover {opacity: 1;}

/* .m-research .tabCnt .slide .item.slick-now .img {transform: scale(1); margin-left: 0;}
.m-research .tabCnt .slide .item.slick-now .img img {opacity: 1;} */

.m-research .tabCnt .slide .item.slick-current + .item .img {transform: scale(0.7); margin-left: -113px; transition: 0.4s;}
.m-research .tabCnt .slide .item.slick-current + .item .img img {opacity: 0.5; transition: 0.4s;}