@import url(bootstrap.min.css);
@import url(reset.css);
@import url('../fonts/font-awesome/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
/*@import url('../fonts/font.css');*/
@import url('swiper-bundle.min.css');


/* common */
* { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; word-break: keep-all;}
input[type=text],input[type=email],input[type=password],textarea, select {appearance: none; border: 1px solid #e5e5e5; border-radius: 3px; background-color: #fff; height: 40px; padding: 0 10px; font-size: 14px; box-sizing: border-box; font-family:'Noto Sans KR', sans-serif; width: 100%;  vertical-align: middle; color: #555;}
input[type=text]:disabled,input[type=password]:disabled{background-color: #f6f6f6;}
textarea{width: 100%; padding-top: 13px; padding-bottom: 13px; height:100px; font-size: 14px; background: none; border: none; border-radius: 4px;}
select::-ms-expand {display: none;}
button{outline: none; box-shadow: none; border: none; background: none;font-family:'Noto Sans KR', sans-serif; cursor: pointer; transition: all 0.2s ease;}
button:focus{outline: none; box-shadow: none;}
button:hover{color: #0a64bf;}
button.active{color: #0a64bf;}
.clearfix:after{content: ""; display: block; clear: both;}
em{font-style: normal;}
input:focus,textarea:focus, select:focus{outline: none; box-shadow: none; border-color: #999999;}
select{background:#fff url(../img/ico-arrow-bottom.svg) no-repeat right 10px center; padding-right: 35px; color: #555; background-size: 15px 15px;}
input[type=radio]{width: 22px; height: 22px; position: absolute; opacity: 0;}
input[type=radio]+label:before{content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #dee1e4; background-color: #fff; cursor: pointer; position: relative; z-index: 1; margin-right: 10px;  vertical-align: top;}
input[type=radio]+label:after{content: ""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: #0a64bf; left: 5px; top: 5px; z-index: 1; opacity: 0; transition: all 0.2s ease;}
input[type=radio]+label{line-height: 22px; display: inline-block; vertical-align: top; position: relative; cursor: pointer; vertical-align: middle; white-space: nowrap; font-size: 12px;}
input[type=radio]:checked+label{line-height: 22px;}
input[type=radio]:checked+label:after{opacity: 1;}
input[type=radio]:disabled+label:before{border: solid 1px #dcdfe2; background-color: #f2f3f5; cursor:default;}
input[type=radio]:disabled+label{cursor:default;}

input[type=checkbox]{width: 24px; height: 24px; position: absolute; opacity: 0;}
input[type=checkbox]+label{height: 24px; display: inline-flex; position: relative; cursor: pointer; align-items: center; vertical-align: middle; font-size: 12px;}
input[type=checkbox]+label:before{content: ""; display: inline-block; width: 24px; height: 24px; border-radius: 4px; border: solid 1px #dcdfe2; background-color: #fff; cursor: pointer; position: relative; z-index: 1; margin-right: 8px;  vertical-align: top;}
input[type=checkbox]:checked+label:before{background: url(../img/ico-checked.png) no-repeat; border: none;}

input[type=checkbox]:disabled+label:before{border: solid 1px #dcdfe2; background-color: #f2f3f5; cursor:default;}
input[type=checkbox]:disabled+label{cursor:default;}

.switch-chk{position: absolute; opacity: 0;}
.switch-chk+label{display: block;width: 50px; height: 25px; border-radius: 13px; background-color: #dddddd; position: relative; cursor: pointer;  transition: all 0.2s ease;}
.switch-chk+label:after{content: ""; display: block; width: 21px; height: 21px; background-color: #ffffff; position: absolute; border-radius: 50%; left: 2px; top: 2px; transition: all 0.2s ease;}
.switch-chk:checked+label{background-color: #65c466;}
.switch-chk:checked+label:after{left: 27px;}


/* link */
a{color:#444;text-decoration:none; transition: all 0.2s ease;}
a:link, a:visited, a:active{text-decoration: none;}

/* font */
.fs-11{font-size: 11px;}
.fs-12{font-size: 12px !important;}
.fs-13{font-size: 13px !important;}
.fs-14{font-size: 14px !important;}
.fs-15{font-size: 15px;}
.fs-16{font-size: 16px;}
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px; font-weight: 400;}


@media (max-width: 768px) {
    .fs-20{font-size: 18px; font-weight: 400; line-height: 1.5;}
}


.fc-blue-light{color: #0a64bf !important;}
.fc-blue{color: #4686c5 !important;}
.fc-black{color: #000 !important;}
.fc-red{color: #f50000 !important;}
.fc-gray{color: #999 !important;}
.fc-green{color: #39b549 !important;}
.fc-violet{color: #91268f !important;}
.fc-orange{color: #f16621 !important;}
.fc-pink{color: #e9058e !important;}
.fc-white{color: #fff !important;}

/* 레이어 팝업 */
.modal{display: block;}
.overlay{display: none; position: fixed; top: 0; left: 0; z-index:100; width: 100%; height: 100%; min-height: inherit; background: #000; opacity: 0.6;}
.overlay span{display: none;}

/* btn */
.btn{border: 0; padding: 0; display: inline-block; text-align: center; box-sizing: border-box; font-weight: normal; position: relative; transition: all 0.2s ease; vertical-align: top; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 14px;}
.btn:focus{box-shadow: none;}
.btn-s{ height: 32px; min-width: 84px; border-radius: 2px; font-weight: 400; padding: 0 12px;}
.btn-xs{ height: 24px; min-width: 80px; min-width: 62px; font-size: 12px; font-weight: 400; border-radius: 2px;}
.btn-m{height:36px; min-width: 120px; font-weight: 400; padding-left: 10px; padding-right: 10px; line-height: 100%;padding-bottom: 2px; font-size: 18px; min-width: 170px;}
.btn-l{height: 45px; font-size: 15px;}
.btn-light{color: #fff !important; background-color: #c8c8c8;}
.btn-gray{color: #fff !important; background-color: #5f5a5b;}
.btn-light-gray{color: #fff !important; background-color: #979797;}
.btn-blue{color: #fff !important; background-color: #0a64bf;}
.btn-blue:hover{background-color: #0d559e;}
.btn-sky{color: #fff !important; background-color: #78a8da;}
.btn-sky:hover{background-color: #458bd2;}
.btn-dark{color: #fff !important; background-color: #3b3b3b !important;}
.btn-dark:hover{background-color: #444444 !important;}
.btn-black{color: #fff !important; background-color: #333;}
.btn-black:hover{background-color: #000;}
.btn-address{width: 104px; height: 40px; border-radius: 2px; background-color: #5794d2; color: #fff !important; font-weight: 400;}

.btn:disabled{background-color: #f5f5f5; color: #888888 !important; border: 1px solid #dddddd; cursor: default;}


/* SKIP */
.accessbility{left:0;top:0;text-align:center;width:100%;z-index:100;background:#292929;font-size:16px;position: absolute;}
.accessbility a{overflow:hidden;display:block;height:0;width:0;margin-bottom:-1px;text-align:center;white-space:nowrap;color:#fff}
.accessbility a:focus,.accessbility a:active{height:auto;width:auto;padding:18px 0;color:#fff}

/* common */
html, body {position: relative; min-width: 1140px; height: 100%; }
html.fixed{overflow-y: hidden; overflow-x: auto;}
body.fixed{overflow-y: hidden; overflow-x: auto;}

body{font-size: 14px; font-weight: 400;}
*{font-family:'Roboto','Noto Sans KR', sans-serif;}
.row{ margin-left: auto; margin-right: auto; position: relative; display: flex; width: 1140px; box-sizing: border-box; flex-direction: column;}
.flex{display: flex;}
.just-between{justify-content: space-between;}
.just-center{justify-content:center;}
.align-center{align-items: center;}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* 팝업레이어 */
#hd_pop {width:1200px}
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:3px solid #666666;box-shadow:3px 3px 10px -4px rgba(0,0,0,.75)}
.hd_pops img {max-width:100%}
.hd_pops_con {background:#fff}
.hd_pops_footer {display:none}
/* .hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0} */

@media (max-width: 768px) {
    #hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0}
    #hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
    .hd_pops {position:absolute;border:1px solid #666666}
    .hd_pops img {max-width:100%;height:auto}
    .hd_pops_con {background:#fff}
    /* .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
    .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff} */
}

@media (max-width: 490px) {
    .hd_pops {position:static;border:none;transform:translate(3px, 80px);}
    .hd_pops_con {margin: 0 auto; transform: scale(0.75); transform-origin: top left;}
}

/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */

/* layout */
.modal.modal-inside{transform: none; display: none;}

/* modal */
.modal-open {overflow: hidden;}
.modal{ overflow-x: hidden; overflow-y: auto; transition: all 0.4s ease; transform: translateY(50px); z-index: 99999;} /*opacity: 0;*/
.modal.show{opacity: 1; transform: translateY(0);}
.modal-dialog{max-width: none; margin-left: auto; margin-right: auto; z-index: 101;}
.modal-content{border-radius: 8px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3); border: none; padding: 50px 65px; position: relative;}
.modal-header{display: flex; align-items: center; justify-content: space-between; border-radius: 8px 8px 0 0; padding: 0; border: none;}
.modal-content .close{position: absolute; right: 30px; top: 30px; z-index: 10;}
.modal-header h1{font-size:24px; font-weight: 700; display: flex;align-items: center; line-height: 120%;}

.modal-body{border: none; padding: 0; outline: none; border-radius: 0 0 12px 12px; padding-top: 40px;}
.modal-body textarea{width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 10px; height: 120px;}
.modal-footer{border-top: none; padding: 30px 0 0; justify-content:center;}
.modal-footer .btnList{justify-content: space-around; display: flex; width: 100%;}
.modal-m{width: 730px;}
.modal-lg{width: 770px;}

.modal-m .modal-content{padding: 0;}
.modal-m .modal-content .modal-header{overflow: hidden; height: 360px; display: flex; object-fit: cover; }
.modal-m .modal-content .modal-header img{width: 100%; height: 100%;}
.modal-m .modal-content .modal-body{overflow: hidden; height: 365px; overflow: hidden; padding:40px 60px; height: auto;}
.modal-m .modal-content .modal-body h2{font-size: 32px; font-weight: bold;}
.modal-m .modal-content .modal-body p{margin-top: 20px; font-size: 16px; font-weight: 400;}
.modal-m .modal-content .modal-body dl{font-size: 20px; opacity: 0.55; font-weight: bold; margin-top: 50px;}

/* added:begin */
.modal-blur .modal-header,
.modal-blur .modal-body,
.modal-blur .modal-footer {
	filter: blur(10px);
}
.modal-blur *::selection{background: none;}
.modal-blur .modal-blur-overlay {
    z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;

	display: flex;
	align-items: center;
	justify-content: center;
}
/* added:end */

.modal.modal-06 .modal-content .modal-body .charger5-logo{margin-bottom: 30px; text-align: center;}
.modal.modal-06 .modal-content .modal-body .charger5-logo img{width: 240px;}
.modal.modal-06 .modal-content .modal-body h2{font-size: 22px;}

@media (max-width: 768px) {
    .modal-content{border-radius: 8px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3); border: none; padding:50px 20px 40px; position: relative;}
    .modal-header{display: flex; align-items: center; justify-content: space-between; border-radius: 8px 8px 0 0; padding: 0; border: none;}
    .modal-content .close{position: absolute; right: 10px; top: 10px;}
    .modal-header h1{font-size: 20px; font-weight: 700; display: flex;align-items: center;}

    .modal-body{border: none; padding: 0; outline: none; border-radius: 0 0 12px 12px; padding-top: 15px;}
    .modal-body textarea{width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 10px; height: 120px;}
    .modal-footer{border-top: none; padding: 30px 0 0; justify-content:center;}
    .modal-footer .btnList{justify-content: space-around; display: flex; width: 100%;}
    .modal-m{width: 100%;padding-left: 20px; padding-right: 20px;}
    .modal-lg{width: 100%; padding-left: 20px; padding-right: 20px;}
    
    .modal-m .modal-content{padding: 0;}
    .modal-m .modal-content .modal-header{overflow: hidden; height: 275px; display: flex;  object-fit: cover; object-position:50% 50%; object-position:center top; align-items: flex-start; justify-content: flex-start;}
    .modal-m .modal-content .modal-header img{object-position:center top;  object-fit: cover; width: 100%; height: 100%;}
    .modal-m .modal-content .modal-body{overflow: hidden; height: auto; overflow: hidden; padding:20px; height: auto;}
    .modal-m .modal-content .modal-body h2{font-size: 30px;}
    .modal-m .modal-content .modal-body p{margin-top: 10px; font-size: 14px;}
    .modal-m .modal-content .modal-body dl{font-size: 14px; opacity: 0.55; font-weight: bold; margin-top: 20px;}

    .modal.modal-06 .modal-content .modal-body .charger5-logo img{width: 180px;}
}
/* swiper */
/*
.swiper-slide {text-align: center; font-size: 18px; background: #fff; display: flex;}
.swiper-button-next{background: url(../img/ico-right.png) no-repeat;}
.swiper-button-prev{background: url(../img/ico-left.png) no-repeat;}
.swiper-pagination{bottom: 40px; display: flex; justify-content: center; align-items: center;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 5px;}
.swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px; display: inline-block; border-radius: 100%;  background: #000;  opacity:1; transition: all 0.4s ease; background-color: #898989;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 12px; height: 12px; border: 1px solid #1cffde; background: none; opacity:1;}
*/



/* nav */
.navTrigger {
    transform: scale(1);
    cursor: pointer;
    width: 25px;
    height: 16px;
    z-index: 60;
    display: none;
}

.navTrigger i {
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 2px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.4s backwards;
    animation: outT 0.4s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.4s backwards;
    animation: outM 0.4s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.4s backwards;
    animation: outBtm 0.4s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i {
    background-color: #fff;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.4s forwards;
    animation: inT 0.4s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.4s forwards;
    animation: inM 0.4s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.4s forwards;
    animation: inBtm 0.4s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(7px) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(7px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(7px) rotate(0deg);
    }

    100% {
        transform: translateY(7px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(7px) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(7px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(7px) rotate(0deg);
    }

    100% {
        transform: translateY(7px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(-7px) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(-7px) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-7px) rotate(0deg);
    }

    100% {
        transform: translateY(-7px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(-7px) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(-7px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-7px) rotate(0deg);
    }

    100% {
        transform: translateY(-7px) rotate(135deg);
    }
}

/* layout */
#wrapper{width: 100%; height: 100%; }
/*.header-block{height:64px; position: relative; }*/
#header.mob-head-fixed{top: 0 !important;}
#header {color: #fff; z-index: 99999; position: fixed; top: 0; left: 0; width: 100%; transition: all 0.2s ease; top:0px; background-color: #222;}
#header .row{width: 1440px; padding: 0 40px; height: 64px; flex-direction: row; align-items: center; text-transform: uppercase; justify-content: space-between;}
#header .row h1{margin-top: 3px;}
#header .row h1 img{transition: all 0.2s ease; width: 200px;}
#header .gnb {position: relative; z-index: 10;}
#header .gnb a{color: #fff;}
#header .gnb>ul{display: flex; font-size: 16px;}
#header .gnb>ul>li{position: relative; margin-left: 40px;}
#header .gnb>ul>li a{font-weight: 400; position: relative; z-index: 10;}
#header .gnb>ul>li a span{display: block; width: 100%; position: absolute; bottom: 0; height: 1px; background-color: #fff; width: 0; left: auto; right:0;}
#header .gnb>ul>li a.over span{left: 0; right:auto;}
#header .gnb>ul>li.active a span{display: none;}

#header .gnb>ul>li a.active span{width: 100% !important;}
/*#header .gnb>ul>li>a:hover:after{ width: 100%;}*/
/*#header.nav-up{top:-64px;}*/
#header.nav-up{top:-64px;}
#header.nav-down{top:0px; box-shadow: 0 10px 10px rgba(0,0,0,0.3); background-color: #222;}
#header.nav-default{box-shadow: none;}

#header .gnb>ul>li>ul{position: absolute; top: 61px; pointer-events: none; z-index: 20; width:calc( 100% + 40px); opacity: 0; padding:20px;  background: rgba(34,34,34,0.8); left: -20px;}
#header .gnb>ul>li>ul.active{pointer-events: auto;}
#header .gnb>ul>li>ul>li{margin-bottom: 15px;}
#header .gnb>ul>li>ul>li:last-child{margin-bottom:0;}
#header .gnb>ul>li>ul>li>a{color: #fff; white-space: nowrap; position: relative; text-shadow: 0 3px 3px rgba(0,0,0,.3);}
#header .gnb>ul>li.active>a{color: #ff0;}
#header .gnb>ul>li:nth-child(2)>ul{width: 185px;left: -55px;}
#header .gnb>ul>li:nth-child(3)>ul{width: 105px;left: -80px;}

.m-gnb{position:fixed; top: 64px; left: 0; width: 100%;  bottom: 0; background: rgba(0,0,0,0.9); z-index: 99; padding: 0 40px; transform: translateX(-100%);}
.m-gnb dl{font-size: 20px; padding-top: 30px; }
.m-gnb dl dt{padding-bottom: 5px; font-weight: 700; transform: translateY(20px);opacity: 0;}
.m-gnb dl dd{margin-top: 15px; font-weight: 100; transform: translateY(20px);opacity: 0;}
.m-gnb a{color: #fff;}
.m-gnb .m-gnb-language-list{display: flex;}
.m-gnb .m-gnb-language-list li{margin-right: 10px;}
.m-gnb .m-gnb-language-list li a{display: inline-block; padding: 5px 10px; border-radius: 10px; background:#ffffff; color: #000000; font-size: 14px; font-weight: 700;}

body.scroll {overflow-y: hidden;}
body.scroll #contents{overflow: hidden; height: 100vh;}
body.scroll #contents .index.section-02{background-attachment: scroll;}
.text-block{display: block;}
.pc-view{display: block;}
.mob-view{display:none ;}

@media (max-width: 768px) {
    html, body{min-width:360px; height: 100%;}
    .row{width: 100% !important; padding-left: 20px; padding-right: 20px;}
    .row.row-40{padding-left: 40px; padding-right: 40px;}
    .row-40{padding-left: 40px; padding-right: 40px;}
    #header .row{padding-left:20px; padding-right: 20px;}
    #header .row .gnb{display: none;}
    .navTrigger {display: block;}
    .text-block{display: inline;}
    .pc-view{display:none;}
    .mob-view{display:block;}
}

.footer{background-color: #222; color: #fff; font-size: 14px; overflow: hidden;}
.footer .row{padding:35px 40px 40px;}
.footer .row h2{margin-bottom: 35px; text-align: center;}
.footer .row .footer-logo{width: 164px;}
.footer .row .footMenu {display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; opacity: 0.8; align-items: baseline;}
.footer .row .footMenu a{color: #fff;}
.footer .row .footMenu li{color: #fff;}
.footer .row .footMenu li:after{content: ""; display: inline-block; width: 1px; height:14px; background-color: #fff; opacity: 0.3; margin: 0 15px; position: relative; top: 2px;}
.footer .row .footMenu li:last-child:after{display: none;}
.footer .row .company-info{margin-bottom: 10px; opacity: 0.8;}
.footer .row p{margin-bottom: 10px; opacity: 0.8; text-align: center;}

@media (max-width: 768px) {
    .footer{background-color: #222; color: #fff; font-size: 14px;}
    .footer .row{padding:30px 20px;}
    .footer .row h2{margin-bottom: 30px;}
    .footer .row .footMenu {display: flex; margin-bottom: 10px; opacity: 0.8; align-items: baseline;}
    .footer .row .footMenu a{color: #fff;}
    .footer .row .footMenu li{color: #fff;}
/*    .footer .row .footMenu:last-of-type li:first-child{margin-bottom: 8px;}*/
    .footer .row .footMenu li:after{content: ""; display: inline-block; width: 1px; height:14px; background-color: #fff; opacity: 0.3; margin: 0 15px; position: relative; top: 2px;}
    .footer .row .footMenu li:last-child:after{display: none;}
    .footer .row .company-info{margin-bottom: 8px; opacity: 0.8;}
    .footer .row p{margin-bottom: 8px; opacity: 0.8;}
}

/*.scrollbar-track{z-index: 999;}*/

section.index{display: flex; color: #fff; position: relative;}
.videoPlayer{height:100%; display: flex; position:absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; overflow: hidden;  object-fit: cover;}
.videoPlayer video{object-fit:cover; object-position: center; width: 100%;}
.videoPlayer iframe{ object-fit:cover; object-position: center; width: 100%;}

.index-section .section-00 {position: relative; height:100vh; display: flex; background-color: #000;}
.index-section .section-00  .videoPlayer{padding-top: 64px;}
.index-section .section-00  .videoPlayer:first-of-type{display: flex;}
.index-section .section-00  .videoPlayer:last-of-type{display:none;}

@media (max-width: 768px) {
    html{min-height: -webkit-fill-available;}
    body{min-height: -webkit-fill-available; min-height: 100vh;}
/*
    body{min-height: 100vh; min-height: -webkit-fill-available; overflow: hidden !important;}
    #wrapper{position:fixed; width: 100%; height:calc(100%); overflow-y: auto; top: 0; left: 0;}
*/
    .index-section .section-00 {height:calc(100vh);}
    .index-section .section-00 .videoPlayer:first-of-type{display:none;}
    .index-section .section-00 .videoPlayer:last-of-type{display:flex; padding-top: 0;}
}

.index-section .section-01 {position: relative; height:calc(100vh); display: flex; align-items: center; color: #fff; background-color: #333; background: url(../img/bg-index.jpg) no-repeat 50% 50%; background-size: cover;}
.index-section .section-01 .bg{position: absolute; border: 1px solid #000; width: 100%; height: 100%; display: flex; overflow: hidden; background-color: #000;}
.index-section .section-01 .bg img{width: 100%; object-fit: cover; object-position: center; }
.index-section .section-01 .row dl{margin-left: 38px;}
.index-section .section-01 .row dl dt{font-size: 50px;font-weight: 700; text-shadow:0 0 150px rgba(255,255,255,1); color: #fff;}
.index-section .section-01 .row dl dd{font-size: 20px; line-height: 1.7; margin-top: 30px; font-weight: 400; width: 515px; }
.index-section .section-01 .row dl dd a{font-size: 18px; color: #fff; display: flex; align-items: center;}
.index-section .section-01 .row dl dd a img{margin-right: 10px;}
.index.section-02{height: 100vh; align-items: center; overflow: hidden;}
.index.section-02 .row .slogan{display: flex; align-items: flex-end; justify-content: center; transform-origin: bottom;}
.index.section-02 .row .slogan img{margin: 0 18px;}
.index.section-02 .row .des{display: flex; justify-content: center; margin-top: 70px;}
.index.section-02 .row .des li{width: 290px; margin: 0 20px; line-height: 1.5;}
.index.section-02 .hero-image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;  display: flex; transform: scale(3); }
.index.section-02 .hero-image img{width: 100%; object-fit: cover; object-position: center;}
.index.section-03{display: flex; align-items: center; justify-content: center; background-color: #000; flex-direction: column; height: 100vh; position: relative;}
.index.section-03 .bg{background:#000 url(../img/bg-ess.jpg) no-repeat 50% 50%; height: 100vh; top: 0; left: 0; width: 100%; position: absolute;}


.ess-contents{display: flex; height: 100vh; flex-direction: column; width: 100%; position: relative; z-index: 1; position: absolute; left: 0; top: 0; justify-content: center;}
.ess-contents .ess{display: flex; flex-direction: column; align-items: center; text-align: center; }
.ess-contents .ess dt{font-size: 50px; font-weight: 700; margin-bottom: 35px;}
.ess-contents .ess dd{font-size: 20px; font-weight: 500; line-height: 160%;}


.ico-contents {display: flex; height: 100vh; flex-direction: column; width: 100%;  align-items: center; justify-content: center; position: relative; z-index: 2; position: absolute; left: 0; top: 0;}
.ico-contents .ico-con{display: flex; justify-content: center; align-items: center;}
.ico-contents .ico-con li{ text-align: center; margin: 0 5px;}
.ico-contents .ico-con li .image img{width: 130px;}
.ico-contents .ico-con li dl{margin-top: 15px;}
.ico-contents .ico-con li dt{font-size: 18px; margin-bottom: 15px;}
.ico-contents .ico-con li dd{opacity: 0.65; line-height:1.2; height: 48px;}


.index.section-04{display: flex; align-items: flex-start; justify-content: center; flex-direction: column; position: relative; height: 100vh; }
.index.section-04 .article{position:absolute; top: 0; display: flex; align-items: center;  width: 100%; height: 100vh;}
.index.section-04 .article .title{font-size: 50px; font-weight: 700;}
.index.section-04 .article .text{font-size: 20px; line-height: 1.7; margin-top: 15px; opacity: 0.85; font-weight: 700;}
.index.section-04 .article.article-01 .title{color: #222222; padding-top: 200px;}
.index.section-04 .article .row{padding-left: 45px;}
.index.section-04 .hero-image{width: 100%; max-height: 100vh; overflow: hidden; object-fit: cover; object-position: top;}
.index.section-04 .hero-image img{width: 100%; height: auto;object-fit: cover; object-position: top; position: relative; transform: translateX(0)}

.preload {display: none;}

@media (max-width: 1440px) and (min-width: 1141px) {
    #header .row{width: 1140px;}
}
@media (max-width: 1140px) and (min-width: 769px) {
    #header .row{width: 100%;}
}

@media (max-width: 768px) {
    .index-section .section-01 {position: relative; height:calc(100vh); display: flex; align-items: center; color: #fff; background-color: #333;}
    .index-section .section-01 .row dl{margin-left:0px; text-align: center;}
    .index-section .section-01 .row dl dt{font-size: 24px;font-weight: 700; text-shadow:0 0 150px rgba(255,255,255,1); color: #fff;}
    .index-section .section-01 .row dl dd{font-size: 18px; line-height: 1.5; margin-top: 130px; font-weight: 400; width: auto; padding-left: 45px; padding-right: 45px;}
    .index-section .section-01 .row dl dd:last-of-type{margin-top: 50px; justify-content: center; display: flex;}
    .index.section-02{height: 100vh; align-items: center; background: url(../img/bg-slogan.jpg) no-repeat 50% 50%; background-size: cover; background-attachment:scroll; overflow: hidden;}
    .index.section-02 .row {flex-direction: column; align-items: center;}
    .index.section-02 .row .slogan{display: flex; align-items:center; flex-direction: column; justify-content: center; transform-origin: bottom; padding-left: 20px; padding-right: 20px;}
    .index.section-02 .row .slogan img{width: 100%;}
    .index.section-02 .row .slogan img:first-of-type{ width: 95%;}
    .index.section-02 .row .slogan img:last-of-type{margin-top: 10px;}
    .index.section-02 .row .des{display: flex; justify-content: center; margin-top: 130px; flex-direction: column; text-align: center;}
    .index.section-02 .row .des li{width:100%; margin: 0px; line-height: 1.5; margin-bottom: 20px; padding-left: 20px; padding-right: 20px;}
    .index.section-02 .hero-image{ position: absolute; top: 0; left: 0; width: 100%;  transform: scale(1);}
    .index.section-02 .hero-image img{filter: blur(0px);}
    .index.section-03{min-height:none; height:calc(100vh); display: flex; align-items: center; justify-content: center; background-color: #000; flex-direction: column;}
    .index.section-03 .bg{position: absolute; background:#000 url(../img/bg-ess-m.jpg) no-repeat 50% 0%; background-size:100% auto; top: 0; z-index: 0; left: 0; width: 100%; height: 100%; background-position:center 60px;}
    .ess-contents{display: flex; height: 100%; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%;  justify-content:center; align-items:center;}
    .ess-contents .ess{display: flex; flex-direction: column; align-items: center; text-align: center;}
    .ess-contents .ess dt{font-size: 24px; font-weight: 700; margin-bottom: 35px;}
    .ess-contents .ess dd{font-size: 18px; padding: 0 30px;}
    .ico-contents {display: flex; height: 100%; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%;  align-items: center; justify-content: center;}
    .ico-contents .ico-con{display: flex; justify-content:space-between; align-items: center; flex-wrap: wrap;}
    .ico-contents .ico-con li{ text-align: center; margin: 0; margin-bottom:0px; width: 30%;}
    .ico-contents .ico-con li:nth-child(1){width: 100%; margin-bottom: 20px;}
    .ico-contents .ico-con li:nth-child(1) dd{display: none;}
    .ico-contents .ico-con li .image img{width: 85px;}
    .ico-contents .ico-con li dl{margin-top: 12px;}
    .ico-contents .ico-con li dt{font-size: 18px; margin-bottom: 5px;}
    .ico-contents .ico-con li dd{opacity: 0.65; line-height:1.2; height: 48px;}
    
    .index.section-04{display: flex; min-height: 100vh; align-items: flex-start; justify-content: center; flex-direction: column; position: relative; }
    .index.section-04 .article{position:absolute; top: 0; display: flex; align-items: center;  width: 100%; height: 100vh;}
    .index.section-04 .article .title{font-size: 24px; font-weight: 700;}
    .index.section-04 .article .text{font-size: 18px; line-height: 1.7; margin-top: 10px; opacity: 0.85; font-weight: 700;}
    .index.section-04 .article.article-01 .title{color: #222222; }
    .index.section-04 .article.article-02 .title{margin-bottom: 25px;}
    .index.section-04 .article .row{padding: 0 40px; text-align: center;}
    .index.section-04 .hero-image{width: 100%; max-height: 100vh; overflow: hidden; object-fit: contain; object-position:center top;}
    .index.section-04 .hero-image img{width:auto; height:200vh; object-fit: cover; object-position:center top; position: relative; left: 50%; transform: translateX(-50%)}

}



/* company */

.company {padding-top: 64px;}
.company .section-01{background: url(../img/bg-company-visual.jpg) no-repeat 50% 0; background-size:100% auto; height: 550px; background-position:0 0; display: flex; align-items: flex-start; padding-top: 80px;}
.company .section-01 .row dl{color: #fff;}
.company .section-01 .row dl dt{padding-left: 40px;}
.company .section-01 .row dl dd{font-size: 26px; font-weight:400; padding-left: 50px; margin-top: 10px;}

.row.company-row{padding: 0 40px;}
.company .section-02{padding-top: 70px; padding-bottom: 180px;}
.slider-wrap{margin-left:calc(50% - 530px); margin-right: 0; overflow-x: visible;}
.company-slider {margin-bottom: 85px;}
.company-slider .swiper-slide {text-align: center; font-size: 18px; background: #fff; width: 510px; height: 250px; background-color: #999; display: flex; overflow: hidden;}
.company-slider .swiper-slide img{object-fit: cover; width: 100%; transition: all 0.4s ease;}
.company-slider .swiper-slide:hover img{transform: scale(1.2);}
.company-slider .swiper-wrapper{padding-bottom: 56px;}
.company-slider .swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left:0;
    bottom: 0px;
    z-index: 50;
    height: 5px;
    width: 100%;
    max-width:1040px;
}
.company-slider .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0,0,0,1);
    border-radius: 10px;
    left: 0;
    top: 0;
}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
    opacity:0;
    cursor: auto;
    pointer-events: none;
}
.company-slider .company-text{margin-top: 40px; width: 720px;}
.company-slider .company-text h6{margin-bottom: 20px; font-size: 20px; font-weight: 700;}
.company-slider .company-text p{font-size: 18px; opacity: 0.7; color: #000000; font-weight: 500;}

.location-map{margin-top: 80px; height: 550px;}
.location-map img{width: 100%;}
.location-info{display: flex; justify-content: space-between; margin-top: 60px; flex-wrap: wrap;}
.location-info li:first-child{width: 295px;}
.location-info li{width: 215px; border-top: 1px solid rgba(0, 0, 0, 0.9); padding-top: 15px;}
.location-info li dt{font-size: 18px; font-weight: 700; margin-bottom:10px;}
.location-info li dd p{font-size: 14px; font-weight: 500; margin-bottom: 15px;}
.company .section-03{background:#000 url(../img/bg-company-slogan.jpg) no-repeat center top; background-size: 100% auto; padding: 180px 0 180px; color: #fff; } /* 수상내역 삭제로 인한 임시 패딩 */
.company h2{font-size: 45px; font-weight: bold; color: #fff;}
.company .section-03 .slogan dl dt{font-size: 30px; font-weight: bold;}
.company .section-03 .slogan dl dd{font-size: 20px; opacity: 0.7; margin-top: 5px; font-weight: 500;}
.company .section-03 .slogan.type-01 dl {margin-top: 65px;}
.company .section-03 .slogan.type-01 dl:first-of-type {margin-top: 70px;}
.company .section-03 .slogan.type-02{margin-top: 150px;}
.company .section-03 .slogan.type-02 h2{margin-bottom: 90px;}
.company .section-03 .slogan.type-02 .benefit{display: grid; gap: 40px 10px; grid-template-columns: repeat(3, 1fr);}
.company .section-03 .slogan.type-02 .benefit dl dt{margin-bottom: 10px;}
.company .section-03 .slogan.type-02 .benefit dl dd{font-size: 20px;}
.company .section-03 .recruit-info{margin-top: 150px;}
.company .section-03 .recruit-info h2{margin-bottom: 80px;}
.company .section-03 .recruit-info > p{margin-bottom: 10px; padding-left: 5px; font-size: 16px;}
.company .section-03 .recruit-info .recruit-list{display: flex; flex-wrap: wrap; justify-content: space-between;}
.company .section-03 .recruit-info .recruit-list li{margin-top: 13px;  transition: all 0.4s ease;}
.company .section-03 .recruit-info .recruit-list li a{display: flex; flex-wrap: wrap; background-color: #1e1e1e; height: 136px; width: 524px; padding:17px 15px 0 25px;}
.company .section-03 .recruit-info .recruit-list li a dl{display: flex; flex-direction: column; width: 100%;}
.company .section-03 .recruit-info .recruit-list li a dl dt{color: #6177c8; font-size: 20px; font-weight: 700; display: flex; align-items: center; height: 40px; text-transform: uppercase; justify-content: space-between; display: flex;}
.company .section-03 .recruit-info .recruit-list li a dl dt span{transition: all 0.4s ease;}
.company .section-03 .recruit-info .recruit-list li a dl dt span img{transition: all 0.4s ease;}
.company .section-03 .recruit-info .recruit-list li:hover {transform: scale(1.02);}
.company .section-03 .recruit-info .recruit-list li:hover a dl dt span{transform: translateX(10%); transition: all 0.4s ease;}
.company .section-03 .recruit-info .recruit-list li:hover a dl dt span img{filter: brightness(10);}
.company .section-03 .recruit-info .recruit-list li a dl dd{color: #fff; font-size: 22px; font-weight: 700;}
.company .section-03 .recruit{margin-top: 150px;}
.company .section-03 .recruit .text{opacity: 0.7; font-size: 20px; font-weight: 500; margin-top: 15px;}
.company .section-03 .recruit ul{margin-top: 110px; display: flex; justify-content:center; align-items: flex-start;}
.company .section-03 .recruit ul li{font-size: 23px; display: inline-flex; align-items:flex-start; justify-content: center; font-weight: 500;}
.company .section-03 .recruit ul li:after{content: ""; display: inline-flex; width: 24px; height: 32px; background: url(../img/card-ic-arrow-s.png) no-repeat; margin-top: 24px; margin-left: 40px; margin-right: 40px;}
.company .section-03 .recruit ul li:last-child:after{display: none;}
.company .section-03 .recruit ul li img{display: block; margin: auto; margin-bottom: 15px;}

.company .section-03 .recruit .info{text-align: center; margin-top: 90px; font-size: 22px;}
.company .section-03 .recruit .info dt{ opacity: 0.9; font-weight: 500;}
.company .section-03 .recruit .info dd{opacity: 0.5; margin-top: 5px;}
.company .section-03 .recruit .info dd.mob-view{margin-top: 5px;}
.company .section-03 .awward{margin-top: 250px;}
.company .section-03 .awward ul{display: flex; flex-wrap: wrap;}
.company .section-03 .awward ul li{margin-top: 30px; margin-left: 30px; width: 510px;}
.company .section-03 .awward ul li:nth-child(2n+1){margin-left: 0;}
.company .section-03 .awward ul li .image{width: 510px; height: 240px; display: flex;}
.company .section-03 .awward ul li .image img{object-fit: cover; object-position:50% 50%; width: 100%;}
.company .section-03 .awward ul li dl dt{margin-top: 10px;font-size: 20px;}
.company .section-03 .awward ul li dl dd{margin-top: 10px; font-size: 16px; opacity: 0.6; width: 370px;}

.company .section-04 {background-color: #000; padding-top: 150px;}
.company .section-04 .swiper-container{margin-top: 55px;}
.company .section-04  .swiper-slide {text-align: center; font-size: 18px; width:370px;}
.company .section-04  .swiper-slide .awward-image{width: 370px; height: 370px; border-radius: 5px; border: solid 2px #000000; background-color: #2a2a2a; display: flex; overflow: hidden;}
.company .section-04  .swiper-slide .awward-image img{ object-fit: cover; object-position:50% 50%; width: 100%;}
.company .section-04  .swiper-slide dl{margin-top: 30px; font-size: 18px; text-align: left;}
.company .section-04  .swiper-slide dl dt{color: #6177c8;}
.company .section-04  .swiper-slide dl dd{opacity: 0.8; color: #ffffff; margin-top: 15px;}

.company .section-05 {background-color: #000; padding-top: 150px; padding-bottom: 150px;}
.company .section-05 .news {width: 100%;}
.company .section-05 .news .news-list{margin-top: 35px;}
.company .section-05 .news .news-list li{background-color: #1e1e1e; margin-top: 10px; transition: all 0.4s ease;}
.company .section-05 .news .news-list li:first-child{margin-top: 0;}
.company .section-05 .news .news-list li a{padding: 10px 25px; display: block; height: 135px;}
.company .section-05 .news .news-list li a .date{font-size: 20px; color: #6177c8; font-weight: bold; display: flex; align-items: center; height: 40px; justify-content: space-between;}
.company .section-05 .news .news-list li a .date img{ transition: all 0.4s ease;}
.company .section-05 .news .news-list li a .text{font-size: 22px; color: #ffffff; font-weight: bold; margin-top: 5px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod; height: 3em;}
.company .section-05 .news .news-list li:hover {transform: scale(1.02);}
.company .section-05 .news .news-list li:hover a p.date span{transform: translateX(10%); transition: all 0.4s ease;}
.company .section-05 .news .news-list li:hover a p.date span img{filter: brightness(10);}

.news-contents{padding: 150px 0;}
.news-contents .date{font-size: 24px; color: #6177c8; font-weight: bold;}
.news-contents .title{font-size: 38px; font-weight: bold; color: #222; line-height: normal; margin-top: 15px;}
.news-contents .news-article{margin-top: 50px; font-size: 22px;}
.news-contents .news-article img{max-width: 100%;}
.company .swiper-button-next,.company .swiper-button-prev{ width:80px; height: 80px; background: url(../img/btn-next.png) no-repeat; top: 85px; margin-top: 0; background-size: cover; opacity: 0.5; transition:all 0.4s ease;}
.company .swiper-button-next:hover{opacity: 1; transform: translateX(10px)}
.company .swiper-button-prev:hover{opacity: 1; transform: translateX(-10px) rotateZ(180deg)}
.company .swiper-button-next{right: 45px;}
.company .swiper-button-prev{transform: rotateZ(180deg); left: 20px;}
.company .swiper-button-next:after{display: none;}
.company .swiper-button-prev:after{display: none;}

.company .swiper-button-next.swiper-button-disabled,.company  .swiper-button-prev.swiper-button-disabled{opacity: 0;}

.company .section-04 .swiper-button-next,.company .section-04 .swiper-button-prev{top: 130px;}
.over-text{position: relative; overflow: hidden; }
.over-text .over-text-con{transform: translateY(80px); display: block; opacity: 0;}
.recruit-type dl{margin-top: 20px; color: #222;}
.recruit-type dl:first-of-type{margin-top: 0px;}
.recruit-type dl dt{opacity: 0.5;font-size: 16px;  font-weight: 500;}
.recruit-type dl dd{font-size: 14px;   font-weight: 500; margin-top: 5px;}
.recruit-type dl dd ul {list-style: disc; padding-left: 20px;}
.register{margin-top: 40px; text-align: center;}
.register a{display: flex; color: #fff; width: 200px; height: 40px; border-radius: 8px; background-color: #4d68cd; justify-content: center; align-items: center; font-size:14px; font-weight: 500; margin: auto;}
.over-scale{overflow: hidden;}
.over-scale img{transition: all 0.4s ease;}
.over-scale:hover img{transform: scale(1.2);}


.news .swiper-button-next,.news  .swiper-button-prev{transition: all 0.4s ease; width: 40px; height: 40px; background-size: cover; color: #fff; background: none; opacity: 0.5;}
.news .swiper-button-next{right: 0; bottom: 0; top: auto;}
.news .swiper-button-prev{right: 40px; bottom: 0; top: auto; left: auto; transform: rotateZ(0)}
.news .swiper-button-next i,.news  .swiper-button-prev i{color: #fff; font-size: 30px;}
.news .swiper-pagination{position: static; color: #fff; font-size: 24px; font-weight: 500; margin-top: 20px; height: 40px; text-align: left; display: flex; align-items: center;}
.news .swiper-pagination span{margin: 0 5px;}
.news .swiper-button-next:hover,.news  .swiper-button-prev:hover{opacity:1; transform: none;}
.news .swiper-button-next.swiper-button-disabled,.news  .swiper-button-prev.swiper-button-disabled{opacity: 0.2;}
.swiper-button-next:focus, .swiper-button-prev:focus{outline: none;}
@media (max-width: 768px) {
    .company .section-01{background: url(../img/bg-company-visual.jpg) no-repeat 50% 0; background-size:cover !important; height: 400px; background-position:50% 0%; align-items: flex-end;}
    .company .section-01 .row{ padding: 20px;margin: 0;}
    .company .section-01 .row dl{color: #fff; }
    .company .section-01 .row dl dt{padding-left:0px; margin-left: -8px;}
    .company .section-01 .row dl dt:first-of-type img{width: 234px;}
    .company .section-01 .row dl dt:last-of-type img{width: 250px;}
    .company .section-01 .row dl dd{font-size: 18px; font-weight:400; padding-left:0px; margin-top: 10px;}
    .row.company-row{padding: 0 20px;}
    
    .company .section-02{padding-top: 20px; padding-bottom: 20px;}
    .slider-wrap{margin-left:20px; margin-right: 0; padding-left: 0px; overflow-x: visible;}
    .company-slider {margin-bottom: 65px;}
    .company-slider .swiper-slide {text-align: center; font-size: 18px; background: #fff; width: 315px; height:155px; background-color: #999; display: flex; overflow: hidden;}
    .company-slider .swiper-slide img{object-fit: cover; width: 100%; transition: all 0.4s ease;}
    .company-slider .swiper-slide:hover img{transform: scale(1.2);}
    .company-slider .swiper-wrapper{padding-bottom:20px;}
    .company-slider .swiper-container-horizontal>.swiper-scrollbar {
        position: absolute;
        left:0;
        bottom: 0px;
        z-index: 50;
        height: 2px;
        width:auto;;
        right: 20px;
        max-width:1040px;
    }
    .company-slider .swiper-scrollbar-drag {
        height: 100%;
        width: 100%;
        position: relative;
        background: rgba(0,0,0,1);
        border-radius: 10px;
        left: 0;
        top: 0;
    }
    .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
        opacity:0;
        cursor: auto;
        pointer-events: none;
    }
    .company-slider .company-text{width: auto; margin-top: 25px; padding-right: 20px;}
    .company-slider .company-text h6{font-size: 14px;}
    .company-slider .company-text p{font-size: 14px;}
    .location-map{margin-top: 35px; height: 180px;}
    .location-map img{width: 100%;}
    .location-info{display: flex; justify-content: space-between; margin-top: 20px; flex-wrap: wrap;}
    .location-info li:first-child{width: 100%;}
    .location-info li{width:100%; border-top: 1px solid rgba(0, 0, 0, 0.9); padding-top: 10px; padding-bottom: 8px;}
    .location-info li dt{font-size: 16px; font-weight: 700; margin-bottom: 5px;}
    .location-info li dd p{font-size: 14px; font-weight: 500; margin-bottom:5px;}
    
    .company .section-03{background:#000 url(../img/bg-company-slogan.jpg) no-repeat 70% top; background-size: auto 310px; padding: 200px 0 100px; color: #fff;} /* 수상내역 삭제로 인한 임시 패딩 */
    .company h2{font-size: 24px; font-weight: bold; color: #fff; margin-bottom: 40px;}
    .company .section-03 h2{margin-left: -14px;}
    .company .section-03 .slogan dl { width: 100%;}
    .company .section-03 .slogan dl dt{font-size: 18px; font-weight: bold;}
    .company .section-03 .slogan dl dd{font-size: 13px; opacity: 0.7; margin-top:10px;}
    .company .section-03 .slogan.type-01 dl {margin-top: 25px;}
    .company .section-03 .slogan.type-01 dl:first-of-type {margin-top:0px;}
    .company .section-03 .slogan.type-02{margin-top: 100px;}
    .company .section-03 .slogan.type-02 h2{margin-bottom: 40px;}
    .company .section-03 .slogan.type-02 .benefit{display: flex; flex-wrap: wrap;}
    .company .section-03 .slogan.type-02 .benefit dl{margin-right: 120px; margin-top:20px;}
    .company .section-03 .slogan.type-02 .benefit dl:first-of-type{margin-top: 0;}
    .company .section-03 .slogan.type-02 .benefit dl dt{margin-bottom:10px;}
    .company .section-03 .slogan.type-02 .benefit dl dd{font-size: 15px; margin-top: 0;}
    .company .section-03 .recruit-info{margin-top: 100px;}
    .company .section-03 .recruit-info h2{margin-bottom: 30px;}
    .company .section-03 .recruit-info .recruit-list{display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: column;}
    .company .section-03 .recruit-info .recruit-list li{margin-top: 10px;  transition: all 0.4s ease; width: 100%;}
    .company .section-03 .recruit-info .recruit-list li a{display: flex; flex-wrap: wrap; background-color: #1e1e1e; height: 90px; width: 100%; padding:15px;}
    .company .section-03 .recruit-info .recruit-list li a dl{display: flex; flex-direction: column; width: 100%;}
    .company .section-03 .recruit-info .recruit-list li a dl dt{color: #6177c8; font-size: 16px; font-weight: 700; display: flex; align-items: center; height: 20px; text-transform: uppercase; justify-content: space-between; display: flex;}
    .company .section-03 .recruit-info .recruit-list li a dl dt span{transition: all 0.4s ease;}
    .company .section-03 .recruit-info .recruit-list li a dl dt span img{width: 20px;}
    .company .section-03 .recruit-info .recruit-list li:hover {transform: scale(1.02);}
    .company .section-03 .recruit-info .recruit-list li:hover a dl dt span{transform: translateX(10%); transition: all 0.4s ease;}
    .company .section-03 .recruit-info .recruit-list li:hover a dl dt span img{filter: brightness(10);}
    .company .section-03 .recruit-info .recruit-list li a dl dd{color: #fff; font-size: 18px; font-weight: 700; margin-top: 5px;}
    .company .section-03 .recruit{margin-top: 100px;}
    .company .section-03 .recruit h2{margin-bottom: 15px;}
    .company .section-03 .recruit .text{opacity: 0.7; font-size: 16px; font-weight: 500; margin-top: 15px; margin-left: -14px;}
    .company .section-03 .recruit ul{margin-top: 40px; display: flex; flex-direction: column; justify-content:center; align-items: flex-start; margin-left: 10px;}
    .company .section-03 .recruit ul li{font-size: 18px; display: inline-flex; align-items:flex-start; justify-content: center; flex-direction: column;}
    .company .section-03 .recruit ul li:after{content: ""; display: block; width: 40px; height: 40px; background: url(../img/card-ic-arrow-s.png) no-repeat 50% 50%;; margin-top: 0px; margin-left:0px; margin-right: 0px; display: block; background-size: 12px auto; transform: rotateZ(90deg);}
    .company .section-03 .recruit ul li:last-child:after{display: none;}
    .company .section-03 .recruit ul li img{display:inline-block; margin: auto; margin-bottom: 0px; width: 40px; margin-right: 15px;}

    .company .section-03 .recruit .info{text-align: center; margin-top: 40px; font-size: 22px;}
    .company .section-03 .recruit .info dt{ opacity: 0.9; font-weight: 500; font-size: 16px;}
    .company .section-03 .recruit .info dd{opacity: 0.5; font-size: 14px; line-height: 160%;}
    .company .section-03 .awward{margin-top:100px;}
    .company .section-03 .awward ul{display: flex; flex-wrap: wrap; flex-direction: column;}
    
    .company .section-03 .awward ul li{margin-top: 30px; margin-left: 0px; width:100%;}
    .company .section-03 .awward ul li:first-child{margin-top: 0;}
    .company .section-03 .awward ul li:nth-child(2n+1){margin-left: 0;}
    .company .section-03 .awward ul li .image{width: 100%; height: 165px; display: flex;}
    .company .section-03 .awward ul li .image img{object-fit: cover; object-position:50% 50%; width: 100%;}
    .company .section-03 .awward ul li dl dt{margin-top: 10px;font-size: 20px;}
    .company .section-03 .awward ul li dl dd{margin-top: 10px; font-size: 16px; opacity: 0.6; width: 100%;}
    .company .section-03 .news {margin-top: 100px;}
    .company .section-03 .news .news-list{margin-top: 0px;}
    .company .section-03 .news .news-list li{background-color: #1e1e1e; margin-top: 10px;}
    .company .section-03 .news .news-list li:first-child{margin-top: 0;}
    .company .section-03 .news .news-list li a{padding: 20px 25px; display: block; height: auto;}
    .company .section-03 .news .news-list li a .date{font-size: 15px; color: #6177c8; font-weight: bold;}
    .company .section-03 .news .news-list li a .text{font-size: 16px; color: #ffffff; font-weight: bold; margin-top: 10px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod; height: auto;}
    .company .section-04 {background-color: #000; padding-top:100px;}
    .company .section-04 .swiper-container{margin-top: 0px;}
    .company .section-04  .swiper-slide {text-align: center; font-size: 18px; width:315px;}
    .company .section-04  .swiper-slide .awward-image{width: 100%; height: 155px; border-radius: 5px; border: solid 2px #000000; background-color: #2a2a2a; display: flex; overflow: hidden;}
    .company .section-04  .swiper-slide .awward-image img{ object-fit: cover; object-position:50% 50%; width: 100%;}
    .company .section-04  .swiper-slide dl{margin-top: 10px; font-size: 16px; text-align: left;}
    .company .section-04  .swiper-slide dl dt{color: #6177c8;}
    .company .section-04  .swiper-slide dl dd{opacity: 0.8; color: #ffffff; margin-top: 10px; font-size: 14px;}
    
    .company .section-05 {background-color: #000; padding-top: 100px; padding-bottom: 50px;}
    .company .section-05 .news {width: 100%;}
    .company .section-05 .news .news-list{margin-top: 0px;}
    .company .section-05 .news .news-list li{background-color: #1e1e1e; margin-top: 5px; transition: all 0.4s ease;}
    .company .section-05 .news .news-list li:first-child{margin-top: 0;}
    .company .section-05 .news .news-list li a{padding: 15px; display: block; height: 90px;}
    .company .section-05 .news .news-list li a .date{font-size: 16px; color: #6177c8; font-weight: bold; display: flex; align-items: center; height: 20px; justify-content: space-between;}
    .company .section-05 .news .news-list li a .date img{ transition: all 0.4s ease; width: 20px;}
    .company .section-05 .news .news-list li a .text{font-size: 14px; color: #ffffff; font-weight: 400; margin-top: 5px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-wrod; height:35px;}
    .company .section-05 .news .news-list li:hover {transform: scale(1.02);}
    .company .section-05 .news .news-list li:hover a p.date span{transform: translateX(10%); transition: all 0.4s ease;}
    .company .section-05 .news .news-list li:hover a p.date span img{filter: brightness(10);}
    
    .news-contents{padding: 95px 0 40px;}
    .news-contents .date{font-size: 15px; color: #6177c8; font-weight: bold;}
    .news-contents .title{font-size: 16px; font-weight: bold; color: #222; line-height: normal; margin-top:5px;}
    .news-contents .news-article{margin-top: 35px; font-size: 15px;}
    .news-contents .news-article img{max-width: 100%;}
    .company .swiper-button-next,.company .swiper-button-prev{ width: 100px; height: 100px; background: url(../img/btn-next.png) no-repeat; top: 75px; margin-top: 0; display: none;}
    .company .swiper-button-next{right: 45px;}
    .company .swiper-button-prev{transform: rotateZ(180deg);}
    .company .swiper-button-next:after{display: none;}
    .company .swiper-button-prev:after{display: none;}
    .company .section-04 .swiper-button-next,.company .section-04 .swiper-button-prev{top: 130px;}
    .over-text{position: relative; overflow: hidden; }
    .over-text .over-text-con{transform: translateY(100%); display: block; opacity: 0;}
    .recruit-type dl{margin-top: 20px; color: #222;}
    .recruit-type dl:first-of-type{margin-top: 0px;}
    .recruit-type dl dt{opacity: 0.5;font-size: 16px;  font-weight: 500;}
    .recruit-type dl dd{font-size: 14px;   font-weight: 500; margin-top: 5px;}
    .register{margin-top: 20px; text-align: center;}
    .register a{display: flex; color: #fff; width: 200px; height: 40px; border-radius: 8px; background-color: #4d68cd; justify-content: center; align-items: center; font-size:13px; font-weight: 500; margin: auto;}
    
    .news .swiper-button-next,.news  .swiper-button-prev{transition: all 0.4s ease; width: 30px; height: 30px; background-size: cover; color: #fff; background: none; opacity: 0.5; display:flex; align-items: center;}
    .news .swiper-button-next{right: 0; bottom: 0; top: auto;}
    .news .swiper-button-prev{right: 30px; bottom: 0; top: auto; left: auto; transform:none;}
    .news .swiper-button-next i,.news  .swiper-button-prev i{color: #fff; font-size: 20px;}
    .news .swiper-pagination{position: static; color: #fff; font-size: 14px; font-weight: 500; margin-top: 10px; height: 30px; text-align: left; display: flex; align-items: center;}
    .news .swiper-pagination span{margin: 0 5px;}
    .news .swiper-button-next:hover,.news  .swiper-button-prev:hover{opacity:1; transform: none;}
    .news .swiper-button-next.swiper-button-disabled,.news  .swiper-button-prev.swiper-button-disabled{opacity: 0.2;}
    
}
.video-container {
    height:100%; display: flex; position:absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; overflow: hidden;  object-fit: cover;
}
.video-container .youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    object-fit: cover;
    pointer-events: none;
}
@media (max-width: 768px) {
    .video-container .youtube-wrapper {
        justify-content: center; overflow: hidden;  object-fit: cover;
        padding-bottom: 0; padding-top: 0; height: auto; position: static;
    }
}
.video-container .img-container, .video-container .youtube-wrapper .main-video {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3000px;
    height: 100%;
    margin-left: -1500px;
    z-index: 0;
}


.battery {width: 100%; overflow: hidden;}
.battery .section-01{height: 960px; background-color: #000; color: #fff; position: relative; width: 100%; perspective: 1000px;  margin-bottom: 100px;}
.battery .index-block{height: 100%; height: 100vh;background-color: #000; display: flex; align-items: flex-end;}
.battery .section-01 .vanadium-title{position: absolute; left: 0; width: 100%; height: 100%; bottom: 0; display: flex; align-items: center; perspective: 1000px; transform-style: preserve-3d;}
.battery .section-01 .vanadium-title .row{transform-style: preserve-3d; }
.battery .section-01 .vanadium-title .row{line-height: 90%; font-weight: 700; position: relative; justify-content:center; transform: translateY(-20%); }
.battery .section-01 .vanadium-title .row div span{font-size: 220px; letter-spacing: -7.37px; line-height: 90%; font-weight: 900;font-family:'Noto Sans KR', sans-serif; opacity: 0;}
.battery .section-01 .vanadium-title .row div.line1 span:first-of-type{position: relative; left: 10px;}
.battery .section-01 .vanadium-title .row div.line2 span.vanadium-periodic-table{width: 118px; height: 118px; background-image: url("../img/vanadium-periodic-table.svg"); background-size: cover;}
.battery .section-01 .vanadium-title .row div{display: flex; justify-content: center;}
.battery .section-01 .vanadium-title .row div:last-of-type{ justify-content: flex-end; margin-top: 20px; padding-right: 12px;}
.battery .section-01 .vanadium-img{height:calc(100% - 64px); position: absolute; left: 0; width: 100%; bottom: 0; overflow: hidden; object-fit: cover; object-position: center; opacity: 0;}
.battery .section-01 .vanadium-img #animation{
    display: flex;
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    overflow: hidden;
    height: 100%;
    object-fit: cover;
    object-position: center;
    justify-content: center; left: 50%; transform: translateX(-40%) translateY(150px); 
}
.battery .section-01 .vanadium-img .first-frame{
        display: flex;
        position: absolute;
        top: 0%;
        left: 0%;
        right: 0%;
        overflow: hidden;
        height: 100%;
        object-fit: cover;
        object-position: center;
        justify-content: center; left: 50%; transform: translateX(-40%) translateY(150px); 
    width: 1792px; height: 896px; z-index: 1;
    }

.battery .section-01 .vanadium-text{left: 0; width: 100%; height: 100%; bottom: 0; overflow: hidden; display: flex; align-items: flex-start; position: absolute;}
.battery .section-01 .vanadium-text .row{padding-left: 40px; }
.battery .section-01 .vanadium-text dl{margin-top: 150px;}
.battery .section-01 .vanadium-text dt{font-size: 45px; opacity: 0; transform: translateY(30px)}
.battery .section-01 .vanadium-text dd{font-size: 20px; font-weight: 500; opacity: 0.8; line-height: 1.6; width:395px; margin-top: 30px;  opacity: 0; transform: translateY(30px)}


.battery .section-02{ position: relative;}
.battery .section-02 .row{padding:0 0 200px 0;}
.battery .section-02 .battery-img{width: 100%; height:100%; left: 0; top: 0; display: flex; justify-content: center; max-width: 1440px; margin: auto; align-items: flex-end;}
.battery .section-02 .battery-img #battery-animation{width: 100%;}
.battery .section-02 .batteryText {position: absolute; left: 0; top: 0; width: 100%;  color: #222;}
.battery .section-02 .batteryText.text-01 .row{padding-left: 40px; margin-top: 150px; color: #fff;}
.battery .section-02 .batteryText .row{padding-left: 40px; margin-top: 130px;}
.battery .section-02 .batteryText .row h2{font-size: 45px; font-weight: 700; margin-bottom: 30px;}
.battery .section-02 .batteryText .row p{width: 440px;font-size: 22px; font-weight: bold;}

.battery .section-02 .battery-detial{overflow: hidden; width: 1040px; margin: 100px auto 0;}
.battery .section-02 .battery-detial ul{display: flex; flex-direction: column; height:833px; flex-wrap: wrap; justify-content: space-between}
.battery .section-02 .battery-detial ul li{overflow: hidden;}
.battery .section-02 .battery-detial ul li:nth-child(1){width: 599px; height: 476px;}
.battery .section-02 .battery-detial ul li:nth-child(2){width: 599px; height: 337px;}
.battery .section-02 .battery-detial ul li:nth-child(3){margin-left: auto; width: 421px; height: 833px;}
.battery .section-02 .battery-detial .image{margin-top: 20px; height: 585px; display: flex; overflow: hidden;}
.battery .section-02 .battery-detial img{transition: all 4s ease;}
.battery .section-02 .battery-detial img:hover{transform: scale(1.2);}
.battery .section-02 .battery-detial div{overflow: hidden; margin-top: 20px;}

.battery .section-03{background-color: #000; color: #fff;}
.battery .section-03 .row{padding: 200px 0;}
.battery .section-03 .battery-info{width: 996px; height: 706px;  margin: auto; position: relative;}
.battery .section-03 .battery-info ul li{position: absolute;}
.battery .section-03 .battery-info ul li .line{height: 1px; background-color: #fff; width: 100px; display: block;}
.battery .section-03 .battery-info ul li:nth-child(1){right: 19px; top:137px; text-align: right;}
.battery .section-03 .battery-info ul li:nth-child(1) .line{width: 375px; transform-origin: left; float: right;}
.battery .section-03 .battery-info ul li:nth-child(2){left: 7px; top:192px;}
.battery .section-03 .battery-info ul li:nth-child(2) .line{width: 423px; transform-origin: right}
.battery .section-03 .battery-info ul li:nth-child(3){right: 19px; top:382px; text-align: right;}
.battery .section-03 .battery-info ul li:nth-child(3) .line{width: 186px; transform-origin: left; float: right;}
.battery .section-03 .battery-info ul li:nth-child(4){left: 7px; top:468px;}
.battery .section-03 .battery-info ul li:nth-child(4) .line{width: 401px; transform-origin: right;}
.battery .section-03 .battery-info ul li dl{margin-top: 10px;}
.battery .section-03 .battery-info ul li dl dt{font-size: 18px; margin-bottom: 5px;}
.battery .section-03 .battery-info ul li dl dd{font-size: 15px;}

.battery .section-03{background-color: #000; color: #fff;}
.battery .section-03 .row{ padding: 200px 45px;}
.battery .section-03 .benefit-list{display: flex; flex-wrap: wrap; justify-content: space-between;}
.battery .section-03 .benefit{width: 510px; min-height: 440px; background-color: #1e1e1e; margin-top: 30px; padding: 35px 20px 40px 30px; position: relative;}
.battery .section-03 .benefit:nth-child(1){margin-top: 0;}
.battery .section-03 .benefit:nth-child(2){margin-top: 0;}
.battery .section-03 .benefit .title{font-size: 22px; font-weight: 500;}
.battery .section-03 .benefit .title strong{display: block; font-size: 50px; font-weight: 900;}
.battery .section-03 .benefit .text{margin-top: 15px; padding-right: 80px; font-size: 16px; color: #797979; font-weight: 500; line-height: 180%;}
.battery .section-03 .benefit .ico{position: absolute; right: 20px; top: 20px;}
.battery .section-03 .benefit .ico img{width: 100%;}
.battery .section-03 .benefit .data-source{position: absolute; bottom: 20px; right: 30px; color: #666666; font-size: 12px;}

.battery .section-05 {background-color: #000; color: #fff;}
.battery .section-05 .row{padding: 200px 45px;}
.battery .section-05 .time-title{display: flex; justify-content: center; font-size: 200px; font-weight: 900}
.battery .section-05 .time-title span{width: 920px; display: inline-block; text-align: right; height: 242px;}
.battery .section-05 .time-title .number{transform: scale(0); opacity: 0;}
.battery .section-05 .test-list{display: flex; flex-direction: column;}
.battery .section-05 .test-list h2{font-size: 45px; font-weight: 700; margin-top: 50px;}
.battery .section-05 .test-list h3{font-size: 22px; opacity: 0.8; font-weight: bold; margin-top: 22px;}
.battery .section-05 .test-list p{font-size: 32px; font-weight: bold; color: #939393;}
.battery .section-05 .test-list p.end-text{color: #fff; width: 330px; align-self: flex-end; margin-top: 60px;}
.battery .section-05 .test-list .block{position: relative; text-align: right; display: flex; justify-content: flex-end; margin-top: 60px;}
.battery .section-05 .test-list .block p:first-of-type{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 420px; text-align: left;}
.battery .section-05 .test-list p.text01{width: 450px; text-align: right; align-self: flex-end; margin-top: 60px;}
.battery .section-05 .test-list p.img01{text-align: right; margin-top: 115px;}
.battery .section-05 .test-list p.img02{margin-top: 60px;}


.battery .section-06 {background-color: #000; color: #fff;}
.battery .section-06 .row{padding: 200px 45px;}
.battery .section-06 h2{font-size: 45px; font-weight: bold;}
.battery .section-06 .speed{margin-top: 10px; position: relative;}
.battery .section-06 .speed .image img{position: relative; left: -180px;}
.battery .section-06 .speed .image:first-of-type{display: block;}
.battery .section-06 .speed .image:last-of-type{display: none;}
.battery .section-06 .speed dl{position: absolute; top: 87px; left: 450px; }
.battery .section-06 .speed dl dt{font-size: 44px;}
.battery .section-06 .speed dl dd{font-size: 22px; font-weight: 500; opacity: 0.8; margin-top: 43px; line-height: 200%;}
.battery .section-06 .speed-image{margin-top: 130px; margin-bottom: 120px;}
.battery .section-06 ul li{display: flex; margin-top: 60px; flex-direction: row-reverse; justify-content: space-between;}
.battery .section-06 ul li:last-of-type{flex-direction: row}
.battery .section-06 ul li .text{font-size: 22px; font-weight: bold; color: #d1d1d1; width: 400px;  margin-top: 80px;  line-height: 200%;}
.battery .section-06 ul li .image{width: 600px; display: flex;}
.battery .section-06 ul li:last-of-type .text{width: 480px;}
.battery .section-06 ul li:last-of-type .image{width: 510px;  display: flex;}
.battery .section-06 ul li img{width: 100%;}

.battery .section-07 .row{padding: 200px 0 435px;}
.battery .section-07 .side-image{position: absolute; width: 1440px; top: 380px; left: -150px; display: flex; justify-content: space-between; pointer-events:none; overflow: hidden;}
.battery .section-07 h2{text-align: center; font-size: 45px; font-weight: bold;}
.battery .section-07 .sub-title{opacity: 0.92; font-size: 22px; font-weight: bold; line-height: 160%; text-align: center; margin-top: 30px;}
.battery .section-07 ul{display: flex; justify-content: center; margin-top: 215px;}
.battery .section-07 ul li{display: flex; flex-direction: column; text-align: center; font-size: 16px; font-weight: bold; margin: 0 25px; opacity: 0;
transform: translateY(80px)}

.battery .section-08 {background: url(../img/bg-battery.jpg) no-repeat 50% 50%; background-size: cover; color: #fff;}
.battery .section-08 .row{padding: 200px 20px; }
.battery .section-08 h2{font-size: 45px;  font-weight: bold; width: 400px;}
.battery .section-08 .work{display: grid; gap: 15px; grid-template-columns: repeat(4, 1fr); margin-top: 100px; margin-right: 30%;}
.battery .section-08 .work li{height: 220px; border-radius: 14px; box-shadow: 0 10px 25px 13px rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.60); display: flex; flex-direction: column; align-items: center; justify-content:flex-start; padding-top: 15px;}

.battery .section-08 .work li .image {margin-top: 10px; margin-bottom: 10px;}
.battery .section-08 .work li .image img{width: 70px; height: 70px; object-fit: contain;}
.battery .section-08 .work li p{margin-top: 6px; }
.battery .section-08 .work li p.text{text-align: center; font-size: 20px;font-weight: bold;}
.battery .section-08 .work li p.link {margin-top: 7px;}
.battery .section-08 .work li p.link a{font-weight: 500; font-size: 16px; color: #6177c8;}
.battery .section-08 .work li p.link a i{margin-left: 5px; transition: all 0.4s ease;}
.battery .section-08 .work li p.link a:hover i{transform: translateX(5px)}

.battery .section-08 .applications-inquiry {margin-top: 3rem;}
.battery .section-08 .applications-inquiry .inquiry-contact{margin-top: 1rem;}
.battery .section-08 .applications-inquiry .inquiry-contact a {color: white;}

.vib-specification {background-color: #000; color: #fff; padding:200px 0;}
.vib-specification .row {padding: 0 40px;}
.vib-specification h2{font-size: 45px; font-weight: 700;}
.vib-specification .battery-tile{margin-top: 30px; display: flex; flex-wrap: wrap;font-weight: 500;}
.vib-specification .battery-tile > div{background-color: #3d3d3d; border: 1px solid #000; display: flex; padding: 20px; flex-direction: column; position: relative; transition: all 0.4s ease;}
.vib-specification .battery-tile > div.gradation .bg{transition: all 0.4s ease; background: rgb(0,44,145); background: linear-gradient(90deg, rgba(0,44,145,1) 0%, rgba(209,54,54,1) 100%); width: 100%; height: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;}
.vib-specification .battery-tile > div.gradation:hover .bg{opacity: 1;}
.vib-specification .battery-tile > div:nth-child(1){background-color: #3d3d3d; width: 353px; height: 170px;}
.vib-specification .battery-tile > div:nth-child(2){background-color: #545454; width: 353px; height: 170px;}
.vib-specification .battery-tile > div:nth-child(3){background-color: #3f3f3f; width: 354px; height: 210px;}
.vib-specification .battery-tile > div:nth-child(4){background-color: #545454; width: 353px; height: 210px; margin-top: -40px;}
.vib-specification .battery-tile > div:nth-child(5){background-color: #4a4a4a; width: 353px; height: 210px; margin-top: -40px;}
.vib-specification .battery-tile > div:nth-child(6){background-color: #3c3c3c; width: 354px; height: 170px;}
.vib-specification .battery-tile > div:nth-child(7){background-color: #3d3d3d; width: 530px; height: 220px;}
.vib-specification .battery-tile > div:nth-child(8){background-color: #4a4a4a; width: 530px; height: 220px;}
.vib-specification .battery-tile .title{opacity: 0.5;font-size: 18px; display: flex;pointer-events: none;}
.vib-specification .battery-tile .sub-title{font-size: 14px; opacity: 0.5; margin-top: 7px; display: flex; line-height: 100%;pointer-events: none;}
.vib-specification .battery-tile .info{font-size: 40px; margin-top: 10px; line-height: 100%;pointer-events: none;}
.vib-specification .battery-tile .info {line-height: 100%;}
.vib-specification .battery-tile .info .text-small {font-size: 70%;}
.vib-specification .battery-tile .info div{font-size: 14px;}
.vib-specification .battery-tile > div .info {transition: all 0.4s ease;}
.vib-specification .battery-tile > div:hover .info {transform: translateY(20px)}

.vib-specification .battery-tile .charge{display:flex; margin-top: 25px; }
.vib-specification .battery-tile .charge li{width: 20px; height: 48px; background: rgba(255,255,255,0.1); margin-right: 6px; display: block; overflow: hidden; position: relative;}
.vib-specification .battery-tile .charge li span{ display: block; width: 100%; height: 100%; background-color: #41b367; opacity: 0;}
.vib-specification .battery-tile .charge li:nth-child(1) span{background-color:#fe4a4a;}
.vib-specification .battery-tile .charge li:nth-child(2) span{background-color:#ffc34a;}
.vib-specification .battery-tile .charge li:nth-child(3) span{background-color:#ffc34a;}
.vib-specification .battery-tile .charge li:nth-child(4) span{background-color:#ffc34a;}
.vib-specification .battery-tile .temp{margin-top: 38px;display: flex; height: 35px; align-items: center; width: 360px; justify-content: space-between; margin-left: auto; margin-right: auto; font-size: 35px; opacity: 0.8; line-height: 100%;}
.vib-specification .battery-tile .temp .line{height: 2px; background-color: #fff; display: block; width: 170px; }
.vib-specification .battery-tile .temp span{display: block; line-height: 100%;}


@media (max-width: 768px) {
    .battery {width: 100%; overflow: hidden;}
    .battery .section-01{height: 100vh; background-color: #000; color: #fff; position: relative; width: 100%; perspective: 1000px; margin-bottom:0px;}
    .battery .index-block{height: 100%; height: 100vh;background-color: #000; display: flex; align-items: flex-end;}
    .battery .section-01 .vanadium-title{position: absolute; left: 0; width: 100%; height: 100%; bottom: 0; display: flex; align-items: flex-start; perspective: 1000px; transform-style: preserve-3d; padding-top: 135px;}
    .battery .section-01 .vanadium-title .row{transform-style: preserve-3d;  }
    .battery .section-01 .vanadium-title .row{line-height: 90%; font-weight: 700; position: relative; justify-content:center; transform: translateY(0%); }
    .battery .section-01 .vanadium-title .row div span{font-size: 60px; letter-spacing: -3px; line-height: 100%;font-weight: 900;font-family:'Noto Sans KR', sans-serif;}
    .battery .section-01 .vanadium-title .row div.line1 span:first-of-type{position: relative; left: 0px;}
    .battery .section-01 .vanadium-title .row div.line2 span.vanadium-periodic-table{width: 60px; height: 60px;}
    .battery .section-01 .vanadium-title .row div{display: flex; justify-content:center;}
    .battery .section-01 .vanadium-title .row div:last-of-type{ justify-content:center; padding-right:0px; padding-left: 240px; }
    .battery .section-01 .vanadium-img{height:calc(100% - 64px); position: absolute; left: 0; width: 100%; bottom: 0; overflow: hidden; object-fit: cover; object-position: center;  opacity: 0;}
    .battery .section-01 .vanadium-img #animation{
        display: flex;
        position: absolute;
        top: 0%;
        left: 0%;
        right: 0%;
        overflow: hidden;
        height: 100%;
        object-fit: cover;
        object-position: center;
        justify-content: center; left: 40%; transform: translateX(-40%) translateY(0px);
    }
    
    .battery .section-01 .vanadium-text{left: 0; width: 100%; height: 100%; bottom: 0; overflow: hidden; display: flex; align-items:flex-start; position: absolute;}
    .battery .section-01 .vanadium-text .row{padding-left: 0px; padding-top: 64px; padding-left: 40px; padding-right: 40px;}
    .battery .section-01 .vanadium-text dl{margin-top: 60px; text-align: center;}
    .battery .section-01 .vanadium-text dt{font-size: 24px; opacity: 0; transform: translateY(0px); }
    .battery .section-01 .vanadium-text dd{font-size: 18px; font-weight: 500; opacity: 0.8; line-height: 1.6; width:auto;  margin-top: 60px;  opacity: 0; transform: translateY(30px)}
    .battery .section-01 .vanadium-text dd:first-of-type{margin-top: 40px;}
    
    .battery .section-02{ position: relative; background-color: #f2f2f2; overflow: hidden;}
    .battery .section-02 .row{padding:0 20px;}
    .battery .section-02 .battery-block{height: 100%; position: relative; margin-top: 50vh;}
    .battery .section-02 .battery-img{width: 100%; height:100%; left: 0; top: 0; display: flex; justify-content: center;}
    .battery .section-02 .battery-img #battery-animation{ width: 100%;}
    .battery .section-02 .batteryText {position: absolute; left: 0; top: 0; width: 100%; color: #222;}
    .battery .section-02 .batteryText.text-01{position: absolute; top: calc(-50vh + 40px);}
    .battery .section-02 .batteryText.text-02{position: absolute;  top: calc(-50vh + 20px);}
    .battery .section-02 .batteryText.text-01 .row{padding: 0 65px; margin-top:0px; color: #222; text-align: center;}
    .battery .section-02 .batteryText .row{margin-top:0px; padding: 0 30px; text-align: center;}
    .battery .section-02 .batteryText .row h2{font-size: 24px; font-weight: 700; margin-bottom: 40px;}
    .battery .section-02 .batteryText .row p{width:auto;font-size: 18px; font-weight: bold;}

    .battery .section-02 .battery-detial{ padding: 0;  overflow: hidden; width: auto; margin-top: 0px;}
    .battery .section-02 .battery-detial ul{display: flex; flex-direction: column; height:auto; flex-wrap: wrap; justify-content: space-between}
    .battery .section-02 .battery-detial ul li{overflow: hidden; margin-bottom: 20px;}
    .battery .section-02 .battery-detial ul li:nth-child(1){width:auto; height:auto;}
    .battery .section-02 .battery-detial ul li:nth-child(2){width:auto; height:auto;}
    .battery .section-02 .battery-detial ul li:nth-child(3){margin-left: auto; width:auto; height:auto;}
    .battery .section-02 .battery-detial .image{ margin-bottom: 20px; height:auto; display: flex; overflow: hidden;}
    .battery .section-02 .battery-detial img{transition: all 4s ease; width: 100%;}
    .battery .section-02 .battery-detial img:hover{transform: scale(1.2);}
    .battery .section-02 .battery-detial div{margin-bottom: 20px; margin-top: 0;}
    
    
    
    .battery .section-03{background-color: #000; color: #fff;}
    .battery .section-03 .row{padding: 200px 0; overflow: hidden;}
    .battery .section-03 .battery-info{width: auto; height: auto;  margin: auto; position: relative;}
    .battery .section-03 .battery-info img{width:100%;}
    .battery .section-03 .battery-info ul{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .battery .section-03 .battery-info ul li{position: absolute; width: 100%;}
    .battery .section-03 .battery-info ul li .line{height: 1px; background-color: #fff; width: 100px; display: block;}
    .battery .section-03 .battery-info ul li:nth-child(1){right: 4%; top:81%; text-align: right;}
    .battery .section-03 .battery-info ul li:nth-child(1) .line{width: 72%; transform-origin: left; float: right;}
    .battery .section-03 .battery-info ul li:nth-child(2){left: 4%; top:9%;}
    .battery .section-03 .battery-info ul li:nth-child(2) .line{width: 68%; transform-origin: right}
    .battery .section-03 .battery-info ul li:nth-child(3){right: 4%; top:52%; text-align: right;}
    .battery .section-03 .battery-info ul li:nth-child(3) .line{width: 62%; transform-origin: left; float: right;}
    .battery .section-03 .battery-info ul li:nth-child(4){left: 4%; top:35%;}
    .battery .section-03 .battery-info ul li:nth-child(4) .line{width: 71%; transform-origin: right;}
    .battery .section-03 .battery-info ul li dl{margin-top: 10px; text-shadow: 0px 0px 2px #000;}
    .battery .section-03 .battery-info ul li dl dt{font-size: 15px; margin-bottom: 5px;}
    .battery .section-03 .battery-info ul li dl dd{font-size: 12px;}

    .battery .section-03{background-color: #000; color: #fff;}
    .battery .section-03 .row{ padding: 0px;}
    .battery .section-03 .benefit-list{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 20px; flex-direction: column;}
    .battery .section-03 .benefit{width:auto; height:auto; background-color: #1e1e1e; margin-top: 20px; padding:20px; position: relative;}
    .battery .section-03 .benefit:nth-child(1){margin-top: 20px;}
    .battery .section-03 .benefit:nth-child(2){margin-top: 20px;}
    .battery .section-03 .benefit .title{font-size: 20px; font-weight: 500;}
    .battery .section-03 .benefit .title strong{display: block; font-size: 42px; font-weight: 900;}
    .battery .section-03 .benefit .text{margin-top: 15px; padding-right: 0px; font-size: 16px; color: #797979; font-weight: 500; line-height: 180%;}
    .battery .section-03 .benefit .ico{position: absolute; right: 20px; top: 15px; width: 80px; height: 80px;}
    .battery .section-03 .benefit .data-source{position: static; display: block; margin-top: 15px; text-align: right; font-size: 12px;}
    
    .battery .section-05 {background-color: #000; color: #fff;}
    .battery .section-05 .row{padding:100px 0 40px;}
    .battery .section-05 .time-title{display: flex; justify-content: center; font-size: 60px; font-weight: 900; }
    .battery .section-05 .time-title span{width:auto; display: inline-block; text-align: right; height: auto;  margin-right: 5px;}
    .battery .section-05 .time-title .number{transform: scale(0); opacity: 0;}
    .battery .section-05 .test-list{display: flex; flex-direction: column; padding: 0 20px; }
    .battery .section-05 .test-list h2{font-size: 24px; font-weight: 700; margin-top: 50px; text-align: center;}
    .battery .section-05 .test-list h3{font-size: 18px; opacity: 0.8; font-weight: bold; margin-top:15px; text-align: center; }
    .battery .section-05 .test-list p{font-size: 20px; font-weight: bold; color: #939393; text-align: center;}
    .battery .section-05 .test-list p.end-text{color: #fff; width: auto; align-self: flex-end; margin-top: 30px;}
    .battery .section-05 .test-list .block{position: relative; text-align:center; display: flex; flex-direction: column; justify-content: flex-end; margin-top:0px;}
    .battery .section-05 .test-list .block p:first-of-type{position: static; left: 0; top: 50%; transform: translateY(0%); width:auto; text-align: center; padding: 0 20px; margin-top: 30px; margin-bottom: 30px;}
    .battery .section-05 .test-list p.text01{width:auto; text-align: center; align-self: flex-end; margin-top: 110px; padding: 0 20px; }
    .battery .section-05 .test-list p.img01{text-align: right; margin-top:65px;}
    .battery .section-05 .test-list p.img02{margin-top: 60px;}
    .battery .section-05 .test-list img{width: 100%;}
    
    .battery .section-06 {background-color: #000; color: #fff;}
    .battery .section-06 .row{padding: 60px 20px;}
    .battery .section-06 h2{font-size: 24px; font-weight: bold;  text-align: center; padding: 0 85px;}
    .battery .section-06 .speed{margin-top: 30px; position: relative;}
    .battery .section-06 .speed .image img{position: relative; left:auto; width: 100%;}
    .battery .section-06 .speed .image:first-of-type{display:none;}
    .battery .section-06 .speed .image:last-of-type{display: block;}
    .battery .section-06 .speed dl{position: static; top: 87px; left: 450px;text-align: center; margin-top: 20px; padding-left: 30px; padding-right: 30px;}
    .battery .section-06 .speed dl dt{font-size: 24px;}
    .battery .section-06 .speed dl dd{font-size: 20px; font-weight: 500; opacity: 0.8; margin-top: 43px; line-height:normal; margin-top: 30px;}
    .battery .section-06 .speed-image{margin-top: 60px; margin-bottom: 120px;}
    .battery .section-06 .speed-image img{width: 100%;}
    .battery .section-06 ul {width: 100%;}
    .battery .section-06 ul li{display: flex;  flex-direction: column;  margin-top: 50px; justify-content: space-between;}
    .battery .section-06 ul li:last-of-type{flex-direction: column;}
    .battery .section-06 ul li .text{font-size: 16px; font-weight: bold; color: #d1d1d1; width: auto;  margin-top: 30px;  line-height: normal;}
    .battery .section-06 ul li .image{width: auto; display: block;}
    .battery .section-06 ul li .image img{width: 100%; }
    .battery .section-06 ul li:last-of-type .text{width: auto;}
    .battery .section-06 ul li:last-of-type .image{width: auto;  display: block;}
    .battery .section-06 ul li img{width: 100%;}
    
    .battery .section-07 .row{padding: 60px 0;}
    .battery .section-07 .side-image{display: none;}
    .battery .section-07 h2{text-align: center; font-size: 24px; font-weight: bold; }
    .battery .section-07 .sub-title{opacity: 0.92; font-size: 16px; font-weight: bold; line-height: 160%; text-align: center; margin-top: 20px;}
    .battery .section-07 ul{display: flex; justify-content: flex-start; margin-top: 75px; flex-wrap: wrap; padding: 0 25px;  }
    .battery .section-07 ul li{display: flex; flex-direction: column; text-align: center; font-size: 16px; font-weight: bold; opacity: 0; transform: translateY(80px);  width: 50%; padding: 0 20px; margin: 0;}
    
    .battery .section-08 {background: url(../img/bg-battery.jpg) no-repeat 50% 50%; background-size: cover; color: #fff;}
    .battery .section-08 .row{padding: 60px 20px 30px 20px; }
    .battery .section-08 h2{font-size: 24px;  font-weight: bold; width:auto; padding: 0 60px; text-align: center; height: auto;}
    .battery .section-08 .work{grid-template-columns: repeat(2, 1fr); margin-top:30px; margin-right: 0;}
    .battery .section-08 .work li{ height: 200px; padding-top:20px; padding-bottom:20px;}
    .battery .section-08 .work li.invisible{display: none;}

    .battery .section-08 .work li p{margin-top: 11px; }
    .battery .section-08 .work li p.text{ font-size:16px;font-weight: bold;}
    .battery .section-08 .work li p.link {margin-top: 7px;}
    .battery .section-08 .work li p.link a{font-weight: 500; font-size: 12px; color: #6177c8;}
    .battery .section-08 .work li p.link a i{margin-left: 5px; transition: all 0.4s ease;}
    .battery .section-08 .work li p.link a:hover i{transform: translateX(5px)}
    .battery .section-08 .work li .image{width: 80px; height: 80px;}
    .battery .section-08 .work li .image img{width: 100%;}
    
    .vib-specification {background-color: #000; color: #fff; padding:0;}
    .vib-specification .row{ padding:80px 20px 40px 20px;}
    .vib-specification h2{font-size: 24px; font-weight: 700;  text-align: center; margin-bottom: 30px;}
    .vib-specification .battery-tile{margin-top:0px; display: flex; flex-wrap: wrap;font-weight: 500; flex-direction: column; width: 100%;}
    .vib-specification .battery-tile > div{background-color: #3d3d3d; border: 1px solid #000; display: flex; padding: 20px; flex-direction: column; position: relative; transition: all 0.4s ease;}
    .vib-specification .battery-tile > div.gradation .bg{transition: all 0.4s ease; background: rgb(0,44,145); background: linear-gradient(90deg, rgba(0,44,145,1) 0%, rgba(209,54,54,1) 100%); width: 100%; height: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 1;}
    .vib-specification .battery-tile > div.gradation:hover .bg{opacity: 1;}
    .vib-specification .battery-tile > div:nth-child(1){background-color: #3d3d3d; width: auto; height: auto;}
    .vib-specification .battery-tile > div:nth-child(2){background-color: #545454; width: auto; height: auto;}
    .vib-specification .battery-tile > div:nth-child(3){background-color: #3f3f3f; width: auto; height: auto;}
    .vib-specification .battery-tile > div:nth-child(4){background-color: #545454; width: auto; height: auto;}
    .vib-specification .battery-tile > div:nth-child(5){background-color: #3f3f3f; width: auto; height: auto;}
    .vib-specification .battery-tile > div:nth-child(6){background-color: #545454; width: auto; height: auto;}
    .vib-specification .battery-tile > div:nth-child(7){background-color: #3f3f3f; width: auto; height: auto;}
    .vib-specification .battery-tile > div:nth-child(8){background-color: #545454; width: auto; height: auto;}
    
    .vib-specification .battery-tile > div{width: auto !important; height: auto !important; margin-top: 0 !important;}
    .vib-specification .battery-tile .title{opacity: 0.5;font-size: 18px; display: flex;pointer-events: none; font-weight: 400;}
    .vib-specification .battery-tile .sub-title{font-size: 14px; opacity: 0.5; margin-top: 7px; display: flex; line-height: 100%;pointer-events: none;}
    .vib-specification .battery-tile .info{font-size: 35px; margin-top: 7px; line-height: 100%;pointer-events: none; font-weight: 500;}
    .vib-specification .battery-tile .info {line-height: 100%;}
    .vib-specification .battery-tile > div .info {transition: all 0.4s ease;}
    .vib-specification .battery-tile > div:hover .info {transform: none;}

    .vib-specification .battery-tile .charge{display:flex; margin-top: 20px; justify-content: space-between; }
    .vib-specification .battery-tile .charge li{width: 16px; height: 40px;  background: rgba(255,255,255,0.1); margin-right:0px; display: block; overflow: hidden; position: relative;}
    .vib-specification .battery-tile .charge li span{ display: block; width: 100%; height: 100%; background-color: #41b367; opacity: 1;}
    .vib-specification .battery-tile .charge li:nth-child(1) span{background-color:#fe4a4a;}
    .vib-specification .battery-tile .charge li:nth-child(2) span{background-color:#ffc34a;}
    .vib-specification .battery-tile .charge li:nth-child(3) span{background-color:#ffc34a;}
    .vib-specification .battery-tile .charge li:nth-child(4) span{background-color:#ffc34a;}
    .vib-specification .battery-tile .temp{margin-top: 38px;display: flex; height: 35px; align-items: center; width: 100%; justify-content: space-between; margin-left: auto; margin-right: auto; font-size: 35px; opacity: 0.8; line-height: 100%;}
    .vib-specification .battery-tile .temp .line{height: 2px; background-color: #fff; display: block; width: 120px; }
    .vib-specification .battery-tile .temp span{display: block; line-height: 100%;}
}

.battery-info-m{display:none; flex-direction: column;}
.battery-info-m img{width: 100%;}
@media (max-width: 768px) {
    .battery-info-m{display: flex;} 
}

/* loading */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
    opacity:1;
    font-size: 30px;
    font-weight: 700;
    opacity: 0;
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #222;
  font-family: "Quattrocento Sans", sans-serif;
}
.loading-text span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
          animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
          animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
          animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
          animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
          animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
          animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
          animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@-webkit-keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

@keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}



.policy-contents{padding: 190px 0 100px;}
.policy-contents .title{font-size: 28px; font-weight: bold; color: #222; line-height: normal; padding-right: 200px;}
.policy-contents .policy-article{margin-top: 50px; font-size: 28px; font-weight: 400;}
.policy-contents .policy-article *{line-height: 160%;}
.policy-contents .policy-article dl{margin-top: 50px;}
.policy-contents .policy-article dl dt{font-weight: 500;}
.policy-contents .policy-article dl dd{font-size: 20px;}

@media (max-width: 768px) {
    .policy-contents{padding: 95px 0 40px;}
    .policy-contents .title{font-size: 16px; font-weight: bold; color: #222; line-height: normal; padding-right: 0px; width: 100%;}
    .policy-contents .policy-article{margin-top: 20px; font-size: 15px; opacity: 0.8;}
    .policy-contents .policy-article dl{margin-top: 10px;}
    .policy-contents .policy-article dl dt{font-weight: 500;}
    .policy-contents .policy-article dl dd{font-size: 12px;}
}

.youtube{position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);}
.youtube a{font-size: 18px; font-weight: bold; color: #fff; display: flex; align-items: center;}
.youtube a img{margin-right: 5px;}
@media (max-width: 768px) {
    .youtube{position: absolute; left:0px; bottom:15%; transform: scale(0.8); width: 100%; display: flex; justify-content: center;}
    #header.nav-up{top: 0;}
}


.hr-wrapp{padding-top: 64px; background-color:#e9e9e9; font-weight: 400;}
.hr-wrapp .row{padding-top: 40px; padding-bottom: 20px; display: flex; flex-direction:column; font-weight: 14px; align-items: flex-end; width: 1140px; padding-bottom: 50px;}
.form-list{width: calc(100%); }
.form-confirm{ width: 270px;background-color: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 1px 1px rgb(0 0 0 / 5%);}
.form-block{background-color: #fff; padding: 30px; border-radius: 4px; box-shadow: 0 1px 1px rgb(0 0 0 / 5%); margin-bottom: 20px;}
.form-block .title{margin-bottom: 5px;}
.form-block .form-line{margin-bottom: 15px;}
.form-confirm a{display: flex; background-color: #e5e5e5; justify-content: center; height: 34px; align-items: center; transition: all 0.2s ease; line-height: 100%;}
.form-confirm a:hover{background-color: #3700ff; color: #fff;}

.profile{display: flex;}
.profile .photo{display: flex; width: 180px; flex-direction: column; margin-right: 20px;}
.profile .photo .image{display: flex; width: 180px; height: 180px; border: 1px solid #ddd; background: url(../img/img-loto-hr.png) no-repeat 50% 50%; background-size: 80%; background-color: #e9e9e9;}
.profile .photo .image img{width: 100%; object-fit: cover;}
.profile .photo .add-photo{margin-top: 10px; position: relative;}
.profile .photo .add-photo input[type=file]{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; border: 1px solid #f00; cursor: pointer; z-index: 10;}
.profile .photo .add-photo button{text-align: center; width: 100%; height: 30px;}
.profile .profile-list{flex: 1;}
.profile .profile-list p.no-save{color: #3700ff;}

.hr-wrapp input[type=text]{height: 30px; font-size: 12px; line-height: 100%;}
.hr-wrapp select{height: 30px; font-size: 12px; line-height: 100%;}
.hr-wrapp .btn-default{transition: all 0.2s ease; display: inline-flex;justify-content: center; height: 30px; align-items: center;background-color: #3700ff; color: #fff; padding: 0 30px; font-size: 12px; line-height: 100%; min-width: 100px;}
.hr-wrapp .btn-cancel{transition: all 0.2s ease; display: inline-flex;justify-content: center; height: 30px; align-items: center;background-color: #444; color: #fff; padding: 0 30px; font-size: 12px; line-height: 100%; min-width: 100px;}

.form-title{display: flex; justify-content: space-between;}
.form-title img{margin-right: 10px;}
.form-title p{font-size: 14px; font-weight: 500; display: flex; align-items: center;}
.form-block .form{background-color: #fbfbfb; padding: 20px; margin-top: 20px; position: relative;}
.editor-block{margin-top: 20px; border: 1px solid #ddd;}

.result-list .result{ border-bottom: 1px solid #e9e9e9; margin-top: 30px; padding-bottom: 20px;}
.result-list .result .date{font-size: 12px; color: #3700ff; font-weight: 500;}
.result-list .result .edu{display: flex; align-items: center; justify-content: space-between;}
.result-list .result .edu li{ color: #555;}
.result-list .result .edu li:nth-child(1) b{font-size: 20px; margin-right: 20px;}
.result-list .result .edu li:nth-child(2){margin-left: 100px;}
.result-list .editor-result{background-color: #eee; padding: 20px; margin-top: 20px; }

.form-block .total-career{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px; margin-top: 20px;}
.form-block .total-career span{color: #3700ff;}

.chart-result {border-bottom: 1px solid #eee; }
.chart-result .result-con{display: flex; padding: 30px 50px 20px 50px; align-items: center;}
.chart-result .title{border-right: 1px solid #ccc; margin: 0; padding-right: 10px;}
.chart-result .chart{margin: 0 40px;}
.chart-result .chart .chart-wrap{width: 300px; height: 8px; background-color: #eee; position: relative;}
.chart-result .chart .progress-dot{position: absolute;
    top: 3px;
    width: 3px;
    background-color: #333;
    height: 3px;
    border-radius: 50%;}
.chart-result .chart .chart-bar{background-color:#3700ff; height: 100%; position: absolute;}
.hr-wrapp .hr-mobile{display: flex; justify-content: center; align-items: center; height:calc( 100vh - 228px - 64px); display: none;}
@media (max-width: 768px) {
   .hr-wrapp .hr-register{display: none;}   
    .hr-wrapp .hr-mobile{display:flex;}
}

.form-info{position: absolute; right: 20px; top: 20px;}
.form-info .guide button{font-size: 12px; color: #3700ff; display: flex; align-items: center;}
.form-info .guide button img{width: 12px; margin-right: 5px;}
.form-info .guide-layer{position: absolute; border: 1px solid #ccc; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,0.3); width: 350px; top:30px; right: -20px; padding: 10px 15px; font-size: 12px;  z-index: 10; display: none;}

.editor-info{border: 1px solid #ddd; border-top: none; padding: 15px 20px; background-color: #f5f5f5;}
.editor-info dl{ font-size: 12px;}
.editor-info dl dt{font-weight: 400; margin-bottom:5px;}
.editor-info dl dd ul{list-style-type: square; margin-left: 15px;}

.hr-wrapp.hr-view{padding-top: 0;}
.hr-wrapp.hr-view .hr-register{margin-top: 0; width: 1140px;}
.hr-wrapp.hr-view .hr-register .add-photo{display: none;}
.hr-wrapp.hr-view .hr-register .type-text{display: none;}
.hr-wrapp.hr-view .hr-register .form-list{width: 100%;}
.hr-wrapp.hr-view .form-block .form-title button{display: none;}
.hr-wrapp.hr-view .form-block .form{display: none;}
.hr-wrapp.hr-view .form-block input{pointer-events: none;}
.hr-wrapp.hr-view .form-block input[type=radio]{pointer-events: none;}
.hr-wrapp.hr-view .form-block select{pointer-events: none;}
@media (max-width: 768px) {
   .hr-wrapp.hr-view .hr-register{display:block;}   
}

.battery .section-03 .benefit-list.en-sub .benefit{height: 500px;}
.battery .section-03 .benefit-list.en-sub .benefit .text{padding-right: 0;}

.alert-msg{position: fixed; z-index: 10;  text-align: center; display: flex; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); align-items: center; justify-content: center; display: none; pointer-events: none;}
.alert-msg .alert-con{border: 1px solid #ccc; background-color: #fff; padding: 30px; box-shadow: 0 0 10px rgba(0,0,0,.4); border-radius:5px;}
.alert-msg p:last-of-type{text-align: center; margin-top: 30px; }

.alert-msg.show{display: flex; pointer-events: auto;}

.caution{font-size: 11px; color:#3700ff; margin-top: 5px;}