@charset "utf-8";

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

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

::-webkit-scrollbar-track {
  background-color: transparent;
  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 0.35s .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; transition: all 0.25s ease-in-out; }
/*#site-header > .inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--header-height); background-color: #fff; border-bottom: 1px solid var(--border-color); }*/
#site-header > .inner { display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--header-height); background-color: transparent; border-bottom: 1px solid transparent; transition: all 0.25s; }
#site-header > .inner > * { width: 100%; }

#site-header .logo { display: flex; justify-content: flex-start; align-items: center; padding: 0 40px; }
#site-header .logo > a { display: flex; align-items: center; justify-content: center; width: 95px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../img/common/site_logo_wh.png); transition: all 0.25s; }
#site-header .logo > button { margin-right: 40px; width: 24px; height: 12px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font-size: 0; background-color: transparent; border: 0; transition: all 0.25s; }
#site-header .logo > button:before,
#site-header .logo > button:after { content: ''; width: 100%; height: 3px; background-color: var(--primary-color); transition: all 0.25s; }

#site-header .menu { display: flex; align-items: center; justify-content: center; width: 100%; }
#site-header .menu > button { width: 50px; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0; background-color: transparent; border: 1px solid #fff ; border-radius: 50%; transition: .25s; }
#site-header .menu > button:before,
#site-header .menu > button:after { content: ''; width: 20px; height: 2px; background-color: #fff; margin: 3px 0; }
#site-header .menu > button:hover { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
#site-header .menu > button:hover:before,
#site-header .menu > button:hover:after { background-color: #fff !important; }
#site-header .menu > ul { display: flex; align-items: center; justify-content: center; height: 100%; }
#site-header .menu > ul > li { margin: 0 30px; height: 100%; position: relative; }
#site-header .menu > ul > li > a { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: #000; font-weight: 700; transition: all 0.25s; }
#site-header .menu > ul > li > a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: transparent; }
#site-header .menu > ul > li > a svg { width: 16px; height: 16px; margin-right: 7px; transition: all 0.25s; }
#site-header .menu > ul > li.active > a { color: var(--secondary-color); }
#site-header .menu > ul > li:hover > a { color: var(--secondary-color) !important; }
#site-header .menu > ul > li.active > a:after { background-color: var(--secondary-color); }
#site-header .menu > ul > li:hover > .sub-menu { visibility: visible; opacity: 1; }

#site-header .sub-menu { visibility: hidden; opacity: 0; transition: all 0.25s ease; position: absolute; top: 100%; left: 50%; min-width: 180px; transform: translateX(-50%); background-color: var(--secondary-color); border-radius: 6px; padding: 30px; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.08); }
#site-header .sub-menu > .title { display: none; }
#site-header .sub-menu > ul > li + li { margin-top: 15px; }
#site-header .sub-menu > ul > li > a { font-size: 16px; color: #fff; font-weight: 700; white-space: nowrap; }
#site-header .sub-menu > ul > li > a > svg { display: none; }
#site-header .sub-menu > ul > li > div { margin-top: 15px; }
#site-header .sub-menu > ul > li > div > ul > li + li { margin-top: 5px; }
#site-header .sub-menu > ul > li > div > ul > li > a { font-size: 14px; color: rgba(255, 255, 255, .65); font-weight: 600; }
#site-header .sub-menu > ul > li > div > ul > li > a:hover { color: #fff; }

#site-header > .menu > ul > li:hover > .sub-menu,
body:not(.openMenu) #site-header > .menu > ul > li:hover > .mf-menu { visibility: visible; opacity: 1; }

#site-header .option { display: flex; justify-content: flex-end; padding: 0 40px; }
#site-header .option > ul { display: flex; align-items: center; margin: 0 -12px; }
#site-header .option > ul > li { display: flex; align-items: center; justify-content: center; padding: 0 12px; position: relative; }
#site-header .option > ul > li > a { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; font-weight: 600; line-height: 1; position: relative; }
#site-header .option > ul > li > a > svg { fill: #fff; }
#site-header .option > ul > li.lang > ul { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 10px; background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); border-radius: 6px; width: 75px; padding: 15px; text-align: center; font-size: 14px; }
#site-header .option > ul > li.lang > ul > li + li { margin-top: 10px; }
#site-header .option > ul > li.lang > ul > li > a { font-size: 13px; color: #fff; }
#site-header .option > ul > li.lang > ul > li > a:hover { color: var(--secondary-color); }
#site-header .option > ul > li.lang.on > ul { display: block; }


/*body.scrollDown #site-header { transform: translateY(-100%); }*/

#site-header.wh > .inner { background-color: rgba(255, 255, 255, .9); backdrop-filter: blur(10px) contrast(80%) saturate(120%); border-color: var(--border-color); box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.3); }
#site-header.wh .logo > a { background-image: url(../img/common/site_logo.png); }
#site-header.wh .menu > button { border-color: #b6b6b6; }
#site-header.wh .menu > button:before,
#site-header.wh .menu > button:after { background-color: #000; }
#site-header.wh .option > ul > li > a { color: #000;  }
#site-header.wh .option > ul > li > a > svg { fill: #000; }


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


#site-nav { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 0vh; background-color: transparent; transition: all .2s ease-in-out; overflow: hidden; pointer-events: none; }
#site-nav:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(5, 80, 125, 1); backdrop-filter: blur(20px); }
#site-nav > .inner { height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: space-between; }

#site-nav .head { height: var(--header-height); display: flex; align-items: center; justify-content: center; flex: none; }
#site-nav .head > * { width: 100%; }
#site-nav .head > .logo { display: flex; justify-content: flex-start; align-items: center; padding: 0 40px; }
#site-nav .head > .logo > a { display: flex; align-items: center; justify-content: center; width: 95px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../img/common/site_logo_wh.png); }
#site-nav .head > .close { display: flex; align-items: center; justify-content: center; }
#site-nav .head > .close > .gnb-close-btn { width: 50px; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0; background-color: transparent; border: 2px solid #fff ; border-radius: 50%; transition: .25s; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/%3E%3C/svg%3E"); }
#site-nav .head > .option { display: flex; justify-content: flex-end; padding: 0 40px; }
#site-nav .head > .option > ul { display: flex; align-items: center; margin: 0 -12px; }
#site-nav .head > .option > ul > li { display: flex; align-items: center; justify-content: center; padding: 0 12px; position: relative; }
#site-nav .head > .option > ul > li > a { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; font-weight: 600; line-height: 1; position: relative; }
#site-nav .head > .option > ul > li > a > svg { fill: #fff; }
#site-nav .head > .option > ul > li.lang > ul { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 10px; background-color: rgba(0, 0, 0, .5); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); border-radius: 6px; width: 75px; padding: 15px; text-align: center; font-size: 14px; }
#site-nav .head > .option > ul > li.lang > ul > li + li { margin-top: 5px; }
#site-nav .head > .option > ul > li.lang > ul > li > a { font-size: 13px; color: #fff; }
#site-nav .head > .option > ul > li.lang > ul > li > a:hover { color: var(--secondary-color); }
#site-nav .head > .option > ul > li.lang.on > ul { display: block; }

#site-nav .menu { max-width: var(--inner-max-width); width: var(--inner-width); height: calc(100% - var(--header-height)); padding: 60px 0; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; transform: translateY(100%); transition: transform 0.5s ease; }
#site-nav .menu > ul { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 40px; }
#site-nav .menu > ul > li { width: calc((100% - (40px * 4)) / 5);position: relative; }
#site-nav .menu > ul > li > a { font-size: 26px; font-weight: 700; color: #fff; display: block; padding-bottom: 20px; position: relative; display: flex; align-items: center; }
#site-nav .menu > ul > li > a:before,
#site-nav .menu > ul > li > a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: rgba(255, 255, 255, .2); }
#site-nav .menu > ul > li > a:after { width: 0; background-color: rgba(255, 255, 255, 1); z-index: 1; transition: 0.35s; }
#site-nav .menu > ul > li > a svg { margin-left: 5px; }
#site-nav .menu > ul > li.active > a:after { width: 100%; }
#site-nav .menu > ul > li > .sub-menu > .title { display: none; }
#site-nav .menu > ul > li > .sub-menu > ul { padding: 30px 0px; }
#site-nav .menu > ul > li > .sub-menu > ul > li + li { margin-top: 10px; }
#site-nav .menu > ul > li > .sub-menu > ul > li > a { font-size: 22px; font-weight: 400; color: #fff; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; }
#site-nav .menu > ul > li > .sub-menu > ul > li > a  svg { margin-left: 5px; fill: #fff; }
#site-nav .menu > ul > li > .sub-menu > ul > li > a:hover,
#site-nav .menu > ul > li > .sub-menu > ul > li.active > a { color: #fff; border-color: #fff; }
#site-nav .menu > ul > li > .sub-menu > ul > li > a:hover svg,
#site-nav .menu > ul > li > .sub-menu > ul > li.active > a svg { fill: #fff; }
#site-nav .menu > ul > li > .sub-menu > ul > li > div { margin-top: 5px; margin-bottom: 20px; }
#site-nav .menu > ul > li > .sub-menu > ul > li > div > ul > li { font-size: 18px; color: #97b9cf; }
#site-nav .menu > ul > li > .sub-menu > ul > li > div > ul > li > a { font-size: 18px; color: #97b9cf; }
#site-nav .menu > ul > li > .sub-menu > ul > li > div > ul > li.active > a,
#site-nav .menu > ul > li > .sub-menu > ul > li > div > ul > li > a:hover { color: #fff; }


#site-nav .bot { /*max-width: var(--inner-max-width); width: var(--inner-width); margin: 0 auto;*/ margin-top: 60px; transform: translateY(100%); transition: transform 0.5s ease; }
#site-nav .bot > ul { display: flex; gap: 20px; }
#site-nav .bot > ul > li > a { display: flex; align-items: center; justify-content: center; font-size: 1em; color: #fff; min-width: 160px; }
#site-nav .bot > ul > li > a svg { margin-left: 5px; }

#site-nav .kv { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; }
#site-nav .kv > div { background-color: #999; width: 100%; height: 100%; background-color: var(--primary-color); background-size: cover; background-repeat: no-repeat; background-position: center;background-size: cover; /*background-image: url(../img/common/bg_allmenu.jpg);*/ }


body.openMenu { overflow: hidden; }
body.openMenu #site-nav { visibility: visible; opacity: 1; height: 100vh; transition-delay: 0.2s; pointer-events: auto; }
body.openMenu #site-nav .menu,
body.openMenu #site-nav .bot { transform: translateY(0); transition-delay: 0.2s; }


#site-body { display: inline-block; width: 100%; min-height: 100vh; }


#site-footer { position: relative; z-index: 2; background-color: #484849; background-size: cover; background-repeat: no-repeat; background-position: center; }
#site-footer > .inner { max-width: var(--inner-max-width); width: var(--inner-width); margin: 0 auto; padding: 60px 0; display: flex; justify-content: space-between;  gap: 20px 60px; }
#site-footer > .inner > * { width: 100%; }

#site-footer .footer-logo { width: 110px; flex: none; padding-top: 7px; }

#site-footer .footer-menu { overflow: hidden;  }
#site-footer .footer-menu > ul { display: inline-flex; flex-wrap: wrap; gap: 10px 0; margin: 0 -15px; }
#site-footer .footer-menu > ul > li { padding: 0 15px; position: relative; }
#site-footer .footer-menu > ul > li:before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 16px; background-color: rgba(255, 255, 255, .2); }
#site-footer .footer-menu > ul > li > a { font-size: 17px; color: #fff; font-weight: 600; display: flex; align-items: center; }
#site-footer .footer-menu > ul > li > a svg { margin-left: 5px; }

#site-footer .footer-info { margin-top: 20px; overflow: hidden; line-height: 1; }
#site-footer .footer-info > ul {display: inline-flex; flex-wrap: wrap; margin-top: -5px; margin-left: -20px; }
#site-footer .footer-info > ul > li { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .8); padding-top: 5px; padding-left: 9px; display: inline-flex; align-items: center; line-height: 1; }
#site-footer .footer-info > ul > li:before { content: ''; width: 1px; height: 11px; background-color: rgba(255, 255, 255, .8); margin-right: 9px; }

#site-footer .footer-copy { font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .8); margin-top: 5px; }

#site-footer .footer-link { width: 260px; flex: none; }
#site-footer .footer-link .group_link { position: relative; width: 100%; }
#site-footer .footer-link .group_link > a { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; height: 50px; padding: 0 20px; background-color: #2c2c2c; border-radius: 4px; font-size: 14px; color: #fff; font-weight: 600; white-space: nowrap; }
#site-footer .footer-link .group_link > a:after { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #fff; flex: none; }
#site-footer .footer-link .group_link > ul { display: none; position: absolute; bottom: 100%; right: 0; width: 100%; background-color: #2c2c2c; z-index: 110; border: 1px solid #2c2c2c; border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 18px; overflow-y: auto; height: 50vh; }
#site-footer .footer-link .group_link > ul > li { line-height: 1.25; }
#site-footer .footer-link .group_link > ul > li + li { margin-top: 20px; }
#site-footer .footer-link .group_link > ul > li .sector { font-size: 16px; color: var(--secondary-color);; margin-bottom: 5px; font-weight: 600; }
#site-footer .footer-link .group_link > ul > li a { font-size: 14px; color: #9a9a9a; }
#site-footer .footer-link .group_link > ul > li a:hover { color: #fff; }
#site-footer .footer-link .group_link > ul > li > ul > li + li { margin-top: 5px; }
#site-footer .footer-link .group_link.on > a { border-top-left-radius: 0; border-top-right-radius: 0; }
#site-footer .footer-link .group_link.on > a:after { transform: rotate(180deg); }
#site-footer .footer-link .group_link.on > ul { display: block; }

#site-footer .footer-link .sns_link { margin-top: 20px; }
#site-footer .footer-link .sns_link > ul { display: flex; justify-content: flex-end; gap: 10px; }
#site-footer .footer-link .sns_link > ul > li > a { display: block; }


