img{width: 100%;height: 100%;}
button{font-family: inherit;}
/*header*/
header{position: relative;z-index: 99;position: fixed;width: 100%;top:0;left:50%;transform: translateX(-50%);}
header.on_h{background: #fff/* rgba(0,0,0,0.5) */;}
header.on_h .depth01 {color:#333}



header.on_h::before{background: #ddd;} 
header.on_h h1 img{content:url(../img/logo.png)}

.w_hader header.on_h .depth01 {color:#333}
.w_hader header.on_h img{content:url(../img/logo.png)}
.w_hader  header.on_h .lang i img{content:url(../img/lang.svg)}
.w_hader  header.on_h .lang p{color: #333;} 
.w_hader  header.on_h .lang p span{border-color:#ddd}

.w_hader header h1.on_logoimg img{content:url(../img/logo.png)}
.w_hader header .depth01{color: #fff;}
.w_hader header .depth01:hover{color: #333;}
.w_hader header h1 img{content:url(../img/w_logo.png)}

.w_hader header .lang i img{content:url(../img/lang2.svg)}
.w_hader header .lang p{color: #fff;} 
.w_hader header .lang p span{border-top:2px solid #fff;border-right:2px solid #fff;}


.w_hader header .lang.on_lang i img{content:url(../img/lang.svg)}
.w_hader header .lang.on_lang p{color: #333;} 
.w_hader header .lang.on_lang p span{border-color:#ddd}




/* header.on_h  h1 {  width: 140px;} */
header.on_h .depth01 {padding-left: 42%;}
header.on_h .depth01 > li > a { padding: 30px 0;}
/* header.on_h .depth02 {top: 110px;} */
/* header.on_h >div .depth01:hover::before {height: 770%;} */

header::before{content: '';display: block;width: 100%; height: 1px;background: #ddd;position: absolute;bottom:0;left:50%;transform: translateX(-50%);z-index: 9;}
header > div> div{display: flex;justify-content: space-between; align-items: center;}
header h1{width: 230px;z-index: 9;transition-duration: 0.3s;}

header .depth01 {display: flex;text-align: center;width: 100%;padding-left:40%;transition-duration: .7s;color: #333;    padding-right: 20px;}
header .depth01 > li{width: calc(100% / 4);position: relative;}
header .depth01 > li > em{padding:40px 0;display: block;font-weight: 600;font-size: 1rem;transition-duration: 0.3s;}


header .depth01 > li > em::before{content:'';display: block;width: 0%;background: #214085;height: 3px;position: absolute;bottom:0;left:50%;transform: translateX(-50%);transition-duration: 0.5s;}
/* header .depth01 > li > a::after{content:'';display: block;width: 4px;height: 4px;background: #fff;border-radius: 20px;position: absolute;right:0;top:50%;transform: translateY(-50%);opacity: 0.4;} */
header .depth01 > li > em:hover{color:#214085}
header .depth01 > li > em:hover::before{width: 100%;;}
header .depth02 {position: absolute;width: 100%;top:135px;display: none;color: #333;transition-delay: 0.3s;}
header .depth02 li{margin-bottom: 12px;}
header .depth02 li:last-child{margin: 0;;}


header >div .depth01::before{content: '';display: block;background: #fff;/* opacity: 0.6; */width: 130%;height: 0%;position: absolute;left:50%;transform: translate(-50%,-50%);top:0;transition-duration: 0.3s;    box-shadow: 0 0 15px rgb(0 0 0 / 8%);}

header .depth01:hover {padding-left:30%;color: #333;}
header >div .depth01:hover::before{height: 720%;}
header >div .depth01:hover .depth02{display: block;}

header .depth02 > li a{font-weight: 500;transition-duration: 0.3s;opacity: 0.9;display: flex;
    justify-content: center;
    align-items: center;}
header .depth02 > li:hover a{color: #214085;opacity: 1;}
header .depth02 > li:hover svg{color: #214085;}


header .depth02 > li svg{margin-left:5px;}
header .depth02 > li.on a{color: #214085;}
header .lang{position: relative;}
header .lang p{width: 90px;font-size: 1rem;color: #666;position: relative;display: flex;    align-items: center;font-weight: 600;cursor: pointer;} 
header .lang p i{width: 30px;;display: block;margin-right: 10px;;}
header .lang p span{width: 6px;height: 6px;;position: absolute;border-top:2px solid #bbb;border-right:2px solid #bbb;position: absolute;right:0;top:50%;transform: translateY(-50%) rotate(135deg);transition-duration: 0.3s;}
header .lang ul{position: absolute;width: 100%;padding:15px 7px;top:40px;background: #fff;display: none;z-index: 999;box-shadow:  0 0 10px rgba(0,0,0,0.1);}
header .lang ul li{margin-bottom:10px;color: #666;text-align: center;font-weight: 600;cursor: pointer;}
header .lang ul li:last-child{margin-bottom:0px;}


header .lang p span.rotate_on{transform: translateY(-50%) rotate(-45deg);}

/*mo_navi*/


header.on_h .nav_but span{background: #666;}

.mo_navi .nav_but{width: 30px;height: 32px;display: flex;    flex-direction: column; justify-content: space-around;align-items: flex-end;position: relative;    z-index: 999;}
.mo_navi .nav_but span{width: 100%;height: 2px;display: block;border-radius: 10px;transition-duration: 0.3s;background: #fff;}

/* #main .mo_navi .nav_but span{background: #fff;} */


.on_h .nav_but span{background: #666;}

.mo_navi{display: none;}
.mo_navi .nav_but.on span{background: #fff;}
.mo_navi .nav_but.on span:nth-child(2){width: 0;}
.mo_navi .nav_but.on span:nth-child(1){transform: rotate(45deg) translate(7px, 7px);}
.mo_navi .nav_but.on span:nth-child(3){transform: rotate(-45deg) translate(7px, -7px);}

.mo_navi .mo_depth01{position: absolute;width: 100vw;height: 100vh;right:-100vw;top:0;background: #214085;color: #fff;z-index: 9;display: flex;transition-duration: 0.3s;
    flex-direction: column;align-items: center;  justify-content: center;}
.mo_navi .mo_depth01 > li{margin:10px 0;text-align: center;    width: 100%;}

.mo_navi .mo_depth01 .mo_depth02{position: initial;background: #fff;padding:20px 0;transition-duration: 0s;margin-top:15px;display: none;transition-delay:0;}

.mo_navi .mo_depth01 .mo_depth02 a{display: flex;    justify-content: center;   align-items: center;}
.mo_navi .mo_depth01.on_nav{right:0vw;}
.mo_navi .mo_depth02{color: #333;}


header .lang.on_lang p{    z-index: 99;color: #fff;}
header .lang.on_lang img{content:url(../img/lang2.svg)}
header .lang.on_lang p span{border-color:#fff;}

/* #main header .lang.on_lang p{color:#fff}
#main header .lang.on_lang i img{content:url(../img/lang2.svg)} */


/*footer*/
footer{color:#666;padding-bottom: 20px;padding-top:30px;}
footer h2{width: 130px; }
footer .fot_depth01{margin: 40px 0 20px;;display: flex;}

footer .fot_depth01 li{cursor: pointer;}
footer .fot_depth01 li:first-child{font-weight: 600;color: #214085;}
footer .fot_depth01 li + li{margin-left: 30px;;}
footer .fot_depth02 li{margin-bottom: 4px;;}
footer .fot_depth02 li span{margin-right: 20px;;}
footer > div >div{display: flex;justify-content: space-between;align-items: flex-end;}



/*sub_header*/

.sub_header{position: relative;    z-index: 1;}
.sub_header i{display: block;background-position: center;background-size: cover;padding-bottom:30%;

/* 애니메이션 이름 */animation-name: sub_header_bg;animation-duration:5s; display: block; }
/* 키프레임 이름 = 애니메이션 이름 */
@-webkit-keyframes sub_header_bg {0% {transform: scale(1.1)}100% {transform: scale(1);}}



.sub_header .page_title.b_color_txt h5{color: #333;;}
.sub_header .page_title.b_color_txt h4{color: #333;;}
.sub_header .page_title.b_color_txt{text-shadow: none;}


.sub_header div.page_title{position: absolute;margin:0 auto;left:50%;transform: translateX(-50%);color: #fff;z-index: 9;bottom:80px;      text-shadow: 0 0 10px rgba(0,0,0,0.2)}
.sub_header .page_title h4{  font-size:4rem;    height: 93px;margin-bottom: 30px;}
.sub_header .page_title::after{content:'';display: block;width: 150%;position: absolute;background: #fff;height: 100px;;

/* 애니메이션 이름 */animation-name: page_title_after;animation-duration:1.2s; display: block; }
/* 키프레임 이름 = 애니메이션 이름 */
@-webkit-keyframes page_title_after {0% {transform: translateY(100px);opacity: 0;}100% {transform: translateY(00px);opacity:1;}}


.sub_header.pro_type div.page_title::after{background: #f5f5f5;}
.sub_header .page_title > div{margin-bottom: 30px;}

.sub_header .page_title p{color:#fff; }

.sub_header ul{display: flex;justify-content: flex-end;position: absolute;left: 50%;  transform: translateX(-50%);  z-index: 9;font-size: 0.9rem;bottom: 20px;}

.sub_header .s_header_ul{    z-index: 99;position: relative;
  display: block;
/* 애니메이션 이름 */animation-name: s_header_ul;animation-duration:1.2s;  }

@-webkit-keyframes s_header_ul {0% {transform: translateY(100px);opacity: 0;}100% {transform: translateY(00px);opacity:1;}}



.sub_header ul li{color: #666;    display: flex;  align-items: center;}
.sub_header ul li svg{margin-right: 4px;}
.sub_header ul li a{display: flex; justify-content: center;align-items: center;}
.sub_header ul li span{font-size: 0.5rem;margin:0 10px;transform: scale(0.7);display: block;


}


/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
   
    
    header .depth01 {padding-left: 20%;}
    header .depth01:hover {padding-left: 20%;}

 }
 
 /* ********************************************* *
 * 1400px
 * ********************************************* */
 @media screen and (max-width: 1400px){
 
  
    header .depth02 li {margin-bottom: 7px;}
    header >div .depth01:hover::before {height: 680%;}

    .sub_header i { padding-bottom: 40%;  }
 }
 
 /* ********************************************* *
 * 1200px
 * ********************************************* */
 @media screen and (max-width: 1200px){
 
    header > div> div{padding:20px;}
    header .depth01{display: none;}
    header h1 {width: 130px;}
    header .lang{position: absolute;right:80px;}
    .mo_navi{display: block;z-index: 99;}
 }
 
 /* ********************************************* *
 * 1024px
 * ********************************************* */
 @media screen and (max-width: 1024px){
 
  .sub_header .page_title h4 {font-size: 3rem;height: 68px;}
 }
 
 
 /* ********************************************* *
 * 960px
 * ********************************************* */
 @media screen and (max-width: 960px){
 
 
   footer {  font-size: 0.9rem;}
 
   .sub_header i { padding-bottom: 50%;  }
 
 }
 
 
 /* ********************************************* *
 * 768px
 * ********************************************* */
 @media screen and (min-width: 769px){
  
 
  
 }
 @media screen and (max-width: 768px){
   footer .fot_depth01 {margin: 20px 0 10px;}
   footer > div >div {display: block;}
 
   footer .bd-xl > div > p{text-align: right;}
   footer { padding-top: 60px;}
 }
 
 
 /* ********************************************* *
 * 640px
 * ********************************************* */
 @media screen and (max-width: 640px){
   footer .fot_depth01 li:first-child { margin-right: 20px;}
   footer .fot_depth02 li span {margin-right: 10px;}

   header > div> div {padding: 10px; }
   header h1 {width: 100px;}
   header .lang p i {width: 20px;}
   header .lang p {width: 70px;  font-size: 0.9rem;}
   header .lang ul {  padding: 5px 4px;top: 30px;font-size: 0.9rem;}
   header .lang ul li{margin-bottom: 4px;}
   header .lang {right: 60px;}
   .mo_navi .nav_but {width: 22px; height: 22px;}
   .mo_navi .nav_but.on span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
   .mo_navi .nav_but.on span:nth-child(3) {transform: rotate(-45deg) translate(5px, -6px);  }

   
   .sub_header i { padding-bottom: 60%;  }
   .sub_header .page_title h4 {font-size:2.5rem;height: 58px;    margin-bottom: 15px;}
   .sub_header .page_title h5{    font-size: 1rem;    height: 20px;}
 }
 
 
 /* ********************************************* *
 * 500px
 * ********************************************* */
 @media screen and (max-width: 500px){
 

 footer h2 {width: 100px;}
   
 .sub_header i { padding-bottom: 70%;  }
 .sub_header .page_title h4 {font-size:2.2rem;height: 48px; }
 .sub_header  .page_title h5{    font-size: 0.9rem;}

 .sub_header .page_title::after {height: 50px;}
 .sub_header div.page_title {bottom: 46px;}
 .sub_header ul {font-size: 0.8rem; bottom: 10px;}


 }
 
 /* ********************************************* *
 * 400px
 * ********************************************* */
 @media screen and (max-width: 400px){
   footer { padding-top: 20px;}
 
 }