@charset "utf-8";

/*body{ -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }*/

::-webkit-scrollbar-thumb {
  border-radius: 57px;
  background-color: #d0d0d0;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f7f7fe;
  height: 100px;
  margin-left: -6px;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 4px;
}

#wrap { -webkit-overflow-scrolling: touch; position: relative; }
#wrap:not(.main) { opacity: 0; animation: site-load-start 0s .1s forwards; }

@keyframes site-load-start {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#site-header { width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 100; background-color: rgba(255, 255, 255, .75); backdrop-filter: blur(15px); transition: all 0.25s ease-in-out; animation: site-header-start .75s; }
#site-header > .inner { width: 94%; height: 100%; max-width: 100%; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; }
#site-header > .inner > * { display: flex; align-items: center; width: 240px; height: var(--header-height); }
#site-header > .inner > .left { justify-content: flex-start; text-align: left; margin: 0; }
#site-header > .inner > .center { width: auto; height: auto; }
#site-header > .inner > .right { justify-content: flex-end; text-align: right; }

#site-header .gnb-logo { display: block; width: 216px; height: 34px; background-image: url(../img/common/site_logo.png); background-size: contain; background-repeat: no-repeat; background-position: center 100%; transition: background 0.25s ease-in-out; }

#site-header .gnb-menu { text-align: center; height: var(--header-height); overflow: hidden; transition: height 0.25s ease-in-out; }
#site-header .gnb-menu:after { content: ''; position: absolute; top: var(--header-height); left: 50%; z-index: -1; width: 0%; height: 1px; margin-top: -1px; background-color: #e7e7e7; transform: translateX(-50%); transition: width .35s ease-in-out; }
#site-header .gnb-menu > ul { display: flex; }
#site-header .gnb-menu > ul > li > a { font-size: 18px; font-weight: 500; color: #000; margin: 0 30px; white-space: nowrap; height: var(--header-height); display: flex; align-items: center; justify-content: center; position: relative; transition: .35s ease-in-out; }
#site-header .gnb-menu > ul > li > a:after { content: ''; width: 0%; height: 2px; background-color: #000; position: absolute; left: 50%; bottom: 0; transition: all .35s ease-in-out; transform: translateX(-50%); }
#site-header .gnb-menu > ul > li.active > a:after,
#site-header .gnb-menu > ul > li:hover > a:after { width: 100%; }
#site-header .sub-menu { padding: 30px 0; margin: -10px 0; }
#site-header .sub-menu > ul > li { padding: 10px 0; }
#site-header .sub-menu > ul > li > a { font-size: 16px; color: #000; display: inline-block; position: relative; }
#site-header .sub-menu > ul > li > a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0px; background-color: #000; opacity: 0; transition: 0.4s ease; }
#site-header .sub-menu > ul > li.active > a:after,
#site-header .sub-menu > ul > li > a:hover:after { height: 1px; opacity: 1; }

#site-header .gnb-menu:hover { height: 380px; }
#site-header .gnb-menu:hover:after { width: 100%; }
#site-header .gnb-menu:hover > ul > li > a { margin: 0 50px; }

#site-header .gnb-lang { position: relative; }
#site-header .gnb-lang > a { display: block; font-size: 14px; color: #000; }
/*#site-header .gnb-lang > a:after { content: ''; width: 7px; height: 7px; border-bottom: 1px solid #000; border-right: 1px solid #000; margin-left: 9px; transform: rotate(45deg); transform-origin: right; }*/
#site-header .gnb-lang > ul { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 105px; background-color: #000; margin-top: 10px; border-radius: 15px; text-align: center; padding: 25px 0; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .3); }
#site-header .gnb-lang > ul > li + li { margin-top: 15px; }
#site-header .gnb-lang > ul > li > a { font-size: 14px; font-weight: 500; color: #222; }
#site-header .gnb-lang > ul > li.on > a { color: #273e82; text-decoration: underline; text-underline-position : under; }
#site-header .gnb-lang.active > ul { display: block; }

#site-header .gnb-btn { margin-left: 45px; display: block; width: 18px; height: 18px; font-size: 0; background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../img/common/gnb_menu.png); }



body.scrollUp #site-header .gnb-btn > span { background-color: #222; }
body.scrollDown #site-header { transform: translateY(-100%); }

@keyframes site-header-start {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}


#fake-header { height: var(--header-height); }


#site-nav { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 0%; background-color: transparent; transition: all .25s ease-in-out; overflow: hidden; }
#site-nav > .inner { height: 100vh; position: relative; display: flex; }
#site-nav .head { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#site-nav .head > * { width: 94%; max-width: 100%; height: var(--header-height); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#site-nav .head > * > * { display: flex; align-items: center; }
#site-nav .gnb-lang { position: relative; }
#site-nav .gnb-lang > a { display: block; font-size: 14px; color: #fff; }
#site-nav .gnb-close-btn { margin-left: 35px; margin-right: -8px; width: 35px; height: 35px; border: 0; border-radius: 50%; background-color: #fff; font-size: 0; background-size: 50%; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40' viewBox='0 -960 960 960' width='40'%3E%3Cpath d='m251.333-204.667-46.666-46.666L433.334-480 204.667-708.667l46.666-46.666L480-526.666l228.667-228.667 46.666 46.666L526.666-480l228.667 228.667-46.666 46.666L480-433.334 251.333-204.667Z'/%3E%3C/svg%3E"); }

#site-nav .kv { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; transform: translateY(-100%); transition: transform 0.5s ease; }
#site-nav .kv > div { background-color: #999; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; transform: translateY(100%); transition: transform 0.5s ease; }

#site-nav .menu { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 100px; background-color: transparent; transform: translateY(100%); transition: transform 0.5s ease; overflow-x: hidden; overflow-y: auto; }
#site-nav .menu > ul { width: var(--inner-width); max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; transform: translateY(-100%); transition: transform 0.5s ease; height: 100%; max-height: 860px; }
#site-nav .menu > ul > li { width: 100%; height: 100%; padding: 20px 0; display: flex; align-items: center; position: relative; }
#site-nav .menu > ul > li + li { border-top: 2px solid rgba(255, 255, 255, .2); }
#site-nav .menu > ul > li > a { font-size: 24px; color: #fff; width: 180px; flex: none; }
#site-nav .menu > ul > li > div { margin-left: 250px; width: 100%; }
#site-nav .menu > ul > li > div > ul { display: flex; flex-wrap: wrap; margin: -10px -20px; }
#site-nav .menu > ul > li > div > ul > li { width: calc(100% / 4); padding: 10px 20px; }
#site-nav .menu > ul > li > div > ul > li > a { font-size: 16px; color: rgba(255, 255, 255, 1); white-space: nowrap; position: relative; }
#site-nav .menu > ul > li > div > ul > li > a:after { content: ''; width: 0%; height: 1px; background-color: #fff; position: absolute; left: 50%; bottom: 0; transition: all .35s ease-in-out; transform: translateX(-50%); }
#site-nav .menu > ul > li > div > ul > li.active > a:after,
#site-nav .menu > ul > li > div > ul > li > a:hover:after { width: 100%; }

/*#site-nav { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../img/common/gnb_menu_bg.jpg); transition: all .25s ease-in-out; }
#site-nav > .inner { height: 100%; position: relative; display: flex; }
#site-nav .head { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#site-nav .head > * { width: var(--inner-width); max-width: 100%; height: var(--header-height); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#site-nav .head > * > * { display: flex; align-items: center; }
#site-nav .gnb-close-btn { margin-left: 35px; margin-right: -8px; width: 35px; height: 35px; border: 0; border-radius: 50%; background-color: #fff; font-size: 0; background-size: 50%; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40' viewBox='0 -960 960 960' width='40'%3E%3Cpath d='m251.333-204.667-46.666-46.666L433.334-480 204.667-708.667l46.666-46.666L480-526.666l228.667-228.667 46.666 46.666L526.666-480l228.667 228.667-46.666 46.666L480-433.334 251.333-204.667Z'/%3E%3C/svg%3E"); }

#site-nav .kv { width: 50%; overflow: hidden; transform: translateY(-100%); transition: transform 0.5s ease; }
#site-nav .kv > div { background-color: #999; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; transform: translateY(100%); transition: transform 0.5s ease; }

#site-nav .menu { width: 50%; position: relative; display: flex; align-items: center; background-color: #000; transform: translateY(100%); transition: transform 0.5s ease; overflow: hidden; }
#site-nav .menu > ul { margin-left: 130px; height: 100%; display: flex; flex-direction: column; justify-content: center; transform: translateY(-100%); transition: transform 0.5s ease; }
#site-nav .menu > ul > li + li { margin-top: 10px; }
#site-nav .menu > ul > li > a { font-size: 40px; color: #fff; }
#site-nav .menu > ul > li.on > a,
#site-nav .menu > ul > li > a:hover { color: #ff6600; }
#site-nav .menu > ul > li > div { padding-top: 20px; padding-bottom: 30px; display: none; }
#site-nav .menu > ul > li.on > div { display: block; }
#site-nav .menu > ul > li > div > ul > li { margin-top: 5px; }
#site-nav .menu > ul > li > div > ul > li > a { font-size: 20px; color: #fff; display: inline-block; }
#site-nav .menu > ul > li > div > ul > li.on > a,
#site-nav .menu > ul > li > div > ul > li > a:hover { color: #ff6600; }*/

body.opanMenu #site-nav .kv,
body.opanMenu #site-nav .kv > div { transform: translateY(0); }
body.opanMenu #site-nav .menu,
body.opanMenu #site-nav .menu > ul { transform: translateY(0); }

body.opanMenu { overflow: hidden; }
body.opanMenu #site-nav { visibility: visible; opacity: 1; height: 100%; }
body.opanMenu #site-nav .menu { transform: translateY(0); }


#site-footer { position: relative; z-index: 1; background-color: #fff; margin-top: 75px; }
#site-footer > .inner { position: relative; width: var(--inner-width); max-width: var(--inner-max-width); padding: 70px 0; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#site-footer > .inner > * { width: 100%; }
#site-footer > .inner > * + * { margin-left: 40px; }
#site-footer .footer-logo { width: 160px; flex: none; }
#site-footer .footer-menu > ul { display: flex; }
#site-footer .footer-menu > ul > li + li { margin-left: 30px; }
#site-footer .footer-menu > ul > li > a { font-size: 15px; font-weight: 700; }
#site-footer .footer-copy { margin-top: 7px; font-size: 15px; font-weight: 200; }
#site-footer .footer-sns { width: auto; }
#site-footer .footer-sns > ul { display: flex; }
#site-footer .footer-sns > ul > li + li { margin-left: 15px; }
#site-footer .footer-sns > ul > li > a { display: block; }

#site-footer .scroll-top { position: absolute; top: -75px; right: 0; font-size: 0; width: 46px; height: 46px; margin: 0; border: 1px solid #e7edf3; background-color: #fff; box-shadow: 1.389px 1.439px 7px 0px rgba(0, 0, 0, 0.06); border-radius: 50%; transition: .4s ease; background-position: center; background-repeat: no-repeat; background-size: 25%; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7.4'%3E%3Cpath d='M0,6L6,0l6,6-1.4,1.4L6,2.8,1.4,7.4l-1.4-1.4Z' style='fill: %23ff6600; stroke-width: 0px;'/%3E%3C/svg%3E"); }
#site-footer .scroll-top:hover { border-color: #ff6600; background-color: #ff6600; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7.4'%3E%3Cpath d='M0,6L6,0l6,6-1.4,1.4L6,2.8,1.4,7.4l-1.4-1.4Z' style='fill: %23ffffff; stroke-width: 0px;'/%3E%3C/svg%3E"); }

/*#site-footer img:last-child { display: none; }
#site-footer.on img:first-child { display: none; }
#site-footer.on img:last-child { display: block; }*/



/* Main Home */
.main-page-section { position: relative; z-index: 1; display: flex; align-items: center; background-color: #fff; min-height: 100vh; }
.main-page-section > .inner { width: 90%; max-width: var(--inner-max-width); margin: 0 auto; padding: 120px 0; position: relative; }
.main-page-section:last-child > .inner { padding-bottom: 120px; }

.grid { display: grid; grid-template-columns: repeat(16, 1fr); grid-column-gap: 1.3888888889vw; align-items: flex-start; }


#main_purpose > .inner { padding-bottom: 0; }

#main_purpose .item { position: relative; contain: paint; background-color: #fff; min-height: 100vh; }
#main_purpose .item .text { grid-column: 2 / 16; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; min-height: 100vh; }
/*#main_purpose .item + .item .text { top: -100vh; }*/
#main_purpose .item .text > div { position: sticky; top: 0; display: flex; align-items: flex-start; z-index: 1; min-height: 100vh; }
#main_purpose .item .text > div > div { margin-top: 240px; }
#main_purpose .item .text .tit1 { font-size: 38px; color: #000; font-weight: 600; line-height: 1; }
#main_purpose .item .text .tit2 { font-size: 175px; color: #ff6600; font-weight: 600; margin-top: 10px; line-height: 1; }
#main_purpose .item .text .txt { font-size: 18px; color: #000; margin-top: 20px; line-height: 1.65; }
#main_purpose .item .text .btn { margin-top: 30px; width: 145px; height: 50px; border-radius: 50px; font-size: 16px; }


#main_purpose .item .obj { grid-column: 9 / 17; margin-bottom: 150px; background-color: #000; }
#main_purpose .item .obj > div { width: 100%; height: 0; padding-top: 152%; background-color: #dedede; position: relative; overflow: hidden; }
#main_purpose .item .obj > div > .img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
#main_purpose .item .obj > div > .video { position: absolute; left: 0; right: 0; bottom: 0; object-fit: cover; width: 100%; height: 100%; display: block; }


#main_technology > .inner { margin: 0; width: 100%; max-width: 100%; padding: 0; }
#main_technology .object { height: 150vh; position: relative; background-color: #fff; contain: paint; }
#main_technology .object .cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
#main_technology .object .cover:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .15); }
#main_technology .object .cover .img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
#main_technology .object .cover .video { position: absolute; left: 0; right: 0; bottom: 0; object-fit: cover; width: 100%; height: 100%; display: block; }
#main_technology .object .cont { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 300vh; }
#main_technology .object + .object .cont { top: -150vh; }
#main_technology .sticky { position: sticky; top: 0; height: 100vh; }
#main_technology .grid {  width: 90%; max-width: var(--inner-max-width); margin: 0 auto;}
#main_technology .grid > .column { grid-column: 2 / 16; display: flex; flex-direction: column; justify-content: space-around; height: 100%; padding: 120px 0; }
#main_technology .title1 { font-size: 50px; color: #fff; font-weight: 600; }
#main_technology .title2 { font-size: 90px; color: #fff; font-weight: 600; line-height: 1; }
#main_technology .text { font-size: 30px; color: #fff; margin-top: 10px; }


#main_news { max-height: 1000px; min-height: auto; height: 100vh; }
#main_news .column { grid-column: 2 / 16; position: relative; }
#main_news .title { font-size: 46px; font-weight: 600; margin-bottom: 50px; }
#main_news .viewAll { font-size: 20px; position: absolute; top: 30px; right: 0; }
#main_news .news_list { overflow: hidden; }
#main_news .news_list .swiper-pagination { position: static; margin-top: 20px; }
#main_news .news_list .swiper-pagination-bullet { margin: 0 5px; }
#main_news .news_list .swiper-pagination-bullet-active { background-color: #000; }










#main_career { align-items: stretch; height: 130vh; }
#main_career > .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -1; }
#main_career > .inner { display: flex; flex-direction: column; justify-content: space-around; }
#main_career .text1 { color: #fff; width: 50%; font-size: 62px; font-weight: 600; }
#main_career .text2 { color: #fff; width: 50%; margin-left: auto; font-size: 30px; line-height: 1.5; }
#main_career .btn { margin-top: 30px; width: 210px; height: 50px; border-radius: 50px; font-size: 16px; border: 0; }



#main_intro { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; }
#main_intro .black { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; background-color: #000; /*animation-name: object-zoom-out; animation-duration: 0.5s; animation-fill-mode: forwards; animation-delay: 0.5s;*/ }
#main_intro .logo { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: var(--header-height); }
#main_intro .logo > div { width: 94%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
#main_intro .text { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; color: #fff; }
#main_intro .text > div { width: 90%; max-width: var(--inner-max-width); margin: 0 auto; padding-bottom: 60px; }
#main_intro .text > div .t { grid-column: 2 / 16; font-size: 34px; }
#main_intro .text > div .s { grid-column: 1 / 17; text-align: right; margin-top: 50px; }
#main_intro .video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
#main_intro .video video { position: absolute; left: 0; right: 0; bottom: 0; object-fit: cover; width: 100%; height: 100%; display: block; }


/* Post */
.post_list_top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 60px; }
.post_list_top .tit { font-size: 21px; line-height: 48px; }
.post_list_top .total { font-size: 21px; line-height: 48px; }
.post_list_top .total span { color: var(--secondary-color); display: inline-block; margin-left: 15px; padding-left: 15px; position: relative; }
.post_list_top .total span:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background-color: var(--border-color); }
.post_list_top .search { width: 300px; }
.post_list_top .search .ipt { border-radius: 48px; padding: 10px 25px; padding-right: 55px; font-size: 15px; }
.post_list_top .search .ipt_group { position: relative; }
.post_list_top .search .btn { position: absolute; top: 0; right: 0; font-size: 0; width: 56px; height: 48px; padding: 0; border: 0; background-color: transparent; background-size: 35%; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 -960 960 960' width='20'%3E%3Cpath d='M764.522-134.913 523.848-375.587q-29.761 21.044-65.434 33.065-35.672 12.022-76.292 12.022-102.187 0-173.861-71.674Q136.587-473.848 136.587-576q0-102.152 71.674-173.826Q279.935-821.5 382.087-821.5q102.152 0 173.826 71.674 71.674 71.674 71.674 173.861 0 40.859-12.022 76.292-12.021 35.434-33.065 64.956l240.913 241.152-58.891 58.652ZM382.087-413.5q67.848 0 115.174-47.326Q544.587-508.152 544.587-576q0-67.848-47.326-115.174Q449.935-738.5 382.087-738.5q-67.848 0-115.174 47.326Q219.587-643.848 219.587-576q0 67.848 47.326 115.174Q314.239-413.5 382.087-413.5Z'/%3E%3C/svg%3E"); }

.post_list > ul { display: flex; flex-wrap: wrap; margin: -15px -20px; }
.post_list > ul > li { width: calc(100% / 3); padding: 15px 20px; } 
.post_list > ul.row2 > li { width: calc(100% / 2); }

.post_pagination { display: flex; align-items: center; justify-content:  center; text-align: center; margin-top: 70px; }
.post_pagination > li > a { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 200; color: #ccc; }
.post_pagination > li.num + li.num { margin-left: 5px; }
.post_pagination > li.num.current > a { color: #000; }
.post_pagination > li.prev { margin-right: 15px; }
.post_pagination > li.next { margin-left: 15px; }
.post_pagination > li.prev > a,
.post_pagination > li.next > a { font-size: 0; background-repeat: no-repeat; background-position: center; }
.post_pagination > li.prev > a { background-image: url(../img/ico/ico_arr_prev.png); }
.post_pagination > li.next > a {background-image: url(../img/ico/ico_arr_next.png);  }

.post_item { display: flex; flex-direction: column; width: 100%; height: 100%; }
.post_item > .img { flex: none; }
.post_item > .img > div { padding-top: 56.25%; transition: 1.5s ease; }
.post_item > .dec { height: 100%; padding: 20px 0; display: flex; flex-direction: column; }
.post_item > .dec.center { align-items: center; text-align: center; }
.post_item > .dec > * + * { margin-top: 10px; }
.post_item > .dec .cate { font-size: 18px; font-weight: 300; color: var(--secondary-color); }
.post_item > .dec .tit { font-size: 21px; max-width: 460px; height: 100%; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
.post_item > .dec .txt { font-size: 18px; font-weight: 300; }
.post_item > .dec .date { font-size: 14px; font-weight: 300; }
.post_item:hover > .img > div { transform: scale(1.05); }

.post_view .head { margin-bottom: 70px; }
.post_view .head > * + * { margin-top: 15px; }
.post_view .head .cate { font-size: 27px; font-weight: 400; color: var(--secondary-color); }
.post_view .head .title { font-size: 50px; font-weight: 400; line-height: 1.3; max-width: 1080px; }
.post_view .head .text { font-size: var(--font-size); font-weight: 200; }
.post_view .head .date { font-size: 18px; font-weight: 300; }

.post_view .body { padding: 50px 70px; border: 1px solid var(--border-color); border-radius: 15px; overflow: hidden; }

.post_view .body .attachments { display: flex; justify-content: flex-start; margin-bottom: 40px; }
.post_view .body .attachments .tit { font-size: 1em; font-weight: 700; line-height: 45px; margin-right: 20px; }
.post_view .body .attachments .btn_group { margin-top: 0; flex-wrap: wrap; }
.post_view .body .attachments .btn_group > * { margin-right: 10px; }
.post_view .body .attachments .btn_group > * + * { margin-left: 0; }
.post_view .body .attachments .btn_group .btn { color: var(--secondary-color); font-weight: 300; width: auto; margin-top: 10px; }
.post_view .body .attachments .btn_group .btn:after { background-color: var(--secondary-color); }
.post_view .body .attachments .btn_group .btn span:after { content: ''; width: 20px; height: 20px; margin-left: 25px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000000'%3E%3Cpath d='M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E"); }

.post_view .body .content { white-space: pre-line; }
.post_view .body .content * { font-size: 1em !important; line-height: 1.7 !important; font-weight: 200; }
.post_view .body .content b { font-weight: 700; }
.post_view .body .content p { margin-bottom: 40px; }
.post_view .body .content .subTitle { font-size: 24px !important; font-weight: 700; margin-bottom: 0; }
.post_view .body .content .img { text-align: center; margin-bottom: 0; }
.post_view .body .content .caption { text-align: center; margin-bottom: 60px; }

.post_view .bot { margin-top: 50px; }
.post_view .bot .prevNext > li + li { margin-top: 20px; }
.post_view .bot .prevNext > li > a { display: inline-flex; align-items: center; font-size: 17px; font-weight: 200; }
.post_view .bot .prevNext > li > a .tit { display: inline-flex; align-items: center; margin-right: 18px; padding-right: 18px; color: var(--secondary-color); position: relative; }
.post_view .bot .prevNext > li > a .tit:after { content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 15px; background-color: var(--border-color); transform: translateY(-50%); }
.post_view .bot .toList { margin-top: 90px; text-align: center; }
.post_view .bot .toList .btn { width: 200px; }











/* Sub Page */
#sub-page-kv { position: relative; padding-top: 300px; }
#sub-page-kv > .inner { position: sticky; top: 300px; z-index: 1; width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; padding-bottom: 120px; display: flex; flex-direction: column; justify-content: flex-start; }
#sub-page-kv > .bg { position: relative; overflow: hidden; opacity: 0; z-index: -1; width: auto; height: 100vh; margin-top: 200px; animation: sub-page-kv-bgUp 0.85s 0.4s forwards; }
#sub-page-kv > .bg > .img { width: 80%; height: 80%; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: var(--primary-color); margin: 0 auto; }
#sub-page-kv .route { margin-bottom: 20px; }
#sub-page-kv .route ul { display: inline-flex; align-items: center; }
#sub-page-kv .route ul > li { font-size: 21px; position: relative; }
#sub-page-kv .route ul > li + li { margin-left: 34px; }
#sub-page-kv .route ul > li + li:before { content: ''; width: 6px; height: 6px; border-bottom: 1px solid #000; border-right: 1px solid #000; position: absolute; top: 50%; left: -20px; transform: rotate(-45deg) translateY(-50%); }
#sub-page-kv .title { font-size: 55px; line-height: 1.25; }
#sub-page-kv .tit_area { color: #000; }
#sub-page-kv .tit_area.abs { position: absolute; top: 0; z-index: -1; color: #fff; }
#sub-page-kv .tit_area.abs .route ul > li + li:before { border-color: #fff; }

@keyframes sub-page-kv-bgUp {
  0% {
    opacity: 0;
    transform: translateY(30%) scale(.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



.sub-page-section { position: relative; z-index: 1; display: flex; align-items: center; background-color: #fff; /*min-height: 100vh;*/ }
.sub-page-section > .inner { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; padding: 60px 0; position: relative; }
.sub-page-section:first-child > .inner { padding-top: 150px; }
.sub-page-section:last-child > .inner { padding-bottom: 120px; }
.sub-page-section > .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.sub-page-section > .bg > .img { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }

.sub-page-section .secHead { margin-bottom: 80px; }
.sub-page-section .secBody + .secBody { margin-top: 90px; }
.sub-page-section .secTitle { font-size: 54px; line-height: 1.25; font-weight: 300; margin-bottom: 30px; }
.sub-page-section .subTitle { font-size: 30px; line-height: 1.25; font-weight: 600; margin-bottom: 30px; color: var(--secondary-color); }
.sub-page-section .secTit { font-size: 30px; line-height: 1.25; font-weight: 600; margin-bottom: 15px; }
.sub-page-section .secDesc { font-size: var(--font-size); font-weight: 200; max-width: 1100px; }


.imgObj { background-color: var(--primary-color); overflow: hidden; clip-path: inset(0% 100% 0% 0%); transition: clip-path 0.5s 0s !important; }
.imgObj > * { width: 100%; clip-path: inset(0% 100% 0% 0%); transition: clip-path 0.5s; }
.imgObj > div { height: 0; padding-top: 56.25%; background-color: #dedede; background-position: center; background-repeat: no-repeat; background-size: cover;  }
.imgObj.reverse { clip-path: inset(0% 0% 0% 100%); }
.imgObj.reverse > * { clip-path: inset(0% 0% 0% 100%); }
.imgObj.animated { clip-path: inset(0% 0% 0% 0%); }
.imgObj.animated > * { clip-path: inset(0% 0% 0% 0%); transition-delay: 0.65s; }






/* About */
#vison_mission .secBody { margin: -80px; align-items: center; }
#vison_mission .secBody + .secBody { margin-top: 80px; }
#vison_mission .secBody > * { padding: 80px; }
#vison_mission .secImage { position: relative; overflow: hidden; }
#vison_mission .secImage:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: var(--primary-color); transition: transform 1.25s; }
#vison_mission .secImage.show_right:after { transform: translate3d(100%, 0, 0); }
#vison_mission .secImage.show_left:after { transform: translate3d(-100%, 0, 0); }
#vison_mission .secImage > img { width: 100%; transition: clip-path 1s; }
#vison_mission .secImage.show_right > img { width: 100%; clip-path: inset(0% 0% 0% 100%); }
#vison_mission .secImage.show_left > img { width: 100%; clip-path: inset(0% 100% 0% 0%); }
#vison_mission .secImage.show_right.animated:after { transform: translate3d(-100%, 0, 0); }
#vison_mission .secImage.show_left.animated:after { transform: translate3d(100%, 0, 0); }
#vison_mission .secImage.animated > img { clip-path: inset(0% 0% 0% 0%); }

#ceo_message { overflow: hidden; }
#ceo_message > .inner { max-width: 1360px; }
#ceo_message .secBody { justify-content: center; padding-top: 300px; position: relative; }
#ceo_message .secBody > * { width: auto; }
#ceo_message .secBody .text { max-width: 720px; padding: 50px 0; }
#ceo_message .secBody .img { padding-right: 50px; }
#ceo_message .secBody .logo { content: ''; position: absolute; top: 0; left: 0; z-index: -1; }

#our_team .secBody { align-items: center; }
#our_team .secBody .img { padding-right: 100px; }
#corporate_history .img { text-align: center; padding: 0 80px; }
#corporate_history .img > .imgObj { max-width: 530px; width: 100%; margin: 0 auto; }
#corporate_history .img > .imgObj > div { padding-top: 120%; }

#corporate_history .list { padding: 10px 0; }
#corporate_history .list > li + li { margin-top: 30px; }
#corporate_history .list > li .year { font-size: 18px; font-weight: 700; margin-bottom: 5px; }
#corporate_history .list > li .text { font-size: 18px; font-weight: 200; }
#corporate_history .list > li .text > dd + dd { margin-top: 3px; }

#our_affiliates .map { display: flex; align-items: center; }
#our_affiliates .map > div { width: auto; margin: 0 auto; position: relative; }
#our_affiliates .map ul > li { position: absolute; visibility: hidden; }
#our_affiliates .map.animated ul > li { animation: branch-show 0.5s calc(0.7s + (0.3s * var(--branch-idx))) forwards; }
#our_affiliates .map ul > li .p { width: 1px; height: 1px; background-color: #000; }
#our_affiliates .map ul > li .f { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; line-height: 1;  }
#our_affiliates .map ul > li .f p { font-size: 16px; color: #000; white-space: nowrap; margin-bottom: 15px; }
#our_affiliates .map ul > li .f img { margin-bottom: -10px; }

#our_affiliates .branch { max-width: 1080px; margin: 0 auto; margin-top: 100px; overflow: hidden; }
#our_affiliates .branch > ul { margin: -40px -60px; display: flex; flex-wrap: wrap; }
#our_affiliates .branch > ul > li { padding: 40px 60px; width: calc(100% / 2); max-width: 600px; position: relative; }
#our_affiliates .branch > ul > li + li:before { content: ''; width: 1px; position: absolute; top: 40px; bottom: 40px; left: 0; background-color: #e1e1e1; }
#our_affiliates .branch > ul > li .tit { font-size: 30px; font-weight: 300; margin-bottom: 20px; }
#our_affiliates .branch > ul > li .info { font-size: 18px; font-weight: 200; }

@keyframes branch-show {
  0% {
    visibility: hidden;
    transform: translateY(-7000%);
  }
  100% {
    visibility: visible;
    transform: translateY(0%);
  }
}


/* Sustainability */
#sustainability_overview .book { margin-top: 110px; text-align: center; }
#sustainability_overview .book img { margin-bottom: 40px; }
#sustainability_overview .book .btn { width: auto; }
#sustainability_overview .book .btn > *:after { content: ''; width: 20px; height: 20px; margin-left: 25px; transition: .2s ease-out; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000000'%3E%3Cpath d='M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E"); }
#sustainability_overview .book .btn:hover > *:after { background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z'/%3E%3C/svg%3E"); }

/* HSE */
#hse_overview .secBody + .secBody { margin-top: 90px; padding-top: 90px; border-top: 1px solid var(--border-color); }
#hse_overview .top { margin-bottom: 70px; }
#hse_overview .list { max-width: 1480px; margin: 0 auto; }
#hse_overview .list > li { display: flex; align-items: center; flex-direction: row-reverse; }
#hse_overview .list > li + li { margin-top: 40px; }
#hse_overview .list > li .img { width: 500px; flex: none; }
#hse_overview .list > li .img > div > div { padding-top: 76%; }
#hse_overview .list > li .cont { padding: 40px 80px; max-width: 830px; }

/* Fleet */
#fleet_overview .list { max-width: 1480px; margin: 0 auto; }
#fleet_overview .list > li { display: flex; flex-direction: row-reverse; align-items: center; position: relative; }
#fleet_overview .list > li + li { margin-top: 40px; }
#fleet_overview .list > li > * { width: calc(100% / 2); }
#fleet_overview .list > li .img > div > div { padding-top: 67%; }
#fleet_overview .list > li .cont { padding: 40px 120px; max-width: 650px; }
#fleet_overview .list > li .cont .title { font-size: 30px; color: var(--secondary-color); font-weight: 600; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--border-color); }
#fleet_overview .list > li .cont .tit { font-size: 25px; font-weight: 600; margin-bottom: 20px; }
#fleet_overview .list > li .cont .txt { font-size: 18px; font-weight: 200; }
#fleet_overview .list > li .cont .txt > dd + dd { margin-top: 5px; }
#fleet_overview .list > li .cont .btn { margin-top: 40px; font-weight: 600; } 

/* PR */
#pr_post_list > .inner,
#pr_post_view > .inner { padding-top: 60px; }


/* Careers */
#careers_talent .top { margin-bottom: 50px; }
#careers_talent .row { max-width: 1480px; margin: 0 auto; align-items: center; }
#careers_talent .img { padding-right: 80px; }
#careers_talent .img .imgObj > div { padding-top: 120%; }
#careers_talent .cont > li + li { margin-top: 40px; }
#careers_talent .cont > li { padding-left: 10px; position: relative; }
#careers_talent .cont > li .tit { font-weight: 700; margin-bottom: 10px; }
#careers_talent .cont > li .tit:before { content: '·'; position: absolute; top: 0; left: 0; }
#careers_talent .cont > li .txt { font-weight: 200; max-width: 800px; }
#careers_talent .secBody + .secBody { margin-top: 90px; padding-top: 90px; border-top: 1px solid var(--border-color); }

#careers_recruit .recruit_post_item { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 330px; background-color: #f7f9fb; border-radius: 10px; padding: 40px; transition: .4s ease; }
#careers_recruit .recruit_post_item .tit { font-size: 29px; margin-bottom: 20px; }
#careers_recruit .recruit_post_item .info { font-size: 16px; margin-bottom: 40px; height: 100%; }
#careers_recruit .recruit_post_item .info + div { display: flex; align-items: center; justify-content: space-between; }
#careers_recruit .recruit_post_item .info > dd + dd { margin-top: 5px; }
#careers_recruit .recruit_post_item .info > dd { display: flex; }
#careers_recruit .recruit_post_item .info > dd .h { margin-right: 12px; }
#careers_recruit .recruit_post_item .info > dd .t { opacity: 0.6; font-weight: 200; }
#careers_recruit .recruit_post_item .date { font-size: 15px; font-weight: 200; }
#careers_recruit .recruit_post_item .btn { width: auto; background-color: transparent; }
#careers_recruit .recruit_post_item:hover { background-color: var(--secondary-color); color: #fff; }
#careers_recruit .recruit_post_item:hover .btn { border-color: #fff; color: #fff; }
#careers_recruit .followUs { margin-top: 70px; }
#careers_recruit .followUs .tit { font-size: 19px; }
#careers_recruit .followUs .txt { font-size: 16px; font-weight: 200; display: inline-block; position: relative; padding-right: 45px; }
#careers_recruit .followUs .txt .link { position: absolute; bottom: 0; right: 0; }

#careers_recruit .recruit_post_view .info { position: relative; padding-bottom: 50px; margin-bottom: 20px; color: #fff; }
#careers_recruit .recruit_post_view .info:after { content: ''; background-color: var(--secondary-color); position: absolute; top: -50px; left: -70px; right: -70px; bottom: 0; z-index: -1; }
#careers_recruit .recruit_post_view .info > dd + dd { margin-top: 5px; }
#careers_recruit .recruit_post_view .info > dd { display: flex; }
#careers_recruit .recruit_post_view .info > dd .h { margin-right: 20px; }
#careers_recruit .recruit_post_view .info > dd .t { opacity: 0.6; font-weight: 200; }


/* Contact */
#contactus_overview .loaction { display: flex; flex-wrap: wrap; margin: -40px; }
#contactus_overview .loaction > li { width: calc(100% / 2); padding: 40px; }
#contactus_overview .loaction > li .tit { font-size: 30px; font-weight: 700; color: var(--secondary-color); margin-bottom: 30px; }
#contactus_overview .loaction > li .dec > dd + dd { margin-top: 5px; }
#contactus_overview .loaction > li .dec > dd { display: flex; }
#contactus_overview .loaction > li .dec > dd .h { width: 90px; font-weight: 700; }
#contactus_overview .loaction > li .dec > dd .t { font-weight: 200; }
#contactus_overview_map > .inner { width: 100%; max-width: 100%; }
#contactus_overview_map .map { width: 100%; height: 0; padding-top: 40%; position: relative; }
#contactus_overview_map .map > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#contactus_overview_map .map > img { width: 100%; }



#vessel_type .list + .list { margin-top: 40px; }
#vessel_type .list ul { display: flex; flex-wrap: wrap; margin: -15px -20px; }
#vessel_type .list ul > li { width: calc(100% / 4); padding: 15px 20px; }
#vessel_type .list ul > li > .dec { padding: 20px 0; }
#vessel_type .list ul > li > .dec .tit { font-size: 21px; }

#technology .technology_cont { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; }
#technology .technology_cont > * { width: 50%; }
#technology .technology_cont > .obj { width: 100%; }
#technology .technology_cont > .obj > div { width: 700px; height: 700px; text-align: center; display: flex; align-items: center; justify-content: center; margin: -70px auto; font-size: 40px; font-weight: 700; line-height: 1.2; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../img/focus/technology_obj.png); }
#technology .technology_cont > .text + .text { padding-left: 150px; }
#technology .technology_cont > .text .h { font-size: 28px; margin-bottom: 20px; }
#technology .technology_cont > .text .t { font-size: 18px; font-weight: 300; }
#technology .technology_cont > .text .t dd { padding-left: 15px; position: relative; }
#technology .technology_cont > .text .t dd:before { content: '·'; position: absolute; top: 0; left: 0; }




.value-box-wrap { display: flex; justify-content: center; max-width: 1400px; width: 100%; gap: 90px; margin: 0 auto; margin-top: 100px; }
.value-box { display: flex; align-items: center; gap: 30px; flex-direction: column; position: relative; width: 100%; background-color: #F5F5F5; border-radius: 15px; padding: 40px; }
.value-box:not(:last-of-type)::after { content: ""; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 90px; height: 2px; background-color: #F37321; z-index: 2; }
.value-box-top { display: flex; justify-content: center; align-items: center; width: 120px;  height: 120px; aspect-ratio: 1/1; background-color: rgba(217, 217, 217, 0.2); border-radius: 100%; }
.value-box-top .img-wrap { width: 80px; height: 80px; aspect-ratio: 1/1; }
.value-box-top .img-wrap img { object-fit: contain; }
.value-box-bottom { text-align: center; }
.value-box-bottom-title { font-size: 30px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ccc; }
.value-box-bottom-text { color: #616161; }






















@media screen and (max-width: 1600px){
  #site-header > .inner > .center { display: none; }
}