@charset "utf-8";
@import url('/design2025/common/css/pretendard-subset.css');
@import url('/design2025/common/css/FlightSans.css');

:root {
	--p_color : #7A1FC5;
	--blue : #003BDD;
	--green : #099194;
}
@media all and (max-width:1023px){
	html {font-size:0.9px; }
}
@media all and (max-width:768px){
	html {font-size:0.85px; }
}

html {scroll-behavior: auto !important;}
body { font-family:'Pretendard', sans-serif; font-weight:400; letter-spacing:-0.5rem; font-size:17rem; color:#333; }
html, body {overflow:unset;}
input, select, button { font-family:'Pretendard', sans-serif; letter-spacing:-0.5rem; font-size:17rem; color:#222; }
strong {font-weight:600; }
a { color:#222; }
.wrap { max-width:1300px; width:96%; margin:0 auto;}
.mar_t0 {margin-top:0 !important;}

header { position:fixed; display:flex; align-items:center; justify-content:space-between; left:0; top:0; width:100%; height:110rem; padding:0 2%; z-index:10; }
header a.logo { display:flex; align-items:center;}
header a.logo .white { display:none; }
.pc_nav > .depth1 > li > a { font-size:21rem; padding:20rem 25rem;}
/*.pc_nav .depth2_wrap,
.pc_nav .depth2_wrap::after { top:110rem; }
.pc_nav+.nav_bg { top:0; }
.pc_nav.ver2 .depth2_wrap {z-index:auto; }
.pc_nav.ver2 .depth2_wrap::before { height:calc(100% + 111rem); top:-111rem; z-index:-1;}
.pc_nav.ver2+.nav_bg {z-index:-2;}*/
.pc_nav .depth2_wrap { top:70rem; }/*펼침메뉴 위치*/
.pc_nav .depth2 { min-width:200rem; background:#fff; border-color:#ddd; }/*2차메뉴 가로사이즈, 배경색상, 테두리색상*/
.pc_nav .depth2 > li > a { border-bottom:1px solid #efefef; }/*2차메뉴 구분선 색상*/
.pc_nav .depth3 { left:199rem; width:200rem; background:#efefef; border:1px solid #dedede; }/*3차메뉴 오픈위치, 가로사이즈, 배경색상*/
.pc_nav+.nav_bg {display:none;}
header .right {display:flex;}
header .right > a { margin-left:20rem;}
header .right a div.icon { display:flex; align-items:center; justify-content:center; width:50rem; height:50rem; margin-bottom:5rem;  border-radius:50%; }
header .right a div.icon .icon_white {display:none;}
header .right a.industry_map div.icon { border:1px solid #222; }
header .right a.sitemap div.icon { position:relative; background:rgba(40,40,40,0.4);}
header .right a.sitemap div.icon::before { content:''; position:absolute; left:50%; top:50%; width:40rem; height:40rem; background:rgba(40,40,40,1); transform:translate(-50%, -50%); border-radius:50%; z-index:1; }
header .right a.sitemap div.icon img {position:relative; z-index:2; }
#m_nav_open {display:none;}

header.header_white a.logo,
header.header_white .pc_nav > .depth1 > li > a {color:#fff; } 
header.header_white a.logo .black { display:none; }
header.header_white a.logo .white { display:block; }
header.header_white .right > a {color:#fff;}
header.header_white .right a.industry_map div.icon { border:1px solid #fff; }
header.header_white .right a.sitemap div.icon { background:rgba(255,255,255,0.4);}
header.header_white .right a.sitemap div.icon::before { background:#fff; }
header.header_white .right a div.icon .icon_white {display:block;}
header.header_white .right a div.icon .icon_black {display:none;}

header.fixed { height:70rem; background:#fff; box-shadow:0 0 10rem rgba(0,0,0,0.2); animation:headerDown 0.5s ease-in-out; }
header.fixed .right > a span { position:absolute; left:-9999px; top:-99999px; }
header.fixed .right a div.icon {margin-bottom:0; }
header.fixed .pc_nav .depth2_wrap, 
header.fixed .pc_nav .depth2_wrap::after {top:70rem;}
@keyframes headerDown {
    0% {top:-100%;}
    100% {top:0;}
}

footer { background:#1C2230; color:#fff; padding:60rem 30rem; text-align:center; }
footer .address p {margin:5rem 0;}
footer .address p strong {margin-right:20rem; }
footer .copy { font-size:14rem; opacity:40%; margin-top:20rem; letter-spacing:0; }

@media all and (max-width:1200px){
    .pc_nav > .depth1 > li > a {font-size:19rem; padding:5rem 20rem;}
}
@media all and (max-width:1023px){
    .pc_nav,
    header .right a.sitemap {display:none;}
    #m_nav_open {display:block;}
    footer {padding:60rem 30rem;}
}

/*main&sub 공통*/
.content_wrap > .cont1 { position:sticky; left:0; top:0; width:100%; height:100vh; background:#000; overflow:hidden; line-height:1.3; z-index:1; }
.content_wrap > .cont1::before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:url('/design2025/industry/img/main/cont1_bg.png') no-repeat center/cover; z-index:1; opacity:40%; }
.content_wrap > .cont1 video {width:100%; height:100%; object-fit:cover; opacity:60%; }
.content_wrap > .cont1 .title { position:absolute; width:100%; left:0; top:50%; text-align:center; color:#fff; transform:translateY(-50%); z-index:2; }
.content_wrap > .cont1 div.title { font-family:'FlightSans'; font-size:90rem; font-weight:600; } 
.content_wrap > .cont1 .scroll_down { position:absolute; left:50%; bottom:0; transform:translateX(-50%); text-align:center; color:#fff; text-transform:uppercase; letter-spacing:1px; font-size:13rem; z-index:2; }
.content_wrap > .cont1 .scroll_down .motion { position:relative; width:2px; height:80rem; overflow:hidden; margin:15rem auto 0; }
.content_wrap > .cont1 .scroll_down .motion:after,
.content_wrap > .cont1 .scroll_down .motion:before { content: ""; position: absolute; top: 0; left: 0; background: #fff; }
.content_wrap > .cont1 .scroll_down .motion:before { bottom: 0; width: 1px; height: 100%; opacity: 0.3;  }
.content_wrap > .cont1 .scroll_down .motion:after { width: 100%; animation: scroll-down-line 2.5s infinite }
@keyframes scroll-down-line {
    0%,20% {
        top: -45%;
        height: 45%
    }

    80%,to {
        top: 145%;
        height: 45%
    }
}
@media all and (max-width:1200px){
    .content_wrap > .cont1 div.title { font-size:60rem; }
}
@media all and (max-width:768px){
    .content_wrap > .cont1 div.title { font-size:40rem; }
}

/*sub*/
.content_wrap > .cont1.sub { min-height:450rem; height:55vh; }
.content_wrap > .cont1.sub .title { top:55%; }
.content_wrap > .cont1.sub .title dt { font-family:'FlightSans'; font-size:75rem; font-weight:600; }
.content_wrap > .cont1.sub .location { margin-top:30rem; }
.content_wrap > .cont1.sub .location,
.content_wrap > .cont1.sub .location li { display:flex; align-items:center; justify-content:center; }
.content_wrap > .cont1.sub .location li::after { content:''; width:5rem; height:5rem; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin:0 10rem; }
.content_wrap > .cont1.sub .location li:last-of-type::after {display:none;}
.content_wrap > .cont1.sub .location li:last-of-type a {font-weight:800;}
.content_wrap > .cont1.sub .location li a { display:block; color:#fff; font-family:'Pretendard', sans-serif; font-weight:400; font-size:18rem; }
.content_wrap > .cont1.sub .location li a img {margin-top:-5rem; }
.sub_util {justify-content:center; margin-top:20rem; }
.sub_util li > a { justify-content:center; width:40rem; height:40rem; border-radius:50%; background:#fff; }
.sub_util li > a::before {margin-right:0; }
.sub_util .share div { top:45rem; display: flex; visibility: hidden; width:auto; border:0; background:transparent; opacity: 0; transition: all 0.3s ease-in-out; padding:0; }
.sub_util .share > div.active {visibility: visible; opacity: 1;}
.sub_util .share div a { justify-content:center; width:35rem; height:35rem; border-radius:50%; background:#ccc; margin:0 3rem; border:0;  }
.sub_util .share div a::after {margin:0 !important; }
#content { position:relative; background:#fff; padding:60rem 0; z-index:2; }
@media all and (max-width:1023px){
    .content_wrap > .cont1.sub { min-height:350rem; }
    .content_wrap > .cont1.sub .title dt { font-size:60rem; }
}
@media all and (max-width:768px){
    .content_wrap > .cont1.sub .title dt { font-size:45rem; }
}