@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Jost", "Pretendard GOV", sans-serif; -webkit-text-size-adjust: none; line-height: 1; font-weight: 400; letter-spacing: -0.25px; color: #000;}
select::-ms-expand{ display: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #FFF;}
body{ overflow: hidden; padding: 0; background: #FFF; -webkit-text-size-adjust: none; word-break: keep-all;}
@media(max-width: 767px){
    html{ font-size: calc(100vw / 30);}
}


.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24
}


.type_scroll::-moz-scrollbar{ width: 3px; background: #f5f5f5;}
.type_scroll::-moz-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.type_scroll::-ms-scrollbar{ width: 3px; background: #f5f5f5;}
.type_scroll::-ms-scrollbar-thumb{ background-color: #000; border-radius: 0;}
.type_scroll::-webkit-scrollbar{ width: 3px; background: #f5f5f5;}
.type_scroll::-webkit-scrollbar-thumb{ background-color: #000; border-radius: 0;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
}


.type_max{ padding-right: 100px !important; padding-left: 100px !important;}
.type_min{ margin: 0 auto; max-width: 1400px; width: 100%;}
@media(max-width: 1601px){
    .type_max{ padding-right: 50px !important; padding-left: 50px !important;}
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .type_max{ padding-right: 1.5rem !important; padding-left: 1.5rem !important;}
}


.br_pc{ display: block;}
.br_pad{ display: none;}
.br_m{ display: none;}
@media(max-width: 1601px){
    .br_pc{ display: none;}
    .br_pad{ display: block;}
    .br_m{ display: none;}
}
@media(max-width: 767px){
    .br_pc{ display: none;}
    .br_pad{ display: none;}
    .br_m{ display: block;}
}


.all_menu{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 10000; top: 0; right: 100%; bottom: 0; left: -100%; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity .3s;}
.all_menu .wrap{ position: absolute; z-index: 10; top: 0; left: -100%; bottom: 0; right: 100%; background: #FFF; opacity: 0; transition: all .2s;}
.all_menu .wrap .head{ display: flex; align-items: center; position: absolute; z-index: 20; top: 0; left: 0; right: 0; padding: 1.5rem; height: 9rem;}
.all_menu .wrap .head .logo{ height: 6rem;}
.all_menu .wrap .head .logo img{ display: block; height: 100%;}

.all_menu .wrap .body{ position: absolute; z-index: 10; top: 12rem; right: 0; left: 0;}
.all_menu .wrap .body .gnb{}
.all_menu .wrap .body .gnb > ul{}
.all_menu .wrap .body .gnb > ul > li{}
.all_menu .wrap .body .gnb > ul > li a{ display: flex; justify-content: flex-start; align-items: center; padding: 0 1.5rem; height: 4.5rem;}
.all_menu .wrap .body .gnb > ul > li a p{ position: relative; font-size: 2rem; font-weight: 600; color: #000;}
.all_menu .wrap .body .gnb > ul > li.on a p{}
.all_menu .wrap .body .gnb > ul > li.on a p:before{ content: ""; display: block; position: absolute; right: 0; bottom: -0.4rem; left: 0; height: 2px; background: #000;}

.all_menu .wrap .fb{ position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; padding: 0 1.5rem 2rem 1.5rem;}
.all_menu .wrap .fb .row{ display: flex; flex-direction: column;}
.all_menu .wrap .fb .row *{ line-height: 1.2; font-size: 1rem; color: #000;}
.all_menu .wrap .fb .row .tel{ font-size: 2.2rem; font-weight: 700;}
.all_menu .wrap .fb .row .mail{ margin: 0.4rem 0 0.6rem 0; font-size: 1.2rem;}
.all_menu .wrap .fb .down{ display: flex; justify-content: center; align-items: center; grid-gap: 0 1rem; margin: 1.5rem 0 0 0; height: 3.2rem; border-radius: 20rem; border: 2px solid #000;}
.all_menu .wrap .fb .down p{ font-size: 1.2rem; font-weight: 600; color: #000;}
.all_menu .wrap .fb .down span{ font-size: 1.4rem; color: #000;}

.all_menu .close{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.000001%);}
.all_menu .close_btn{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: 3rem; right: 1.5rem; width: 1.8rem; height: 3rem; cursor: pointer; transform: translate(0,-200px); opacity: 0; transition: all .3s;}
.all_menu .close_btn span{ font-size: 1.8rem; color: #FFF; transition: all .3s;}

.all_menu.on{ right: 0; left: 0; opacity: 1;}
.all_menu.on .wrap{ left: 0; right: 4.8rem; opacity: 1; transition: all .6s;}
.all_menu.on .close_btn{ transform: translate(0,0); opacity: 1; transition: all .8s;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
}

.header{ display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 140px; background: rgba(255 255 255/90%); backdrop-filter: blur(20px); transition: all .2s;}
.header .fr{ display: flex; align-items: center; position: relative; z-index: 10;}
.header .logo{ display: block; position: relative; z-index: 10; height: 100px; transition: all 1s;}
.header .logo img{ display: block; width: auto; height: 100%; transition: all 1s;}
.header .logo img.white{ position: absolute; z-index: 2; top: 0; left: 0; opacity: 0;}
.header .logo img.block{ opacity: 1;}

.header .gnb{ transition: all .2s;}
.header .gnb ul{ display: flex; align-items: center; grid-gap: 0 80px;}
.header .gnb ul li{ display: flex; align-items: center; position: relative;}
.header .gnb ul li a{ display: flex; align-items: center; position: relative; z-index: 10; height: 30px; cursor: pointer;}
.header .gnb ul li a:after{ content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #000; transition: all .2s;}
.header .gnb ul li a p{ position: relative; font-size: 18px; font-weight: 500; color: #000; transition: all .2s;}
.header .gnb ul li:hover a:after{ width: 100%;}
.header .gnb ul li.on a:after{ width: 100%;}
.header .gnb ul li.on a p{ color: #000;}

.header .language{ position: relative; z-index: 10; margin: 0 0 0 100px; height: 40px;}
.header .language .head{ display: flex; align-items: center; height: 40px; cursor: pointer;}
.header .language .head span:nth-child(1){ font-size: 30px;}
.header .language .head span:nth-child(2){ margin: 0 0 0 5px; font-size: 14px; color: #000; transition: all .2s;}
.header .language .body{ overflow: hidden; position: absolute; top: 40px; left: 50%; transform: translate(-50%,0); padding: 0; height: 0; border-radius: 20px; background: #FFF; box-shadow: 0; transition: all .2s;}
.header .language .body ul{}
.header .language .body ul li{}
.header .language .body ul li a{ display: flex; align-items: center; margin: 1px 0; padding: 0 10px; height: 0; border-radius: 15px; font-size: 14px; color: #666; letter-spacing: 0; transition: all .2s;}
.header .language .body ul li a:hover{ background: #f5f5f5;}
.header .language .body ul li.on a{ background: #000; color: #FFF;}
.header .language:hover .head span:nth-child(2){ transform: rotate(180deg);}
.header .language:hover .body{ padding: 10px; height: auto; box-shadow: 0 0 0 1px rgba(0 0 0/10%);}
.header .language:hover .body ul li a{ height: 25px;}

.header .btn_all_menu{ display: none; position: relative; margin: 0 0 0 1.2rem; width: 1.8rem; height: 3rem; cursor: pointer;}
.header .btn_all_menu span{ display: block; position: absolute; right: 0; width: 100%; height: 2px; background: #000; transition: all .2s;}
.header .btn_all_menu span:nth-child(1){ top: 0.9rem; width: 100%;}
.header .btn_all_menu span:nth-child(2){ top: 50%; margin: -1px 0 0 0;}
.header .btn_all_menu span:nth-child(3){ bottom: 0.9rem; width: 100%;}

.header.on{ height: 100px;}
.header.on .logo{ height: 70px;}
@media(max-width: 1601px){
    .header .gnb ul li:hover a:after{ width: 0;}
}
@media(max-width: 1023px){
    .header .gnb ul{ grid-gap: 0 40px;}
    .header .language{ margin: 0 0 0 60px;}
}
@media(max-width: 767px){
    .header{ padding: 1.5rem 0; height: auto;}
    .header .logo{ height: 6rem;}
    .header .logo img.white{ position: absolute; z-index: 2; top: 0; left: 0; opacity: 0;}
    .header .logo img.block{ opacity: 1;}

    .header .gnb{ display: none; position: absolute; top: 8.5rem; right: 0; left: 0; padding: 0 1.5rem;}
    .header .gnb ul{ justify-content: space-between; grid-gap: initial;}
    .header .gnb ul li a{ height: 2.5rem;}
    .header .gnb ul li a:after{ height: .15rem;}
    .header .gnb ul li a p{ font-size: 1.2rem;}

    .header .language{ margin: 0; height: 3rem;}
    .header .language .head{ height: 3rem;}
    .header .language .head span:nth-child(1){ font-size: 2rem;}
    .header .language .head span:nth-child(2){ margin: 0 0 0 .4rem; font-size: 1rem;}
    .header .language .body{ top: 3rem; border-radius: 1.5rem;}
    .header .language .body ul li a{ margin: .1rem 0; padding: 0 .8rem; border-radius: 1rem; font-size: 1rem;}
    .header .language:hover .body{ padding: .6rem;}
    .header .language:hover .body ul li a{ height: 1.8rem;}

    .header .btn_all_menu{ display: block;}

    .header.on{ height: auto;}
    .header.on .logo{ height: 4rem;}
    .header.on .gnb{ top: 6.5rem;}
    .header.on .gnb ul li a p{}
}


.footer{ overflow: hidden; position: relative; z-index: 10; border-top: 1px solid #000;}
.footer .top{ display: flex; justify-content: space-between; align-items: center; padding: 100px 0;}
.footer .top .tit{ overflow: hidden; flex: 1; line-height: 1.2; font-size: calc(100vw / 30); font-weight: 700; color: #000;}
.footer .top .tit *{ font-weight: 700; color: #000;}
.footer .top .btn{ display: flex; align-items: center; grid-gap: 0 30px; cursor: pointer;}
.footer .top .btn img{ display: block; height: 100px;}
.footer .top .btn p{ margin: 10px 0 0 0; font-size: 40px; font-weight: 600; color: #000; word-wrap: break-word;}
.footer .top .btn p *{ font-size: 40px; font-weight: 600; color: #000; word-wrap: break-word;}
.footer .top .btn p > div:nth-child(1) > div:nth-child(1){ animation: footer_btn 2s infinite;}
.footer .top .btn p > div:nth-child(1) > div:nth-child(2){ animation: footer_btn 2s infinite;}
@keyframes footer_btn{
    0%   { transform: scale(1); opacity: 1;}
    10%  { transform: scale(1.3); opacity: 1;}
    20%  { transform: scale(1); opacity: 1;}
    27%  { transform: scale(1.2); opacity: 1;}
    34%  { transform: scale(1); opacity: 1;}
    38%  { transform: scale(1.1); opacity: 1;}
    42%  { transform: scale(1); opacity: 1;}
}
.footer .bottom{ position: relative; padding: 80px 0 120px 250px; border-top: 1px solid #000;}
.footer .bottom .logo{ display: flex; align-items: flex-end; position: absolute; top: 80px; left: 0;}
.footer .bottom .logo p{ font-size: 40px; font-weight: 600; color: #000;}
.footer .bottom .logo img{ display: block; height: 10px; transform: translate(5px,-3px);}
.footer .bottom .menu{ display: flex; grid-gap: 0 30px;}
.footer .bottom .menu a{ font-size: 18px; font-weight: 600; color: #000; cursor: pointer;}
.footer .bottom .down{ display: flex; align-items: center; grid-gap: 0 10px; position: absolute; top: 80px; right: 0; padding: 0 40px; height: 50px; border-radius: 30px; border: 1px solid #000; cursor: pointer; transition: all .2s;}
.footer .bottom .down p{ font-size: 18px; font-weight: 600; color: #000; transition: all .2s;}
.footer .bottom .down span{ font-size: 20px; color: #000; transition: all .2s;}
.footer .bottom .down:hover{ background: #000;}
.footer .bottom .down:hover p{ color: #FFF;}
.footer .bottom .down:hover span{ color: #FFF;}
.footer .bottom .info{ margin: 30px 0 0 0; line-height: 1.8; font-size: 16px; color: #666;}
.footer .bottom .copy{ margin: 20px 0 0 0; font-size: 12px; color: #666; text-transform: uppercase;}
@media(max-width: 1601px){
    .footer .top .btn{ grid-gap: 0 20px;}
    .footer .top .btn img{ height: 80px;}
    .footer .top .btn p{ margin: 5px 0 0 0; font-size: 30px;}
    .footer .top .btn p *{ font-size: 30px;}
    .footer .bottom{ padding: 80px 0 120px 220px;}
    .footer .bottom .down{ padding: 0 30px;}
}
@media(max-width: 1023px){
    .footer .top{ display: block;}
    .footer .top .tit{ text-align: center; font-size: calc(100vw / 20);}
    .footer .top .btn{ justify-content: center; margin: 30px 0 0 0;}
    .footer .top .btn img{ height: 80px;}
    .footer .top .btn p{ margin: 5px 0 0 0; font-size: 30px;}
    .footer .top .btn p *{ font-size: 30px;}
    .footer .bottom{ padding: 80px 0 120px 0;}
    .footer .bottom .logo{ position: initial; justify-content: center;}
    .footer .bottom .menu{ justify-content: center; margin: 40px 0 0 0;}
    .footer .bottom .down{ justify-content: center; position: initial; margin: 30px auto 0 auto; width: 220px;}
    .footer .bottom .info{ text-align: center;}
    .footer .bottom .copy{ text-align: center;}
}
@media(max-width: 767px){
    .footer .top{ padding: 3rem 0;}
    .footer .top .tit{ font-size: 1.7rem;}
    .footer .top .btn{ margin: .8rem 0 0 0; grid-gap: 0 .6rem;}
    .footer .top .btn img{ height: 3rem;}
    .footer .top .btn p{ margin: .2rem 0 0 0; font-size: 1.6rem;}
    .footer .top .btn p *{ font-size: 1.6rem;}
    .footer .bottom{ padding: 3rem 0 6rem 0;}
    .footer .bottom .logo p{ font-size: 2.2rem;}
    .footer .bottom .logo img{ height: .6rem; transform: translate(.3rem,-.3rem);}
    .footer .bottom .menu{ justify-content: space-between; grid-gap: initial; margin: 3rem 0 0 0;}
    .footer .bottom .menu a{ font-size: 1.1rem;}
    .footer .bottom .down{ grid-gap: 0 .8rem; padding: 0; width: 11rem; height: 3rem; border-radius: 30rem;}
    .footer .bottom .down p{ font-size: 1.1rem;}
    .footer .bottom .down span{ font-size: 1.2rem;}
    .footer .bottom .info{ margin: 2rem 0 0 0; font-size: 1rem;}
    .footer .bottom .copy{ margin: 2rem 0 0 0; font-size: 1rem;}
}


.quick{ position: fixed; z-index: 120; right: 100px; bottom: 50px;}
.quick .scroll_top{ display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 15px 0; position: relative; width: 60px; height: 60px; border-radius: 30px; background: #000; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; cursor: pointer; transition: all .3s;}
.quick .scroll_top span{ position: relative; z-index: 10; font-size: 24px; color: #FFF; transition: all .3s;}
.quick.on .scroll_top{ transform: translate(0,0); opacity: 1;}
@media(max-width: 1601px){
    .quick{ right: 50px;}
}
@media(max-width: 767px){
    .quick{ right: 1.5rem; bottom: 2rem;}
    .quick .scroll_top{ width: 3.2rem; height: 3.2rem; border-radius: 50%;}
    .quick .scroll_top span{ font-size: 1.4rem;}
}

.lineParent{ overflow: hidden;}

.home_visual{ overflow: hidden; position: relative; z-index: 50; min-height: 600px;}
.home_visual .text{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; left: 0;}
.home_visual .text .tit{ overflow: hidden; display: flex; align-items: flex-end; grid-gap: 0 2vw;}
.home_visual .text .tit p{ display: flex;}
.home_visual .text .tit p img{ display: block; width: auto; height: calc(100vw / 8)}
.home_visual .text .tit p:last-child img{ height: calc(100vw / 30)}
.home_visual .text .txt{ overflow: hidden; margin: 30px 0 0 0; line-height: 1.4; font-size: 26px; font-weight: 600; color: #000;}
.home_visual .text .txt *{ line-height: 1.4; font-size: 26px; font-weight: 600; color: #000;}

.home_visual_scroll_down{ position: absolute; z-index: 10; left: 100px; bottom: 0; height: 140px;}
.home_visual_scroll_down p{ position: absolute; top: 0; left: 0; transform: rotate(90deg) translate(50%,20px); font-size: 12px; font-weight: 500; color: rgba(0 0 0/100%); letter-spacing: 0; white-space: nowrap;}
.home_visual_scroll_down span{ overflow: hidden; display: block; position: relative; width: 3px; height: 140px;}
.home_visual_scroll_down span:before{ content: ""; display: block; position: absolute; top: 0; width: 3px; height: 100%; background: #000; animation: home_visual_scroll_down 2s infinite;}
@keyframes home_visual_scroll_down{
    0%   { top: -140px; opacity: 0;}
    49.9%  { top: 140px; opacity: 1;}
    50%  { top: -140px; opacity: 0;}
    100% { top: 140px; opacity: 1;}
}
@media(max-width: 1601px){
    .home_visual_scroll_down{ left: 50px;}
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .home_visual .text .tit p img{ height: calc(100vw / 7)}
    .home_visual .text .txt{ margin: 1rem 0 0 0; font-size: 1.4rem;}
    .home_visual .text .txt *{ font-size: 1.4rem;}

    .home_visual_scroll_down{ left: 1.5rem; height: 8rem;}
    .home_visual_scroll_down p{ transform: rotate(90deg) translate(40%,1.6rem); font-size: .8rem;}
    .home_visual_scroll_down span{ width: .3rem; height: 8rem;}
    .home_visual_scroll_down span:before{ width: .3rem;}
    @keyframes home_visual_scroll_down{
        0%   { top: -8rem;}
        49.9%  { top: 8rem;}
        50%  { top: -8rem;}
        100% { top: 8rem;}
    }
}


.home_about{ display: flex; flex-direction: column; justify-content: center; position: relative; padding: 200px 0; min-height: 100vh; background: #000; z-index:999;}
.home_about .t1{ display: flex; justify-content: flex-start; align-items: center;}
.home_about .t1 p{}
.home_about .t1 p img{ display: block; width: auto; height: calc(100vw / 20);}
.home_about .t2{ padding: 100px 0; text-align: center; line-height: 1.4; font-size: 26px; font-weight: 500; color: #FFF;}
.home_about .t3{ display: flex; justify-content: flex-end; align-items: center;}
.home_about .t3 p{}
.home_about .t3 p img{ display: block; width: auto; height: calc(100vw / 20);}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .home_about{ padding: 8rem 0;}
    .home_about .t1 p img{ height: calc(100vw / 15);}
    .home_about .t2{ padding: 6rem 0; font-size: 1.4rem;}
    .home_about .t3 p img{ height: calc(100vw / 15);}
}


.home_project{ padding: 200px 0;}
.home_project .title{ text-align: center; font-size: 40px; font-weight: 800; color: #000;}
.home_project .body{ position: relative; margin: 0 0 0 0;}
.home_project .rolling{ overflow: hidden;}
.home_project .rolling .swiper-wrapper{}
.home_project .rolling .swiper-wrapper .swiper-slide{ position: relative;}
.home_project .rolling .swiper-wrapper .swiper-slide a{ display: block; cursor: pointer;}
.home_project .rolling .swiper-wrapper .swiper-slide a .img{ position: relative;}
.home_project .rolling .swiper-wrapper .swiper-slide a .img:after{ content: ""; display: block; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0 0 0/0), rgba(0 0 0/0), rgba(0 0 0/80%));}
.home_project .rolling .swiper-wrapper .swiper-slide a .img .info{ display: flex; flex-direction: column; align-items: flex-start; position: absolute; z-index: 11; right: 0; left: 0; bottom: 0; padding: 40px; transition: all .2s;}
.home_project .rolling .swiper-wrapper .swiper-slide a .img .info .t1{ padding: 5px 10px; border-radius: 30px; border: 1px solid rgba(255 255 255/40%); font-size: 14px; color: #FFF;}
.home_project .rolling .swiper-wrapper .swiper-slide a .img .info .t2{ margin: 15px 0 0 0; width: 100%; line-height: 1.2; font-size: 22px; font-weight: 600; color: #FFF; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.home_project .rolling .swiper-wrapper .swiper-slide a .img .info .fb{ display: flex; flex-direction: column; grid-gap: 10px 0; margin: 0 0 -40px 0; width: 100%; opacity: 0; transition: all .2s;}
.home_project .rolling .swiper-wrapper .swiper-slide a .img .info .fb p{ font-size: 16px; color: #FFF; transition: all .2s;}
.home_project .rolling .swiper-wrapper .swiper-slide a .img img{ display: block; width: 100%;}
.home_project .rolling .swiper-wrapper .swiper-slide a:hover .img .info{ background: rgba(0 0 0/40%); backdrop-filter: blur(20px);}
.home_project .rolling .swiper-wrapper .swiper-slide a:hover .img .info .fb{ margin: 30px 0 0 0; opacity: 1;}

.home_project_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: calc(50% - 30px); left: -30px; width: 60px; height: 60px; border-radius: 50%; background: #FFF; opacity: 1; transition: all .2s; cursor: pointer;}
.home_project_prev span{ font-size: 30px; color: #000;}
.home_project_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 50; top: calc(50% - 30px); right: -30px; width: 60px; height: 60px; border-radius: 50%; background: #FFF; opacity: 1; transition: all .2s; cursor: pointer;}
.home_project_next span{ font-size: 30px;}

.home_project .more{ display: flex; justify-content: center; margin: 60px 0 0 0;}
.home_project .more a{ display: flex; align-items: center; grid-gap: 0 10px; padding: 0 40px; height: 60px; border-radius: 30px; border: 2px solid #000; transition: all .2s;}
.home_project .more a span{ font-size: 24px; color: #000; transition: all .2s;}
.home_project .more a p{ font-size: 18px; font-weight: 600; color: #000; transition: all .2s;}
.home_project .more a:hover{ background: #000;}
.home_project .more a:hover span{ color: #FFF;}
.home_project .more a:hover p{ color: #FFF;}
@media(max-width: 1601px){
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info{ padding: 30px;}
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info .t2{ -webkit-line-clamp: 2;}
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info .fb{ margin: 20px 0 0 0; opacity: 1;}
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .home_project{ padding: 8rem 0;}
    .home_project .title{ font-size: 2rem;}
    .home_project .body{ margin: 0 0 0 0;}
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info{ padding: 1.5rem 2rem 2rem 2rem;}
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info .t1{ padding: .4rem .8rem; border-radius: 30rem; font-size: 1rem;}
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info .t2{ margin: 1rem 0 0 0; font-size: 1.8rem;}
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info .fb{ margin: 1.5rem 0 0 0; opacity: 1;}
    .home_project .rolling .swiper-wrapper .swiper-slide a .img .info .fb p{ font-size: 1rem;}
    .home_project .rolling .swiper-wrapper .swiper-slide a:hover .img .info{ background: rgba(0 0 0/0); backdrop-filter: blur(0);}
    .home_project .rolling .swiper-wrapper .swiper-slide a:hover .img .info .fb{ margin: 1.5rem 0 0 0;}

    .home_project_prev{ top: calc(50% - 2rem); left: -2rem; width: 4rem; height: 4rem;}
    .home_project_prev span{ font-size: 2rem;}
    .home_project_next{ top: calc(50% - 2rem); right: -2rem; width: 4rem; height: 4rem;}
    .home_project_next span{ font-size: 2rem;}

    .home_project .more{ margin: 3rem 0 0 0;}
    .home_project .more a{ justify-content: center; grid-gap: 0 .8rem; padding: 0; width: 100%; height: 3.5rem; border-radius: 30rem;}
    .home_project .more a span{ font-size: 1.4rem;}
    .home_project .more a p{ font-size: 1.2rem;}
}




.sub_guide{ padding: 240px 0 100px 0;}
.sub_guide.sub_project_padding{ padding-bottom: 0;}
.sub_guide .tit{ font-size: 60px; font-weight: 700; color: #000;}
.sub_guide .txt{ overflow: hidden; margin: 20px 0 0 0; line-height: 1.2; font-size: 26px; font-weight: 500; color: #000;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .sub_guide{ padding: 12rem 0 6rem 0;}
    .sub_guide .tit{ font-size: 2.6rem;}
    .sub_guide .txt{ margin: 1rem 0 0 0; font-size: 1.4rem;}
}


.sub_about_intro{}
.sub_about_intro .head{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sub_about_intro .head .t1{ display: flex; align-items: flex-end; grid-gap: 0 1vw;}
.sub_about_intro .head .t1 p img{ display: block; width: auto; height: calc(100vw / 15);}
.sub_about_intro .head .t1 span img{ height: calc(100vw / 50)}
.sub_about_intro .head .t2{ margin: 60px 0 0 0;}
.sub_about_intro .head .t2 p img{ display: block; width: auto; height: calc(100vw / 70);}
.sub_about_intro .body{ display: flex; margin: 100px 0 0 0;}
.sub_about_intro .body .wrap{ display: flex; justify-content: center; width: 50%;}
.sub_about_intro .body .wrap .t1{ font-size: 40px; font-weight: 700; color: #000;}
.sub_about_intro .body .wrap .t2{ margin: 20px 0 0 0; line-height: 1.6; font-size: 20px; font-weight: 400; color: #000;}
.sub_about_intro .body .wrap .t2 *{ line-height: 1.6; font-size: 20px; font-weight: 400; color: #000;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
    .sub_about_intro .body .wrap{ justify-content: initial;}
    .sub_about_intro .body .wrap .t2{ font-size: 18px;}
}
@media(max-width: 767px){
    .sub_about_intro .head .t1 p img{ height: calc(100vw / 8);}
    .sub_about_intro .head .t1 span img{ height: calc(100vw / 35)}
    .sub_about_intro .head .t2{ margin: 2rem 0 0 0;}
    .sub_about_intro .head .t2 p img{ height: calc(100vw / 40);}
    .sub_about_intro .body{ flex-direction: column; align-items: center; grid-gap: 3rem 0; margin: 3rem 0 0 0;}
    .sub_about_intro .body .wrap{ width: 100%;}
    .sub_about_intro .body .wrap .t1{ font-size: 1.8rem;}
    .sub_about_intro .body .wrap .t2{ margin: 1rem 0 0 0; font-size: 1.2rem;}
    .sub_about_intro .body .wrap .t2 *{ font-size: 1.2rem;}
}


.sub_about_ci{ margin: 50px 0 0 0; padding: 150px 0 0 0;}
.sub_about_ci .head{}
.sub_about_ci .head .t1{ font-size: 60px; font-weight: 700; color: #000;}
.sub_about_ci .head .t1 *{ font-size: 60px; font-weight: 700; color: #000;}
.sub_about_ci .head .t2{ overflow: hidden; margin: 20px 0 0 0; line-height: 1.4; font-size: 26px; color: #000;}
.sub_about_ci .head .t2 *{ /*overflow: hidden;*/ font-size: 26px; color: #000;}
.sub_about_ci .body{ display: flex; justify-content: center; align-items: center; margin: 100px 0 0 0;}
.sub_about_ci .body img{ display: block; height: 400px;}
.sub_about_ci .text{ margin: 100px 0 0 0; line-height: 1.6; font-size: 20px; font-weight: 400; color: #000;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .sub_about_ci{ margin: 3rem 0 0 0; padding: 10rem 0 0 0;}
    .sub_about_ci .head .t1{ font-size: 2.6rem;}
    .sub_about_ci .head .t1 *{ font-size: 2.6rem;}
    .sub_about_ci .head .t2{ margin: 1rem 0 0 0; font-size: 1.4rem;}
    .sub_about_ci .head .t2 *{ font-size: 1.4rem;}
    .sub_about_ci .head .t2 br{ display: none;}
    .sub_about_ci .body{ margin: 3rem 0 0 0;}
    .sub_about_ci .body img{ height: 20rem;}
    .sub_about_ci .text{ margin: 3rem 0 0 0; font-size: 1.2rem;}
}


.sub_about_client{ margin: 50px 0 0 0; padding: 150px 0 0 0;}
.sub_about_client .head{}
.sub_about_client .head .t1{ font-size: 60px; font-weight: 700; color: #000;}
.sub_about_client .list{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 30px; margin: 100px 0 0 0;}
.sub_about_client .list .wrap{ display: flex; justify-content: center; align-items: center;}
.sub_about_client .list .wrap img{ display: block; max-width: 10vw; max-height: 10vh;}
@media(max-width: 1601px){
    .sub_about_client .list .wrap img{ max-width: 12vw; max-height: 12vh;}
}
@media(max-width: 1023px){
    .sub_about_client .list{ grid-template-columns: repeat(4,1fr); grid-gap: 30px 10px;}
    .sub_about_client .list .wrap img{ max-width: 14vw; max-height: 14vh;}
}
@media(max-width: 767px){
    .sub_about_client{ margin: 3rem 0 0 0; padding: 10rem 0 0 0;}
    .sub_about_client .head .t1{ font-size: 2.6rem;}
    .sub_about_client .list{ grid-template-columns: repeat(3,1fr); grid-gap: 1rem 0; margin: 3rem 0 0 0;}
    .sub_about_client .list .wrap img{ max-width: 6rem; max-height: 4rem;}
}


.sub_about_location{ display: flex; align-items: center; grid-gap: 0 100px; margin: 200px 0 0 0; padding: 100px 0; background: #000;}
.sub_about_location .head{ width: 50%;}
.sub_about_location .head .t1{ font-size: 40px; font-weight: 700; color: #FFF;}
.sub_about_location .head .t2{ display: flex; flex-direction: column; grid-gap: 15px 0;}
.sub_about_location .head .t2 .wrap{ display: flex; justify-content: flex-start;}
.sub_about_location .head .t2 .wrap p{ flex: 0 0 100px; line-height: 1.4; font-size: 20px; color: rgba(255 255 255/80%);}
.sub_about_location .head .t2 .wrap span{ flex: 1; line-height: 1.4; font-size: 20px; color: #FFF; word-wrap: break-word;}
.sub_about_location .head .t2 .wrap a{ line-height: 1.4; font-size: 20px; color: #FFF; word-wrap: break-word;}
.sub_about_location .head .btn{ display: flex; grid-gap: 10px; margin: 40px 0 0 0;}
.sub_about_location .head .btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 0 5px; padding: 0 50px; height: 60px; border-radius: 30px; border: 2px solid #FFF; cursor: pointer; transition: all .2s;}
.sub_about_location .head .btn a span{ font-size: 24px; color: #FFF;}
.sub_about_location .head .btn a p{ font-size: 20px; font-weight: 500; color: #FFF;}
.sub_about_location .head .btn a:hover{ background: #FFF;}
.sub_about_location .head .btn a:hover span{ color: #000;}
.sub_about_location .head .btn a:hover p{ color: #000;}
.sub_about_location .my_map{ width: 50%; height: 500px; background: #000;}
@media(max-width: 1601px){
    .sub_about_location{ grid-gap: 0;}
    .sub_about_location .head{ width: 450px;}
    .sub_about_location .head .btn{ flex-direction: column;}
    .sub_about_location .head .btn a{ padding: 0; width: 200px;}
    .sub_about_location .my_map{ flex: 1; width: auto;}
}
@media(max-width: 1023px){
    .sub_about_location{ display: block;}
    .sub_about_location .head{ width: auto;}
    .sub_about_location .head .btn{ flex-direction: initial;}
    .sub_about_location .head .btn a{ width: 33.333%;}
    .sub_about_location .my_map{ margin: 60px 0 0 0; height: 400px;}
}
@media(max-width: 767px){
    .sub_about_location{ margin: 6rem 0 0 0; padding: 6rem 0;}
    .sub_about_location .head .t1{ font-size: 2rem;}
    .sub_about_location .head .t2{ grid-gap: .8rem 0;}
    .sub_about_location .head .t2 .wrap p{ flex: 0 0 8rem; font-size: 1.2rem;}
    .sub_about_location .head .t2 .wrap span{ font-size: 1.2rem;}
    .sub_about_location .head .t2 .wrap a{ font-size: 1.2rem;}
    .sub_about_location .head .btn{ grid-gap: .4rem; margin: 2rem 0 0 0;}
    .sub_about_location .head .btn a{ grid-gap: 0 .2rem; height: 3rem; border-radius: 30rem; border: .15rem solid #FFF;}
    .sub_about_location .head .btn a span{ font-size: 1.4rem;}
    .sub_about_location .head .btn a p{ font-size: 1.2rem;}
    .sub_about_location .my_map{ margin: 3rem 0 0 0; height: 18rem;}
}


.sub_project_wrap{ overflow: hidden;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
}

.sub_project_menu{ display: flex; flex-wrap: wrap; align-content: center; grid-gap: 0 60px; position: relative; z-index: 10; padding: 120px 0 20px 0; background: #FFF;}
.sub_project_menu a{ position: relative; cursor: pointer;}
.sub_project_menu a:after{ content: ""; display: block; position: absolute; top: calc(50% - 2px); right: -28px; width: 4px; height: 4px; border-radius: 50%; background: #CCC;}
.sub_project_menu a:last-child:after{ display: none;}
.sub_project_menu a p{ font-size: 20px; color: #666;}
.sub_project_menu a.on p{ font-weight: 600; color: #000;}
.sub_project_menu a.on{}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .sub_project_menu{ grid-gap: 0 2rem; padding: 7.5rem 0 1.5rem 0;}
    .sub_project_menu a:after{ top: calc(50% - .15rem); right: -1.15rem; width: .3rem; height: .3rem;}
    .sub_project_menu a p{ font-size: 1.2rem;}
}


.sub_project{ margin: 40px 0 0 0; padding: 0 0 100px 0;}
.sub_project ul{ display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 60px 10px;}
.sub_project ul li{}
.sub_project ul li a{ display: block; cursor: pointer;}
.sub_project ul li a .img{ position: relative;}
.sub_project ul li a .img .hover{ display: flex; justify-content: space-between; align-items: flex-end; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; padding: 30px; background: linear-gradient(180deg, rgba(0 0 0/0), rgba(0 0 0/0), rgba(0 0 0/80%)); opacity: 0; transition: all .2s;}
.sub_project ul li a .img .hover p{ font-size: 15px; color: #FFF;}
.sub_project ul li a .img img{ display: block; width: 100%;}
.sub_project ul li a .info{ display: flex; flex-direction: column; align-items: flex-start; margin: 20px 0 0 0;}
.sub_project ul li a .info .t1{ margin: 10px 0 0 0; font-size: 14px; color: #666;}
.sub_project ul li a .info .t2{ margin: 0 10% 0 0; line-height: 1.2; font-size: 22px; font-weight: 600; color: #000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.sub_project ul li:hover a .img .hover{ padding: 40px; opacity: 1;}
@media(max-width: 2560px){
    .sub_project ul{ grid-template-columns: repeat(5,1fr);}
}
@media(max-width: 1921px){
    .sub_project ul{ grid-template-columns: repeat(4,1fr);}
}
@media(max-width: 1601px){
    .sub_project ul{ grid-template-columns: repeat(3,1fr);}
    .sub_project ul li a .img .hover{ padding: 30px; opacity: 1;}
    .sub_project ul li a .img .info .t3{ margin: 30px 0 0 0; opacity: 1;}
    .sub_project ul li:hover a .img .hover{ padding: 30px;}
    .sub_project ul li:hover a .img .info .t3{ margin: 30px 0 0 0;}
}
@media(max-width: 1023px){
    .sub_project ul{ grid-template-columns: repeat(2,1fr);}
}
@media(max-width: 767px){
    .sub_project{ margin: 1.5rem 0 0 0; padding: 0 0 6rem 0;}
    .sub_project ul{ grid-template-columns: repeat(1,1fr);}
    .sub_project ul{ grid-gap: 2rem .4rem;}
    .sub_project ul li a .img .hover{ flex-direction: column; justify-content: flex-end; align-items: flex-start; grid-gap: .6rem 0; padding: 1.5rem;}
    .sub_project ul li a .img .hover p{ font-size: 1.2rem;}
    .sub_project ul li a .info{ margin: 1rem 0 0 0;}
    .sub_project ul li a .info .t1{ margin: 0.6rem 0 0 0; font-size: 1.2rem;}
    .sub_project ul li a .info .t2{ margin: 0; font-size: 1.6rem;}
    .sub_project ul li:hover a .img .hover{ padding: 1.5rem;}
}


.popup_project_view{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 200; top: 120%; right: 0; bottom: -120%; left: 0; padding: 100px !important;}
.popup_project_view .contents{ display: flex; position: relative; z-index: 10; padding: 50px; max-width: 1200px; width: 100%; background: #FFF; transform: scale(.6); opacity: 0; transition: all .5s;}
.popup_project_view .contents .close{ display: flex; justify-content: center; align-items: center; position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; cursor: pointer;}
.popup_project_view .contents .close span{ font-size: 24px; color: #000;}
.popup_project_view .contents .btn_prev{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 20; top: calc(50% - 30px); left: -50px; width: 50px; height: 60px; background: rgba(255 255 255/20%); cursor: pointer;}
.popup_project_view .contents .btn_prev p{ display: none;}
.popup_project_view .contents .btn_prev span{ font-size: 30px; color: #FFF;}
.popup_project_view .contents .btn_next{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 20; top: calc(50% - 30px); right: -50px; width: 50px; height: 60px; background: rgba(255 255 255/20%); cursor: pointer;}
.popup_project_view .contents .btn_next p{ display: none;}
.popup_project_view .contents .btn_next span{ font-size: 30px; color: #FFF;}
.popup_project_view .contents .fl{ flex: 1; width: 100%;}
.popup_project_view .contents .fl .tag{ font-size: 16px; color: #666;}
.popup_project_view .contents .fl .title{ margin: 10px 0 0 0; line-height: 1.2; font-size: 26px; font-weight: 700; color: #000; word-wrap: break-word; word-break: break-all;}
.popup_project_view .contents .fl .row{ margin: 40px 0 0 0;}
.popup_project_view .contents .fl .row .tit{ font-size: 16px; font-weight: 600; color: #000;}
.popup_project_view .contents .fl .row .txt{ margin: 5px 0 0 0; line-height: 1.4; font-size: 16px; color: #666;}
.popup_project_view .contents .fr{ margin: 0 50px 0 0; width: 700px;}
.popup_project_view .contents .rolling{ position: relative;}
.popup_project_view .contents .rolling .max{ overflow: hidden; position: relative; border-radius: 10px;}
.popup_project_view .contents .rolling .max .swiper-wrapper{}
.popup_project_view .contents .rolling .max .swiper-wrapper .swiper-slide{}
.popup_project_view .contents .rolling .max .swiper-wrapper .swiper-slide .img{}
.popup_project_view .contents .rolling .max .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%;}
.popup_project_view .contents .rolling .min{ overflow: hidden; margin: 10px 0 0 0;}
.popup_project_view .contents .rolling .min .swiper-wrapper{}
.popup_project_view .contents .rolling .min .swiper-wrapper .swiper-slide{ cursor: pointer;}
.popup_project_view .contents .rolling .min .swiper-wrapper .swiper-slide .img{ opacity: 0.3; filter: grayscale(50%);}
.popup_project_view .contents .rolling .min .swiper-wrapper .swiper-slide .img img{ display: block; width: 100%; border-radius: 10px;}
.popup_project_view .contents .rolling .min .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .img{ opacity: 1; filter: grayscale(0);}
.popup_project_view .contents .rolling .popup_project_view_prev{ display: none; align-items: center;}
.popup_project_view .contents .rolling .popup_project_view_prev span{ font-size: 18px; color: #666; cursor: pointer;}
.popup_project_view .contents .rolling .popup_project_view_next{ display: none; align-items: center;}
.popup_project_view .contents .rolling .popup_project_view_next span{ font-size: 18px; color: #666; cursor: pointer;}
.popup_project_view .contents .rolling .popup_project_view_page{ display: flex; justify-content: center; align-items: center; grid-gap: 0 2px; position: absolute; z-index: 10; left: initial; right: 0; bottom: 0; padding: 0 10px; width: auto; height: 30px; border-radius: 10px 0 0 0; background: #000; font-size: 12px; color: rgba(255 255 255/60%);}
.popup_project_view .contents .rolling .popup_project_view_page .swiper-pagination-total{ font-size: 12px; color: rgba(255 255 255/80%);}
.popup_project_view .contents .rolling .popup_project_view_page .swiper-pagination-current{ font-size: 14px; font-weight: 500; color: #FFF;}
.popup_project_view > .close{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); opacity: 0; transition: all .2s;}
.popup_project_view.on{ top: 0; bottom: 0;}
.popup_project_view.on .contents{ transform: scale(1); opacity: 1;}
.popup_project_view.on > .close{ opacity: 1;}
@media(max-width: 1601px){
    .popup_project_view .contents .fr{ width: 500px;}
}
@media(max-width: 1023px){
    .popup_project_view .contents{ display: block; max-width: 100%;}
    .popup_project_view .contents .fl{ margin: 50px 0 0 0;}
    .popup_project_view .contents .fl .fb{}
    .popup_project_view .contents .fl .row{ margin: 30px 0 0 0;}
    .popup_project_view .contents .fl .row:last-child{ width: 100%;}
    .popup_project_view .contents .fr{ margin: 0; width: auto;}
}
@media(max-width: 767px){
    .popup_project_view{ padding: 1.5rem !important;}
    .popup_project_view .contents{ padding: 2rem; width: 100%;}
    .popup_project_view .contents .close{ top: 0rem; right: 0rem; width: 2.4rem; height: 2.4rem;}
    .popup_project_view .contents .close span{ font-size: 1.2rem;}
    .popup_project_view .contents .btn_page{ display: flex; grid-gap: 0.6rem; margin: 1rem 0 0 0;}
    .popup_project_view .contents .btn_prev{ grid-gap: 0 0.2rem; position: initial; width: 50%; height: 2.4rem; border-radius: 20rem; border: 1px solid #e5e5e5; background: #fafafa;}
    .popup_project_view .contents .btn_prev p{ display: block; font-size: 1rem; color: #000;}
    .popup_project_view .contents .btn_prev span{ font-size: 1.4rem; color: #000;}
    .popup_project_view .contents .btn_next{ grid-gap: 0 0.2rem; position: initial; width: 50%; height: 2.4rem; border-radius: 20rem; border: 1px solid #e5e5e5; background: #fafafa;}
    .popup_project_view .contents .btn_next p{ display: block; font-size: 1rem; color: #000;}
    .popup_project_view .contents .btn_next span{ font-size: 1.4rem; color: #000;}
    .popup_project_view .contents .fl{ margin: 1rem 0 0 0;}
    .popup_project_view .contents .fl .tag{ font-size: 1rem;}
    .popup_project_view .contents .fl .title{ margin: .6rem 0 0 0; font-size: 1.4rem;}
    .popup_project_view .contents .fl .row{ margin: 1rem 0 0 0;}
    .popup_project_view .contents .fl .row .tit{ font-size: 1rem;}
    .popup_project_view .contents .fl .row .txt{ margin: .4rem 0 0 0; font-size: 1rem;}
    .popup_project_view .contents .rolling .max{ border-radius: 0.6rem;}
    .popup_project_view .contents .rolling .min{ margin: 5px 0 0 0;}
    .popup_project_view .contents .rolling .min .swiper-wrapper .swiper-slide .img img{ border-radius: 0.6rem;}
    .popup_project_view .contents .rolling .popup_project_view_page{ grid-gap: 0 .2rem; height: 1.8rem; border-radius: 0.6rem 0 0 0; font-size: .8rem;}
    .popup_project_view .contents .rolling .popup_project_view_page .swiper-pagination-total{ font-size: .8rem;}
    .popup_project_view .contents .rolling .popup_project_view_page .swiper-pagination-current{ font-size: .8rem;}
}


.sub_contact{ display: flex; grid-gap: 0 100px;}
.sub_contact .fl{ width: 50%;}
.sub_contact .fr{ width: 50%;}
.sub_contact .head{ display:flex; justify-content: space-between; align-items: flex-end; padding: 0 0 20px 0;}
.sub_contact .head .tit{ font-size: 40px; font-weight: 600; color: #333; letter-spacing:-1px;}
.sub_contact .head .tip{ font-size: 16px; color: #333;}
.sub_contact ul{ display: flex; flex-wrap: wrap; grid-gap: 0 0;}
.sub_contact ul li{ width: 100%;}
.sub_contact ul li .wrap{ display: flex; padding: 20px 0;}
.sub_contact ul li .wrap .tit{ flex: 0 0 180px; line-height: 22px; font-size: 18px; font-weight: 500; color: #333;}
.sub_contact ul li .wrap .tit span{ padding: 0 0 0 5px; color: #F00;}
.sub_contact ul li .wrap .txt{ margin: 10px 0 0 0; line-height: 1.4; font-size: 14px; color: #999;}

.sub_contact ul.info{ padding: 20px 0;}
.sub_contact ul.info li{ border: 0;}
.sub_contact ul.info li a{ align-items: center; padding: 10px 0;}
.sub_contact ul.info li a > .tit{ line-height: 1.4;}

.sub_contact input{ margin: 0; padding: 0 15px; width: 100%; height: 50px; border-radius: 5px; border: 1px solid rgba(0 0 0/5%); background: #fafafa; line-height: 50px; font-size: 16px; font-weight: 400; color: #333; outline: none; -webkit-appearance: none;}
.sub_contact input:focus{ border-color: #000;}
.sub_contact select{ margin: 0; padding: 0 35px 0 15px; width: 100%; height: 50px; border-radius: 5px; border: 1px solid rgba(0 0 0/5%); background:url(/images/model_icon_select.png) no-repeat center right 15px #fafafa; background-size: 8px auto; line-height: 50px; font-size: 16px; font-weight: 400; color: #333; outline: none; -webkit-appearance: none;}
.sub_contact select:focus{ border-color: #000;}
.sub_contact textarea{ display: flex; align-items: center; margin: 0; padding: 15px; width: 100%; height: 150px; border-radius: 5px; border: 1px solid rgba(0 0 0/5%); background: #fafafa; font-size: 16px; font-weight: 400; color: #333; outline: none; -webkit-appearance: none;}
.sub_contact textarea:focus{ border-color: #000;}

.sub_contact .tel{ flex: 1; display: flex; grid-gap: 0 10px;}
.sub_contact .tel select{ flex: 0 0 140px;}
.sub_contact .tel input{ width: 50%;}

.sub_contact .mail{ flex: 1; display: flex; align-items: center; grid-gap: 0 10px;}
.sub_contact .mail input{ width: 50%;}
.sub_contact .mail select{ flex: 0 0 200px;}
.sub_contact .mail p{ font-size: 16px; color: #999;}

.sub_contact .radio{ flex: 1; display: flex; flex-wrap: wrap; grid-gap: 20px 30px; padding: 15px 0;}
.sub_contact .radio label{ display: flex; align-items: center; grid-gap: 0 10px; cursor: pointer;}
.sub_contact .radio label input:first-child{ display: flex; justify-content: center; align-items: center; position: relative; padding: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #e5e5e5; background: #FFF;}
.sub_contact .radio label input:first-child:checked{ border-color: #000; background: #000;}
.sub_contact .radio label input:first-child:checked:before{ content: "✔"; position: absolute; font-size: 12px; font-family: initial; color: #FFF;}
.sub_contact .radio label p{ font-size: 16px; color: #838383;}
.sub_contact .radio label.max{ width: 100%;}

.sub_contact .date{ flex: 1; display: flex; align-items: center;}
.sub_contact .date input{ width: 50%;}
.sub_contact .date p{ padding: 0 10px; font-size: 16px; color: #999;}

.sub_contact .file{ flex: 1; padding: 30px 20px; border-radius: 5px; border: 1px dashed #DDD; background: #fafafa; text-align: center; cursor: pointer;}
.sub_contact .file .t1{ font-size: 20px; font-weight: 500; color: #000;}
.sub_contact .file .t2{ margin: 5px 0 0 0; font-size: 16px; color: #666;}

.sub_contact .terms{ display: flex; align-items: center; margin: 20px 0 0 0;}
.sub_contact .terms .btn{ display: flex; align-items: center; grid-gap: 0 10px;}
.sub_contact .terms .btn span{ display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #333; font-size: 16px; color: #333; cursor: pointer;}
.sub_contact .terms .btn span.on{ border-color: #000; background: #000; color: #FFF;}
.sub_contact .terms .btn p{ font-size: 18px; font-weight: 600; color: #333; cursor: pointer;}
.sub_contact .type_btn{ justify-content: flex-start;}
@media(max-width: 1601px){
    .sub_contact{ flex-wrap: wrap; grid-gap: 60px;}
    .sub_contact .fl{ width: 100%;}
    .sub_contact .fr{ width: 100%;}
    .sub_contact .type_btn{ justify-content: center;}
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .sub_contact{ grid-gap: 6rem;}
    .sub_contact .head{ padding: 0;}
    .sub_contact .head .tit{ font-size: 2rem;}
    .sub_contact .head .tip{ font-size: 1rem;}
    .sub_contact ul li .wrap{ display: block; padding: 1.5rem 0 0 0;}
    .sub_contact ul li .wrap .tit{ flex: 1; padding: 0 0 .8rem 0; line-height: 1; font-size: 1.1rem;}
    .sub_contact ul li .wrap .tit span{ padding: 0 0 0 .4rem;}
    .sub_contact ul li .wrap .txt{ margin: .8rem 0 0 0; font-size: 1rem;}

    .sub_contact ul.info{ padding: 20px 0;}
    .sub_contact ul.info li{ border: 0;}
    .sub_contact ul.info li a{ align-items: center; padding: 10px 0;}
    .sub_contact ul.info li a > .tit{ line-height: 1.4;}

    .sub_contact input{ padding: 0 1rem; height: 3.5rem; border-radius: .5rem; line-height: 3.5rem; font-size: 1.2rem;}
    .sub_contact select{ padding: 0 2rem 0 1rem; height: 3.5rem; border-radius: .5rem; background:url(/images/model_icon_select.png) no-repeat center right 1rem #fafafa; background-size: .6rem auto; line-height: 3.5rem; font-size: 1.2rem;}
    .sub_contact textarea{ padding: .5rem 1rem; height: 8rem; border-radius: .5rem; font-size: 1.2rem;}

    .sub_contact .tel{ grid-gap: 0 .4rem;}
    .sub_contact .tel select{ flex: 0 0 7rem;}

    .sub_contact .mail{ flex-wrap: wrap; grid-gap: .4rem 0;}
    .sub_contact .mail input{ width: 47%;}
    .sub_contact .mail select{ flex: 0 0 100%;}
    .sub_contact .mail p{ width: 6%; text-align: center; font-size: 1rem;}

    .sub_contact .date p{ padding: 0 .4rem; font-size: 1.2rem;}

    .sub_contact .file{ padding: 2rem 0; border-radius: .5rem;}
    .sub_contact .file .t1{ font-size: 1.2rem;}
    .sub_contact .file .t2{ margin: .4rem 0 0 0; font-size: 1rem;}

    .sub_contact .terms{ margin: 1.5rem 0 0 0;}
    .sub_contact .terms .btn{ grid-gap: 0 .6rem;}
    .sub_contact .terms .btn span{ width: 2.2rem; height: 2.2rem; font-size: 1rem;}
    .sub_contact .terms .btn p{ font-size: 1.2rem;}
}


.sub_contact_location{ display: flex; grid-gap: 0 100px; margin: 100px 0 0 0; padding: 100px 0; background: #000;}
.sub_contact_location .head{ width: 50%;}
.sub_contact_location .head .title{ line-height: 1.2; font-size: 60px; font-weight: 600; color: #FFF;}
.sub_contact_location .head .tit{ margin: 50px 0 10px 0; font-size: 20px; color: rgba(255 255 255/60%);}
.sub_contact_location .head .txt{ line-height: 1.4; font-size: 18px; color: #FFF;}
.sub_contact_location .head .txt br{}
.sub_contact_location .head .mail{ display: flex; align-items: center; grid-gap: 0 10px;}
.sub_contact_location .head .mail p{ font-size: 18px; color: #FFF;}
.sub_contact_location .head .mail span{ font-size: 24px; color: #FFF;}
.sub_contact_location .head .tel{ display: block; margin: 10px 0 0 0; font-size: 18px; color: #FFF;}
.sub_contact_location .head .down{ display: flex; align-items: center; grid-gap: 0 10px; margin: 50px 0 0 0;}
.sub_contact_location .head .down p{ font-size: 18px; color: #FFF;}
.sub_contact_location .head .down span{ font-size: 24px; color: #FFF;}
.sub_contact_location .body{ width: 50%;}
.sub_contact_location .body .tit{ font-size: 20px; color: rgba(255 255 255/60%);}
.sub_contact_location .body .my_map{ margin: 20px 0 0 0; height: 500px; background: #FFF;}
@media(max-width: 1601px){
    .sub_contact_location{ grid-gap: initial;}
    .sub_contact_location .head{ width: 460px;}
    .sub_contact_location .body{ flex: 1;}
}
@media(max-width: 1023px){
    .sub_contact_location{ display: block;}
    .sub_contact_location .head{ width: auto;}
    .sub_contact_location .head .title br{ display: none;}
    .sub_contact_location .body{ margin: 60px 0 0 0; width: auto;}
}
@media(max-width: 767px){
    .sub_contact_location{ margin: 6rem 0 0 0; padding: 6rem 0;}
    .sub_contact_location .head .title{ font-size: 2rem;}
    .sub_contact_location .head .tit{ margin: 2rem 0 .8rem 0; font-size: 1rem;}
    .sub_contact_location .head .txt{ font-size: 1.2rem; letter-spacing: -1px;}
    .sub_contact_location .head .mail{ grid-gap: 0 .8rem;}
    .sub_contact_location .head .mail p{ font-size: 1.2rem;}
    .sub_contact_location .head .mail span{ font-size: 1.4rem;}
    .sub_contact_location .head .tel{ margin: .8rem 0 0 0; font-size: 1.2rem;}
    .sub_contact_location .head .down{ grid-gap: 0 .8rem; margin: 2rem 0 0 0;}
    .sub_contact_location .head .down p{ font-size: 1.2rem;}
    .sub_contact_location .head .down span{ font-size: 1.4rem;}
    .sub_contact_location .body{ margin: 2rem 0 0 0;}
    .sub_contact_location .body .tit{ font-size: 1rem;}
    .sub_contact_location .body .my_map{ margin: .8rem 0 0 0; height: 18rem;}
}







.type_page{ display: flex; justify-content: center; align-items: center; margin: 80px 0 0 0; grid-gap: 0 10px;}
.type_page .btn{ display: flex;}
.type_page .btn p{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: all .2s;}
.type_page .btn p span{ display: flex; justify-content: center; align-items: center; font-size: 20px; color: #999;}
.type_page .btn p:hover{ background: #f4f5f7;}
.type_page .page{ display: flex; align-items: center; grid-gap: 0 5px;}
.type_page .page p{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e5e5; font-size: 14px; color: #666; transition: all .3s; cursor: pointer;}
.type_page .page p:hover{ background: #f4f5f7;}
.type_page .page p.on{ position: relative; z-index:1; border-color: #333; background: #333; color:#FFF;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .type_page{ margin: 3rem 0 0 0; grid-gap: 0 .4rem;}
    .type_page .btn p{ width: 2.4rem; height: 2.4rem;}
    .type_page .btn p span{ font-size: 1.4rem;}
    .type_page .page{ grid-gap: 0 .4rem;}
    .type_page .page p{ width: 2.4rem; height: 2.4rem; font-size: 1rem;}
}


.type_btn{ display: flex; justify-content: center; align-items: center; margin: 60px 0 0 0;}
.type_btn a{ display: flex; align-items: center; padding: 0 50px; height: 60px; border-radius: 30px; border: 1px solid #333; cursor: pointer; transition: all .3s;}
.type_btn a p{ font-size: 18px; font-weight: 400; color: #333;}
.type_btn a.black{ border-color: #333; background: #333; color: #FFF;}
.type_btn a.black p{ color: #FFF;}
.type_btn a.on{ border-color: #000; background: #000; color: #FFF;}
.type_btn a.on p{ color: #FFF;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .type_btn{ margin: 3rem 0 0 0;}
    .type_btn a{ padding: 0 3rem; height: 3.5rem; border-radius: 30rem;}
    .type_btn a p{ font-size: 1.4rem;}
}



.sub_privacy{ padding: 0 0 100px 0;}
.sub_privacy h3{ display: block; line-height: 1.6; font-size: 30px; font-weight: 700; color: #333;}
.sub_privacy h4{ display: block; margin: 30px 0 0 0; line-height: 1.6; font-size: 20px; font-weight: 500; color: #333;}
.sub_privacy p{ margin: 15px 0 0 0; line-height: 1.6; font-size: 16px; font-weight: 400; color: #333;}
.sub_privacy ul{ display: grid; grid-gap: 5px 0; margin: 15px 0 0 0;}
.sub_privacy ul li{ position: relative; padding: 0 0 0 15px; line-height: 1.6; font-size: 16px; font-weight: 400; color: #333;}
.sub_privacy ul li:before{ content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; background: #333;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .sub_privacy h3{ font-size: 1.8rem;}
    .sub_privacy h4{ margin: 2rem 0 0 0; font-size: 1.5rem;}
    .sub_privacy p{ margin: 1rem 0 0 0; font-size: 1.2rem;}
    .sub_privacy ul{ grid-gap: .4rem 0; margin: 1rem 0 0 0;}
    .sub_privacy ul li{ padding: 0 0 0 1rem; font-size: 1.2rem;}
    .sub_privacy ul li:before{ top: .5rem; width: .3rem; height: .3rem;}
}


.popup_privacy{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 200; top: -100%; right: 0; bottom: 100%; left: 0; padding: 20px;}
.popup_privacy .wrap{ position: relative; z-index: 20; width: 600px; height: 600px; border-radius: 20px; opacity: 0; transform: scale(.5); transition: opacity .5s, transform .5s;}
.popup_privacy .wrap .close_css{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 20px; right: 20px; width: 40px; height: 40px; cursor: pointer; transition: all .3s;}
.popup_privacy .wrap .close_css span{ font-size: 24px; color: #000;}
.popup_privacy .wrap .scroll{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 50px; background: #FFF; transition: all .3s;}
.popup_privacy > .close{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity .5s;}
.popup_privacy .text{}
.popup_privacy .text h3{ display: block; line-height: 1.4; font-size: 30px; font-weight: 700; color: #333;}
.popup_privacy .text h4{ display: block; margin: 30px 0 0 0; line-height: 1.4; font-size: 20px; font-weight: 500; color: #333;}
.popup_privacy .text p{ margin: 15px 0 0 0; line-height: 1.4; font-size: 16px; font-weight: 400; color: #333;}
.popup_privacy .text ul{ display: grid; grid-gap: 5px 0; margin: 15px 0 0 0;}
.popup_privacy .text ul li{ position: relative; padding: 0 0 0 15px; line-height: 1.4; font-size: 16px; font-weight: 400; color: #333;}
.popup_privacy .text ul li:before{ content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: #333;}

.popup_privacy.on{ top: 0; bottom: 0;}
.popup_privacy.on .wrap{ opacity: 1; transform: scale(1);}
.popup_privacy.on > .close{ opacity: 1;}
@media(max-width: 1601px){
}
@media(max-width: 1023px){
}
@media(max-width: 767px){
    .popup_privacy{ padding: 1.5rem;}
    .popup_privacy .wrap{ width: 100%; height: 40rem;}
    .popup_privacy .wrap .close_css{ top: 0; right: 0; width: 2.4rem; height: 2.4rem;}
    .popup_privacy .wrap .close_css span{ font-size: 1.2rem;}
    .popup_privacy .wrap .scroll{ padding: 2rem;}
    .popup_privacy .text h3{ font-size: 1.8rem;}
    .popup_privacy .text h4{ margin: 2rem 0 0 0; font-size: 1.4rem;}
    .popup_privacy .text p{ margin: 1rem 0 0 0; font-size: 1rem;}
    .popup_privacy .text ul{ grid-gap: .4rem 0; margin: 1rem 0 0 0;}
    .popup_privacy .text ul li{ padding: 0 0 0 1rem; font-size: 1rem;}
    .popup_privacy .text ul li:before{ top: .5rem; width: .3rem; height: .3rem;}

    .popup_privacy.on{ top: 0; bottom: 0;}
    .popup_privacy.on .wrap{ opacity: 1; transform: scale(1);}
    .popup_privacy.on > .close{ opacity: 1;}
}



.popup_about_location{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 200; top: 120%; right: 0; bottom: -120%; left: 0; padding: 100px;}
.popup_about_location .contents{ display: flex; grid-gap: 0 50px; position: relative; z-index: 10; padding: 50px; max-width: 1200px; background: #FFF; transform: scale(.6); opacity: 0; transition: all .5s;}
.popup_about_location .contents .close{ display: flex; justify-content: center; align-items: center; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; cursor: pointer;}
.popup_about_location .contents .close span{ font-size: 24px; color: #000;}
.popup_about_location .head{ width: 50%;}
.popup_about_location .head .t1{ font-size: 40px; font-weight: 700; color: #000;}
.popup_about_location .head .t2{ display: flex; flex-direction: column; grid-gap: 15px 0; margin: 60px 0 0 0;}
.popup_about_location .head .t2 .wrap{ display: flex; justify-content: flex-start;}
.popup_about_location .head .t2 .wrap p{ flex: 0 0 100px; line-height: 1.4; font-size: 20px; color: #666;}
.popup_about_location .head .t2 .wrap span{ line-height: 1.4; font-size: 20px; color: #000;}
.popup_about_location .head .t2 .wrap a{ line-height: 1.4; font-size: 20px; color: #000;}
.popup_about_location .head .btn{ display: flex; align-items: center; grid-gap: 0 10px; margin: 40px 0 0 0;}
.popup_about_location .head .btn a{ display: flex; justify-content: center; align-items: center; grid-gap: 0 5px; padding: 0 35px; height: 50px; border-radius: 30px; border: 2px solid #000; cursor: pointer; transition: all .2s;}
.popup_about_location .head .btn a span{ font-size: 20px; color: #000;}
.popup_about_location .head .btn a p{ font-size: 18px; font-weight: 500; color: #000;}
.popup_about_location .head .btn a:hover{ background: #000;}
.popup_about_location .head .btn a:hover span{ color: #FFF;}
.popup_about_location .head .btn a:hover p{ color: #FFF;}
.popup_about_location .my_map{ width: 50%; height: 500px; background: ;}
.popup_about_location .iframe_wrap{ width: 50%; height: 500px;}
.popup_about_location .iframe_wrap iframe{ width: 100%; height: 100%;}
.popup_about_location > .close{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); opacity: 0; transition: all .2s;}
.popup_about_location.on{ top: 0; bottom: 0;}
.popup_about_location.on .contents{ transform: scale(1); opacity: 1;}
.popup_about_location.on > .close{ opacity: 1;}
@media(max-width: 1601px){
    .popup_about_location .contents{ grid-gap: initial;}
    .popup_about_location .head{ width: 450px;}
    .popup_about_location .head .btn a{ padding: 0 20px;}
    .popup_about_location .my_map{ flex: 1; height: 400px;}
    .popup_about_location .iframe_wrap{ flex: 1; height: 400px;}
}
@media(max-width: 1023px){
    .popup_about_location .contents{ display: block; padding: 50px 50px 0 50px;}
    .popup_about_location .head{ width: auto;}
    .popup_about_location .head .t2{ margin: 30px 0 0 0;}
    .popup_about_location .head .btn{ margin: 30px 0 50px 0;}
    .popup_about_location .my_map{ margin: 0 -50px 0 -50px; width: auto; height: 300px;}
    .popup_about_location .iframe_wrap{ margin: 0 -50px 0 -50px; width: auto; height: 300px;}
}
@media(max-width: 767px){
    .popup_about_location{ padding: 1.5rem;}
    .popup_about_location .contents{ padding: 2rem 2rem 0 2rem;}
    .popup_about_location .contents .close{ top: 0; right: 0; width: 2.4rem; height: 2.4rem;}
    .popup_about_location .contents .close span{ font-size: 1.2rem;}
    .popup_about_location .head .t1{ font-size: 1.8rem;}
    .popup_about_location .head .t2{ grid-gap: .6rem 0; margin: 2rem 0 0 0;}
    .popup_about_location .head .t2 .wrap p{ flex: 0 0 5rem; font-size: 1.1rem;}
    .popup_about_location .head .t2 .wrap span{ font-size: 1.1rem;}
    .popup_about_location .head .t2 .wrap a{ font-size: 1.1rem;}
    .popup_about_location .head .btn{ grid-gap: 0 .4rem; margin: 2rem 0 0 0;}
    .popup_about_location .head .btn a{ grid-gap: 0 .6rem; padding: 0; width: 33.333%; height: 2.4rem; border-radius: 30rem; border: .15rem solid #000;}
    .popup_about_location .head .btn a span{ font-size: 1.2rem;}
    .popup_about_location .head .btn a p{ font-size: 1rem;}
    .popup_about_location .my_map{ margin: 2rem -2rem 0 -2rem; height: 16rem;}
    .popup_about_location .iframe_wrap{ margin: 2rem -2rem 0 -2rem; height: 18rem;}
}


.popup_main{ display: none; justify-content: center; align-items: center; position: fixed; z-index: 5000; top: 0; right: 0; left: 0; bottom: 0; padding: 20px; background: rgba(0 0 0/70%); backdrop-filter: blur(20px);}
.popup_main .banner{ width: 500px; box-shadow: 0 10px 50px 0 rgba(0 0 0/30%);}
.popup_main .img{}
.popup_main .fb{ display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #FFF; font-size: 14px; color: #000;}
.popup_main .fb .btn{ display: flex; align-items: center; grid-gap: 0 5px;}
.popup_main .fb .btn span{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #333; font-size: 16px; color: #333; cursor: pointer;}
.popup_main .fb .btn p{ font-size: 16px; font-weight: 600; color: #333; cursor: pointer;}
.popup_main .fb .btn.on span{ border-color: #000; background: #000; color: #FFF;}
.popup_main .fb .close{ display: flex; align-items: center; grid-gap: 0 5px;}
.popup_main .fb .close span{ font-size: 24px; color: #000;}
.popup_main .fb .close p{ font-size: 16px; color: #000;}
.popup_main.on{ display: flex;}
@media(max-width: 767px){
    .popup_main .banner{ width: 100%;}
}




.root_daum_roughmap{ width: auto !important; height: 100%;}
.root_daum_roughmap .wrap_map{ height: calc(100% - 32px) !important;}
@media(max-width: 767px){
}