@charset "utf-8";
@import url('reset.css');
@import url('basic.css');


:root {

--point: #F18F2A;
--ff: 'Pretendard Variable';

}



/* 인트로 */
.hidden {
    visibility: hidden;
    opacity: 0;
}
.intro {
    position: fixed;
    display: flex;
    align-items: center;
	justify-content: center;
	flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: #0B0B12;
    z-index: 999999;
}
.intro .logoWrap {
	width:100%;
	text-align:center;
}
.intro .symbol {
	visibility: hidden;
	opacity: 0;
	width: 200px;
	margin:0 auto;
	display: none;
	transform: translateY(-10px);
}
.intro .logoTxt {
	visibility: hidden;
	opacity: 0;
	width: 150px;
	margin:0 auto;
	display:none;
	transform: translateY(0px);
}
.intro__title {
	max-width: 45%;
	text-align: center;
	mix-blend-mode: difference;
	z-index: 2;
	transform: translateY(0px);
	display:flex;
}

.intro__title li {
	color: white;
    font-size: 100px;
}
.header__logo {
	display: flex;
	align-items: center;
}
.header__logo img{max-width: 100px; width: 100%;}
.header__nav {
	letter-spacing: 0.05em;
}
.header__nav>*:not(:last-child) {
	margin-right: 8px;
}




/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft {width:100%;}

#hd_wrapper {width:100%;}

#hd_pop,
#tnb .inner,
#gnb .gnb_wrap,
#ft_wr {width:100%;}



/* 상단 레이아웃 */
#hd {position: relative; padding:0 30px; background-color: #0B0B12; z-index:99;}
#hd_h1 {position:absolute; font-size:0; line-height:0; overflow:hidden}

#hd_wrapper {display:flex; justify-content: space-between; align-items: center; width:100%; height:90px; margin:0 auto; zoom:1}

#hd_wrapper.pc {display:flex;}
#hd_wrapper.mobile {display:none;}

#logo {width: 18%; max-width: 185px; z-index:999;}

.brochure {display:flex; align-items: center; gap:5px; color:#fff; font-weight: 600; font-size: 15px;}
.brochure:hover {color: var(--point);}
.brochure:hover svg path {fill:var(--point); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}

/* 메인메뉴 */
#gnb {position:relative;}
#gnb h2 {position:absolute; font-size:0; line-height:0; overflow:hidden}

#gnb .gnb_wrap {position:relative; margin:0 auto;}
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3}

#gnb #gnb_1dul {display:flex; align-items:center; justify-content:space-between; font-size:1.083em; padding:0; zoom:1}
#gnb .gnb_1dli {position:relative; display:flex; line-height:80px; padding:0 20px; }
#gnb .gnb_1dli:hover > a {color:var(--point); transition:background-color 0.3s ease-out; -webkit-transition:background-color 2s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out;}
#gnb .gnb_1dli.on > a {color:var(--point);}

.gnb_1da {display:block; font-size:14px; color:#fff; text-decoration:none;}

.gnb_2dul {display:none; position:absolute; top:78px; left: 0; width:145px; padding-top:2px; margin-left: -7px;}
.gnb_2dul .gnb_2dul_box {height: auto; padding:5px 0; background: #fff; border:1px solid #e0e2e5; border-top:0; overflow: hidden; 
box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); -webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); -moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); }

