@import url("common.css");

/* css 공통 */
section{position: relative; background:var(--black); z-index: 1;}
.drag{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 120px; height: 120px; font-size:12px; font-weight: 700; color:var(--white); font-family:var(--eng); border-radius:50%; background:rgba(241, 102, 36, 0.90); backdrop-filter: blur(2.5px); position: absolute; top: 50%; right: 50%; margin-left: -120px; margin-top: -60px; z-index: 999999; overflow:hidden; transform: scale(0); transition: transform .3s linear;}
.drag img{width: 43px; height: auto; margin: 0 auto 5px;}

.drag.on{transform: scale(1); opacity: 1;}

.title_area{text-align:center; padding: 0 0 60px;}
.title_area .eng_tit{padding: 0 0 15px;}
.title_area .fs50{color:var(--white);}
.title_area .fs50 .point{display: inline; letter-spacing: inherit; line-height: inherit;}
.title_area .fs18{color:rgba(255,255,255,.7); padding: 30px 0 0;}
.title_area .fs18 b{font-weight: 800;}
.title_area .btn_area{padding: 60px 0 0; display: block;}
.title_area .btn_area .more{vertical-align: top;}


/* visual */
#visual{width: 100%; height: var(--vh); overflow: hidden; position: relative;}
#visual .visual_in{position: relative; width: 100%; height: 100%;}
#visual .visual_in .roll{position: absolute; left:0; top:0; width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_txt{position: absolute; left:50%; bottom: 160px; text-align:left; transform:translateX(-50%); z-index: 9999;}
#visual .visual_in .roll .v_txt .fs70{font-family:var(--eng); color:var(--white); transform:translateY(60px); opacity: 0; transition:all .6s .3s linear;}
#visual .visual_in .roll.action .v_txt .fs70{transform:translateY(0); opacity: 1;}
#visual .visual_in .roll .v_txt .fs20{font-weight: 600; color:var(--white); padding: 20px 0 0; transform:translateY(60px); opacity: 0; transition:all .6s .9s linear;}
#visual .visual_in .roll.action .v_txt .fs20{transform:translateY(0); opacity: 1;}
#visual .visual_in .roll .v_bg{position: absolute; left:0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg::after{content:''; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.40) 100%); position: absolute; left:0; bottom: 0; z-index: 5;}
#visual .visual_in .roll .v_bg .bg{position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; transform:scale(1.1, 1.1); transition: transform 2s ease-in-out;}
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1);}
#visual .visual_in .roll .v_bg .bg.mo{display: none;}
#visual .controler{position: absolute; left: 50%; margin-left: -780px; bottom: 60px; z-index: 9999; display: flex; align-items:center; gap:0 22px;}
#visual .controler .slick-arrow{padding: 0; border:0; background:0; display: block; font-size:0; cursor:pointer; width: 16px; height: 16px; position: relative;}
#visual .controler .slick-arrow::after{content:'\e2ea'; display: block; width: 100%; height: 100%; line-height: 16px; font-size:16px; font-weight: 400; text-align:center; font-family:var(--icon); position: absolute; left:0; top:0; color:rgba(255,255,255,.5); transition:all .3s ease;}
#visual .controler .slick-arrow:hover::after{color:var(--white);}
#visual .controler .slick-arrow.slick-prev{}
#visual .controler .slick-arrow.slick-next::after{transform:rotate(180deg);}
#visual .controler .slick-page{display: flex; align-items:center; gap:0 15px;}
#visual .controler .slick-page li{font-size:14px; font-weight: 700; color:rgba(255,255,255,.5);}
#visual .controler .slick-page li.cur::before,
#visual .controler .slick-page li.tot::before {content: "0";  display: inline-block;  line-height: inherit;  font-weight: inherit;  color:inherit;  font-size:inherit;}
#visual .controler .slick-page li.slash{width: 1px; height: 10px; background:rgba(255,255,255,.2);}
#visual .controler .slick-page li.is-double-digit::before,
#visual .controler .slick-page li.slash::before {display: none;}
#visual .controler .slick-page li.cur{color:var(--white);}
#visual .controler .slick-page li.tot{}
#visual .progress-bar{position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; overflow: hidden; background:rgba(255,255,255,.2); z-index: 9999;}
#visual .progress-bar .bar{position: absolute; left: 0; top:0; height: 100%; display: block; background:var(--main); }
#visual .progress-bar .bar.ani{animation: bar-ani 10s 1; width: 100%; animation-timing-function: linear;}

