@charset "utf-8";

/* 공통 라인 */
.wrap_line{position: fixed; z-index: -1; left: 0; top:0; height: 100%; width: 100%;}
.wrap_line span{opacity: 0.1; display: block; position: absolute; }
.wrap_line .vertical{width: 85.416%; position: fixed; z-index: 0; left: 50%; top:0; height: 100%; transform: translateX(-50%); -webkit-transform: translateX(calc(-50% + 0.5px));}
.wrap_line .vertical span{width: 1px; height: 100%; border-right: 1px solid #535353; top:0}
.wrap_line .vertical span.ver01{left: 50%;}
.wrap_line .vertical span.ver02{left: 27.4390%;}
.wrap_line .vertical span.ver03{right: 26.4390%;}
.wrap_line .vertical span.ver04{left:0}
.wrap_line .vertical span.ver05{right:0}
.wrap_line .horizon{position: fixed; z-index: 0; left: 0; top:0; height: 100%; width: 100%;}
.wrap_line .horizon span{width: 100%; height: 1px; border-top: 1px solid #535353; left: 0;}
.wrap_line .horizon span.ver01{top: 90px;}
.wrap_line .horizon span.ver02{top:40.3%}
.wrap_line .horizon span.ver03{bottom:24%}

#container #content{z-index: 1; position: relative;}
.area_intro{width: 100%; height: 100vh; position: relative; z-index: 100; transition: 0.3s;}
.area_intro .wrap_line{z-index: 222;}

/* 텍스트 작업 인트로  (주석처리) */
[class*="intro_ver"]{width: 100%; height: 100vh; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;}
[class*="intro_ver"].start{background-color:#0e0e0e; }
[class*="intro_ver"].open{background-color:#fff}
[class*="intro_ver"] .txt_1{font-size:143px; }
[class*="intro_ver"] .txt_2{font-size:200px}
[class*="intro_ver"].start strong{color:#fff}
[class*="intro_ver"].open .clip{width:36px; height: 35px; background-color:#00e7bd; border-radius: 100%;  width: 36px; height: 35px; 
    clip-path: padding-box circle(50px at 0 100px);  position: absolute; z-index: 2; top: 0; }
[class*="intro_ver"].open strong{color:#0e0e0e}
[class*="intro_ver"] strong{display: block; font-weight: 900; line-height: 1; text-align: right;}
[class*="intro_ver"] strong i{width: 36px; height: 35px; background-color:#00e7bd; border-radius: 100%; display:inline-block; }
 
/* 이미지 변경 인트로 */
[class*="box_logo_"]{width: 100%; height: 100vh;  position: fixed; top: 0; left: 0;/*  display: flex; align-items: center; justify-content: center; */}
[class*="box_logo_"] [class*="logo_"]{width: 29.1666%; position: absolute; left: 50%; top: 49.4%; transform: translate(-50%,-50%); }
[class*="box_logo_"] [class*="logo_"] img{width: 100%; position: relative; z-index: 333;}
.box_logo_ver01{background-color: #FFF;   z-index: 2; transition:  3s; opacity: 0; animation: open 3s ease-in alternate; animation-delay: 2s; }
.box_logo_ver01 img{animation: delete 6s ease alternate; animation-delay: 3s;}
.box_logo_ver02{background-color: #0e0e0e; position: fixed; z-index: 1;animation: first 3s ease-in; opacity: 0; }
.area_intro .round{ position: absolute; width: 36px; height: 36px; border-radius: 100%; transition:  2s;  background-color: #00e7bd; right: 0; bottom:0;  animation: bounce 2s ease-in-out alternate}

@keyframes bounce {
    0% {
      bottom:200%; opacity: 0;
      width: 36px; height: 36px;
      }
    25% {
      bottom:0; opacity: 1;
      width: 36px; height: 13px;
      }
    40% {
      bottom:75%;
      width: 36px; height: 36px;
      }
    50% {
        bottom:0%;
        width: 36px; height: 26px;
      }
    75% {
        bottom:32%;
        width: 36px; height: 36px;
    }
    85% {
        bottom:0%;
        width: 36px; height: 31px;
    }
    96% {
        bottom:0%;
        width: 36px; height: 36px;
    }
    100% {
      
      width: 36px; height: 36px;
      }
    }
    @keyframes first {
        0%,30%,90% { opacity: 1;  }
        100% {opacity: 0; display: none; }
        
    }
@keyframes open {
    0% { opacity: 1;  clip-path: circle(1% at 63.7% 60.4%);}
    30%,100% {clip-path: circle(100% at 63.7% 60.4%); opacity: 1; }
    
}

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

[class*="empty_"]{width: 100%; min-height: 100vh; position: relative;} 


/* question_part */
.area_question{position: relative; display: block; min-height: 100vh;}
.area_question .con_txt{padding-left: 13.541666%; position: fixed; top:26%; transition: all .3s;}
.area_question .con_txt.change{opacity: 0;}
.area_question .con_txt h2{font-size:75px; transition: all .3s;}
.area_question .con_txt h2 strong{font-size:150px;display: block; transition: all .3s;}

.con_answer_img {padding-left: 50%; padding-top: 10%; opacity: 1; transition: all .3s; width: 100%; position: relative; right:0; box-sizing: border-box; padding-right: 80px;display: flex; flex-wrap: wrap;}
.con_answer_img ul{width: 50%; box-sizing: border-box; padding-left: 86px; transition: all .3s;}
.con_answer_img ul:nth-child(2){padding-top: 262px;}
.con_answer_img ul li{ padding-bottom: 96px; box-sizing: border-box; transition: all .3s;}
.con_answer_img ul li .bg{position: relative; width: 100%; height: 0; padding-bottom: 120.624%; border-radius: 30px; overflow: hidden;}
.con_answer_img ul li .bg img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover}
.con_answer_img ul li .bg span{position: absolute; color:#fff; font-size:23px; font-weight: 500; bottom:  40px; left: 44px;}

.area_studio{background-color:#0e0e0e; transform: scale(1); padding-top: 210px; border-radius: 60px; padding-bottom: 86px;}
.area_studio .con_txt{padding-left: 39.583333%; transition: all .3s;}
.area_studio .con_txt h3{font-size:140px; transition: all .3s; color:#00e7bd; font-weight: 900; line-height: 1;}
.area_studio .con_txt strong{display: block; transition: all .3s; color:#fff; font-size:100px; font-weight: 900; line-height: 1; margin-top: 8px;}
.area_studio .con_txt strong i{display: inline-block; width: 20px; height: 20px; border-radius: 40px; background-color: #fff;}
.area_studio .con_txt p{font-size:25px; line-height: 39px; color:#fff; margin-top: 79px;}
.area_studio a.link{font-size:20px; color:#fff; font-weight: 800;  width: 187px; height: 106px; position: relative; display: block; margin-left: 13.541666%; margin-top: 49px; transition:all .3s}
.area_studio a.link span{position: absolute; top: 50%; transform: translateY(-50%); text-transform: uppercase; }
.area_studio a.link i{overflow: hidden; height: 16px; width: 16px; position: relative; display: block;/*  width: 106px; height: 106px; */ right: 43px; top: 50px;  transition:all .3s;  background-color:#00e7bd; border-radius: 100%; margin-left: auto; ;}
.area_studio a.link i span{color:#743fde; left: -80px}
.area_studio a.link:hover i{width: 106px; height: 106px; right:0; top: 0;}

/* work */
.area_work{box-sizing: border-box; padding-top: calc((100vh - 65vh) / 2);}
.area_work .text h3{font-size:60px;}
.area_work .text h3 strong{display: block; font-size:110px}
.area_work .wrap_list{display: inline-flex}
.area_work .wrap_list li{width:22.708333vw;/*  height: calc(100vh - 400px);  */ margin-right: 86px; transition: all .3s;}
.area_work .wrap_list li:nth-child(1){margin-left: 80px; width:42.708333vw;  display: flex; align-items: center; padding-left:180px; box-sizing: border-box;margin-right: 56px;}
.area_work .wrap_list li .box_work{width: 100%; position: relative; display: block;/*  background-color: #000; */ height: 70vh; transition: all .3s; border-radius: 75px; overflow: hidden;box-shadow: 40px 43px 44px 0 rgb(132 132 132 / 51%);}
.area_work .wrap_list li .box_work span.img{display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: bottom; position: relative;/* clip-path: circle(23% at 73% 40%); */  transition: all .4s;}
.area_work .wrap_list li .box_work span.img::before{content: ""; width: 100%; height: 0; position: absolute; left: 0; bottom: 0; z-index: 1; opacity: 0;  background: linear-gradient(to top, #000, transparent); transition: all .4s;}
.area_work .wrap_list li:hover span.img{ /* clip-path: circle(100% at 73% 40%); */ /* transform: scale(1.1) */}
.area_work .wrap_list li:hover span.img::before{height:100%; opacity: 0.6;}
/* .area_work .wrap_list li:hover .box_work{ transform: translateY(-20px) } */
.area_work .wrap_list li .txt{position: absolute; z-index: 2; left: 62px; bottom: 62px; height: 44px; overflow: hidden;}
.area_work .wrap_list li:nth-child(7) .txt em{color:#000}
/* .area_work .wrap_list li .txt a{display: flex; align-items: center; justify-content: center; background-color: transparent;  transition:all 0.4s; border-radius: 60px; width: 230px; height: 80px; margin-top: 22px;border: 5px solid #fff;DISPLAY: NONE;box-sizing: border-box;} */
.area_work .wrap_list li .txt a{/* display: none; */ position:relative; transition: all .5s; display: block; transform: translateY(10px); opacity: 0;;}
.area_work .wrap_list li .txt a span{color: #ffffff;font-weight: 700; font-size:27px;  transition: all 0.3s;  }
/* .area_work .wrap_list li .txt a i{display: inline-block; margin-left: 10px; width: 30px; height: 30px;  background: url(/images/main/icon_link.svg) no-repeat; transition: all .3s; } */
.area_work .wrap_list li .txt a i{width: 10px; height: 10px; background-color: #00e7bd; border-radius: 30px; display: inline-block;}
/* .area_work .wrap_list li .txt a:hover span{color:#00e7bd} */
.area_work .wrap_list li .txt em{font-size: 27px; color: #fff; display: BLOCK;FONT-WEIGHT: BOLD; position: relative; transition: all .5s; }
.area_work .wrap_list li:hover em{transform: translateY(-40px); opacity: 0;}
.area_work .wrap_list li:hover a{transform: translateY(-30px); opacity: 1;}
/* .area_work .wrap_list li .txt a:hover  i{background: url(/images/main/icon_link_c.svg) no-repeat;} */

/* final */
.area_final{position: relative; background-color: #0e0e0e; border-radius: 65px 65px 0 0; z-index: 1;}
.area_final a{width: 250px; height: 94px; border-radius: 50px;  transition: all .3s; background-color: #fff; margin: 90px auto 0;  display: flex; align-items: center; justify-content: center; }
.area_final a span{color:#743fde; display: block; font-size:32px; transition: all .3s; font-weight: 900; font-family:'Mulish',sans-serif;}
.con_final_fill{background-color:#743fde; transform: scale(1); position: absolute; top: 0; left: 0; right: 0; bottom:0; border-radius: 60px;}

.con_final_cont{position: relative; padding:240px 0; transition: all .3s; margin-top: 130px;}
.con_final_cont .text{text-align: center;position: relative;}
.con_final_cont .text *{color:#fff}
.con_final_cont .text h3{font-size:59px; font-weight: 600; transition: all .3s; display: inline-block; background-color: #743fde;position: relative;z-index: 1;padding: 0 29px;}
.con_final_cont .text h3 strong{font-size:120px; display: block; }
.con_final_fill .line{width: 100%; height: 2px; position: absolute; left: 0; overflow: hidden; display: block;bottom: 45%  }
.con_final_fill .line::before,.con_final_fill .line::after{position: absolute; top: 0; top:0; left:0; bottom: 0; content: ""; width: 100%; height: 100%; background-color: #fff;}
.con_final_fill .line::before{ opacity: 0.3;}
.con_final_fill .line::after{ animation: line 5s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;}


@keyframes line {
	0% {
		transform: translate3d(-100%, 0, 0)
	}
	60% {
		transform: translate3d(100%, 0, 0)
	}
	100% {
		transform: translate3d(100%, 0, 0)
	}
}


 @media (min-width: 2400px){
    .con_final_cont{padding:350px 0}
 }

 @media all and (max-width:1760px){
    .con_answer_img ul{padding-left: 4em;}
    .con_answer_img ul:nth-child(2){padding-top: 16em;}
    .con_answer_img ul li{padding-bottom: 4em;}

    .area_studio .con_txt h3{font-size:120px}
    .area_studio .con_txt strong{font-size:90px}
}
 @media all and (max-width:1680px){}
 @media all and (max-width:1600px){
    .area_studio .con_txt{padding-left: 37%;}
    .area_studio .con_txt h3{font-size:120px}
    .area_studio .con_txt strong{font-size:90px}
    .area_studio .con_txt strong i{width: 18px; height: 18px;}

    .area_question .con_txt{padding-left: 6em;}
    .con_answer_img{padding-left: 44%;}

   
    .area_work .wrap_list li:nth-child(1){padding-left: 0;}
    .area_work .wrap_list li .txt a{margin-top: 14px;}
    .area_work .wrap_list li .txt em{font-size: 34px;}
 }
 @media all and (max-width:1440px){
    .area_studio .con_txt{padding-left: 33%;}
    .area_studio a.link{margin-left: 8%;}
    .area_question .con_txt h2 strong{font-size:135px}
    .area_question .con_txt h2{font-size:64px}

    .area_work{padding-top: calc((100vh - 55vh) / 2);}
    .area_work .text h3{font-size:54px}
    .area_work .text h3 strong{font-size:104px}
    .area_work .wrap_list li{ margin-right:45px;}

    .area_work .wrap_list li .box_work{height: 55vh;}
    .area_work .wrap_list li{margin-right: 24px;}
 }
 @media all and (max-width:1400px){}

 @media all and (max-width:1366px){
    .area_studio .con_txt h3,.con_final_cont .text h3 strong{font-size:106px}
    .area_studio .con_txt strong {font-size: 73px;}
    .area_studio .con_txt strong i{width: 16px; height: 16px;}
    .area_studio .con_txt p{font-size:23px; line-height: 1.6;}

    .con_final_cont .text h3{font-size: 55px;}

    .con_answer_img ul li{padding-bottom: 2em;}
    .con_answer_img ul{padding-left: 2em;}
    .con_answer_img{padding-right: 3em;}

    .area_question .con_txt h2 strong{font-size:114px}
    .area_question .con_txt h2{font-size:54px; line-height: 1.5;}

    .area_work .text h3 strong{font-size:100px}
    .area_work .text h3{font-size:50px}
}

 @media all and (max-width:1280px){
    .area_studio{padding-top: 160px;}
    .area_studio .con_txt{padding-left: 6em;}
    .area_studio .con_txt p{word-break: keep-all;}
   
    .area_studio a.link{margin-left: 4.5em;}
    .area_work .text h3{font-size:43px}
    .area_work .text h3 strong{font-size:80px}
    .area_work .wrap_list li .txt{left: 3em; bottom: 3em;}
    .area_work .wrap_list li .txt em{font-size:30px}
    .area_work .wrap_list li .txt a{margin-top: 6px; width: 194px; height: 65px;}
    .area_work .wrap_list li .txt a span{font-size: 18px;}

    .con_final_fill .line{bottom:46.5%}
    
    .con_answer_img ul li .bg span{bottom:20px; left: 22px; font-size:18px }
 
}

 @media all and (max-width:1024px){
    .area_studio .con_txt{padding: 0 4em}
    .area_studio .con_txt h3{font-size: 86px;}
    .area_studio .con_txt strong{font-size:60px}
    .area_studio .con_txt strong i{width: 12px; height: 12px;}
    .area_studio a.link{margin-left: 3em;}

    .con_final_cont .text h3 strong{font-size: 100px;}
    .con_final_cont .text h3{font-size:48px}
    .con_final_fill .line {bottom:47.5%}
    .area_work .text h3 strong{font-size: 74px;}
    .area_work .text h3{font-size: 40px;}
    .area_work .wrap_list li{width: 480px;}
    .area_work .wrap_list li .box_work span.img{clip-path:circle(100% at 73% 40%)}
    .area_work .wrap_list li .box_work{height: 380px;}

    .area_work .wrap_list li .txt em{font-size:24px; font-weight: 600;}
    .area_work .wrap_list li .txt a{width: 170px; height: 60px;}
    .area_work .wrap_list li .txt a span{font-size:16px}
 }

 @media all and (max-width:960px){

    .area_question .con_txt h2 strong {font-size:80px}
    .area_question .con_txt h2{font-size:42px}

    .area_studio .con_txt p br{display: none;}
    .con_final_cont .text h3 strong{font-size: 100px;}
    .con_final_cont .text h3{font-size:50px}

    .area_question .con_txt{position: relative; padding-left: 60px;}
    .con_answer_img{padding-left: 0; padding-right: 20px;}
    .con_answer_img ul{padding-left: 20px;}
    .con_answer_img ul li{padding-bottom: 18px;}
 }

 @media all and (max-width:820px){
    
 }
 @media all and (max-width:768px){
    .con_final_fill .line{bottom:49.5%}
    .con_final_cont{padding:140px}
    .con_final_cont .text h3 strong{font-size: 84px;}
    .con_final_cont .text h3{font-size: 38px;}
    .area_final a{width: 220px; height: 80px; margin: 60px auto 0}
    .area_final a span{font-size:28px}

    .area_studio .con_txt h3{font-size: 75px;}
    .area_studio .con_txt strong{font-size:45px}
    .area_studio .con_txt strong i{width: 9px; height: 9px;}
    .area_studio .con_txt p{font-size:20px; margin-top: 60px;}

    .area_work{padding-top: 28vh;}
    .area_work .text h3 strong{font-size:53px}
    .area_work .text h3{font-size:30px}
 }
 @media all and (max-width:640px){
    .area_question .con_txt h2 strong{font-size: 70px;}
    .area_question .con_txt h2{font-size:34px}

    .con_final_cont{padding:100px 4em }
    .area_studio .con_txt{padding: 0 2em}
    .area_studio a.link{margin-left: 2em;}
    .area_studio .con_txt h3{font-size:65px}
    .area_studio .con_txt p{font-size:18px}
    
    .con_answer_img ul li{padding-bottom: 12px;}
    .con_answer_img ul:nth-child(2){padding-top: 100px; padding-left: 14px;}

    .area_work{padding-top: calc((100vh - 380px) / 2 );}
    .area_work .wrap_list li{width: 90vw;}
    .area_work .wrap_list li:nth-child(1){width: 70vw; padding-left: 0; margin-left:20px;}
    .area_work .text h3{font-size:26px}
    .area_work .text h3 strong {font-size:46px}
    .area_work .wrap_list li .txt{left: 40px; bottom: 40px;}
    
 }
 @media all and (max-width:540px){}
 @media all and (max-width:480px){
    .con_final_cont{padding:80px 2em}
    .con_final_cont .text h3 strong{font-size:62px}
    .con_final_cont .text h3{font-size:30px}
    .area_final a{width:170px; height: 65px; margin-top: 60px;}
    .area_final a span{font-size:24px}

    .area_studio{padding:60px 0 60px; border-radius: 40px;}
    .area_studio .con_txt h3{font-size:36px}
    .area_studio .con_txt strong{font-size: 26px;}
    .area_studio .con_txt strong i{width: 7px; height: 7px;}
    .area_studio a.link{height:66px}
    .area_studio a.link i{top: 27px;}
    .area_studio a.link:hover i{top: -20px;}
    
    .con_answer_img ul li .bg span{font-size:16px}
    .con_answer_img ul li .bg{border-radius: 17px;}

    .area_work{padding-top: calc((100vh - 300px) / 2);}
    .area_work .wrap_list li .box_work{height: 300px;}
    .area_work .wrap_list li{margin-right: 10px;}
    .area_work .wrap_list li .txt{left: 30px; bottom: 30px;}
    .area_work .wrap_list li .txt a{width: 150px; height: 50px;}
    .area_work .wrap_list li .txt a span{font-size:14px}
    

 }
 @media all and (max-width:360px){

    .con_final_cont .text h3{font-size: 25px; padding: 0 14px}
    .con_final_cont .text h3 strong{font-size:40px}
    .area_final a{width: 150px; height: 56px; margin-top: 32px;}
    .area_final a span{font-size:20px}
    .con_final_fill .line{bottom:51%}
    .area_studio .con_txt p{padding-right: 40px;}
    .area_studio .con_txt strong i{width: 7px; height: 7px; margin-left: 3px;}

 }
 @media all and (max-width:320px){}
 @media all and (max-width:240px){}