@charset "utf-8";
@font-face{ 
    font-family:'NotoSans'; 
    src:url('../fonts/NotoSansKR-Light.otf'); 
}
*{font-family: 'NotoSans', sans-serif; font-size: 15px; line-height: 0; box-sizing: border-box; word-break: keep-all; -webkit-tap-highlight-color : rgba(0, 0, 0, 0); }
#portfolio_slider ul li .overlay{display: none; opacity: 0;}
*:focus{outline:none;}
html,body{width: 100%; height: 100%; overflow: auto;}
p,span,li,a{line-height: 1.5;}
a{text-decoration: none; color: inherit;}
input{-webkit-appearance: none;}
img{max-width: 100%;}
#wrap{width: 100%; padding-top: 60px; min-height: 100%;}
.inner{width: 100%; max-width: 1200px; margin: 0 auto;}
header{background: #212027; position: fixed; top: 0; left: 0; width: 100%; padding: 10px 0; z-index: 99;}
header::after{content: ''; display: block; clear: both;}
header .menu{display: none;}
.header_inner{position:relative; width: 100%; max-width: 1200px; margin: 0 auto;}
.logo{position:absolute; top:0; left:0; vertical-align: middle; padding-left: 8px; width: 90px; line-height: 40px;}
.logo img{vertical-align: middle;}
.header_menu{ text-align: center;}
.header_menu li{display: inline-block; height:40px; line-height: 40px; vertical-align: middle; padding: 0 20px;}
.header_menu li:hover, .header_menu li.on{background: #3c3c3c;}
.header_menu li a{display: block; color: #fff; font-size: 18px; line-height: 40px;}
.m_header{display: none;}
#container{width: 100%; margin: 0 auto; min-height: 100%; }
.main-box{width: 100%; height: 1000px; background: url(../img/main.jpg) no-repeat 0 0; background-size: 100% 100%;  display: -webkit-flex; display: flex; -webkit-justify-content: center;  justify-content: center;  -webkit-align-items: center;  align-items: center; }
.main-box .inner{position:relative; width:100%; height: 90px;}
.text-effect{position: absolute; top: 0; left: 0; display: none;}
/*  */
.effect-box ul{display: flex; width: 500px; justify-content: space-between; align-items: flex-end; align-content: center;}
.effect-box ul li.animate{position: relative; width: 240px; height: 80px; }
.effect-box ul li img{max-height: 80px;}
.effect-box ul li .bigd{position: absolute; top: -150px; opacity: 0; animation: bigdAni 11s linear infinite;}
.effect-box ul li .o{position: absolute; top: 0; left: 0;  animation: oAni 11s linear infinite;}
.effect-box ul li .n{position: absolute; top: 0; left: 80px;  animation: nAni 11s linear infinite;}
.effect-box ul li .e{position: absolute; top: 0; left: 160px;  animation: eAni 11s linear infinite;}
.effect-box ul li .d{position: absolute; top: 0; right: 25px; opacity: 0;  animation: dAni 11s linear infinite;}
.effect-box ul li .dot{position: absolute; top: 0;right:0; height: 37px; opacity: 0;  animation: dotAni 11s linear infinite;}
.effect-box ul li .wave{height: 60px;}
@keyframes bigdAni{
    0%{top: -150px; left: 80px;  opacity:0; transform: rotateZ(0);}
    25%{top: -150px; left: 80px; opacity:0; }
    30%{top: 0px; left: 80px; opacity: 1;}
    55%{top: 0px; left: 80px;}
    60%{top: 0px; left: 160px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
    65%{top: 0px; left: 160px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
    70%{top: 0px; left: 160px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
    100%{top: 0px; left: 160px; transform: rotateZ(-180deg);opacity: 0;}
    
}
@keyframes oAni{
    0%{top:0; left:0; opacity: 0;}
    15%{top:0; left:0; opacity: 1;}
    20%{top:0; left:0; opacity: 1;}
    25%{top:0; left: 160px}
    50%{top:0; left: 160px; opacity: 1;}
    55%{top:-150px; opacity: 0; left: 160px}
    100%{top: -150px; opacity: 0;  left: 160px;}
    

}
@keyframes nAni{
    0%{top:0; opacity: 0;}
    15%{top:0; opacity: 1;}
    20%{top:0; opacity: 1;}
    25%{top:-150px; opacity: 0;}
    100%{top:-150px; opacity: 0;}
    
}
@keyframes eAni{
    0%{top:0; opacity: 0;}
    15%{top:0; opacity: 1;}
    20%{top:0; opacity: 1;}
    25%{top:150px; opacity: 0;}
    100%{top:150px; opacity: 0;}
    
}
@keyframes dAni{
    0%{top: 0; right:25px; opacity: 0;}
    60%{top: 0; right:25px; opacity: 0;}
    70%{top: 0; right:25px; opacity: 1;}
    90%{top: 0; right:25px; opacity: 1;}
    100%{top: 0; right:25px; opacity: 0;}
    
}
@keyframes dotAni{
    0%{top: 0; right:0; opacity: 0;}
    60%{top: 0; right:0; opacity: 0;}
    70%{top: 0; right:0; opacity: 1;}
    90%{top: 0; right:0; opacity: 1;}
    100%{top: 0; right:0; opacity: 0;}
}
/*  */
.menu-box{background: #ececec; padding: 100px 0;}
.mid_menu{width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden;}
.mid_menu::after{display: block; content: ""; clear: both;}
.mid_menu>li {position:relative; float: left; width: 33.333%; overflow: hidden; line-height: 0; transform: translateY(150px); opacity: 0.5; transition: all 0.8s; }
.mid_menu>li.on{transform: translateY(0); opacity: 1; }
.mid_menu>li a{display: block; width: 100%; height: 100%;}
.mid_menu>li a .a-box{display: block; width: 100%; height: 100%;}
.mid_menu>li a .a-box::after{display: block; content: ''; clear: both;}
.mid_menu>li img.bg-img{ transition: all 0.5s; width: 100%;}
.mid_menu>li .bottom{background: #2b6fc1; position: absolute; bottom: 0;width: 100%; transform: translateY(100%); transition:  all 0.5s; }
.mid_menu>li .bottom .more::after{display: block; content: ''; clear: both;}
.mid_menu>li .bottom .more{height:140px; padding: 0 40px; display: flex; flex-direction: row;  justify-content: space-between; align-content: center; align-items: center;}
.mid_menu>li .bottom .more li{display:block; box-sizing: border-box; color:#fff; font-size: 15px;}
.mid_menu>li .bottom .more li:first-child{flex:5}
.mid_menu>li .bottom .more li:last-child{flex:1}
.mid_menu>li .bottom .more li img.arrow{vertical-align: middle;}
.mid_menu>li .overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); transition:  all 0.5s; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; line-height: 0}
.mid_menu>li .overlay span{color:#fff; }
.mid_menu>li .overlay span.title{font-size: 15px;}
.mid_menu>li .overlay span.sub{font-size: 20px;}
.mid-box{background: rgba(0, 0, 0, 0.7); transition:  all 0.8s;}
.mid-box.on{background: url(../img/mid-img.png) no-repeat center; background-size: 100%;}
.mid-box .mid-text{font-size: 23px; text-align: center; padding: 100px 0; color: #000; transition: all 0.8s;}
.mid-box.on .mid-text{ color: #fff;}
.partners-list{width:100%; max-width: 1200px; margin: 0 auto;}
.partners-box{padding: 100px 0;}
.partners-box .title{font-size: 30px; text-align: center; margin-bottom: 30px; font-weight: bold;}
.partners-list::after{display: block; clear: both; content: ''}
.partners-list li{float: left; width: 20%; text-align: center; margin-bottom: 20px; color: #3c3c3c;}
.map-box{line-height: 0;}
footer{background: #000232; padding: 50px 0; }
footer p{color:#fff; font-size: 16px;}
.company .mission{position: relative;}
.company .mission .background-img{width: 100%; height: 650px; object-fit: cover; object-position: 50% 30%;}
.company .mission .overlay{position:absolute; top: 0; left: 0; width: 45%; height: 650px; background: rgba(87, 182, 203, 0.8); }
.company .mission .overlay.on{transform: translateX(0); opacity: 1;}
.company .mission .inner{padding: 100px 0;}
.company .mission .inner p{color:#fff;}
#container p b{font-weight: bold;}
#container p.title{font-size: 20px; margin-bottom: 15px;}
#container p.copy{font-size: 28px; margin-bottom: 10px; }
#container p.sub{font-size: 18px; line-height: 1.3; margin-bottom: 15px;font-style: italic;}
#container p.subtext{font-size: 15px; margin-bottom: 15px;}
.company .value{position: relative;}
.company .value .background-img{position: absolute; top: 0; right: 0;  width: 40%; height: 730px; object-fit: cover; object-position: 50% 30%}
.company .value .inner{padding: 100px 0; height: 730px;}
.company .value .hop::after{display: block; content: ''; clear: both;}
.company .value .hop li{float: left;}
.company .value .hop li .hop-text{font-size: 35px; font-style: italic; font-weight: bold;}
.company .value .three-box{ width: 75%; position: relative; display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; margin: 50px 0;}
.company .value .three-box li{ width: 31%; display: flex; transform: translateY(100px); opacity: 0.5; transition: all 0.8s; }
.company .value .three-box li.on{transform: translateY(0); opacity:1;}
.company .value .three-box li .box{display: flex; flex-direction: column; justify-content: space-between; background: rgba(43,109,193,0.7); box-shadow: 2px 2px 10px #424242; padding:30px 20px;}
.company .value .three-box p.p1{color: #fff; font-size: 17px; margin-bottom: 25px;}
.company .value .three-box p.p2{color: #fff; font-size: 15px;}
.company .one{position: relative; height: 540px; display: flex; flex-direction: column; justify-content: space-between;}
.company .one .one-content-box{position: absolute; top: 0; right: 0; height: 540px; background: #33367f; width: 55%; padding: 50px 0;}
.company .one .one-content-box ul li {display: flex; flex-direction: row; justify-content: flex-start; align-content: stretch; align-items: center; margin-bottom:  30px;}
.company .one .one-content-box ul li .dot{display: block; width: 15px; height: 15px; background: #000460; border-radius: 50%;  margin-left: -7px; margin-right: 20px;}
.company .one .one-content-box ul li  p{color: #fff; font-size: 15px; transform: translateX(500px); opacity: 0; transition: 0.8s;}
.company .one .one-content-box ul li.on p{transform: translateX(0); opacity: 1;}
.company .one .one-content-box .result{color: #57b7cc; font-size: 18px; font-weight: bold; padding: 0 27px; transform: translateY(100px); opacity: 0; transition: all 0.8s;}
.company .one .one-content-box .result.on{transform: translateY(0); opacity: 1;}
.company .one .btn-box{padding-bottom: 50px;}
.company .one .apply img{width: 120px;}
.culture .intro{background: url(../img/culture_intro.jpg) no-repeat 50% 30%; background-size: 100% auto; padding: 50px 0;}
.culture .intro p{color: #fff;}
.culture .intro .three{display: flex; flex-direction: row; margin: 50px 0;}
.culture .intro .three li{width: 25%; border-left: 2px solid #fff; display: flex; flex-direction: column; justify-content: space-between; padding-left: 20px;}
.culture .intro .three p.p1{font-size: 20px; margin-bottom: 20px; line-height: 1.3;}
.culture .intro .three p.p1{font-size: 15;}
.culture .happy{padding: 50px 0;}
.culture .img-list{display: flex; flex-direction: row; justify-content: center; align-content: center; text-align: center; margin :50px 0;}
.culture .right-box {padding-left: 30%;}
.culture .right-box .img-list{justify-content: flex-end; text-align: left;}
.culture .img-list li{padding: 0 20px;}
.culture .img-list p.p1{font-weight: bold; font-size: 16px;}
.culture .img-list p.p2{font-size: 15px;}
.culture .passion{background: url(../img/culture_passion_bg.jpg) no-repeat 0 0; background-size: 45% 100%; padding: 50px 0;}
.culture .passion .inner>p{color: #fff;}
.culture .progress{padding:50px 0;}
.culture .progress .do-box{margin: 50px 0;}
.culture .progress .do-box ul{display: flex; flex-direction: row; justify-content: space-between; align-content: center}
.culture .progress .do-box ul li:nth-child(1){flex: 1.5; margin-right: 40px;}
.culture .progress .do-box ul li:nth-child(2){flex: 1;}
.culture .progress .do-box ul li .do{position:relative; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background: #00045f; color: #fff; text-align: center; font-weight: bold; margin: 0 auto; font-size: 25px; }
.culture .progress .do-box ul li .contents{background: #2c6dc2; padding: 35px 30px 20px; margin-top: -20px;}
.culture .progress .do-box ul li .contents p{position:relative; color: #fff; font-size: 15px; }
.culture .progress .do-box ul li .contents p span{display: block; position: absolute; left: -10px; color: #fff; }
.work .business{padding: 50px 0;}
.work .business ul.two-box{display: flex; flex-direction: row;}
.work .business ul.two-box li:nth-child(1){flex: 1;}
.work .business ul.two-box li:nth-child(2){flex:2;}
.work .business ul.two-box ul.bs-img{display: flex; flex-direction: row; justify-content: center;  align-content: center; align-items: center;}
.work .business ul.two-box ul.bs-img .ani-img{padding-left: 50px;}
.work .business ul.two-box ul.bs-img .ani-img img{display: block;}
.work .business ul.two-box ul.bs-img .ani-img .w_line{margin: 10px 0 10px 30px;}
.work .business ul.business-list ul.sub{padding-left: 30px;}
.work .portfolio{background: rgba(86,183,204,0.2); padding: 50px 0;}
.slick-slide img{margin: 0 auto; max-width: 210px;}
#portfolio_slider ul .slick-arrow{position: absolute; top: 50%; z-index:9; transform: translateY(-50%); color: rgba(0, 0, 0, 0); width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;}
#portfolio_slider ul .slick-arrow.slick-prev{left: 0; transform: translateY(-50%) translateX(-100%); background: rgba(0, 0, 0, 0.3) url(../img/btn_arw_prev.png) no-repeat center; background-size: 65%;  }
#portfolio_slider ul .slick-arrow.slick-next{right: 0;transform: translateY(-50%) translateX(100%);background:rgba(0, 0, 0, 0.3) url(../img/btn_arw_next.png) no-repeat center;  background-size: 65%; }
#portfolio_slider ul li{position: relative;}
#portfolio_slider ul li p.p1{font-weight: bold;}
.contact .inner{padding: 50px 0;}
.contact .map-box{width: 100%; margin: 0 auto;}

@media (min-width: 780px){
    .mid_menu>li:hover img.bg-img{transform: translateY(-100px);}
    .mid_menu>li:hover .bottom{transform: translateY(0)}
    .mid_menu>li:hover .overlay{transform: translateY(-100px); opacity: 0;}
    /* .mid_menu>li:hover .overlay{transform: translateY(0); opacity: 0;} */
    .company .mission .overlay{transform: translateX(-100%); transition: all 0.8s; opacity: 0.5;}
    .work .business ul.two-box ul.bs-img .ani-img img{transform: translateY(-50px); opacity: 0; transition: all 0.8s;}
    .work .business ul.two-box ul.bs-img .ani-img img.w_line{transform: translateY(0) scale(1,0); transform-origin: 50% 0; opacity: 1; transition: all 0.5s;}
    .work .business ul.two-box ul.bs-img .ani-img img.on{transform: translateY(0) scale(1,1); opacity: 1;}
    .work .business ul.business-list li{transform: translateY(-20px); opacity: 0; transition: all 0.8s;}
    .work .business ul.business-list li.on{transform: translateY(0); opacity: 1; }
    .work .business ul.business-list ul.sub li{transform: translateY(-20px); opacity: 0; transition: all 0.8s;}
    .work .business ul.business-list ul.sub li.on{transform: translateY(0); opacity: 1;}
    #portfolio_slider ul li .overlay{position: absolute; top: 0; left:0; width: 100%; height: 100%; }
    #portfolio_slider ul li .overlay .box{display:none; flex-direction: column;  justify-content: center; align-content: center; align-items: center; width: 100%; height: 100%; max-width: 210px; margin: 0 auto; background: rgba(0,4,95,0.8); }
    #portfolio_slider ul li:hover .overlay .box{display: flex; text-align: center;}
    #portfolio_slider ul li:hover .overlay .box p{color:#fff;}
    #portfolio_slider ul li:hover .overlay .box p.p1{font-size: 17px;}
    #portfolio_slider ul li:hover .overlay .box p.p2{font-size: 16px;}
    #portfolio_slider ul li:hover .overlay .box p.p3{font-size: 15px;}
}
@media (min-width:1500px){
    .company .value .background-img{width: 55%;}
}
@media (max-width: 2000px){
    /* .header_inner{max-width: 1200px;} */
    #portfolio_slider ul .slick-arrow.slick-prev{transform: translateX(50%) translateY(-50%)}
    #portfolio_slider ul .slick-arrow.slick-next{transform: translateX(-50%) translateY(-50%)}
}
@media (max-width: 1200px){
    .inner{padding: 0 20px;}    
    .menu-box .inner{padding: 0;}
    .company .value .inner{padding: 100px 20px;}
}
@media (max-width: 960px){
    .culture  .img-list.max{flex-wrap: wrap;}
    .culture  .img-list.max li{margin-bottom: 30px;}
    .company .value .three-box{width: 85%;}
}
@media (max-width: 780px){
    .company .one{height: 600px;}
    .company .one .one-content-box{height: 600px;}
    header{padding: 10px;}
    header .menu{display: block; width: 45px; height: 45px; background-image: url(../img/menu_icon.png); background-repeat:no-repeat; background-position: center; background-size:25px; transition: all 0.5s;}
    header .menu.close{background-image: url(../img/close_icon.png)}
    .header_inner{display: flex; justify-content: space-between; align-items: center; align-content: center;}
    .m_header{display: none; width: 100%; height: 100%; position: fixed; top: 60px; right:-100%; background: rgba(0, 0, 0, 0.8); z-index: 999;}
    .m_header ul li a{display: block; color: #fff; text-align: center;  line-height: 65px; font-size: 20px;}
    .logo{position:relative; width: 75px; }
    #wrap{padding-top: 40px;}
    .header_menu{display: none;}
    .main-box{background-size: 300% 100%; }
    .text-effect{left: 30px; width: 450px;}
    .menu-box{padding:0; border-top: 1px solid #fff;}
    .mid_menu>li{float: none; width: 100%; border-bottom: 1px solid #ccc;}
    .mid_menu>li img.bg-img{float:left; width: 60%; height: 250px; object-fit: cover; object-position: 50% 30%;}
    .mid_menu>li .overlay{width: 60%;}
    .mid_menu>li .bottom{float: right; position:relative; transform: translateY(0); opacity: 1; width: 40%; height: 250px;}
    .mid_menu>li .bottom .more li img.arrow{width: 20px;}
    .mid_menu>li .bottom .more{height: 250px;}
    .mid_menu>li .bottom .more li{font-size: 14px; width: 100%;}
    .mid_menu>li .bottom .more li:first-child{flex:4}
    .mid_menu>li .bottom .more li:last-child{flex:1}
    .mid_menu>li:hover .bottom{transform: translateY(0)}
    .mid-box{display: none;}
    .partners-list li{width: 25%; margin-bottom: 0;}
    .partners-list li img{max-width: 95%;}
    footer p{padding: 0 10px;}
    #container p.title{font-size: 18px; margin-bottom: 15px;}
    #container p.copy{font-size: 23px; margin-bottom: 10px; }
    #container p.sub{font-size: 15px; line-height: 1.3; margin-bottom: 15px;font-style: italic;}
    #container p.subtext{font-size: 13px; margin-bottom: 15px;}
    .company .mission .background-img{width: 100%; height: 200px;}
    .company .mission .overlay{height: auto; position: relative; width: 100%; }
    .company .mission .inner{padding: 20px 0;}
    .company .value .background-img{position: relative; width: 100%; height: 200px;}
    .company .value .inner{padding: 20px; height: auto;}
    .company .value .hop li{float: none;}
    .company .value .three-box{flex-direction: column; width: 100%; margin: 20px 0;}
    .company .value .three-box li{width: 100%; margin-bottom: 20px;}
    .company .value .three-box li .box{display: block; width: 100%; background: #33367f;}
    .company .one{height: auto;}
    .company .one .inner{order:1;}
    .company .one .btn-box{order: 2; padding-top: 20px;}
    .company .one .one-content-box{position: relative; width: 100%; height: auto; order:3;}
    .company .one .one-content-box ul li{display: block;}
    .company .one .one-content-box ul li .dot{display: none;}
    .company .one .one-content-box ul li.on p{padding:0 20px;}
    .company .one .one-content-box ul li.on p span{display: block;}
    .culture .intro{background-size: auto 100%;}
    .culture .intro .three{display: block;}
    .culture .intro .three li{margin-bottom: 25px; width: 100%;}
    .culture .passion{background-size: 100% 100%}
    .culture .inner{padding: 0 20px;}
    .culture .img-list li{padding: 0 10px;}
    .culture .img-list.max li{flex-basis: 45%;}
    .culture .img-list p.p1{font-size: 15px;}
    .culture .img-list p.p2{font-size: 13px;}
    .culture .right-box{padding-left: 0;}
    .culture .right-box .img-list {display: block;}
    .culture .right-box .img-list li{display: flex; flex-direction: row; margin-bottom: 25px; justify-content: flex-start; align-content: center; align-items: center;  }
    .culture .right-box .img-list img{max-width: 45%;;}
    .culture .progress .do-box ul{display: block;}
    .culture .progress .do-box ul li:nth-child(1){margin-right: 0; margin-bottom: 40px;}
    .work .business ul.two-box{flex-direction: column;}
    .work .business ul.two-box ul.bs-img{margin:20px 0;}
    #portfolio_slider ul{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center;}
    #portfolio_slider ul li{flex-basis: 50%; text-align: center; margin-bottom: 30px;}


}
@media (max-width: 550px){
    .effect-box ul{width:100%}
    .effect-box ul li{width: 60%; height: 80px; vertical-align: top; }
    .effect-box ul li.animate{width: 40%;}
    .effect-box ul li img{height: 60px;}
    .effect-box ul li .n{left: 60px;}
    .effect-box ul li .e{left: 120px;}
    .effect-box ul li .wave{height:60px; vertical-align: top;}
    @keyframes oAni{
        0%{top:0; left:0; opacity: 0;}
        15%{top:0; left:0; opacity: 1;}
        20%{top:0; left:0; opacity: 1;}
        25%{top:0; left: 120px}
        50%{top:0; left: 120px; opacity: 1;}
        55%{top:-150px; opacity: 0; left: 120px}
        100%{top: -150px; opacity: 0;  left: 120px;}    
    }
    @keyframes bigdAni{
        0%{top: -150px; left: 60px;  opacity:0; transform: rotateZ(0);}
        25%{top: -150px; left: 60px; opacity:0; }
        30%{top: 0px; left: 60px; opacity: 1;}
        55%{top: 0px; left: 60px;}
        60%{top: 0px; left: 110px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
        65%{top: 0px; left: 110px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
        70%{top: 0px; left: 110px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
        100%{top: 0px; left: 110px; transform: rotateZ(-180deg);opacity: 0;}
        
    }
    @keyframes dAni{
        0%{top: 0; right:33px; opacity: 0;}
        60%{top: 0; right:33px; opacity: 0;}
        70%{top: 0; right:33px; opacity: 1;}
        90%{top: 0; right:33px; opacity: 1;}
        100%{top: 0; right:33px; opacity: 0;}
        
    }
    @keyframes dotAni{
        0%{top: 0; right:10px; opacity: 0;}
        60%{top: 0; right:10px; opacity: 0;}
        70%{top: 0; right:10px; opacity: 1;}
        90%{top: 0; right:10px; opacity: 1;}
        100%{top: 0; right:10px; opacity: 0;}
    }
}
@media (max-width: 490px){
    .mid_menu>li .bottom .more{padding:20px;}
    .text-effect{width: 280px}
    footer p{font-size: 14px;}

    @keyframes bigdAni{
        0%{top: -150px; left: 60px;  opacity:0; transform: rotateZ(0);}
        25%{top: -150px; left: 60px; opacity:0; }
        30%{top: 0px; left: 60px; opacity: 1;}
        55%{top: 0px; left: 60px;}
        60%{top: 0px; left: 105px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
        65%{top: 0px; left: 105px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
        70%{top: 0px; left: 105px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
        100%{top: 0px; left: 105px; transform: rotateZ(-180deg);opacity: 0;}
        
    }

}
@media (max-width: 470px){
    @keyframes oAni{
        0%{top:0; left:0; opacity: 0;}
        15%{top:0; left:0; opacity: 1;}
        20%{top:0; left:0; opacity: 1;}
        25%{top:0; left: 110px}
        50%{top:0; left: 110px; opacity: 1;}
        55%{top:-150px; opacity: 0; left: 120px}
        100%{top: -150px; opacity: 0;  left: 120px;}    
    }
    @keyframes bigdAni{
        0%{top: -150px; left: 60px;  opacity:0; transform: rotateZ(0);}
        25%{top: -150px; left: 60px; opacity:0; }
        30%{top: 0px; left: 60px; opacity: 1;}
        55%{top: 0px; left: 60px;}
        60%{top: 0px; left: 95px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
        65%{top: 0px; left: 95px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
        70%{top: 0px; left: 95px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
        100%{top: 0px; left: 95px; transform: rotateZ(-180deg);opacity: 0;}
        
    }

}
@media (max-width: 450px){
    @keyframes bigdAni{
        0%{top: -150px; left: 60px;  opacity:0; transform: rotateZ(0);}
        25%{top: -150px; left: 60px; opacity:0; }
        30%{top: 0px; left: 60px; opacity: 1;}
        55%{top: 0px; left: 60px;}
        60%{top: 0px; left: 85px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
        65%{top: 0px; left: 85px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
        70%{top: 0px; left: 85px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
        100%{top: 0px; left: 85px; transform: rotateZ(-180deg);opacity: 0;}   
    }
}
@media (max-width: 430px){
    .effect-box ul li .wave{height:40px;}
    .effect-box ul li img{height: 40px;}
    .effect-box ul li .dot{height: 25px}
    .effect-box ul li .n{left: 80px;}
    @keyframes oAni{
        0%{top:0; left:40px; opacity: 0;}
        15%{top:0; left:40px; opacity: 1;}
        20%{top:0; left:40px; opacity: 1;}
        25%{top:0; left: 100px}
        50%{top:0; left: 100px; opacity: 1;}
        55%{top:-150px; opacity: 0; left: 100px}
        100%{top: -150px; opacity: 0;  left: 100px;}    
    }
    @keyframes bigdAni{
        0%{top: -150px; left: 60px;  opacity:0; transform: rotateZ(0);}
        25%{top: -150px; left: 60px; opacity:0; }
        30%{top: 0px; left: 60px; opacity: 1;}
        55%{top: 0px; left: 60px;}
        60%{top: 0px; left: 90px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
        65%{top: 0px; left: 90px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
        70%{top: 0px; left: 90px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
        100%{top: 0px; left: 90px; transform: rotateZ(-180deg);opacity: 0;}
        
    }
    @keyframes dAni{
        0%{top: 0; right:33px; opacity: 0;}
        60%{top: 0; right:33px; opacity: 0;}
        70%{top: 0; right:33px; opacity: 1;}
        90%{top: 0; right:33px; opacity: 1;}
        100%{top: 0; right:33px; opacity: 0;}
        
    }
    @keyframes dotAni{
        0%{top: 0; right:10px; opacity: 0;}
        60%{top: 0; right:10px; opacity: 0;}
        70%{top: 0; right:10px; opacity: 1;}
        90%{top: 0; right:10px; opacity: 1;}
        100%{top: 0; right:10px; opacity: 0;}
    }

}
@media (max-width: 430px){
    .effect-box ul li .wave{padding-left: 10px;}
    @keyframes bigdAni{
        0%{top: -150px; left: 60px;  opacity:0; transform: rotateZ(0);}
        25%{top: -150px; left: 60px; opacity:0; }
        30%{top: 0px; left: 60px; opacity: 1;}
        55%{top: 0px; left: 60px;}
        60%{top: 0px; left: 80px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
        65%{top: 0px; left: 80px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
        70%{top: 0px; left: 80px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
        100%{top: 0px; left: 80px; transform: rotateZ(-180deg);opacity: 0;} 
    }
}
@media (max-width: 380px){
    @keyframes bigdAni{
        0%{top: -150px; left: 60px;  opacity:0; transform: rotateZ(0);}
        25%{top: -150px; left: 60px; opacity:0; }
        30%{top: 0px; left: 60px; opacity: 1;}
        55%{top: 0px; left: 60px;}
        60%{top: 0px; left: 70px; transform: rotateZ(0) scale(1,1); transform-origin: 50% 60%;}
        65%{top: 0px; left: 70px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 1;}
        70%{top: 0px; left: 70px; transform: rotateZ(-180deg) scale(0.7,0.7); opacity: 0;}
        100%{top: 0px; left: 70px; transform: rotateZ(-180deg);opacity: 0;} 
    }
    .mid_menu>li img.bg-img{width:100%;}
    .mid_menu>li .overlay{width:100%; height: 250px;}
    .mid_menu>li .bottom{width: 100%;height: 100px}
    .mid_menu>li .bottom .more{height: 100px;}
    .mid_menu>li .bottom .more li:last-child{text-align: right;}


}
@media (max-width: 360px){
    .effect-box ul li .wave{position:relative; top: 43px; animation: waveAni 11s linear infinite;}
    @keyframes waveAni{
        0%{top: 43px; right:0; }
        65%{top: 43px; right:0; }
        70%{top: 0px; right:0; }
        90%{top: 0px; right:0; }
        100%{top: 43px; right:0; }
    }
}