@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
    --font-SUIT: "SUIT Variable", "SUIT", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	--font-SUITE: "SUITE Variable", "SUITE", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-Pretendard: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	--font-settings: 'tnum', 'ss18';

    --color-red: #C4000F;
    --color-blue: #1F3BD9;
    --color-black: #222;
}
dl, ol, ul, li{margin: 0; padding: 0; list-style: none;}
a{text-decoration: none;}
*{word-break: keep-all;}
a, a:before, a:after, button, button:before, button:after{transition: all .2s ease-in-out;}
img{max-width: 100%;}
.inner{width: 1400px; max-width: 94%; margin: 0 auto;}
.font-figtree {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
/* .font-SUIT{
    font-family: var(--font-SUIT);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: var(--font-settings);
    letter-spacing: 0;
} */
html {
    scroll-behavior: smooth;
  }
html, body{
    font-family: var(--font-Pretendard);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    min-width: 100%; min-height: 100%; margin: 0; padding: 0;
}

#container{float: none; min-height: 100vh; margin: 0; width: 100%; font-size: inherit;}

.scroll_custom::-webkit-scrollbar {width: 7px; height: 7px;}
.scroll_custom::-webkit-scrollbar-track {background-color: #999;}
.scroll_custom::-webkit-scrollbar-thumb {background-color: #555;}
.scroll_custom::-webkit-scrollbar-button {display: none;}
.scroll_custom::-webkit-scrollbar-thumb:hover {background-color: #222;}
.scroll_custom.radius::-webkit-scrollbar-track,
.scroll_custom.radius::-webkit-scrollbar-thumb {border-radius: 5px;}
span.c1{color: var(--color-red);}

.btn_default{
    display: inline-block; border: 2px solid var(--color-red); background-color: #fff; border-radius: 0; 
    color: var(--color-red); text-align: center; font-weight: 700;
    padding:10px 20px; min-width: 180px; max-width: 45%; 
    transition: all .2s ease-in-out;
}
.btn_default:hover{background-color: var(--color-black); border-color: var(--color-black); color: #fff; font-weight: 600;}
.btn_default.bg_red{background-color: var(--color-red); color: #fff; font-weight: 600;}
.btn_default.bg_red:hover{background-color: var(--color-black); border-color: var(--color-black); color: #fff; font-weight: 600;}


header{
    width: 100vw;
    display: flex;
}
header > nav{
    width: 100vw; height: auto; padding:20pt 30pt;
    display: grid;
    grid-template-columns: 150px auto;
    align-items: center;
    position: fixed; z-index: 10;
    transition: all 0.3s;
    /* background:rgba(0, 0, 0, 0.25); */
}
header > nav.navShadow {padding-top: 10pt; padding-bottom: 10pt; background:rgba(0, 0, 0, 0.5);}
header .logo{}
header .logo img{width:120px; height:auto;}
header .menu,
header .menu > ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
header .menu{padding-top: 10px;}
header .menu > ul > li{margin: 0 25px;}
header .menu > ul > li:first-child{margin-left: 0;}
header .menu > ul > li:last-child{margin-right: 0;}
header .menu > ul > li > a{font-weight: 700; font-size: larger; color: #fff; letter-spacing: 1px;}

#menu-toggle{
    width: 24px; height: 24px; margin-left: 50px; cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;    
}
#menu-toggle .bar {
    width: 20px; height: 1.5px;
    background: #fff;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
#menu-toggle .bar:nth-child(2){margin: 5px 0;}
#menu-toggle.closeMenu .bar:first-child {
    transform: translateY(7px) rotate(45deg);
}
#menu-toggle.closeMenu .bar:nth-child(2) {
    transform: scale(0);
}
#menu-toggle.closeMenu .bar:last-child {
    transform: translateY(-7px) rotate(-45deg);
}
header .menu > ul.showMenu{
    position: fixed; width: 100vw;  top: 0 !important; left: 0; z-index: 10;
    background: #000; padding-top: 120px; padding-bottom: 50px;
    flex-direction: column;
    justify-content: flex-start;
}
header .menu > ul.showMenu li{margin:10px 0;}
header .menu > ul.showMenu li > a{font-size: x-large;}
header .menu > ul.showMenu + .closeMenu{
    position: absolute; left: 50%; top: 50px; z-index: 11;
    transform: translateX(-50%);
    width: 32px !important; height: 32px !important;
    margin-left: 0 !important;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
}
header .menu > ul.showMenu + .closeMenu .bar{background:#000 !important; }







/* main */
section{position: relative; overflow-x: hidden;}
section.section_videos{padding:100pt 0;}

.main_visual_typo{position: absolute;  color:#fff; z-index: 2; width: 820px; max-width:95%; letter-spacing: 1px;}
.main_visual_typo h1{display: block; font-family: inherit; font-weight: 900; font-size: 70px; margin-bottom: 2rem;}
.main_visual_typo h1 > span{display: inline-block;}
.main_visual_typo h3{font-family: inherit; font-size: 24px; margin-left: 3px;}

.main_visual_video{position: relative; min-width: 100%; min-height: 100%; overflow:hidden;}
.main_visual_video video{width: 100%; height: 100%; object-fit:cover; position:absolute;}
.main_visual_video.overlay:after{
    content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;
    background-color: rgba(0, 0, 0, 0.3);
}
    /* main visual slide */
    .main-swiper{width: 100%; height: 100vh; }
    .main-swiper .swiper-slide {
        width:100%; height: 100%; 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main-swiper .swiper-control {
        position: absolute; z-index: 20; display: inline-flex; align-items: center;
        width: 90%; 
    }
    .main-swiper .swiper-pagination{
        display: flex;
        justify-content: space-between;
        position: static; text-align: left;
        font-family: var(--font-Pretendard);font-size: 12px; font-weight: 700; letter-spacing: 1px;
        color: #fff;
    }
    .main-swiper .swiper-pagination .total{opacity: 0.3; font-weight: 500;}
    .main-swiper .progress-box {position: relative; width: 170px; z-index: 11;}
        .autoplay-progress {
            position: absolute; left: 25px; top: 7.5px; z-index: 10;
            width: 100px; height: 3px;
            background-color: rgba(255, 255, 255, 1);
        }
        .autoplay-progress svg {
            --progress: 0;
            position: absolute; left: 0; top: 0; z-index: 10; width: 100%; stroke-width: 6px;
            stroke: var(--color-red);
            fill: none;
            stroke-dashoffset: calc(100 * (1 - var(--progress)));
            stroke-dasharray: 100;
        }
    .main-swiper .navigation-box{position: relative; display: inline-flex; margin-left: 10px;}
        .main-swiper .swiper-button-next,
        .main-swiper .swiper-button-prev{
            /* width: 24px; height: 24px;  */
            position: relative; top: 0; left: auto; right: auto; margin-top: 0;
            color: #fff; opacity: 0.5;
        }
        .main-swiper .swiper-button-next:hover,
        .main-swiper .swiper-button-prev:hover{opacity: 1;}
        .main-swiper .swiper-button-next::after,
        .main-swiper .swiper-button-prev::after{font-size: 0;}
        .main-swiper .material-symbols-outlined{font-variation-settings:'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;}

        .ico_pagedown{
            position: absolute; bottom: 20px; left:50%; z-index: 99; text-align: center;
            transform: translateX(-50%);
            animation: bounce 2s ease infinite;
        }
        .ico_pagedown .txt{font-size: 11px; display: block; font-weight: 800; letter-spacing: 1px; opacity: .5; margin-bottom: -5px;}
        .ico_pagedown > span{color: #fff; font-variation-settings: 'wght' 200; font-size: 30px;}
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-10px);}
            60% {transform: translateY(-5px);}
          }

/* 메인슬라이드의 텍스트 위치 */
.main-swiper .swiper-control, .main_visual_typo{left:5vw;}
.main-swiper .swiper-control{bottom: 8vh;}
.main_visual_typo{bottom: 20vh;}

/* 비디오 슬라이드 */
.main_video_slide{padding-bottom: 50pt;}
.main_video_slide .box{}
.main_video_slide .box > a{
    display: block; max-width: calc(100% - 50px); margin: 0 auto;
    position: relative;
}
.main_video_slide .box .thumb img{max-width: 100%; border-radius: 20px;}
.main_video_slide .box .overlay{
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .45); opacity: .75;
    display: flex; 
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
}
.main_video_slide .box .overlay .material-symbols-rounded{
    color: #fff; font-size: 50pt; 
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;

}
.main_video_slide .box .overlay:hover{opacity: 1; background-color: rgba(0, 0, 0, .15);}

.main_video_slide .slick-prev,
.main_video_slide .slick-next{display: none;}
.main_video_slide .slick-dots{top: 100%; bottom: auto;}
.main_video_slide .slick-dots li{height: 3px; margin: 10px 5px 0;}
.main_video_slide .slick-dots li button:before{
    content: ''; width: 20px; height: 3px; background-color: var(--color-black);
}
.main_video_slide .slick-dots li.slick-active button:before{opacity: 1; background-color: var(--color-red);}
    .slick-lightbox .slick-lightbox-inner .slick-lightbox-close{
        top: 30px; right: 40px;
        width: fit-content; height: fit-content;
    }
    .slick-lightbox .slick-lightbox-inner .slick-lightbox-close::before {
        font-size: 30pt;
        font-family: 'Material Symbols Outlined';
        content: '\e5cd';
        font-variation-settings: 'wght' 100;
    }
    .slick-prev, .slick-next{width: fit-content; height: fit-content;}
    .slick-prev:before, .slick-next:before{
        font-family: 'Material Symbols Outlined';
        font-variation-settings: 'wght' 100;
        font-size: 30pt;
    }
    .slick-prev:before{content: '\e5c4';}
    .slick-next:before{content: '\e5c8';}
    
.main_content{
    display: flex;
    align-items: center;
    padding: 80pt 0;
}
.main_content .content{
    position: relative; z-index: 1;
    display: flex;
    flex-direction: column;
}
.main_content .content .section_title{font-size: 40px; font-weight: 900; letter-spacing: 1px; margin-bottom: 80pt;}
.main_content .content .section_title_sub{font-size:1rem;}
.main_content .content h1{font-size: 3rem; font-weight: 900;}
.main_content .content h3{font-size: 1.7rem; line-height: 1.35; font-weight: 700;}
.main_content .content h5{font-size: 1rem; line-height: 1.35;}
.main_content .content h5 span{display:block; margin-bottom: 1rem;}
.main_content .content .btn_area{margin-top: 80pt;}
.main_content .content .btn_area a{margin-right:10px;}
.main_content .content .btn_area a:last-child{margin-right: 0;}
.main_company{
    background-image: url('/images/main_company_bg.png');
    background-size: cover; background-position: 50% 50%;
    min-height: 100vh;
    position: relative;
}
.main_company .overlay{
    position: absolute; width: 900px; max-width: 100%; height: 100%; top: 0; left: 0; z-index: 0;
    background: rgba(255,255,255,0.8);
    background: -moz-linear-gradient(left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0.8)), color-stop(50%, rgba(255,255,255,0.8)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
.main_company .box{width: 900px; max-width: 80%;}
.main_company h1 span{display: block;}
.main_company h5{max-width: 715px; margin: 3rem 0;}


.main_work{
    background-image: url('/images/main_work_bg.png');
    background-size: cover; background-position: 50% 50%;
    min-height: 100vh;
    position: relative;
}
.work-swiper{width: 100%; min-height: 500px;}
.work-swiper .swiper-slide {
    width:100%; height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.work-swiper .swiper-control{position: absolute; bottom:0; padding: 0 30px;}
.work-swiper .navigation-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.work-swiper .swiper-button-prev, 
.work-swiper .swiper-button-next{top: 100%; height: fit-content; width: fit-content; color:#ccc}
.work-swiper .swiper-button-prev:hover, 
.work-swiper .swiper-button-next:hover{color: #555;}
.work-swiper .swiper-button-prev{left: 0;}
.work-swiper .swiper-button-next{right: 0;}
.work-swiper .swiper-button-prev:after, 
.work-swiper .swiper-button-next:after{font-size: 0;}
.work-swiper .swiper-pagination{position: relative; top: 0; bottom: auto}
.work-swiper .swiper-pagination-bullet{
    width: fit-content; height: fit-content; background-color: transparent;
    font-family: var(--font-Pretendard); font-size: 12px; font-weight: 900; letter-spacing: .5px;
    color: rgba(0, 0, 0, .3); opacity: 1; margin: 0 10px !important
}
.work-swiper .swiper-pagination-bullet:hover{color: rgba(0, 0, 0, .75);}
.work-swiper .swiper-pagination-bullet-active,
.work-swiper .swiper-pagination-bullet-active:hover{color: var(--color-red);}
.work-swiper .work-item{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}
.work-swiper .work-item .derc{flex: 1;}
.work-swiper .work-item .derc h3{margin-top:10pt; margin-bottom: 40pt;}
.work-swiper .work-item .thumb{width: 60%; max-width: 710px;}

.main_project {min-height: 100vh;}
.main_project .content .section_title{margin-bottom: 0;}
.main_project h1{margin-top: 80pt;}
.main_project h1 span{display: block;}
.main_project h5{margin-top: 30pt; margin-right: 30pt;}
.main_project .box{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.main_project .derc{width: 450px;}
.main_project .grid-template{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(12, 1fr);
    column-gap: 30px;
    row-gap: 30px;
    width: 100%; max-width: 900px;
    flex: 1;
}
.main_project .grid-template > div{position: relative;}
.main_project .grid-box{
    position: relative; width: 100%; background-color: #f9f9f9; border-radius: 10px;
    border: 2px solid #f9f9f9;
    
}
.main_project .grid-box *{transition: all .2s ease-in-out;}
.main_project .grid-box:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.main_project .grid-box.box1{grid-row: 5/11;}
.main_project .grid-box.box2{grid-row: 1/7; grid-column-start: 2;}
.main_project .grid-box.box3{grid-row: 7/13; grid-column-start: 2;}
.main_project .grid-box.box4{grid-row: 3/9; grid-column-start: 3;}
.main_project .box_con{position: absolute; width: 100%; height: 100%; padding: 30px;}
.main_project .box_con .box_title{font-size: 24px; font-weight: 700; margin-bottom: 10px; line-height: 1.2;}
.main_project .box_con .icon_plus{position:relative;  width: 30px; height: 30px; background-color: #fff; border-radius: 50%;}
.main_project .box_con .icon_plus::after{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 24px; color: #555;
    font-family: 'Material Symbols Outlined';
    content: '\e145';
    font-variation-settings: 'wght' 400;
}
.main_project .box_con .box_thumb{position: absolute; right: 20px; bottom: 20px;}

.main_project .grid-box:hover{border: 2px solid var(--color-red);}
.main_project .grid-box:hover .box_con .icon_plus{background-color: #C4000F;}
.main_project .grid-box:hover .box_con .icon_plus::after{color: #fff;}

.modal-main_project{
    display: flex;
    padding: 0;
    height: 540px;
    
}
.modal-main_project > div{width: 50%;}
.modal-main_project .box_img{}
.modal-main_project .box_img img{width: 100%; height: 100%; object-fit:cover; border-radius: 7px 0 0 7px}
.modal-main_project .box_con{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    background-color: #f9f9f9; border-radius: 0 7px 7px 0;
}
.modal-main_project .box_con .box_derc{flex:1; }
.modal-main_project .box_con .box_derc h3{font-weight: 700; margin: 40pt 0 20pt;}
.modal-main_project .box_con .box_derc h5{font-size: 1rem; line-height: 1.35; margin-right: 2rem;}
.modal-main_project .box_con .box_thumb{text-align: right;}
.modal-main_project .btn-close{
    position: relative; background: #333; border-radius: 50%; width: 30px; height: 30px;
    align-self: flex-end;
    opacity: 1;    
}
.modal-main_project .btn-close:after{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 24px; color: #fff;
    font-family: 'Material Symbols Outlined';
    content: '\e5cd';
    font-variation-settings: 'wght' 200;
}

.section_partnership{background-color: #F9F9F9;}
.main_Partnership .grid-template{
    /* 
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    background: #fff;
    border-radius: 10px; 
	*/
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.main_Partnership .grid-template li{
	/* background: #fff; */
    flex-basis: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}
.main_Partnership .grid-template li img{max-height: 90px;}
.main_Partnership .grid-template li.basis_25{flex-basis: 25%;}

.main_partner_slider.slick-slider{margin: 0; padding-bottom: 50pt;}
.main_partner_slider .slick-list{margin-left:-25px; }
.main_partner_slider .slick-list::after{content:""; width:1px; height:100%; position: absolute; rgba(255, 255, 255, 0);; top: 0; left: 0;}
.main_partner_slider .slick-track{display: flex; align-items: center;}
.main_partner_slider .slick-slide{margin-left: 25px; }
.main_partner_slider .slick-slide a{display: block;}
.main_partner_slider .slick-prev{left: auto;  right: 100%;}
.main_partner_slider .slick-next{right: auto; left: 100%; }
.main_partner_slider .slick-prev,
.main_partner_slider .slick-next{transform: translateY(-25pt); top:0; height: 100%; background-color: rgba(255, 255, 255, 0);}
.main_partner_slider .slick-prev:before,
.main_partner_slider .slick-next:before{color:#000}
.main_partner_slider .slick-dots{bottom: -40px;}
.main_partner_slider .slick-dots li{margin: 0; padding: 0;}
.main_partner_slider .slick-dots li button{position: relative; width: 10px; height: 10px;}
.main_partner_slider .slick-dots li button:before{content: ''; width: 100%; height: 100%; background-color: #222; border-radius: 50%;}
.main_partner_slider .slick-dots .slick-active button:before{background-color: var(--color-red); opacity: 1;}



.main_gallery_slider.slick-slider{margin: 0; padding-bottom: 50pt;}
.main_gallery_slider .slick-list{margin-left:-25px;}
.main_gallery_slider .slick-list::after{content:""; width:1px; height:100%; position: absolute; background-color: #fff; top: 0; left: 0;}
.main_gallery_slider .slick-slide{margin-left: 25px; }
.main_gallery_slider .slick-slide a{display: block;}
.main_gallery_slider .slick-slide .thumb{position: relative; width: 100%; overflow: hidden;}
.main_gallery_slider .slick-slide .thumb:before{content: ""; display: block; padding-top: 120%;}
.main_gallery_slider .slick-slide .thumb img{position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit:cover;}
.main_gallery_slider .slick-track{}
.main_gallery_slider .slick-prev{left: auto;  right: 100%;}
.main_gallery_slider .slick-next{right: auto; left: 100%; }
.main_gallery_slider .slick-prev,
.main_gallery_slider .slick-next{transform: translateY(-25pt); top:0; height: 100%; background-color: #fff;}
.main_gallery_slider .slick-prev:before,
.main_gallery_slider .slick-next:before{color:#000}
.main_gallery_slider .slick-dots{bottom: -40px;}
.main_gallery_slider .slick-dots li{margin: 0; padding: 0;}
.main_gallery_slider .slick-dots li button{position: relative; width: 10px; height: 10px;}
.main_gallery_slider .slick-dots li button:before{content: ''; width: 100%; height: 100%; background-color: #222; border-radius: 50%;}
.main_gallery_slider .slick-dots .slick-active button:before{background-color: var(--color-red); opacity: 1;}



.section_customer{min-height:100vh; background-color: #f5f5f5; display: flex; align-items: stretch;}
.section_customer > div{width: 50%;}
.section_customer .main_contact{}
.section_customer .main_contact .content{width: 700px; max-width: 94%; margin-left: auto; padding-right: 60px;}
.section_customer .main_contact .content .section_title{margin-bottom: 50px;}
.section_customer .main_contact .content .section_title_sub{margin-bottom: 50px;}

.section_customer .main_contact .form-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
}

.section_customer .main_contact .form-wrap > div{position: relative;}
.section_customer .main_contact .form-wrap input,
.section_customer .main_contact .form-wrap textarea{border: 1px solid #ddd; border-radius: 5px; min-height: 45px; text-indent: 7px; width: 100%; }
.section_customer .main_contact .form-wrap input::placeholder,
.section_customer .main_contact .form-wrap textarea::placeholder {
    color: rgba(34, 34, 34, .4);
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.section_customer .main_contact .form-wrap input:required{padding-right:20px;}
.section_customer .main_contact .form-wrap input:required + span:after {
    content: " *"; font-size: 20px; color: var(--color-red);
    position: absolute; top: 0; right: 0; width: 15px; height: 100%;
    
}
.section_customer .main_contact .form-wrap .input_messege,
.section_customer .main_contact .form-wrap .form-captcha{grid-column: 1 / 3;}
.section_customer .main_contact .form-wrap .input_messege textarea{border: 1px solid #ddd; max-width: 100%; height: 300px; border-radius: 5px; background-color: #fff;}
.section_customer .main_contact #captcha{display:flex; align-items: center; flex-wrap: wrap;}
.section_customer .main_contact #captcha #captcha_img{border:1px solid #ddd; border-radius: 5px}
.section_customer .main_contact #captcha #captcha_key{margin: 0 0 0 5px; border: 1px solid #ddd; border-radius: 5px; padding: 0; font-size: 1rem; font-weight: 500; min-height: auto; width: 100px; text-indent: 0;}
.section_customer .main_contact #captcha #captcha_mp3,
.section_customer .main_contact #captcha #captcha_reload{border-radius: 5px; height: 40px; margin-left: 5px; border: 1px solid #ddd;}
.section_customer .main_contact #captcha #captcha_reload{margin-right:10px;}
.section_customer .main_contact #captcha #captcha_info{opacity: .6; font-size: small;}
.section_customer .main_contact #captcha.m_captcha #captcha_img{width: auto; height: 40px; margin: 0;}
.section_customer .main_contact #captcha.m_captcha #captcha_key{background: #fff; height: 40px; width: 100px;}
.section_customer .main_contact .btn_area{margin-top: 30px; text-align: center;}

.section_customer .main_map {background:#f5f5f5; overflow:hidden;}
.section_customer .main_map iframe{width: 100%; height: 100%; overflow:hidden;}

/* hover effect */
.menu_hover_zoom_line a{display: inline-block; }
.menu_hover_zoom_line a:after{
    content: "" !important;
    display: block !important;
    position: relative; z-index: 1; top: auto; bottom: -2px; left: 0;
    width: 0%; height: 2px; background-color: #fff;
    transform: none; transition: all 0.2s ease;
}
.menu_hover_zoom_line a:hover:after{width: 100%;}

.video_frame{
    width: 100vw; height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.video_frame video{width: 1280px; max-width:100%;}


footer{background:#000000;}
footer .inner{display: flex; padding:50pt 0; justify-content: center;}
footer .logo{margin-right: 80pt;}
footer .logo img{width: 150px; margin-top: 3px; opacity: 1;}
footer ul li {
    color: #fff; font-size:14px;
    display: flex;
    align-items: center;
    justify-content: flex-start; letter-spacing: .5px;
}
footer .copyright{font-size: 14px; font-weight: 700; margin-bottom: 10px;} 
footer .ico{opacity: .45; font-size: 1rem; margin-right: 7px;}


@media only screen and (max-width: 1400px) {
    .main_project .box_con{padding:30px 20px;}
    .main_project .box_con .box_title{font-size: 22px;}
    .main_project .box_con .box_thumb{transform: scale(.7);}
    .work-swiper .work-item .thumb{width: 600px;}
    .section_customer .main_contact .content{padding-right: 6%;}
}

@media only screen and (max-width: 1200px) {
    header .menu > ul > li{margin: 0 15px}
    header .menu > ul > li > a{font-size:18px;}
    .work-swiper .work-item{flex-direction: column; align-items: flex-start; height: 620px;}
    .work-swiper .work-item .derc{position: relative; z-index: 1; max-width: 500px;}
    .work-swiper .work-item .thumb{align-self: flex-end; position: absolute; bottom: 0; z-index: 0;}
    .work-swiper .work-item .thumb img{margin-right:-10px;}
    .main_project .box{flex-direction: column;}
    .main_project .derc{width: 100%; margin-bottom: 50pt;}
    .main_project .grid-template{margin: 0 auto;}
	.main_partner_slider.slick-slider,
    .main_gallery_slider.slick-slider{width: 95%; margin: 0 auto;}

    .section_customer{flex-direction: column;}
    .section_customer > div{width: 100%;}
    .section_customer .main_contact .content{width: 100%;}
    .section_customer .main_map iframe{height: 500px;}
    .modal-dialog{width: 800px;  max-width: 90%;}
}

@media only screen and (max-width: 980px) {
    .inner{width: 90%;}
    .main_content{align-items: flex-start;}
    .work-swiper .swiper-wrapper{}
    .work-swiper .work-item{height: auto;}
    .work-swiper .work-item .derc{}
    .work-swiper .work-item .thumb{position: relative; width: 500px; max-width: 100%;}

    header .menu > ul > li{display: none;}
    header .menu > ul.showMenu > li{display: block;}
    #menu-toggle{margin-left: 0;}
    .main_visual_typo{width: 80%;}
    .main_visual_typo h1{font-size: 60px;}
    .main_visual_typo h3{font-size: 20px;}
    .main_content .content h1{font-size: 2.5rem;}    
	.section_customer .main_contact .form-wrap{gap:20px 20px;}
}
@media only screen and (max-width: 768px) {
    .work-swiper .work-item .thumb{width: 460px; margin-bottom: 30pt;}
    .main_company .box{max-width: 90%;}
    .main_project .derc{margin-bottom: 30pt;}
    .main_project .grid-template{grid-template-columns:1fr 1fr;}
    .main_project .grid-box:after{padding-bottom: 80%;}
    .main_project .grid-box.box1{grid-row: 1 / 7;}
    .main_project .grid-box.box2{grid-row: 1 / 7; grid-column-start: 2;}
    .main_project .grid-box.box3{grid-row: 7 / 13; grid-column-start: 1;}
    .main_project .grid-box.box4{grid-row: 7 / 13; grid-column-start: 2;}
    .main_project .box_con{padding: 30px;}
    .main_project .box_con .box_title{font-size: 24px;}
    .main_project .box_con .box_thumb{transform: scale(1);}
    
    .main_Partnership .grid-template li img{height: 70px; width:auto;}

	.main_Partnership .grid-template li{flex-basis: 50%;}
	.main_Partnership .grid-template li.basis_25{flex-basis: 50%;}
}
@media only screen and (max-width: 580px) {
    section.section_videos{padding: 60pt 0;}
    .main_project h1{margin-top: 0;;}
    .main_project .grid-box:after {padding-bottom: 100%;}
    .main_project .box_con{padding: 20px;}
    .main_project .box_con .box_title{ font-size: 20px;}
    .main_project .box_con .box_thumb {transform: scale(.7); bottom: 10px;}
    .main_content .content .section_title{margin-bottom: 50pt;}
    .main_Partnership .grid-template li{padding: 20px;}
    .main_Partnership .grid-template li img{height: auto; width: auto;}
    footer .inner{flex-direction: column; padding: 30pt 0;}
    footer .logo {margin-right: 0pt; margin-bottom: 30pt;}
    footer .logo img{width: 100px;}

    .modal-main_project{flex-direction: column; height: auto;}
    .modal-main_project > div{width: 100%;}
    .modal-main_project .box_img{height: 250px;}
    .modal-main_project .box_img img{border-radius: 7px 7px 0 0;}
    .modal-main_project .btn-close{position: absolute; top: 20px; right: 20px;}
    .modal-main_project .box_con .box_derc h3{margin-top: 0;}
    .modal-main_project .box_con .box_derc h5{width: calc(100% - 60px);}
    .btn_default{min-width: 150px;}
	.section_customer .main_contact .form-wrap > div:nth-child(1),
	.section_customer .main_contact .form-wrap > div:nth-child(2),
	.section_customer .main_contact .form-wrap > div:nth-child(3),
	.section_customer .main_contact .form-wrap > div:nth-child(4){grid-column: 1 / 3}
}
@media only screen and (max-width: 420px) {
    .main_visual_typo h1{font-size: 50px;}
    .main_content .content .section_title{margin-bottom: 30pt;}
    .main_content .content .section_title,
    .main_content .content h1{font-size: 2rem;}
    .main_content .content h3{font-size: 1.25em;}
    .main_content .content h5{font-size: 14px;}
    .main_content .content .btn_area a{margin-bottom: 10px;}
    .main_video_slide .box > a{max-width: 100%;}
    .main_work,
    .main_project{min-height: auto;}
    .work-swiper{min-height: 600px;}
    .work-swiper .work-item .derc h3{margin-bottom: 20pt;}
    .work-swiper .swiper-control{left: 50%; transform: translateX(-50%); width: 100%;}
    .main_project .grid-template{display: flex; flex-direction: row; flex-wrap: wrap;}
    .main_project .grid-box.box1,
    .main_project .grid-box.box2,
    .main_project .grid-box.box3,
    .main_project .grid-box.box4{width: 180px; max-width: 45%;}
    .main_project .box_con .box_title{font-size: 16px;}
    .main_project .box_con .icon_plus{width: 20px; height: 20px;}
    .main_project .box_con .icon_plus::after{font-size: 18px;}
    .main_project .box_con .box_thumb {transform: scale(.55); bottom: 0; right: 0;}
    
    .main_Partnership .grid-template{gap: 20px;}
	.main_partner_slider.slick-slider,
    .main_gallery_slider.slick-slider{width: calc(100% - 60px);}
    .section_customer .main_contact .form-wrap{grid-template-columns:repeat(1, 1fr); gap: 20px 0px;}
    .section_customer .main_contact .form-wrap > div{grid-column: 1 / 2;}
}
@media only screen and (max-width: 360px) {
    .main_project .grid-template{justify-content: center;}
    .main_project .grid-box.box1, 
    .main_project .grid-box.box2,
    .main_project .grid-box.box3,
    .main_project .grid-box.box4{width: 200px; max-width: 100%;}
    
}




/* 회사소개 */

.wrap-content{min-height: 100vh;}
.content-company .hero-overlay{}
.content-company .hero-overlay video{width: 100%; height: 100%; object-fit:cover;}
.content-company .hero-title{text-shadow: none;}
.content-company .hero-title span{display: inline-block;}
.content-company .hero-subtitle{display: inline-block; font-weight: 800; opacity: 0.35; font-size: 24pt; letter-spacing: 1px; line-height: 1.35;}


.content-company .introduction{
    min-height: 100vh; padding:80pt 0; text-align: center; overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-company .introduction.bg1::before{
    content: '';
    position: absolute; top: 0; left: 0;
    background-image: url(/images/LOGO.svg); 
    background-size: contain;
    width: 100%;
    height: 100%;
    transform: rotate(-45deg);
    opacity: 0.025;
}

.content-company .introduction .overlay{
    content: ''; position: absolute; width: 100%; height: 100vh; top: 0; left: 0; z-index: 0;
    background-color: rgba(0, 0, 0, 0.75);
}


.content-company .introduction.bg2::before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.75);
    background-size: cover; background-position: 50% 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}
.content-company .introduction .intro_logo .logo{width: 400px; max-width: 90%;}
.content-company .introduction .intro_logo .txt{font-size:24px; font-size: xx-large;
font-weight: 300; line-height: 1.5; margin: 50pt auto; width: 90%;}
.content-company .introduction .intro_logo .txt span{display: block;}
.content-company .introduction .intro_logo .txt span strong{font-weight: 800;}

.content-company .introduction .vision{position: relative; z-index: 1; color: #fff; padding: 0 10vw;}
.content-company .introduction .vision .kr{font-size: large;}
.content-company .introduction .vision .en{margin-top: 30px; opacity: .5;}
.content-company .introduction .vision span{display: block; margin:15px 0;}

@media only screen and (max-width: 980px) {
    .content-company .hero-title span:first-child{display: block;}
}

@media only screen and (max-width: 768px) {
    .content-company .hero-title{text-align: center; font-size: 60px; line-height: 1;}
    .content-company .hero-title span:first-child{display: block;}
    .content-company .hero-title span:last-child{display: inline;}
    .content-company .hero-subtitle{text-align: center; font-size: 18pt;}
    .content-company .introduction .intro_logo .logo{width: 300px;}
    .content-company .introduction .intro_logo .txt{font-size: x-large;}
}
@media only screen and (max-width: 580px) {
    .content-company .hero-title{font-size: 48px;}
}
@media only screen and (max-width: 420px) {
    body{overflow-x: scroll;}
    .content-company .hero-title{font-size: 48px; line-height: 1.25;}
    .content-company .hero-title span:nth-child(2){display: block;}
    .content-company .hero-subtitle{font-size: 20px;}
    .ico_pagedown{left: auto;}
    .content-company .introduction{min-height: auto;}
    .content-company .introduction .intro_logo .logo{width: 250px; max-width: 70%;}
    .content-company .introduction .intro_logo .txt{font-size: large;}
    .content-company .introduction .intro_logo .txt span{display: inline;}
}


/* news */
.bbs-wrap{margin:80pt auto 100pt;}
.mb_log_cate .join{display:none !important;}