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

:root {
  --main-color : #0072da;
  --main-hover-color : #005eb4;
  --line-color : #aaa;
  --red-color : #de3737;
  --grey-dark-color : #333;
  --grey-light-color : #666;
  --grey-color : #888;
  --border-color : #ddd;
  --grey-background-color : #f8f8f8;
}

body { font-family:'Noto Sans KR', sans-serif; font-size:16px; font-weight:400; letter-spacing:-0.03em; color:var(--grey-light-color); }
a { cursor: pointer; color:var(--grey-light-color); }

/* Font Style */
h1, h2, h3, h4, h5 { font-family: 'Noto Sans KR', sans-serif; }
h1 { font-size: 100px; }
h2 { font-size: 70px; }
h3 { font-size: 30px; }
h3.en { font-size: 50px; }
h4 { font-size: 28px; }
h5 { font-size: 22px; }

.f-35 { font-size: 35px; }
.f-28 { font-size: 28px; }
.f-24 { font-size: 24px; }
.f-22 { font-size: 22px; }
.f-20 { font-size: 20px; }
.f-18 { font-size: 18px; }
.f-16 { font-size: 16px; }
.f-14 { font-size: 14px; }
.f-12 { font-size: 12px; }

.en { font-family: 'Inter', sans-serif; }
.ko { font-family: 'Noto Sans KR', sans-serif; }
.container { float:none; width:100%; max-width:1170px; margin: 0 auto; padding:90px 0; }
.text-center { text-align:center; }
.text-left { text-align:left; }

/* Header */
#hd { background: #fff; }
#hd_wrapper { position: relative; width:100%; height:100px; }
#hd_wrapper .at-container { display:block; margin:0 auto; padding:0 20px; max-width: 1500px; width: 100%; height:100px; }
#hd_wrapper #logo { position: relative; padding: 0; z-index: 10; }
#hd_wrapper #logo > a { display: inline-block; line-height:100px; }
#hd_wrapper #gnb + div.hd_bg { position: absolute; left: 0; top: 100px; width: 100%; height: 0; background: #fff; opacity: 0; transition: all 0.5s; z-index: 9; }
#hd_wrapper #gnb:hover + div.hd_bg { height: 300px; opacity: 1; }
#hd_wrapper > .line { position: absolute; top: 100px; left: 0; width: 100%; height: 1px; background: var(--border-color); z-index: 9; }
#gnb { position: relative; display: inline-block; float: right; z-index:10; }
#gnb .gnb_wrap { width:auto; }
#gnb .gnb_mnal { display:none; }
#gnb_1dul { border-bottom:0px; }
#gnb_1dul .gnb_1dli { line-height: 100px; }
#gnb_1dul .gnb_1dli > a:after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -2px; background: var(--main-color); width: 0%; height: 2px; transition: all 0.5s; }
#gnb_1dul .gnb_1dli:hover > a:after { width: 90%; left:5%; right:5%; }
#gnb_1dul .gnb_1da { padding: 0 35px; font-weight: 400; color: var(--grey-dark-color); }
#gnb_1dul .gnb_2dul { display:block; position: absolute; top: 100px; width: 100%; height: 0; padding: 35px 0; text-align: center; opacity: 0; overflow:hidden; transition: all 0.5s; }
#gnb_1dul:hover .gnb_2dul { height: 300px; opacity: 1; }
#gnb_1dul .gnb_2dul .gnb_2dul_box { border: 0px; -webkit-box-shadow: 0px 0px 0px rgb(97 97 97 / 20%); -moz-box-shadow: 0px 0px 0px rgba(97, 97, 97, 0.2); box-shadow: 0px 0px 0px rgb(97 97 97 / 20%); }
#gnb_1dul .gnb_2da { position: relative; background: transparent; line-height: 38px; text-align:center; color: var(--grey-light-color); }
#gnb_1dul a.gnb_2da:hover { color: var(--grey-dark-color); background: #fff; font-weight:500; transition: all 0.5s; }

/* Footer */
#ft { background: #262626; }
#ft .at-container { max-width:1500px; width:100%; padding: 44px 20px; margin:0 auto; }
#ft .ft_cnt { float:none; width:100%; padding:0; text-align:left; }
#ft_copy { width:100%; border-top:0px; text-align:left; }
#ft_link { margin-left: -10px; margin-right: -10px; padding-left:0; padding-right:0; }
#ft_link a { display: inline-block; line-height: 26px; padding: 10px; font-weight: 500; color: #fff; }
#ft_company.ft_cnt { display: flex; padding: 36px 0; color: var(--grey-color); }
#ft_company > p { width:310px; }
#ft_company > p:nth-of-type(1) { line-height:32px; }
#ft_company > p:nth-of-type(2) { height:26px; line-height:26px; padding:3px 0; }
#ft_company > p:nth-of-type(2) > span { color:#fff; }
#ft_company > p:nth-of-type(2) > strong { display: inline-block; padding: 7px 0 13px; font-size:35px; font-weight:700; line-height:28px; letter-spacing:0; color:#0072da; }
#ft_company > p:nth-of-type(3) { margin-left: auto; padding-top:10px; text-align:right; }
#ft_company > p:nth-of-type(3) > a { display: inline-block; }


/* Main Visual */
#visual { overflow:hidden; display: flex; width: 100%; height: 860px; }
#visual > .container { position: absolute; margin: 0 auto; padding-top:480px; max-width: 1170px; width: 100%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: 2; }
#visual .swiper-wrapper .swiper-slide { background-repeat: no-repeat; background-position: center center; background-size: cover; }
#visual .caption > h2 { display: flex; width: 100%; margin:143px 0 46px; color: #fff; font-weight: 800; }
#visual .caption > p { opacity:0; margin-bottom:32px; font-weight: 400; line-height: 40px; color: #fff; }