.gnb_2da {display:block; padding:5px 10px; line-height:130%; font-size:14px; color:#000; font-weight:500; text-decoration:none; background:#fff;}
.gnb_2da:hover {color:#fff; background:#000; transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; }

.gnb_2dli:first-child {border:0}
.gnb_2dli a {text-align:center;}

.gnb_1dli_air .gnb_2da {}
.gnb_1dli_on .gnb_2da {}
.gnb_2da:focus, .gnb_2da:hover {color:#fff}
.gnb_1dli_over .gnb_2dul {display:block;left:0}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0}

.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808}
.gnb_wrap .gnb_empty a {color:#3a8afd; text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555}

#gnb .gnb_menu_btn {background:#4158d1;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px}
#gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0}
#gnb .gnb_mnal {float:right;padding:0}

#gnb_all {display:none;position:absolute;border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2); box-shadow:0 2px 5px rgba(0,0,0,0.2)}
#gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef}
#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}



/* 중간 레이아웃 */
#wrapper {margin:0;}
#container_wr {margin:0 auto;zoom:1}

#container {z-index:4; position:relative; width:100%; min-height:500px; height:auto !important; margin:0 auto; font-size:1em; zoom:1}
#container_sub {width:100%; margin:0px auto ; min-height:300px; height:auto !important; height:300px; font-size:1em;zoom:1}
#container_title {font-size:1.333em; margin:0 auto; font-weight:bold;}
#container_title span{margin:0 auto 10px; display:block; line-height:30px;}

.lt_wr {width:32%}
.lt_wr:nth-child(3n+1) {clear:both}
.latest_wr {margin-bottom:20px}
.latest_top_wr {margin:0 -10px 20px}



/* 하단 레이아웃 */
#ft			{position:relative; width:100%; background-color: #0B0B12;}
.ft_wr		{display:flex; justify-content:space-between; align-items:center; width:100%; max-width:1600px; margin:0 auto; padding: 50px 0 60px;}

.ft_left {width:20%;}
.ft_left .ft_catch img {max-width: 70px; margin: 0 0 10px;}
.ft_left .ft_copy {font-size:12px; color:#fff; font-family: var(--ff); font-weight: 400;}


.ft_right {display:flex; flex-direction: column; gap:30px; width:34%;}
.ft_right .ft_link {display: flex; justify-content:flex-end; align-items:center; gap: 40px;}
.ft_right .ft_link a {font-size: 15px; color:#fff; font-family: var(--ff);; font-weight: 500;}

.ft_right .ft_company {display:flex; justify-content: space-between;}
.ft_right .ft_company ul {width:48%;}
.ft_right .ft_company ul li {font-size: 13px; color:#818181;}

.ctext {position: fixed; bottom: 0; right: 0; width: max(120px, 100px); height: max(120px, 100px);}
.ctext svg{animation: rotation 8s infinite linear;}
.ctext textPath  {font-size:12px; fill:#fff;}
.ctext .arrow {position: absolute; left: 0; top: 0; display: inline-flex; justify-content: center; align-items: center; width: 100px; height: 100px;}

@keyframes rotation {
	from    {transform: rotate(0deg);}
	to      {transform: rotate(359deg);}
}


/* main con */
strong, p, span {word-wrap:break-word; word-break:keep-all;}



/* main */

main {background: #0B0B12;}

main * {color: #fff;}

#wrapper {position:relative; height:auto;}
.three_bg {position:relative;}
.three_bg h1 {width:100%; font-size:80px; text-align:center;}
.three_bg .conWrap ull {display: flex; width: 100%; gap: 30px; height: 50vh;}
.three_bg > div:not(.text01) {position:absolute; left: 0; top:0; z-index: -1;}


#action01 {display: flex; flex-wrap: wrap; left: 0; width: 100%; height: calc(100vh - 90px); color: #b9b3a9; background: transparent; overflow: hidden;}
#action01 .pin-wrap {height: 62vh; display: flex; justify-content: flex-start; align-items: center; padding: 30px 10vw;} 
#action01 .pin-wrap li {min-width: 45vw; padding: 0 2.5vw;}
#action01 img {width: auto; object-fit: cover;}
#action01 .pin-wrap li a:not(.lt_img) {display: inline-block; width: 100%; color:#fff; background: #000; padding:5px;}
#action01 .text01 p {filter: blur(20px); opacity: 0; transition: 1.5s; text-align: center;}
#action01 .text01 p span {display: inline-block; font-size: 100px;}


#action02 {position:relative; display: flex; align-items: center; justify-content: center; width: 100%; height:100vh;}
#action02 img {position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: 0;}
#action02 #leftTop {position: relative; left: 0; top: 0; text-align: center; z-index: 999;}
#action02 #leftTop strong {display: block; font-size: 60px; font-weight: 500 !important;}
#action02 #leftTop h2 {display: block; margin: 0 0 20px; font-size: 70px; font-weight: 900;}
#action02 #leftTop p {display: block; font-size: 22px;}


#action03 {position:relative; display: flex; align-items: center; justify-content: center; flex-wrap:Wrap; width: 100%; height:100%; padding:100px 0;}
#action03 h4 {width:100%; margin: 0 0 40px; text-align: center; font-size: 65px;}
#action03 ul {display: flex; justify-content: center; gap: 5vw; margin: 0 0 100px;}
#action03 li {display: flex; align-items: center; flex-direction: column; text-align: center; width: 22%;}
#action03 li strong {display: block; font-size: 50px; font-weight: 800 !important; line-height: 130%;}
#action03 li p {color:rgba(255,255,255,.5); line-height: 35px; font-size: 20px;}

#action03 li:nth-child(1) strong {margin:57px 0 30px;}
#action03 li:nth-child(2) {margin:86px 0 0;}
#action03 li:nth-child(2) strong {margin:70px 0 30px;}
#action03 li:nth-child(3) strong {margin:53px 0 30px;}


#action03 .more {display: inline-block; padding:14px 80px; text-align: center; color:#fff; font-size: 20px; border: 1px solid #fff; border-radius: 35px;}


#action04 {position:relative; display: flex; align-items: center; justify-content: center; flex-wrap:Wrap; width: 100%; height:100%; min-height: 80vh !important;}
#action04 .textWrap {position:relative; width:100%; text-align: center; z-index: 999;}
#action04 .textWrap h4 {font-size: 80px; line-height: 110%; font-weight: 600;}
#action04 .textWrap h4:last-of-type {margin: 0 0 90px;}
#action04 img {position:absolute; left:auto; top:auto; right:auto; bottom:auto; width:auto; max-width:1600px; margin: 0 auto;}

#action04 .more {display: inline-block; padding:14px 80px; text-align: center; color:#fff; font-size: 20px; border: 1px solid #fff; border-radius: 35px;}


/* sub */





/* sub 공통 */







@media (max-width:1440px) {



}


@media (max-width:1024px) {



}


@media (max-width:900px) {



}


@media (max-width:768px) {


}



@media (max-width:440px) {


}