@charset "utf-8";

/* s 인사총무 개별 스타일 */
.class_HR .wrap-subtitle {margin: 3rem 0 5rem 0;}
.class_HR .wrap-board-lates {float:left;width:33.33%;padding:0 .7rem;}
.class_HR .wrap-board-lates.w100 {width:100%;}
.class_HR .wrap-board-lates .board-lates {width:100%;margin:0 0 1.5rem 0;padding:1rem;background:#fff;border-radius:1rem;box-shadow:0 20px 30px rgba(117, 127, 198, 0.2);}
.class_HR .wrap-board-lates .board-lates li {position:relative;background:#fff;box-shadow:none;}
.class_HR .wrap-board-lates .board-lates li .wr_datetime {position:absolute;right:1.5rem;top:.7rem;font-size:1.4rem;}
.class_HR .wrap-board-lates .board-lates li:hover .wr_datetime {color:#fff;}
.class_HR .wrap-board-lates .board-lates li a {width:calc(100% - 1rem);padding:.9rem 1rem;font-size:1.5rem;line-height:1rem;}
.class_HR .wrap-board-lates .board-lates h3 {font-size: 1.7rem;margin-bottom:1rem;padding:.5rem 1rem 1.3rem 1rem;}
.class_HR .wrap-board-lates .board-lates h3 > div {top:-.4rem;right:-.5rem;}

/*.class_HR .itemlist {display: none;}
.class_HR .itemlist.visible {display: block;}*/

.class_HR .list-container .item-list li {display: none;}
.class_HR .list-container .item-list li.visible {display: list-item;}
.class_HR .load-more {display:none;}
.class_HR .list-container .load-more {display:block;width:100%;padding:.3rem 2rem;background:#f1f2f9;}

.class_HR .wrap-hrmember {display:flex;margin-bottom:1.5rem;}
.class_HR .wrap-hrmember li {display:flex;flex:auto;align-items:center;margin:0 .7rem;padding:1rem 2%;background:#fff;border-radius:1rem;box-shadow:0 20px 30px rgba(117, 127, 198, 0.2);z-index:1;}
.class_HR .wrap-hrmember h3 {flex:0;margin-right:5%;font-size:1.8rem;font-weight:600;white-space:nowrap;}
.class_HR .wrap-hrmember p {flex:1;font-size:1.4rem;line-height:1.8rem;color:#909096;word-break:break-word;}
/* e 인사총무 개별 스타일 */

.wrap-index-icons {min-height:70rem;margin:0 auto;padding:7rem 10rem;background:#e9edf0;}
.wrap-index-icons hr {color:rgba(255,255,255,.5);}
.index-icons {margin:0 -1rem;}
.index-icons li {float:left;width:16.66%;padding:1rem;text-align:center;}
.index-icons li a {display:block;padding:2.2rem 1rem;color:#259ec1;background:#f5f7fe;border:solid .3rem #f5f7fe;border-radius:1.3rem;box-shadow:0 20px 30px rgba(117, 127, 198, 0.2), 0 10px 20px rgba(117, 127, 198, 0.1);}
.index-icons li a:hover {color:#00b7ce;background:#fff;border:solid .3rem #00b7ce;box-shadow:0 20px 30px 0 rgba(0,227,255,0.25);}
.index-icons li a:active {box-shadow:inset 5px 5px 15px rgba(117, 127, 198, 0.5);}
.index-icons li a i {display:block;font-size:5rem;}
.index-icons li a span {margin-top:2rem;color:#323232;font-size:1.5rem;font-weight:600;transition:all .5s;}
.index-icons li a:hover span {color:#00b7ce;}

.index-textlink {min-width:120rem;max-width:150rem;margin:0 auto;text-align:center;}
.index-textlink li {display:inline-block;padding:1.2%;text-align:center;}
.index-textlink a {display:block;width:12rem;height:12rem;padding:1rem 2rem;color:#323232;font-size:1.6rem;font-weight:500;background:#fff; border-radius:12rem;box-shadow:-7px -7px 15px rgba(255, 255, 255, 0.6), 5px 5px 15px rgba(166, 180, 200, 0.3);}
.index-textlink li a:active {box-shadow:inset -5px -5px 15px rgba(255, 255, 255, 0.75), inset 5px 5px 10px rgba(166, 180, 200, 0.75);}

.header-bar nav h1 {font-size:3rem;font-weight:500;}
.header-bar nav h1 a {color:#fff;}
/* animation tile-type hamberger */
.ani-tileicon {float:left;position:relative;width:2rem;height:2rem;margin:.5rem 1rem;}
.ani-tileicon span {display:inline-block;opacity:1;position:absolute;left:0;width:100%;width:1rem;height:1rem;background:#fff;border-radius:.2rem;transform:rotate(0deg);transition:.35s ease;}
.ani-tileicon span:nth-child(1) {top:0;left:0;}
.ani-tileicon span:nth-child(2) {top:1.4rem;left:0;}
.ani-tileicon span:nth-child(3) {top:0;left:1.4rem;}
.ani-tileicon span:nth-child(4) {top:1.4rem;left:1.4rem;}
.mobile-mainOpen .ani-tileicon span {height:.4rem;width:1.6rem;}
.mobile-mainOpen .ani-tileicon span:nth-child(1) {top:.4rem;left:-0.1rem;transform:rotate(45deg);}
.mobile-mainOpen .ani-tileicon span:nth-child(2) {top:1.4rem;left:-0.1rem;transform:rotate(-45deg);}
.mobile-mainOpen .ani-tileicon span:nth-child(3) {top:.4rem;left:.7rem;transform:rotate(-45deg);}
.mobile-mainOpen .ani-tileicon span:nth-child(4) {top:1.4rem;left:.7rem;transform:rotate(45deg);}

#main-contents {min-height:100%;}
#main-contents .left-panel {float:left;width:25rem;min-height:100%;padding:5rem 0;}
#main-contents .left-panel h2 {margin-bottom:1rem;padding:0 2rem;font-size:1.8rem;color:#fff;}
#main-contents .left-panel li {padding:0 3rem;}
#main-contents .left-panel li.active {background:#2a3442;border-left:solid 0.5rem #259ec1;}
#main-contents .left-panel li.active a {color:#fff;}
#main-contents .left-panel li a {padding:1rem;font-size:1.8rem;color:#9299a2;}
#main-contents .left-panel hr {color:#2c3746;}

/**/

.header-bar {width:100%;background:linear-gradient(-45deg, rgba(37,158,193,.8), rgba(42,168,158,.8));box-shadow:10px 0 30px rgba(0,0,0,.05);backdrop-filter:blur(6px);transition:all 0.5s;animation:absolutenav 1.5s;z-index:999;}
.header-bar.nav-fixed {position:fixed;top:0;border-bottom:solid .1rem rgba(255,255,255,0.7);background:rgba(255,255,255,.5);animation:fixednav 1s;}
.header-bar.nav-fixed nav {padding:0rem 5rem;line-height:3.7rem;}
.header-bar.nav-fixed .mek-logo {margin-top:.6rem;}
.header-bar.nav-fixed .mek-logo .logo-image {width:11rem;height:5.2rem;background-size:11rem;transition:all 0.5s;}
.header-bar.nav-fixed .mekburger {top:.9rem;}
.header-bar.nav-fixed .btn-lang.mright {top:1.7rem;}
.header-bar.Hover {background:linear-gradient(-45deg, rgba(37,158,193,1), rgba(42,168,158,1));}
.header-bar.Hover.nav-fixed {border-bottom:none;}
.header-bar.Hover.nav-fixed nav .sub-menu {margin-top:0.7rem;}

.header-bar .mek-logo {float:left;margin-top:0.2rem;}
.header-bar .mek-logo .logo-image {background: url(../img/logo.png) top left no-repeat;width:14rem;height:6rem;background-size:13rem;}
.header-bar nav {width:100%;margin:0 auto;padding:1.7rem 3rem;line-height:3.5rem;text-align:center;}
.header-bar .login_data {position:absolute;top:1.7rem;right:10rem;font-size:1.6rem;color:#fff;}

/* mek burger */
.header-bar .mekburger {display:none;position:absolute;top:2.7rem;right:3rem;}
.header-bar .mekburger .line {display:block;width:3.5rem;height:0.35rem;margin:.74rem 0 .75rem auto;background:#292b2c;transition:all 0.3s ease-in-out;}
.header-bar .mekburger .line:nth-child(2) {width:2.8rem;}
.header-bar .mekburger:hover {cursor:pointer;}
#mekburger-menu.is-active .line:nth-child(2) {opacity:0;width:0;}
#mekburger-menu.is-active .line:nth-child(1) {transform:translateY(1.15rem) rotate(45deg);}
#mekburger-menu.is-active .line:nth-child(3) {transform:translateY(-1.15rem) rotate(-45deg);}

.mek-title {margin:3rem 0 6rem 0;font-size:5rem;font-weight:600;text-align:center;}
.mek-subtitle {margin-top:1.5rem;font-size:2.2rem;text-align:center;color:#6a6a6a;}

.mek-con-title {position:relative;font-size:4rem;font-weight:700;}
.mek-con-subtitle {margin:2rem 0 6rem 0;font-size:2.2rem;color:#6a6a6a;}

.mek-consub-title {margin:0 0 4rem 0;font-size:3rem;font-weight:600;}

.bg-covered:after {display:block;content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(12,21,26,.3);z-index:9;}
.bg-covered.darked:after {background:rgba(12,21,26,.5);}
.bg-covered.mainhero:after {background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0), rgba(12,21,26,.2));}

.device.mo-view {display:none !important;}

.owl-content .owl-nav {display:none;}
.owl-content .owl-item {margin-bottom:3rem;}
.owl-content li:nth-child(4n+0) {clear:both;}

section.footer-image {position:relative;margin:0 auto;}
section.footer-image .wrap-footer-image-text {position:absolute;top:50%;left:0;width:100%;text-align:center;color:#fff;transform:translateY(-50%);z-index:10;}
section.footer-image .wrap-footer-image-text .footer-image-text-01 {padding:0 10%;font-size:4.5rem;font-weight:200;line-height:6rem;}
section.footer-image .wrap-footer-image-text hr {color:#fff;margin-top:2rem;margin-bottom:2rem;}
section.footer-image .wrap-footer-image-text .footer-image-text-02 {font-size:2.5rem;font-weight:200;line-height:4rem;}
section.footer-image span {display:block;}
section.footer-image span em {font-weight:600;}

footer {position:relative;margin-top:5rem;background:#f5f7fe;border-radius:1.7rem;box-shadow:0 20px 30px rgba(117, 127, 198, 0.2);}
footer .footer-inner {width:100%;max-width:180rem;margin:0 auto;padding:5rem;font-size:1.4rem;}
footer .foot-copyright {width:100%;margin:1rem auto 0 auto;font-weight:200;color:#7F7F7F;text-align:center;}
footer .footer-left {float:left;width:25%;}
footer .footer-right {float:right;width:75%;}
footer .footer-bottom {float:left;clear:both;width:100%;}
footer .footer-bottom p {line-height:2rem;text-align:center;color:#7F7F7F}
footer nav h2 {margin-bottom:2rem;font-size:1.8rem;font-weight:600;color:#bebebe;}
footer nav .foot-menu > li {float:left;width:12%;}
footer nav .foot-menu .sub-menu li {margin:1.3rem 0;}
footer nav .foot-menu .sub-menu a {display:inline;position:relative;font-size:1.7rem;font-weight:300;color:#7F7F7F;}
footer nav .foot-menu .sub-menu a:after {content:"";position:absolute;bottom:-.3rem;left:0;width:0;height:.1rem;background:#7F7F7F;transition:width .3s;}
footer nav .foot-menu .sub-menu a:hover:after {width:100%;}
footer .mek-logo {float:left;margin:0.2rem 5rem 0 0;}
footer .mek-logo .logo-image {width:14rem;height:6.2rem;background: url(../img/logo.png) top left no-repeat;background-size:14rem;filter:grayscale(1);}

.owl-carousel .owl-nav {height:0;}
.owl-prev span, .owl-next span {display:block;position:absolute;top:50%;width:2rem;height:3rem;margin-top:-1.7rem;opacity:0.3;background-repeat:no-repeat;background-position:left top;z-index:100;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;transition:opacity 0.5s ease;}
.owl-prev span {left:50%;margin-left:-49%;background-image:url(../img/btn_indexprev.png);background-size:contain;}
.owl-next span {right:50%;margin-right:-49%;background-image:url(../img/btn_indexnext.png);background-size:contain;}
.owl-prev span:hover, .owl-next span:hover {opacity:1;}

/* design system */
.wrap-contents {padding:0 2rem;}
.wrap-contents img {max-width:100%;}
.h2-title {margin:7rem 0 5rem 0;font-size:4rem;font-weight:600;letter-spacing:-.7px;}
.wrap-contents.brandstory {position:relative;margin-top:5rem;padding:15rem 5rem;text-align:center;border-radius:3rem;background:rgb(1 183 205 / 60%);}
.wrap-contents.brandstory .text-white {display:block;font-size:2.2rem;line-height:3.2rem;font-weight:200;color:#fff;}
.wrap-contents.brandstory .logo-symbol {margin:17rem 0 10rem 0;opacity:.5;}
#webgl {position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border-radius:3rem;}

.wrap-contents.images dl {display:flex;flex-wrap:wrap;margin:0 -1rem;}
.wrap-contents.images dd {float:left;width:calc(16.66% - 2rem);margin:1rem;padding:2rem;border:solid 1px #eee;}
.wrap-contents.images dd.white {background:#ddd;}
.wrap-contents.images dd img {width:100%;max-height:20rem;cursor:pointer;}

.wrap-contents.icons dl {display:flex;flex-wrap:wrap;margin:0 -1rem;}
.wrap-contents.icons dd {float:left;width:calc(10% - 2rem);margin:1rem;padding:2rem;border:solid 1px #eee;}
.wrap-contents.icons dd.white {background:#ddd;}
.wrap-contents.icons dd img {width:100%;max-height:20rem;cursor:pointer;}

.wrap-contents.template dl {display:flex;flex-wrap:wrap;margin:0 -1rem;}
.wrap-contents.template dd {float:left;width:calc(25% - 2rem);margin:1rem;padding:3rem;text-align:center;border:solid 1px #eee;}
.wrap-contents.template dd a {font-size:1.6rem;line-height:2rem;}
.wrap-contents.template dd i {margin-right:.3rem;font-size:1.4rem;}
.wrap-contents.template dd i.ppt {color:#c43e1c;}
.wrap-contents.template dd i.font {color:#333;}
.wrap-contents.template dd img {margin-bottom:2rem;}

.wrap-contents .h2-title li {display:inline-block;margin-right:2rem;font-size:3.3rem;font-weight:300;color:#737373;cursor:pointer;}
.wrap-contents .h2-title li.active {font-weight:inherit;color:#000;text-decoration:underline;}

.wrap-contents.certification dl {display:flex;flex-wrap:wrap;margin:0 -1rem;}
.wrap-contents.certification dd {display:none;float:left;width:calc(20% - 2rem);margin:1rem;padding:2rem;border:solid 1px #eee;}
.wrap-contents dl.total dd {display:block !important;}
.wrap-contents.certification dd.white {background:#ddd;}
.wrap-contents.certification dd img {width:100%;cursor:pointer;}
.wrap-contents.certification dd span {margin-top:2rem;}

.visual-subhero {width:100%;padding:10rem 6rem;border-radius:3rem;}
.visual-subhero.index {text-align:center;background:url("../../common/img/design_system/hero_00.jpg");background-size:cover;background-position:center center;}
.visual-subhero.brandstory {background:url("../../common/img/design_system/hero_10.jpg");background-size:cover;background-position:center center;}
.visual-subhero.brandbici {background:url("../../common/img/design_system/hero_01.jpg");background-size:cover;background-position:center center;}
.visual-subhero.color {background:url("../../common/img/design_system/hero_03.jpg");background-size:cover;background-position:center center;}
.visual-subhero.typography {background:url("../../common/img/design_system/hero_04.jpg");background-size:cover;background-position:center center;}
.visual-subhero.application {background:url("../../common/img/design_system/hero_11.jpg");background-size:cover;background-position:center center;}
.visual-subhero.icons {background:url("../../common/img/design_system/hero_05.jpg");background-size:cover;background-position:center center;}
.visual-subhero.images {background:url("../../common/img/design_system/hero_06.jpg");background-size:cover;background-position:center center;}
.visual-subhero.ppt {background:url("../../common/img/design_system/hero_07.jpg");background-size:cover;background-position:center center;}
.visual-subhero.banner {background:url("../../common/img/design_system/hero_08.jpg");background-size:cover;background-position:center center;}
.visual-subhero.bc {background:url("../../common/img/design_system/hero_09.jpg");background-size:cover;background-position:center center;}
.visual-subhero.sticker {background:url("../../common/img/design_system/hero_02.jpg");background-size:cover;background-position:center center;}
.visual-subhero.signature {background:url("../../common/img/design_system/hero_12.jpg");background-size:cover;background-position:center center;}
.visual-subhero.template {background:url("../../common/img/design_system/hero_13.jpg");background-size:cover;background-position:center center;}

.visual-subhero h1 {font-size:10rem;font-weight:500;letter-spacing:-.1rem;color:#1f1f1f;}
.visual-subhero p {font-size:2.2rem;line-height: 3.2rem;color:#1f1f1f;}
.btn.btn-hero {width:27rem;margin:3rem auto 0 auto;padding:3rem;color:#fff;font-size:2.5rem;text-align:center;background:#0b57d0;border-radius:10rem;}
.btn.btn-hero a {color:#fff;}

.light-page .header-bar nav {padding:1.5rem 2rem;}
.light-page .header-bar nav h1 {font-size:2.3rem;}
.light-page .ani-tileicon {position: absolute;top:1.6rem;left:2rem;margin:0;}
.light-page #main-contents {min-height:100%;}
.light-page #main-contents .left-panel {position:fixed;top:0;left:0;width:20rem;padding:3rem 0;background:#f3f6fc;z-index:1;}
.light-page #main-contents .left-panel h2 {color:#444746;}
.light-page #main-contents .left-panel li {padding:0 2rem;}
.light-page #main-contents .left-panel li a {padding:1rem 2rem;font-size:1.6rem;border-radius:3rem;}
.light-page #main-contents .left-panel li a:hover {background:#eaecef;}
.light-page #main-contents .left-panel li.active {background:#f3f6fc;border-left:none;}
.light-page #main-contents .left-panel li.active a {color:#001d35;background:#c2e7ff;}
.light-page #main-contents .left-panel hr {color:#d9dbdd;}
.light-page #main-contents .left-panel .material-symbols-rounded {vertical-align:middle;margin-right:.5rem;}

.light-page .content-section {width:100%;padding:2rem;min-height:inherit;}
.light-page footer {background:#fff;}
.light-page footer hr {border:0;border-bottom:1px dashed #ECECEC;background:#D9D9D9;}

.light-page footer .foot-left {float:left;width:50%;font-size:1.7rem;font-weight:300;line-height:2.3rem;}
.light-page footer .foot-copyright {margin-bottom:5rem;padding:0 5rem;text-align:right;}

.light-page .sub-navigation {display:flex;width:100%;margin-top:1rem;background:#f8fafd;border-radius:10rem;}
.light-page .sub-navigation li {display:flex;flex-grow:1;align-items:center;justify-content:center;}
.light-page .sub-navigation li a {width:100%;padding:2.5rem;font-size:1.7rem;font-weight:300;text-align:center;border-radius:10rem;}
.light-page .sub-navigation li a:hover {background:#eaecef;}
.light-page .sub-navigation li.active a {font-weight:500;background:#c2e7ff;}