/* pagenation */
#visual > .container > .swiper-pagination { position: relative; text-align: left; }
#visual > .container > .swiper-pagination > .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,14px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,14px)); }

/* scrolldown */
#visual .scrolldown { position: absolute; left: calc(50% - 100px); bottom: 70px; z-index: 3; opacity:0; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 200px; height: 110px; /*padding-top: 60px;*/ text-align:center; }
#visual .scrolldown > .txt { position: absolute; width:100%; left:50%; bottom: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); font-family: 'Inter', sans-serif; font-weight:300; letter-spacing:0.05em; text-transform:uppercase; background:transparent; color:#fff; }
#visual .scrolldown > .arrow { position: absolute; top: 0; left: 50%; width: 30px; height: 30px; z-index:-1; margin-left: -12px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); animation: arrow-animation 2s infinite; opacity: 0; box-sizing: border-box; }
#visual .scrolldown > .arrow:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
#visual .scrolldown > .arrow:nth-of-type(2) { top: 16px; -webkit-animation-delay: .15s; animation-delay: .15s; }
#visual .scrolldown > .arrow:nth-of-type(3) { top: 32px; -webkit-animation-delay: .3s; animation-delay: .3s; }

/* Animation */
#visual .swiper-wrapper .swiper-slide-active { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); /*-webkit-transition: transform 4000ms ease-in-out; transition: transform 4000ms ease-in-out;*/ }
#visual .swiper-wrapper .swiper-slide-active .caption > h2 > .char,
#visual .swiper-wrapper .swiper-slide-active .caption > p,
#visual .swiper-wrapper .swiper-slide-active .scrolldown { -webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
#visual .swiper-wrapper .swiper-slide-active .caption > h2  { -webkit-animation-delay:0.2s; animation-delay:0.2s; }
#visual .swiper-wrapper .swiper-slide-active .caption > p { -webkit-animation-delay:0.9s; animation-delay:0.9s; }

@keyframes arrow-animation {
	0% { opacity: 0;  }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

@-webkit-keyframes arrow-animation {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}



@media screen and (max-width:1170px) {	
	#visual > .container { max-width: 100%; }
}

@media screen and (max-width:768px) {
	#visual { height: calc(100vh - 60px); }
	#visual > .container { padding-top: 400px; }
	#visual .caption > h2 { margin: 100px 0 20px; font-size: 45px; }
	#visual .caption > p { margin-bottom: 22px; font-size: 16px; line-height: 28px; }

	#visual .scrolldown { bottom: 40px; width: 200px; height: 70px; }
	#visual .scrolldown > .arrow { width: 18px; height: 18px; }
	#visual .scrolldown > .arrow:nth-of-type(2) { top: 10px; }
	#visual .scrolldown > .arrow:nth-of-type(3) { top: 20px; }
	#visual .scrolldown > .txt { font-size:16px; }
}

@media screen and (max-width:480px) {
	#visual .swiper-wrapper .swiper-slide-active .container { padding:90px 30px; }
    #visual > .container > .swiper-pagination { padding-left:10px; }
}

/* Sub Visual */
#sub-visual { position:relative; height:290px; background-size: cover; background-position: center center; }
#sub-visual > h2 { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:50px; font-weight:700; letter-spacing:0; color: #fff; }

@media screen and (max-width:768px) {
	#sub-visual { height:160px; }
	#sub-visual > h2 { font-size:25px; }
}

/* Sub Menu */
#sub-menu { background:#151515; }
#sub-menu > .container { padding:0; }
#sub-menu > .container > ul { display:flex; list-style:none; margin:0; padding:0; }
#sub-menu > .container > ul > li { flex:1; position: relative; }
#sub-menu > .container > ul > li:after { position: absolute; top: 15px; right:0; content:""; width:1px; height:30px; background:var(--grey-light-color); }
#sub-menu > .container > ul > li:last-child:after { display:none; }
#sub-menu > .container > ul > li > a { display:block; height:60px; line-height:60px; font-size:20px; font-weight:400; color:#fff; text-align:center; }
#sub-menu > .container > ul > li.on { background:#fff; }

#sub-menu > .container > ul > li.on:after { display:none; }
#sub-menu > .container > ul > li.on > a { color:var(--grey-dark-color); }

@media screen and (max-width:768px) {
	#sub-menu > .container > ul > li:after { top: 10px; height:20px; }
	#sub-menu > .container > ul > li > a { height: 40px; line-height: 40px; font-size: 14px; }
}

/* Page Title */
#page-title { text-align:center; }
#page-title h3 { font-weight:700; color: var(--grey-dark-color); text-align:center; }
#page-title .location > ul { display:inline-block; }
#page-title .location > ul > li { position: relative; float:left; display: table; }
#page-title .location > ul > li:after { position: absolute; top: 22px; right:0; width:5px; height:5px; content:""; background:var(--grey-dark-color); }
#page-title .location > ul > li:last-child:after { display:none; }
#page-title .location > ul > li:last-child > a { color:var(--main-color); }
#page-title .location > ul > li > a { display: table-cell; vertical-align: middle; height:48px; line-height: 48px; padding:0 22px; color:var(--grey-dark-color); font-weight:400; }

@media screen and (max-width:768px) {
	#page-title .location > ul > li:after { top: 18px; }
	#page-title .location > ul > li > a { height:38px; line-height: 38px; }
}


#wrapper > .container { padding: 45px 0px; }