/* body{background-color: #000;} */
.header { display: flex;justify-content: space-between;position:absolute;padding:40px;width:100%;transition-duration:0.3s ;top: 0;}
.header .logo{width:150px;z-index:999;}
.header .logo h1{width:150px;background:url(../img/logo.svg) no-repeat;height:50px;}
.header .logo h1 a{display: block; height: 100%;;}

.header .logo h1.h_on{background:url(../img/logo_red.svg) no-repeat;}


.nav{position:absolute;top:43px; left:0;width: 100%;z-index: 9;padding:0 40% 0 210px;;}
.nav .depth01{width: 100%;;}
.nav .depth01 > li{display: inline-block; vertical-align: top;width:calc(100% / 6);    margin-right: -4px;padding-bottom: 44px;color:#fff; }
.nav .depth01 > li > a{display: block; width: 100%; text-align: center; }

.nav .depth01 > li > a{font-size:1.15rem;font-weight: 600; display: block;cursor: pointer;}
.nav .dep_in {display: none;color:#333;width: 100%;position:absolute;lefT:0;top:70px;
    height:240px;    overflow: hidden; transition-duration:0.6s ;opacity: 0;}
.nav .depth01::before{width:100%;height:0%; background-color: #f5f5f5;content: '';position: absolute;top:70px;left:0;transition-duration: 0.2s;}


    .nav .depth01 > li:hover .dep_in{opacity: 1;display: block;}
    .nav .depth01:hover::before{height:240px; }

    /* .nav .depth01 > li .dep_in.on_h{height:240px;} */

/* .nav .dep_in > div::before{width:200%; content: ''; display: block; height:100%; background-color: #f5f5f5;position:absolute;top:0; left:-50%; height:100%;transition-duration:0.3s ;} */
.nav .dep_in > div{position:absolute;width:100%;display: flex;top:0;height:100%;opacity: 1;overflow: hidden;/* display: none; *//* background-color: #f5f5f5; */
    left: 0;transition-duration:0.3s ;}



    
    /* .nav .dep_in:hover {display: block;}
/* .nav .depth01 li:hover .dep_in{display: block;} */
/* .nav .depth01 > li:hover  a{color:#0c3869} */
/* .nav .depth01 li:hover .dep_in > div{height: 240px;opacity: 1;} 
.nav .depth01 li:hover .dep_in > div::before{height: 100%;}  */ 

.nav .depth02_01{width:45%; margin-right:25%;/* transform: translateY(40px); */opacity: 1;transition-duration:0.5s ;position:absolute;top:50%;left:0;transform: translateY(-50%);padding-left:13%;} 

.header_bg{    width: 100%;
    height: 130px;
    background-color: #fff;
    display: block;
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;z-index: 1;display: none;}



.nav .depth02_01 > li{width:50%; display: inline-block;padding:3px;position:relative; color:#888;font-size:1.125rem;margin:10px -2px;}
.nav .depth02_01 > li:hover a{color:#0c3869}



.nav .depth02_01 > li:after{content:'＋'; display: block; position:absolute;right:10%; top:50%; transform: translateY(-50%);  transition: all 0.5s linear;}
.nav .depth02_01 > li:hover::after{color:#0c3869}


.nav .depth02_01 > li a{padding-left:3%;width: 100%;
    display: block;}
.nav .depth02_01 > li a::before{content:''; display: block; width:90%; height:1px;background-color: #ddd;position:absolute; bottom:0;transition-duration: 0.5s;}

.nav .depth02_01 > li a::after{content:''; display: block; width:0%; height:1px;background-color: #0c3869;position:absolute; bottom:0;transition-duration: 0.5s;}
.nav .depth02_01 > li:hover a::after{width:90%;}


.nav .depth02_02{width:30%;z-index: 0;position:relative;;opacity: 0;position:absolute;top:50%;right:200px;transform: translateY(-50%);display: flex;align-items: center;height:70%; overflow: hidden;transition-duration: 0.2s;}

.nav .depth01 > li:hover .depth02_02{opacity: 1;}

.nav .depth02_02 .tit{font-size:1.25rem;font-weight: 600;}

.nav .depth02_02 .poto_tit{/* position:absolute; */padding:10px 15px;/* bottom:0;left:0; */width:100%;background-color: #fff;;}
.nav .depth02_02 .poto_tit p:first-child{font-size:1.4rem;font-weight: 600;}
.nav .depth02_02 .poto_tit p:last-child{font-size:0.85rem;color:#888;margin-top:10px;}
.nav .depth02_02 .poto_tit:first-child{width:45%;display: flex;word-break: keep-all;
    flex-direction: column;    height: 100%;padding:0 25px;
    justify-content: center;}
.nav .depth02_02 .poto_tit:last-child{width:55%;height: 200px; display: block;}


.nav .depth01 li:first-child .depth02_02 .poto_tit:last-child{background: url(../img/had_img01.jpg)no-repeat center/cover;}
.nav .depth01 li:nth-child(2) .depth02_02 .poto_tit:last-child{background: url(../img/had_img02.jpg)no-repeat center/cover;}
.nav .depth01 li:nth-child(3) .depth02_02 .poto_tit:last-child{background: url(../img/had_img03.jpg)no-repeat center/cover;}
.nav .depth01 li:nth-child(4) .depth02_02 .poto_tit:last-child{background: url(../img/had_img04.jpg)no-repeat center/cover;}
.nav .depth01 li:nth-child(5) .depth02_02 .poto_tit:last-child{background: url(../img/had_img05.jpg)no-repeat center/cover;}
.nav .depth01 li:last-child .depth02_02 .poto_tit:last-child{background: url(../img/had_img06.jpg)no-repeat center/cover;}


/* sub_logo */
.sub_logo{z-index: 9;margin-top: 2px;}
.sub_logo ul{display:flex;width: 230px;align-items: center;margin-right:150px}
.sub_logo ul li{margin:0 12px;    width: 13%;}
.sub_logo ul li.logo_01_s{width: 61%;}

.sub_logo ul .logo_01_s:hover img{content:url("../img/sub_logo01_y.svg");}
.sub_logo ul .logo_02_s:hover img{content:url("../img/sub_logo02_y.svg");}
.sub_logo ul .logo_03_s:hover img{content:url("../img/sub_logo03_y.svg");}
.sub_logo ul .logo_04_s:hover img{content:url("../img/sub_logo04_y.svg");}


.m_sub_logo{display: none;}

.sub_logo ul li.logo_01_s img.logo_on{content:url("../img/sub_logo01_black.svg");opacity: 0.8;}
.sub_logo ul li.logo_02_s img.logo_on{content:url("../img/sub_logo02_black.svg");opacity: 0.8;}
.sub_logo ul li.logo_03_s img.logo_on{content:url("../img/sub_logo03_black.svg");opacity: 0.8;}
.sub_logo ul li.logo_04_s img.logo_on{content:url("../img/sub_logo04_black.svg");opacity: 0.8;}


.lag{width:85px;font-size:0.95rem; color:#Fff;margin-top:2px;position: absolute;
    right: 100px;
    z-index: 9;}
    .lag p.h_on02{border-color:none;color:#fff;background-color: #000;}





.lag p{position:relative;width:100%;border:1px solid #fff; padding:3px 10px 2px;cursor: pointer;}
.lag p.color_on{background: #000;}
.lag p span{ font-size:15px;position:absolute;right:10px;top:50%;transform: translateY(-50%);transition-duration:0.3s ;}
.lag p span.ro_tran{transform: translateY(-50%) rotate(180deg);}


.lag ul{border:1px solid #fff; background: #000;padding:10px;position:absolute;top:30px;left:0;width:100%;display: none;}
.lag ul li{cursor: pointer;}

.mo_nav{position:absolute;right:0;top:0;z-index: -1;/* display: none; */}
.mo_nav.action_01{opacity: 1; z-index: 99;display: block;} 
.mo_nav.action_01 .nav_hover{visibility: visible;}
.mo_nav .nav_hover{visibility: hidden;}


.op_cl{width:25px;height:20px;display: flex; flex-direction: column; justify-content: space-between;position:absolute; right:45px;top:48px;z-index: 9999;cursor: pointer;}
.op_cl span{width:27px; height:2px; background-color: #fff;display: block; transition-duration:0.3s ;}
.op_cl span.on:first-child {transform:rotate(45deg) translate(3px,10px);background-color:#444 !important;width:21px;}
.op_cl span.on:last-child {transform:rotate(-45deg) translate(3px,-10px);background-color:#444 !important;width:21px;}
.op_cl span.on:nth-child(2) {width:0;;}


/* .mo_nav{background-color: #333;} */


/* .mo_nav .nav_hover{ display: none;} */
.mo_nav .depth01{width:100vw; height:100vh;padding-right:150px;transition-duration:0.1s;} 
.mo_nav .nav_hover.action_01{display: block;}

/* .mo_nav .nav_hover.action_01{opacity: 1; display: block;} */
.mo_nav .depth01 > li{display: inline-block;margin-left:-4px; vertical-align: top;width:16.5%;height:100%;padding:80px 0;overflow: hidden;
transition:opacity 0.2s ;position:relative}
.mo_nav .depth01 > li:last-child{width:176px;position: absolute;
    right: 0;opacity: 0;background: #fff;transition-duration:0.4s ;
    top: 0;}
    .mo_nav .depth01 > li::after{width:1px; height:100vh; content:'';display: block;background-color: #ddd;position:absolute;top:0;left:0;
    }
    .mo_nav .depth01 > li.action03{opacity: 1;}
.mo_nav .depth01 > li span{width:0%; height:100%; background-color: #fff; content:'';display: block;position:absolute;top:0;left:0;z-index: -1;transition-duration:0.5s ;}


.mo_nav .depth01 > li span.action{width:100%;}

.mo_nav .depth01 > li span.action::before{width:100%; height:100%; content:''; display: block ;background: #fff;;}

.mo_nav .depth01 > li> div.action02{transform: translateX(0);}


.mo_nav .depth01 > li> div{transform: translateX(-300px); transition-duration:0.6s ;}  

.mo_nav .depth01 > li > div> a{font-size:1.25rem;font-weight: 600;padding:0 60px;}
.mo_nav .depth02{margin-top:60px;}
.mo_nav .depth02 > li{color:#666; transition-duration: 0.5s;/* height:75px; */position:relative;z-index: 9;}
.mo_nav .depth02 > li> a{font-size:1rem;font-weight: 4000;width:100%; height:100%; display: block;padding:18px 60px;}
.mo_nav .depth02 > li::before{width:0; height:100%; content: ''; background-color: #0c3869; position:absolute; top:0;left:0;transition-duration: 0.5s;z-index: -1;}
.mo_nav .depth02 > li:hover::before{width:100%;}
.mo_nav .depth02 > li:hover{color:#fff;}
.mo_nav .depth01 > li:hover{color:#0c3869;}

.pc_ver{position: absolute; width: 100%; lefT: 0; top: 0;display: block;}
.mo_ve{position: absolute; width: 100%; lefT: 0; top: 0;/* display: none; */z-index: 99;}

.mo_ve .mo_nav02{background-color: #fff;z-index: -1;}
.mo_ve .nav_hover{display: none;height: 100vh;
    background: #fff;}
.mo_ve .depth01{padding:100px 20px 20px 20px;border-top:1px solid #ddd;}
.mo_ve .depth01 > li {}
.mo_ve .depth01 > li > a{font-size:1.125rem; font-weight: 600;display: block;width:100%;position:relative;padding: 10px;border-bottom:1px solid #ddd;}
.mo_ve .depth01 > li > a span{border-top:2px solid #ddd; border-right:2px solid #ddd; position:absolute;right:10px; top:50%; transform: translateY(-50%) rotate(135deg);width:8px;height:8px;}
.mo_ve .depth01 > li > a span.rotate_on{transform: rotate(-45deg);}


.mo_ve .depth01 > li:last-child a span{display: none;}

.mo_ve .mo_lag ul{display: flex;justify-content: center;font-size:1rem;font-weight: 600;}
.mo_ve .mo_lag ul li{margin:0 10px;position: relative;opacity: 0.7;}
.mo_ve .mo_lag ul li:first-child:after{content:'';display: block;width:2px; height:12px; background: #000;opacity: 0.5;position:absolute;top:50%;transform: translateY(-50%);right:-10px;}
.mo_ve .mo_lag ul li.on{color:#0c3869;opacity: 1;}

.mo_ve .depth02{display: none;}
.mo_ve .depth02 li{border-bottom:1px solid #ddd;}
.mo_ve .depth02 li:last-child{border-bottom:1px solid #ddd;}
.mo_ve .depth02 li a{font-size:1rem; font-weight: 400;padding:10px;display: block;background-color: #f5f5f5;color:#888}




/* footer */


.footer{background-color: #f5f5f5;font-size:14px;font-weight: 400;}
.footer .top{border-bottom:1px solid #ddd;}
.footer ul{display: flex;justify-content: space-between;align-items: center;padding:30px 0;}
.footer .left{display: flex;}
.footer .top .left p{position: relative;}
.footer .top .left p::before{content:'';display: block; width: 2px ;height: 14px; position:absolute;top:50%; transform: translateY(-50%); right:0;background-color: #000;opacity: 0.2;}
.footer .top .left p:last-child::before{display: none;}
.footer .top .left p:first-child{color:#0c3869}
.footer .left p{margin-right:7px;padding-right:7px;font-weight: 500;opacity: 0.8;}
.footer .top .right{width:150px;}
.footer .bottom .left span{margin-right:5px; opacity: 0.7;font-weight: 400;}
.footer .bottom p{font-weight: 600;opacity: 0.8;}









/* sub_header */

.sub_header{position: relative;}
.sub_header .top_sub{position: relative;}
.sub_header .top_sub > div{height: 100%;}
.sub_header .text_box{color:#fff;position:absolute;left:200px; top:50%; transform: translateY(-50%);display: flex;align-items: flex-end;}
.sub_header .text_box b{font-size:3.5rem;font-weight: 500;margin-right:15px;}
.sub_header .text_box p{font-size:1.125rem;font-weight: 400; padding-bottom:15px;}


.sub_header .top_sub{width: 100%; height: 500px;background-color: #666;overflow: hidden;}
.sub_header .bottom_sub{width: 100%;background-color:#f5f5f5;padding:20px 0;border-bottom:1px solid #ddd;border-top:1px solid #ddd;}
.sub_header .bottom_sub >div {display: flex;align-items: center;}

.sub_header .left{width:40px;margin-right:10px;}
.sub_header .center{width:250px; position: relative;}
.sub_header .right{width:250px; position: relative;}
:lang(en).sub_header .right {
    width: 300px;}
.sub_header .bottom_sub ul{position:absolute;background: #f5f5f5;padding:20px;top:54px;left:0;width: 100%;z-index: 3;border:1px solid #ddd;display: none;line-height: 2;font-size:1.125rem;}
.sub_header .bottom_sub ul li.on{color:#0c3869;}
.sub_header .bottom_sub .tit_on{padding-left:20px;font-size:1.125rem;font-weight: 400;}
.sub_header .left{background: #0c3869;display: flex;justify-content: center;
    align-items: center;color: #fff;font-size:1.25rem;;}

    .sub_header .right .txt{color:#0c3869;font-weight: 600;}
    .sub_header .rota_s{position:absolute;right:20px;transition-duration: 0.3s;}
    .sub_header .rota_s.on_rota{transform: rotate(180deg);}

.sub_header .top_sub > div{
    animation-name: top_sub;
    animation-duration:4s;
    animation-duration: leaner;
    animation-iteration-count:1;
    }

/* 키프레임 이름 = 애니메이션 이름 */
@-webkit-keyframes top_sub {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.sub_header .text_box b span{
    display: block;
    animation-name: text_box_b;
    animation-duration:1.5s;
    animation-duration: leaner;
    animation-iteration-count:1;
    }

/* 키프레임 이름 = 애니메이션 이름 */
@-webkit-keyframes text_box_b {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;

    }
}

.sub_header .text_box p span{
    display: block;
    animation-name: text_box_p;
    animation-duration:1.5s;
    animation-duration: leaner;
    animation-iteration-count:1;
    }

/* 키프레임 이름 = 애니메이션 이름 */
@-webkit-keyframes text_box_p {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    20% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;

    }
}





.sec_top h3{font-size:2.5rem;text-align: center;}
.content{padding:140px 0;}
.con{padding-top:80px}

/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
    .mo_nav .depth01 > li > div> a {padding: 0 30px;}
    .mo_nav .depth02 > li> a {padding: 18px 30px;}
}
/* ********************************************* *
 * 1500px
 * ********************************************* */
 @media screen and (max-width: 1500px){
    .nav {top: 113px;padding: 0 20% 0 0;}
    .header_bg { height: 180px;}
    .nav .depth01::before {top: 60px;}
    .nav .dep_in { top: 60px;}
    .nav .depth02_01 {padding-left: 3%;}
    .nav .depth02_02 {right: 40px;}


}


/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){
    .sub_header .text_box {left: 30px;}

    .nav .depth02_02 {width: 45%;}
    .mo_nav .depth01 > li:last-child { width: 100px;}
    .mo_nav .depth01 {padding-right: 95px;}
    .mo_nav .depth01 > li {width: 16.7%;}
    .op_cl {right: 25px;}
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
    .nav {display: none; }
.header .pc_ver{display: none;}
.header .mo_ve{display: block;}
.lag{z-index: 999; right: 100px;}



.fp-tableCell {height: auto !important;}  
.sec02 .con { height: auto !important;}
.sec02 .bo_con {height: 153px;}
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
    .footer .bottom ul{display: inherit;}
    .footer .bottom .left{display: inherit;}
    .footer .bottom li:last-child{margin-top:30px;}
    .footer .top .right {
        width: 120px;
    }
    .footer ul{padding: 20px ​0;}


    .header {padding: 25px;}
    .mo_ve .op_cl {right: 25px;top: 33px;}
    .lag {z-index: 999;right: 80px;}
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
    .content { padding: 100px 0;}


}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){
 

 
}
@media screen and (max-width: 768px){
    .sub_header .bottom_sub {height: 80px;}
    .sub_header .bottom_sub ul {top: 52px;}
.pc_sub_logo{display: none;}
.m_sub_logo{display: block;}


.sub_logo ul {margin: 50px auto 0;opacity: 0.8;    width: 170px;}
}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){

    .sub_header .bottom_sub {padding: 10px 0;height: 60px;display:flex;align-items: center;}
    .sub_header .bottom_sub ul { top: 41.5px;}
    .sub_header .text_box b {font-size: 2.5rem;}
    .sub_header .text_box p {font-size: 1rem;padding-bottom: 10px;}
    .sub_header .top_sub {height: 420px;}
    .sec_top h3 {font-size: 2rem;}
}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
    .content {padding: 70px 0;}
    .con {padding-top: 40px; }
    .sub_header .top_sub {height: 300px;}
    .sub_header .left {width: 60px;}

    .footer ul {align-items: flex-start;flex-direction: column-reverse; padding:20px 0;}
    .footer .top .right {margin-bottom: 10px;}


    .sec02 .top_con li {margin-bottom: 25px; }
    .sec02 .top_con li p.txt01 span {color: #0c3869;}

    .header .logo h1 {width: 130px;margin-top:5px;}

    .sub_header .center {
        width: 340px;display:none}
}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){

    .sub_header .left {width: 40px;}
    .lag {display: none;}
    .sub_header .bottom_sub .tit_on { padding-left: 10px;  font-size: 1rem;}
    .sub_header .rota_s {right: 10px;}

}