/* 공통 */
.contents { min-width: 320px; min-height: 800px; padding-top: 100px; padding-bottom: 240px; }
input[type=text]:focus, input[type=password]:focus { box-shadow: none; border: 0 !important; }
textarea:focus, select:focus { border-color: #000 !important; box-shadow: none !important; }
body::-webkit-scrollbar { display:none }

/* 폰트 */
.fs1 {font-family:'Playfair Display',serif;font-style:italic}


/* input */
.ch_box { display: flex; flex-wrap: wrap; gap: 20px; width:100%; margin-top: 60px; }
.ch_box label {display: inline-block;position: relative;height: 54px; padding: 0 25px; line-height:54px; border: 1px solid #ddd; border-radius:50px; text-align: center;color: #8a8b97; font-weight: 500;font-size: 17px; }
.ch_box input[type="checkbox"] { display: none; }
.ch_box input[type="checkbox"]:checked + label { color:#fff; background: #111;}

@media screen and (max-width:800px) {
    /* input */
    .ch_box { gap: 10px; margin-top: 30px; }
    .ch_box label { height: 40px; padding: 0 16px; line-height: 40px; font-size: 14px; }
}


/**************** contects ****************/
/* contact */
.contact .tit { margin-top: 100px; }
.contact .tit strong { display: block; letter-spacing: -6px; font-size: 200px; font-weight: 600; }
.contact .tit a { position: relative; margin-left: 30px; font-size: 60px; }
.contact .tit a:before {content:""; width:100%; height:2px; background:#000; position:absolute; bottom:0px; left:0; transform: scaleX(0); transform-origin: 0 0; transition:all 0.5s;}
.contact .tit a:hover:before {transform: scaleX(1); transition:all 0.5s;}
.contact .list { display: flex; flex-direction: column; margin-top: 90px; }
.contact .list a { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; border-bottom: 1px solid #ddd; }
.contact .list .tx { display: flex; flex-direction: column; align-items: flex-start; }
.contact .list .tx span { margin-bottom: 15px; padding: 11px 20px; border-radius: 50px; color: #fff; font-size: 15px; font-weight: 500; background: #000; }
.contact .list .tx strong { font-size: 60px; font-weight: 600; }
.contact .list .arrow { padding: 0 40px; }
.contact .list a:hover { border-bottom: 1px solid #222; transition-duration: 0.4s; transition-property: all; }
.contact .list a:hover .arr-before{ transform: translate(100%, -100%); opacity: 0; transition-duration: 0.4s; transition-property: all;}
.contact .list a:hover .arr-after{ transform: translate(0%, -100%); opacity: 1; transition-duration: 0.6s; transition-property: all;}
.arrow {
    .arr{
        display:inline-block;
        width: 30px;
        height: 30px;
        overflow: hidden;
        .arr-in{
            width:100%;
            height: 100%;
            position: relative;

            &::before {
                content:"";
                position: absolute;
                top: 50%;
                left:50%;
                transform: translate(-50%, -50%) rotate(45deg);
                width:2px;
                height: 130%;
                background:#000;
            }
            span {
                position:absolute;
                top:0;
                right:0;
                background-color: #000;
                &.t { width:83.3%; height: 2px; }
                &.r {  height:83.3%; width: 2px;}
            }
        }
    }
    
}
.arrow .arr-before{ transform: translate(0, 0); opacity: 1; }
.arrow .arr-after{ transform: translate(-100%, 0); opacity: 0;}
.arrow:hover .arr-before{ transform: translate(100%, -100%); opacity: 0; transition-duration: 0.4s; transition-property: all;}
.arrow:hover .arr-after{ transform: translate(0%, -100%); opacity: 1; transition-duration: 0.6s; transition-property: all;}


@media screen and (max-width:1400px) {  
    /* contact */
    .contact .tit strong { font-size: 120px; }
}
@media screen and (max-width:800px) {
    /* contact */
    .contact .tit { margin-top: 30px; }
    .contact .tit strong { font-size: 55px; letter-spacing: -2px; }
    .contact .tit a { margin-left: 10px; font-size: 18px; }
    .contact .list { margin-top: 30px; }
    .contact .list a { padding: 25px 0; }
    .contact .list .tx span { padding: 8px 15px; font-size: 14px; }
    .contact .list .tx strong { font-size: 30px; }
}


/* 프로젝트 문의 */
.contact_prj { margin-top: 100px; }
.contact_prj .tit p { display: flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 600; }
.contact_prj .tit strong { display: block; padding-top: 15px; font-size: 70px; font-weight: 700; }
.contact_prj .step { display: flex; flex-direction: column; gap: 150px; margin-top: 120px; }
.contact_prj .step i { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50px; font-weight: 600; font-size: 16px; color: #434549; background: #f4f6f9; }
.contact_prj .step strong { display: block; margin-top: 30px; font-size: 38px; font-weight: 700; }
.contact_prj .step p { display: block; padding-top: 20px; font-size: 15px; color: #777; }
.contact_prj .inp_prj { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 60px; }
.contact_prj .inp_prj > div { flex-basis: calc(50% - 20px); padding: 20px; border-bottom: 1px solid #ddd; }
.contact_prj .inp_prj > div:hover { transition: all ease 0.3s; border-color: #000; }
.contact_prj .inp_prj .date { display: flex; gap: 30px; font-size: 22px; }
.contact_prj .inp_prj input { width: 100%; font-size: 17px; font-weight: 500; }
.contact_prj .inp_prj input::placeholder { font-size: 17px; }
.contact_prj textarea { width: 100%; margin-top: 60px; padding: 20px; border: 1px solid #ddd; font-size: 17px; font-family: 'Pretendard'; }
.contact_prj textarea::placeholder { font-size: 17px; color: #bbb; }
.contact_prj .btn_inq { margin-top: 100px; }
.contact_prj .btn_inq .arrow { scale: 0.7; }

@media screen and (max-width:800px) {
    /* 프로젝트 문의 */
    .contact_prj { margin-top: 30px; }
    .contact_prj .tit p { font-size: 14px; }
    .contact_prj .tit strong { font-size: 35px; }
    .contact_prj .step { gap: 60px; margin-top: 50px; }
    .contact_prj .step i { width: 30px; height: 30px; font-size: 13px; }
    .contact_prj .step strong { margin-top: 15px; font-size: 20px; }
    .contact_prj .step p { padding-top: 10px; font-size: 13px; }
    .contact_prj .inp_prj > div { padding: 12px; }
    .contact_prj .inp_prj { margin-top: 30px; }
    .contact_prj .inp_prj input { font-size: 14px; }
    .contact_prj .inp_prj input::placeholder { font-size: 14px; }
    .contact_prj textarea { margin-top: 30px; padding: 12px; font-size: 14px; }
    .contact_prj textarea::placeholder { font-size: 14px; }
}
@media screen and (max-width:620px) {
    /* 프로젝트 문의 */
    .contact_prj .inp_prj > div { flex-basis:100%; }
}



/* 버튼 */
.btn_inq { display: flex; align-items: center; justify-content: center; gap: 40px; width: max-content; margin: 0 auto; border: 1px solid #000; border-radius: 100px; padding: 20px 50px; font-size: 22px; font-weight: 700; }
.btn_inq:hover { transition: all ease 0.5s; gap: 55px; color: #fff; background: #000; }
.btn_inq:hover .arrow { filter: invert(100%); }
.btn_inq:hover .arrow .arr-before{ transform: translate(100%, -100%); opacity: 0; transition-duration: 0.4s; transition-property: all;}
.btn_inq:hover .arrow .arr-after{ transform: translate(0%, -100%); opacity: 1; transition-duration: 0.6s; transition-property: all;}

@media screen and (max-width:800px) {
    /* 버튼 */
    .btn_inq { padding: 12px 30px; font-size: 18px; }
}


/* 프로젝트 */
.project_box { height: 70vh; }
.project_box .tit { position: relative; padding: 0 40px; font-size: 80px; font-weight: 700; letter-spacing: -4px; z-index: 1; }
.project_box .tit strong { display: block; }
.project_box .tit span { color: #EFEFEF; font-weight: 400; }
.project_box .tit ul { position: absolute; top: 43px; left: 50%; transform: translateX(-50%); display: inline-flex; height: 45px; border-radius: 50px; font-size: 18px; letter-spacing: -1px; background: #eff1f5; }
.project_box .tit ul a { display: block; padding: 0 40px; line-height: 45px; border-radius: 50px; font-weight: 500; color: #777;  }
.project_box .tit ul a.on { color: #fff; background: #000; }
.prj_list { width: 100vw; height: 100vh; height: -webkit-fill-available; position: absolute; left: 0; top: 0; margin-top: 130px; user-select: none; overflow: hidden; } 
.prj_list .center { height: 100vh; position: absolute; left: 50%; top: 28%; transform: translate(-50%); user-select: none; } 
.prj_list .items { transform-origin: center 200vh; transform: rotate(0); user-select: none; display: flex; } 
.prj_list .item { position: absolute; user-select: none; cursor: pointer; transform: translateX(-50%); } 
.prj_list .card { position: relative; display: block; width: 550px; height: 550px; color: #fff; user-select: none; border-radius: 17px; overflow: hidden; cursor: grab; position: relative; filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.10)); } 
.prj_list .card a { display: block; height: 100%; }
.prj_list .card a:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 230px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);}
.prj_list .card em { position: absolute; top: 50px; left: 50px; color: #fff; font-size: 40px; font-weight: 700; z-index: 1; }
.prj_list .card em .fs1 { font-weight: 400; }
.prj_list .card p { position: absolute; top: 30px; right: 30px; color: #fff; font-weight: 400; font-size: 18px; z-index: 1; }
.prj_list .image { height: 100%; width: 100%; object-fit: cover; position: absolute; top: 0; left: 0; pointer-events: none; } 

@media screen and (max-height: 800px){
    /* 프로젝트 */
    .prj_list .card { width: 300px; height: 400px; } 
}
@media screen and (max-width: 800px){
    /* 프로젝트 */
    .prj_list .center { top: 30%; }
    .prj_list .card { width: 300px; height: 400px; } 
}
@media screen and (max-width: 620px){
    /* 프로젝트 */
    .project_box .tit { padding: 0 20px; letter-spacing:-1px; font-size: 40px; }
    .project_box .tit ul { height: 35px; margin-top: 30px; font-size: 15px; }
    .project_box .tit ul a { padding: 0 30px; line-height: 35px; }
    .prj_list .card em { top: 30px; left: 25px; font-size: 28px; }
    .prj_list .card p { top: 10px; right: 15px; font-size: 15px; }
}


/* about */
.contents.about{padding-top:0; padding-bottom:0;}
.contents.about * { font-family: 'Inter', 'Pretendard', dotum, sans-serif; } 
.about-intro{position:relative; width:100%; height:100vh; overflow:hidden;}
.about-intro .txt{position:relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height:100%; z-index:2; text-align:center;}
.about-intro .txt .title{display:flex; margin:0 0 70px; }
.about-intro .txt .title > span{font-size:170px; font-weight;bold; color:#fff; line-height:1em; word-break:keep-all; text-transform:uppercase; font-family: "Poppins", sans-serif; font-weight:600;}
.about-intro .txt .title > span:last-child{margin-left:370px;}
.about-intro .txt > em{display:block; font-size: 30px; font-style:400; font-weight: 500; color:#fff; line-height:1.4em; word-break:keep-all; text-transform:uppercase;}
.about-intro .txt .sm-txt{margin:25px 0 0;}
.about-intro .txt .sm-txt > span{ display:block; font-size: 18px; font-style: normal; font-weight: 300; line-height:1.4em; word-break:keep-all; color:#fff;} 
.about-intro .txt .sm-txt > span > i { display:inline-block; height:14px; margin-left:10px; } 
.about-intro .txt .sm-txt > span > i img { height:100%; animation: rotate 10s infinite; } 
.about-intro .intro-img{position:absolute; top:50%; left:50%; object-fit: cover; width:320px; height:200px; margin-top:-203px; margin-left:-65px;}
.about-intro .intro-img img{width:100%; height:100%; object-fit: cover;}
.about-intro.full .txt .title{margin:0 0 30px;}
.about-intro.full .txt .title > span:last-child{margin-left:0;}
.about-intro.full .intro-img{top:0; left:0; width:100%; height:100%; margin-top:0; margin-left:0;}

/* about-copy */
.about-cont .about-copy{border:none !important; }
.about-copy .infinite-text__list{animation:flow1 250s linear infinite forwards;}
.about-copy .infinite-text__list > li{font-size:130px; font-weight:800; font-family:'Pretendard', sans-serif;}

/* about-story */
.about-story{position:relative; padding:120px 0; text-align:center;}
.about-story .main-tit{display:flex; justify-content: center; margin:0 0 35px;}
.about-story__cont > h3{font-size: 50px; font-style: normal; font-weight: 700; line-height:1.3em; word-break:keep-all; } 
.about-story__cont > span{ display:inline-block; margin:25px 0 0; font-size: 18px; font-weight: 400; line-height:1.8em; word-break:keep-all; } 
.business-list{display:flex; justify-content: center; margin:140px 0 150px;}
.business-wrap{position:relative; width:900px; height:600px;}
.business-num{position:absolute; left:-100px;}
.business-num > i{display:none; font-size:38px; font-weight:500; color:#fff; line-height:1em; word-break:keep-all; font-family: "Cormorant Infant", serif !important; font-style: italic;}
.business-img{position:relative; width:100%; height:100%;}
.business-img > img{display:none; /*position:absolute; top:0; left:0; */ width:100%; height:100%;}
.business-wrap > .business-title{position:relative; text-align:right; right:-12%; bottom:64px;}
.business-title > h3{display:none; /*position:absolute; right:-10%; bottom:-46px;*/ font-size:110px; font-weight:500; font-family: "Yeseva One", serif !important; color:#fff; line-height:1em; word-break:keep-all;}
.business-num > i.on,
.business-img > img.on,
.business-title > h3.on{display:block;}

@keyframes rotate { 
    from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } 
}

/* about-history */
.about-history{margin:0 0 150px;}
.about-history .wrap{position:relative; margin:0 160px; display:flex; align-items: center; gap:80px;}
.history-img{position:relative; display:flex; width:615px;}
.history-img .logo{display:flex; align-items: center; gap: 16px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.history-img .logo .soul{height:50px;}
.history-img .logo .slash{height:53px;}
.history-img .logo i{display:inline-block; width:27px; height:27px;}
.history-img .logo > div img{height:100%;}
.history-img > img{width:100%; height:auto; object-fit: contain;}
.history-cont > h3{margin:40px 0 0; font-size:45px; font-weight:700; color:#fff; line-height:1.2em; word-break:keep-all;}
.history-cont > span{display:block; margin:40px 0 0; font-size:18px; font-weight:400; color:#fff; line-height:1.7em; word-break:keep-all;}
 
.about-info{position:relative; width:100%; height:auto;}
.info-txt{display: flex; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100vh; text-align:center;}
.info-txt .title > h3{display:block; margin:0 0 40px; font-size:120px; font-weight:500; color:#fff; font-family: "Yeseva One", serif !important; line-height:1em; word-break:keep-all;}
.info-txt .text.second{margin:0 0 30px;}
.info-txt .text.second > span{display:block; font-size:25px; font-weight:400; color:#fff; line-height:1.5em; word-break:keep-all;}
.info-txt .text.third > span{display:block; font-size:18px; font-weight:400; color:#fff; line-height:1.6em; word-break:keep-all;}
.about-info .info-bg{width:100%;height:auto;position: absolute;top: 0;left: 0;z-index: -1;}
.about-info .info-bg > div{background-size:cover; width:100%; height:100vh;}

.about-customer{padding:100px 0 0;}
.about-customer__title{margin-left:100px;}
.about-customer__title > h3{display:block; font-size:100px; font-weight:600; color:#fff; line-height:1.2em; word-break:keep-all; text-transform:uppercase;}
.about-customer__title > span{display:block; margin:20px 0 0; font-size:30px; font-weight:400; color:#fff; text-transform:uppercase;}
.about-customer__cont{position:relative; width:1328px; margin:100px auto;}
.about-customer__cont .ac-img.v2{position:relative; top:-200px; right:0; display: flex; justify-content: flex-end;}
.ac-txt{position:relative; top:-200px;}    
.ac-big-txt{margin:0 auto; text-align:center;}
.ac-big-txt img{opacity:0.1; width:90%;}

/** 2024 project **/
.contents.project{padding-bottom:0;}
.project-cont * { font-family: 'Inter', 'Pretendard', dotum, sans-serif; } 
.project-slide{display:flex; gap:70px; padding:100px 0 0 50px; }
.project-slide > li{width:460px; height:526px;}
.project-slide > li > a{display:block;}
.project-slide > li > a .project-img{width:100%; height:auto; overflow:hidden;}
.project-slide > li > a .project-img img{width:100%; transform:scale(1); transition:all 0.5s ease;}
.project-slide > li > a:hover .project-img img{transform:scale(1.15);}
.project-slide > li > a .project-txt{display:block; margin:25px 0 0; font-size:30px; font-weight:600; color:#fff; line-height:1em; word-break:keep-all; text-align:center;}
.project-btn{display:block; margin:80px auto 0; width:190px; height:64px; }
.project-btn > a{position:relative; display:flex; justify-content: center; align-items: center; width:100%; height:100%; border:1px solid rgba(255,255,255,0.8); box-sizing:border-box;}
.project-btn > a:before{content:''; position:absolute; left:0; bottom:0; width:100%; height:0; background:#fff; transition:all 0.3s ease;}
.project-btn > a:hover:before{height:100%;}
.project-btn > a > span{font-size:18px; font-weight:400; color:#fff; z-index:2;}
.project-btn > a:hover > span{color:#222; font-weight:600;} 

/** 2024 project list **/
.sproject-title{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;font-size:150px;font-weight:bold;color:#fff;line-height: 1.2em;word-break:keep-all;display: flex;align-items: center;justify-content: center;text-align: center; z-index:-1;}
.sproject-list{display:flex; flex-wrap: wrap; justify-content: center; gap:400px; margin:0 0 100px;}
.sproject-list > li:nth-child(even){margin:140px 0 0;}
.sproject-list > li > a{display:block; width:100%;}
.sproject-list > li .project-img{display:block; width:100%; overflow:hidden;}
.sproject-list > li .project-img img{width:100%; transform:scale(1); transition:all 0.5s ease;}
.sproject-list > li > a:hover > .project-img > img{transform:scale(1.1);}
.sproject-list > li .project-txt{margin:25px 0 0; display:flex; align-items: center; gap:13px;}
.sproject-list > li .project-txt > h3{font-size:22px; font-weight:500; color:#fff; line-height:1.2em; word-break:keep-all;}
.sproject-list > li .project-txt .btn_link{display:flex; align-items: center; justify-content: center; width:36px; height:36px; border-radius:50px; background:#fff; border:1px solid #fff; box-sizing:border-box;}
.sproject-list > li .project-txt .btn_link i{display:inline-block; width:12px; height:12px; background:url('../img/main/ic-arr-bk.svg')no-repeat center; background-size:contain;}
.sproject-list > li > a:hover > .project-txt .btn_link{background:rgba(255,255,255,0);}
.sproject-list > li > a:hover > .project-txt .btn_link i{background:url('../img/main/ic-arr.svg')no-repeat center; background-size:contain;}