#quickMenu { position: fixed; top: 50%; right: 0; z-index: 100; transform: translateY(-50%); }
#quickMenu > .open { position: absolute; top: 50%; right: 0; transform: translateX(35%) translateY(-50%) rotate(-90deg); transition: all 0.5s; transition-delay: 0.5s; }
#quickMenu > .open > a { display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; font-size: 15px; color: #fff; font-weight: 500; background-color: #000; border-top-left-radius: 10px; border-top-right-radius: 10px; }
#quickMenu > .open > a svg { margin-left: 10px; transform: rotate(90deg); }
#quickMenu > .inner { position: absolute; top: 50%; right: 0; background-color: #000; border-top-left-radius: 10px; border-bottom-left-radius: 10px; padding: 25px; margin-right: -1px; transform: translateX(100%) translateY(-50%); transition: all 0.5s; visibility: hidden; }
#quickMenu > .inner > .close { margin-bottom: 20px; }
#quickMenu > .inner > .close > a { display: inline-flex; transform: rotate(180deg); }
#quickMenu > .inner > ul > li { margin-bottom: 15px; }
#quickMenu > .inner > ul > li > a { font-size: 15px; color: #fff; display: inline-flex; align-items: center; white-space: nowrap; }
#quickMenu > .inner > ul > li > a svg { margin-left: 6px; }
#quickMenu > .inner > ul > li > a:before { content: ''; flex: none; width: 0; height: 0; border-top: 5px solid transparent; border-left: 5px solid #fff; border-bottom: 5px solid transparent; margin: 0 10px; opacity: 0; }
#quickMenu > .inner > ul > li > a:hover:before { opacity: 1; }
#quickMenu.on > .open { transform: translateX(65%) translateY(-50%) rotate(-90deg); transition-delay: 0s; }
#quickMenu.on > .inner { transform: translateX(0) translateY(-50%); transition-delay: 0.5s; visibility: visible; }




.main-page-section { position: relative; }
.main-page-section > .inner { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; padding: var(--header-height) 0; position: relative; }
.main-page-section > .bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: #eee; background-size: cover; background-repeat: no-repeat; background-position: center; transition: transform 3.5s; overflow: hidden; }
.main-page-section > .bg > video { object-fit: cover; width: 100%; height: 100%; }

