* {  transition: all 0.4s ease;} 
:root {
  --cpg-orange: #FF2B02;
  --cpg-blue: #51AEE5;
  --cpg-light: #f3f8fb;
  --cpg-dark: #2c363c;  
}




#wrap #contents {
    max-width: 100%;
    min-height: auto;
    padding: 0;
	width:100% !important;
    overflow-x: hidden !important;
}

	 
	    
        .agency_wrap {
            width: 100%;
            max-width: 100%;
        }

        .agency_wrap h1 {
            font-size: 55px;
            color: #000;
            font-weight:700;
           line-height: 130%;
           margin:0;
        }

        .agency_wrap h2 {
            font-size: 25px;
            color: #9da4a8;
            font-weight:700;
            line-height:250%;
        }

        .agency_wrap h3 {
            font-size: 18px;
            color: #4e5960;
            font-weight:400;
            line-height: 150%; 
            margin-top:20px;          
        }

        .agency_wrap h4 {
            font-size: 45px;
            color: #000;
            font-weight:700;
           line-height: 130%;
           margin:0;
        }
        
       .confetti {position: absolute;top:-200px;left:0; width: 1000px; height: 1000px; left:calc(50% - 500px); display: flex; justify-content: center; align-items: flex-start;  flex-shrink:0; z-index: 3;}
        		
		.cpg_orange {color:var(--cpg-orange);}
		.cpg_blue {color:var(--cpg-blue);}


        section {
            width: 100%;
			text-align: center;
			margin:70px 0;

            }
            
            
        .section1 {
	        position: relative;
            width: 100%;
            height: 650px;
            background-color: #f3f8fb;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .section1 div img {width: 100%; max-width:1100px;}

		.section1 div.kv_obj {position: absolute; z-index: 1; width: 70%; top:15%; max-width:500px;}
		.section1 div.kv_typo {position: absolute; z-index: 0; width: 80%; max-width:1000px;}

        .section1 .button {
	       	position: absolute;
	       	bottom:60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #222;
            color: #fff;
            border-radius: 15px;
            padding:22px 65px;
            font-size: 22px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            z-index: 4;
        }

        .section1 .button:hover {margin-top:-30px; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); background: var(--cpg-blue);bottom:65px;}
        
        .section1 .button img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        .section2 {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 50px 0;
        }

         .icon {
            width: auto;
            height: 50px;
        }

		.bell {
		margin-bottom: 15px;
		animation: shakeAndDing 1s ease-in-out infinite;
		        }

@keyframes shakeAndDing {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(0deg); 
  }
  100% {
    transform: rotate(0deg); 
  }
}


.chat {
animation: bounce 3s ease-in-out infinite;	
}
@keyframes bounce {
  0% {
    transform: translateY(0); 
  }
  30% {
    transform: translateY(-5px);
  }

  70% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}


        .section2 .box {
	        width: 100%;
	        max-width: 700px;
            background-color: var(--cpg-light);
            border-radius: 30px;
            padding: 50px 0;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
       
       
           .section2 .box-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 270px;
        }


        .section2 .box-content p {
            font-size: 28px;
            color: var(--cpg-dark);
            margin:0;
            line-height: 150%;
            font-weight: 700;
        }
        
        .section2 .box-content h2 {
            line-height: 100%;
        }



        .section2 .box img {
            width: 85px;
            height: auto;
            margin-right: 20px;
        }

        .section2 .box img.merit1 {
            width: 60px;
            padding:0 10px;
            height: auto;
            margin-right: 20px;
        }


        .section2 .box h2 {
            font-size: 20px;
            margin: 0;
            margin-right: 10px;
        }






            
            
		.section3 .process {
			width:100%;
			max-width: 1100px;
			margin:0 auto;
			border-radius: 30px;
			background: var(--cpg-light);
            display: flex;
            justify-content:center;
            align-items: center;
            padding: 50px 0;
            margin-top: 40px;
            font-size:0px;
            }

        .section3 .step {
	        width:85px;
	        height: auto;
	        padding: 20px;
            background-color:#fff;
            border-radius: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.05);
        }
        
        .section3 .step h2 {color:#4e5960; line-height: 150%; margin:0;}

        .section3 .step img {
            width: 30px;
            height: auto;
            margin:10px;
        }

        .section3 .arrow {
            width: 9px;
            height: auto;
            padding:15px;
            top: 50%;
        }


.mgv {margin:30px 0px;}












        @media screen and (max-width: 768px) {
	        
	            #contents .container {
        padding-left: 0;
        padding-right: 0;
         overflow-x: hidden;
    }
    
            .agency_wrap h1 {
                font-size: 28px;
            }

            .agency_wrap h2 {
                font-size: 16px;
            }

            .agency_wrap h3 {
                font-size: 13px;
            }
            .agency_wrap h4 {
                font-size: 24px;
            }



        section {
			margin:30px 0;

            }

        .section1 {
            height: 400px;
            background-color: #f3f8fb;
            border-radius: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
		.section1 div.kv_obj {}
		.section1 div.kv_typo {top:40%; }

        .section1 .button {
	       	bottom:50px;
            border-radius: 10px;
            padding:18px 50px;
            font-size: 18px;
        }
        .section1 .button:hover {bottom:55px;}




      





        .section2 .box {
	        width: 90%;
            padding: 35px 0;
            margin-bottom: 20px;
        }
              
           .section2 .box-content {
            width: 160px;
        }

        .section2 .box h2 {
            font-size: 15px;
        }
		.section2 .box-content p {font-size:18px;}
		
          .section2 .box img {
            width: 65px;
        }

        .section2 .box img.merit1 {
            width: 40px;
        }
        
        
         .icon {
            height: 40px;
        }
        
     		.bell {
		margin-bottom:0px;
		        }
       
            
		.section3 .process {
			width: 60%;
			flex-direction: column;
            margin-top: 20px;
            }

        .section3 .step {
	        width:90px;
	        height: auto;
	        padding: 20px;
            background-color:#fff;
            border-radius: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.05);
        }
        
        .section3 .step h2 {font-size:20px; margin:0;}

        .section3 .step img {
            width: 25px;
            height: auto;
            margin:5px;
        }

        .section3 .arrow {
		transform: rotate(90deg);
        }

            
            
            
}
        
 

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade {
 opacity:0; 
 -webkit-animation:fadeIn ease-in 1;
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;

 -webkit-animation-fill-mode:forwards; 
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;

 -webkit-animation-duration:1s;
 -moz-animation-duration:1s;
 animation-duration:1s;
}

.fade.one {
 -webkit-animation-delay: 0s;
 -moz-animation-delay: 0s;
 animation-delay: 0s;
}
.fade.two {
 -webkit-animation-delay: 0.2s;
 -moz-animation-delay: 0.2s;
 animation-delay: 0.2s;
}
.fade.three {
 -webkit-animation-delay: .5s;
 -moz-animation-delay: .5s;
 animation-delay: .5s;
}
.fade.four {
 -webkit-animation-delay: .7s;
 -moz-animation-delay: .7s;
 animation-delay: .7s;
}
.fade.five {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 animation-delay: 1s;
}
.fade.six {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 animation-delay: 4s;
}
.fade.seven {
 -webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
 animation-delay: 1.5s;
}
.fade.eight {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 animation-delay: 2s;
}