@charset "UTF-8";
/* CSS Document */


	.pc{
		display: none!important;
	}
	
	.sp{
		display: block!important;
	}

nav .logo {
    width: 7.5rem;
}
	
	
    nav{
		min-width: 100%;
		position: relative;
    }
	
	section {
    padding: 3rem 0;
	}
	
	section.tp_qcks{
    padding: 1.5rem 0;	
	}
	
    .hamburger{
        display:block;
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 99;
        transition: all 0.7s ease;
    }
    .nav-links{
        position: fixed;
        background: var(--p-color);
        height: 83vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(50px at 90% -20%);
        -webkit-clip-path: circle(50px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events: none;
		padding-left: 0;
		z-index: 98;
		left: 0;
    }
    .nav-links.open{
        clip-path: circle(1000px at 90% -10%);
        -webkit-clip-path: circle(1000px at 90% -10%);
        pointer-events: all;
    }
	
	
		/*Animating Hamburger Icon on Click*/
	.toggle .line1{
		transform: rotate(-45deg) translate(-5px,6px);
				background: #fff;
	}
	.toggle .line2{
		transition: all 0.7s ease;
				background: #fff;
		width:0;
	}
	.toggle .line3{
		transform: rotate(45deg) translate(-5px,-6px);
				background: #fff;
	}

	
	
	.nav-links li a{
		color:#fff;
		font-size: 20px;
	}
	
	
    .nav-links li{
        opacity: 0;
    }
    .nav-links li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .nav-links li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .nav-links li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .nav-links li:nth-child(4){
        transition: all 0.5s ease 0.7s;
    }
    .nav-links li:nth-child(5){
        transition: all 0.5s ease 0.8s;
    }
    .nav-links li:nth-child(6){
        transition: all 0.5s ease 0.9s;
        margin: 0;
    }
    .nav-links li:nth-child(7){
        transition: all 0.5s ease 1s;
        margin: 0;
    }
    li.fade{
        opacity: 1;
    }
	
.top_title span{
        font-size: 230%;
        top: 12%;
}

    .master_logo {
        width: 60%;
    }




.sp .master_logo_cntn{
    margin-bottom:0;
   position: relative;
}


.sp .master_logo_cntn .top_quicks{
    gap:4px;    
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
}
	
.master_logo_cntn .top_quicks li{
    padding: 8px;
    border: 2px #fff solid;
    min-width: auto;
}


.master_logo_cntn .top_quicks p{
	flex-direction: column;
}

.master_logo_cntn .top_quicks p span {
        font-size: .9rem;
        padding-top: 2px;
}

    .master_logo_cntn .top_quicks li p img {
        height: 24px;
    }


section.promise {
    padding: 3rem 0 0;
}


.top_title {
    font-size: 2.125rem;
    line-height: 1.2;
}


.grid-container {
	display: flex;
    flex-direction: column;
	margin-top: 20px;
	
}
.grid-item {
    margin-bottom: 20px;
	padding: 8px 16px;
	align-items: center;
    flex-direction: column;
}

.grid-item._anm._is-inview.grid-item{
	transform: translate(0, 0)!important;
	    transition-delay: 0s!important;
}

.grid-item h3 {
    font-size: 1.75rem;
    margin-bottom: 0;
    margin-top: 10px;
	text-align: center;
}

.grid-item p strong {
        text-align: center;
        width: 100%;
        display: inline-block;
    }


._anm{
	transition: all 400ms ease-out;
}

.bg_redclipped {
    background-size: 120%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
    padding-bottom: 95px;
}

.ladder_vector {
    bottom: -50px;
    width: 110px;
	left: 0;
	right: auto;
}


section.services .title_area .vector_img {
    width: 60px;
    top: -110px;
}

section.services .title_area .vector_img {
    width: 60px;
    top: -110px;
}

.company_overview .vector_yellow{
    position: absolute;
    right: 0;
    top: -55px;
    width: 110px;
}

.president_message .title_area .vector_img{
	width: 85px;
}




.bg_blocks {
	background-size: 120%;
}


.title_area {
    margin-bottom: 30px;
}


.serrvice_list_top{
	grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.serrvice_list_top li .header_section .icon{
	border-radius: .25rem;
    padding: 3px;
    width: 30px;
    height: 30px;
}

.serrvice_list_top li .header_section h3 {
    font-size: 1.125rem;
}



.vector_services{
	bottom: 0;
    width: 23.85%;
}

.work-cover {
    padding: 3rem 4%;
}

.work_intro{
	padding: 15px;
}

.work_intro_title {
    font-size: 2.25rem;
}

.work_intro_desc {
    font-size: 1.15rem;
}

.top_work .work_list_top{    
	grid-template-columns: 1fr 1fr;
}


.work_block .text_area {
    padding: 14px 16px 18px;
}


.clipped {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
}


.clipped2 {
    clip-path: polygon(0% 60px, 100% 0%, 100% calc(100% - 60px), 0% 100%);
}

.clip_overlay {
    margin-top: -60px;
    padding-top: 60px;
}

.clipped section {
    padding-bottom: 60px;
}


.clipped_top {
    clip-path: polygon(0% 60px, 100% 0%, 100% 100%, 0% 100%);
}

.clipped_bttm {
    padding-bottom: 120px;
}

.vector_img_grey {
    left: 3%;
    top: -120px;
    width: 80px;
}


.voice_list_top {
    gap: 1rem;;
    grid-template-columns: 1fr 1fr;
}



.ti-widget.ti-goog .ti-header .ti-star {
    width: 14px !important;
    height: 14px !important;
}


.voice_list_top .title{
	    font-size: 1rem;
}


header .reviewbar .ti-widget.ti-goog .ti-small-logo {
    margin-right: 4px;
    background: #fff;
    padding: 2px 8px;
    border-radius: 15px;
}

section.voice .vector_voice {
    position: absolute;
    left: 2.9%;
    width: 150px;
    bottom: 10px;
}

section.notice .innwrap{
	flex-direction: column;
	gap: 0;
}

section.notice .innwrap ul.notice li a, .news_block ul.notice li a {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

    .news_info {
        column-gap: 10px;
        display: flex;
        flex-wrap: wrap;
    }

section.notice .innwrap ul.notice {
    margin-bottom: 30px;
}

section.notice .main_btn_container.sp{
	display: flex!important;
}


.vector_notice {
    bottom: 4px;
    width: 190px;
    right: 5px;
	left: auto;
}


.top_contact .innwrap {
	flex-direction: column;
}


.top_contact .innwrap .top_title {
    font-size: 2rem;
}


.top_contact .btn_content .contact_btn{
	padding: 1rem 1.125rem;
    gap: 1rem;
}

footer .innwrap {
	flex-direction: column;
}
footer .innwrap .logo a{
	display: flex;
    justify-content: center;
}





footer .right_cntn li a {
    color: #fff;
    font-size: 14px;
}

footer .right_cntn .contact_btn {
    display: flex;
    padding: 1rem;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.inner-kv{
	height: 50vh;
}

.kvtitle {
    padding-top: 60px;
    clip-path: polygon(0% 60px, 100% 0px, 100% 100%, 0% 100%);
}



.kvtitle::before {
    clip-path: polygon(0% 72px, 100% 10px, 100% 100%, 0% 100%);
	background-size:120%;
}

.title_wrap {
    padding: 20px 0;
}

.kvtitle h2 {
    font-size: 1.9rem;
    padding-left: 110px;
    color: #fff;
}


.title_vector {
    width: 80px;
    bottom: 25px;
}


.concerns_wrap{
	 flex-direction: column;
}

.concerns_title{
    margin-bottom: 30px;
}

.concerns_cntn .concerns {
    display: flex;
	flex-direction: column;
	gap: 20px;
}

.concerns li {
    gap: 16px;
    align-items: end;
}


.solution_steps {
    margin: 30px 10px 0;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
}


.solutionsteps_cntn{
	display: grid;
	grid-template-columns: 1fr 1fr;
	clip-path: none;
	background-color: transparent;
	padding-left: 0;
	gap:32px;
}

.step {
	margin: 0;
}


.arrow-step{
	margin-top:20px;
	clip-path: none;
	border-radius: 8px;
}


.flex_box {
    padding: 30px 0;
	flex-direction: column;
}

.flex_box .f_box_img, .flex_box .f_box_msg {
    width: 100%;
}

.flex_box .f_box_img{
	margin-bottom: 30px;
}

.flex_box .f_box_msg h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

    .flex-row-reverse {
        flex-direction: column !important;
    }

.flex_box .f_box_msg {
    padding-left: 0;
}

.flex-row-reverse .f_box_msg {
    padding-right: 0;
}


section.merit {
    padding: 70px 0 0;
}

.merit h4 {
    font-size: 1.75rem;
    line-height: 1.2;
}

.vector_bucket_roller{
        bottom: -14px;
        width: 190px;
        right: 5px;
        left: auto;
}

.merit_cntn li {
    gap: 1rem;
    padding: 10px 20px 10px 10px;
}

.vector_img_blue {

    width: 120px;
    top: -120px;
}

.vector_subpage_bttm {
    position: absolute;
    left: 2.9%;
     width: 150px;
	bottom: -20px;
}

.work_cat_filter {
	 margin-bottom: 30px;
	justify-content: space-between;
	gap: 5px;
	flex-wrap: wrap;
}

.work_cat_filter li{
    min-width: 48%;

}

.work_cat_filter li .cat-btn {
	font-size: 14px;
	gap: 8px;
	width: 100%;

}

.work_single .vector_bucket_roller, .voice_single .vector_bucket_roller{
        bottom: -50px;
        right: 0.5%;
        left: auto;
        width: 150px;
}

.bg_redblocked{
	 background-size: 120%;
}

.work_single h4 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.gallery_tp {
    padding: 50px 0;
}

.rollercolor_vector{
	bottom: 2%;
    left: 2%;
}

.single-works_overview_table-tr{
	display: flex;
    flex-direction: column;
    width: 100%;
}

.works_overview .single-works_overview_table-th{
	font-weight: bold;
}

.voice_page .title_vector {
    width: 100px;
}


.voice_page .kvtitle h2 {
    padding-left: 120px;
}


.customerdetails{
	gap: 10px 20px;
    flex-wrap: wrap;
}

.voice_single h3{
	font-size: 18px;
    margin-bottom: 10px;
}

.mainafter {
    margin-bottom: 20px;
}


.voice_title_q {
    font-size: 17px;
    width: 99%;
}

.news_block ul.notice {
    margin: 0 4%;
}

.about-intro .msgbox{
	width: 100%;
}

.about-intro .imgbox{
	width: 50%;
}

.about-intro{
	flex-direction: column;
	justify-content: center;
}

    .about-intro .imgbox {
        width: 50%;
        margin: 0 auto 20px;
    }


	.about-intro {
    padding: 1rem;	
}
		
.president_message h3, .company_overview h3{
	font-size: 2rem;
}

.president_message-intro {
    flex-direction: column;
}
	
	.president_message-intro .imgbox {
    width: 100%;
	}

.president_message-intro .msgbox {
    width: 100%;
	
}

.president_message-box{
	padding: 1.25rem;
}


.vison_mission {
    padding-top: 60px;
	flex-direction: column;
    gap: 40px;
}

.vison_mission .vm_cntn h4 {
    font-size: 1.75rem;
}

.vison_mission .vm_box ul li {
    flex-direction: column;
}



.company_overview_table-tr{
	display: flex;
	flex-direction: column;
}


.company_overview .company_overview_table-th{
	font-weight: bold;
}

.line-cntn {
    padding: 1.25rem;
    margin-bottom: 20px;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}

.line-cntn .linbttn{
	margin: 0 auto 10px;
}

.contact-cntn {
    padding: 1.5rem;
}

.privacy-cntn {
    padding: 1.25rem;
}

.contact-cntn .main_btn_container p {
    flex-direction: column;
}


.work_list_top{
	    grid-template-columns: 1fr 1fr;
}

.top_contact .btn_content{
	align-items: center;
}

.master_kv{
    padding-top: 7.75rem;
}
	
	
@media screen and (max-width: 540px) {
	.serrvice_list_top{
		display: flex;
		flex-direction: column;
	}
	
	.work_list_top{
		display: flex;
		flex-direction: column;		
	}
	
	.voice_list_top {
		display: flex;
		flex-direction: column;		
	}
	
	.solutionsteps_cntn{
			display: flex;
		flex-direction: column;		
	}
	
	    .about-intro .imgbox {
        width: 80%;
    }

	
}