@charset "UTF-8";
/* 공통 */
.about { overflow: hidden; }

.section_title { text-align: center; }

.section_title h3 { display: inline-block; margin-bottom: 0 !important; }

.tab_contents.history .tab_box_content { min-height: 695px; height: auto; }

footer { margin-top: 0; }

.tab_menu_box ul li { width: 25%; }

.tab_menu_box ul li a { border: none; border-bottom: 1px solid #e2e2e2; }

.tab_menu_box ul li a:before { top: inherit; bottom: -1px; }

/* KV */
.kv { width: 100%; min-height: 100vh; transition: min-height ease-in-out 0.2s; }

.kv { min-height: 0; display: block; height: calc( 100vh + (56.25vw + ((100vh - 56.25vw) * 1))); }

.kv_screen { width: 100%; z-index: 3; height: calc(100vh - 90px); position: absolute; top: 0; left: 0; padding-top: 42px; }

.kv_animation { overflow: hidden; height: 100%; }

.kv_animation .inner { position: relative; width: 100%; overflow: hidden; display: block; height: 100%; }

.kv_animation .svg_wrap { position: relative; height: 100%; }

.kv_animation .svg_wrap .svg_wrap_inner { position: relative; left: 0; height: 100%; width: 100%; }

.kv_animation .svg_wrap .svg_wrap_inner .svg_text { width: 100%; }

.kv_animation .svg_wrap .svg_wrap_inner .svg_text:before { content: ''; display: block; width: 100%; padding-top: 100%; }

.kv_animation .svg_wrap .svg_wrap_inner .svg_text svg { display: block; position: absolute; width: calc(100% + 2px); height: calc(100% + 2px); top: -1px; left: -1px; }

.kv_animation .svg_wrap:after { content: ""; background: #fff; padding: 0; }

.kv_video { width: 100%; overflow: hidden; position: fixed; top: 0; }

.kv_video:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background-color: black; opacity: 0.5; transition: opacity 1s ease-in-out; }

.kv_video_cotainer { position: relative; width: 100%; height: 100%; transition: top 2s cubic-bezier(0.075, 0.82, 0.165, 1); }

.kv_video_cotainer { height: 100vh; background-color: #fff; }

.kv_video_cotainer video { position: absolute; bottom: 0; left: 0; transform-origin: center center; width: 100%; }

.kv_video_cotainer #video { opacity: 1; }

#background { position: absolute; width: 100%; height: 400%; top: 200vh; left: 0; background: white; }

.svg_animate { width: 100%; margin: 0 auto; position: relative; }

.svg_animate text { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 5.2083vw; }

svg rect { fill: #fff; }

.kv_sub_copy { position: absolute; left: 50%; top: calc(50% + 140px); transform: translate(-50%, -50%); width: 576px; height: 90px; text-align: center; }

.scroll_ico { width: 36px; height: 50px; position: absolute; bottom: 2.6042vw; left: 50%; z-index: 5; margin-left: -18px; -webkit-animation: scrolldown 2.5s infinite ease-in-out; -moz-animation: scrolldown 2.5s infinite ease-in-out; -o-animation: scrolldown 2.5s infinite ease-in-out; animation: scrolldown 2.5s infinite ease-in-out; }

@-webkit-keyframes scrolldown { 0% { -webkit-transform: translateY(-10px) translateZ(0); }
  50% { -webkit-transform: translateY(10px) translateZ(0); }
  100% { -webkit-transform: translateY(-10px) translateZ(0); } }

@-moz-keyframes scrolldown { 0% { -moz-transform: translateY(-10px) translateZ(0); }
  50% { -moz-transform: translateY(10px) translateZ(0); }
  100% { -moz-transform: translateY(-10px) translateZ(0); } }

@-o-keyframes scrolldown { 0% { -o-transform: translateY(-10px) translateZ(0); }
  50% { -o-transform: translateY(10px) translateZ(0); }
  100% { -o-transform: translateY(-10px) translateZ(0); } }

@keyframes scrolldown { 0% { transform: translateY(-10px) translateZ(0); }
  50% { transform: translateY(10px) translateZ(0); }
  100% { transform: translateY(-10px) translateZ(0); } }

.vision_mission { position: relative; z-index: 9;  margin-top: 150px;}

#bottom_wave, #top_wave { position: absolute; width: 100%; height: 30vh; overflow: hidden; opacity: 0; line-height: 1; z-index: 9; transform: translateY(0); }

#bottom_wave .section_wave, #top_wave .section_wave { width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }

#bottom_wave .section_wave > div, #top_wave .section_wave > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#bottom_wave .section_wave > div svg path, #top_wave .section_wave > div svg path { transform-origin: right !important; }

#bottom_wave { height: 80vh; opacity: 1; transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 2s cubic-bezier(0.075, 0.82, 0.165, 1), top 3s cubic-bezier(0.075, 0.82, 0.165, 1); }

.kv_wave_wrap { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(180deg); }

#top_wave { top: 0; opacity: 1; transition: opacity 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 2s cubic-bezier(0.075, 0.82, 0.165, 1), top 5s cubic-bezier(0.075, 0.82, 0.165, 1); }

#top_wave.down { top: -160px; }

.title_section h3 { width: 100%; margin: 0; padding: 0; text-align: center; color: #000; }

.logo_section { margin-top: 120px; }

@media all and (max-width: 1024px) { .logo_section { margin-top: 60px; } }

.copy_section { margin-top: 72px; display: flex; justify-content: center; align-items: center; }

@media all and (max-width: 1024px) { .copy_section { margin-top: 40px; } }

.copy_wrapper { width: 100%; max-width: 1070px; display: flex; justify-content: center; border: 1px solid #e6e6e6; border-radius: 550px; text-align: center; padding: 25px; }

.copy_wrapper .title_line { width: 100%; padding-bottom: 40px; }

@media all and (max-width: 1024px) { .copy_wrapper .title_line { padding-bottom: 28px; } }

.copy_wrapper .title_line::after { width: 100%; height: 1px; }

@media all and (max-width: 768px) { .copy_wrapper { flex-wrap: wrap; padding: 14px; } }

.copy_item { width: calc(50% - 10px); padding-top: calc(50% - 10px); position: relative; border-radius: 50%; }

.copy_item:first-child { margin-right: 20px; }

.copy_item_content { width: 100%; padding: 0 6%; position: absolute; top: 22%; left: 50%; transform: translate(-50%, 0%); }

.copy_item_content p { min-height: 120px; display: flex; justify-content: center; align-items: center; }

@media all and (max-width: 1200px) { .copy_item_content { padding: 0 10%; }
  .copy_item_content p { min-height: 90px; margin-top: 24px; } }

@media all and (max-width: 768px) { .copy_item_content { top: 50%; transform: translate(-50%, -50%); } }

.copy_item.mission { border: 1px solid #e51937; }

.copy_item.mission .title_line::after { background-color: #e5193720; }

.copy_item.vision { border: 1px solid #f47726; }

.copy_item.vision .title_line::after { background-color: #f4772620; }

@media all and (max-width: 768px) { .copy_item { width: 100%; padding-top: 100%; }
  .copy_item:first-child { margin-right: unset; margin-bottom: 14px; }
  .copy_item .mt38 { margin-top: 24px; } }

.value_list { display: flex; }

@media all and (max-width: 768px) { .value_list { flex-wrap: wrap; } }

.value_item { width: calc(33.3333% - 52px); }

.value_item:not(:last-child) { margin-right: 72px; }

@media all and (max-width: 768px) { .value_item { width: 100%; }
  .value_item img { width: 68px; }
  .value_item:not(:last-child) { margin-right: unset; }
  .value_item:not(:first-child) { margin-top: 40px; } }

.value_title { width: 100%; margin-top: 38px; padding-bottom: 18px; border-bottom: 1px solid #11111115; }

@media all and (max-width: 1024px) { .value_title { margin-top: 24px; } }

@media all and (max-width: 768px) { .value_title { margin-top: 16px; } }

.value_desc { margin-top: 46px; }

@media all and (max-width: 1024px) { .value_desc { margin-top: 24px; } }

.logo_section .sk_logo { width: 380px; margin: 0px auto 0px; }

.logo_section .sk_logo img { vertical-align: top; }

.test { height: 400px; }

.interview_title { margin-top: 220px; text-align: center; }

@media all and (max-width: 1024px) { .interview_title { margin-top: 80px; } }

@media all and (min-width: 1023px) { .interview_section { margin-top: 220px; } }

.interview_section .interview_wrap { margin-top: 120px; }

@media all and (max-width: 1024px) { .interview_section .interview_wrap { margin-top: 60px; } }

.interview_section .interview_wrap .copy_area { width: 50%; padding-right: 139px; }

.interview_section .interview_wrap .copy_area .sign_area { width: 183px; padding-top: 24px; }

.interview_section .interview_wrap .img_area { max-width: 640px; width: 50%; }

.design_section { background-color: #f5f5f5; padding: 180px 0; position: relative; }

.design_section .icon_section { text-align: center; }

.design_section .icon_section span { display: inline-block; margin-right: 70px; vertical-align: middle; }

.design_section .icon_section span:last-child { margin-right: 0; }

.design_section .title_line { margin-top: 105px; }

.design_section .text_k2 { max-width: 700px; }

/* award */
.award { margin-top: -80px; }

.award .award_slide_section { position: relative; }

.award .award_slide_section .bg { position: absolute; z-index: 2; width: 100%; height: 100%; background: #fff; transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1); }

.award .award_slide_section .scroll { transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1); }

.award .award_slide_section .swiper-container { overflow: inherit; }

.award .award_slide_section .swiper-container .swiper-wrapper { padding: 0 calc(50% - 840px); }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap { position: relative; }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap:before { display: block; content: ''; position: absolute; bottom: 20px; right: 20px; background: no-repeat 50% 50%; background-size: contain; z-index: 9; }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_if:before { width: 40px; height: 40px; background-image: url("../../img/introduction/about/ico_if.svg"); }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_reddot:before { width: 28px; height: 40px; background-image: url("../../img/introduction/about/ico_reddot.svg"); }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_idea:before { width: 88px; height: 20px; background-image: url("../../img/introduction/about/ico_idea.svg"); }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_gd:before { width: 40px; height: 40px; background-image: url("../../img/introduction/about/ico_gd.svg"); }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .title_k6.mt38 { margin-top: 26px; }

.award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide a .sub_title { margin-top: 8px; }

.award .award_slide_section .swiper-container:hover * { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; }

.award .award_slide_section .swiper-container:active * { cursor: url("../../img/common/ico_grabbing.svg"); cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; }

.award .award_slide_section.social_top_slider .scroll { transform: translateX(100%); }

.award .award_slide_section.social_top_slider.on { transform: translateX(0); }

.award .award_slide_section.social_top_slider.on .bg { transform: translateX(-100%); }

.award .award_slide_section.social_top_slider.on .scroll { transform: translateX(0%); }

/* history */
.history_section { position: relative; background-color: #fff; }

@media (min-width: 1024px) { .history_section .tab_menu_box { margin-bottom: 100px; } }

.history_section .tab_contents { position: relative; background-color: #fff; }

.history_section .tab_contents ul li > div { width: 50%; }

.history_section .tab_contents ul li .text_area .year_title { font-family: 'Roboto', sans-serif; font-size: 100px; line-height: 1.17; font-weight: 500; color: #111; }

.history_section .tab_contents ul li .text_area .year_content p.color { color: #e51937; width: 80px; }

.history_section .tab_contents ul li .text_area .year_content p:last-child { width: calc(90% - 80px); }

.history_section .tab_contents ul li .text_area .year_content p span { display: block; margin-bottom: 18px; }

.history_section .tab_contents ul li .img_area span { display: inline-block; }

.history_section .tab_contents ul li .img_area span:nth-of-type(1) { padding: 0 14.5312% 0 13.4375%; }

.history_section .tab_contents ul li .img_area span:nth-of-type(1) img { width: 100%; }

.history_section .tab_contents ul li .img_area span:nth-of-type(2) { width: 100%; margin-top: -24px; text-align: right; }

.history_section .tab_contents ul li .img_area span:nth-of-type(2) img { width: 56.25%; }

@media (max-width: 1023px) { .history_section .tab_contents ul li .text_area .year_title { font-size: 75px; }
  .history_section .tab_contents ul li .img_area { text-align: right; }
  .history_section .tab_contents ul li .img_area span:nth-of-type(1) { padding: 0 36px 0 46px; }
  .history_section .tab_contents ul li .img_area span:nth-child(2) img { width: 62%; } }

.history_section .indicator { position: absolute; height: calc(100% + 35px); height: 695px; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; }

.history_section .indicator:before { content: ''; display: inline-block; height: calc(100% + 5px); width: 1px; background-color: #e2e2e2; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; }

.history_section .indicator ul { height: 100%; }

.history_section .indicator ul li { height: calc(33.3333% - -4px); }

.history_section .indicator ul li a { display: block; width: 100%; padding: 20px; margin-top: -20px; }

.history_section .indicator ul li a span { font-size: 0; display: block; width: 13px; height: 13px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-color: #e2e2e2; }

.history_section .indicator ul li.on a span { background-color: #e51937; }

.history_section .indicator ul li:last-child a span:after { content: ''; display: block; width: 20px; height: 40px; background-color: #fff; margin-top: 100%; }

/* map */
.map_section { position: relative; background-color: #f5f5f5; padding: 180px 0; }

.map_section .tab_menu_box ul:after { background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #f5f5f5 80%); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #f5f5f5 80%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #f5f5f5 80%); }

.map_section .tab_menu_box ul li { width: 50%; }

.map_section .tab_box_content .list { width: 200px; margin-right: 30px; border-top: 1px solid #c8c8c8; }

.map_section .tab_box_content .list li { border-bottom: 1px solid #c8c8c8; padding: 18px 0; cursor: pointer; }

.map_section .tab_box_content .list li.on { color: #d80028; }

.map_section .tab_box_content .content { width: 370px; }

.map_section .tab_box_content .content .color { color: #d80028; }

.map_section .tab_box_content .content li { display: none; border-top: 1px solid #c8c8c8; }

.map_section .tab_box_content .content li.on { display: block; }

.map_section .tab_box_content .content li > div.copy { width: 370px; margin-right: 77px; }

.map_section .tab_box_content .content li > div.copy .text_k2 { margin: 18px 0; }

.map_section .tab_box_content .content li > div.copy .address { margin-bottom: 12px; display: block; }

.map_section .tab_box_content .content li > div.copy .address p:first-child { margin-right: 12px; color: #111; }

.map_section .tab_box_content .content li > div.copy .address p:last-child { color: #999; width: calc(100% - 42px); }

.map_section .tab_box_content .map_wrap { width: calc(100% - 680px); max-height: 55.5vw; margin-left: 80px; }

/* IE */
.IE #bottom_wave { top: 1968px; }

/*--------------- MEDIA QUERY ---------------*/
/* LG */
@media all and (max-width: 1366px) { .kv_video_cotainer video { /* IE10+ */ height: 100%; } }

@media all and (max-width: 1366px) and (-ms-high-contrast: none) { .kv_video_cotainer video { width: 1600px; } }

/* TABLET */
@media all and (max-width: 1024px) { .interview_section .interview_wrap .copy_area { padding-right: 6.25vw; } }

/* TABLET */
@media all and (max-width: 1023px) { /* 공통 */
  /* KV */
  .kv_screen { height: calc(100vh - 200px); }
  #background { height: 350%; }
  .svg_animate text { font-size: 10.1333vw; }
  .kv_sub_copy { width: 300px; top: 62%; }
  .scroll_ico { bottom: 4vh; width: 4.8000vw; height: 6.6667vw; margin-left: -2.4000vw; }
  #top_wave { top: -22px; }
  .title_mission { margin-bottom: 0; }
  .logo_section .sk_logo { width: 30vw; text-align: center; } }

@media all and (max-width: 1023px) and (max-width: 768px) { .logo_section .sk_logo { width: 53.3333vw; } }

@media all and (max-width: 1023px) { .design_section { padding: 80px 0 160px; }
  .design_section .icon_section span { margin-right: 30px; }
  .design_section .icon_section span:first-child { height: 34px; }
  .design_section .icon_section span:nth-of-type(2) { height: 34px; }
  .design_section .icon_section span:nth-of-type(3) { height: 19px; }
  .design_section .icon_section span:last-child { height: 34px; }
  .design_section .icon_section span img { height: 100%; }
  .design_section .title_line { margin-top: 60px; }
  /* award */
  .award { margin-top: -100px; }
  /* map */
  .map_section { padding: 80px 0 160px; }
  .map_section .tab_box_content .clear { display: flex; display: -ms-flexbox; flex-direction: column-reverse; }
  .map_section .tab_box_content .list { width: 26.6667vw; margin-right: 4.8000vw; }
  .map_section .tab_box_content .content { width: calc(100% - 31.4667vw); }
  .map_section .tab_box_content .content li > div.copy { width: 100%; }
  .map_section .tab_box_content .map_wrap { width: 100%; margin-left: 0; margin-bottom: 40px; }
  /* IE */ }

/* MOBILE 767 */
@media all and (max-width: 767px) { /* KV */
  .kv_screen { padding-top: 0; height: calc(100vh - 200px); }
  .kv_sub_copy { top: 65%; }
  .tab_contents.history .tab_box_content { min-height: 113.2813vw; height: 870px; }
  #top_wave.down { top: -80px; }
  .award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_if:before { width: 26px; height: 26px; }
  .award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_reddot:before { width: 18px; height: 26px; }
  .award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_idea:before { width: 60px; height: 13px; }
  .award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap.ico_gd:before { width: 26px; height: 26px; }
  /* history */
  .history_section .tab_contents { margin-bottom: 0; }
  .history_section .tab_contents ul li > div { width: 100%; float: none; }
  .history_section .tab_contents ul li .text_area { width: 90%; margin-bottom: 50px; }
  .history_section .tab_contents ul li .text_area .year_title { display: none; }
  .history_section .tab_contents ul li .text_area .year_content.mt48 { margin-top: 0; }
  .history_section .tab_contents ul li .text_area .year_content p { width: 100%; float: none; }
  .history_section .tab_contents ul li .text_area .year_content p:first-child { margin: 24px 0; }
  .history_section .tab_contents ul li .text_area .year_content p:last-child { width: 100%; }
  .history_section .tab_contents ul li .img_area { max-width: 440px; }
  .history_section .tab_contents ul li .img_area span { display: block; }
  .history_section .tab_contents ul li .img_area span:nth-of-type(1) { margin-left: 0; width: 100%; padding: 0; padding-right: 77px; }
  .history_section .tab_contents ul li .img_area span:nth-of-type(2) { position: static; width: 100%; padding-right: 36px; margin-top: -24px; text-align: right; }
  .history_section .tab_contents ul li .img_area span:nth-of-type(2) img { width: calc(100% - 90px); min-width: 200px; }
  .history_section .indicator { left: inherit; right: 0; transform: translateX(40%); }
  .copy_section { height: inherit; overflow: hidden; }
  .copy_section .mt38 { margin-top: 24px; }
  .interview_section .interview_wrap { display: flex; flex-direction: column-reverse; }
  .interview_section .interview_wrap > div { float: none; }
  .interview_section .interview_wrap .copy_area { width: 100%; padding: 0; }
  .interview_section .interview_wrap .copy_area .sign_area { width: 140px; }
  .interview_section .interview_wrap .copy_area .mt38 { margin-top: 24px; }
  .interview_section .interview_wrap .img_area { width: 100%; max-width: 100%; height: 100%; margin-bottom: 60px; }
  .map_section .tab_box_content .map_wrap #map, .map_section .tab_box_content .map_wrap #map2 { height: 55.5vw !important; }
  .swiper-slide { min-width: 56.5333vw; max-width: 56.5333vw; }
  .award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .img_wrap:before { right: 10px; bottom: 16px; }
  .award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide .title_k6.mt38 { margin-top: 20px; }
  .award .award_slide_section .swiper-container .swiper-wrapper .swiper-slide a .sub_title { margin-top: 6px; }
  .tab_contents.history .tab_box_content { min-height: 756px; height: auto; }
  .tab_contents.history .indicator { height: 785px; }
  .history_section .tab_menu_box { margin-bottom: 50px; }
  body.en .map_section .tab_menu_box ul li { width: auto; }
  body.en .history_section .indicator:before { height: calc(100% + 5px); }
  body.en .tab_contents.history .tab_box_content { min-height: 817px; }
  body.en .tab_contents.history .indicator { height: 847px; } }

@media all and (max-width: 1024px) { html[lang="en"] .copy_section .mt38 { margin-top: 24px; }
  html[lang="en"] .copy_section .copy_item_content { top: 20%; padding: 0 14%; } }

@media all and (max-width: 768px) { html[lang="en"] .copy_section .copy_item_content { top: 50%; } }

/*# sourceMappingURL=about.css.map */