#visual .scroll_down{position: absolute; bottom: 45px; right: 50%; margin-right: -780px; z-index: 9999; display: flex; align-items:center; gap:0 15px; font-size:12px; font-weight: 700; letter-spacing: 0; color:var(--white); line-height: 120%; font-family:var(--eng);}
#visual .scroll_down span{display: inline-block; width: 28px; height: 48px; box-sizing:border-box; border-radius:28px; border:3px solid rgba(255,255,255,.2); position: relative; overflow: hidden;}
#visual .scroll_down span::after{content:''; display: block; width: 4px; aspect-ratio:1/1; border-radius:50%; background:var(--white); position: absolute; left:50%; top:9px; margin-left: -2px; animation:scroll_down 2s infinite ease;}

@keyframes bar-ani {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes scroll_down {
    0% {
        transform:translateY(-25px);
    }
	
    50% {
        transform:translateY(0);
    }

    100% {
        transform:translateY(50px);
    }
}


/* PORTFOLIO */
#portfolio{}
#portfolio .portfolio_in{display: flex;}
#portfolio .portfolio_in .tit_area{text-align:left; width: 530px; box-sizing:border-box; padding: 0 50px 0 0;}
#portfolio .portfolio_in .tit_area .in{position:sticky; top:150px; transition:all .4s linear;}
#portfolio .portfolio_in .tit_area .eng_tit{padding: 0 0 15px;}
#portfolio .portfolio_in .tit_area .fs50{color:var(--white);}
#portfolio .portfolio_in .tit_area .fs18{padding: 20px 0 0; color:rgba(255,255,255,.7);}
#portfolio .portfolio_in .tit_area .btn_area{padding: 60px 0 0;}
#portfolio .portfolio_in .con_area{width: calc(100% - 530px);}
#portfolio .portfolio_list{display: flex; flex-wrap:wrap; gap:30px; align-items: flex-start;}
#portfolio .portfolio_list li{width: calc((100% - 30px)/2); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); box-sizing:border-box; transition:transform 0.2s ease-out; transform-origin: center center;}
#portfolio .portfolio_list li:nth-child(2){margin-top: 150px;}
#portfolio .portfolio_list li:nth-child(3),
#portfolio .portfolio_list li:nth-child(5){margin-top: -150px;}
#portfolio .portfolio_list li a{display: block;}
#portfolio .portfolio_list li a .thumb{aspect-ratio:3/2; overflow: hidden;}
#portfolio .portfolio_list li a .thumb img{width: 100%; height: 100%; display: block; object-fit:cover; transition:all .3s;}
#portfolio .portfolio_list li a:hover .thumb img{transform:scale(1.15); opacity: 0.8; transition:all .3s ease;}
#portfolio .portfolio_list li a .desc{padding: 22px 30px 20px; box-sizing:border-box;}
#portfolio .portfolio_list li a .desc .fs20{font-weight: 600; color:var(--white); line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#portfolio .portfolio_list li a .desc .fs16{margin: 8px 0 0; color:rgba(255,255,255,.7); line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}

#portfolio .portfolio_roll{display: none;}


/* GADJET NETWORKS */
#networks{position: relative; overflow: hidden;}
#networks::before{content:''; display: block; width: 100%; height: 100%; background:url('/img/networks_bg.jpg') no-repeat center top/100% auto; position: absolute; left:0; top:0;}
#networks .networks_in{position: relative; z-index: 2;}
#networks .networks_list{display: flex; gap:30px;}
#networks .networks_list li{width: calc((100% - 90px)/4); position: relative; text-align:center; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; box-sizing:border-box; }
#networks .networks_list li::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; position: absolute; left:0; top:0;  background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid transparent; border-image: linear-gradient(145deg , rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 100%) 1;}

#networks .networks_list li > *{position: relative; z-index: 2;}
#networks .networks_list li svg{width: 70px; height: auto; margin: 0 auto 30px;}
#networks .networks_list li .fs24{color:var(--white); font-weight: 700;}
#networks .networks_list li .fs16{color:rgba(255,255,255,.7); padding: 10px 0 0;}
#networks .networks_list li .fs16 b{display: inline; font-weight: 700; letter-spacing: inherit; line-height: inherit; color:rgba(241,102,36,.7);}
#networks .networks_list li dl{margin: 60px 0 0; padding: 15px 0 0; border-top: 1px solid rgba(255,255,255,.2); display: flex; justify-content: center; gap:5px; flex-wrap:wrap; text-align:center;}
#networks .networks_list li dl dd{font-size:0.778rem; font-weight: 400; color:rgba(255,255,255,.7); line-height: 150%; letter-spacing: var(--letter-spacing-default);}



.main_title{overflow: hidden; padding: 180px 0 0;}
.main_title h2{font-size:180px; line-height: 100%; color:rgba(255,255,255,.04); letter-spacing: 9px; font-family:var(--eng); white-space: nowrap; margin: 0; }








/* VIDEO PRODUCTION */
#video{overflow: hidden;}
#video .video_swiper{}
#video .video_swiper .swiper-wrapper{}
#video .video_swiper .swiper-slide{}
#video .video_swiper .swiper-slide a{display: block;}
#video .video_swiper .swiper-slide a .thumb{aspect-ratio:3/2; overflow: hidden; transition:all .3s linear;}
#video .video_swiper .swiper-slide a:hover .thumb{border-radius:var(--borderR20); transition:all .3s linear;}
#video .video_swiper .swiper-slide a .thumb img{width: 100%; height: 100%; display: block; object-fit:cover; transition:all .3s;}
#video .video_swiper .swiper-slide a:hover .thumb img{transform:scale(1.15); opacity: 0.5; transition:all .3s ease;}
#video .video_swiper .swiper-slide a .desc{padding: 20px 0 0;}
#video .video_swiper .swiper-slide a .desc .fs20{font-weight: 600; color:var(--white); line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#video .video_swiper .swiper-slide a .desc .fs16{margin: 8px 0 0; color:rgba(255,255,255,.7); line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}


.banner{text-align:center; padding: 150px 0; position: relative;}
.banner .bg-dot{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
.banner .bg-dot i{display: block; font-style:normal; aspect-ratio:1/1; border-radius:50%; position: absolute;}
.banner .bg-dot i.bg01{width: 10px; background:var(--main); animation: blink-1 10s linear infinite both;}
.banner .bg-dot i.bg02{width: 20px; background:#00B3CE; animation: blink-2 10s linear infinite both;}
.banner .bg-dot i.bg03{width: 15px; background:#FFE55F;  animation: blink-2 10s linear infinite both;}
.banner .bg-dot i.bg04{width: 20px; background:#FF82C6; animation: blink-1 10s linear infinite both;}
.banner .bg-dot i.bg05{width: 10px; background:#47C079; animation: blink-1 10s linear infinite both;}

.banner .bg-dot i.bg01{left: 420px; top:0;}
.banner .bg-dot i.bg02{left: 150px; top:230px;}
.banner .bg-dot i.bg03{left: 1340px; top:80px;}
.banner .bg-dot i.bg04{left: 1100px; top:400px;}
.banner .bg-dot i.bg05{left: 1390px; top:330px;}

.banner .fs60{font-size:60px; display: inline; color:var(--white); position: relative;}
.banner .fs60 img{display: inline-block; vertical-align: middle;}
.banner .fs60 .img1{width: 80px; height: auto; margin: 0 10px 0 20px;}
.banner .fs60 .img2{width: 114px; height: auto; margin: 0 0 0 5px;}
.banner .fs60 span{display: inline; letter-spacing: inherit; line-height: inherit; color:var(--main); border-bottom: 6px solid var(--main);}
.banner .arrow{position: absolute; right: -140px; top:-140px; width: 205px; height: 95px;}
.banner .arrow svg{width: 100%; height: auto; stroke-dasharray: 2230px; stroke-dashoffset: 2230px;}
.banner .arrow svg:nth-child(2){position: absolute; right: -3px; top:2px; width: 100%; height: auto;}


.banner .aos-animate + .fs60 .arrow svg:nth-child(1){animation: animate-svg 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both; animation-delay:0.3s;}
.banner .aos-animate + .fs60 .arrow svg:nth-child(2){animation: animate-svg 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both; animation-delay:1s;}


@keyframes animate-svg {
	0% {
		stroke-dasharray: 2230px;
		stroke-dashoffset: 2230px;
	}

	1% {
		stroke-dashoffset: 2230px;
	}

	100% {
		stroke-dashoffset: 0;
		stroke-dasharray: 2230px;
	}
}



@keyframes blink-1 {
    0%,50%,100% {
        opacity: 1;
        -webkit-transform: translateY(-1.5rem) scale(0.8);
        transform: translateY(-1.5rem) scale(0.8)
    }

    25%,75% {
        opacity: .8;
        -webkit-transform: translateY(1.5rem) scale(2.2);
        transform: translateY(1.5rem) scale(2.2)
    }
}


@keyframes blink-2 {
    0%,50%,100% {
        opacity: .8;
        -webkit-transform: translateY(1.5rem) scale(2.2);
        transform: translateY(1.5rem) scale(2.2)
    }

    25%,75% {
        opacity: 1;
        -webkit-transform: translateY(-1.5rem) scale(0.8);
        transform: translateY(-1.5rem) scale(0.8)
    }
}





/* BUSINESS */
#business{position: relative; z-index: 2;}
#business .business_in{display: grid; grid-template-rows: repeat(var(--cards-count), var(--card-height)); gap: 30px 0;}
#business article{position: sticky; top:0;}


#business article .item_in{overflow: hidden; will-change: transform; transform-origin: center top;}
#business article.item1 .item_in{background:#1C1C1C;}
#business article.item2 .item_in{background:#232323;}
#business article.item3 .item_in{background:#2A2A2A;}
#business article.item4 .item_in{background:#323232;}
#business article .tit{padding: 30px 40px; box-sizing:border-box; display: flex; align-items:center; gap:0 15px; font-size:0.889rem; font-weight: 700; color:var(--white); letter-spacing: var(--letter-spacing-default); line-height: 120%;}
#business article .tit span{display: inline-block; font-size:1.111rem; font-weight: 800; color:var(--main); letter-spacing: 0; line-height: 120%;}
#business article dl{padding: 10px 100px 100px; box-sizing:border-box; display: flex;}
#business article dl dt{width: 50%; padding: 0 50px 0 0; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#business article dl dt .fs50{color:var(--white);}
#business article dl dt .fs18{color:rgba(255,255,255,.7); padding: 20px 0 0;}
#business article dl dt .btn_area{padding: 60px 0 0;}
#business article dl dt .more_btn{background:rgba(255,255,255,.1);}
#business article dl dd{width: 50%;}
#business article dl dd img{width: 100%; height: auto;}
#business .space{height: var(--card-height);}



/* CERTIFICATE */
#certificate{overflow: hidden;}
#certificate .certificate_in{display: flex;}
#certificate .certificate_in .tit_area{width: 40%; box-sizing:border-box; padding: 85px 50px 0 0; position: relative; z-index: 9999; background:var(--black);}
#certificate .certificate_in .tit_area::before{content:''; display: block; width: 500%; height: 100%; position: absolute; left: -500%; top:0; background:var(--black); }
#certificate .certificate_in .tit_area .eng_tit{padding: 0 0 20px;}
#certificate .certificate_in .tit_area .fs50{color:var(--white);}
#certificate .certificate_in .tit_area .btn_area{padding: 60px 0 0;}
#certificate .certificate_in .img_area{width: 60%;}
#certificate .certificate_swiper{padding: 0 7% 0 0; box-sizing:border-box;}
#certificate .certificate_swiper .swiper-wrapper{}
#certificate .certificate_swiper .swiper-slide{}
#certificate .certificate_swiper .swiper-slide .thumb{padding: 20px; aspect-ratio:1/1.37; overflow: hidden; position: relative; box-sizing:border-box;}
#certificate .certificate_swiper .swiper-slide .thumb::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; position: absolute; left:0; top:0;  background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; border-image: linear-gradient(145deg , rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 100%) 1;}
#certificate .certificate_swiper .swiper-slide .thumb img{position: relative; z-index: 5; width: 100%; object-fit:contain;}
#certificate .certificate-pagination{padding: 40px 0 0;}
#certificate .certificate-pagination .swiper-pagination-bullet{width: 12px; height: 12px; border:3px solid var(--black); background:rgba(255,255,255,.35); box-sizing:border-box; margin: 0 15px 0 0; opacity: 1;}
#certificate .certificate-pagination .swiper-pagination-bullet:last-child{margin: 0;}
#certificate .certificate-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{border:3px solid var(--white); background:none;}



/* MAKE YOUR CONTENTS */
#make{overflow: hidden;}
#make ul{display: flex;}
#make ul li{width: 366px; margin-right: 30px;}
#make ul li iframe{width: 366px; height: 651px;}




/* 문의 */
#inquiry{}
#inquiry .inquiry_in{display: flex;}
#inquiry .inquiry_in .tit_area{width: 500px; box-sizing:border-box; padding: 0 50px 0 0;}
#inquiry .inquiry_in .tit_area .in{position: sticky; top:150px; transition:all .4s linear;}
#inquiry .inquiry_in .tit_area .fs36{color:var(--white);}
#inquiry .inquiry_in .tit_area dl{padding: 30px 0 0; display: flex; align-items:center; gap:0 30px;}
#inquiry .inquiry_in .tit_area dl dt{font-size:1rem; font-weight: 600; color:var(--white); line-height: 120%; letter-spacing: var(--letter-spacing-default);}
#inquiry .inquiry_in .tit_area dl dt::before{content:'\e0b0'; display: inline-block; vertical-align: middle; margin: -2px 15px 0 0; width: 40px; height: 40px; line-height:40px; font-size:22px; border-radius:50%; background:var(--main); font-family:var(--icon); font-weight: 400; color:var(--white); text-align:center;}
#inquiry .inquiry_in .tit_area dl dd{position: relative;}
#inquiry .inquiry_in .tit_area dl dd::before{content:''; display: block; width: 1px; height: 10px; background:rgba(255,255,255,.2); position: absolute; left:-15px; top:50%; margin-top: -5px;}
#inquiry .inquiry_in .tit_area dl dd a{display: inline-block; font-size:1rem; font-weight: 600; color:var(--white); line-height: 120%; letter-spacing: var(--letter-spacing-default);}
#inquiry .inquiry_in .form_area{width: calc(100% - 500px);}


/*******************************************************************************
    @media 1710px
*******************************************************************************/
@media all and (max-width:1710px){



/* visual */
#visual .controler{left: 5%; margin-left: 0;}

#visual .scroll_down{right: 5%; margin-right: 0; }



/* PORTFOLIO */
#portfolio{}
#portfolio .portfolio_in{}
#portfolio .portfolio_in .tit_area{width: 40%;}
#portfolio .portfolio_in .con_area{width: 60%;}



/* CERTIFICATE */
#certificate .certificate_in .tit_area{padding: 0 50px 0 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#certificate .certificate_in .tit_area .fs50 br{display: none;}

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* 문의 */
#inquiry{}
#inquiry .inquiry_in{}
#inquiry .inquiry_in .tit_area{width: 40%;}
#inquiry .inquiry_in .form_area{width: 60%;}


/* BUSINESS */
#business{}
#business article dl{padding: 10px 40px 40px; }
#business article dl dt{padding: 0 40px 0 0;}

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){



.main_title{padding: 140px 0 0;}
.main_title h2{font-size:140px;}



/* PORTFOLIO */
#portfolio{}
#portfolio .portfolio_in{}
#portfolio .portfolio_in .tit_area{padding: 0 30px 0 0;}
#portfolio .portfolio_in .tit_area .eng_tit{padding: 0 0 10px;}
#portfolio .portfolio_in .tit_area .fs18{padding: 10px 0 0;}
#portfolio .portfolio_in .tit_area .btn_area{padding: 40px 0 0;}
#portfolio .portfolio_in .con_area{}
#portfolio .portfolio_list{gap:20px;}
#portfolio .portfolio_list li{width: calc((100% - 20px)/2);}
#portfolio .portfolio_list li:nth-child(2){margin-top: 100px;}
#portfolio .portfolio_list li:nth-child(3),
#portfolio .portfolio_list li:nth-child(5){margin-top: -100px;}
#portfolio .portfolio_list li a{}
#portfolio .portfolio_list li a .desc{padding: 18px 20px 15px;}
#portfolio .portfolio_list li a .desc .fs16{margin: 6px 0 0;}



/* GADJET NETWORKS */
#networks .networks_list{gap:30px; flex-wrap:wrap;}
#networks .networks_list li{width: calc((100% - 30px)/2); padding: 30px;}
#networks .networks_list li svg{margin: 0 auto 20px;}
#networks .networks_list li dl{margin: 40px 0 0;}




/* CERTIFICATE */
#certificate .certificate_in{flex-wrap:wrap;}
#certificate .certificate_in .tit_area{width: 100%; padding: 0 0 50px; text-align:center; align-items: center;}
#certificate .certificate_in .tit_area .btn_area{padding: 40px 0 0;}
#certificate .certificate_in .img_area{width: 100%;}
#certificate .certificate_swiper{padding: 0;}
#certificate .certificate-pagination{display: flex; justify-content: center;}



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* css 공통 */
.drag{width: 100px; height: 100px; font-size:12px; margin-left: -100px; margin-top: -50px;}
.drag img{width: 30px; height: auto;}


.title_area{padding: 0 0 40px;}
.title_area .eng_tit{padding: 0 0 10px;}
.title_area .fs18{padding: 20px 0 0;}
.title_area .btn_area{padding: 40px 0 0;}


.main_title{padding: 100px 0 0;}
.main_title h2{font-size:100px; letter-spacing: 5px;}



/* visual */
#visual .scroll_down{bottom: 30px;}

/* PORTFOLIO */
#portfolio{overflow: hidden;}
#portfolio .portfolio_in{flex-wrap:wrap;}
#portfolio .portfolio_in .tit_area{width: 100%; padding: 0 0 30px; text-align:center;}
#portfolio .portfolio_in .tit_area .eng_tit{padding: 0 0 6px;}
#portfolio .portfolio_in .tit_area .fs18{padding: 6px 0 0;}
#portfolio .portfolio_in .tit_area .btn_area{padding: 25px 0 0;}
#portfolio .portfolio_in .con_area{width: 100%;}
#portfolio .portfolio_list{display: none;}
#portfolio .portfolio_roll{display: block;}
#portfolio .portfolio_roll li{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); box-sizing:border-box;}
#portfolio .portfolio_roll li a{display: block;}
#portfolio .portfolio_roll li a .thumb{aspect-ratio:3/2; overflow: hidden;}
#portfolio .portfolio_roll li a .thumb img{width: 100%; height: 100%; display: block; object-fit:cover; transition:all .3s;}
#portfolio .portfolio_roll li a:hover .thumb img{transform:scale(1.15); opacity: 0.8; transition:all .3s ease;}
#portfolio .portfolio_roll li a .desc{padding: 18px 20px 15px; box-sizing:border-box;}
#portfolio .portfolio_roll li a .desc .fs20{font-weight: 600; color:var(--white); line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
#portfolio .portfolio_roll li a .desc .fs16{margin: 6px 0 0; color:rgba(255,255,255,.7); line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}






/* GADJET NETWORKS */
#networks .networks_list{gap:20px;}
#networks .networks_list li{width: calc((100% - 20px)/2); padding: 20px;}
#networks .networks_list li svg{width: 50px; height: auto; margin: 0 auto 10px;}
#networks .networks_list li .fs16{padding: 6px 0 0;}
#networks .networks_list li dl{margin: 30px 0 0; padding: 10px 0 0;}




/* VIDEO PRODUCTION */
#video .video_swiper .swiper-slide a .desc{padding: 15px 0 0;}
#video .video_swiper .swiper-slide a .desc .fs20{}
#video .video_swiper .swiper-slide a .desc .fs16{margin: 6px 0 0;}



/* BUSINESS */
#business{}
#business article{}
#business article .tit{padding: 20px 30px; gap:0 10px;}
#business article dl{padding: 10px 30px 30px; }
#business article dl dt{padding: 0 30px 0 0;}
#business article dl dt .fs18{padding: 10px 0 0;}
#business article dl dt .btn_area{padding: 30px 0 0;}



/* CERTIFICATE */
#certificate .certificate_in .tit_area{padding: 0 0 40px;}
#certificate .certificate_in .tit_area .eng_tit{padding: 0 0 10px;}
#certificate .certificate_in .tit_area .btn_area{padding: 30px 0 0;}
#certificate .certificate_swiper .swiper-slide .thumb{padding: 15px;}
#certificate .certificate-pagination{padding: 30px 0 0;}


/* MAKE YOUR CONTENTS */
#make ul li{width: 281px; margin-right: 20px;}
#make ul li iframe{width: 281px; height: 500px;}





/* 문의 */
#inquiry{}
#inquiry .inquiry_in{flex-wrap:wrap;}
#inquiry .inquiry_in .tit_area{width: 100%; padding: 0 0 50px;}
#inquiry .inquiry_in .form_area{width: 100%;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* css 공통 */
.drag{display: none !important;}


.title_area{padding: 0 0 35px;}
.title_area .eng_tit{padding: 0 0 6px;}
.title_area .fs18{padding: 10px 0 0;}
.title_area .btn_area{padding: 30px 0 0;}


.main_title{padding: 80px 0 0;}
.main_title h2{font-size:60px; letter-spacing: 3px;}


/* visual */
#visual .visual_in .roll .v_txt{bottom: 120px;}
#visual .visual_in .roll .v_txt .fs20{padding: 10px 0 0;}
#visual .visual_in .roll .v_bg .bg.mo{display: block; z-index: 2;}
#visual .controler{bottom: 40px; gap:0 15px;}
#visual .controler .slick-page{gap:0 8px;}


#visual .scroll_down span{width: 24px; height: 37px;}



/* PORTFOLIO */
#portfolio .portfolio_roll{padding: 0 5%; box-sizing:border-box;}


/* GADJET NETWORKS */
#networks .networks_list{gap:10px;}
#networks .networks_list li{width: 100%;}
#networks .networks_list li dl{margin: 20px 0 0;}

#networks .networks_list li::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.25)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 2;
    pointer-events: none;
}


/* VIDEO PRODUCTION */
#video .video_swiper{padding: 0 5%; box-sizing:border-box;}


/* BUSINESS */
#business .business_in{display: block;}
#business article{position: relative; padding: 0 !important; transition:all .6s .3s linear; opacity: 0; transform:translateY(60px);}
#business article.action{opacity: 1; transform:translateY(0);}
#business article + article{margin-top: 20px;}
#business article .tit{padding: 30px 20px 20px; gap:0 10px;}
#business article dl{padding: 0 20px 20px; flex-wrap:wrap; }
#business article dl dt{width: 100%; padding: 0 0 30px;}
#business article dl dt .fs18{padding: 10px 0 0;}
#business article dl dt .btn_area{padding: 20px 0 0;}
#business article dl dd{width: 100%;}
#business .space{display: none;}




/* CERTIFICATE */
#certificate .certificate_in .tit_area .eng_tit{padding: 0 0 6px;}
#certificate .certificate_in .tit_area .btn_area{padding: 20px 0 0;}
#certificate .certificate_swiper{padding: 0 5%;}
#certificate .certificate-pagination{padding: 20px 0 0;}
#certificate .certificate-pagination .swiper-pagination-bullet{width: 10px; height: 10px; border-width:2px; margin: 0 10px 0 0;}
#certificate .certificate_swiper .swiper-slide .thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.25),
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.25)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 2;
    pointer-events: none;
}


/* MAKE YOUR CONTENTS */
#make ul li{width: 225px; margin-right: 10px;}
#make ul li iframe{width: 225px; height: 400px;}



/* 문의 */
#inquiry{}
#inquiry .inquiry_in .tit_area{padding: 0 0 30px;}
#inquiry .inquiry_in .tit_area .in{}
#inquiry .inquiry_in .tit_area dl{padding: 30px 0 0; gap:0 20px;}
#inquiry .inquiry_in .tit_area dl dt::before{margin: -2px 10px 0 0; width: 34px; height: 34px; line-height:34px; font-size:18px;}
#inquiry .inquiry_in .tit_area dl dd{}
#inquiry .inquiry_in .tit_area dl dd::before{left:-10px;}




}