@charset "utf-8";

/****************************************************************************************************************************************
로그인페이지 시작
*****************************************************************************************************************************************/
.intro-wrap {position: relative; margin:0; padding:0; width: 100%; height: 100%; min-height: 800px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color:#000; background: #fff9f0 url('../img/intro/intro-bg.png') center no-repeat; background-size: cover;}

.intro-center {position: relative; margin:0 auto; padding:0; width: 500px; text-align: center;}
.intro-left {position: absolute; left: 15%; top: 50%; transform: translateY(-50%);}
.intro-right {position: absolute; right:15%; top: 50%; transform: translateY(-50%);}

.intro-left > img,
.intro-right > img {width: 300px;}

.intro-logo {position: relative; margin:0 auto; padding:0; width: 100%;}

ul.intro-list {position: relative; margin:30px auto 0 auto; padding:0; width: 360px; display: flex; gap:10px; justify-content: center; align-items: stretch;}
ul.intro-list > li:first-child {width: 70%; display: flex; gap:10px; flex-direction: column; align-items: center; justify-content: center;}
ul.intro-list > li:last-child {width: 30%;}
ul.intro-list > li input {margin:0 auto; padding:10px 10px; width: 100%; text-align: left; font-size: 18px; font-weight: 600; color: #000; background: #fefcf9; border: 3px solid #410000; border-radius: 5px;}
ul.intro-list > li input::placeholder {color:#444; letter-spacing: -1px;}
ul.intro-list > li > button {position: relative; width: 100%; height: 100%; font-size: 18px; font-weight: 600; color: #fff; background: #fe4c26; border: 3px solid #430000; border-radius: 5px; overflow: hidden; transition: 0.3s; cursor: pointer;}
.intro-captcha {display: flex; gap: 6px; width: 100%; align-items: stretch;}
.intro-captcha > input {flex: 1; margin: 0; padding: 10px 10px; text-align: left; font-size: 18px; font-weight: 600; color: #000; background: #fefcf9; border: 3px solid #410000; border-radius: 5px;}
.intro-captcha > input::placeholder {color:#444; letter-spacing: -1px;}
.intro-captcha > img {width: 100px; height: auto; border: 3px solid #410000; border-radius: 5px; cursor: pointer; object-fit: cover; background: #fff;}
ul.intro-list > li > button::before {content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 150%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4),transparent);transform: skewX(-20deg);}

.intro-btns {position: relative; margin:10px auto 0 auto; padding:0; width: 360px; display: flex; justify-content: center; align-items: center; gap:10px;}
.intro-btns > button {position: relative; margin:0 auto; padding:10px 10px; width: calc(100% / 2 - 10px); font-size: 18px; font-weight: 600; color:#fff; border: 3px solid #430000; border-radius: 5px; transition: 0.4s; overflow: hidden;}
.intro-btns > button.intro-join {background:#23817e;}
.intro-btns > button.intro-customer {background: #3d87d9;}
.intro-btns > button > svg {margin-right:3px; font-size: 20px;}
.intro-btns > button::before {content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 150%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4),transparent);transform: skewX(-20deg);}

@media (hover: hover) and (pointer: fine) {
    ul.intro-list > li > button:hover {background: rgba(254, 76, 38, 0.667);}
    .intro-btns > button.intro-join:hover {background:rgba(35, 129, 126, 0.667);}
    .intro-btns > button.intro-customer:hover {background:rgba(61, 135, 217, 0.667);}

   ul.intro-list > li > button:hover::before,
   .intro-btns > button:hover::before {animation: shine 1s ease 0s;}
}

/****************************************************************************************************************************************
회원가입 시작
*****************************************************************************************************************************************/
.join-center {position: relative; margin:0 auto; padding:0; width: 400px; text-align: center;}
.join-logo > img {width: 130px;}

ul.join-list {position: relative; margin:30px auto 0 auto; padding:0; width: 100%; display: flex;flex-wrap: wrap; gap:10px; justify-content: center;}
ul.join-list > li {position: relative; margin:0 auto; padding:0; width: 100%; overflow: hidden;}
ul.join-list > li > input {margin:0 auto; padding:10px 10px; width: 100%; text-align: left; font-weight: 600; color: #000; background: #fefcf9; border: 3px solid #410000; border-radius: 5px;}
ul.join-list > li > input::placeholder {color:#444; letter-spacing: -1px;}
ul.join-list > li > select {margin:0 auto; padding:10px 10px; width: 100%; text-align: left; font-weight: 600; color: #000; background: #fefcf9; border: 3px solid #410000; border-radius: 5px;}
ul.join-list > li > select:invalid {color:#444; letter-spacing: -1px;}

ul.join-list > li.check-list {position: relative; display: flex; justify-content:space-between; align-items: center; gap:5px;}
ul.join-list > li.check-list > input {width: 70%;}
ul.join-list > li.check-list > button {position: relative; margin:0; padding:10px 10px; width: 30%; font-weight: 600; color: #000; background: rgba(147, 165, 180, 0.361); border: 3px solid #410000; border-radius: 5px;}
ul.join-list > li.check-list > button::before {content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 150%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4),transparent);transform: skewX(-20deg);}

.join-btns {position: relative; margin:10px auto; padding:0; width: 100%;}
.join-btns > button {position: relative; margin:0 auto; padding:10px 10px; width: 100%; font-weight: 600; color:#fff; background:#23817e; border: 3px solid #430000; border-radius: 5px; transition: 0.4s; overflow: hidden;}
.join-btns > button::before {content: ""; position: absolute; top: 0; left: -200%; width: 100%; height: 150%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4),transparent);transform: skewX(-20deg);}

@media (hover: hover) and (pointer: fine) {
    .join-btns > button:hover {background:rgba(35, 129, 126, 0.667);}
    ul.join-list > li.check-list > button:hover::before,
    .join-btns > button:hover::before {animation: shine 1s ease 0s;}
}

@keyframes shine {
    0% {left: -200%;}
    100% {left: 250%;}     
}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width:1650px) { 
    .intro-left {left: 50px;}
    .intro-right {right:50px;}
}/* 미디어쿼리문 끝 */

@media (max-width:1200px) { 
    .intro-left {left: 20px;}
    .intro-right {right:20px;}
}/* 미디어쿼리문 끝 */

@media (max-width:1140px) { 
    .intro-left,
    .intro-right {display:none; right:0; left:0; margin:0 auto; padding: 20px 20px; width: 100%; height: 100%; text-align: center; overflow-y: auto;}
    .intro-left {z-index: 9;}
    .intro-right {z-index: 99;}    
}/* 미디어쿼리문 끝 */

@media (max-width:530px) { 
    .intro-center {padding:15px 30px; width: 100%;}
    ul.intro-list {flex-direction: column;}
    ul.intro-list,
    ul.intro-list > li:first-child,
    ul.intro-list > li:last-child,
    .intro-btns {width: 100%;}
    ul.intro-list > li input {font-size: 14px;}
    ul.intro-list > li > button {padding:10px 10px; font-size: 14px;}
    .intro-captcha > img {width: 80px;}
    .intro-btns {gap: 5px;}
    .intro-btns > button {width: calc(100% / 2 - 5px);}
    .intro-btns > button,
    .intro-btns > button > svg {font-size: 14px;}
}/* 미디어쿼리문 끝 */

@media (max-width:430px) { 
    .join-wrap {height: unset; min-height: 100svh;}
    .join-center {padding: 20px 20px;}
    ul.join-list > li.check-list {flex-direction: column;}
    ul.join-list > li.check-list > input,
    ul.join-list > li.check-list > button {width: 100%;}
}/* 미디어쿼리문 끝 */