@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');



/************************* 공통 시작*************************/
.link-btn {display: inline-flex; justify-content: center; align-items: center; width: 220px; height: 46px; font-size: 16px; font-weight: 700; background-color: #212121; text-align: center; color: #fff !important; border-radius:46px; transition:.3s ease all;}
.link-ani {position: relative; display: inline-flex; z-index: 0; z-index: 0;}
.link-ani span {position: absolute; display: inline-flex; justify-content:center; align-items:center; top: 50%; left: 50%; width: 100%; transform:translate(-50%,-50%); color: #fff; z-index: 1; text-align: center; font-size: 16px; font-weight: 700; transition: .3s ease all;}
.link-ani .bg {width: 180px; height: 45px; background-color: #212121; border-radius: 30px; transition:.3s ease all;}
.link-ani.tab-link .bg {width: 220px; height: 46px;}
.sub_right	{position:relative; margin-top: 160px; width:100%;}

.content_title {margin: 0 auto; max-width:1600px;}
.content_title h1 {margin-bottom:0.245em; font-size: 62px; font-weight: 700;}
.content_desc {min-height:500px;}

@media(max-width:1640px){
	.tabmenu {padding:0 4%;}
    .tabmenu li {margin-right: 15px;}	
}
.tabmenu {display: flex; flex-flow: row wrap; margin: 0 auto; max-width:1600px}
.tabmenu li {margin-right: 25px;}
.tabmenu li:last-child {margin-right: 0;}

.pushy-submenu-closed ul {
	max-height: 0;
	overflow: hidden;
  }

/************************* 공통 끝 *************************/


/************************* header 시작*************************/
.header_t {width:100%; display:flex; align-items: center; padding:0 20px; position: fixed; z-index: 10; left:0; top:0; min-height:70px; transition:.3s ease all;}
.header_t_on {background-color: #fff;}
.header_t.hide {transform:translateY(-100%);}
.f-nav{background:#fff; position:fixed; box-shadow:0 2px 6px rgb(0,0,0,0.1);}

.header_logo{width:10%;}

.header_gnb_bg {display: flex; width: 80%; align-items: center; justify-content: center; transition:all 0.6s;}
.header_gnb_bg::after {content: ''; display: block; width: 100vw; height: 0; background: #fff; box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 10%); position: absolute; left: 0; top: 80px; transition:height 0.6s; z-index:-1; }
#all_nav {width: 100%; max-width: 552px; transition: all 0.6s;}
.header_gnb_bg .nav_ul {display: flex; flex-flow:row wrap; justify-content:space-between;}
.header_gnb_bg .nav_ul > li {flex:1 0 auto; position: relative; padding: 28px 0;}
.header_gnb_bg .nav_ul > li .sub a {color: #555; transition:.3s ease all;}
.header_gnb_bg .nav_ul > li .sub a:hover {color: #000;}
.header_gnb_bg .sub {width: 0; height: 0; opacity: 0; visibility: hidden; text-align: left; }
.header_gnb_bg .sub li {margin-bottom: 3px;}
.header_gnb_bg .sub li:last-child {margin-bottom: 0;}
.header_gnb_bg .sub a {font-size: 15px; position: relative; top: 0; left: 0; }
.header_gnb_bg:hover::after {height: 140px; transition:height 0.6s;}
.header_gnb_bg:hover .sub {width: 100%; height: auto; opacity: 1; visibility: visible; position: absolute; left: 0; top: 80px; z-index: 9; line-height: 2; transition:opacity 0.2s 0.2s;}
.header_gnb_bg:hover .sub a {color: #212121; font-weight: 400; line-height: 1.6;}

.header_btn{width:10%;display: flex; justify-content: flex-end;}
.header_btn .language_btn{width:100%; position: relative; text-align:center;}
.header_btn .language_btn>a{color:#fff; font-weight: 700; width:100%; text-align:center;}
.header_btn .language_btn ul{position:absolute; top:53px; width:50%; left: 50%; transform:translateX(-50%); display: none; background:#fff; padding:5px 10px; border-radius:12px; box-shadow:0px 4px 4px rgba(0,0,0,0.1);}
.header_btn .language_btn ul li a{display:block; font-size:15px; color:#121212; padding:5px 0; text-align:center;}


.f-nav .header_gnb_bg .nav_ul > li > a, .header_t_on .header_gnb_bg .nav_ul > li > a {color: #212121;}
.f-nav .header_btn .language_btn a, .header_t_on .header_btn .language_btn a {color:#212121;}


.header_t_on #all_nav {max-width: 720px;}

.bg-overlay {position: fixed; top:0; left:0; width: 100%; height: 0; background: rgba(0,0,0,0.5); z-index: 6; opacity: 0; transition: opacity 0.6s;}
.header_t_on + .bg-overlay {opacity: 1; height: 100%; }

/* 햄벅 */
.mo_nav		{display:none; }
.mo_nav .navbar-toggle {position: relative; background-color:transparent; background-image:none; padding: 0; border:0;}
.mo_nav .navbar-toggle .icon-bar {margin-bottom: 8px; background:#212121; display:block; width:40px; height:3px; border-radius:3px;}
.mo_nav .navbar-toggle .icon-bar:last-of-type {margin-bottom: 0;}

@media(max-width:1080px){
	.mo_nav{display:block;}
	.header_btn .login_btn, .header_btn .language_btn{display: none;}
	.header_btn, .header_logo{width:40%;}
	.header_t{justify-content: space-between;}
	.header_gnb_bg {display: none;}
}

/************************* header 끝*************************/

/************************* main 시작*************************/
.flx {display: flex; flex-flow:row wrap;}
.inner {width: 100%; max-width:1600px; margin: 0 auto;}
.company-desc-dl {padding-top: 25px;}
.dl-item {padding-bottom: 20px;}
.dl-item dt {font-weight: bold;}

.main_visual {position:relative; margin:0 auto;}
@media(max-width:768px){
	.main_visual {height:600px; overflow: hidden;}
	.main_visual div {padding: 0 !important;}
	.main_visual iframe {width: 1080px !important; height: 620px !important;  left: 50% !important; transform:translateX(-50%);}
}

.m-tit {font-size: 62px; font-weight: 700; line-height: 1.3;}

.main2 {padding: 140px 0;}
.main2 p {font-size: 22px; font-weight: 700; margin-bottom: 13px;}

.main3 {width: 40%; margin: 0 auto; background: linear-gradient(135deg, rgba(0,161,233,1) 0%, rgba(255,204,0,1) 100%); padding: 170px 0; opacity: 0; border-radius:150px; transition:1.2s ease all;}
.main3.on {width: 100%; opacity: 1; border-radius:0;}
.main3 .main_num ul {justify-content: space-between;}
.main3 .main_num ul li		{padding:0px 0; position:relative; color:#fff;}
.main3 .main_num ul li h3	{font-size:72px; font-weight:700; }
.main3 .main_num ul li p	{font-size:32px; opacity: 0.7;}

.main4 {text-align: center; padding-top: 130px;}
.main4 .box2 {padding-bottom: 115px;}
.main4 .box2 img {width: 75%; max-width: 467px;}
.main4 .link-ani {margin-top: 30px;}


@keyframes linkAni {
	0% {margin-top: 20px;}
	100% {margin-top: 0px; opacity: 1;}
}


@media(max-width:1600px){
.inner {padding: 0 4%;}
	
.m-tit {font-size: 58px;}

.main2 {padding: 130px 0;}
.main2 p {font-size: 21px;}

.main3 { padding: 160px 0;}
.main3 .main_num ul li h3 {font-size:68px; }
.main3 .main_num ul li p {font-size:30px; }

.main4 {padding-top: 120px;}
.main4 .box2 {padding-bottom: 100px;}
.main4 .link-ani {margin-top: 25px;}
}


@media(max-width:1080px){
.m-tit {font-size: 42px;}

.main2 {padding: 80px 0;}
.main2 p {font-size: 19px; margin-bottom: 10px;}

.main3 { padding: 110px 0;}
.main3 .main_num ul li {width: 100%; text-align: center; margin-bottom: 5%;}
.main3 .main_num ul li h3 {font-size:56px; }
.main3 .main_num ul li p {font-size:24px; }

.main4 {padding-top: 90px;}
.main4 .box2 {padding-bottom: 70px;}
.main4 .link-ani {margin-top: 20px;}
}


@media(min-width:768px){
	.link-ani:hover span {opacity: 0; animation: linkAni .3s .3s forwards;}
	.link-ani:hover .bg {background-color: #f60;}
}

/************************* main 끝*************************/


/************************* 서브 CSS 시작 *************************/
.s-tit h2 {font-size: 48px; font-weight: 700;}
.s-tit h2 span {color: #f60;}
.s-tit p {margin-top: 0.9em;}


.s11 {margin-top: 80px;}
.s11-1 .sct {position: relative; align-items: center; height: 100vh;}
.s11-1 .sct .desc-box {width: 640px;}
.s11-1 .sct .bg-box {position: absolute; top: 0; width: 50%; height: 100%; z-index: -1; background-color: #212121; overflow: hidden;}
.s11-1 .sct .bg-box img {width: 100%; height: 100%; object-fit: cover;}

@media(max-width:1440px){
	.s11-1 .sct .desc-box {width: 80%; padding:40px 4%; box-shadow:0px 4px 8px rgba(0,0,0,0.1); background-color: rgba(255,255,255,0.95); border-radius:20px;}
	.s11-1 .sct01 ul li {box-shadow: 0 1px 4px rgba(0,0,0,0.1);}
	.s11-1 .sct02 .graph-wrap {box-shadow: 0 1px 4px rgba(0,0,0,0.1);}
}
@media(max-width:1080px){
	.s11-1 .sct {padding:12% 0; height: auto;}
	.s11-1 .sct .desc-box {width: 100%;}
	.s11-1 .sct .bg-box {width: 100%;}
}


.s11-1 .sct01 .bg-box {right: 0;}
.s11-1 .sct01 ul {margin-top: 60px;}
.s11-1 .sct01 ul li {margin-right: 15px; padding-top: 52px; width: 200px; min-height: 200px; border-radius:20px; text-align: center; background-color: #fafafa;}
.s11-1 .sct01 ul li:last-child {margin-right: 0;}
.s11-1 .sct01 ul li h4 {margin-top: 0.6em; display: flex; justify-content: center; align-items: center; min-height: 52px; font-weight: 500;}

@media(max-width:1080px){
	.s11-1 .sct01 ul {margin-top: 40px;}
	.s11-1 .sct01 ul li {margin-right: 2%; width: 32%; padding-left: 10px; padding-right: 10px;}
	.s11-1 .sct01 .bg-box {background-position: center bottom;}
}

.s11-1 .sct02 .desc-box {float:right;}
.s11-1 .sct02 .bg-box {left: 0;}


.s11-2 {background-color: #fafafa;}
.s11-2 .sct-wrap {padding:150px 0 143px; justify-content: space-between; min-height:800px;}
.s11-2 .history-wrap {width: 39.5%; float: right;}
.s11-2 .history-wrap-left {float: left;}
.s11-2 .his-year li {position: relative; margin-bottom: 50px; z-index: 0;}
.s11-2 .his-year li:before {position: absolute; content:''; display: inline-block; top: 12px; right: 10px; width: 1px; height: 84px; background-color: #212121; z-index: -1;}
.s11-2 .his-year li a {padding-right: 3px; display: flex; justify-content: space-between; align-items:center; width: 114px; font-size: 22px; font-weight: 700; color: #212121;}
.s11-2 .his-year li.on a {padding-right: 0;}
.s11-2 .his-year li a:after {content:''; display: inline-block; width: 14px; height: 14px; background-color: #212121; border-radius:100%; transition:.3s ease all;}
.s11-2 .his-year li.on a:after {width: 20px; height: 20px; background-color: #fff; border:4px solid #f60;}
.s11-2 .his-cont {position: relative; width:calc(100% - 114px); }
.s11-2 .his-cont ul {display: none; opacity: 0; padding-left: 58px; width: 100%;opacity: 0; visibility: hidden;}
.s11-2 .his-cont ul.on {display: block; animation: fade-in 1s; animation-fill-mode: forwards;}
.s11-2 .his-cont .year {margin-bottom: 0.5em; display: inline-flex; justify-content: center; align-items: center; width: 105px; height: 39px; border-radius:39px; background-color: #f60; color: #fff; font-size: 17px; font-weight: 500; text-align: center;}
.s11-2 .his-cont li {margin-bottom: 27px;}


@keyframes fade-in {
  from {
	transform:translateY(25px); 
    opacity: 0;
	visibility: hidden;
  }
  to {
	transform:translateY(0); 
    opacity: 1;
	visibility: visible;
  }
}
/************************* 서브 CSS 끝 *************************/