/**
 * 메인페이지
 **/

/* 최상단 슬라이더 */
section.main .top-slider .slick-arrow {position: absolute;z-index: 10;font-size: 0;top:50%;width:84px;height: 84px;
    background: url('../images/slider_arrow_pc@2x.png') no-repeat center / 100%;}
section.main .top-slider .slick-arrow.slick-prev {left:0;}
section.main .top-slider .slick-arrow.slick-next {right:0;transform: rotate(180deg);}
section.main .top-slider .slide {position: relative;}
section.main .top-slider .slide::before {content:"";position: absolute;left:0;top:0;width:100%;height: 100%;
    background: rgba(0,0,0,0.25);z-index: 1;}

@media (min-width: 735px) {
    section.main .top-slider .slide img {max-height: 100vh;min-width: 100%;width: -webkit-fill-available;}
}

@media (max-width: 734px) {
    section.main .top-slider .slick-arrow {width:26px;height:26px;background-image: url('../images/slider_arrow_mo@2x.png')}
    section.main .top-slider .slide img {width: 100%;}
}

/* 인트로 텍스트 영역 */
section.main article.intro {padding:60px 0 113px}
section.main article.intro .wrap-title {text-align: center;}
section.main article.intro .wrap-title strong {font-weight: 600;}
section.main article.intro .wrap-title .icon {margin-bottom: 51px;display: inline-block;}
section.main article.intro .wrap-title h2 {font-size: 46px;color:#cc00ff;font-weight: 400;}
section.main article.intro .wrap-desc {margin-top: 134px;}
section.main article.intro .wrap-desc strong {font-weight: 500;}
section.main article.intro .wrap-desc .item {border-bottom: 1px solid #9e9e9e;}
section.main article.intro .wrap-desc .title {font-size: 28px;}
section.main article.intro .wrap-desc .desc {max-width: 493px;font-size: 18px;line-height: 25px;}

@media (min-width: 735px) {
    section.main article.intro .wrap-desc {display: flex;flex-direction: column;gap:71px}
    section.main article.intro .wrap-desc .title {padding-left: 39px;position: relative;letter-spacing: -1px;}
    section.main article.intro .wrap-desc .title::before {content: "*";position: absolute;left:0;top:-13px;font-size: 48px;color:#cc00ff;font-weight: 900;}
    section.main article.intro .wrap-desc .item {min-height:137px;display: flex;justify-content: space-between;align-items: flex-start;}
}

@media (max-width: 734px) {
    section.main article.intro {padding:18px 0 26px}
    section.main article.intro .content-inner {padding: 0;}
    section.main article.intro .wrap-title .icon {margin-bottom: 9px;}
    section.main article.intro .wrap-title h2 {font-size: 15px;}

    section.main article.intro .wrap-slider-dots {margin-top: 30px;}
    section.main article.intro .wrap-desc {text-align: center;max-width: 400px;margin:5px auto 0;overflow: hidden;}
    section.main article.intro .wrap-desc .item {border-color: #ccc;max-width: 400px;margin:0 50px;min-height:110px;width:calc(100vw - 60px)}
    section.main article.intro .wrap-desc .title {font-size: 13px;}
    section.main article.intro .wrap-desc .desc {margin: 14px auto 26px;font-size: 11px;line-height: 18px;max-width: 315px;}

    section.main article.intro .slick-dots {display: flex;justify-content: center;align-items: center;gap:5px;} 
    section.main article.intro .slick-dots li {font-size: 24px;font-weight: 900;color:#8c8c8c;cursor: pointer;}
    section.main article.intro .slick-dots li.slick-active {color:#181818}
}

/* 히어로 이미지 영역 */
section.main article.hero {background: url('../images/main_hero_bg_pc.png') no-repeat center 80% / cover;display: flex;justify-content: center;align-items: center;}
section.main article.hero .text {font-size: 7.81vw;color:#fff;font-weight: 700;font-family: 'DIN Pro';}

@media (min-width: 735px) {
    section.main article.hero {height:56.25vw;max-height: 100vh;}
    section.main article.hero .text {letter-spacing: -0.2vw;}
    section.main article.hero .logo img {width: 53.69vw;max-width: 1031px;}
}

@media (max-width: 734px) {
    section.main article.hero {background-image: url('../images/main_hero_bg_mo@2x.png');padding:27px 10px 20px;}
    section.main article.hero .text {display: flex;justify-content: flex-start;align-items: center;gap:7px;font-weight: 300;font-size: 16px;margin-left: -25px;margin-bottom: 3px;}
    section.main article.hero .text > span:last-child {display: flex;justify-content: flex-start;align-items: center;margin-left:5px;gap:12px;}
    section.main article.hero .text > span:last-child::before {content:"";width:6px;height:6px;background-color: #fff;border-radius: 100%;overflow: hidden;display: block;}
}

/* ABOUT US 상단 영역 */
section.main article.about-top {padding:64px 0 53px;}
section.main article.about-top .main-title {font-family: 'DIN Pro'; font-size: 48px;font-weight: 500;display: flex;justify-content: space-between;gap:70px;align-items: center;}
section.main article.about-top .main-title::before,
section.main article.about-top .main-title::after {content: "";flex:1;background: #9e9e9e;height:1px;width:100%;display: block;}
section.main article.about-top .wrap-brand {margin-top: 51px;display: flex;justify-content: center;align-items: center;gap:22px;}
section.main article.about-top .wrap-desc {margin-top: 70px;display: flex;align-items: flex-start;gap:34px;}
section.main article.about-top .wrap-desc .icon {display: inline-block;}
section.main article.about-top .wrap-desc .tit {margin-top:20px; font-size: 24px;font-family: 'DIN Pro';font-weight: 300;color:#000}
section.main article.about-top .wrap-desc .desc {font-size: 16px;color:#8C8C8C;font-weight: 200;margin-top: 9px;}

@media (min-width: 735px) {
    section.main article.about-top {background: #efefef;}
    section.main article.about-top .wrap-desc .item:nth-child(2) {text-align: center;}
    section.main article.about-top .wrap-desc .item:last-child {text-align: right;}    
    section.main article.about-top .wrap-desc {justify-content: space-between;}
    section.main article.about-top .wrap-desc .desc {line-height: 24px;}
}

@media (max-width: 734px) {
    section.main article.about-top {padding: 24px 0 49px;}
    section.main article.about-top .main-title {font-size: 20px;gap:15px;}
    section.main article.about-top .main-title::before,
    section.main article.about-top .main-title::after {background-color: #ccc;}
    section.main article.about-top .wrap-brand {margin-top: 23px;gap:10px;}
    section.main article.about-top .wrap-desc {margin-top: 49px;gap:34px;flex-direction: column;}
    section.main article.about-top .wrap-desc .tit {margin-top: 10px;font-size: 16px;}
    section.main article.about-top .wrap-desc .desc {margin-top: 6px;font-size: 12px;}
}

/* ABOUT US 하단 영역 */
section.main article.about-bottom {padding:109px 0 107px;background: url('../images/main_about_bg_pc.png') no-repeat center / cover;}
section.main article.about-bottom * {color:rgba(255,255,255,0.9);}
section.main article.about-bottom .content-inner {max-width: 1070px;}
section.main article.about-bottom .wrap-item {margin-top: 60px;}
section.main article.about-bottom .wrap-item:first-child {margin-top:0;}
section.main article.about-bottom .box-title .tit {font-family: 'DIN Pro';font-size: 20px;font-weight: 300;}
section.main article.about-bottom .box-desc {font-size: 15px;line-height: 21px;}
section.main article.about-bottom .box-desc strong {font-weight: 500;}

@media (min-width: 735px) {
    section.main article.about-bottom .wrap-item {display: flex;gap:70px;justify-content: space-between;align-items: center;}
    section.main article.about-bottom .wrap-item .line {flex:1;background: rgba(255,255,255,0.3);height:1px;position: relative;}
    section.main article.about-bottom .wrap-item .line::after {content: '';position: absolute;right:0;top:-1px;width:3px;height:3px;background-color: #fff;border-radius: 100%;}

    section.main article.about-bottom .wrap-item:nth-child(1) .line {max-width: 393px;}
    section.main article.about-bottom .wrap-item:nth-child(2) {margin-left: 40px;}
    section.main article.about-bottom .wrap-item:nth-child(3) {margin-left: 80px;width:88%;}
    section.main article.about-bottom .wrap-item:nth-child(4) {margin-left: 50px;}
    section.main article.about-bottom .wrap-item:nth-child(4) .box-title {gap:55px}

    section.main article.about-bottom .box-title {display: flex;align-items: center;justify-content: flex-start;gap:35px;}
    section.main article.about-bottom .box-title .num {margin-top: -10px;}
}

@media (max-width: 734px) {
    section.main article.about-bottom {padding:65px 0 41px;background-position: 43% center;}
    section.main article.about-bottom .wrap-item {margin-top: 50px;position: relative;}

    section.main article.about-bottom .wrap-item:nth-child(1) {padding-left: 67px;}
    section.main article.about-bottom .wrap-item:nth-child(2) {padding-right: 68px;}
    section.main article.about-bottom .wrap-item:nth-child(3) {padding-left: 47px;}
    section.main article.about-bottom .wrap-item:nth-child(4) {padding-right: 60px;}
    
    section.main article.about-bottom .wrap-item:nth-child(even) {text-align: right;}

    section.main article.about-bottom .box-title .num {position: absolute;}

    section.main article.about-bottom .wrap-item:nth-child(odd) .box-title .num {left:0;}
    section.main article.about-bottom .wrap-item:nth-child(even) .box-title .num {right:0;}

    section.main article.about-bottom .wrap-item:nth-child(1) .box-title .num {top:-20px;}
    section.main article.about-bottom .wrap-item:nth-child(2) .box-title .num {top:-18px;}
    section.main article.about-bottom .wrap-item:nth-child(3) .box-title .num {top:-13px;}
    section.main article.about-bottom .wrap-item:nth-child(4) .box-title .num {top:-13px;}

    section.main article.about-bottom .box-title .tit {font-size: 15px;}
    section.main article.about-bottom .box-desc {font-size: 11px;line-height: 16px;margin-top: 16px;}
}

/* SERVICES 영역 */
section.main article.service {padding:70px 0 160px;}
section.main article.service .wrap-title {font-family: 'DIN Pro Cond'; font-weight: 700; color:#cc00ff;letter-spacing: 50px;text-indent:50px;font-size: 96px;text-align: center;}
section.main article.service .wrap-item {display: flex;flex-direction: column;gap:45px;margin-top: 125px;}
section.main article.service .wrap-item .tit {font-family: 'DIN Pro Cond'; color:#cc00ff; font-size: 28px;}
section.main article.service .wrap-item .desc {font-size: 16px;font-weight: 300;line-height: 23px;margin-top: 16px;}

@media (min-width: 735px) {
    section.main article.service .wrap-item .item:nth-child(even) {text-align: right;}
}

@media (max-width: 734px) {
    section.main article.service {padding:23px 0 57px;}
    section.main article.service .content-inner {padding: 0 32px;}
    section.main article.service .wrap-title {font-size: 36px;letter-spacing: 18px;text-indent: 18px;}
    section.main article.service .wrap-item {margin-top: 47px;gap:35px}
    section.main article.service .wrap-item .tit {font-size: 20px;}
    section.main article.service .wrap-item .desc {font-size: 11px;line-height: 17px;margin-top: 10px;word-break: break-all;}
}


/**
 * 포트폴리오 페이지
 **/

section.portfolio {background-color:#181818;padding:130px 0 78px}
section.portfolio * {color:#fff;}
section.portfolio .content-inner {max-width: 1220px;}

/* 포트폴리오 리스트 */
section.portfolio .list-title {font-family: 'DIN Pro Cond';font-size: 64px;font-weight: 700;color:#cc00ff;
    text-align: center;margin-bottom: 50px;letter-spacing: 6.51vw;text-indent: 6.51vw;}
section.portfolio .list-item {display: flex;flex-wrap: wrap;gap:10px;}
section.portfolio .list-item .item {height:454px;width:calc(50% - 5px);background: transparent no-repeat center / cover;overflow: hidden;position: relative;}
section.portfolio .list-item .item a {display: block;width: 100%;height: 100%;}
section.portfolio .list-item .box-hover {position: absolute;left:0;background: rgb(24 24 24 / 60%);display: flex;
    flex-direction: column;gap:40px;justify-content: center;}
section.portfolio .list-item .box-hover .desc {font-family: 'DIN Pro Cond';font-size: 14px;font-weight: 300;letter-spacing: 0;}

@media (min-width: 735px) {
    section.portfolio .list-item .item:hover .box-hover {opacity: 1;}
    section.portfolio .list-item .box-hover {width: 100%;height: 100%;top:0;opacity: 0;transition: opacity 0.5s;align-items: center;}
    section.portfolio .list-item .box-hover .logo {margin-top: 10%;}
}

@media (max-width: 734px) {
    section.portfolio {padding: 63px 0 105px;}
    section.portfolio .list-title {font-size: 24px;letter-spacing: 25px;text-indent: 25px;margin-bottom: 19px;}
    section.portfolio .list-item {gap:17px;}
    section.portfolio .list-item .item {width:100%;height:240px;}
    section.portfolio .list-item .box-hover {bottom:23px;width:calc(100% - 32px);box-sizing: border-box;padding:15px 14px;gap:6px;}
    section.portfolio .list-item .box-hover .logo img {height: 19px;}
    section.portfolio .list-item .box-hover .desc {font-size: 10px;letter-spacing: 3px;text-indent:3px;}
}

/* 포트폴리오 상세 */
section.portfolio.view {padding:143px 0 270px}
section.portfolio .view-title {text-align: center;}
section.portfolio .view-title .title {font-family: 'DIN Pro Cond'; font-weight: 500; font-size: 32px;}
section.portfolio .view-title .brand {margin-top: 40px;}
section.portfolio .view-title .brand .text {font-size: 20px;font-family: 'Din Pro';font-style: italic;margin-bottom: 18px;font-weight: 300;}
section.portfolio .view-item {margin-top: 58px;}
section.portfolio .view-item img {display: block;}

@media (max-width: 734px) {
    section.portfolio.view {padding:70px 0 144px}
    section.portfolio .view-title .title {font-size: 14px;letter-spacing: 0;}
    section.portfolio .view-title .brand {margin-top: 13px;}
    section.portfolio .view-title .brand .text {font-size: 13px;margin-bottom: 13px;}
    section.portfolio .view-title .brand .img img {height: 20px;}
    section.portfolio .view-item {margin-top: 31px;}
}


/**
 * CONTACT 페이지
 **/

/*  */
section.contact {padding-top: 85px;}
section.contact .content-inner {max-width: 1220px;}
section.contact .wrap-title {font-size: 36px;font-family: 'DIN Pro Cond';font-weight: 700;color:#cc00ff}

@media (max-width: 734px) {
    section.contact {padding-top: 44px;}
    section.contact .wrap-title {font-size: 20px;text-align: center;letter-spacing: 0;}
}

/* 정보 영역 */
section.contact article.info {padding:53px 40px 51px;border-bottom: 1px solid #E7E7E7;max-width: 1220px;margin:0 auto;}
section.contact article.info .wrap-cont {margin-top: 55px;}
section.contact article.info .box-desc .icon {margin-bottom: 22px;}
section.contact article.info .box-desc .title {font-size: 32px;font-family: 'DIN Pro Cond';}
section.contact article.info .box-desc .desc {font-size: 16px;font-weight: 200;color:#8C8C8C;margin-top: 20px;line-height: 21px;}

section.contact article.info .box-info {display: flex;flex-direction: column;gap:40px;}
section.contact article.info .box-info .title {font-family: 'DIN Pro Cond';font-size: 28px;color:#CC00FF;opacity: 0.4;}
section.contact article.info .box-info .desc {font-size: 18px;margin-top: 13px;}

@media (min-width: 735px) {
    section.contact article.info .wrap-cont {display: flex;justify-content: space-between;align-items: flex-end;}
    section.contact article.info .box-info .title {font-weight: 300;}
}

@media (max-width: 734px) {
    section.contact article.info {padding: 20px 20px 35px;border-bottom: 3px solid #F7F7F7;}
    section.contact article.info .wrap-cont {margin-top: 23px; text-align: center;}
    section.contact article.info .box-desc .icon {margin-bottom: 6px;display: inline-block;}
    section.contact article.info .box-desc .icon img {width: 30px;}
    section.contact article.info .box-desc .title {font-size: 24px;}
    section.contact article.info .box-desc .desc {font-size: 10px;line-height: 15px;margin-top: 14px;}

    section.contact article.info .box-info {margin-top: 20px;gap:20px;}
    section.contact article.info .box-info .title {font-size: 16px;opacity: 1;letter-spacing: 0;}
    section.contact article.info .box-info .desc {font-size:12px;font-weight: 500;margin-top: 6px;}

}

/* 메세지 입력 폼 영역 */
section.contact article.form {padding: 55px 0 94px;}
section.contact article.form .wrap-title::after {content: "";width:23px;height: 23px;vertical-align: middle;display: inline-block;
    background: url('../images/icon_message_purple.png') no-repeat center / 100%;margin-left:16px;margin-top: -5px;}
section.contact article.form .wrap-form {margin-top: 43px;display: flex;flex-direction: column;gap: 46px;align-items: flex-start;}

section.contact article.form .form-item {width: 100%;}
section.contact article.form .form-item.group {display: flex;}
section.contact article.form .form-item .field {width:100%;}

section.contact article.form label {display: block;}
section.contact article.form .field {display: flex;align-items: baseline;justify-content: flex-start;
    border-bottom: 1px solid #8C8C8C;padding:16px 0;gap:10px;}
section.contact article.form .field .label-text {font-size: 20px;line-height: 25px;}
section.contact article.form .field input,
section.contact article.form .field textarea {font-size: 20px;line-height: 25px;font-weight: 300;flex:1;width: 100%;}
section.contact article.form .field textarea {height: 100px;}
section.contact article.form .field input::placeholder,
section.contact article.form .field textarea::placeholder {color:#d8d8d8}

section.contact article.form button {display: inline-block;font-size: 20px;font-weight: 600;position: relative;padding-bottom: 18px;line-height: 30px;transition: color 0.3s;}
section.contact article.form button::after {content: '';position: absolute;left:0;bottom:0;width: 100%;height: 11px;background-color: #181818;transition: background 0.3s;}

@media (min-width: 735px) {
    section.contact article.form .form-item.group {gap:90px;justify-content: space-between;align-items: flex-end;}
    section.contact article.form .form-item.group .field {width: calc(50% - 45px);}
    section.contact article.form button:hover {color:#8C8C8C}
    section.contact article.form button:hover::after {background-color:#8C8C8C}
    section.contact article.form .field .label-text {min-width: 146px;}
}

@media (max-width: 734px) {
    section.contact article.form {padding: 23px 0 65px;}
    section.contact article.form .wrap-title::after {width: 18px;height: 18px;margin-left:7px}
    section.contact article.form .wrap-form {margin-top: 40px;gap:12px;align-items: center;}

    section.contact article.form .form-item.group {flex-direction: column;gap:12px}

    section.contact article.form .field {gap: 17px;padding:6px 0;}
    section.contact article.form .field .label-text {font-size: 13px;}
    section.contact article.form .field input, 
    section.contact article.form .field textarea {font-size: 13px;}

    section.contact article.form button {margin-top: 12px;font-size: 16px;padding-bottom: 10px;line-height: 20px;}
    section.contact article.form button::after {height: 8px;}

    section.contact article.form button:active {color:#8C8C8C}
    section.contact article.form button:active::after {background-color:#8C8C8C}
}

/* ASK 영역 */
section.contact article.ask {background-color: #efefef;padding:38px 3.125vw 206px;}
section.contact article.ask .wrap-line {display: flex;gap:1.6vw;align-items: center;}
section.contact article.ask .wrap-line::before,
section.contact article.ask .wrap-line::after {content: '';display: block;height:2px;background-color: #CC00FF;}
section.contact article.ask .wrap-line::before {width:9.3vw}
section.contact article.ask .wrap-line::after {flex:1;}

section.contact article.ask .wrap-item {margin-top: 76px;display: flex;flex-wrap: wrap;gap:21px;justify-content: center;}
section.contact article.ask .wrap-item .item {width:491px;background-color: #fff;box-sizing: border-box;padding:45px 36px;border:1px solid #c9c9c9;}
section.contact article.ask .wrap-item .title {font-size: 16px;font-weight: 600;color: #CC00FF;padding-left: 18px;position: relative;}
section.contact article.ask .wrap-item .title::before {content: '';width:10px;height: 10px;background-color: #e373ff;
    border-radius: 100%;position: absolute;left:0;top:0;}
section.contact article.ask .wrap-item .desc {font-size: 15px;color:#000;line-height: 25px;margin-top: 18px;}

@media (max-width: 734px) {
    section.contact article.ask {padding:14px 20px 71px;}
    section.contact article.ask .wrap-line {gap:4px}
    section.contact article.ask .wrap-line::before,
    section.contact article.ask .wrap-line::after {height: 1px;}

    section.contact article.ask .wrap-line::before {width:27px}

    section.contact article.ask .wrap-item {margin-top: 32px;gap:16px;}
    section.contact article.ask .wrap-item .item {width: 100%;max-width: 320px;padding: 30px 23px 27px 23px;}

    section.contact article.ask .wrap-item .title {font-size: 13px;line-height: 17px;}
    section.contact article.ask .wrap-item .desc {font-size: 11px;line-height: 19px;margin-top: 11px;word-break: break-all;}

}