@charset "utf-8";

/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */
#main #fixed_video{position:fixed; width:100%; height:100%}
#main #fixed_video .swiper-container,
#main #fixed_video .swiper-wrapper,
#main #fixed_video .swiper-slide{width:100%; height:100%; background-color: #000;}
#main #fixed_video .index-video{width: 100%; height:100%; object-fit: cover; z-index: -100; top: 0; left: 0; overflow: hidden;}

#main .wrap_main_text{position:fixed; width:100%; top:50%; margin-top:-84px; text-align:center; z-index:10;}
#main .wrap_main_text .main_text .txt_set{display:inline-block; color:#fff; }
#main .wrap_main_text .main_text .txt_set .main_word{margin-top:12px; font-size:130px; font-weight:500; letter-spacing:-0.25px}
#main .wrap_main_text .main_text .txt_set .txt1{font-family: 'Roboto Mono', monospace; font-size:16px; font-weight:300; letter-spacing:-0.4px}
#main .wrap_main_text .main_text .txt_set .txt1 strong{font-family: 'Noto Sans KR', sans-serif; font-size:15px}
#main .wrap_main_text .main_text .txt_set .txt2{margin-top:9px; font-family: 'Spoqa Han Sans', 'Sans-serif'; font-size:16px; letter-spacing:-0.5px; opacity:.8}

#main .wrap_main_shape{position:fixed; width:100%; height:100%; top:0;  z-index:10; color:#bbb}
#main .wrap_main_shape .main_shape,
#main .wrap_main_shape .main_shape .swiper-wrapper{height:100%;}
#main .wrap_main_shape .main_shape .swiper-slide{position:relative; width:100%; height:100%;}
#main .wrap_main_shape .main_shape .swiper-slide svg{position:absolute; left:50%; top:50%; opacity:0; transition:opacity .5s ease-out}
#main .wrap_main_shape .main_shape .swiper-slide.swiper-slide-active svg{opacity:1}
#main .wrap_main_shape .main_shape .swiper-slide.challenge svg{width:717px; margin-left:-380px; margin-top:-230px}
#main .wrap_main_shape .main_shape .swiper-slide.passion svg{width:717px; margin-left:-400px; margin-top:-280px}
#main .wrap_main_shape .main_shape .swiper-slide.creation svg{width:456px; margin-left:-256px; margin-top:-350px}
#main .wrap_main_shape .main_shape .swiper-slide.ethics svg{width:465px; margin-left:-232px; margin-top:-360px}

/*#main .wrap_main_shape .main_shape .swiper-slide.swiper-slide-active{font-size:45px; opacity:1}*/

#main .hm_direction > div{position:fixed; top:50%; opacity:.5; z-index:20; transition:all ease-in-out .2s; user-select:none}
#main .hm_direction > div:hover{opacity:1}
#main .hm_direction .d_prev{left:111px; margin-top:-18px}
#main .hm_direction .d_prev:hover{left:107px}
#main .hm_direction .d_next{right:111px; margin-top:-54px}
#main .hm_direction .d_next:hover{right:107px;}
#main .hm_direction a{display:block; position:relative; font-family: 'Roboto Mono', monospace; font-size:13px; color:#fff; letter-spacing:1px; text-transform:uppercase; outline:none}
#main .hm_direction a:before{content:""; display:block; position:absolute; left:50%; width:1px; height:43px; background-color:#fff}
#main .hm_direction .d_prev a{padding-top:59px; transform-origin: left top 0}
#main .hm_direction .d_next a{padding-bottom:59px; transform-origin: right bottom 0}
#main .hm_direction .d_prev a:before{top:0}
#main .hm_direction .d_next a:before{bottom:0}

/*모바일*/
.mobile_area{display:none;}
#main #fixed_images{position:fixed; width:100%; height:100%}
#main #fixed_images:before,
#main #fixed_images:after{content:""; position:absolute; left:50%; width:1px; height:48px; background-color:rgba(255,255,255,.15); z-index:150}
#main #fixed_images:before{top:0}
#main #fixed_images:after{bottom:0}
#main #fixed_images .swiper-container,
#main #fixed_images .swiper-wrapper,
#main #fixed_images .swiper-slide{width:100%; height:100%}
#main #fixed_images .bg_vis{width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}
#main #fixed_images .swiper-slide.challenge .bg_vis{background-image:url('../images/contents/m_challenge_vis.jpg?210526'); animation: move1 25s ease-in-out forwards}
#main #fixed_images .swiper-slide.passion .bg_vis{background-image:url('../images/contents/m_passion_vis.jpg?210526'); animation: move1 25s ease-in-out forwards}
#main #fixed_images .swiper-slide.creation .bg_vis{background-image:url('../images/contents/m_creation_vis.jpg?210526'); animation: move1 25s ease-in-out forwards}
#main #fixed_images .swiper-slide.ethics .bg_vis{background-image:url('../images/contents/m_ethics_vis.jpg?210526'); animation: move1 25s ease-in-out forwards}


#main #fixed_images .shape{position:absolute; top:0; width:100%; height:100%; background-repeat:no-repeat}
#main #fixed_images .txt_set{position:absolute; left:0; top:50%; margin-top:-66px; width:100%; color:#fff; text-align:center}
#main #fixed_images .txt_set .main_text{margin-top:10px; font-size:50px; font-weight:500; line-height:1.15; letter-spacing:-0.25px}
#main #fixed_images .txt_set .txt1{font-family: 'Roboto Mono', monospace; font-size:13px; font-weight:300; letter-spacing:-0.4px}
#main #fixed_images .txt_set .txt1 strong{font-family: 'Noto Sans KR', sans-serif; font-size:13px; letter-spacing:-0.5px}
#main #fixed_images .txt_set .txt2{margin-top:15px; font-family: 'Noto Sans KR', sans-serif; font-size:12px; letter-spacing:-0.5px; opacity:.7}

#main #fixed_images .challenge .shape{background-image:url('../images/contents/challenge_shape2.svg'); background-position:calc(50% - 8px) calc(50% - 15px); background-size:269px auto;}
#main #fixed_images .passion .shape{background-image:url('../images/contents/passion_shape2.svg'); background-position: calc(50% - 11px) calc(50% - 25px); background-size: 272px auto}
#main #fixed_images .creation .shape{background-image:url('../images/contents/creation_shape2.svg'); background-position: calc(50% - 6px) calc(50% - 16px); background-size:208px auto;}
#main #fixed_images .ethics .shape{background-image:url('../images/contents/ethics_shape2.svg'); background-position: calc(50% - 1px) calc(50% - 26px); background-size: 188px auto;}

#main .hm_direction1 > div{position:fixed; top:50%; margin-top:167px; opacity:.3; z-index:20; transition:all ease-in-out .2s; user-select:none}
#main .hm_direction1 > div:hover{opacity:1}
#main .hm_direction1 .d_prev{left:116px;}
#main .hm_direction1 .d_prev:hover{left:115px}
#main .hm_direction1 .d_next{right:116px;}
#main .hm_direction1 .d_next:hover{right:115px;}
#main .hm_direction1 a{display:block; font-size:0; width:15px; height:10px; outline:none}
#main .hm_direction1 .d_prev a{background:url('../images/common/arw2_1.png') no-repeat 0 0; background-size:15px auto}
#main .hm_direction1 .d_next a{background:url('../images/common/arw2_2.png') no-repeat 0 0; background-size:15px auto}
#main .hm_direction1 .swiper-pagination{margin-top:164px; font-size:14px; font-weight:300; color:#fff; letter-spacing:0; opacity:1}