@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;800;900&display=swap');

* {padding: 0; margin: 0; border: 0; box-sizing: border-box;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}
img {vertical-align: top; max-width: 100%; filter: none;}
button {background-color: inherit; cursor: pointer;}
html,
body {font-family: 'Roboto', 'Noto Sans KR', sans-serif; color: #000; overflow-x: hidden; position: relative; height: 100%;}




.header_fix_txt {position: absolute; top: 100px; left: 50px; font-size: 20px; line-height: 24px; font-weight: 500; color: #fff; z-index: 20;}
.header_fix_txt i {position: relative; top: 1px; font-style: normal; color: #db1010; font-size: 21px; font-weight: 700;}

header {position: fixed; top: 0px; left: 50%; transform: translateX(-50%); z-index: 5000; width: 100%; height: 90px; padding: 0 50px; display: flex; align-items: flex-end;}

header .logoo {position: relative; display: block; width: 180px !important; height: 28px; margin-right: 50px;}

header .center {color: #fff; font-size: 18px; width: calc(100% - 320px); white-space: nowrap; overflow: hidden; position: relative; top: -12px;}
header .center p {-webkit-animation-duration: 10s; -moz-animation-duration: 10s; -ms-animation-duration: 10s; -o-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: marquee; -moz-animation-name: marquee; -ms-animation-name: marquee; -o-animation-name: marquee; animation-name: marquee; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; display: inline-block; animation-duration: 20s; animation-delay: 400ms;}

@keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    99%, 100% {
        -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    }
}

header .menu_btnn {position: relative; width: 40px !important; height: 40px; margin-left: 50px;}



.logo {position: fixed; top: 50px; left: 50px; display: block; width: 180px !important; height: 28px; z-index: 9999; background: url(../img/w-logo.png) no-repeat center/cover; margin-right: 50px;}
.logo.active {background: url(../img/b-logo.png) no-repeat center/cover;}

.menu_btn {position: fixed; top: 50px; right: 50px; width: 40px !important; height: 40px; background-color: #fff; border: 2px solid #000; z-index: 7000; cursor: pointer; margin-left: 50px;}
.menu_btn div {width: 100%; height: 100%; position: relative; transition: all 0.2s;}
.menu_btn span {background-color: #000; height: 2px; left: 30%; position: absolute; top: calc(50% - 1px); -webkit-transform-origin: center; transform-origin: center; transition: margin .1s ease .18s,-webkit-transform .2s cubic-bezier(.55,.055,.675,.19); transition: transform .2s cubic-bezier(.55,.055,.675,.19),margin .1s ease .18s; transition: transform .2s cubic-bezier(.55,.055,.675,.19),margin .1s ease .18s,-webkit-transform .2s cubic-bezier(.55,.055,.675,.19); width: 40%;}
.menu_btn span:first-child {margin-top: -14%;}
.menu_btn span:last-child {margin-top: 14%;}


.swiper {width: 100%; height: 100%;}
.swiper-slide {position: relative; width: 100%; height: 100%;}
.swiper-slide .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; z-index: 11;}
.swiper-slide > img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 10;}

.swiper-slide > video {width: 100%; height: 100%; object-fit: cover;}


.left_fix_txt_box {position: absolute; top: 200px; left: 50px; color: #fff; z-index: 8000;}
.left_fix_txt_box div {display: flex;}
.left_fix_txt_box span {position: relative; display: inline-block; font-size: 32px; font-weight: 700; transition: -webkit-transform .4s cubic-bezier(.215,.61,.355,1); transition: transform .4s cubic-bezier(.215,.61,.355,1); transition: transform .4s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1); animation: slideInDown .7s cubic-bezier(.19,1,.22,1) both, fadeIn .4s ease;}
.left_fix_txt_box span::before {background-color:#fff; bottom: 0; content: ""; height: 0.14em; left: 0; opacity: .5; position: absolute; transition: left .2s cubic-bezier(.47,0,.745,.715),width .15s cubic-bezier(.47,0,.745,.715),opacity .2s cubic-bezier(.55,.055,.675,.19); width: 0;}
.left_fix_txt_box:hover span::before {width: 100%;}
.left_fix_txt_box ul {display: flex; align-items: center; gap: 5px; margin-top: 16px; animation-name: bounce; transform-origin: center bottom; animation-iteration-count: infinite; animation-duration: 1.5s; animation-fill-mode: both; cursor: pointer;}
.left_fix_txt_box ul li:first-child {padding: 10px 15px; border-radius: 50px; background-color: #db1010; font-size: 21px; font-weight: 700;width: 120px;text-align: center;}
.left_fix_txt_box ul li:last-child {position: relative; width: 35px; height: 27px;}
.left_fix_txt_box .web_card_btn{animation-delay:0.75s;}
.left_fix_txt_box .web_card_btn li:nth-of-type(1){background-color: #000;}
.left_fix_txt_box ul li:last-child i {position: absolute;}
.left_fix_txt_box ul li:last-child i:nth-child(1) {top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 3px; background-color: #fff; border-radius: 3px;}
.left_fix_txt_box ul li:last-child i:nth-child(2) {top: 9px; right: 0; transform: rotate(45deg); width: 10px; height: 3px; border-radius: 3px; background-color: #fff;}
.left_fix_txt_box ul li:last-child i:nth-child(3) {bottom: 9px; right: 0; transform: rotate(-45deg); width: 10px; height: 3px; border-radius: 3px; background-color: #fff;}


@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0,101%,0);
        transform: translate3d(0,101%,0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes bounce {
    from, 20%, 53%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(30px, 0px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(10px, 0px, 0);
    }
    95% {
        transform: translate3d(0,0px,0);
    }
}


.swiper .swiper-pagination {position: absolute; bottom: 45px; left: auto; right: 90px; z-index: 300; color: #fff; display: flex; flex-direction: column; width: 40px; height: 90px; justify-content: space-between; align-items: center;}
.swiper .swiper-pagination p {font-size: 16px;}
.swiper .swiper-pagination span {display: block; width: 1px; height: 24px; background-color: #fff; position: relative; top: 2px;}

.slide_btn {position: fixed; bottom: 50px; right: 50px; z-index: 300; cursor: pointer;}
.slide_btn > div {width: 40px; height: 40px; background-color: #fff; border: 2px solid #000; position: relative;}
.slide_btn .down {border-top: none;}
.slide_btn > div div {position: absolute; width: 30%; height: 30%; top: 43%; left: 50%; transform: translateX(-50%) rotate(45deg);}
.slide_btn > div div span {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-left: 2px solid #000; border-top: 2px solid #000;}
.slide_btn .down div {top: 31%; transform: translateX(-50%) rotate(-135deg);}



footer {position: fixed; bottom: 50px; left: 50px; z-index: 6000; color: #fff;}
footer ul {display: flex; gap: 21px; font-size: 14px; font-weight: 700;}
footer ul li {position: relative;}
footer ul li::after {background: rgba(255,255,255,.2); content: ""; display: block; height: 11px; position: absolute; right: -9px; top: 4px; width: 1px;}
footer ul li:last-child::after {display: none;}
footer ul li a {position: relative;}
footer ul li a::after {background-color: #fff; bottom: -0.15em; content: ""; height: calc(1px + 0.1em); left: 50%; position: absolute; transition: width .2s ease,left .2s ease,-webkit-transform .2s ease; transition: width .2s ease,left .2s ease,transform .2s ease; transition: width .2s ease,left .2s ease,transform .2s ease,-webkit-transform .2s ease; width: 0;}
footer ul li a:hover::after {left: 0; width: 100%;}

footer p {font-size: 12px; font-weight: 500; margin-top: 10px;}
footer p br {display: none;}



.menu_pop {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 6500; display: flex; justify-content: center; align-items: center; display: none; background-color: rgba(255,255,255,.95);}
.menu_pop .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; display: none;}
.menu_pop .menu_box {display: flex; align-items: flex-start; gap: 95px;}
.menu_pop .menu_box ul {width: 570px;}
.menu_pop .menu_box ul li a {position: relative; display: block; width: 100%; height: 120px; overflow: hidden;}
.menu_pop .menu_box ul li a span {position: absolute; font-size: 100px; line-height: 120px; font-weight: 700; top: 50px; opacity: 0;}

.menu_pop .menu_right {position: relative; width: 300px !important; left: 200px; opacity: 0;}
.menu_pop .menu_right div {border-top: 1px solid #000; margin-top: 10px; padding-top: 10px;}
.menu_pop .menu_right div:first-child {border-top: none; padding-top: 0;}
.menu_pop .menu_right div a {position: relative;}
.menu_pop .menu_right div a p {font-size: 26px; line-height: 38px; font-weight: 700;}
.menu_pop .menu_right div a span {display: block; font-size: 12px; line-height: 20px; font-weight: 400; transition: all 0.3s;}
.menu_pop .menu_right div a span:hover {transform: scale(1.1);}


.menu_pop.active {display: flex;}





.portfolio_pop {position: fixed; top: 0; left: -100%; width: 100%; height: 100%; z-index: 6400; background-color: #fff; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none;}
.portfolio_pop::-webkit-scrollbar {display: none;}

.portfolio_pop h2 {position: absolute; top: 62px; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 900; text-align: center; z-index: 6502;}

.portfolio_pop ul {position: fixed; top: 20%; left: 50px; max-width: 215px; z-index: 1; display: none;}
.portfolio_pop ul li {font-size: 70px; width: 100%; height: 70px; line-height: 100px; font-weight: 900; -webkit-text-stroke: 2px #000; color: transparent; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden;}

.portfolio_pop ul li:nth-child(1) {width: 215px;}
.portfolio_pop ul li:nth-child(2) {width: 250px;}
.portfolio_pop ul li:nth-child(3) {width: 425px;}
.portfolio_pop ul li:nth-child(4) {width: 250px;}
.portfolio_pop ul li:nth-child(5) {width: 600px;}

.portfolio_pop ul li span {position: absolute; top: 50px; opacity: 0;}
.portfolio_pop ul li.on {color: #000;}
.portfolio_pop ul li:hover {transform: scale(0.95); color: #000;}

.portfolio_pop .port_cate {display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; max-width: 620px; width: 100%; margin: 120px auto 0px; display: none;}
.portfolio_pop .port_cate p {padding: 10px 15px; font-weight: 500; border-radius: 50px; border: 1px solid #e5e5e5; cursor: pointer;}
.portfolio_pop .port_cate p.on {background-color: #db1010; color: #fff;}

.portfolio_pop .close {position: fixed; top: 50px; right: 95px; width: 40px; height: 40px; background-color: #fff; border: 2px solid #000; cursor: pointer; display: none; opacity: 0; z-index: 6500;}
.portfolio_pop .close div {width: 100%; height: 100%; position: relative; transition: all 0.2s;}
.portfolio_pop .close div span:nth-child(1) {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; height: 2px; border-radius: 2px; background-color: #000; display: block;}
.portfolio_pop .close div span:nth-child(2) {position: absolute; top: 14px; left: 10px; transform: rotate(-45deg); width: 10px; height: 2px; background-color: #000; border-radius: 2px; display: block;}
.portfolio_pop .close div span:nth-child(3) {position: absolute; top: 20px; left: 10px; transform: rotate(45deg); width: 10px; height: 2px; background-color: #000; border-radius: 2px; display: block;}

.portfolio_pop .close:hover div {transform: scale(0.8);}

.portfolio_pop .port_in {max-width: 1460px; width: 100%; margin: 140px 0 50px; margin-left: auto; margin-right: 140px; position: relative;}
.portfolio_pop .port_in .port_box {display: none;}
.portfolio_pop .port_in .port_box.active {display: block;}
.portfolio_pop .port_in .port_contents {display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;}
.portfolio_pop .port_in .port_contents a {display: flex; width: 200px; height: 323px; transition: all 0.3s; position: relative; overflow: hidden;}
.portfolio_pop .port_in .port_contents a img {width: 100%; height: 100%; object-fit: cover; opacity: 0; border: 1px solid #e5e5e5;}
.portfolio_pop .port_in .port_contents a h2 {visibility: hidden;}
.portfolio_pop .port_in .port_contents a:hover {transform: scale(0.9);}
.portfolio_pop.portfolio_pop_02 .port_in .port_contents a img {aspect-ratio: 16/9;display: block;}

.portfolio_pop .port_in .port_contents a .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.portfolio_pop .port_in .port_contents a:nth-child(4n-3) .bg {background-color: #f00f0f; top: 100%;}
.portfolio_pop .port_in .port_contents a:nth-child(4n-2) .bg {background-color: #349cff; left: -100%;}
.portfolio_pop .port_in .port_contents a:nth-child(4n-1) .bg {background-color: #000; top: -100%;}
.portfolio_pop .port_in .port_contents a:nth-child(4n) .bg {background-color: #fcf7ee; left: 100%;}
.portfolio_pop .port_in .port_box.port_box_hor .port_contents a{width: 357px; height: 220px;}


.port_contents_pop {position: fixed; top: 100%; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; overflow: auto; padding: 200px 0;}

.port_contents_pop .close {position: fixed; top: 50px; right: 95px; width: 40px; height: 40px; background-color: #000; border: 2px solid #fff; transform: rotate(-90deg); z-index: 9999; cursor: pointer; display: none; opacity: 0;}
.port_contents_pop .close div {width: 100%; height: 100%; position: relative; transition: all 0.2s;}
.port_contents_pop .close div span:nth-child(1) {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; height: 2px; border-radius: 2px; background-color: #fff; display: block;}
.port_contents_pop .close div span:nth-child(2) {position: absolute; top: 14px; left: 10px; transform: rotate(-45deg); width: 10px; height: 2px; background-color: #fff; border-radius: 2px; display: block;}
.port_contents_pop .close div span:nth-child(3) {position: absolute; top: 20px; left: 10px; transform: rotate(45deg); width: 10px; height: 2px; background-color: #fff; border-radius: 2px; display: block;}
.port_contents_pop .close:hover div {transform: scale(0.8);}

.port_contents_pop > img {display: block; max-width: 1280px; margin: 0 auto; position: relative; border: 1px solid #333;}
.port_contents_pop > p {position: absolute; top: 100px; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: 700; color: #fff; width: 100%; text-align: center; word-break: keep-all;}
.portfolio_pop2{
    display: none;
}

@media(max-width:1750px){
    .portfolio_pop .port_in .port_box.port_box_hor .port_contents a{
        width: calc((100% / 3) - (20px / 3));height: unset;
    }
}
@media(max-width:1440px){
    .portfolio_pop .port_in .port_box.port_box_hor .port_contents a{
        width: calc(50% - 5px);height: unset;
    }
}



/* modal_popup */
#modal_popup{width: auto; height: auto; position: fixed; z-index: 9999; background-color: #fff; left: 10%; top: 10%; border: 1px solid #bbb; max-width: 450px;}
#modal_popup .popup_wrap{display: flex;flex-wrap: wrap; align-content: space-between; height: 100%;}
#modal_popup .popup_wrap .pp_img{width: 100%; cursor: pointer;}
#modal_popup .popup_wrap .pp_img img{max-width: 100%; width: 100%;}
#modal_popup .popup_wrap .popup_btn_wrap { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0px 10px 5px; width: 100%;}
#modal_popup .popup_wrap .check_box{display: flex; align-items: center; cursor: pointer; }
#modal_popup .popup_wrap .check_box input{margin-right: 7px; cursor: pointer; }
#modal_popup .popup_wrap .check_box label{line-height: 1.1; cursor: pointer; }
#modal_popup .popup_wrap .close_btn{width: 52px;height: 25px; border: 1px solid #ccc; text-align: center; border-radius: 5px; cursor: pointer;background-color: #fff;}

/* slider popup */
#slider_popup{position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 10000; transition: .5s ease;}
#slider_popup .popup_sec{width: 520px; overflow: hidden; height: 715px; background-color: rgba(74,81,95,0.9); transition: .5s ease;}
#slider_popup .popup_sec .swiper-wrapper{}
#slider_popup .popup_sec .swiper-wrapper .swiper-slide{width: 100%;}
#slider_popup .popup_sec .swiper-wrapper .swiper-slide img{width: 100%; height: 100% ;position: absolute;}
#slider_popup .popup_sec .popup_page{bottom: 0; top: 20px;}
.popup_util{position: absolute;right: -50px; top: 50%; transform: translateY(-50%);}
.popup_util .p_util{cursor: pointer; font-weight: 500; font-size: 12px; width: 50px; padding: 7px 0 6px; color: #fff; border-radius: 0px 5px 5px 0; text-align: center;}
.popup_util .open{ background: #5c626f; display: none; }
.popup_util .close{ background: #5c626f; } /* #000; */
.popup_util .p_btn{width : 12px; display: block; margin: 0 auto -4px;}
.popup_util .p_btn img{width: 100%;}
.popup_util2{display: none;}

.slider_popup_close{left: -520px !important;}
.slider_popup_close .popup_util .close{display:none !important}
.slider_popup_close .popup_util .open{display: block !important}
.popup_black_bg{background: #00000070; width: 100%; height: 100%; position: fixed; z-index: 9999; display: none;}

@media(max-width:600px){
/* slider popup */
    #slider_popup{width: 100%; height: 140vw;}
    #slider_popup .popup_sec{width: 100%; height: 100%;}
    .popup_util{position: fixed; z-index: 10000; transform: none; left: 0; display: none; width: 50px;}
    .popup_util2{display: block;}

    .slider_popup_close{left: -100% !important;}
    /* .slider_popup_close .popup_sec{transform: translateX(-100%) !important;} */
    .popup_util.open_popup .close{display:none !important}
    .popup_util.open_popup .open{display: block !important}

    .popup_black_bg{display: block;}
}





/* 반응형 시작 */
@media(max-width:1880px){

    .portfolio_pop .port_in {max-width: 1250px;}

}

@media(max-width:1650px){

    .portfolio_pop .port_in {max-width: 1040px;}

}

@media(max-width:1600px){

    

}

@media(max-width:1500px){

    

}

@media(max-width:1470px){

    .port_contents_pop .close {top: 42px; right: 10px;}

}

@media(max-width:1440px){

    .portfolio_pop .port_in {max-width: 830px;}

}

@media(max-width:1400px){

    .port_contents_pop {padding: 200px 55px;}
    .port_contents_pop > img {width: 100%;}

}

@media(max-width:1350px){

    

}

@media(max-width:1240px){

    .portfolio_pop .port_in {max-width: 620px;}

}

@media(max-width:1200px){

    

}

@media(max-width:1100px){

    

}

@media(max-width:1024px){

    .header_fix_txt {left: 24px; top: 80px; font-size: 16px; line-height: 18px;}
    .header_fix_txt i {font-size: 17px;}

    header {padding: 0 24px; height: 70px;}
    header .logoo {width: 125px !important; height: 20px; margin-right: 20px; top: -8px;}
    header .center {width: calc(100% - 195px); top: -6px;}
    header .center p {font-size: 12px;}
    header .menu_btnn {width: 30px !important; height: 30px; margin-left: 20px;}

    .logo {width: 125px !important; height: 20px; top: 44px; left: 24px;}
    .menu_btn {width: 30px !important; height: 30px; top: 42px; right: 24px;}

    .left_fix_txt_box {left: 24px; top: 140px;}

    .slide_btn {right: 24px;}
    .slide_btn > div {width: 30px; height: 30px;}
    .swiper .swiper-pagination {width: 30px; height: 70px; right: 60px;}
    .swiper .swiper-pagination p {font-size: 12px;}
    .swiper .swiper-pagination span {top: -1px;}

    footer {left: 24px;}


    .portfolio_pop h2 {top: 55px; font-size: 14px;}

    .portfolio_pop .close {width: 30px; height: 30px; top: 42px; right: 64px;}
    .portfolio_pop .close div span:nth-child(2) {top: 10px; left: 8px; width: 7px;}
    .portfolio_pop .close div span:nth-child(3) {top: 14px; left: 8px; width: 7px;}

    .portfolio_pop ul li {font-size: 100px; height: 85px; line-height: 85px;}

    .portfolio_pop .port_in {margin: 120px 0 50px; margin-left: auto; margin-right: 140px;}

    .port_contents_pop .close {width: 30px; height: 30px;}
    .port_contents_pop .close div span:nth-child(2) {top: 10px; left: 8px; width: 7px;}
    .port_contents_pop .close div span:nth-child(3) {top: 14px; left: 8px; width: 7px;}
    .port_contents_pop > p {top: 50px; padding: 0 55px;}
    .port_contents_pop {padding: 150px 55px;}


    .menu_pop {overflow-y: auto; align-items: unset; padding: 100px 0;}
    .menu_pop .menu_box {flex-direction: column; align-items: unset; gap: 50px; width: 100%; padding: 0 24px;}
    .menu_pop .menu_box ul {width: 100%;}
    .menu_pop .menu_right {width: 100% !important; padding-bottom: 100px;}

}

@media(max-width:939px){

    

} 

@media(max-width:926px){

    

}

@media(max-width:910px){

    .portfolio_pop .port_cate {display: flex;}
    .portfolio_pop ul {visibility: hidden;}

    .portfolio_pop .port_in {margin: 50px auto;}

}

@media(max-width:854px){

    

}

@media(max-width:810px){

    

}

@media(max-width:768px){

    

}

@media(max-width:710px){

    

}

@media(max-width:676px){

    /* footer ul {display: none;} */

}

@media(max-width:640px){
    .portfolio_pop .port_in .port_box.port_box_hor .port_contents a{width: calc(50% - 5px);}
    .portfolio_pop .port_cate {max-width: 410px;}
    .portfolio_pop .port_cate p {font-size: 10px;}
    .portfolio_pop h2 {display: none;}
    .portfolio_pop .port_in {max-width: 410px;}

}

@media(max-width:600px){

    .menu_pop .menu_box ul li a {height: 70px;}
    .menu_pop .menu_box ul li a span {font-size: 60px; line-height: 70px; font-weight: 900;}

}

@media(max-width:480px){

    header .logoo {width: 100px !important; height: 16px;}
    header .center {width: calc(100% - 170px);}

    .logo {width: 100px !important; height: 16px; top: 47px;}

}

@media(max-width:440px){

    footer p br {display: block;}


    .portfolio_pop .port_cate {max-width: 350px;}
    .portfolio_pop .port_in {max-width: 350px;}
    .portfolio_pop .port_in .port_contents a {width: 170px; height: 275px;}

    .menu_pop .menu_box ul li a {height: 58px;}
    .menu_pop .menu_box ul li a span {font-size: 50px; line-height: 58px; font-weight: 900;}

}

@media(max-width:390px){



}
.bg_gif{height: 100%;}
.bg_gif img{width: 100%; height: 100%; object-fit: cover;}

#lottie_02{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: url(../video/01.gif) no-repeat center center;
    background-size: cover;
}
#lottie_10{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: url(../img/10.mp4.lottie.jpg) no-repeat center center;
    background-size: cover;
}
#lottie_01,
#lottie_03,
#lottie_04,
#lottie_05,
#lottie_06,
#lottie_07,
#lottie_08,
#lottie_09
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: url(../img/01.mp4.lottie.jpg) no-repeat center center;
    background-size: cover;
}