@charset "utf-8";
#wrap{
    float:left;
    width:100%;
    min-height:100vh;
    background:#000 url(./bg_domain.jpg) center 50% no-repeat;
    background-size:cover;
    transition:all .5s;
}/*-------------------------------------------------------------------------------------*
 *  평생도메인                                                                          *
 *-------------------------------------------------------------------------------------*/
.domain_wrap{
    position:relative;
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0 0 80px 0;
    overflow:hidden;
    box-shadow:0 0 20px rgba(0,0,0,.8);
}

.domain_wrap::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#010000 url(./bg_domain2.jpg) center top no-repeat;
    background-size:100%;
    opacity:.5;   /* ← 이미지 투명도 */
    z-index:0;
}

.domain_wrap > *{
    position:relative;
    z-index:1;
}
.domain_logo{float:left; width:100%; text-align:center;}
.domain_logo img{width:100%; max-width:1000px;}

.domain_site_btn{float:left; width:100%; margin:10px 0 0 0; text-align:center; position:relative;}
.dsb_text2{
    float:left;
    width:100%;
    text-align:center;
    font-family:TmonMonsori;
    font-size:120px;
    font-weight:bold;

    background:linear-gradient(
        to bottom,
        #F76B00 10%,
        #FFAA00 50%,
        #ffd200 60%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    color:transparent;

    transition:all 0.3s;
}
.domain_site_text{float:left; width:100%; text-align:center; margin:20px 0 0 0; padding:0 30px; font-family: TmonMonsori; font-size:36px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.6); transition:all 0.3s;}
.domain_site_text span{color:#fff000;}

.domain_btn_title{float:left; width:100%; text-align:center; margin:60px 0 0 0; padding:0 20px; font-family: TmonMonsori; font-size:50px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.6); transition:all 0.3s;}
.domain_btn_title span{color:#ffe78a;}

.domain_btn{float:left; width:100%; text-align:center; margin:10px 0 0 0;}
.domain_btn li{float:left; width:100%; margin:10px 0 0 0; display:flex; justify-content: center;}
.domain_btn li a{display:block; width:100%; max-width:798px; height:112px; line-height:112px; text-align:center; background:url(./domain_btn.png) center top no-repeat; font-family: TmonMonsori; font-size:50px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.6); transition:all 0.3s;}
.domain_btn li:hover a{color:#ffd500; text-shadow:5px 5px 3px rgba(0,0,0,0.99);}

.domain_btn_text{float:left; width:100%; text-align:center; margin:30px 0 0 0; padding:0 20px; font-family: TmonMonsori; font-size:34px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.6); line-height:1.6; transition:all 0.3s;}
.domain_btn_text span{color:#fff000;}

.domain_customer_title{float:left; width:100%; text-align:center; margin:60px 0 0 0; padding:0 20px; font-family: TmonMonsori; font-size:50px; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.6); transition:all 0.3s;}
.domain_customer_title span{color:#00ccff;}

.domain_customer{float:left; width:100%; text-align:center; margin:40px 0 0 0; padding:0 20px;}
.domain_customer a{display:flex; align-items:center; justify-content:center; margin:0 auto; text-align:center; width:100%; max-width:820px; padding:20px 10px; border-radius:100px; background:url(./customer_btn.png) center top no-repeat; font-family: TmonMonsori; font-size:36px; color:#714125; transition:all 0.3s;}
.domain_customer a img{display:inline-block; margin:0 5px 0 0;}
.domain_customer a span{color:#000000;}

@media screen and (max-width:1024px) {
    .domain_wrap{width:95%;}
	.dsb_text2{font-size:60px;}
	.domain_btn_title{font-size:38px; margin:30px 0 0 0;}
	.domain_customer_title{font-size:38px; margin:30px 0 0 0;}
	.domain_btn li a{width:80%; font-size:30px; background-size:100% 100%;}
	.domain_btn_text{font-size:20px;}
	.domain_customer a{font-size:0px;}
	.domain_customer a span{font-size:20px;}
	.domain_customer a img{width:100px; top:-10px;}
}

@media screen and (max-width:768px) {
 	.domain_site_btn{margin:20px 0 0 0;}
	.dsb_text2{font-size:44px;}
	.domain_site_text{font-size:18px;}
	.domain_btn_title{font-size:24px;}
	.domain_customer_title{font-size:22px;}
	.domain_btn{margin:5px 0 0 0;}
	.domain_btn li a{height:auto; line-height:1.5; padding:20px 10px; font-size:26px;}
	.domain_btn_text{font-size:18px; margin:10px 0 0 0;}
	.domain_customer{margin:10px 0 0 0;}
	.domain_customer a{font-size:0px; padding:10px 10px;}
	.domain_customer a span{font-size:18px;}
	.domain_customer a img{width:50px; top:0px;}   
	.br{display:none;}
}


.domain_logo img{
	-webkit-animation: quick_game 0.9s ease-in-out infinite both;
	        animation: quick_game 0.9s ease-in-out infinite both;
}
@keyframes quick_game{
  0%,100% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  50% {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
  }
}


.domain_btn {
	-webkit-animation: domain_btn 1.9s ease-in-out infinite both;
	        animation: domain_btn 1.9s ease-in-out infinite both;
}
@keyframes domain_btn {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



.domain_btn li:hover a{
	-webkit-animation: heartbeat1 0.7s both;
	        animation: heartbeat1 0.7s both;
}
@keyframes heartbeat1 {
  0% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    opacity: 0;
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);	
  }
  100% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    opacity: 1;
    -webkit-filter: hue-rotate(720deg);
            filter: hue-rotate(720deg);	
  }
}

.domain_customer a{
	-webkit-animation: domain_customer 0.9s ease-in-out infinite both;
	        animation: domain_customer 0.9s ease-in-out infinite both;
}
@keyframes domain_customer{
  0%,100% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  50% {
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3);
  }
}
.domain_customer a:hover{
	-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}


.dsb_text2{
	/* -webkit-animation: dsb_text2 1.0s ease-in-out infinite both;
	        animation: dsb_text2 1.0s ease-in-out infinite both; */
}
@keyframes dsb_text2{
  0% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
    opacity: 0.7;
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);	
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
    opacity: 1;
    -webkit-filter: hue-rotate(720deg);
            filter: hue-rotate(720deg);	
  }
  100% {
    -webkit-transform: scale(1.0);
            transform: scale(1.0);
    opacity: 0.7;
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);	
  }  
}

.domain_site_text ,.domain_btn_title,.domain_btn_text,.domain_customer_title{
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}