@charset "utf-8";
@import "font.css";
:root {
    --engFont: 'super', 'Noto Sans KR', sans-serif;
    --engFont2: 'Audiowide', 'Noto Sans KR', sans-serif;
    --koFont: 'SB', 'Noto Sans KR', sans-serif;
    --titleFont: 'Codec', 'Noto Sans KR', sans-serif;
    --subFont: 'GmarketSansOTF', 'Noto Sans KR', sans-serif;
    --mainColor: #c3abff;
    --blueColor: #BBE9FF;
    --pinkColor: #fec7d7;
    --yellowColor: #FFFED3;
    --mintColor: #D8EFD3;
    --grayColor: #afafaf;
    --blackColor: #1e1e1e;
    --borderR: 100px;
}
/* reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
img{
    vertical-align: top;
}
/* 공통클래스 */
.container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
.section{
    padding: 160px 0;
}
/* ====== mobile menu 영역 ====== */
.mb-menu{
    position: fixed;
    width: 100%;
    height: 100%;
    right: -100%;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    transition: right .5s linear;
    cursor: pointer;
    display: none;
}
.mb-menu.on{
    right: 0;
    padding-left: 5%;
    padding-right: 5%;
}
.mb-menu .mb-menu-title{}
/* btn */
.mb-menu .mb-menu-title .mb-btn{
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 101;
    cursor: pointer;
    display: none;
}
.mb-menu .mb-menu-title .mb-btn .line{
    display: block;
    width: 30px;
    height: 5px;
    background-color: var(--blackColor);
    border-radius: 5px;
    margin: 5px;
    transition: 1s;
}
.mb-menu .mb-menu-title .mb-btn .line .line-top{

}
.mb-menu .mb-menu-title .mb-btn .line .line-middle{
    width: 10px;
}
.mb-menu .mb-menu-title .mb-btn .line .line-bottom{
    width: 10px;
}
/* btn - on */
.mb-menu .mb-menu-title .mb-btn.on .line-top{
    transform: rotate(45deg) translateY(14px);
}
.mb-menu .mb-menu-title .mb-btn.on .line-middle{
    opacity: 0;
}
.mb-menu .mb-menu-title .mb-btn.on .line-bottom{
    width: 30px;
    transform: rotate(-45deg) translateY(-14px);
}
/* mb-menu */
.mb-menu .mb-nav{
    margin-top: 100px;
}
.mb-menu .mb-nav .mb-main-menu{
    font-size: 28px;
    font-family: var(--koFont);
    line-height: 1.2;
}
.mb-menu .mb-nav .mb-main-menu li{
    padding: 30px 0 0 20px;
}
.mb-menu .mb-nav .mb-main-menu li a{}
.mb-menu .mb-nav .start{
    font-size: 28px;
    font-family: var(--koFont);
    line-height: 1.2;
    margin-top: 70px;
    padding: 20px 0 0 20px;
}
.mb-menu .mb-nav .start .material-symbols-outlined{
    rotate: 90deg;
    font-size: 2.5rem;
    vertical-align: -12px;
}
.mb-menu .mb-nav p{
    font-size: 14px;
    font-family: var(--koFont);
    font-weight: 300;
    margin-top: 20px;
    padding: 0 0 0 20px;
}
/* ====== header 영역 ====== */
.header{
    padding: 10px 0;
    background-color:var(--pinkColor);
    z-index: 100;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    transition: all .4s;
}
.header.fixed {
    height: auto;
    border-bottom: 1px solid #fff;
    backdrop-filter: blur(8px);
    background-color: #f2f2f340;
}
.header.nofixed {
    transform: translateY(-100%);
}
.header.down {
    height: auto;
    border-bottom: 1px solid #fff;
    backdrop-filter: blur(8px);
    background-color: #f2f2f340;
}
.header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}
/* logo */
.header .logo {}
.header .logo a {}
.header .logo a img {
    width: 90px;
}
/* nav */
.header nav {
    flex-shrink: 0;
    display: flex;
    gap: 30px;
}
.header nav .mainMenu {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 30px;
}
.header nav .mainMenu > li {
    white-space: nowrap;
}
.header nav .mainMenu > li > a {
    font-family: var(--koFont);
    font-weight: 500;
    font-size: 14px;
    color: var(--blackColor);
    display: block;
    transition: all 0.3s linear;
}
.header nav .mainMenu > li > a.underline{
    position: relative;
    display: inline-block;
    color: var(--blackColor);
}
.header nav .mainMenu > li > a.underline::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 1.5px;
    background-color: var(--blackColor);
    transition: width 0.3s ease;
}
.header nav .mainMenu > li > a.underline:hover::after{
    width: 100%;
}
/* menu-btn */
.header nav .menu-btn{}
.header nav .menu-btn a{
    display: block;
    padding: 7px 17px;
    font-size: 12px;
    background-color: #fff;
    color: var(--blackColor);
    text-align: center;
    border-radius: 30px;
    font-family: var(--koFont);
    font-weight: 500;
    transition: color linear .5s;
}
.header nav .menu-btn a:hover{
    color: #fff;
    background: linear-gradient(to right, black 0%, black 100%);
}
.header nav .menu-btn .material-symbols-outlined{
    vertical-align: middle;
    font-size: 18px;
}
/* ====== visual 영역 ====== */
.visual{
    background: var(--yellowColor);
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}
.visual .title{
    height: 700px;
    background-color: var(--pinkColor);
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}
.visual .title .container {}
.visual .title .container #typedStr{}
.visual .title .container #typedStr p{}
.visual .title .container #animatedStr{
    font-family: var(--koFont);
    font-size: 47px;
    font-weight: 500;
    color: var(--blackColor);
    display: inline-block;
    padding: 230px 15px 20px;
}
.visual .title .container .portfolio{
    font-family: var(--engFont);
    color: var(--blackColor);
    display: flex;
    justify-content: center;
}
.visual .title .container .portfolio .p{
    font-size: 8rem;
}
.visual .title .container .portfolio .f-wrap{
    white-space: nowrap;
}
.visual .title .container .portfolio .f-wrap > span{
    font-size: 8rem;
    display: inline;
}
.visual .title .container .portfolio .f-wrap .blank{
    font-size: 7rem;
    font-weight: 700;
}
.visual .title .container .portfolio .f-wrap #keyword{
    transition: all 1s linear;
    font-size: 9rem;
    vertical-align: -35px;
    transform: translateY(-10px);
    padding: 0 12px;
}
.visual .icon{
    height: 130px;
    display: flex;
    align-items: center;
}
.visual .icon .container {}
.visual .icon .container .icon-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.visual .icon .container .icon-bar li{}
.visual .icon .container .icon-bar li a{
    font-family: var(--koFont);
    font-size: 18px;
    font-weight: 500;
    color: #666;
    display: flex;
    align-items: center;
    gap: 15px;
}
.visual .icon .container .icon-bar li a.active{
    color: var(--blackColor);
}
.visual .icon .container .icon-bar li a .material-symbols-outlined{
}
/* ====== brand 영역 ====== */
.brand {}
.brand .container {
    max-width: 1400px;
    padding: 160px 0;
    margin: 0 auto;
}
.brand .container h2 {
    font-family: var(--koFont);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 4rem;
    padding-left:5px;
}
.brand .container .brand-title {
    width: 100%;
}
.brand .container .brand-title .brand-wrap {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}
.brand .container .brand-title .brand-wrap.show {
    opacity: 1;
    transform: translateY(0);
}
.brand .container .brand-title .brand-wrap:last-child {
    padding: 0;
}
.brand .container .brand-title .brand-wrap .brand-text {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    min-height: 130px;
}
.brand .container .brand-title .brand-wrap .brand-text > span {
    font-family: var(--koFont);
    font-size: 6rem;
    display: inline-block;
}
.brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap {
    width: 0;
    height: 80px;
    opacity: 0;
    transform: translateY(50px);
    transition: width 0.8s ease, opacity 0.8s ease, transform 0.8s ease;
    overflow: hidden STEM;
    flex-shrink: 0;
    will-change: width, opacity, transform;
}
.brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap.show {
    width: 200px;
    height: auto;
    opacity: 1;
    transform: translateY(-10px);
}
.brand .container .brand-title .brand-wrap .brand-text .brand-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ====== aboutMe와 menu의 백그라운드 영역 ====== */
.back-wrap{
    height: auto;
    background-color:var(--pinkColor);
    border-top-left-radius: var(--borderR);
    border-top-right-radius: var(--borderR);
    padding: 0 50px 0;
}
/* ====== aboutMe 영역 ====== */
#about{}
#about .container{}
#about .container .aboutMe{
    display: flex;
    font-family: var(--koFont);
    font-weight: 300;
    justify-content: space-between;
}
#about .container .aboutMe .about-left{}
#about .container .aboutMe .about-left div{
    padding-bottom: 30px;
}
#about .container .aboutMe .about-left div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}
#about .container .aboutMe .about-left span{
    font-size: 26px;
    font-family: var(--koFont);
    font-weight: 300;
    line-height: 40px;
}
#about .container .aboutMe .about-right{
    flex-basis: 55%;
}
#about .container .aboutMe .about-right .right-text{
    display: flex;
    padding: 0 0 40px;
}
#about .container .aboutMe .about-right .right-text h3{
    width: 35%;
    transform: translateY(-7px);
    font-weight: 500;
    font-size: 22px;
}
#about .container .aboutMe .about-right .right-text div{}
#about .container .aboutMe .about-right .right-text div p{
    padding: 0 0 17px;
    font-size: 20px;
}
#about .container .aboutMe .about-right .right-text .tools-wrap{
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 50px;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left{}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .tools-title{
    padding-bottom: 37px;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .tools-title p{
    padding: 20px 0;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap{}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex{
    display: flex;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-name{
    width: 160px;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-name p{
    font-weight: 500;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-dot{
    width: 25%;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-dot .dots{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: var(--blackColor);
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-left .left-wrap .tools-flex .tools-dot .nodots{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #fff;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right{
    margin-right: 30px;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .tools-title{
    padding-bottom: 37px;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .tools-title p{}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap{}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap .tools-flex{
    display: flex;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap .tools-flex .tools-name{
    width: 100px;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap .tools-flex .tools-name p{
    font-weight: 500;
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap .tools-flex .tools-dot{}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap .tools-flex .tools-dot .dots{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: var(--blackColor);
}
#about .container .aboutMe .about-right .right-text .tools-wrap .tools-right .right-wrap .tools-flex .tools-dot .nodots{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #fff;
}
/* ====== menu 영역 ====== */
/* portfolio - UIUX 영역 */
.port-folio {
    position: relative;
}
.menu{
    position: sticky;
    top: 0;
    height: 100vh;
    overflow:hidden;
    display: flex;
    align-items: center;
    margin-bottom: 100px;
}
.menu .container{
    padding: 0 30px;
    max-width: 1700px;
    width: 100%;
    margin: 0 auto;
}
.menu .container .menu-wrap{
    max-width: 100%;
    height: auto;
}
.menu .container .menu-wrap .menu-text-wrap{
    display: flex;
}
.menu .container .menu-wrap .menu-text-wrap .menu-title{
    font-family: var(--koFont);
    font-size: 65px;
    font-weight: 500;
    padding: 50px 0 80px;
}
.menu .container .menu-wrap .menu-text-wrap .menu-title .menu-blank{
    font-family: var(--koFont);
    font-size: 55px;
    font-weight: 500;
    vertical-align: 4px;
}
.menu .container .menu-wrap .menu-text-wrap .menu-title .material-symbols-outlined{
    font-size: 100px;
    vertical-align: bottom;
}
.menu .container .menu-wrap .menu-text-wrap .menu-title .material-symbols-outlined.sparky{
    animation: scalePulse 2s ease-in-out infinite;
    display: inline-block;
}
@keyframes scalePulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
}
.menu .container .menu-wrap .menu-text-wrap .menu-sub{
    padding: 80px 0 0 50px;
}
.menu .container .menu-wrap .menu-text-wrap .menu-sub > p{
    font-family: var(--subFont);
    font-weight: 500;
    font-size: 18px;
    margin-top: 6px;
}
.menu .container .menu-wrap .menu-img-wrap{
    display: flex;
    justify-content: space-between;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline{
    flex-basis: 49%;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box{

}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img{}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img .video-wrap{}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img .video-wrap .video{}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img img{
    border-radius: 10px;
    width: 100%;
    height: 100%;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box:hover .menu-img img{
    border-radius: 60px;
    transition: all .5s linear;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text{
    text-align: center;
    font-family: var(--subFont);
    padding: 30px 0;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text .menu-img-title{
    display: inline-block;
    position: relative;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 20px;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text .menu-img-title::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 1.2px;
    background-color: var(--blackColor);
    transition: width 0.7s ease;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline:hover .menu-img-box .menu-img-text .menu-img-title::after{
    width: 100%;
}
.menu .container .menu-wrap .menu-img-wrap .menu-underline .menu-img-box .menu-img-text p{
    font-size: 15px;
    font-weight: 300;
    font-family: var(--koFont);
}
/* portfolio - uiux 영역 */
#work{
    background-color: #CDC1FF;
    border-radius: 80px;
}
/* portfolio - web 영역 */
#web{
    background: var(--yellowColor);
    border-radius: 80px;
}
/* portfolio - design 영역 */
#design{
    background-color:var(--mintColor);
    border-radius: 80px;
}
/* portfolio - online 영역 */
#online{
    background-color:var(--blueColor);
    border-radius: 80px;
    margin-bottom: 0;
}
.menu-empty {
    height: 90vh;
    margin-bottom: 0;
    pointer-events: none;
}
/* ====== modal 영역 ====== */
.modal-container{
    position: relative;
}
/* modal mask */
.modal-container .modal-mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}
.modal-container .modal-content{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 97vh;
    overflow-y: auto;
    display: none;
    z-index: 999;
    border-radius: 20px;
}
.modal-container .modal-content .modal-content-box{
    position: relative;
    overflow: hidden;
}
.modal-container .modal-content .modal-content-box .sw-modal{
    width: 100%;
}
.modal-container .modal-content .modal-content-box .sw-modal .swiper-slide{}
.modal-container .modal-content .modal-content-box .sw-modal .swiper-slide a{}
.modal-container .modal-content .modal-content-box .sw-modal .swiper-slide a img{
    width: 100%;
}
/* modal - close */
.modal-container .modal-content-close{
    position: fixed;
    top: 1.5%;
    right: 2%;
    z-index: 1000;
    font-size: 2vw;
    cursor: pointer;
    display: none;
    color: #fff;
}
/* modal - navigation */
.modal-container .modal-nav{
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;                
    transform: translateY(-50%);
    z-index: 1001;
    display: none;
}
.modal-container .modal-nav .modal-btn-prev,
.modal-container .modal-nav .modal-btn-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1000;
    text-indent: -999999px;
}
.modal-container .modal-nav .modal-btn-prev{
    left: 30px;
    background: url('../img/arrow_p_w.svg') no-repeat center / auto 100%;
}
.modal-container .modal-nav .modal-btn-next{
    right: 30px;
    background: url('../img/arrow_n_w.svg') no-repeat center / auto 100%;
}
/* ====== banner 영역 ====== */
.banner{
    background-color: var(--pinkColor);
    overflow-x: hidden;
}
.banner-wrap{
    margin-left: 200px;
    margin-top: 160px;
}
.banner-wrap .banner-title{
    display: table;
    position: relative;
    padding-bottom: 2vw;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--blackColor);
    font-size: 110px;
    line-height: 110px;
    font-family: var(--koFont);
}
.banner-wrap .banner-title .banner-btn{
    display: inline-block;
    background-color:var(--mainColor);
    border: 2px solid #9571F0;
    border-radius: 2000em;
    box-shadow: .1em .1em .2em rgba(0, 0, 0, .2);
    color: #fff;
    font-weight: 700;
    line-height: .7;
    font-size: 32px;
    padding: 3px 15px 0;
    position: absolute;
    top: -25px;
    right: -25px;
    z-index: 1;
    pointer-events: auto;
}
.banner-wrap .banner-title .banner-btn .material-symbols-outlined{

}
.banner-wrap .banner-main{
    position: relative;
    margin-bottom: 5vh;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--blackColor);
    font-size: 110px;
    line-height: 110px;
    font-family: var(--koFont);
    width: 1430px;
}
.banner-wrap .banner-main .door{
    line-height: 0.9;
}
.banner-wrap .banner-main p{
    display: inline-block;
    width:70%;
    padding: 0 24px;
}
.banner-wrap .banner-main p .typing{
    color: #666;
    white-space: nowrap;
}
.banner-wrap .banner-main p .typed-cursor{
    animation: blink 0.7s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.banner-wrap .banner-main .door p .typing-text{}
/* ====== footer 영역 ====== */
.footer{
    position: relative;
    background-color: var(--pinkColor);
}
.footer.section{
    padding: 160px 0 0;
}
.footer .footer-bg{
    padding: 80px 30px 20px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    background-color: var(--blackColor);
}
.footer .container{
    max-width: 1700px;
    width: 100%;
    margin: 0 auto;
}
.footer .container .footer-text{
    display: flex;
    justify-content: space-between;
    margin: 50px 0 180px;
    font-family: var(--koFont);
    color: #fff;
}
.footer .container .footer-title{
    line-height: 1.5;
}
.footer .container .footer-title h3{
    font-size: 114px;
    white-space: nowrap;
    color: #fff;
    font-family: var(--koFont);
    font-weight: 500;
}
.footer .container .footer-title h3 .material-symbols-outlined{
    rotate: 90deg;
    font-size: 100px;
    vertical-align: middle;
    transition: all .3s;
    transform: translate(0, 0);
}
.footer .container .footer-title h3:hover .material-symbols-outlined{
    transform: translate(-25%, -25%);
}
.footer .container .footer-menu-wrap{
    display: flex;
    gap: 100px;
    align-items: center;
    padding-top: 170px;
    margin-right: 16rem;
}
.footer .container .footer-text .footer-menu-wrap .footer-menu{}
.footer .container .footer-text .footer-menu-wrap .footer-menu h3{
    font-weight: 500;
    padding: 0 0 30px;
    font-size: 15px;
    letter-spacing: .5px;
}
.footer .container .footer-text .footer-menu-wrap .footer-menu ul{}
.footer .container .footer-text .footer-menu-wrap .footer-menu ul li{
    padding: 5px 0;
}
.footer .container .footer-text .footer-menu-wrap .footer-menu ul li a{
    font-weight: 300;
    color: #fff;
    font-size: 14px;
    letter-spacing: .5px;
}
.footer .container p{
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    font-family: var(--koFont);
    letter-spacing: 0.5px;
}
/* modal창 */
.footer .footer-bg .container .contact-modal {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    background: #fff;
    border-radius: 35px;
    padding: 30px 35px 0;
    display: none;
    z-index: 99;
}
.footer .footer-bg .container .contact-modal h3 {
    color: var(--blackColor);
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px;
}
.footer .footer-bg .container .contact-modal form {
    font-family: var(--koFont);
}
.footer .footer-bg .container .contact-modal form input,
.footer .footer-bg .container .contact-modal form textarea {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    outline:none;
    border: 1px solid var(--grayColor);
    background: transparent;
    color: var(--blackColor);
    border-radius: 5px;
}
.footer .footer-bg .container .contact-modal form input{}
.footer .footer-bg .container .contact-modal form textarea {
    height:100px;
}
.footer .footer-bg .container .contact-modal form input::placeholder,
.footer .footer-bg .container .contact-modal form textarea::placeholder {
    color: var(--blackColor);
}
.footer .footer-bg .container .contact-modal form .button {
    width: 80px;
    margin: 20px auto 0;
    background-color: #121212;
    color: #fff;
    cursor: pointer;
}
.footer .footer-bg .container .contact-modal form .reset {
    opacity: 0;
    visibility: hidden;
}
/* modal-mask */
.footer .footer-bg .container .contact-modal-mask {
    position: absolute;
    top: -67px;
    left: 0;
    width: 100%;
    height: 107%;
    background-color: rgba(0,0,0,0.2);
    display:none;
}