@charset "utf-8";
/* 지마켓산스 */
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

#domain_wrap {float:left; width:100%; height:100vh; background:url("../images/bg_domain.jpg") center top no-repeat; background-size:100%;}

.domain_logo{float:left; width:100%; margin:100px 0 0 0; padding:0 10px; text-align:center; }
.domain_title{float:left; width:100%; margin:50px 0 0 0; padding:0 10px; text-align:center; font-family:'GmarketSans'; font-weight:300; font-size:40px; color:#ffffff; letter-spacing:-1pt; white-space:normal; word-break:break-all; transition:all 0.2s;}
.domain_title_font01{font-weight:700; color:#4d65ff; transition:all 0.2s;}
.br{display:none;}
.domain_btn_box{float:left; width:100%; margin:50px 0 0 0; padding:50px 10px 50px 10px;}
.domain_btn_box ul{display:flex; align-items:center; justify-content:center;}
.domain_btn_box ul li{float:left; margin:0 20px;}
.domain_btn_box ul li a{display:block; width:420px; height:100px; line-height:104px; overflow:hidden; text-align:center; background:linear-gradient(to right,#5367ff 0%, #334bff 100%); border-radius:10px; font-family:'GmarketSans'; font-weight:300; font-size:40px; color:#ffffff; letter-spacing:-1pt; }

.domain_visual_box{float:left; width:100%; margin:0 0 0 0; text-align:center;}
.domain_visual_pc{width:100%; max-width:1920px; }
.domain_visual_m{width:100%; max-width:780px; display:none; }

.domain_customer{float:left; width:100%; margin:60px 0 0 0; padding:0 0 50px; text-align:center;}
.domain_customer ul{display:flex; align-items:center; justify-content:center;}
.domain_customer ul li{float:left; padding:0 10px; font-family:'GmarketSans'; font-weight:700; font-size:22px; color:#ffffff;}
.domain_text_1 {padding-right: 30px !important;}

@media screen and (max-width:1480px) {
	.domain_title{font-size:calc(50px - 1.1vw);}
}

@media screen and (max-width:1024px) {
	.domain_title{font-size:calc(50px - 1.3vw);}
	.domain_btn_box ul{justify-content: center;}
	.domain_btn_box ul li{width:49%; margin:0;}
	.domain_btn_box ul li a{width:100%; font-size:calc(50px - 1.1vw);}
}

@media screen and (max-width:780px) {
	.domain_logo{margin:50px 0 0 0;}
	.domain_title{margin:20px 0 0 0;}
	.domain_btn_box{margin:30px 0 0 0;}
	.domain_logo img{width:50%;}
	.domain_title{font-size:30px;}
	.br{display:block;}
    .domain_visual_pc{display:none;}
    .domain_visual_m{display:inline;}
	.domain_btn_box{padding:30px 10px 30px 10px;}
	.domain_btn_box ul li a{height:60px; line-height:64px; font-size:20px;}
        .domain_customer ul{display:flex; align-items:center; justify-content: center; flex-wrap: wrap; width: 100%;}
        .domain_customer ul li{padding: 6px 0;}
        .domain_image {padding-left: 25px !important;}
        .domain_text_1 {padding-right: 40px !important;}
        .domain_text_2 {padding-right: 3.5em !important;}
}

@media screen and (max-width:425px) {
	.domain_title{font-size:26px;}
	.domain_btn_box ul li a{font-size:17px;}
	.domain_customer ul li img{width:120px; font-size:11px;}
        .domain_image {padding-left: 45px !important;}
}

@media screen and (max-width:414px) {
        .domain_image {padding-left: 58px !important;}
        .domain_text_1 {padding-right: 55px !important;}
        .domain_text_2 {padding-right: 4.2em !important;}
}

@media screen and (max-width:390px) {
        .domain_image {padding-left: 50px !important;}
        .domain_text_1 {padding-right: 40px !important;}
        .domain_text_2 {padding-right: 3.5em !important;}
}

@media screen and (max-width:375px) {
        .domain_image {padding-left: 40px !important;}
}

/* linear-gradient(#00d1bb 0%, #00cad1 100%); */

/* animation */
.domain_logo img{
	-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}


.domain_btn_box ul li:hover a{
	-webkit-animation: bounce-in-fwd 0.6s both;
	        animation: bounce-in-fwd 0.6s both;
}
@keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0.7;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.94);
            transform: scale(0.94);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}