.main-page-section .secHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; }
.main-page-section .secBody { height: 100%; }
.main-page-section .secBot { margin-top: 100px; }
.main-page-section .secTitle { font-size: 2.2em; color: #000; font-weight: 700; }
.main-page-section .goToBtn { display: inline-flex; align-items: center; font-size: 17px; color: #000; font-weight: 500; }
.main-page-section .goToBtn svg { margin-left: 10px; margin-right: -5px; fill: #000 }



#main_section_kv { /*height: calc(100vh - var(--header-height));*/ height: 100vh; background-color: #999; }

#main_section_kv > .controller { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0; color: #fff; cursor: url(../img/main/ico_pause.png) 50 50, auto; }
#main_section_kv > .controller.play { cursor: url(../img/main/ico_play.png) 50 50, auto; }

#main_section_kv .swiper { height: 100%; }
#main_section_kv .swiper-slide { position: relative;  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0; } 
#main_section_kv .swiper-slide .text { position: relative; z-index: 1; width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; font-size: 52px; line-height: 1.25; font-weight: 700; color: #fff; text-shadow: 3px 0 1px black; }
/*#main_section_kv .swiper-slide .text span { display: inline-block; color: transparent; background: #FFFFFF; background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(42, 147, 255, 1) 100%); background-clip: text; }*/


#main_section_kv .swiper-slide .bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; transition: transform 3.5s; }
#main_section_kv .swiper-slide .bg.cover:before { content: ''; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); }
#main_section_kv .swiper-slide .bg > video { object-fit: cover; width: 100%; height: 100%; }

#main_section_kv .swiper-slide-active .text { transform: translateY(0); opacity: 1; transition-delay: 0.5s; transition: 1s; }
/*#main_section_kv .swiper-slide-active .bg { transform: scale(1.25); }*/

#main_section_kv .nav { position: absolute; bottom: 80px; left: 0; width: 100%; z-index: 1; display: flex; align-items: center; justify-content: center; }
#main_section_kv .swiper-pagination { display: flex; position: static; width: auto; margin: 0 10px; }
#main_section_kv .swiper-pagination-bullet { width: 20px; height: 20px; margin: 0 6px; background-color: #fff; opacity: 0.4; }
#main_section_kv .swiper-pagination-bullet-active { opacity: 1; }
#main_section_kv .swiper-autoplay { width: 20px; height: 20px; font-size: 0; border: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; }
#main_section_kv .swiper-autoplay.play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23FFFFFF' d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E"); }
#main_section_kv .swiper-autoplay.pause { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23FFFFFF' d='M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z'/%3E%3C/svg%3E"); }

#main_section_biz { height: 100vh; }
#main_section_biz > .inner { max-width: 100%; width: 100%; height: 100%; display: flex; padding: 0; }
#main_section_biz .box { width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 120px 0; position: relative; overflow: hidden; }
#main_section_biz .box:hover { background-size: 105%; }
#main_section_biz .box > .cont { position: relative; z-index: 1; width: 90%; max-width: 420px; }
#main_section_biz .box > .cont .tit { font-size: 1.9em; font-weight: 800; color: #fff; margin-bottom: 15px; text-transform: uppercase; }
#main_section_biz .box > .cont .txt { font-size: 1em; font-weight: 600; color: #fff; max-width: 370px; }
#main_section_biz .box > .cont .link { margin-top: 45px; }
#main_section_biz .box > .cont .link a { font-size: 17px; font-weight: 600; color: #fff; display: inline-flex; }
#main_section_biz .box > .cont .link a svg { margin-left: 10px; }
#main_section_biz .box > .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #ddd; transition: 1s; }
#main_section_biz .box:hover > .bg { transform: scale(1.05); }


#main_section_project { height: 400vh; }
#main_section_project .main-page-section { overflow: hidden; position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background-color: #000; }
#main_section_project .main-page-section > .inner { display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 0; }
#main_section_project .secTitle { color: #fff; }
#main_section_project .dlBtn { display: inline-flex; font-size: 0.85em; color: #fff; padding-right: 55px; position: relative; }
#main_section_project .dlBtn:after { content: ''; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18px' viewBox='0 -960 960 960' width='18px' fill='%23000000'%3E%3Cpath d='M480-322.87 268.52-534.35l63.89-65.41L434.5-497.44v-310.69h91v310.69l102.09-102.32 63.89 65.41L480-322.87Zm-237.13 171q-37.78 0-64.39-26.61t-26.61-64.39v-120h91v120h474.26v-120h91v120q0 37.78-26.61 64.39t-64.39 26.61H242.87Z'/%3E%3C/svg%3E"); }
#main_section_project .goToBtn { color: #fff; }
#main_section_project .goToBtn svg { fill: #fff; }
#main_section_project .title { margin-bottom: 60px; text-align: center; font-size: 58px; font-weight: 700; }
#main_section_project .title > span { display: inline-block; color: transparent; background: #FFFFFF; background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(42, 147, 255, 1) 100%); background-clip: text; }
#main_section_project .project_list_container + .project_list_container { margin-top: 30px; }
#main_section_project .project_list > ul { display: inline-flex; gap: 30px; }
#main_section_project .project_list > ul > li { flex: none; width: 400px; }
#main_section_project .project_list > ul > li > .item { display: block; transition: 0.5s ease; }
#main_section_project .project_list > ul > li > .item > .img { border-radius: 8px; position: relative; overflow: hidden; }
#main_section_project .project_list > ul > li > .item > .img > div { width: 100%; height: 0; padding-top: 75%; background-color: transparent; background-size: cover; background-repeat: no-repeat; background-position: center; transition: 1s ease; }
#main_section_project .project_list > ul > li > .item > .dec { padding-top: 25px; }
#main_section_project .project_list > ul > li > .item > .dec > .tit { font-size: 1.1em; color: #fff; font-weight: 700; }
#main_section_project .project_list > ul > li > .item > .dec > .cate { font-size: 0.9em; color: #fff; font-weight: 300; margin-top: 5px; }
#main_section_project .project_list > ul > li > .item:hover { transform: translateY(-15px); }
#main_section_project .project_list > ul > li > .item:hover > .img > div { transform: scale(1.05); }
#main_section_project .bg { transition: background .3s; opacity: 0.35; }


#main_section_news { display: flex; align-items: center; height: 100vh; max-height: 900px; }
#main_section_news .moreBtn { display: inline-flex; font-size: 0.85em; color: #000; padding-right: 55px; position: relative; }
#main_section_news .moreBtn:after { content: ''; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; border: 1px solid var(--border-color); position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12px' viewBox='0 -960 960 960' width='12px' fill='%231f1f1f'%3E%3Cpath d='m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z'/%3E%3C/svg%3E"); }






#main_section_media { height: 200vh; }
#main_section_media > .inner { position: sticky; top: 0; height: 100vh; }
#main_section_media > .controller { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; font-size: 0; color: #fff; cursor: url(../img/main/ico_pause.png) 50 50, auto; }
#main_section_media > .controller.play { cursor: url(../img/main/ico_play.png) 50 50, auto; }
#main_section_media > .bg { position: sticky; top: 0; margin-top: -70vh; background-color: transparent; height: 100vh; }
#main_section_media > .bg > div { position: relative; width: 70%; height: 70%; border-radius: 25px; margin: 0 auto; overflow: hidden; }
#main_section_media > .bg > div > video { object-fit: cover; width: 100%; height: 100%; }
#main_section_media > .bg > div:before { content: ''; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); }
#main_section_media .secHead { margin-bottom: 0; }
#main_section_media .secTitle { position: relative; }
#main_section_media .secTitle .sta { color: #000; }
#main_section_media .secTitle .abs { position: absolute;  top: 0; z-index: -1; color: #fff; }

#main_section_guide { overflow: hidden; }
#main_section_guide > .inner { display: flex; padding: 0; height: 100%; }
#main_section_guide > .inner > div { width: 100%; padding-top: 120px; }
#main_section_guide > .inner > div + div { margin-left: 50px; }
#main_section_guide .tit { font-size: 21px; font-weight: 800; color: #08abe7; margin-bottom: 15px; }
#main_section_guide .txt { font-size: 36px; font-weight: 800; color: #00649c; }
#main_section_guide .txt > span { display: inline-block; color: transparent; background: #00639C; background-image: linear-gradient(90deg,rgba(0, 99, 156, 1) 15%, rgba(42, 192, 255, 1) 100%); background-clip: text; }
#main_section_guide .img { text-align: right; margin-top: -60px; position: relative; z-index: -1; }


#main_section_sns > .inner { padding: 120px 0; }
#main_section_sns .secTitle { font-size: 58px; font-weight: 700; color: #fff; }
#main_section_sns .secTitle > span { display: inline-block; color: transparent; background: #FFFFFF; background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(42, 147, 255, 1) 100%); background-clip: text; }
#main_section_sns ul { display: flex; justify-content: center; gap: 60px; }




#sub-page-kv { position: relative; height: 400px; z-index: 90; }
#sub-page-kv > .inner { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
#sub-page-kv > .bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--primary-color); overflow: hidden; }
#sub-page-kv > .bg > .img { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
#sub-page-kv .title { font-size: 45px; font-weight: 500; color: #fff; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; }

#sub-page-nav { height: 50px; margin: 0 auto; position: absolute; left: 0; bottom: 20px; line-height: 1.25; }
#sub-page-nav > .inner { display: inline-flex; gap: 3px; height: 100%; }
#sub-page-nav .home { display: flex; align-items: center; justify-content: center; height: 100%; flex: none; font-size: 0; width: 50px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); transition: background-color 0.25s ease-in; }
#sub-page-nav .home:hover { background-color: #000; }
#sub-page-nav .nav { display: flex; align-items: center; gap: 3px; }
#sub-page-nav .nav > li { position: relative; height: 100%; }
#sub-page-nav .nav > li > a { display: flex; align-items: center; justify-content: space-between; min-width: 180px; height: 100%; padding-left: 20px; padding-right: 20px; color: #fff; font-size: 15px; white-space: nowrap; border-radius: 4px; background-color: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); transition: background-color 0.25s ease-in; }
#sub-page-nav .nav > li > a:after { content: ''; width: 24px; height: 24px; margin-right: -10px; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E"); }
#sub-page-nav .nav > li > a:hover { background-color: #000; }
#sub-page-nav .nav > li > a.none:after { display: none; }
#sub-page-nav .nav > li > ul { display: none; position: absolute; top: 100%; z-index: 1; width: 100%; padding: 20px; background-color: #000; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px }
#sub-page-nav .nav > li > ul > li { padding: 8px 0; }
#sub-page-nav .nav > li > ul > li > a { display: flex; align-items: center; font-size: 15px; color: #9a9a9a; line-height: 1.25; }
#sub-page-nav .nav > li > ul > li > a > svg { margin-left: 5px; fill: #9a9a9a; width: 15px; height: 15px; } 
#sub-page-nav .nav > li > ul > li.active > a,
#sub-page-nav .nav > li > ul > li > a:hover { color: #fff; }
#sub-page-nav .nav > li > ul > li.active > a > svg,
#sub-page-nav .nav > li > ul > li > a:hover > svg { fill: #fff; }
#sub-page-nav .nav > li > ul > li.active > a { font-weight: 500; }
#sub-page-nav .nav > li.on > a { background-color: #000; border-radius: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; }
#sub-page-nav .nav > li.on > ul { display: block; }


#sub-page-title { font-size: 1.58em; font-weight: 700; text-align: center; padding-top: 90px; width: 90%; max-width: var(--inner-max-width); margin: 0 auto; position: relative; }
#sub-page-title .btn { position: absolute; bottom: 0; right: 0; }
#sub-page-title + .sub-page-section { padding-top: 80px; }

/*#sub-page-menu { margin-top: 40px; padding-top: 40px; }
#sub-page-menu > div { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; position: relative; display: flex; justify-content: center; }
#sub-page-menu > div > ul { display: inline-flex; border-radius: 6px; background-color: rgba(255, 255, 255, .9); backdrop-filter: blur(6px); box-shadow: 0.5px 0.866px 3px 0px rgba(0, 0, 0, 0.15); overflow: hidden; overflow-x: auto; }
#sub-page-menu > div > ul > li { width: 220px; flex: none; }
#sub-page-menu > div > ul > li > a { display: flex; align-items: center; justify-content: center; background-color: transparent; width: 100%; height: 50px; border-radius: 6px; text-align: center; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1; color: #93abb9; padding: 0 20px; }
#sub-page-menu > div > ul > li > a:hover { color: #000; }
#sub-page-menu > div > ul > li.active > a { color: #000; background-color: rgba(241, 244, 255, .5); box-shadow: 0.5px 0.866px 3px 0px rgba(0, 0, 0, 0.15);  }
#sub-page-menu + .sub-page-section { padding-top: 100px; }*/

#sub-page-menu { margin-top: 40px; padding-top: 40px; }
#sub-page-menu > div { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; position: relative; display: flex; justify-content: center; }
#sub-page-menu > div > ul { display: inline-flex; border-radius: 6px; background-color: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.15); overflow: hidden; overflow-x: auto; }
#sub-page-menu > div > ul > li { width: 220px; flex: none; }
#sub-page-menu > div > ul > li > a { display: flex; align-items: center; justify-content: center; background-color: transparent; width: 100%; height: 50px; border-radius: 6px; text-align: center; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1; color: #93abb9; padding: 0 20px; }
#sub-page-menu > div > ul > li > a:hover { color: #000; }
#sub-page-menu > div > ul > li.active > a { color: #000; background-color: var(--primary-color); color: #fff; }
#sub-page-menu + .sub-page-section { padding-top: 100px; }

/*#sub-page-menu.sticky { position: sticky; top: 0; z-index: 1; transition: all 0.25s ease-in-out; }
.scrollUp #sub-page-menu.sticky { top: calc(var(--header-height)); }*/

#sub-page-tabs { padding-top: 60px; padding-bottom: 20px; }
#sub-page-tabs > div { width: 90%; max-width: var(--inner-max-width); margin: 0 auto; position: relative; display: flex; justify-content: center; }
#sub-page-tabs > div > ul { display: inline-flex; }
#sub-page-tabs > div > ul > li { width: 100%; position: relative; }
#sub-page-tabs > div > ul > li + li { margin-left: 30px; padding-left: 30px; }
#sub-page-tabs > div > ul > li + li:before { content: ''; width: 1px; height: 18px; background-color: #c9d4df; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#sub-page-tabs > div > ul > li > a { white-space: nowrap; font-size: 1em; font-weight: 600; color: #97aebc; line-height: 1; }
#sub-page-tabs > div > ul > li.active > a { color: #000; }



.sub-page-section { position: relative; padding: 40px 0; }
.sub-page-section:first-child { padding-top: 100px; }
.sub-page-section:last-child { padding-bottom: 100px; }
.sub-page-section > .inner { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; position: relative; }
.sub-page-section > .bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #333; }

.sub-page-section .secTitle { font-size: 1em; color: var(--secondary-color); font-weight: 700; margin-bottom: 20px; }
.sub-page-section .secContent + .secContent { margin-top: 70px; }
.sub-page-section .secContent .title { font-size: 1.6em; font-weight: 700; line-height: 1.25; margin-bottom: 30px; }
.sub-page-section .secContent .title + .secObject { margin-top: 0; }
.sub-page-section .secContent .sTitle { font-size: 1.3em; font-weight: 700; margin-bottom: 30px; }
.sub-page-section .secContent * + .tit { margin-top: 30px; }
.sub-page-section .secContent .tit { font-size: 1.15em; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; }
.sub-page-section .secContent .tit + .secObject { margin-top: 0; }
.sub-page-section .secContent .text { font-size: 1em; font-weight: 300; line-height: 1.6; }
.sub-page-section .secContent .text + .text { margin-top: 40px; }
.sub-page-section .secContent .text .h { font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; white-space: nowrap; }
.sub-page-section .secContent .text .h:before { content: ''; width: 10px; height: 10px; margin-right: 15px; border-radius: 50%; background-color: var(--secondary-color); }
.sub-page-section .secContent .text .h ~ * { margin-left: 25px; }
.sub-page-section .secContent .text .m { font-weight: 500; margin-bottom: 10px; }
.sub-page-section .secContent .text .box { border: 1px solid var(--border-color); background-color: #fff; border-radius: 10px; padding: 20px 30px; overflow: hidden; }
.sub-page-section .secContent .text .box.img { padding: 0; }
.sub-page-section .secContent .text .box + .t { margin-top: 20px; }
.sub-page-section .secContent .text ul > li { position: relative; padding-left: 20px; }
.sub-page-section .secContent .text ul > li + li { margin-top: 5px; }
.sub-page-section .secContent .text ul > li > span { position: absolute; top: 0; left: 0; }
.sub-page-section .secContent .textBox { font-size: 1em; font-weight: 300; line-height: 1.6; border: 1px solid var(--border-color); background-color: #fafbfc; border-radius: 10px; padding: 40px; }


.sub-page-section .secObject { padding: 60px; margin-top: 60px; text-align: center; border: 1px solid var(--border-color); border-radius: 10px; background-color: #fff; }
.sub-page-section .secObject .sTitle { text-align: left; }
.sub-page-section .secObject .text { text-align: left; }
.sub-page-section .secObject + .secContent { margin-top: 70px; }



.accordion { display: flex; flex-direction: column; gap: 15px; }
.accordion > li { width: 100%; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.accordion > li > .head { display: flex; align-items: center; justify-content: space-between; background-color: #f7fafc; cursor: pointer; padding: 20px; gap: 20px; }
.accordion > li > .head:after { content: ''; width: 27px; height: 27px; flex: none; background-color: transparent; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='27px' height='27px' fill='%233a8cff'%3E%3Cpath d='M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); }
.accordion > li > .head > .tit { margin: 0; margin-left: 15px; font-size: 0.9em; font-weight: 700; color: #000; width: 100%; }
.accordion > li > .head > .txt { margin: 0; font-size: 0.9em; font-weight: 300; white-space: nowrap; }
.accordion > li > .body { display: none; }
.accordion > li > .body .tb_post_list { border: 0; border-radius: 0; }
.accordion > li > .body .tb_post_list tbody th { background-color: transparent; border-bottom: 1px solid var(--border-color); text-align: center; width: 300px; padding: 30px 60px; color: var(--primary-color); }
.accordion > li > .body .tb_post_list tbody td { text-align: left; padding: 30px 60px; }
.accordion > li > .body .tb_post_list tbody th + td { padding-left: 0; }
.accordion > li > .body .outlink {  }
.accordion > li > .body .outlink:after { content: ''; display: inline-block; width: 22px; height: 22px; flex: none; margin-left: 5px; position: relative; top: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23dadff0'%3E%3Cpath d='m480-320 160-160-160-160-56 56 64 64H320v80h168l-64 64 56 56Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); }
.accordion > li > .body .outlink:hover { color: var(--secondary-color); }
.accordion > li.active > .body { display: block; }
.accordion > li.active > .head:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='27px' height='27px' fill='%233a8cff'%3E%3Cpath d='M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); }


#workList { padding-top: 180px; min-height: 100vh; }
#workList > .bg { background-color: #294581; background-size: 100%; background-position: top center; }

.portfolio_list_top { margin-bottom: 90px; }
.portfolio_list_top .top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 70px; }
.portfolio_list_top .top .tit { font-size: 3.7em; color: #fff; font-weight: 700; text-transform: uppercase; line-height: 1; }
.portfolio_list_top .top .opt .btn.myBook > svg { width: 20px; fill: #fff; }
/*.portfolio_list_top .top .opt a { font-size: 15px; color: #fff; }
.portfolio_list_top .top .opt label { font-size: 15px; color: #fff; }*/
.portfolio_list_top .top .opt > ul { display: flex; align-items: center; }
.portfolio_list_top .top .opt > ul > li { position: relative; }
.portfolio_list_top .top .opt > ul > li + li { margin-left: 15px; padding-left: 15px; }
.portfolio_list_top .top .opt > ul > li + li:before { content: ''; width: 1px; height: 13px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, .3); }

.portfolio_list_top .search > ul { display: flex; gap: 2px; position: relative; }
.portfolio_list_top .search > ul > li { width: calc(100%); position: relative; }
.portfolio_list_top .search > ul > li > a { display: flex; align-items: center; justify-content: space-between; text-align: center;  padding: 0 30px; width: 100%; height: 60px; font-size: 0.85em; font-weight: 600; color: #fff; line-height: 1; border-radius: 4px; background-color: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); transition: background-color 0.25s ease-in; }
.portfolio_list_top .search > ul > li > a.searchBtn { background-color: var(--secondary-color); box-shadow: none; }
.portfolio_list_top .search > ul > li > a > * { width: 100%; }
.portfolio_list_top .search > ul > li > a > svg { width: 24px; margin-right: -10px; }
.portfolio_list_top .search > ul > li > a:hover,
.portfolio_list_top .search > ul > li.on > a { background-color: rgba(0, 0, 0, 1); }
.portfolio_list_top .search > ul > li.on > a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.portfolio_list_top .search > ul > li:not(.wSearch) > div { display: none; position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; padding: 30px; background-color: #000; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.1); margin-top: -1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.portfolio_list_top .search > ul > li.on > div { display: block; }
.portfolio_list_top .search .chk_list { display: flex; flex-direction: column; margin: -5px; zoom: 0.8; }
.portfolio_list_top .search .chk_list > li { width: calc(100%); }
.portfolio_list_top .search .chk_list > li label { color: #fff; }
.portfolio_list_top .search .chk_list > li [type="checkbox"].custom:checked+label:before { background-color: var(--secondary-color); border-color: var(--secondary-color); }

.portfolio_list_top .wSearch .ipt { width: 100%; height: 60px; padding-right: 50px; font-size: 16px; font-weight: 600; color: #fff; line-height: 1; border-radius: 4px; background-color: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); }
.portfolio_list_top .wSearch .btn { font-size: 0; width: 60px; height: 60px; border: 0; margin-left: -60px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%0A%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='16px' height='16px'%3E%3Cpath d='M 31 11 C 19.973 11 11 19.973 11 31 C 11 42.027 19.973 51 31 51 C 34.974166 51 38.672385 49.821569 41.789062 47.814453 L 54.726562 60.751953 C 56.390563 62.415953 59.088953 62.415953 60.751953 60.751953 C 62.415953 59.087953 62.415953 56.390563 60.751953 54.726562 L 47.814453 41.789062 C 49.821569 38.672385 51 34.974166 51 31 C 51 19.973 42.027 11 31 11 z M 31 19 C 37.616 19 43 24.384 43 31 C 43 37.616 37.616 43 31 43 C 24.384 43 19 37.616 19 31 C 19 24.384 24.384 19 31 19 z'/%3E%3C/svg%3E"); }


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


.portfolio_item { display: flex; flex-direction: column; gap: 20px; width: 100%; height: 100%; position: relative; border-radius: 8px; overflow: hidden; }
.portfolio_item > .img { border-radius: 8px; position: relative; overflow: hidden; flex: none; }
.portfolio_item > .img > div { width: 100%; height: 0; padding-top: 75%; background-color: #dedede;  background-size: cover; background-repeat: no-repeat; background-position: center; transition: 1s ease; }
.portfolio_item > .dec { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 5px; position: absolute; top: 0; left: 0; z-index: 1; padding: 20px; background-color: rgba(0, 0, 0, .2); transition: .35s ease; }
.portfolio_item > .dec .cate { font-size: 0.9em; font-weight: 300; color: #fff; }
.portfolio_item > .dec .tit { font-size: 1.2em; font-weight: 700; color: #fff; }
.portfolio_item > .opt { position: absolute; bottom: 20px; right: 20px; z-index: 2; }
.portfolio_item > .opt > ul { display: flex; align-items: center; }
.portfolio_item > .opt > ul > li { position: relative; }
.portfolio_item > .opt > ul > li + li { margin-left: 15px; padding-left: 15px; }
.portfolio_item > .opt > ul > li + li:before { content: ''; width: 1px; height: 15px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, .3); }
.portfolio_item > .opt > ul > li > a { display: flex; align-items: center; gap: 5px; font-size: 0.8em; color: #fff; }

.portfolio_item:hover > .dec { background-color: rgba(0, 0, 0, .5); backdrop-filter: blur(1px); } 
.portfolio_item:hover > .img > div { transform: scale(1.05); }



#portfolio_view_kv { position: relative; }
#portfolio_view_kv .top { text-align: center; margin-bottom: 60px; }
#portfolio_view_kv .top > .title { font-size: 2.4em; font-weight: 800; color: #000; }
#portfolio_view_kv .top > .text { font-size: 1em; font-weight: 300; color: #000; margin-top: 10px; }
#portfolio_view_kv .top > .opt { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
#portfolio_view_kv .top > .opt > li { position: relative; }
#portfolio_view_kv .top > .opt > li + li { margin-left: 15px; padding-left: 15px; }
#portfolio_view_kv .top > .opt > li + li:before { content: ''; width: 1px; height: 15px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, .3); }
#portfolio_view_kv .top > .opt > li > a { display: flex; align-items: center; gap: 5px; font-size: 0.78em; color: #000; }
#portfolio_view_kv .swiper { height: 100%; }
#portfolio_view_kv .swiper-slide { position: relative; width: 100%; height: 0; padding-top: 53%; overflow: hidden; border-radius: 10px; } 
#portfolio_view_kv .swiper-slide .img { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; transition: transform 5s; }
#portfolio_view_kv .nav { width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 30px; }
#portfolio_view_kv .nav .swiper-pagination { display: flex; position: static; width: auto; margin: 0 5px; }
#portfolio_view_kv .nav .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 6px; background-color: #000; opacity: 0.1; }
#portfolio_view_kv .nav .swiper-pagination-bullet-active { opacity: 1; }
#portfolio_view_kv .nav .swiper-autoplay { width: 12px; height: 12px; font-size: 0; border: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; }
#portfolio_view_kv .nav .swiper-autoplay.play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E"); }
#portfolio_view_kv .nav .swiper-autoplay.pause { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z'/%3E%3C/svg%3E"); }
#portfolio_view_kv .nav .swiper-prev,
#portfolio_view_kv .nav .swiper-next { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 40px; background-color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); transition: background-color 0.25s ease-in; position: absolute; bottom: 90px; z-index: 1; }
#portfolio_view_kv .nav .swiper-prev:hover,
#portfolio_view_kv .nav .swiper-next:hover { background-color: rgba(255, 255, 255, 1); }
#portfolio_view_kv .nav .swiper-prev { left: 40px; }
#portfolio_view_kv .nav .swiper-next { right: 40px; }

#portfolio_view_cont .title { font-size: 1.7em; color: #000; font-weight: 800; margin-bottom: 30px; max-width: 560px; }
#portfolio_view_cont .text { font-size: 1em; color: #000; font-weight: 300; max-width: 990px; margin-bottom: 50px; }
#portfolio_view_cont .info > li + li { margin-top: 15px; }
#portfolio_view_cont .info > li { display: flex; gap: 20px; }
#portfolio_view_cont .info > li > .tit { width: 140px; flex: none; font-size: 1em; font-weight: 700; display: flex; }
#portfolio_view_cont .info > li > .tit:before { content: '‧'; width: 15px; flex: none; }
#portfolio_view_cont .info > li > .txt { width: 100%; font-size: 1em; font-weight: 300; }
#portfolio_view_cont .info > li.line { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--border-color); }

#portfolio_view_related { overflow: hidden; }
#portfolio_view_related .title { font-size: 1.5em; color: #000; font-weight: 700; margin-bottom: 40px; }
#portfolio_view_related .swiper { overflow: visible; }
#portfolio_view_related .swiper-slide .img { border-radius: 8px; position: relative; overflow: hidden; }
#portfolio_view_related .swiper-slide .img > div { width: 100%; height: 0; padding-top: 75%; background-color: #dedede; background-size: cover; background-repeat: no-repeat; background-position: center; }
#portfolio_view_related .swiper-slide p { text-align: center; font-size: 0.84em; font-weight: 500; margin-top: 20px; }
#portfolio_view_related .swiper-nav { margin-top: 50px; display: flex; align-items: center; justify-content: center; }
#portfolio_view_related .swiper-pagination { display: flex; position: static; width: auto; margin: 0 30px; }
#portfolio_view_related .swiper-pagination-bullet { background-color: #d3dae5; opacity: 1; width: 10px; height: 10px; margin: 0 8px !important; }
#portfolio_view_related .swiper-pagination-bullet-active { background-color: #000; }




#design_intro_top .kv { margin-bottom: 20px; }
#design_intro_top .title { font-size: 1.8em; color: var(--primary-color); }

#design_intro_method .secContent { padding: 70px; border-radius: 10px; min-height: 500px; color: #fff; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(../img/business/design_intro_method_bg.jpg); }

#design_intro_point ul { display: flex; gap: 45px; }
#design_intro_point ul > li { width: 100%; }
#design_intro_point ul > li .img { border-radius: 8px; overflow: hidden; }
#design_intro_point ul > li .img img { width: 100%; }
#design_intro_point ul > li .dec { margin-top: 25px; }
#design_intro_point ul > li .dec > .tit { color: var(--secondary-color); }
#design_intro_point ul > li .dec > .txt { font-size: 0.9em; max-width: 380px; }


#design_area_top .secContent { padding: 60px; border-radius: 10px; min-height: 600px; color: #fff; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: var(--primary-color); position: relative; }
#design_area_top .secContent .title { font-size: 2em; }
#design_area_top .secContent .nav > a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 40px; background-color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 4px 10px rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); transition: background-color 0.25s ease-in; position: absolute; bottom: 60px; }
#design_area_top .secContent .nav > a:hover { background-color: rgba(255, 255, 255, 1); }
#design_area_top .secContent .nav > a.prev { left: 60px; }
#design_area_top .secContent .nav > a.next { right: 60px; }

#design_related_project ul { display: flex; gap: 45px; }
#design_related_project ul > li { width: 100%; }
#design_related_project ul > li a { display: block; }
#design_related_project ul > li .img { border-radius: 8px; position: relative; overflow: hidden; flex: none; }
#design_related_project ul > li .img > div { width: 100%; height: 0; padding-top: 62%; background-color: #dedede;  background-size: cover; background-repeat: no-repeat; background-position: center; }
#design_related_project ul > li .dec { margin-top: 25px; }
#design_related_project ul > li .dec > .txt { font-size: 0.9em; max-width: 380px; text-align: center; }


#design_area_bim { margin-top: 70px; }
#design_area_bim > li + li { margin-top: 50px; }
#design_area_bim > li { display: flex; align-items: center; gap: 70px; }
#design_area_bim > li > .img { width: 450px; flex: none; border-radius: 10px; overflow: hidden; }


/*#design_area_bim_step { height: 600vh; }
#design_area_bim_step > * { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; width: 100%; max-width: 100%; }
#design_area_bim_step > * > * { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; }

.design_area_bim_step_list > ul { display: inline-flex; gap: 100px; }
.design_area_bim_step_list > ul > li { width: 1320px; }

.design_area_bim_step_list .step_item { display: flex; align-items: center; }
.design_area_bim_step_list .step_item > * { width: 50%; }
.design_area_bim_step_list .step_item .img { border-radius: 10px; overflow: hidden; }
.design_area_bim_step_list .step_item .dec { padding-left: 100px; }
.design_area_bim_step_list .step_item .dec > div { position: relative; padding-left: 70px; }
.design_area_bim_step_list .step_item .dec .num { font-size: 80px; color: var(--secondary-color); font-weight:  700; opacity: 0.2; position: absolute; top: -20px; left: 0; line-height: 1; }
.design_area_bim_step_list .step_item .dec .tit { font-size: 39px; color: var(--secondary-color); margin-top: 0; }*/


.design_area_bim_step_list > ul { display: flex; flex-wrap: wrap; margin: -30px; }
.design_area_bim_step_list > ul > li { width: calc(100% / 2); padding: 30px; }
.design_area_bim_step_list .step_item { display: flex; align-items: center; }
.design_area_bim_step_list .step_item > * { width: 50%; }
.design_area_bim_step_list .step_item .img { border-radius: 10px; overflow: hidden; }
.design_area_bim_step_list .step_item .dec { padding-left: 20px; }
.design_area_bim_step_list .step_item .dec > div { position: relative; padding-left: 50px; }
.design_area_bim_step_list .step_item .dec .num { font-size: 2.5em; color: var(--secondary-color); font-weight: 700; opacity: 0.2; position: absolute; top: -15px; left: 0; line-height: 1; }
.design_area_bim_step_list .step_item .dec .tit { font-size: 1.1em; color: var(--secondary-color); margin-top: 0; margin-bottom: 10px; }
.design_area_bim_step_list .step_item .dec .text { font-size: 0.85em; line-height: 1.25; }

/*#management_intro_cm .secObject * + .img { margin-top: 50px; }*/


#management_intro_cm .cm_top > ul { border-radius: 10px; overflow: hidden; display: flex; min-height: 500px; }
#management_intro_cm .cm_top > ul > li { width: 100%; position: relative; }
#management_intro_cm .cm_top > ul > li > .cont { position: relative; z-index: 1; background-color: rgba(0, 0, 0, .25); padding: 40px; height: 100%; }
#management_intro_cm .cm_top > ul > li > .cont .tit { color: #fff; }
#management_intro_cm .cm_top > ul > li > .cont .txt { color: #fff; }
#management_intro_cm .cm_top > ul > li > .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #ddd; }





#management_intro_str .secObject * + .img { margin-top: 50px; }
#management_intro_str .secObject * + .sTitle { margin-top: 50px; }
#management_intro_str .secObject .row { margin: -20px -10px; margin-top: 50px; }
#management_intro_str .secObject .row > li { padding: 20px 10px; width: calc(100% / 4); }

/*#management_intro_spa .secObject * + .img { margin-top: 50px; }*/
#management_intro_spa .box { display: flex; flex-direction: column; justify-content: space-between; padding: 60px; border-radius: 10px; min-height: 500px; margin-top: 50px; color: #fff; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(../img/business/management_intro_spa_1_bg.jpg); }
#management_intro_spa .box .text { font-size: 1.56em; font-weight: 700; }
#management_intro_spa .box .text span { opacity: 0.4; }
#management_intro_spa .box .obj { text-align: center; }



#management_area_top .kv { padding: 60px; border-radius: 10px; min-height: 470px; color: #fff; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: var(--primary-color); }
#management_area_top .kv .title { font-size: 2em; margin-bottom: 0; }
#management_area_top .kv .tit { font-size: 1.2em; color: #fff; margin-top: 10px; margin-bottom: 0; }
#management_area_top .kv .text { margin-top: 10px; max-width: 500px; }

#management_area_top .list { display: flex; gap: 15px; margin-top: 15px; }
#management_area_top .list > li { width: 100%; text-align: center; }
#management_area_top .list > li .img { width: 100%; height: 0; padding-top: 56.25%; border-radius: 10px; background-size: cover; background-repeat: no-repeat; background-position: center; }
#management_area_top .list > li .ti { font-size: 0.85em; margin-top: 15px; }



#management_area_building .secObj { margin-top: 60px; text-align: center; }
#management_area_building .secObj .title { color: var(--primary-color); margin-bottom: 50px; }
#management_area_building .title small { display: block; font-size: 15px; font-weight: 300; margin-top: 5px; }
#management_area_building .rTit { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; width: auto; height: 48px; font-size: 1em; color: var(--secondary-color); border: 2px solid var(--secondary-color); border-radius: 48px; margin-bottom: 15px; }
#management_area_building .videoObj { margin-top: 50px; }
#management_area_building .videoObj .img { border-radius: 10px; overflow: hidden; position: relative; display: block; }
#management_area_building .videoObj .img:before { content: ''; width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); }
#management_area_building .videoObj p { text-align: center; font-size: 1em; font-weight: 600; margin-top: 20px; }

#management_area_building #tabMenu { display: flex; }
#management_area_building #tabMenu > li { border-bottom: 3px solid transparent; }
#management_area_building #tabMenu > li + li { margin-left: 30px; }
#management_area_building #tabMenu > li > a { white-space: nowrap; font-size: 1.35em; font-weight: 500; color: #97aebc; line-height: 1; }
#management_area_building #tabMenu > li.active { border-color: var(--primary-color); }
#management_area_building #tabMenu > li.active > a { color: #000; }
#management_area_building [id*='tabCont_']:not(.active) { display: none; }


.management_building_list { display: flex; margin: -8px; margin-top: 8px; }
.management_building_list > li { padding: 8px; width: 100%; }
.management_building_list > li > div { border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; padding-top: 40px; text-align: center; }


#management_area_highTech .secObj { margin-top: 60px; text-align: center; }
#management_area_highTech .secObj .title { color: var(--primary-color); margin-bottom: 50px; }

.management_highTech_service_1 { display: flex; flex-wrap: wrap; justify-content: center; margin: -8px; }
.management_highTech_service_1 > li { width: calc(100% / 5); padding: 8px; text-align: center; }
.management_highTech_service_1 > li .img { border-radius: 8px; overflow: hidden; }
.management_highTech_service_1 > li .ti { font-size: 1em; font-weight: 300; margin-top: 15px; }

.management_highTech_service_2 { display: flex; gap: 15px; }
.management_highTech_service_2 > li { width: 100%; border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.management_highTech_service_2 > li .img { border-radius: 8px; overflow: hidden; }
.management_highTech_service_2 > li .dec { padding: 20px; padding-top: 10px; }
.management_highTech_service_2 > li .ti { font-size: 1.2em; font-weight: 700; margin-bottom: 15px; }
.management_highTech_service_2 > li .tx { font-size: 1em; font-weight: 300; max-width: 290px; }


.management_highTech_service_3 { background-color: #f5f9fa; border-radius: 10px; padding: 20px; }
.management_highTech_service_3 .obj { text-align: center; padding: 70px 0; }
.management_highTech_service_3 .list { display: flex; gap: 15px; }
.management_highTech_service_3 .list > li { width: 100%; border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; background-color: #fff; }
.management_highTech_service_3 .list > li .img { border-radius: 8px; overflow: hidden; }
.management_highTech_service_3 .list > li .dec { padding: 20px; padding-top: 10px; }
.management_highTech_service_3 .list > li .ti { font-size: 1.1em; font-weight: 700; margin-bottom: 15px; }
.management_highTech_service_3 .list > li .tx { font-size: 1em; font-weight: 300; }




#management_area_plant #management_area_top .kv .text { font-size: 1.5em; font-weight: 700; margin-top: 0; }
#management_area_plant_1 .img { margin-top: 70px; display: flex; gap: 50px; }
#management_area_plant_1 .img > li { border-radius: 10px; overflow: hidden; }
#management_area_plant_1 .row { margin-top: 70px; }
#management_area_plant_1 .row > .obj { text-align: center; }
#management_area_plant_1 .row > .text { padding: 20px; }
#management_area_plant_2 .secObject { background-color: #f5f9fa; border: 0; }
#management_area_plant_3 .secObject { padding: 50px; }
#management_area_plant_4 .plant_project { display: flex; flex-wrap: wrap; margin: -20px; }
#management_area_plant_4 .plant_project > div { width: calc(100% / 4); padding: 20px; }
#management_area_plant_4 .plant_project > div > ul { display: flex; flex-direction: column; margin: -10px; }
#management_area_plant_4 .plant_project > div > ul > li { width: 100%; padding: 10px; text-align: center; }
#management_area_plant_4 .plant_project > div > ul > li .img { border-radius: 5px; overflow: hidden; }
#management_area_plant_4 .plant_project > div > ul > li .ti { font-size: 0.75em; font-weight: 300; margin-top: 10px; }


#mybook_list { margin-top: 70px; }
#mybook_list > .noti { text-align: right; margin-bottom: 15px; font-size: 0.8em; }
#mybook_list > ul { display: flex; flex-wrap: wrap; gap: 10px; }
#mybook_list > ul > li { width: calc((100% - 10px*5) / 6); }
#mybook_list > ul > li > .item { width: 100%; height: 0; padding-top: 140%; background-color: #fff; border: 1px solid var(--border-color); position: relative; overflow: hidden; }
#mybook_list > ul > li > .item > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 20px; }
#mybook_list > ul > li > .item > div.cover { padding: 0; justify-content: center; }
#mybook_list > ul > li > .item > div > .img { position: relative; overflow: hidden; flex: none; }
#mybook_list > ul > li > .item > div > .img > div { width: 100%; height: 0; padding-top: 75%; background-size: cover; background-repeat: no-repeat; background-position: center; }
#mybook_list > ul > li > .item > div > .tit { font-size: 0.8em; color: #000; margin-top: 10px; }
#mybook_list > ul > li > .item > div > .del { position: absolute; bottom: 10px; right: 10px; width: 20px; height: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0; background-color: rgba(0, 0, 0, 0.5); border: 0; border-radius: 50%; transition: .25s; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='14px' viewBox='0 -960 960 960' width='14px' fill='%23ffffff'%3E%3Cpath d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/%3E%3C/svg%3E"); }
#mybook_list > ul > li:not(.ui-state-disabled):hover > .item { border-color: var(--secondary-color); }
#mybook_list > ul > li.ui-state-highlight { border: 2px dashed var(--border-color); }
#mybook_list .none { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.5em; height: 50vh; }


#floating-menu { position: sticky; bottom: 0; z-index: 100; display: flex; flex-direction: column-reverse; width: 70px;  margin-right: 30px; margin-left: auto; }
#floating-menu > .btn { position: absolute; bottom: 30px; right: 0; z-index: 1; width: 50px; height: 50px; padding: 0; box-shadow: 1.389px 1.439px 7px 0px rgba(0, 0, 0, 0.06); border-radius: 50%; background-color: #fff; border: 1px solid var(--border-color); padding: 10px; }

#scroll-top { position: sticky; bottom: 0; z-index: 100; display: flex; flex-direction: column-reverse; width: 70px;  margin-right: 30px; margin-left: auto; }
#scroll-top > .btn { position: absolute; bottom: 30px; right: 0; z-index: 1; width: 50px; height: 50px; padding: 0; box-shadow: 1.389px 1.439px 7px 0px rgba(0, 0, 0, 0.06); border-radius: 50%; transform: scale(0) rotate(180deg); transition: .3s ease; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); border: 0; background-position: center; background-repeat: no-repeat; background-size: 40%; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath style='fill:rgb(255,255,255);' d='M480-80 200-360l56-56 184 183v-647h80v647l184-184 56 57L480-80Z'/%3E%3C/svg%3E"); }
#scroll-top.show > .btn { transform: scale(1) rotate(180deg); }


#chatbot { position: fixed; bottom: 30px; right: 30px; z-index: 2; width: 390px; height: 680px; border-radius: 30px; background-color: #d9e1eb; box-shadow: 1.389px 1.439px 7px 0px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; }
#chatbot .top { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
#chatbot .top .close { background-color: transparent; border: 0; display: flex; }
#chatbot .top .close svg { stroke: #000; }
#chatbot .body { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
#chatbot .chatBox { height: 100%; overflow: auto; scrollbar-width: none; }
#chatbot .inputBox { padding: 15px; }
#chatbot .inputBox .form { background-color: #fff; padding: 10px; display: flex; align-items: flex-end; gap: 10px; border-radius: 15px; }
#chatbot .inputBox .input { width: 100%; display: flex; align-items: center; height: 100%; min-height: 40px; }
#chatbot .inputBox .input textarea { width: 100%; display: block; border: 0; outline: 2px solid transparent; resize: none; }
#chatbot .inputBox .button button { width: 40px; height: 40px; background-color: var(--primary-color); border-radius: 8px; border: 0; display: flex; align-items: center; justify-content: center; }
#chatbot .inputBox .button button svg { fill: #fff; }

#chatbot .keep_message { padding: 0 15px; margin-bottom: 30px; line-height: 1.4; }
#chatbot .keep_message h1 { font-size: 20px; margin-top: 0; }
#chatbot .keep_message p { font-size: 16px; }

#chatbot .chat_message { padding: 0 15px; }
#chatbot .chat_message > li { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
#chatbot .chat_message > li + li { margin-top: 20px; }
#chatbot .chat_message > li .name { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.25; color: #000; }
#chatbot .chat_message > li .name .ico { width: 32px; height: 32px; flex: none; background-color: #fff; border-radius: 50%; padding: 7px; }
#chatbot .chat_message > li .text { font-size: 15px; color: #000; line-height: 1.4; max-width: 100%; border-radius: 15px; background-color: #fff; padding: 10px 20px; }
#chatbot .chat_message > li.question { justify-content: center; align-items: flex-end; }
#chatbot .chat_message > li.question .text { background-color: var(--primary-color); color: #fff; max-width: 90%; }

#chatbot .chat_message > li .text img { max-width: 200px; }

#chatbot .chat_message > li .text .link { margin-top: 20px; }
#chatbot .chat_message > li .text .link .btn { min-width: 150px; width: auto; justify-content: space-between; }
#chatbot .chat_message > li .text .link .btn:before,
#chatbot .chat_message > li .text .link .btn:after { content: ''; width: 22px; height: 18px; margin-left: 5px; flex: none; 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='%23ffffff'%3E%3Cpath d='m700-300-57-56 84-84H120v-80h607l-83-84 57-56 179 180-180 180Z'/%3E%3C/svg%3E"); }
#chatbot .chat_message > li .text .link .btn:before { margin-left: -50px; margin-right: 5px; transition: transform 0.25s; 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='m700-300-57-56 84-84H120v-80h607l-83-84 57-56 179 180-180 180Z'/%3E%3C/svg%3E"); }
#chatbot .chat_message > li .text .link .btn:hover { background-color: #fff; color: #000; border-color: #c6c6c6; }
#chatbot .chat_message > li .text .link .btn:hover:before { transform: translateX(50px); }
#chatbot .chat_message > li .text .link .btn:hover:after { display: none; }






/* ESG */
#esg_strategy_01 .vTitle { font-size: 190px; font-weight: 700; color: #f2f7fa; margin-bottom: -180px; }
#esg_strategy_01 .esg_item { display: flex; align-items: center; }
#esg_strategy_01 .esg_item .tit { width: 260px; font-size: 27px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; }
#esg_strategy_01 .esg_item .tit:after { content: ''; width: 100%; border-top: 3px dotted #87959e; margin-left: 30px; }
#esg_strategy_01 .esg_item .cont { max-width: 920px; width: 100%; padding: 60px 20px; }
#esg_strategy_01 .esg_item .list { display: flex; align-items: center; justify-content: space-between; margin: 0 -5px; }
#esg_strategy_01 .esg_item .list > li { width: calc(100% / 5); position: relative; padding: 0 5px; text-align: center; }
#esg_strategy_01 .esg_item .list > li .text { position: absolute; left: 0; text-align: center; line-height: 1.25; width: 100%; margin-top: 20px; font-weight: 700; white-space: nowrap; }
#esg_strategy_01 .esg_item .list > li .text small { display: inline-block; line-height: 1; }
#esg_strategy_01 .esg_item .list > li .line { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background-color: #87959e; z-index: -1; }
#esg_strategy_01 .esg_item .list > li .dot { position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; background-color: #fff; border: 3px solid #87959e; border-radius: 50%; }
#esg_strategy_01 .esg_item .list > li .box { border: 1px solid var(--border-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 10px; height: 120px; background-color: #fff; }
#esg_strategy_01 .esg_item .list > li .box + .box { margin-top: 20px; }
#esg_strategy_01 .esg_item .list > li .box .txt { font-size: 15px; font-weight: 600; line-height: 1.25; } 
#esg_strategy_01 .esg_item .list > li .box .txt span { font-weight: 300; color: #666; }
#esg_strategy_01 .esg_item .em { margin-top: 20px; display: flex; align-items: center; justify-content: flex-end; font-size: 15px; }
#esg_strategy_01 .esg_item .em dl { display: inline-flex; align-items: center; margin-right: 10px; }
#esg_strategy_01 .esg_item .em dl > dd + dd { margin-left: 5px; }
#esg_strategy_01 .esg_item .em dl > dd { width: 20px; height: 20px; border: 1px solid var(--border-color); background-color: #fff; border-radius: 3px; }

#esg_strategy_01 .moreBtn { text-align: center; margin-top: 50px; }
#esg_strategy_01 .moreBtn > .btn { width: 140px; height: 50px; justify-content: space-between; padding: 0 20px; font-weight: 600; }
#esg_strategy_01 .moreBtn > .btn:after { content: '+'; color: #99adbb; font-size: 1.5em; font-weight: 400; }

#esg_strategy_02 .secObject { padding: 140px 20px; overflow: hidden; }
#esg_strategy_02 .secObject ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 -75px; }
#esg_strategy_02 .secObject ul > li { width: 300px; height: 300px; position: relative; display: flex; align-items: center; justify-content: center; margin: -35px 75px; transform: scale(1); transition: .4s ease; }
#esg_strategy_02 .secObject ul > li > .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #666; z-index: -1; border-radius: 40px; transform: rotate(45deg); transition: .4s ease; }
#esg_strategy_02 .secObject ul > li > .cont { width: 85%; transition: .4s ease; color: #fff; margin-top: -15%; transition: .4s ease; }
#esg_strategy_02 .secObject ul > li > .cont .al { font-size: 60px; font-weight: 800; line-height: 1; margin-bottom: 5px; }
#esg_strategy_02 .secObject ul > li > .cont .tit { font-size: 17px; font-weight: 800; line-height: 1; margin-bottom: 15px; te }
#esg_strategy_02 .secObject ul > li > .cont .txt { font-size: 16px; font-weight: 300; border-top: 1px solid #fff; padding-top: 10px; }
#esg_strategy_02 .secObject ul > li:nth-child(1) { order: 1; }
#esg_strategy_02 .secObject ul > li:nth-child(2) { order: 4; }
#esg_strategy_02 .secObject ul > li:nth-child(3) { order: 2; }
#esg_strategy_02 .secObject ul > li:nth-child(4) { order: 5; }
#esg_strategy_02 .secObject ul > li:nth-child(5) { order: 3; }
#esg_strategy_02 .secObject ul > li.hover { z-index: 1; }
#esg_strategy_02 .secObject ul > li.hover .box { transform: scale(1.25) rotate(0); }
#esg_strategy_02 .secObject ul > li.hover .cont { width: 100%; margin-top: -5%; }
#esg_strategy_02 .secObject ul > li.nohover { opacity: 0.7; transform: scale(0.95);}


#esg_ethics_value .ethics_value { margin-top: 70px; }
#esg_ethics_value .ethics_value > .cir { display: flex; gap: 70px; justify-content: center; }
#esg_ethics_value .ethics_value > .cir > li { width: 190px; height: 190px; flex: none; position: relative; border-radius: 50%; background-color: var(--primary-color); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 10px; }
#esg_ethics_value .ethics_value > .cir > li:after { content: ''; opacity: 0; position: absolute; top: calc(100% + 30px); z-index: -1; width: 100px; height: 100px; background-color: #f5f9fa; border-radius: 10px; transform: rotate(45deg); }
#esg_ethics_value .ethics_value > .cir > li.on { background-color: #00bdc8; }
#esg_ethics_value .ethics_value > .cir > li.on:after { opacity: 1; }
#esg_ethics_value .ethics_value > .val { margin: 0 auto; margin-top: 70px; width: 100%; max-width: 875px; background-color: #f5f9fa; border-radius: 10px; text-align: center; }
#esg_ethics_value .ethics_value > .val > li { display: none; font-size: 1em; line-height: 1.65; padding: 50px; margin: 0 auto; max-width:750px; }
#esg_ethics_value .ethics_value > .val > li.on { display: block; }


#esg_ethics_report .report_box { border: 1px solid var(--border-color); border-radius: 10px; padding: 50px 70px; display: flex; align-items: center; gap: 60px; }
#esg_ethics_report .report_box > .ico { padding: 30px; flex: none; }
#esg_ethics_report .report_box > .list { display: flex; flex-wrap: wrap; }
#esg_ethics_report .report_box > .list > li { width: calc(100% / 3); padding: 20px; }
#esg_ethics_report .report_box > .list > li > a { display: flex; flex-direction: column; height: 100%; }
#esg_ethics_report .report_box > .list > li > a .tit { font-size: 1em; color: var(--primary-color); font-weight: 700; margin-bottom: 10px; flex: none; }
#esg_ethics_report .report_box > .list > li > a .txt { font-size: 0.9em; line-height: 1.4; margin-bottom: 10px; height: 100%; }
#esg_ethics_report .report_box > .list > li > a .link { width: 30px; height: 30px; flex: none; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
#esg_ethics_report .report_box > .list > li > a .link > svg { width: 16px; transform: rotate(180deg); }


.esg_ethics_box { background-color: #f5f9fa; padding: 50px; border-radius: 10px; max-width: 880px; margin: 0 auto; }
.esg_ethics_box .sign { display: flex; align-items: center; justify-content: space-between; margin-top: 50px; }


#ethical_policy .row { align-items: center; }
#ethical_policy .dec { padding: 40px; display: flex; justify-content: center; }
#ethical_policy .dec > div { max-width: 475px; }
#ethical_policy .dec .sTitle { color: var(--secondary-color); }

#ethical_edu .sTitle { color: var(--secondary-color); }
#ethical_edu .ethical_edu_list + * { margin-top: 60px; }
#ethical_edu .ethical_edu_list ul { display: flex; flex-wrap: wrap; margin-left: -40px; margin-bottom: -40px; }
#ethical_edu .ethical_edu_list ul.col2 li { width: calc(100% / 2); }
#ethical_edu .ethical_edu_list ul.col3 li { width: calc(100% / 3); }
#ethical_edu .ethical_edu_list ul.col4 li { width: calc(100% / 4); }
#ethical_edu .ethical_edu_list ul li { padding-left: 40px; padding-bottom: 40px; box-sizing: border-box; text-align: center; }
#ethical_edu .ethical_edu_list ul li .img > img { width: 100%; }
#ethical_edu .ethical_edu_list ul li .tit { margin-top: 15px; font-size: 1em; color: #222; }

* + .input_form_top { margin-top: 70px; }
.input_form_top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.input_form_top .tit { font-size: 1em; font-weight: 700; color: var(--primary-color); }
.input_form_top .txt { font-size: 1em; font-weight: 300; line-height: 1.5; }
.input_form_top .txt > li { display: flex; }
.input_form_top .txt > li + li { margin-top: 5px; }
.input_form_top .txt > li:before { content: '-'; margin-right: 10px; }
.input_form_top .txt span { color: var(--secondary-color);}
.input_form_top .em { font-size: 17px; font-weight: 300; }
.input_form_top .em > span { color: var(--secondary-color); vertical-align: text-top; }

.input_form_top + .input_form { margin-top: 30px; }

.input_form { border: 1px solid var(--border-color); border-radius: 6px; padding: 40px 60px; }
.input_form > .noti { font-size: 0.9em; margin-bottom: 30px; line-height: 1.65; }
.input_form > ul > li { min-height: 60px; display: flex; gap: 20px; }
.input_form > ul > li + li { margin-top: 20px; }
.input_form > ul > li .th { width: 140px; height: 60px; flex: none; font-size: 17px; font-weight: 500; padding: 20px 0; }
.input_form > ul > li .th.req:after { content: '*'; color: var(--secondary-color); margin-left: 5px; vertical-align: text-top; }
.input_form > ul > li .td { font-size: 17px; width: 100%; align-self: center; }
.input_form > ul > li .td.read { padding: 20px 0; }
.input_form > ul > li .td .ex { margin-left: 10px; font-size: 17px; font-weight: 300; }
.input_form > ul > li .ipt { width: 100%; max-width: 600px; }
.input_form > ul > li select.ipt { max-width: 260px; }
.input_form > ul > li textarea.ipt { min-height: 220px; line-height: 1.66; }
.input_form > ul > li .ipt_group .em { font-size: 14px; color: var(--danger-color); }
.input_form > ul > li.address .ipt_group { margin-bottom: 20px; }
.input_form > ul > li.notReq .req:after { display: none; }

.input_form.privacy_text { font-size: 1em; }
.input_form + .privacy_chk { margin-top: 30px; }


.input_form_btn { margin-top: 70px; text-align: center; }
.input_form_btn .btn { width: 200px; height: 50px; }
.input_form_btn .txt { font-size: 17px; font-weight: 300; margin-top: 40px; }
.input_form_btn .txt span { color: var(--secondary-color); }


#report_confirm .text { font-size: 15px; font-weight: 300; line-height: 1.6; }
#report_confirm .textBox { }
#report_confirm .textBox .tit { font-size: 0.9em; font-weight: 700; color: var(--primary-color); margin-bottom: 10px; display: flex; align-items: center; }
#report_confirm .textBox .tit:before { content: ''; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23055a93'%3E%3Cpath d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); }
#report_confirm .textBox .txt { font-size: 0.85em; font-weight: 300; line-height: 1.6; margin-left: 32px; }
#report_confirm .textBox .txt b { color: var(--secondary-color); }



#esg_fairTrade_message { background-color: #f5f9fa; padding: 60px 80px; border-radius: 10px; }
#esg_fairTrade_message .title { font-size: 2em; margin-bottom: 50px; }
#esg_fairTrade_message b { font-weight: 700; }

#esg_fairTrade_cp .row { flex-wrap: nowrap; gap: 45px; }
#esg_fairTrade_cp .row > div { display: flex; flex-direction: column; }
#esg_fairTrade_cp .text { height: 100%; }
#esg_fairTrade_cp .box { height: 100%; padding: 40px; border: 1px solid var(--border-color); background-color: #fff; border-radius: 10px; }
#esg_fairTrade_cp .cp_list_1 > li { padding-left: 30px; }
#esg_fairTrade_cp .cp_list_1 > li > span { color: var(--primary-color); }
#esg_fairTrade_cp .cp_list_2 > li + li { margin-top: 15px; }
#esg_fairTrade_cp .cp_list_2 > li .t1 { font-weight: 700; }
#esg_fairTrade_cp .cp_list_2 > li .t1 > span { position: absolute; top: 0; left: 0; }
#esg_fairTrade_cp .cp_list_2 > li .t2 { font-size: 0.9em; margin-top: 5px; }


.cp_pdf_file { display: flex; margin-top: 60px; }
.cp_pdf_file .img { margin-right: 50px; flex: none; }
.cp_pdf_file .img > img { max-width: 300px; }
.cp_pdf_file .img p { font-size: 14px; text-align: center; margin-top: 15px; }
.cp_pdf_file .dec { padding-top: 30px; } 
.cp_pdf_file .dec .tit { color: #000; }
.cp_pdf_file .dec .download { margin-top: 70px; }


.fairTrade_law_link { display: flex; gap: 14px; }
.fairTrade_law_link + * { margin-top: 15px; }
.fairTrade_law_link > li { width: 100%; border: 1px solid var(--border-color); border-radius: 10px; padding: 35px; }
.fairTrade_law_link > li > .tit { font-size: 1em; font-weight: 600; }
.fairTrade_law_link > li > .txt { font-size: 1em; font-weight: 300; max-width: 350px; }
.fairTrade_law_link > li > .txt .outlink { display: inline-block;  }
.fairTrade_law_link > li > .txt .outlink:after { content: ''; display: inline-block; width: 22px; height: 22px; flex: none; margin-left: 5px; position: relative; top: 5px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23dadff0'%3E%3Cpath d='m480-320 160-160-160-160-56 56 64 64H320v80h168l-64 64 56 56Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); }
.fairTrade_law_link > li > .txt .outlink:hover { color: var(--secondary-color); }


.fairTrade_site_link { border: 1px solid var(--border-color); border-radius: 10px; }
.fairTrade_site_link > li { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 20px 30px; min-height: 90px; }
.fairTrade_site_link > li + li { border-top: 1px solid var(--border-color); }
.fairTrade_site_link > li > .links { display: flex; gap: 30px; }
.fairTrade_site_link > li > .links > li > a { font-size: 0.9em; color: var(--primary-color); font-weight: 600; display: flex; align-items: center; }
.fairTrade_site_link > li > .links > li > a:after { content: ''; width: 35px; height: 35px; border: 1px solid var(--border-color); border-radius: 35px; margin-left: 10px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='15px' viewBox='0 -960 960 960' width='15px' fill='%23004982'%3E%3Cpath d='M216-144q-29.7 0-50.85-21.15Q144-186.3 144-216v-528q0-29.7 21.15-50.85Q186.3-816 216-816h264v72H216v528h528v-264h72v264q0 29.7-21.15 50.85Q773.7-144 744-144H216Zm171-192-51-51 357-357H576v-72h240v240h-72v-117L387-336Z'%3E%3C/path%3E%3C/svg%3E"); }



.esg_social_top { display: flex; align-items: center; gap: 60px; }
.esg_social_top > .title { flex: none; position: relative; display: flex; align-items: center; gap: 20px; margin-bottom: 0 !important; }
.esg_social_top > .title:before { content: 'C'; position: relative; z-index: -1; font-size: 180px; color: var(--secondary-color); line-height: 1; opacity: 0.5; }

.esg_social_activity .top { display: flex; }
.esg_social_activity .top .title { color: #b3cddd; flex: none; margin-bottom: 5px; }
.esg_social_activity .top .tit { font-size: 1em; color: #000; margin: 0; }
.esg_social_activity .top .text { border-left: 1px solid var(--border-color); margin-left: 30px; padding-left: 30px; }


.esg_social_participation { text-align: center; border-top: 1px solid var(--border-color); padding-top: 70px; }
.esg_social_participation > .title { padding-bottom: 20px; margin-bottom: 20px !important; position: relative; }
.esg_social_participation > .title:after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); width: 30%; height: 1px; }
.esg_social_participation .obj { margin-top: 30px; }

.esg_social_reborn { border: 1px solid var(--border-color); border-radius: 10px; text-align: center; overflow: hidden; }
.esg_social_reborn > * { margin-top: 50px; }
.esg_social_reborn > .btn { display: flex; margin-left: auto; margin-right: 30px; margin-bottom: 30px; }

.esg_social_certi .list { margin: 0 auto; max-width: 660px; }
.esg_social_certi .img { margin-bottom: 40px; }
.esg_social_certi .ti { font-size: 21px; font-weight: 700; color: #000; margin-bottom: 15px; }
.esg_social_certi .dec { font-size: 17px; }
.esg_social_certi .dec > dl + dl { margin-top: 5px; }
.esg_social_certi .dec > dl { display: flex; gap: 15px; }
.esg_social_certi .dec > dl > dt { width: 80px; flex: none; color: var(--primary-color); font-weight: 600; }
.esg_social_certi .dec > dl > dd { width: 100%; }

.img_gallery { margin-top: 40px; }
.img_gallery > ul { display: flex; flex-wrap: wrap; margin: -7px; }
.img_gallery > ul > li { padding: 7px; width: calc(100% / 5); }
.img_gallery > ul > li > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 0; padding-top: 70%; border-radius: 8px; position: relative; overflow: hidden; cursor: default; }
.img_gallery > ul > li > a > .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }
/*.img_gallery > ul > li > a:before { content: ''; opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); transition: opacity .3s ease; }
.img_gallery > ul > li > a:after { content: ''; opacity: 0; position: absolute; top: 50%; left: 50%; z-index: 1; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%,-50%); transition: opacity .3s ease; background-color: var(--secondary-color); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='15px' viewBox='0 -960 960 960' width='15px' fill='%23ffffff'%3E%3Cpath d='M782.87-98.52 526.91-354.48q-29.43 21.74-68.15 34.61Q420.04-307 375.48-307q-114.09 0-193.55-79.46-79.45-79.45-79.45-193.54 0-114.09 79.45-193.54Q261.39-853 375.48-853q114.09 0 193.54 79.46 79.46 79.45 79.46 193.54 0 45.13-12.87 83.28T601-429.7l256.52 257.09-74.65 74.09ZM375.48-413q69.91 0 118.45-48.54 48.55-48.55 48.55-118.46t-48.55-118.46Q445.39-747 375.48-747t-118.46 48.54Q208.48-649.91 208.48-580t48.54 118.46Q305.57-413 375.48-413Z'/%3E%3C/svg%3E"); }
.img_gallery > ul > li > a:hover:before,
.img_gallery > ul > li > a:hover:after { opacity: 1; }*/

.image_gallery_modal { position: fixed; top: 0; left: 0; z-index: 1000; width: 100vw; height: 100vh; padding: 50px; background-color: rgba(0, 0, 0, .9); backdrop-filter: blur(2px); color: #fff; display: none; flex-direction: column; align-items: center; justify-content: center; }
.image_gallery_modal.on { display: flex; }
.image_gallery_modal .modal_close { position: absolute; top: 40px; right: 40px; z-index: 1; width: 25px; height: 25px; font-size: 0; background-color: transparent; border: 0; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23ffffff'%3E%3Cpath d='M256-213.85 213.85-256l224-224-224-224L256-746.15l224 224 224-224L746.15-704l-224 224 224 224L704-213.85l-224-224-224 224Z'/%3E%3C/svg%3E"); }
.image_gallery_modal .swiper-button-prev,
.image_gallery_modal .swiper-button-next { width: 35px; height: 35px; background-color: transparent; background-position: center; background-repeat: no-repeat; border: 0; }
.image_gallery_modal .swiper-button-prev:after,
.image_gallery_modal .swiper-button-next:after { display: none; }
.image_gallery_modal .swiper-button-prev { left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40px' viewBox='0 -960 960 960' width='40px' fill='%23ffffff'%3E%3Cpath d='m316.67-116.67-31.34-30.66 333.34-333.34-333.34-332.66 31.34-31.34 364 364-364 364Z'/%3E%3C/svg%3E"); transform: rotate(180deg); }
.image_gallery_modal .swiper-button-next { right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40px' viewBox='0 -960 960 960' width='40px' fill='%23ffffff'%3E%3Cpath d='m316.67-116.67-31.34-30.66 333.34-333.34-333.34-332.66 31.34-31.34 364 364-364 364Z'/%3E%3C/svg%3E"); }
.image_gallery_modal .image_gallery_swiper { width: var(--inner-width); max-width: var(--inner-max-width); margin: 0 auto; }
.image_gallery_modal .image_gallery_swiper .swiper-slide  { display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: auto; }
.image_gallery_modal .img { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; }
.image_gallery_modal .img img { max-height: 100%; }
.image_gallery_modal .certi_page { padding: 40px; height: 100%; display: flex; align-items: center; }


#esg_safety_policy .box { max-width: 1040px; margin: 0 auto; margin-top: 60px; border: 15px solid #e9f1f5; padding: 75px; }
#esg_safety_policy .box .title { text-align: center; font-size: 1.85em; margin-bottom: 50px; }
#esg_safety_policy .box .sign { text-align: right; margin-top: 50px; font-weight: 700; }
#esg_safety_policy .box .sign .date { font-weight: 300; }

#esg_safety_activity .gallery > ul { display: flex; flex-wrap: wrap; gap: 15px; }
#esg_safety_activity .gallery > ul > li { width: calc((100% - 15px*2) / 3); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; }
#esg_safety_activity .gallery > ul > li > .img { width: 100%; height: 0; padding-top: 62%; border-radius: 5px; background-size: cover; background-repeat: no-repeat; background-position: center; cursor: pointer; }
#esg_safety_activity .gallery > ul > li > .img + .img { margin-top: 10px; }
#esg_safety_activity .gallery > ul > li > .txt { text-align: center; font-size: 0.9em; font-weight: 500; margin-top: 20px; }
#esg_safety_activity .gallery > ul > li > .txt span { font-weight: 300; }


.esg_certi_list { display: flex; flex-wrap: wrap; gap: 45px; }
.esg_certi_list > li { width: calc((100% - 45px*2) / 3); }
.esg_certi_list > li .img { display: block; width: 100%; height: 0; padding-top: 136%; margin-bottom: 40px; position: relative; cursor: default;}
/*.esg_certi_list > li .img:before { content: ''; opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: transition; border: 2px solid #000; border-radius: 10px; transition: opacity .3s ease; }
.esg_certi_list > li .img:after { content: ''; opacity: 0; position: absolute; right: 20px; bottom: 20px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; transition: opacity .3s ease; background-color: var(--secondary-color); background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='15px' viewBox='0 -960 960 960' width='15px' fill='%23ffffff'%3E%3Cpath d='M782.87-98.52 526.91-354.48q-29.43 21.74-68.15 34.61Q420.04-307 375.48-307q-114.09 0-193.55-79.46-79.45-79.45-79.45-193.54 0-114.09 79.45-193.54Q261.39-853 375.48-853q114.09 0 193.54 79.46 79.46 79.45 79.46 193.54 0 45.13-12.87 83.28T601-429.7l256.52 257.09-74.65 74.09ZM375.48-413q69.91 0 118.45-48.54 48.55-48.55 48.55-118.46t-48.55-118.46Q445.39-747 375.48-747t-118.46 48.54Q208.48-649.91 208.48-580t48.54 118.46Q305.57-413 375.48-413Z'/%3E%3C/svg%3E"); }
.esg_certi_list > li .img:hover:before,
.esg_certi_list > li .img:hover:after { opacity: 1; }*/
.esg_certi_list > li .img > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }

.esg_certi_list > li .ti { font-size: 1.1em; font-weight: 700; color: #000; margin-bottom: 15px; }
.esg_certi_list > li .dec { font-size: 0.9em; }
.esg_certi_list > li .dec > dl + dl { margin-top: 5px; }
.esg_certi_list > li .dec > dl { display: flex; gap: 15px; }
.esg_certi_list > li .dec > dl > dt { width: 80px; flex: none; color: var(--primary-color); font-weight: 600; }
.esg_certi_list > li .dec > dl > dd { width: 100%; }

.esg_cp_history { border: 1px solid var(--border-color); border-radius: 10px; }
.esg_cp_history > ul + ul { border-top: 1px solid var(--border-color); }
.esg_cp_history > ul > li { padding: 20px 60px; }
.esg_cp_history > ul > li + li { border-top: 1px solid var(--border-color); }
.esg_cp_history > ul > li > ul > li { display: flex; gap: 50px; }
.esg_cp_history > ul > li > ul > li + li { margin-top: 5px; }
.esg_cp_history > ul > li > ul > li > .date { display: flex; gap: 20px; justify-content: flex-end; text-align: right; width: 90px; flex: none; font-weight: 600; }










/* About */
#about_history_title { background-color: transparent; }
#about_history_title .hTitle { font-size: 245px; font-weight: 700; line-height: 1; color: #f2f7fa; margin-top: 40px; }

#about_history_cont { z-index: 0; }
#about_history_cont > .inner { padding-top: 0; }
#about_history_cont .history_contents { display: flex; align-items: flex-start; position: relative; }
#about_history_cont .history_contents > * { width: 50%; }

#about_history_cont .history_title { position: sticky; top: calc(var(--header-height) + 100px); padding-right: 100px; height: 100vh; z-index: 1; overflow: hidden; }
#about_history_cont .history_title .date { font-size: 3em; font-weight: 700; margin-bottom: 30px; line-height: 1.1em; height: 1.1em; display: flex; overflow: hidden; }
#about_history_cont .history_title .date * { font-family: inherit !important; }
#about_history_cont .history_title .date .current-txt { text-align: right; }
#about_history_cont .history_title .date .dash { padding: 0 10px; }
#about_history_cont .history_title .date .first_year { transform: translateY(0); transition: 2s; transition-delay: 0s; }
#about_history_cont .history_title .date .first_year.current { transform: translateY(-110%); transition: 2s; transition-delay: .5s; }
#about_history_cont .history_title .text { font-size: 1em; font-weight: 300; padding-bottom: 60px; }
#about_history_cont .history_title .img { width: 100%; height: 0%; padding-top: 56.25%; position: relative; overflow: hidden; border-radius: 5px; transition: .4s ease; }
#about_history_cont .history_title .img > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #dedede; background-size: cover; background-repeat: no-repeat; background-position: center; transition: 1s ease; transform: scale(1.2); clip-path: ellipse(50% 0% at 50% 100%); }
#about_history_cont .history_title .img > div.show { transform: scale(1); clip-path: ellipse(300% 300% at 50% 100%); }

#about_history_cont .history_list > ul { padding-left: 100px; }
#about_history_cont .history_list > ul + ul { margin-top: 50px; }
#about_history_cont .history_list > ul > li + li { margin-top: 50px; }
#about_history_cont .history_list > ul > li { position: relative; }
#about_history_cont .history_list > ul > li:before { content: ''; position: absolute; top: 8px; left: -100px; width: 24px; height: 24px; transform: translateX(-50%); background-color: #fff; border-radius: 50%; border: 5px solid var(--primary-color); }
#about_history_cont .history_list > ul > li .date { font-size: 1.5em; font-weight: 800; margin-bottom: 10px; }
#about_history_cont .history_list > ul > li .text { font-size: 1em; font-weight: 300; }
#about_history_cont .history_list > ul > li .text > li { padding-left: 15px; position: relative; }
#about_history_cont .history_list > ul > li .text > li:before { content: '·'; position: absolute; top: 0; left: 0; }
#about_history_cont .history_list > ul > li .text > li + li { margin-top: 10px; }
#about_history_cont .history_list > ul > li .text b { font-weight: 700; color: var(--secondary-color); } 

#about_history_cont .history_list > ul > li dl { margin-top: 5px; }
#about_history_cont .history_list > ul > li dl > dd { padding-left: 15px; position: relative; }
#about_history_cont .history_list > ul > li dl > dd:before { content: '-'; position: absolute; top: 0; left: 0; }
#about_history_cont .history_list > ul > li dl > dd + dd { margin-top: 5px; }


#about_history_cont .history_line { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background-color: #eff3f6; }
#about_history_cont .history_line .line { width: 100%; height: 0%; background-color: var(--primary-color); }
#about_history_cont .history_line .circle { position: absolute; top: 0%; left: 50%; width: 24px; height: 24px; background-color: #fff; border-radius: 50%; border: 2px solid var(--primary-color); transform: translate(-50%, -50%); background-position: center; background-size: 70%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' transform='rotate(180)' fill='%23004982'%3E%3Cpath d='M640-200 200-480l440-280v560Z'/%3E%3C/svg%3E"); }


#about_ci > .inner { background-color: #f5f9fa; border-radius: 10px; padding: 70px; }
#about_ci .secContent { max-width: 1080px; margin-left: auto; margin-right: auto; }
#about_ci ul { display: flex; justify-content: space-between; gap: 40px; }
#about_ci ul > li {  }
#about_ci .sTitle { font-size: 1em; font-weight: 700; margin-bottom: 20px; color: var(--secondary-color); }
#about_ci .btn_group { margin-top: 15px; }
#about_ci .btn_group .btn { width: 140px; justify-content: space-between; }
#about_ci .box { border: 1px solid #dbdbdb; background-color: #fff; padding: 50px 70px; margin-top: 30px; display: flex; gap: 40px 100px; }
#about_ci .box .tit { text-align: center; font-size: 1em; font-weight: 600; margin-bottom: 10px; }


#about_directions .mapBox { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
#about_directions .mapBox .map { width: 100%; height: 540px; position: relative; overflow: hidden; display: none; }
#about_directions .mapBox .map > * { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#about_directions .mapBox .map .wrap_map { height: 100%; }
#about_directions .mapBox .dec { position: relative; padding: 50px 60px; }
#about_directions .mapBox .dec .info  { font-size: 1em; }
#about_directions .mapBox .dec .info > li { display: flex; gap: 10px; }
#about_directions .mapBox .dec .info > li + li { margin-top: 5px; }
#about_directions .mapBox .dec .info > li .tit { width: 60px; flex: none; color: var(--primary-color); font-weight: 700; }
#about_directions .mapBox .dec .viewMap { position: absolute; bottom: 30px; right: 30px; width: 140px; text-transform: uppercase; justify-content: space-between; }
#about_directions .mapBox.show .map { display: block; } 


#about_greetings_top .title { font-size: 2.4em; color: var(--primary-color); }
#about_greetings_top .text { max-width: 1200px; }
#about_greetings_top .text b { font-weight: 700; white-space: nowrap; }
#about_greetings_top .img { margin: 60px 0; }
#about_greetings_top .row { align-items: flex-end; flex-wrap: nowrap; gap: 60px; }
#about_greetings_top .row .photo { width: 30%; flex: none; overflow: hidden; }
#about_greetings_top .row .photo > img { border-radius: 10px; }
#about_greetings_top .row .photo p { text-align: center; font-size: 1.5em; margin-top: 20px; display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
#about_greetings_top .row .photo p img { width: 120px; }


#about_greetings_executive .teams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; }
#about_greetings_executive .teams > li:nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; margin-right: 20%; }
#about_greetings_executive .teams .photo { border-radius: 10px; overflow: hidden; }
#about_greetings_executive .teams .photo img { width: 100%; }
#about_greetings_executive .teams .photo img.b { display: block; }
#about_greetings_executive .teams .photo img.c { display: none; }
#about_greetings_executive .teams > li:hover .photo img.b { display: none; }
#about_greetings_executive .teams > li:hover .photo img.c { display: block; }
#about_greetings_executive .teams .dec { padding-top: 20px; }
#about_greetings_executive .teams .dec .pos { font-size: 14px; font-weight: 700; color: var(--secondary-color); }
#about_greetings_executive .teams .dec .name { font-size: 21px; font-weight: 700; color: #000; }


#about_greetings_introduction .box { position: relative; border-radius: 10px; overflow: hidden; padding: 70px; background-color: #d6f4fc; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(../img/about/about_greetings_introduction_bg.jpg); }
#about_greetings_introduction .box:after { display: none; content: ''; position: absolute; top: 70px; right: 70px; width: 155px; height: 70px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../img/about/about_greetings_introduction_logo.png); }
#about_greetings_introduction .box dl { margin: -25px; display: flex; flex-wrap: wrap; }
#about_greetings_introduction .box dl > div { padding: 25px; }
#about_greetings_introduction .box dl dt { font-size: 16px; line-height: 1; height: 35px; }
#about_greetings_introduction .box dl dd { font-size: 2.2em; font-weight: 700; display: flex; align-items: center; gap: 5px; }
/*#about_greetings_introduction .box dl > div:nth-child(1) { width: 100%; margin-bottom: 40px; }
#about_greetings_introduction .box dl > div:nth-child(1) dd { font-size: 21px; }*/







/* Post */
.post_total { font-size: 38px; font-weight: 700; line-height: 1; margin-bottom: 45px; }
.post_total span { color: var(--secondary-color); }

.post_list_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.post_list_top .tit { font-size: 1.3em; font-weight: 700; line-height: 1; color: var(--secondary-color); }
.post_list_top .total { font-size: 16px; font-weight: 500; line-height: 1; }
.post_list_top .total span { color: var(--secondary-color); }
.post_list_top .date { display: flex; }
.post_list_top .date > * + * { margin: 0; margin-left: 10px; }
.post_list_top .date .btn { width: 60px; }
.post_list_top .date .btn:hover { background-color: var(--primary-color); color: #fff; background-color: var(--primary-color); }
.post_list_top .search select.ipt { width: 120px; flex: none; }
.post_list_top .search .btn { font-size: 0; width: 45px; height: 45px; border: 0; margin-left: -45px; background-color: transparent; background-size: 50%; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%0A%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' width='64px' height='64px'%3E%3Cpath style='fill:rgb(0,0,0);' d='M 31 11 C 19.973 11 11 19.973 11 31 C 11 42.027 19.973 51 31 51 C 34.974166 51 38.672385 49.821569 41.789062 47.814453 L 54.726562 60.751953 C 56.390563 62.415953 59.088953 62.415953 60.751953 60.751953 C 62.415953 59.087953 62.415953 56.390563 60.751953 54.726562 L 47.814453 41.789062 C 49.821569 38.672385 51 34.974166 51 31 C 51 19.973 42.027 11 31 11 z M 31 19 C 37.616 19 43 24.384 43 31 C 43 37.616 37.616 43 31 43 C 24.384 43 19 37.616 19 31 C 19 24.384 24.384 19 31 19 z'/%3E%3C/svg%3E"); }

.post_list_top .btn_prev { font-weight: 500; overflow: visible; padding: 0 20px; }
.post_list_top .btn_prev:before { content: ''; width: 45px; height: 45px; background-color: var(--primary-color); margin-right: 20px; margin-left: -20px; transform: rotate(180deg); border-top-right-radius: 5px; border-bottom-right-radius: 5px; 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='%23ffffff'%3E%3Cpath d='m517.85-480-184-184L376-706.15 602.15-480 376-253.85 333.85-296l184-184Z'/%3E%3C/svg%3E"); }
.post_list_top .btn_next { font-weight: 500; overflow: visible; padding: 0 20px; }
.post_list_top .btn_next:after { content: ''; width: 45px; height: 45px; background-color: var(--primary-color); margin-left: 20px; margin-right: -20px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; 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='%23ffffff'%3E%3Cpath d='m517.85-480-184-184L376-706.15 602.15-480 376-253.85 333.85-296l184-184Z'/%3E%3C/svg%3E"); }

.post_list_top .btn_filter { border: 0; padding: 0; font-size: 14px; font-weight: 600; }
.post_list_top .btn_filter:before { content: ''; width: 18px; height: 18px; margin-right: 12px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000000'%3E%3Cpath d='M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z'/%3E%3C/svg%3E"); }
.post_list_top .btn_filter.hide:before { transform: rotate(180deg); }


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

.post_more { margin-top: 70px; text-align: center; }
.post_more .btn { width: 160px; }

.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-size: 1em; color: #c0ccde; }
.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 { border-radius: 8px; position: relative; overflow: hidden; flex: none; background-color: #dedede; }
.post_item > .img > div { width: 100%; height: 0; padding-top: 56.25%; background-size: cover; background-repeat: no-repeat; background-position: center; transition: 1s ease; }
.post_item > .img.sns { background-color: #000; }
.post_item > .img.sns > div { opacity: 0.5 }
.post_item > .img.sns > img { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); transition: 1s ease; }
.post_item > .img > .ico { position: absolute; bottom: 15px; right: 15px; z-index: 1; width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.post_item > .img > .ico.youtube { background-image: url(../img/pr/media_btn_yt.png); }
.post_item > .img > .ico.blog { background-image: url(../img/pr/media_btn_blog.png); }
.post_item > .dec { width: 100%; 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 > * { max-width: 380px; }
.post_item > .dec .cate { font-size: 16px; color: var(--secondary-color); }
.post_item > .dec .tit { font-size: 21px; font-weight: 700; }
.post_item > .dec .bTit { font-size: 30px; font-weight: 700; }
.post_item > .dec .sTit { font-size: 19px; font-weight: 700; }
.post_item > .dec .txt { font-size: 16px; font-weight: 300; line-height: 1.65; height: 100%; }
.post_item > .dec .date { font-size: 14px; font-weight: 300; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.post_item > .dec .files { display: flex; justify-content: flex-end; max-width: 100%; }
.post_item > .dec .files .btn { font-size: 12px; background-color: transparent; border-color: transparent; font-weight: 600; justify-content: space-between; text-transform: uppercase; padding: 0; height: auto; }
.post_item > .dec .files .btn svg { fill: #000; margin-left: 10px; }
.post_item > .dec .files .btn:hover { color: var(--secondary-color); }
.post_item > .dec .files .btn:hover svg { fill: var(--secondary-color) }
.post_item:hover > .img > div { transform: scale(1.05); }
.post_item:hover > .img > img { transform: translate(-50%, -50%) scale(1.05); }

.post_item.post_border { padding: 30px; border-radius: 12px; border: 1px solid var(--border-color); background-color: #fff; }
.post_item.post_border > .dec { padding-bottom: 0; }
.post_item.post_border > .img { border-radius: 0; }
.post_item.post_border:hover { border-color: var(--primary-color); }

.post_item.post_row { flex-direction: row; align-items: center; }
.post_item.post_row > .img { width: 50%; }
.post_item.post_row > .dec { padding-left: 40px; }
.post_item.post_row > .brochure_img { width: 20%; flex: none; }


.post_view .head { margin-bottom: 70px; }
.post_view .head > * + * { margin-top: 15px; }
.post_view .head .cate { font-size: 21px; font-weight: 700; color: var(--secondary-color); }
.post_view .head .title { font-size: 38px; font-weight: 700; line-height: 1.3; max-width: 760px; }
.post_view .head .date { font-size: 19px; text-align: right; }

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

.post_view .body .attachments { display: flex; justify-content: flex-end; 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; }
.post_view .body .attachments .btn_group .btn { background-color: #e9f2f5; border-color: #e9f2f5; font-weight: 700; justify-content: space-between; }
.post_view .body .attachments .btn_group .btn:after { content: ''; width: 10px; height: 11px; margin-left: 9px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(../img/ico/ico_download.png); }
.post_view .body .attachments .btn_group .btn:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.post_view .body .attachments .btn_group .btn:hover:after { background-image: url(../img/ico/ico_download_wh.png); }

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

.post_view .body .go_recruit { text-align: center; }
.post_view .body .go_recruit .btn:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.post_view .bot { margin-top: 50px; }
.post_view .bot .prevNext {  }
.post_view .bot .prevNext > li + li { border-top: 1px solid var(--border-color); }
.post_view .bot .prevNext > li > a { display: flex; align-items: center; height: 80px; padding: 10px 12px; font-size: 19px; }
.post_view .bot .prevNext > li > a .tit { display: inline-flex; align-items: center; margin-right: 25px; font-weight: 700; }
.post_view .bot .prevNext > li > a .tit:before { content: ''; width: 0; height: 0; margin-right: 13px; border-style: solid; border-width: 4.5px 5px 4.5px 0px; border-color: transparent #000 transparent transparent; }
.post_view .bot .prevNext > li.next > a .tit:before { border-width: 4.5px 0px 4.5px 5px; border-color: transparent transparent transparent #000; }
.post_view .bot .prevNext > li > a .txt { font-weight: 300; }
.post_view .bot .toList { margin-top: 60px; text-align: center; }
.post_view .bot .toList .btn { width: 160px; }


.file_box { max-width: 600px; }
.file_box > .list > li { display: flex; align-items: center; justify-content: space-between; background-color: #fff; margin-bottom: 5px; }
.file_box > .list > li .file { display: none; }
.file_box > .list > li .del { font-size: 0; width: 15px; height: 15px; border: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/%3E%3C/svg%3E"); }
.file_box > .upload { position: relative; }
.file_box > .upload label { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; height: 100%; font-size: 0.9em; color: var(--secondary-color); text-align: right; cursor: pointer; padding: 0 20px; }
.file_noti { font-size: 1em; line-height: 1.65; margin-top: 10px; }


.tb_post_list { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border-color); border-radius: 10px; }
.tb_post_list table { width: 100%; border-top: 1px solid var(--border-color); margin: -1px 0; }
.tb_post_list table th { height: 70px; font-size: 0.75em; font-weight: 600; color: var(--secondary-color); background-color: #f7fafc; vertical-align: middle; padding: 10px 20px; }
.tb_post_list table tbody th { font-size: 0.9em; font-weight: 700; }
.tb_post_list.hover table tbody > tr:hover { background-color: #eef7fb; }
.tb_post_list table td { height: 80px; font-size: 0.9em; font-weight: 300; border-bottom: 1px solid var(--border-color); vertical-align: middle; text-align: center; padding: 10px 20px; }
.tb_post_list table td.num { width: 120px; font-weight: 600; }
.tb_post_list table td.div { width: 120px; white-space: nowrap; text-align: center; }
.tb_post_list table td.div .label { width: 50px; height: 37px; flex: none; background-color: #666; font-size: 13px; font-weight: 600; color: #fff; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;  }
.tb_post_list table td.div .label.n { background-color: #3795ed; }
.tb_post_list table td.div .label.c { background-color: #4f5356; }
.tb_post_list table td.div .label.i { background-color: #03c3da; }
.tb_post_list table td.title { text-align: left; font-weight: 600; }
.tb_post_list table td.title > a { display: inline-block; color: #222; margin-left: 20px; font-weight: 600; }
.tb_post_list table td.title > a:hover { border-bottom: 1px solid #222; }
.tb_post_list table td.title > div { display: flex; align-items: center; }
.tb_post_list table td.title > div .label { width: 55px; height: 30px; flex: none; background-color: #8adedd; font-size: 16px; color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center;  margin-right: 20px; }
.tb_post_list table td.title > div a { color: #222; margin-left: 75px; }
.tb_post_list table td.title > div .label + a { margin-left: 0; }
.tb_post_list table td.date { width: 160px; font-weight: 300; }
.tb_post_list table td.file { width: 160px; white-space: nowrap; text-align: center; }
.tb_post_list table td.file .btn { width: 36px; height: 36px; border-radius: 50%; padding: 0; }




/* PR */
#newsroom_top > .inner { background-color: #f5f9fa; border-radius: 20px; overflow: hidden; display: flex; height: 300px; }
#newsroom_top > .inner > * { width: 100%; height: 100%; }
#newsroom_top > .inner > .img { background-size: cover; background-repeat: no-repeat; background-position: center; }
#newsroom_top > .inner > .sns { display: flex; align-items: center; justify-content: center; }
#newsroom_top > .inner > .sns > ul { display: flex; }
#newsroom_top > .inner > .sns > ul > li { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40px; }
#newsroom_top > .inner > .sns > ul > li + li { border-left: 1px solid #dce0e1; }
#newsroom_top > .inner > .sns > ul > li > a { font-size: 1em; white-space: nowrap; font-weight: 600; margin-top: 20px; display: inline-flex; align-items: center; }
#newsroom_top > .inner > .sns > ul > li > a > svg { width: 15px; height: 15px; margin-left: 10px; }


.brochure_post_item { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 20px; overflow: hidden; border-radius: 12px; border: 1px solid var(--border-color); background-color: #fff; transition: .4s ease; }
.brochure_post_item > .img { margin-bottom: 20px; text-align: center; }
.brochure_post_item > .img > img { width: 100%; }
.brochure_post_item > .dec { display: flex; align-items: center; justify-content: space-between; }
.brochure_post_item > .dec .tit { font-size: 17px; font-weight: 600; }
.brochure_post_item > .dec .files { margin: 0; }
.brochure_post_item > .dec .files .btn { background-color: transparent; border-color: transparent; font-weight: 600; justify-content: space-between; text-transform: uppercase; }
.brochure_post_item > .dec .files .btn:after { content: ''; width: 17px; height: 17px; margin-left: 9px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%23000000'%3E%3Cpath d='M480-336 288-528l51-51 105 105v-342h72v342l105-105 51 51-192 192ZM263.72-192Q234-192 213-213.15T192-264v-72h72v72h432v-72h72v72q0 29.7-21.16 50.85Q725.68-192 695.96-192H263.72Z'/%3E%3C/svg%3E"); }
.brochure_post_item > .dec .files .btn:hover { color: var(--secondary-color); }
.brochure_post_item > .dec .files .btn:hover:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%231c71ff'%3E%3Cpath d='M480-336 288-528l51-51 105 105v-342h72v342l105-105 51 51-192 192ZM263.72-192Q234-192 213-213.15T192-264v-72h72v72h432v-72h72v72q0 29.7-21.16 50.85Q725.68-192 695.96-192H263.72Z'/%3E%3C/svg%3E"); }
.brochure_post_item:hover { border-color: var(--primary-color); }


/* Support */
.as_inquiry_box { border: 1px solid var(--border-color); border-radius: 6px; padding: 50px 90px; display: flex; gap: 90px; }
.as_inquiry_box > .ico { padding: 15px 0; text-align: center; }
.as_inquiry_box > .ico .btn { margin-top: 30px; }
.as_inquiry_box > .cont { width: 100%; }
.as_inquiry_box > .cont .title { font-size: 1.56em; font-weight: 700; color: #000; }
.as_inquiry_box > .cont .title span { color: var(--secondary-color); }
.as_inquiry_box > .cont .text { font-size: 1em; margin-top: 10px; }
.as_inquiry_box > .cont .tit { font-size: 1em; font-weight: 700; color: var(--secondary-color); margin-bottom: 10px; }
.as_inquiry_box > .cont .txt { font-size: 1em; }
.as_inquiry_box > .cont .txt table { width: 100%; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.as_inquiry_box > .cont .txt table th,
.as_inquiry_box > .cont .txt table td { height: 45px; text-align: center; padding: 10px 20px; vertical-align: middle; }
.as_inquiry_box > .cont .txt table th { font-size: 14px; font-weight: 500; color: var(--secondary-color); background-color: #f7fafc; }
.as_inquiry_box > .cont .txt table td { font-size: 17px; }
.as_inquiry_box > .cont .row { gap: 50px; margin-top: 30px; }
.as_inquiry_box > .cont .row > li + li { border-left: 1px solid #d9e9f0; padding-left: 50px; }
.as_inquiry_box > .cont .column { display: flex; flex-direction: column; gap: 30px; margin-top: 30px; }


/* etc */
#etc_privacy_content .content { font-size: 0.9em; font-weight: 300; line-height: 1.6; }
#etc_privacy_content .select { margin-top: 5em; }
#etc_privacy_content .select > * { width: auto; }

#etc_privacy_content .txtBox { font-size: 0.9em; font-weight: 300; line-height: 1.6; }
#etc_privacy_content .tit { font-size: 1.3em; font-weight: 700; margin-bottom: 1.5em; }
#etc_privacy_content .mt20 { margin-top: 20px; }
#etc_privacy_content .mt40 { margin-top: 40px; }
#etc_privacy_content .pl20 { padding-left: 20px; }

#etc_privacy_content table {width: 100%; border-collapse: collapse;}
#etc_privacy_content table th {padding: 20px;text-align: center; border-top: 1px solid #000; color:#333; background-color: #f7f7f7; font-weight: bold;}
#etc_privacy_content table td {padding: 20px;text-align: center; border-bottom: 1px solid #ddd;}



.introDiv .introTxt{color:#333; font-size:16px; line-height:24px;}
.introDiv .introBox{border:1px solid #dbdbdb; margin-top:35px; padding: 28px 27px; line-height:22px; overflow:hidden}
.introDiv .introBox .tit{font-size:18px; color:#333; font-family:'easyNanumGothicBold'; font-weight:normal}
.introDiv .introBox strong{color:#333}
/* 2025-01-06 */
.introDiv table {width: 100%; border-collapse: collapse;}
.introDiv th {padding: 20px;text-align: center; border-top: 1px solid #000; color:#333; background-color: #f7f7f7; font-weight: bold;}
.introDiv td {padding: 20px;text-align: center; border-bottom: 1px solid #ddd;}
.introDiv .txtBox .tit .label {position: relative; top: -3px;}
.introDiv .txtBox .tit .label:first-child{margin-left:6px;}
.introDiv .txtBox .tit .label img{padding-right:4px;}
.introDiv .introBox.iconWrap{padding:55px 0 75px;}
.introDiv .introBox .tit{padding-bottom:30px;}
.introDiv .introBox .iconBox {display:flex; flex-wrap: wrap; row-gap:50px;}
.introDiv .introBox .iconBox .icon{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 33%;}
.introDiv .introBox .iconBox .icon .txt{margin-top:20px;}
.introDiv .introBox .iconBox .icon .txt.font_s9 {margin-top:0;}
.introDiv .txtBox .txtwrap{display:flex; border-top:1px solid #e1e1e1;}
.introDiv .txtBox .txtwrap > div{width:50%;}
.introDiv .txtBox .txtwrap div p{padding-bottom:20px;}



@media screen and (max-width: 1200px){

}