header{position: fixed; z-index: 999; width: 100%;}
header.on{background-color: #f7f7f7;}
header.on::after{content: ""; display: block; width: 100%; height: 1px; background-color: #ccc; position: absolute; bottom: 0;}
header .h-in{display: flex; justify-content: space-between; align-items: center; padding: 32px 52px; transition: 0.3s;}
header.on .h-in{padding: 0 36px;}
header.on .h-in h1 a img{width: 70%;}
header .h-in nav {display: none;}
header.on .h-in nav{display: block;}
header .h-in nav .navi{display: flex;}
header .h-in nav .navi li{text-align: center;  position: relative;}
header .h-in nav .navi a{color: #fff; font-size: 18px; padding: 32px 25px; display: block; position: relative; transition: 0.3s;}
header.on .h-in nav .navi a{padding: 25px 25px; color: #252c34;}
header .h-in nav .navi > li > a::after{content: ""; display: block; width: 0; height: 4px; background-color: #0f9fff; position: absolute; bottom: 0; left: 0; transition: 0.3s;}
header .h-in nav .navi > li > a:hover::after{width: 100%;}
header .h-in nav .navi li .depth{display: none; width: 100%; background-color: #fff; position: absolute; left: 0; right: 0; top: 100%; z-index: 999; height: 350px; padding: 25px 5px; word-break: keep-all;  box-sizing: border-box;  border-right: 1px solid #e6e6e6;}
header .h-in nav .navi li:nth-of-type(1) .depth{border-left: 1px solid #e6e6e6;}
header .h-in nav .navi li:nth-of-type(3) .depth{background-image: url('/img/gnb_product_bg.jpg'); background-repeat: no-repeat; background-size: cover; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 0; } 
header .h-in nav .navi li .depth li a{color: #000; padding: 11px 0; font-size: 16px; position: relative; transition: 0.3s;}
header .h-in nav .navi li .depth::after{content: ""; display: block; width: 0; height: 4px; background-color: #0f9fff; position: absolute; top: -4px; left: 0; transition: 0.3s;}
header .h-in nav .navi li .depth:hover::after{width: 100%;}
/* header .h-in nav .navi li .depth li a::after{content: ""; display: block; width: 0; height: 2px; background-color: #0f9fff; position: absolute; bottom: 0; left: 0; transition: 0.3s;} */
header .h-in nav .navi li .depth li a:hover{color: #0f9fff;}
header .h-in .rigmenu {display: flex; align-items: center; }
header .h-in nav .navi li:nth-of-type(3) .depth li{position: relative; top: 0; left: 0; width: 100%; height: 100%;}
header .h-in nav .navi li:nth-of-type(3) .depth li a{position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
header .h-in nav .navi li:nth-of-type(3) .depth li a strong{display: block; font-size: 25px; color: #34addb; font-family: 'HDharmony B';margin-top: 15px;} 
header .h-in nav .navi li:nth-of-type(3) .depth li a span{display: block; font-size: 15px; font-weight: 800;}
header .h-in .rigmenu .lang {background-color: #fff; border-radius: 30px; display: flex; align-items: center; justify-content: center; width: 158px; height: 57px;}
header .h-in .rigmenu .lang img{margin-right: 15px; vertical-align: middle;}
header .h-in .rigmenu .lang ul {display: flex;}
header .h-in .rigmenu .lang ul li a{color: #2c2c2c; font-size: 15px; font-family: 'Pretendard'; font-weight: bold;}
header .h-in .rigmenu .lang ul li:first-child{margin-right: 8px;}
header .h-in .rigmenu .allbtn{width: 58px; height: 58px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; display: none;
/* background-color: rgba(0, 0, 0, 25%); */
}
header .h-in .rigmenu .allbtn .allmenu{position: relative;  display: block;width: 33px;height: 12px;position: relative; font-family: 'HDharmony B';}
header .h-in .rigmenu .allbtn .allmenu > span{background-color: #fff; width: 100%; height: 2px; position: absolute; transition: 0.3s;}
header .h-in .rigmenu .allbtn .allmenu > span:nth-of-type(1){top: 0;}
header .h-in .rigmenu .allbtn .allmenu > span:nth-of-type(2){top: 80%; width: 80%;}
header .h-in .rigmenu .allbtn > span{color: #fff; font-size: 12px; display: block; margin-top: 10px; font-family: 'Pretendard';}
header .depbg{width: 100%; background-color: #F7f7f7; position: absolute; top: 100%; left: 0; right: 0; z-index: 9; height: 350px; display: none;}

.mainwrap{position: relative;}
.main_slide .swiper-slide {background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; overflow: hidden; width: 100%;}
.mainwrap header{position: absolute; bottom: 0; width: 100%;}
.mainwrap header .h-in {justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 45%); padding: 0;}
.mainwrap header .h-in h1{display: none;}
.mainwrap header .h-in nav{display: flex;}
.mainwrap header .h-in .rigmenu{display: none;}

.main_slide .prbar{position: absolute; bottom: 150px;left: 50%;transform: translateX(-50%); z-index: 999; display: flex; color: #fff; align-items: center; font-size: 18px; color: #c4c4c4;}
.main_slide .prbar span.changenum{color: #fff; margin-left: 20px;}
.main_slide .progress{ background-color: rgba(225, 225, 225, 0.4); height: 2px; width: 225px;  left: 0; position: relative; margin: 0 25px;}
/* .main_slide .progress .pbar {position: absolute; top: 0; left: 0; background-color: #fff; width: 10px; height: 2px;} */

/* @keyframes bgani {
    0%{
        background-size: 115% 115%;
    }
    100%{
        background-size: 100% 100%;
    }
} */


/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
        수정내용
    before을 pbar로 수정
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.main_slide .progress .pbar{content:  "";display: block;position: absolute;
left: 0; width: 0; height: 2px; background-color: #fff;}
/* .progress.p-ani::before{width: 100%;} */
.main_slide .progress.animate .pbar{width: 100%;}


.mainwrap header.fixed {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
    bottom: auto;
}

@media screen and (max-width: 1500px){
    header.on .h-in nav .navi a{padding: 45px 30px;}
    header.on .h-in h1 a img{width: 80%;}
}

@media screen and (max-width: 1250px){
    header.on .h-in{padding: 0 25px;}
    header.on .h-in h1 a img{width: 60%;}
    header.on .h-in nav .navi a{padding: 45px 20px;}
    header .h-in {
        /* justify-content: flex-start; */
    }
    header .h-in nav .navi a{padding: 30px 20px;}
    /* header .h-in .rigmenu .lang{margin-right: 15px;} */
    
}

@media screen and (max-width: 900px){
    header.on .h-in{padding: 15px 25px;}
    header.on .h-in nav{display: none;}
    .mainwrap header{display: none;}
    header .h-in{padding: 30px 20px;}
    header .h-in h1 a img{width: 60%;}
    header .h-in .rigmenu .lang{width: 110px; height: 35px; margin-right: 10px;}
    header .h-in .rigmenu .lang img{margin-right: 10px;}
    header .h-in .rigmenu .lang ul li a{font-size: 13px;}
    header .h-in .rigmenu .allbtn{display: flex;}
    header .h-in .rigmenu .allbtn{width: 40px; height: 40px;}
    header .h-in .rigmenu .allbtn > span{margin-top: 7px;}
    header .h-in .rigmenu .allbtn .allmenu{width: 30px; height: 9px;}
}

@media screen and (max-width: 500px){
    .main_slide .prbar{font-size: 16px; bottom: 34px;}
    .main_slide .progress{margin: 0 12px; width: 105px;}
    .main_slide .prbar span.changenum{margin-left: 8px;}
}


.mob_nav{display: none;}


@media screen and (max-width: 900px){
    .mob_nav{display: block; transform: translateX(100%); background-color: #fff; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; height: 100vh; transition: 0.3s;}
    .mob_nav.on{transform: translateX(0);}
    .mob_nav .top{display: flex; justify-content: space-between; padding: 25px;}
    .mob_nav .top a > img{width: 70%;}
    .mob_nav .rig{display: flex; align-items: center;}
    .mob_nav .rig .mob_lang{display: flex; align-items: center; font-size: 15px;}
    .mob_nav .rig .mob_lang ul{display: flex; align-items: center;}
    .mob_nav .rig .mob_lang ul li:first-of-type{margin: 0 12px;}
    .mob_nav .rig button{margin-left: 10px; background-color: transparent; font-size: 33px; outline: none; border: none;transform: translateY(3px);cursor: pointer;}
    .mob_nav > ul {padding: 0 25px; margin-top: 42px;}
    .mob_nav > ul > li {margin-bottom: 33px;}
    .mob_nav > ul > li > a{font-size: 22px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: space-between;transition: 0.3s; }
    .mob_nav > ul > li > a span{position: relative;}
    .mob_nav > ul > li > a i{width: 15px; height: 8px; background-image: url('/img/mob_arrow.png'); background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; transition: 0.3s;}
    .mob_nav > ul .modep{margin: 25px 0 0; display: none;}
    .mob_nav > ul .modep li a{font-size: 15px; color: #888;padding: 12px 0; display: block; }
    .mob_nav > ul > li > a:hover{color: #0f9fff; }
    .mob_nav > ul > li > a span::after{content: "";  width: 100%; height: 3px; background-color: #0f9fff; position: absolute; bottom: -9px; display: none; transition: 0.3s;}
    .mob_nav > ul > li > a.on{color: #0f9fff; }
    .mob_nav > ul > li > a.on span::after{display: block;}
    .mob_nav > ul > li > a.on i{transform: rotate(180deg);}
}

/* 메인비쥬얼 */
.mainwrap .swiper-slide .maintxt {color: #fff; position: absolute; top: 50%; transform: translateY(-50%);}
.mainwrap .swiper-slide .maintxt strong{font-size: 159px; font-family: 'HDharmony B';}
.mainwrap .swiper-slide .maintxt dl{ margin-top: -20px;}
.mainwrap .swiper-slide .maintxt dl dt{font-size: 35px; margin-bottom: 17px; text-transform: uppercase; font-family: 'Pretendard';}
.mainwrap .swiper-slide .maintxt dl dd{font-size: 30px; font-weight: 300;}
.mainwrap .main_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-image: url('/img/arr_lf.png'); width: 29px; height: 53px; left: 55px;}
.mainwrap .main_slide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image: url('/img/arr_rt.png'); width: 29px; height: 53px; right: 55px;}

/* 메인비쥬얼 포인터 효과 */
.hoverbox > div{position: absolute; top: 50%; left: 50%; cursor: pointer; text-align: center;}
.hoverbox > div span{display: block; color: #fff; font-family: 'Play', sans-serif; font-size: 22px; font-weight: 400;}
.hoverbox > div .linebox{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.hoverbox > div .line{width: 1px; height: 20px; border-right: 2px dotted #fff;}
.hoverbox > div .linebox img{ animation: borderCircle 3s linear infinite;}
.hoverbox > div.hover01{margin-left: -380px; margin-top: 171px; display: flex; flex-direction: column-reverse;  align-items: center;}
.hoverbox > div.hover02{ margin-top: 148px; margin-left: 107px;}
.hoverbox > div.hover03{display: flex; flex-direction: column-reverse;  align-items: center; margin-top: 162px; margin-left: 246px;}
.hoverbox > div.hover04{display: flex; flex-direction: column-reverse;  align-items: center; margin-left: 396px; margin-top: 92px;}
.hoverbox > div.hover04 .linebox{flex-direction: column-reverse; }

@keyframes borderCircle{
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}

.hoverbox > div .overbox{position: absolute;width: 278px;height: 278px;display: block;top: -62px;left: -55px; opacity: 0; transform: scale(0); transition: 0.3s;}
.hoverbox > div .overbox img{opacity: 0; visibility: hidden; transform: scale(0.5);width: 100%; height: 100%; transition: 0.3s;}

.hoverbox > div.active .overbox{opacity: 1; transform: scale(1);}
.hoverbox > div.active .overbox img{opacity: 1; visibility: visible; transform: scale(1);}
.hoverbox > div.hover02 .overbox{top: -150px; left: -85px; z-index: 1;}
.hoverbox > div.hover03 .overbox{left: -97px;}
.hoverbox > div .overbox .animate{position: absolute; border-radius: 1000px; display: block; left: 50%;top: 50%;width: 120%;height: 120%; background: #6a49db; opacity: 0.5;content: '';transform: translate(-50%,-50%);animation: bgCircle 2s ease-in-out infinite; background: #39736e; border: 3px solid #728c7b;}
.hoverbox > div .overbox .animate.ani2{ width: 150%;height: 150%;opacity: 0.4;}


@keyframes bgCircle {
    0%{
        transform: translate(-50%,-50%) scale(0.95);
    }
    50% {
        transform: translate(-50%,-50%) scale(1);
    }
    100% {
        transform: translate(-50%,-50%) scale(0.95);
    }
}

@keyframes hoverani {
    0%{transform: scale(0);}
    100%{transform: scale(1); opacity: 1; visibility: visible;}
}


@media screen and (max-width: 900px){
    .main_slide .swiper-slide{height: 780px;}
    .main_slide .swiper-slide.slide01{background-image: url('/img/main_vs01_mo.jpg') !important;}
    /* .main_slide .swiper-slide.slide02{background-image: url('/img/main_vs02_mo_.jpg') !important;} */
    .mainwrap .swiper-slide .maintxt strong{font-size: 75px;}
    .mainwrap .swiper-slide .maintxt dl dt{font-size: 20px; margin-top: 10px;}
    .mainwrap .swiper-slide .maintxt dl dd{font-size: 18px; word-break: keep-all; line-height: 1.3;}

    .mainwrap .main_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 5px; background-size: 50%;}
    .mainwrap .main_slide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 5px; background-size: 50%;}

    .hoverbox > div span{font-size: 13px;}
    .hoverbox > div .overbox{width: 50px; height: 50px; top: -11px; left: 14px;}
    .hoverbox > div.hover01{margin-left: -44%; margin-top: 42px;}
    .hoverbox > div.hover02{margin-top: -2%; margin-left: 3%;}
    .hoverbox > div.hover02 .overbox{top: 0; left: 0;}
    .hoverbox > div.hover03{margin-top: 12%; margin-left: 18%;}
    .hoverbox > div.hover03 .overbox{left: 0;}
    .hoverbox > div.hover04{margin-top: 0; margin-left: 39%;}
}

@media screen and (max-width: 500px){
    .main_slide .swiper-slide{height: 650px;}
    .main_slide .swiper-slide.slide02{background-image: url('/img/main_vs02_mo_.jpg') !important;}
    .main_slide .swiper-slide.slide03{background-image: url('/img/main_vs03_mo.jpg') !important;}
    .main_slide .swiper-slide.slide04{background-image: url('/img/main_vs04_mo.jpg') !important;}
    .hoverbox{display: none;}
    .mainwrap .swiper-slide .maintxt{padding: 0 30px; left: 0;}
    .mainwrap .swiper-slide .maintxt strong{font-size: 60px;}
    .mainwrap .swiper-slide .maintxt dl dt{font-size: 16px; margin-bottom: 12px;}
    .mainwrap .swiper-slide .maintxt dl dd{font-size: 14px;}
}




/* sec02 */
.sec02{background: url('/img/sec02_bg.jpg') no-repeat; background-attachment: fixed;background-size: cover; padding: 145px 0;}
.sec02 strong{font-size: 42px; color: #0f9fff; font-family: 'HDharmony B';}
.sec02 .txtbox .txt{line-height: 72px;}
.sec02 .txtbox .txt p, .sec02 .txtbox .txt .text span, .sec02 .txtbox .txt .text2 span{font-size: 60px; color: #252c34; font-weight: 800;}
.sec02 .txtbox .txt01{margin-top: 20px;}
.sec02 .txtbox .txt02{text-align: right; margin-top: 114px;}
/* .sec02 .txtbox .txt02 p:nth-of-type(2){margin-top: -16px;} */
.sec02 .txtbox02{margin-top: 180px;}
.sec02 .txtbox02 p{font-size: 24px; line-height: 36px; color: #fff; font-weight: 300;}
.sec02 .txtbox .txt .text, .sec02 .txtbox .txt .text2 {position: relative;}
.sec02 .txtbox .txt .text p, .sec02 .txtbox .txt .text2 p{opacity: 0; text-align: right;}
.sec02 .txtbox .txt .text span, .sec02 .txtbox .txt .text2 span {position: absolute; top: 0; left: 0;}
.sec02 .txtbox .txt .text2 span{right: 0;}
.sec02 .txtbox .txt.txt02 .text span {left: auto; right: 0;}

@media screen and (max-width: 900px){
    .sec02{background-attachment: inherit;}
    .sec02 strong{font-size: 32px;}
    .sec02 .txtbox .txt p, .sec02 .txtbox .txt .text span{font-size: 23px; line-height: 35px;}
    .sec02 .txtbox .txt p, .sec02 .txtbox .txt .text2 span{font-size: 23px; line-height: 35px;}
    .sec02 .txtbox .txt02{margin-top: 85px;}
    .sec02 .txtbox02{margin-top: 95px;}
    .sec02 .txtbox02 p{font-size: 18px; line-height: 24px;}
}

@media screen and (max-width: 600px){
    .sec02 .txtbox02 p{font-size: 14px; word-break: keep-all;}
    .sec02 .txtbox02 p .br_{display: none;}
}

/* sec03 */
.sec03{background-color: #0f9fff; padding: 67px 0 65px;}
.sec03 .flex{display: flex;}
.sec03 .flex .tit dl {color: #fff;}
.sec03 .flex .tit dl dt{font-size: 18px; margin-bottom: 12px;}
.sec03 .flex .tit dl dd{font-family: 'HDharmony B';font-size: 42px;}
.sec03 .flex .selectbox{margin-left: 48px; width: 100%; }
.sec03 .flex .selectbox .selec {display: flex; align-items: center; height: 67px;}
.sec03 .flex .selectbox .selec select {font-family: 'Pretendard';}
.sec03 .flex .selectbox .selec select:last-child{margin-right: 0;}
.sec03 .flex .selectbox .searchbox{width: 100%; margin-top: 15px;  display: flex;}
.sec03 .flex .selectbox .searchbox input{width: 100%; font-size: 20px; color: #000; padding-left: 20px;height: 67px; box-sizing: border-box; background-color: #fff;  font-family: 'Pretendard';}
.sec03 .flex .selectbox .selbox{height: 100%; display: flex; flex: 1;}
.sec03 .flex .selectbox .selbox select{flex: 1; margin-right: 20px; height: 100%; font-size: 20px; color: #252c34; appearance: none; background: url('/img/selec_arrow.png') calc(100% - 20px) center no-repeat; background-color: #fff; padding: 0 20px; cursor: pointer;}

.sec03 .flex .selectbox .searchbox button{border: none; outline: none; background-color: #333; color: #fff; box-sizing: border-box; width: 150px; font-size: 18px;}
.sec03 .flex .selectbox .searchbox button i{margin-right: 7px;}

/* .sec03 .flex .selectbox .selec .selecbox01{position: relative;     background: #fff;height: 100%;margin-right: 20px;flex: 1;display: flex;justify-content: center; align-items: center; cursor: pointer;}
.sec03 .flex .selectbox .selec .selecbox01 > span{display: block;}
.sec03 .flex .selectbox .selec .selecbox01 > img{position: absolute; right: 17px;}
.sec03 .flex .selectbox .selec .selecbox01 .selecdep{position: absolute; top: 100%; background-color: #fff; width: 100%; text-align: center; z-index: 999; border: 1px solid #888; display: none;}
.sec03 .flex .selectbox .selec .selecbox01 .selecdep > span{display: block;}
.sec03 .flex .selectbox .selec .selecbox01 .selecdep li{padding: 12px;} */

.cont-select {position: relative;flex: 0.5;margin-right: 20px;height: 100%; }
.cont-select select{width: 100%; height: 100%; font-size: 20px;padding: 13px 30px 13px 14px;background-image: url('/img/selec_arrow.png'); background-repeat: no-repeat; background-position: 95% 50%; appearance: none; }
.btn-select {width: 100%;padding: 13px 30px 13px 14px;font-size: 12px; flex: 1; line-height: 14px;background-color: #fff;box-sizing: border-box;cursor: pointer;background-color: #fff;display: flex; justify-content: center; align-items: center; height: 100%; text-align: center; background-image: url('/img/selec_arrow.png'); background-repeat: no-repeat; background-position: 95% 50%;}
.list-member {display: none;position: absolute;width: 100%;top: 100%;left: 0;border: 1px solid #C4C4C4;box-sizing: border-box;box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);background-color: #fff;z-index: 9;}
.btn-select.on+.list-member {display: block;}
.list-member li {padding: 12px;}
.list-member li button {width: 100%;border: none;cursor: pointer;background-color: transparent;}

@media screen and (max-width: 900px){
    .sec03{text-align: center;}
    .sec03 .flex{display: block;}
    .sec03 .flex .tit{margin-bottom: 30px;}
    .sec03 .flex .tit dl dt{font-size: 15px;}
    .sec03 .flex .tit dl dd{font-size: 32px;}
    .sec03 .flex .selectbox{margin-left: 0;}
    .sec03 .flex .selectbox .selec{display: block; height: 55px;}
    .cont-select{margin-right: 0; margin-bottom: 12px;}
    .sec03 .flex .selectbox .searchbox{margin-top: 82px;}
    .btn-select{margin: 0 auto 20px; width: 70%;}
    .list-member{width: 70%; left: 50%; transform: translateX(-50%);}
    .cont-select select{font-size: 16px;}
    .sec03 .flex .selectbox .searchbox input{height: 55px; font-size: 16px;}
    .sec03 .flex .selectbox .selbox select{margin-right: 14px; font-size: 16px; padding: 0 10px;}
    .sec03 .flex .selectbox .searchbox button{font-size: 16px;}

}

@media screen and (max-width: 500px){
    .cont-select select{font-size: 13px;}
    .sec03 .flex .selectbox .selbox select{font-size: 13px; background: url(/img/selec_arrow.png) calc(100% - 9px) center no-repeat; background-color: #fff;}
    .sec03 .flex .selectbox .searchbox input{font-size: 13px; background-size: 9%; padding-left: 3px;}
    .sec03 .flex .selectbox .searchbox button{font-size: 13px;}
}
 
/* sec04 */
.sec04{padding: 193px 0 170px;  position: relative; background-color: #fff; overflow: hidden; height: 700px;}
/* .sec04 .mastbg{background-image: url('/img/maskbg.png'); background-repeat: no-repeat; background-position: center; background-size: cover; height: 100vh;} */

.sec04 .parrlexImg {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url('/img/sec04_bg.jpg'); background-repeat: no-repeat; background-size: cover;}

.sec04 > svg{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw;}
.sec04 > svg.mobsvg{display: none;}


.sec04 #svgBg {position: absolute; bottom: 0; width: 100%; background: #fff;}

.sec04 > dl{font-size: 380px; font-weight: 600; }

/* .sec04 > dl dt{font-family: 'HDharmony B';color: ;}
.sec04 > dl dd{font-family: 'HDharmony B';color: ;} */
.sec04 .flex {display: flex; z-index: 1; justify-content: center; margin-top: 3%; padding: 0 65px;}
.sec04 .flex .box{text-align: center; box-shadow: 3px 3px 10px #ccc; box-shadow: 27px 28px 40px -7px #aaa; width: 100%; height: 100%; position: relative; transition: 0.5s; width: 50%; height: 620px; transition: all 0.2s linear; }
.sec04 .flex .box .txt{}

/* .sec04 .flex .box::after{content: ""; display: block; padding-bottom: calc(620/910 * 100%);} */
.sec04 .flex .box.box01{background: url('/img/sec04box_bg1.png') no-repeat; background-position: center; background-size: cover; margin-right: 35px;}
.sec04 .flex .box.box02{background: url('/img/sec04box_bg2.png') no-repeat; background-position: center; background-size: cover; transform: translateY(60px);}
.sec04 .flex .box.box01:hover{ transform: scale(1.03);}
.sec04 .flex .box.box02:hover{ transform: scale(1.03) translateY(60px);}
.sec04 .flex .box .txt{position: absolute;width: 100%;height: 100%;top: 0;left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sec04 .flex .box dl dt{font-size: 42px; color: #fff; font-weight: 700;}
.sec04 .flex .box dl dd{font-size: 24px; color: #fff; font-weight: 300; margin-top: 20px;}
.sec04 .flex .box .linklist{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; max-width: 472px; margin-top: 35px;}
.sec04 .flex .box .linklist a {font-size: 18px; color: #fff; border: 1px solid #fff; width: 225px; margin-right: 20px; height: 73px; line-height: 73px; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; position: relative;}
.sec04 .flex .box .linklist .lasta{line-height: normal; text-align: left;}
.sec04 .flex .box .linklist .lasta span{padding-top: 13px;}
.sec04 .flex .box .linklist a:nth-of-type(-n+2){margin-bottom: 25px;}
.sec04 .flex .box .linklist a:nth-of-type(2n){margin-right: 0;}
.sec04 .flex .box .linklist a span{color: #fff; transition: 0.3s; z-index: 1;}
.sec04 .flex .box .linklist a span::after{content: ""; display: inline-block; width: 26px; height: 16px; background: url('/img/se04arrow.png') no-repeat; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: 0.3s;}
.sec04 .flex .box .linklist a::after{content: ""; display: block; width: 0; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; transition: 0.3s;}
.sec04 .flex .box .linklist a:hover::after{width: 100%;}
.sec04 .flex .box .linklist a:hover span{color: #252c34;}
.sec04 .flex .box .linklist a:hover span::after{background-image: url('/img/se04arrow_over.png');}

@media screen and (max-width: 1115px){
    .sec04 .flex .box .linklist{justify-content: center;}
    /* .sec04 .flex .box .linklist a{margin-right: 0;} */
    .sec04 .flex .box02 .linklist a:nth-of-type(3){margin-bottom: 25px;}
}

@media screen and (max-width: 900px){
    .sec04 > svg.pcsvg{display: none;}
    .sec04 > svg.mobsvg{display: block;}

    .sec04 .flex{display: block; padding: 0; margin-top: 22%;}
    .sec04 .flex .box{height: 419px; width: 100%;}
    .sec04 .flex .box.box01{margin-bottom: 25px;}
    .sec04 .flex .box.box02{transform: translateY(0);}
    .sec04 .flex .box.box02:hover{ transform: scale(1.03) translateY(0);}
    .sec04 .flex .box .linklist{justify-content: flex-start;}
    .sec04 .flex .box02 .linklist a:nth-of-type(3){margin-bottom: 0;}
    .sec04 .flex .box dl dt{font-size: 25px;}
    .sec04 .flex .box dl dd{font-size: 16px; margin-top: 12px;}
    .sec04 .flex .box .txt{padding: 0 20px; box-sizing: border-box;}
    .sec04 .flex .box .linklist a{height: 54px; line-height: 54px; font-size: 13px; margin-bottom: 15px;}
    .sec04 .flex .box .linklist a:nth-of-type(-n+2){margin-bottom: 15px;}
    .sec04 .flex .box .linklist a:last-of-type{margin-bottom: 0;}

    .sec04 .flex .box .linklist .lasta{line-height: 54px;}
    .sec04 .flex .box .linklist .lasta span{padding-top: 0;}
}

@media screen and (max-width: 580px){
    .sec04 .flex .box .linklist{justify-content: center;}
    .sec04 .flex .box .linklist a{margin-right: 0;}

    .sec04 .flex .box02 .linklist a:nth-of-type(3){margin-bottom: 15px;}
}

@media screen and (max-width: 450px){
    .sec04 .flex .box.box01 .linklist a:last-of-type{margin-top: 0;}
    .sec04 .flex .box02 .linklist a:nth-of-type(3){margin-bottom: 0;}
}

/* sec05 */
.sec05{background-image: url('/img/sec05_bg.jpg'); /*padding: 135px 0 182px; */background-repeat: no-repeat; background-size: cover; position: relative;}

/* .sec05 #myChart {width: 50vw;  top: 0; right: 0;} */

/* .sec05 .chartbox{border-bottom: 1px solid rgba(255, 255, 255, 20%); padding-bottom: 40px;} */
.sec05 .title{margin-bottom: 100px;}
.sec05 .title dl {font-size: 60px; color: #fff;}
.sec05 .title dl dt{font-family: 'HDharmony B';position: relative;}
.sec05 .title dl dt::after{content: ""; display: inline-block; width: 89px; height: 97px; background: url('/img/sec05icon.png') no-repeat; position: absolute;right: 59%;left: 34%;  top: -22px;}
.sec05 .title dl dd{font-family: 'HDharmony B';margin-left: 28%;}
.sec05 .title p{color: rgba(255, 255, 255, 60%); font-weight: 100; font-size: 20px; line-height: 28px;}
.sec05 .chartbox{position: relative;}
.sec05 .chartbox .text{font-size: 25px; color: #fff; font-weight: 600; position: absolute; right: 0; top: 50px; width: 160px; height: 160px; background-color: #34dbca; text-align: center; line-height: 160px; border-radius: 50%;}

.sec05 .countbox{color: #fff; text-align: center; margin-top: 124px; }
.sec05 .countbox p{font-size: 42px; line-height: 58px; font-weight: 600; margin-bottom: 65px;}
.sec05 .countbox ul{display: flex;  justify-content: space-evenly;}
.sec05 .countbox ul li dl dt{font-size: 20px; margin-bottom: 20px;}
.sec05 .countbox ul li dl dd{font-size: 82px; width: 185px;  text-align: center; display: flex; align-items: center; justify-content: center;}
.sec05 .countbox ul li dl dd strong{font-family: 'HDharmony B';display: block; margin-right: 10px; text-align: center;}
.sec05 .countbox ul li dl dd span{font-size: 24px; font-family: 'Pretendard'; font-weight: 300;}

.sec05 .graph01 {margin-bottom: 100px; text-align: center; position: relative; min-height: 640px;}
.sec05 .graph01 img{width: 77%;}
.gp_mo{display: none;}

.sec05 .graph02 {text-align: center; margin: 0 auto; width: 90%; max-width: 1000px; position: relative;}
.sec05 .graph02 ul{margin-bottom: 40px; color: #fff; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
.sec05 .graph02 ul li{width: calc(99.9%/8 - 100px/8); margin-right: 10px;  display: flex; flex-direction: column; justify-content: center; align-items: center;  font-size: 18px;}
.sec05 .graph02 ul li span{background-color: #ff6384; display: block; width: 100%;height: 54px; line-height: 54px; margin-bottom: 20px;}
.sec05 .graph02 ul li:nth-of-type(2) span{background-color: #ff9f40;}
.sec05 .graph02 ul li:nth-of-type(3) span{background-color: #ffcd56;}
.sec05 .graph02 ul li:nth-of-type(4) span{background-color: #4bc0c0; margin-bottom: 13px;}
.sec05 .graph02 ul li:nth-of-type(5) span{background-color: #36a2eb;}
.sec05 .graph02 ul li:nth-of-type(6) span{background-color: #b5afe9;}
.sec05 .graph02 ul li:nth-of-type(7) span{background-color: #e9afaf; font-size: 15px;}
.sec05 .graph02 ul li:nth-of-type(8) span{background-color: #95e7ae; font-size: 15px;}
.sec05 .graph02 ul li:last-of-type{margin-right: 0; }
.sec05 .graph02 ul li:nth-of-type(7) img{height: 37px;}
.sec05 .graph02 ul li:nth-of-type(8) img{height: 37px;}
.sec05 .graph02 strong{font-size: 32px; color: #fff; display: block; text-align: center; font-weight: 800; margin-bottom: 45px;}
.sec05 .graph02 .graph02in{max-width: 1000px; margin: 0 auto; position: relative;}
.sec05 .graph02 .graph02in > img{position: absolute; top: 50%;transform: translate(-50%, -50%); left: 50%;} 

@media screen and (max-width: 900px){
    .sec05{background-image: url('/img/sec05_bg_mo.jpg'); text-align: center;}
    .sec05 .title{margin-bottom: 50px;}
    .sec05 .title dl{font-size: 32px;}
    .sec05 .title dl dt{display: inline;}
    .sec05 .title dl dd{margin-left: 15px; display: inline;}
    .sec05 .title dl dt::after{width: 68px; height: 75px; background-image: url('/img/sec05icon_mno.png');right: -50px; left: auto;}
    .sec05 .title p{font-size: 16px; word-break: keep-all; line-height: 24px; margin-top: 10px;}
    .sec05 .title p br{display: none; }

    .sec05 .chartbox .text{display: none;}
    .sec05 .graph01{display: none;}
    .gp_mo{display: block; margin: 0 auto 70px; }

    .sec05 .graph02 .graph02in{width: 90%;}
    .sec05 .graph02 ul li{width: calc(99.9%/3 - 60px/3);}
    .sec05 .graph02 ul li:nth-of-type(-n+3){margin-bottom: 10px;}
    .sec05 .graph02 ul li:nth-of-type(3n){margin-right: 0;}
    .sec05 .graph02 ul li span{font-size: 13px; height: 35px; line-height: 35px;}
    .sec05 .graph02 .graph02in{display: none;}
    .sec05 .graph02 .graph02in > img{width: 15%;}
    .sec05 .graph02 strong{font-size: 28px;}

    .sec05 .countbox{margin-top: 60px;}
    .sec05 .countbox p{font-size: 28px; line-height: 46px; word-break: keep-all;}
    .sec05 .countbox ul{flex-wrap: wrap; align-items: center;}
    .sec05 .countbox ul li{width: calc(99.9%/2 - 10px/2); margin-right: 10px;}
    .sec05 .countbox ul li:nth-of-type(2n){margin-right: 0;}
    .sec05 .countbox ul li:nth-of-type(-n+2){margin-bottom: 20px;}
    .sec05 .countbox ul li dl dt{font-size: 18px; margin-bottom: 12px;}
    .sec05 .countbox ul li dl dd{width: auto;}
}

@media screen and (max-width: 630px){
    .sec05 .title dl dd{margin-left: 0; display: block;}
    .sec05 .title dl dt::after{background-position: center; background-size: 60%; right: -40px;}

    .sec05 .countbox ul li dl dd{font-size: 40px; }
    .sec05 .countbox ul li dl dd strong{margin-right: 6px;}
    .sec05 .countbox ul li dl dd span{font-size: 16px;}
}

@media screen and (max-width: 500px){
    .sec05 .graph02 .graph02in > img{left: 55.3%;}
}

/* sec06 */
.sec06{background-image: url('/img/sec06_bg.jpg'); padding: 76px 0 54px; background-repeat: no-repeat; background-size: cover; padding-left: 320px;}
/* .sec06 .flexbox{display: flex;} */
.sec06 .flexbox .title dl dt{font-size: 18px; color: #0f9fff;}
.sec06 .flexbox .title dl dd{font-size: 42px; font-family: 'HDharmony B';color: #252c34; margin-top: 10px;}
.sec06 .flexbox .title p{font-size: 18px; color: #252c34; white-space: nowrap; line-height: 24px;}
.sec06 .flexbox .slidebox{margin-left: 22%; margin-top: -7%;}
.sec06 .flexbox .slidebox .sys_slide{padding-bottom: 50px;}
.sec06 .flexbox .slidebox .swiper-slide {    height: 317px;
    background: #Fff;}
.sec06 .flexbox .slidebox .swiper-slide .txt{height: 100%;  padding: 40px 25px 0; box-sizing: border-box;}
.sec06 .flexbox .slidebox .swiper-slide .txt dl dt{font-size: 18px; color: #0f9fff;}
.sec06 .flexbox .slidebox .swiper-slide .txt dl dd{font-size: 29px; color: #444;}
.sec06 .flexbox .slidebox .swiper-slide  span{font-size: 152px; color: #deeeff; display: block; font-family: 'HDharmony B';position: absolute; top: 36%; right: 12px;}
.sec06 .flexbox .slidebox .swiper-slide img{position: absolute; bottom: -20px;}
.sec06 .flexbox .slidebox .swiper-pagination{display: none;}

.sec06 .flexbox .slidebox .swiper-button-next, .swiper-container-rtl .swiper-button-prev{position: relative; transform: translateX(-245px); top: -200px; width: 29px; height: 53px; background-image: url('/img/arr_rt_color.png');}
.sec06 .flexbox .slidebox .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ position: relative;transform: translateX(-340px); top: -230px; width: 29px; height: 53px; background-image: url('/img/arr_lf_color.png');}

@media screen and (max-width: 1450px){
    .sec06 .flexbox .slidebox{margin-left: 300px;}
}

@media screen and (max-width: 900px){
    section.sec06{text-align: center; padding: 10% 0;}
    .sec06 .flexbox .title dl dt{font-size: 15px;}
    .sec06 .flexbox .title dl dd{font-size: 32px;}
    .sec06 .flexbox .title p{font-size: 16px;}
    .sec06 .flexbox .slidebox{margin: 0; margin-top: 50px;     margin-left: 30px;}
    .sec06 .flexbox .slidebox .sys_slide{padding-bottom: 68px;}
    .sec06 .flexbox .slidebox .swiper-slide{height: 260px;}
    .sec06 .flexbox .slidebox .swiper-slide .txt {text-align: left; padding:  40px 10px 0;}
    .sec06 .flexbox .slidebox .swiper-slide .txt dl dt{font-size: 15px;}
    .sec06 .flexbox .slidebox .swiper-slide .txt dl dd{font-size: 17px; font-weight: 800;}
    .sec06 .flexbox .slidebox .swiper-slide span{font-size: 80px;}
    .sec06 .flexbox .slidebox .swiper-slide img{bottom: 0; left: 0;}

    .sec06 .flexbox .slidebox .swiper-pagination{display: block;}
    .sec06 .flexbox .slidebox .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; background: transparent; border: 2px solid #0f9fff; transition: 0.3s;}
    .sec06 .flexbox .slidebox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 40px; border-radius: 10px; background-color: #0f9fff;}
}

/* sec07 */
.sec07{background-image: url('/img/sec07_bg.jpg'); padding: 90px 0 88px; background-repeat: no-repeat; background-size: cover; }
.sec07 dl {text-align: center;}
.sec07 dl dt{font-size: 42px; color: #0f9fff; font-family: 'HDharmony B';margin-bottom: 10px;}
.sec07 dl dd{font-size: 50px; color: #fff;}
.sec07 ul{display: flex; flex-wrap: wrap; justify-content: center;    align-items: center; text-align: center; margin-top: 40px;}
.sec07 ul li {width: calc(99.9%/3 - 50px/3); margin-right: 25px;  height: 81px; display: flex;align-items: center; justify-content: center; box-sizing: border-box; position: relative;}
.sec07 ul li > a{position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 3px solid #fff; box-sizing: border-box; z-index: 1;}
.sec07 ul li:not(:nth-last-child(-n+3)){margin-bottom: 22px;}
.sec07 ul li:nth-of-type(3n){margin-right: 0;}
.sec07 ul li figure{}
.sec07 ul li figure img{transition: 0.3s;}
.sec07 ul li:nth-child(5) figure img {transform: scale(0.2);}
.sec07 ul li:nth-child(6) figure img {transform: scale(0.2);}
/* .sec07 ul li:nth-of-type(5) figure img{width: 68%;} */
.sec07 ul li:hover figure img{transform: scale(1.2);}
.sec07 ul li:nth-child(5):hover figure img {transform: scale(0.25);}
.sec07 ul li:nth-child(6):hover figure img {transform: scale(0.25);}

.sec07 ul li .border span{position: absolute; transition: 0.3s; z-index: 2;}
.sec07 ul li .border span:first-child{width: 0; height: 3px; left: 0; top: 0; background-color: #0f9fff;}
.sec07 ul li .border span:nth-child(2){width: 3px; height: 0; top: 0; right: 0; background-color: #0f9fff;}
.sec07 ul li .border span:nth-child(3){width: 0;height: 3px;right: 0;bottom: 0; background-color: #0f9fff;}
.sec07 ul li .border span:last-child{width: 3px; height: 0; bottom: 0; left: 0; background-color: #0f9fff;}

.sec07 ul li:hover .border span:nth-child(odd){width: 100%;}
.sec07 ul li:hover .border span:nth-child(even){height: 100%;}

@media screen and (max-width: 900px){
    .sec07 dl dt{font-size: 32px;}
    .sec07 dl dd{font-size: 33px;}
    .sec07 ul li{width: calc(99.9%/2 - 30px/2); margin-right: 15px; height: 60px;}
    .sec07 ul li img{width: 50%;}
    .sec07 ul li:nth-of-type(5) figure img{width: 50%;}
    /* .sec07 ul li:nth-of-type(5) img, .sec07 ul li:nth-of-type(6) img{width: 22%;} */
    .sec07 ul li:nth-of-type(3n){margin-right: 15px;}
    .sec07 ul li:nth-of-type(2n){margin-right: 0;}
    .sec07 ul li:nth-child(-n+4){margin-bottom: 15px;}
}

/* sec08 */
.sec08{text-align: center; padding: 130px 0 170px; box-sizing: border-box;}
.sec08 dl{margin-bottom: 60px;}
.sec08 dl dt{font-size: 42px; color: #0f9fff;font-family: 'HDharmony B';margin-bottom: 10px;} 
.sec08 dl dd{font-size: 24px; color: #252c34; font-weight: 300;} 
.sec08 .his_slide {padding-top: 40px; height: 300px;}
.sec08 .his_slide .swiper-slide{background-size: cover; background-position: center; background-repeat: no-repeat; transition: 0.3s; position: relative; height: 287px;}
/* .sec08 .his_slide .swiper-slide::after{content: ""; display: block; padding-bottom: 100%;} */
.sec08 .his_slide .swiper-slide a::after{content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 35%); position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s;}
.sec08 .his_slide .swiper-slide a{width: 100%;height: 100%;display: flex;justify-content: center; align-items: center; flex-direction: column; position: absolute; top: 0; left: 0;}
.sec08 .his_slide .swiper-slide a > img{position: absolute; width: 100%;}
.sec08 .his_slide .swiper-slide a > span{font-size: 48px; color: #fff; transition: 0.3s;}
.sec08 .his_slide .swiper-slide .overtxt{opacity: 0; display: none; transform: translateY(20px); z-index: 1;}
.sec08 .his_slide .swiper-slide .overtxt .year span{color: #fff; font-size: 25px; background: rgb(32,156,255);background: linear-gradient(304deg, rgba(32,156,255,1) 0%, rgba(104,224,207,1) 100%); display: inline-block; width: 38px; height: 38px; line-height: 38px;}
.sec08 .his_slide .swiper-slide .overtxt p{color: #Fff; font-size: 20px; margin-top: 15px; line-height: 1.3;}
.sec08 .his_slide .swiper-slide:hover {transform: translateY(-40px); box-shadow: 15px 17px 27px 4px #c1c1c1;}
.sec08 .his_slide .swiper-slide:hover a::after{opacity: 1;}
.sec08 .his_slide .swiper-slide:hover a > span{display: none;}
.sec08 .his_slide .swiper-slide:hover .overtxt{opacity: 1; display: block; transform: translateY(0);}

.sec08 .his_slide .swiper-slide.swiper-slide-active {transform: translateY(-40px); box-shadow: 15px 17px 27px 4px #c1c1c1;}
.sec08 .his_slide .swiper-slide.swiper-slide-active a::after{opacity: 1;}
.sec08 .his_slide .swiper-slide.swiper-slide-active a > span{display: none;}
.sec08 .his_slide .swiper-slide.swiper-slide-active .overtxt{opacity: 1; display: block; transform: translateY(0);}

.sec08 .his_slide .swiper-pagination{display: none;}

@media screen and (max-width: 900px){
    .sec08 dl{margin-bottom: 35px;}
    .sec08 dl dt{font-size: 32px;}
    .sec08 dl dd{font-size: 18px;}
    .sec08 .his_slide{padding-bottom: 60px;}
    .sec08 .his_slide .swiper-slide a > span{font-size: 25px;}
    .sec08 .his_slide .swiper-pagination{display: block; bottom: -3px;}
    .sec08 .his_slide .swiper-slide .overtxt .year span{font-size: 16px; width: 20px; height: 20px; line-height: 20px;}
    .sec08 .his_slide .swiper-slide .overtxt p{font-size: 14px;}

    .sec08 .his_slide .swiper-pagination .swiper-pagination-bullet{width: 15px; height: 15px; background-color: transparent; border: 2px solid #0f9fff; transition: 0.3s;}
    .sec08 .his_slide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #0f9fff; width: 40px; border-radius: 10px;}
}

@media screen and (max-width: 600px){
    .sec08 .his_slide{height: 195px;}
    .sec08 .his_slide .swiper-slide{height: 190px;}
    .sec08 .his_slide .swiper-slide .overtxt .year span{font-size: 14px;}
    .sec08 .his_slide .swiper-slide .overtxt p{font-size: 13px;}
}

@media screen and (max-width: 450px){
    .sec08 .his_slide{padding-bottom: 0;}
    .sec08 .his_slide .swiper-slide{height: 125px;}
}

/* sec09 */
.sec09{background-image: url('/img/sec09_bg.jpg'); padding: 180px 0 110px; background-repeat: no-repeat; background-size: cover; color: #fff;}
.sec09 .flexbox{display: flex; }
.sec09 .flexbox dl {font-size: 60px;}
.sec09 .flexbox dt {font-family: 'HDharmony B';}
.sec09 .flexbox dd {font-size: 24px; font-weight: 100;}
.sec09 .flexbox .lef {flex: 1;}
.sec09 .flexbox .lef .imgbox{margin-top: 50px;}
.sec09 .flexbox .rig{margin-left: 65px; flex: 1.5;}
.sec09 .flexbox .rig ul{margin-top: 43px; border-top: 2px solid #Fff; border-bottom: 2px solid #fff;}
.sec09 .flexbox .rig ul li{border-bottom: 2px solid #fff; }
.sec09 .flexbox .rig ul li > a{display: block; padding: 30px 20px; color: #fff; transition: 0.3s;}
.sec09 .flexbox .rig ul li:last-child{border-bottom: none;}
.sec09 .flexbox .rig ul li strong{font-size: 24px;}
.sec09 .flexbox .rig ul li p{font-size: 18px; margin: 22px 0 30px;     display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;overflow: hidden;-webkit-box-orient: vertical; font-weight: 300;}
.sec09 .flexbox .rig ul li span{font-size: 18px; font-weight: 100;}
.sec09 .flexbox .rig > a{font-size: 22px; color: #333; display: block; width: 200px; height: 73px; line-height: 73px; background-color: #Fff; text-align: center; margin: 46px auto 0; transition:all 0.5s; }
.sec09 .flexbox .rig > a:hover{ box-shadow: 200px 0 0 0 #0f9fff inset,  -200px 0 0 0 #0f9fff inset; color: #fff;}
.sec09 .flexbox .rig ul li:hover > a {background-color: rgba(225, 225, 225, 0.1);}

@media screen and (max-width: 900px){
    .sec09 {text-align: center;}
    .sec09 .flexbox{display: block;}
    .sec09 .flexbox dl{font-size: 32px;}
    .sec09 .flexbox dl dt{margin-bottom: 10px;}
    .sec09 .flexbox dl dd{font-size: 18px;}
    .sec09 .flexbox .lef .imgbox{margin-top: 30px; margin-bottom: 50px;}
    .sec09 .flexbox .rig{margin-left: 0;}
    .sec09 .flexbox .rig ul{margin-top: 30px;}
    .sec09 .flexbox .rig ul li{text-align: left;}

    .sec09 .flexbox .rig ul li strong{font-size: 16px;}
    .sec09 .flexbox .rig ul li p{font-size: 14px; margin: 15px 0 8px; line-height: 20px; height: 20px;}
    .sec09 .flexbox .rig ul li span{font-size: 14px;}

    .sec09 .flexbox .rig > a{font-size: 15px; width: 150px; height: 55px; line-height: 55px;}
}

/* sec10 */
.sec10{padding-top: 140px; text-align: center; overflow: hidden;}
.sec10 > dl{margin-bottom: 80px;}
.sec10 > dl dt{color: #0f9fff; font-size: 42px; font-family: 'HDharmony B';}
.sec10 > dl dd{color: #252c34; font-size: 50px; font-weight: 300;margin-top: 10px;}
.sec10 ul {display: flex;}
.sec10 ul li{background-repeat: no-repeat; background-position: center; background-size: cover; flex: 1;  position: relative;}
.sec10 ul li a{display: block; width: 100%;height: 100%; padding: 45px; box-sizing: border-box;}
.sec10 ul li::after{content: ""; display: block; padding-bottom: calc(420/480 * 100%);} 
.sec10 ul li a dl{text-align: left;}
.sec10 ul li a dl dt{font-size: 18px; color: #0f9fff; text-transform: uppercase;}
.sec10 ul li a dl dd{font-size: 32px; color: #252c34; margin-top: 15px; font-weight: 600;}
.sec10 ul li a span{display: flex; justify-content: center; align-items: center; width: 76px; height: 76px; background-color: #Fff; position: absolute; right: 0; bottom: 0;}
.sec10 ul li:nth-of-type(1) a dl dd, .sec10 ul li:nth-of-type(2) a dl dd{color: #fff;}

@media screen and (min-width: 901px){
    .sec10 ul li{ transform: translateY(80px); transition: 0.3s; height: 420px; -webkit-filter: grayscale(100%); position: relative;}
    .sec10 ul li:hover{transform: translateY(0); -webkit-filter: grayscale(0);}
}

@media screen and (max-width: 900px){
    .sec10{max-width: 1280px; width: 90%; margin: 0 auto; padding: 10% 0;}
    .sec10 > dl{margin-bottom: 30px;}
    .sec10 > dl dt{font-size: 32px;}
    .sec10 > dl dd{font-size: 35px;}

    .sec10 ul{flex-wrap: wrap;}
    .sec10 ul li{width: 50%; flex: auto;}
    .sec10 ul li a{padding: 20px;}
    .sec10 ul li a span{width: 50px; height: 50px;}
    .sec10 ul li a span img{width: 50%;}
    .sec10 ul li:nth-of-type(1){background-image: url('/img/recruit_01_mo.jpg') !important;}
    .sec10 ul li::after{content: ""; display: block; padding-bottom: calc(254/360 * 100%);}
    .sec10 ul li a dl dt{font-size: 14px;}
    .sec10 ul li a dl dd{font-size: 18px; margin-top: 6px;}
}

@media screen and (max-width: 600px){
    .sec10 > dl dd{font-size: 18px; line-height: 1.3; margin-top: 0;}
}

/* footer */
footer{background-color: #2a2a2a; color: #6c6c6c;}
footer .wrap{padding: 40px 0 50px;}
footer .flexbox{display: flex;}
footer .flexbox strong{font-family: 'Raleway'; font-weight: 800; font-size: 30px;}
footer .flexbox .lef p{margin: 17px 0 15px;}
footer .flexbox ul{display: flex;}
footer .flexbox ul li::after{content: ""; display: inline-block; width: 1px; height: 12px; background-color: #6c6c6c; margin: 0 10px;}
footer .flexbox ul li:last-child::after{display: none;}
footer .flexbox .rig{margin-left: 170px;}
footer .flexbox .rig ul{margin-top: 15px;}
footer .flexbox .rig ul li{cursor: pointer;}
footer .flexbox .rig ul li a{color: #6c6c6c;}

@media screen and (max-width: 900px){
    footer .flexbox{display: block;}
    footer .flexbox ul{display: block;}
    footer .flexbox ul li{font-size: 13px; margin-bottom: 10px;}
    footer .flexbox ul li:last-of-type{margin-bottom: 0;}
    footer .flexbox ul li::after{display: none;}
    footer .flexbox .rig{margin-left: 0; margin-top: 30px;}
    footer .flexbox .rig ul{display: flex;}
    footer .flexbox .rig ul li:after{display: inline-block;}
    footer .flexbox .rig ul li:last-of-type::after{display: none;}
    footer .flexbox .rig ul li{margin-bottom: 0;}
    footer .flexbox strong{font-size: 25px;}
    footer .flexbox .lef p{font-size: 13px;}
}

/* 탑버튼 */
.topbtn{position: fixed; right: 20px; bottom: 20px; text-align: center; display: none;}
.topbtn span{width: 56px; height:56px; background: #000; color: #fff; cursor: pointer; display: block;line-height: 56px; border-radius: 50%;}


/* 공통 반응형 */
@media screen and (max-width: 900px){
    section.sec02, section.sec03, section.sec05, section.sec07, section.sec08, section.sec09{padding: 10% 0;}
    section.sec04{padding: 80px 0; max-width: 1280px; width: 90%; margin: 0 auto; height: 1000px;}
}

@media screen and (max-width: 500px){
    section.sec04{height: 970px; } 
}

@media screen and (max-width: 400px){
    section.sec04{height: 920px; } 
}



/* .cont-select{
    position: relative;
  }
  
.select-with-image{
    display: flex;
    align-items: center;
    padding: 3px;
    background-color: #Fff;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
}
.select-with-image span{
    font-size: 26px;
}
  
.select-options{position: absolute;top: 0;height: 100%;z-index: 5;width: 100%;background-color: #Fff;}
.select-option{display: flex;align-items: center;padding: 3px;cursor: pointer; height: 100%; background: #fff; justify-content: center;}
.hide{display: none;}
.cont-select span{pointer-events: none;} */
  

/* 히스토리 수정0722 */
.sec08 .his_slide{height: auto;}
.sec08 .his_slide ul {display: flex; justify-content: center;}
.sec08 .his_slide ul li{ width: calc(99.9%/3 - 100px/3); margin-right: 50px; position: relative; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;}
.sec08 .his_slide ul li > a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sec08 .his_slide ul li a::after{content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 64%); position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s;}
.sec08 .his_slide ul li:last-of-type{margin-right: 0;}
.sec08 .his_slide ul li::after{display: block; content: ""; padding-bottom: calc(394/390 * 100%);}

.sec08 .his_slide a > span{font-size: 48px; color: #fff; transition: 0.3s;}
.sec08 .his_slide .overtxt{opacity: 0; display: none; transform: translateY(20px); transition: 0.3s; z-index: 1; position: absolute; top: 50%; left: 50%; width: 100%;}
.sec08 .his_slide .overtxt .year span{ font-size: 40px;  display: block;  z-index: 1; background: linear-gradient(304deg, rgba(42,165,249,1) 0%, rgba(97,218,211,1) 100%);color: transparent;-webkit-background-clip: text; font-weight: 800;}
.sec08 .his_slide .overtxt p{color: #Fff; font-size: 20px; margin-top: 15px; line-height: 1.3;}

@media screen and (min-width: 900px){
    .sec08 .his_slide a > span{font-size: 48px; color: #fff; transition: 0.3s;}
    .sec08 .his_slide .overtxt{opacity: 0; display: none; transform: translateY(20px); transition: 0.3s; z-index: 1; position: absolute; top: 50%; left: 50%; width: 100%;}
    .sec08 .his_slide .overtxt .year span{ font-size: 40px;  display: block;  z-index: 1; background: linear-gradient(304deg, rgba(42,165,249,1) 0%, rgba(97,218,211,1) 100%);color: transparent;-webkit-background-clip: text; font-weight: 800;}
    .sec08 .his_slide .overtxt p{color: #Fff; font-size: 20px; margin-top: 15px; line-height: 1.3;}
    .sec08 .his_slide li:hover {box-shadow: 15px 17px 27px 4px #c1c1c1;}
    .sec08 .his_slide li:hover a::after{opacity: 1;}
    .sec08 .his_slide li:hover a > span{display: none;}
    .sec08 .his_slide li:hover .overtxt{opacity: 1; display: block; transform: translate(-50%, -50%);}
}

@media screen and (max-width: 900px){
    .sec08 .his_slide{padding-bottom: 0;}
    .sec08 .his_slide ul li{margin-right: 15px; width: calc(99.9%/3 - 30px/3);}
    .sec08 .his_slide ul li a::after{opacity: 1;}
    .sec08 .his_slide a > span{font-size: 25px;}
    .sec08 .his_slide .overtxt{display: block; opacity: 1; transform: translateY(-50%); left: 0;}
    .sec08 .his_slide .overtxt .year span{font-size: 16px;}
    .sec08 .his_slide .overtxt p{font-size: 14px; margin-top: 5px;}
}

@media screen and (max-width: 600px){
    .sec08 .his_slide{padding-top: 0; }
    .sec08 .his_slide ul{display: block;}
    .sec08 .his_slide ul li{width: 100%;  margin: 0 auto 20px;}
    .sec08 .his_slide .overtxt .year span{font-size: 28px;}
    .sec08 .his_slide .overtxt p{font-size: 18px;}
}

@media screen and (max-width: 450px){
    .sec08 .his_slide{padding-bottom: 0;}
}


footer .flexbox ul{flex-wrap: wrap;}
footer .flexbox .lef{flex: 1;}
footer .flexbox .rig{margin-left: 100px;}
footer .flexbox ul li:nth-of-type(2):after{display: none;}
footer .flexbox ul li:last-of-type{margin-top: 10px;}