@charset "UTF-8";

/*** visual ***/
.visual{
	width: 100%;
	height: 100vh;
}
.visual .swiper-slide{
	display: flex;
	align-items: center;
}
.visual .swiper-slide:after{
	content: '';
	width: 55px;
	height: 60px;
	position: absolute;
	top: 55%;
	left: 6%;
	transform: translateY(-50%);
	opacity: .3;
	background: url('/img/main-visual-icon.png') no-repeat center/cover ;
}
.visual .visualSwiper{}
/*.visual .swiper-slide .layout{
	display: flex;
	align-items: center;
	height: 100%;
}*/
.visual .swiper-slide .title-area{
	transform: translateY(-35px);
}
.visual .swiper-slide .title-area .deco{
	font-size: 1.37rem;
	 color: var(--yellow);
}
.visual .swiper-slide .title-area .title{
	font-size: 4.18rem;
	color: var(--white);
	margin-top: var(--space-20);
}
.visual .swiper-slide .title-area .text{
	font-size: 1.12rem;
	color: rgba(255,255,255,.8);
	margin-top: var(--space-50);
}
.visual .setting-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 25px;
	position: absolute;
	bottom: 215px;
	z-index: 96;
}
.visual .setting-area .swiper-button{
	color: var(--white);
	cursor: pointer;
	transition: var(--transition);
}
.visual .setting-area .visual-pagination{
	display: flex;
	align-items: center;
	gap: 15px;
}
.visual .setting-area .visual-pagination .swiper-pagination-bullet{
	background: var(--white);
	opacity: .5;
	margin: 0;
	position: relative;
	transition: var(--transition);
}
/*.visual .setting-area .visual-pagination .swiper-pagination-bullet-active{
	width: 14px;
	height: 14px;
	background: transparent;
	border: 1px solid var(--yellow);
	opacity: 1;
}
.visual .setting-area .visual-pagination .swiper-pagination-bullet-active:after{
	content: '';
	width: 8px;
	height: 8px;
	background: var(--yellow);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}*/
.visual .setting-area .visual-pagination .swiper-pagination-bullet-active{
	background: var(--yellow);
	opacity: 1;
}
.visual .setting-area .visual-pagination .swiper-pagination-bullet-active:after{
	content: '';
	width: 14px;
	height: 14px;
	background: transparent;
	border: 1px solid var(--yellow);
	border-radius: var(--border-radius);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 호버효과 */
.visual .setting-area .swiper-button:hover{
	opacity: .5;
}

/* 메인비주얼 배경 */
.visual .swiper-slide.slide1{
	background: url('/img/main-visual1.jpg') no-repeat center/cover;
}
.visual .swiper-slide.slide2{
	background: url('/img/main-visual2.jpg') no-repeat center/cover;
}
.visual .swiper-slide.slide3{
	background: url('/img/main-visual3.jpg') no-repeat center/cover;
}
.visual .swiper-slide.slide4{
	background: url('/img/main-visual4.jpg') no-repeat center/cover;
}
	/* @visual 미디어쿼리 */
	@media all and (max-width: 1800px){
		.visual .swiper-slide:after{
			display: none;
		}
	}
	@media all and (max-width: 1400px){
		.visual .swiper-slide.slide1{
			background-position: 75% 0%;
		}
		.visual .swiper-slide.slide2{
			background-position: 53% 0%;
		}
		.visual .swiper-slide.slide3{
			background-position: 80% 0%;
		}
		.visual .swiper-slide.slide4{
			background-position: 72% 0%;
		}
		.visual .swiper-slide .title-area .title{
			font-size: 3.75rem;
		}
	}
	@media all and (max-width: 1100px){
		/*.visual .swiper-slide .layout{
			align-items: flex-start;
		}*/
		.visual .swiper-slide{
			align-items: stretch;
		}
		.visual .swiper-slide .title-area {
			transform: none;
			margin-top: 35%;
			/*transform: translateY(-80%);*/
		}
		/*.visual .swiper-slide .title-area .title{
			margin-top: var(--space-15);
		}
		.visual .swiper-slide .title-area .text{
			margin-top: var(--space-40);
		}*/
		.visual .swiper-slide.slide1{
			background: url('/img/main-visual1-m.jpg') no-repeat center/cover;
		}
		.visual .swiper-slide.slide2{
			background: url('/img/main-visual2-m.jpg') no-repeat center/cover;
		}
		.visual .swiper-slide.slide3{
			background: url('/img/main-visual3-m.jpg') no-repeat center/cover;
		}
		.visual .swiper-slide.slide4{
			background: url('/img/main-visual4-m.jpg') no-repeat center/cover;
		}
	}
	@media all and (max-width: 640px){
		.visual .swiper-slide .title-area{
			margin-top: 40%;
		}
		.visual .swiper-slide .title-area .title{
			font-size: 2.5rem;
			margin-top: var(--space-15);
		}
		.visual .swiper-slide .title-area .text{
			margin-top: var(--space-30);
		}
		.visual .swiper-slide .title-area .deco{
			font-size: 1.214rem;
			margin-top: var(--space-35);
		}
		.visual .setting-area{
			bottom: 65px;
			gap: 15px;
		}
		.visual .setting-area .visual-pagination{
			gap: 12px;
		}
		.visual .setting-area .visual-pagination .swiper-pagination-bullet{
			width: 6px;
			height: 6px;
		}
		.visual .setting-area .visual-pagination .swiper-pagination-bullet-active:after{
			width: 12px;
			height: 12px;
		}
	}


/*** product 공통 ***/
.product{
	padding: var(--space-130) 0;
}
.product .layout{
	display: flex;
	justify-content: space-between;
    align-items: stretch;
}
.product .control-area{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	/*width: 252px;*/
}
.product .control-area .title-area .title{
	margin-top: var(--space-30);
}
.product .control-area .title-area .text{
	margin-top: var(--space-15);
}
.product .control-area .productButton{
	height: auto;
}
.product .control-area .productButton .swiper-wrapper{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 3px;
	height: auto;
}
.product .control-area .productButton .swiper-slide{
	display: flex;
    align-items: center;
	justify-content: space-between;
	width: 200px !important;
	height: 64px;
	background: var(--white);
	border-radius: 5px;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
	cursor: pointer;
	margin-right: 0 !important;
	padding: 0 var(--space-25);
	transition: var(--transition);
}
/*.product .control-area .productButton .swiper-slide:after{
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	background-color: var(--yellow);
	border-radius: 5px;
	transition: var(--transition);
}*/
.product .control-area .productButton .swiper-slide .button-text{
	font-weight: var(--fw-700);
	color: var(--gray02);
	transition: var(--transition);
}
.product .control-area .productButton .swiper-slide-thumb-active{
	background: var(--yellow);
}
.product .control-area .productButton .swiper-slide-thumb-active .button-text,
.product .control-area .productButton .swiper-slide-thumb-active i.arrow{
	color: var(--black);
}
.product .content-area{
	width: 980px;
	height: 522px;
}
.product .content-area .productImg .swiper-slide{
	border-radius: 10px;
	overflow: hidden;
}
.product .content-area .productImg .swiper-slide .description{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	padding: var(--space-40);
	opacity: 0;
	visibility: hidden;
	transition:  var(--transition);
}
.product .content-area .productImg .swiper-slide .description:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	opacity: 0;
	visibility: hidden;
	transition:  var(--transition);
}
.product .content-area .productImg .swiper-slide .description .text-box,
.product .content-area .productImg .swiper-slide .description ul.list{
	position: relative;
	top: 50px;
	left: 0;
	z-index: 1;
	transition:  var(--transition);
}
.product .content-area .productImg .swiper-slide .description .text-box h5{
	color: var(--yellow);
}
.product .content-area .productImg .swiper-slide .description .text-box .text{
	color: var(--white);
	margin-top: var(--space-15);
}
.product .content-area .productImg .swiper-slide .description ul.list{
	margin-top: var(--space-30);
}
.product .content-area .productImg .swiper-slide .description ul.list li{
	color: rgba(255,255,255,0.8);
	margin-top: var(--space-10);
}
.product .content-area .productImg .swiper-slide .description ul.list li:first-child{
	margin-top: 0;
}
.product .content-area .productImg .swiper-slide.unlike .description ul.text-box li{
	margin-top: var(--space-30);
}
.product .content-area .productImg .swiper-slide.unlike .description ul.text-box li:first-child{
	margin-top: 0;
}
.product .content-area .productImg .swiper-slide.unlike .description ul.text-box li h5{
	font-size: 1.25rem;
}
.product .content-area .productImg .swiper-slide.unlike .description ul.text-box li .text{
	margin-top: var(--space-10);
}
.product .content-area .productImg .swiper-slide .button{
	border: 1px solid var(--white);
	background: rgba(255,255,255,0.2);
	position: absolute;
    bottom: 40px;
	transition: var(--transition);
}

/* 호버효과 */
.product .control-area .productButton .swiper-slide:hover{
	background: var(--yellow);
}
.product .control-area .productButton .swiper-slide:hover .button-text,
.product .control-area .productButton .swiper-slide:hover i.arrow{
	color: var(--black);
}
/*.product .control-area .productButton .swiper-slide:hover::after{
	left: 0;
	width: 100%;
}*/
.product .content-area .productImg .swiper-slide:hover .description,
.product .content-area .productImg .swiper-slide:hover .description:before{
	opacity: 1;
    visibility: visible;
}
.product .content-area .productImg .swiper-slide:hover .description .text-box,
.product .content-area .productImg .swiper-slide:hover .description ul.list{
	top: 0;
}
.product .content-area .productImg .swiper-slide .button:hover{
	border-color: var(--yellow);
	background: var(--yellow);
}
/*.product .content-area .productImg .swiper-slide .button:hover::after{
	background: var(--yellow);
}*/

/*** product1 ***/
.product1{
	background: url('/img/main-bg1.jpg') no-repeat center/cover;
}
.product1 .content-area .productImg .swiper-slide .button {
    right: 40px;
}

/*** product2 ***/
.product2{
	background: url('/img/main-bg2.jpg') no-repeat center/cover;
}
.product2 .control-area .title-area{
	text-align: right;
}
.product2 .control-area .productButton .swiper-wrapper{
	align-items: flex-end;
}
.product2 .control-area .title-area .title{
	color: var(--white);
}
.product2 .control-area .title-area .text{
	color: rgba(255,255,255,0.8);
}
.product2 .content-area .productImg .swiper-slide .description .text-box,
.product2 .content-area .productImg .swiper-slide .description ul.list{
	text-align: right;
}
.product2 .content-area .productImg .swiper-slide .button {
    left: 40px;
}
	/* @product 미디어쿼리 */
	@media all and (max-width: 1400px){
		.product .layout{
			align-items: flex-end;
		}
		.product .content-area {
			width: 800px;
			height: auto;
		}
		.product .control-area{
			gap: 40px;
		}
		.product .control-area .productButton .swiper-slide{
			/*width: 180px !important;*/
			height: 55px;
			padding: 0 var(--space-15);
		}
		.product .control-area .title-area .title {
			margin-top: var(--space-15);
		}
		.product .control-area .title-area .text {
			margin-top: var(--space-10);
		}
	}
	@media all and (max-width: 1200px){
		.product .layout{
			flex-direction: column;
			gap: 45px;
		}
		.product .control-area{
			width: 100%;
			gap: 30px;
		}
		.product .control-area .title-area{
			text-align: center;
		}
		.product .control-area .title-area .text br{
			display: none;
		}
		.product .control-area .productButton .swiper-wrapper{
			flex-direction: row;
			gap: 5px;
		}
		.product .control-area .productButton1 .swiper-slide{
			width: calc((100% - 15px) / 4) !important;
		}
		.product .content-area {
			width: 100%;
			height: auto;
		}
		.product .content-area .productImg .swiper-slide .description{
			padding: var(--space-20);
		}
		.product .content-area .productImg .swiper-slide .description ul.list,
		.product .content-area .productImg .swiper-slide.unlike .description ul.text-box li {
			margin-top: var(--space-20);
		}
		.product .content-area .productImg .swiper-slide .button{
			bottom: 20px;
		}
		.product1 .content-area .productImg .swiper-slide .button{
			right: 20px;
		}
		.product2 .layout {
			flex-direction: column-reverse;
		}
		.product2 .control-area .productButton2 .swiper-slide{
			width: calc((100% - 15px) / 3) !important;
		}
		.product2 .content-area .productImg .swiper-slide .button{
			left: 20px;
		}
	}
	@media all and (max-width: 1000px){
		.product{
			padding: var(--space-110) 0;
		}
	}
	@media all and (max-width: 640px){
		.product{
			padding: var(--space-90) 0;
		}
		.product .layout{
			gap: 25px;
		}
		.product .control-area .title-area .title {
			margin-top: var(--space-10);
		}
		.product .control-area .title-area .text {
			margin-top: var(--space-15);
		}
		.product .control-area .title-area .text br {
			display: block;
		}
		.product .control-area .productButton1 .swiper-slide,
		.product2 .control-area .productButton2 .swiper-slide{
			width: calc((100% - 15px) / 2) !important;
			height: 45px;
		}
		.product .control-area .productButton .swiper-slide .button-text{
			font-size: 0.857rem;
		}
		.product .content-area .productImg .swiper-slide figure{
			width: 100%;
			height: 0;
			padding: 50%;
			overflow: hidden;
			position: relative;
		}
		.product .content-area .productImg .swiper-slide figure img{
			width: auto;
			max-width: 10000%;
			height: 100%;
			position: absolute;
		}
		.product .content-area .productImg .swiper-slide .description .text-box h5 {
			font-size: 1.214rem;
		}
		.product .content-area .productImg .swiper-slide .description .text-box .text{
			margin-top: var(--space-10);
		}
		.product .content-area .productImg .swiper-slide .description ul.list{
			margin-top: var(--space-15);
		}
		.product .content-area .productImg .swiper-slide .description ul.list li{
			font-size: 0.857rem;
			margin-top: var(--space-7);
		}
		/*.product .content-area .productImg .swiper-slide .description {
			padding: var(--space-15);
		}*/
		.product1 .content-area .productImg .swiper-slide figure img{
			top: 0;
			left: -50%;
		}
		.product2 .content-area .productImg .swiper-slide figure img{
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.product .content-area .productImg .swiper-slide.unlike .description ul.text-box li {
			margin-top: var(--space-10);
		}
		.product2 .content-area .productImg .swiper-slide.unlike .description ul.text-box li h5{
			font-size: 1.142rem;
		}
		.product .content-area .productImg .swiper-slide.unlike .description ul.text-box li .text{
			font-size: 0.857rem;
			margin-top: var(--space-7);
		}
	}


/*** services ***/
.services{
	padding: var(--space-130) 0;
	background: url('/img/main-bg3.png') no-repeat center/cover;
}
.services .title-area{
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.services ul.content-area{
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
	margin-top: var(--space-65);
}
.services ul.content-area li{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
	width: calc((100% - 60px)/4);
    padding: var(--space-55) 0;
    border-radius: 10px;
    background: var(--white);
	box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--white);
	transition: var(--transition);
}
.services ul.content-area li figure{
	display: flex;
    align-items: center;
    justify-content: center;
	width: 185px;
    height: 185px;
	background: var(--gray04);
    border-radius: var(--border-radius);
	transition: var(--transition);
}
.services ul.content-area li figure svg{
	width: 53%;
}
.services ul.content-area li:nth-child(2) figure svg{
	transform: translateX(4px);
}
.services ul.content-area li:nth-child(4) figure svg{
	transform: translateX(7px);
}
.services ul.content-area li figure path{
	fill: var(--gray02);
	transition: var(--transition);
}
.services ul.content-area li .text-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
/*.services ul.content-area li .text-box .text{
	margin-top: var(--space-10);
}*/

/* 동작효과 */
.services ul.content-area li.on {
  border-color: var(--orange);
}
.services ul.content-area li.on figure {
  background: var(--orange);
}
.services ul.content-area li.on figure path {
  fill: var(--white);
}

	/* @services 미디어쿼리 */
	@media all and (max-width: 1400px) {
		.services{
			background-position: right 5% center;
		}
		.services .title-area .text-box .title .mobile {
			display: none;
		}
		.services ul.content-area{
			flex-direction: column;
			align-items: stretch;
		}
		.services ul.content-area li{
			width: 100%;
			flex-direction: row;
			gap: 50px;
			padding: var(--space-40);
		}
		.services ul.content-area li figure{
			width: 130px;
			height: 130px;
		}
		.services ul.content-area li figure svg {
			width: 48%;
		}
		.services ul.content-area li .text-box{
			align-items: flex-start;
			text-align: left;
		}
		.services ul.content-area li .text-box .text br{
			display: none;
		}
	}
	@media all and (max-width: 1000px) {
		.services {
			background-position: 24% 50%;
			padding: var(--space-110) 0;
		}
		.services .title-area{
			flex-direction: column;
			align-items: flex-start;
			gap: 40px;
		}
		.services .title-area .text-box .title br{
			display: none;
		}
		.services ul.content-area li .text-box .text br {
			display: block;
		}
		.services ul.content-area li{
			padding: var(--space-30);
		}
		.services ul.content-area li figure {
			width: 125px;
			height: 125px;
		}
	}
	@media all and (max-width: 640px) {
		.services {
			background-position: 33% 50%;
			padding: var(--space-90) 0;
		}
		.services .title-area{
			gap: 25px;
		}
		.services .title-area .text-box .title br,
		.services .title-area .text-box .title .mobile{
			display: block;
		}
		.services .title-area .text-box .text br{
			display: none;
		}
		.services ul.content-area{
			margin-top: var(--space-45);
		}
		.services ul.content-area li{
			padding: var(--space-20);
			gap: 20px;
		}
		.services ul.content-area li figure {
			width: 95px;
			height: 95px;
		}
		.services ul.content-area li .text-box{
			width: calc(100% - 95px - 20px);
		}
		.services ul.content-area li .text-box .text br{
			display: none;
		}
	}


/*** partner ***/
.partner{
	padding: var(--space-20) 0;
}
.partner .swiper-wrapper{
	align-items: center;
	-webkit-transition-timing-function:linear!important;
	-o-transition-timing-function:linear!important;
	transition-timing-function:linear!important;
}
	/* @partner 미디어쿼리 */
	@media all and (max-width: 640px){
		.partner {
			padding: var(--space-15) 0;
		}
	}

/*** contact ***/
.contact{
	padding: var(--space-130) 0;
}
.contact .layout{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
}
.contact .img-area{
	width: 51%;
	height: 0;
	padding-bottom: 50%;
	overflow: hidden;
	position: relative;
	border-radius: 10px;
}
.contact .img-area img{
	max-width: 10000%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.contact .form-area{
	width: calc(100% - 51% - 80px);
}
.contact .form-area form{
	margin-top: var(--space-45);
}
.contact .form-area form .input-area{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.contact .form-area form .input-area .input-box,
.contact .form-area form .input-area .input-mail-box{
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	background: var(--gray04);
	border-radius: 5px;
	padding: 0 var(--space-20);
}
.contact .form-area form .input-area .input-box label,
.contact .form-area form .input-area .input-mail-box label{
	width: 75px;
	font-weight: var(--fw-700);
	color: var(--black);
	/*border-right: 1px solid var(--gray03);*/
	padding-left:var(--space-12);
	position: relative;
}
.contact .form-area form .input-area .input-box label:before,
.contact .form-area form .input-area .input-mail-box label:before{
	content: '*';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	color: var(--orange);
}
.contact .form-area form .input-area .input-box label:after,
.contact .form-area form .input-area .input-mail-box label:after{
	content: '';
	width: 1px;
	height: 14px;
	background: var(--gray03);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.contact .form-area form .input-area .input-box:last-child label:after{
	display: none;
}
.contact .form-area form .input-area .input-box input{
	width: calc(100% - 75px);
	height: 50px;
	background: var(--gray04);
	padding-left: var(--space-20);
}
.contact .form-area form .input-area .input-textarea{
	flex-direction: column;
    align-items: stretch;
	height: auto !important;
	padding: var(--space-20);
}
.contact .form-area form .input-area .input-textarea textarea{
	margin-top: var(--space-20);
}
.contact .form-area form .agree-area{
	display: flex;
    align-items: center;
    justify-content: space-between;
	margin-top: var(--space-20);
}
.contact .form-area form .agree-area .check-agree{
	display: flex;
    align-items: center;
}
.contact .form-area form .agree-area .check-agree .check{
	position: relative;
}
.contact .form-area form .agree-area .check-agree .check input{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.contact .form-area form .agree-area .check-agree .check span{
	display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--gray03);
	border-radius: 2px;
    transition: var(--transition);
    pointer-events: none;	
}
.contact .form-area form .agree-area .check-agree .check span i{
	opacity: 0;
    font-size: 0.77rem;
    color: var(--white);
    transition: var(--transition);
}
.contact .form-area form .agree-area .check-agree label{
	font-weight: var(--fw-500);
	color: var(--balck);
	margin-left: var(--space-7);
}
.contact .form-area form .agree-area .check-agree label .key{
	color: var(--red);
}
.contact .form-area form .agree-area .check-agree .privacy{
	display: flex;
	align-items:center;
	gap: 3px;
	font-size: 0.875rem;
	color: var(--gray02);
	margin-left: var(--space-15);
	transform: translateY(1px);
	transition: var(--transition);
}
.contact .form-area form .agree-area .check-agree .privacy i.arrow{
	font-size: 0.8125rem;
	font-weight: var(--fw-500);
}

/* 메일박스 */
.contact .form-area form .input-area .input-mail-box{
	height: auto;
    padding: 0;
    gap: 10px;
    background: var(--white);
}
.contact .form-area  form .input-area .input-mail-box .input-mail {
    width: calc(100% - 130px - 10px);
}
.contact form .input-area .input-mail-box .input-mail .input-text {
    display: flex;
    align-items: center;
    padding-left: var(--space-20);
    background: var(--gray04);
    border-radius: 5px;
}
.contact .form-area form .input-area .input-mail-box .input-mail .input-text .mail {
    display: flex;
    align-items: center;
    width: calc(100% - 75px);
}
.contact .form-area form .input-area .input-mail-box .input-mail .input-text .mail input {
    width: 100%;
    height: 50px;
    padding: 0 var(--space-20);
    background: var(--gray04);
}
.contact .form-area form .input-area .input-mail-box select {
    width: 130px;
    height: 50px;
    padding: 0 var(--space-10);
    background: url(/img/icon-select-arrow.svg) no-repeat right 20px center;
    background-size: 11px;
    background-color: var(--gray04);
    border-radius: 5px;
}


/* 호버효과 */
.contact .form-area form .agree-area .check-agree .privacy:hover,
.contact .form-area form .agree-area .check-agree .privacy:hover i.arrow{
	color: var(--black);
}
.contact .form-area form .agree-area .button:hover{
	background: var(--orange);
}

/* 동작효과 */
.contact .form-area form .agree-area .check-agree .check input:checked + span{
	background-color: var(--black);
	border-color: var(--black);
}
.contact .form-area form .agree-area .check-agree .check input:checked + span i{
	opacity: 1;
}

	/* @contact 미디어쿼리 */
	@media all and (max-width: 1400px){
		.contact .layout{
			gap: 70px;
		}
		.contact .img-area{
			width: 50%;
			padding-bottom: 63%;
		}
		.contact .img-area img{
			width: auto;
			height: 100%;
		}
		.contact .form-area{
			width: calc(100% - 50% - 70px);
		}
		.contact .form-area form .agree-area{
			flex-direction: column;
			align-items: flex-start;
			gap: 30px;
		}
	}
	@media all and (max-width: 1200px){
		.contact .layout{
			flex-direction: column;
			gap: 50px;
		}
		.contact .img-area {
			width: 100%;
			padding-bottom: 40%;
		}
		.contact .img-area img {
			width: 100%;
			height: auto;
			top: 5%;
		}
		.contact .form-area {
			width: 100%;
		}
		.contact .form-area form {
			margin-top: var(--space-30);
		}
		.contact .form-area form .agree-area{
			flex-direction: row;
			align-items: center;
		}
	}
	@media all and (max-width: 1000px){
		.contact{
			padding: var(--space-110) 0;
		}
	}
	@media all and (max-width: 640px){
		.contact{
			padding: var(--space-90) 0;
		}
		.contact .layout{
			gap: 45px;
		}
		.contact .img-area{
			padding-bottom: 60%;
		}
		.contact .img-area img{
			top: 25%;
		}
		.contact .form-area form .input-area .input-box{
			padding: 0 var(--space-15);
		}
		.contact .form-area form .input-area .input-box label,
		.contact .form-area form .input-area .input-mail-box label{
			width: 65px;
		}
		.contact .form-area form .input-area .input-box input{
			width: calc(100% - 65px);
			padding-left: var(--space-15);
		}
		.contact .form-area form .input-area .input-textarea{
			padding: var(--space-15);
		}
		.contact .form-area form .agree-area{
			flex-direction: column;
			align-items: flex-start;
			margin-top: var(--space-10);
		}
		.contact .form-area form .agree-area .check-agree .check input,
		.contact .form-area form .agree-area .check-agree .check span{
			width: 18px;
			height: 18px;
		}
		/* 메일박스 */
		.contact .form-area form .input-area .input-mail-box {
			flex-direction: column;
			align-items: stretch;
		}
		.contact .form-area form .input-area .input-mail-box .input-mail {
			width: 100%;
		}
		.contact .form-area form .input-area .input-mail-box .input-mail .input-text {
			padding-left: var(--space-15);
			width: 100%;
		}
		.contact .form-area form .input-area .input-mail-box .input-mail .input-text .mail {
			width: calc(100% - 65px);
		}
		.contact .form-area form .input-area .input-mail-box .input-mail .input-text .mail input {
			padding: 0 var(--space-15);
		}
		.contact .form-area form .input-area .input-mail-box select {
			background-size: 9px;
			width: 100%;
			height: 50px;
			padding: 0 var(--space-15);
		}
	}


/*** banner ***/
.banner{
	padding: var(--space-200) 0;
	text-align: center;
	background: url('/img/main-bg4.jpg') no-repeat center/cover;
}
.banner .simbol{
	width: 47px;
	margin: 0 auto;
}
.banner .title{
	font-size: 4.06rem;
	color: var(--white);
	margin-top:var(--space-25);
}
.banner .text{
	font-size: 1.125rem;
	color: var(--white);
	margin-top: var(--space-55);
}
.banner .text .emphasis{
	font-weight: var(--fw-700);
	color: var(--yellow);
}
	/* @banner 미디어쿼리 */
	@media all and (max-width: 1400px) {
		.banner .title {
			font-size: 3.75rem;
		}
	}
	@media all and (max-width: 1100px) {
		.banner .text .mobile {
			display: none;
		}
	}
	@media all and (max-width: 640px) {
		.banner .simbol{
			width: 35px;
		}
		.banner .title {
			font-size: 2.5rem;
		}
		.banner .text {
			margin-top: var(--space-35);
		}
		.banner .text .mobile {
			display: block;
		}
	}
	@media all and (max-width: 400px) {
		.banner .text .mobile {
			display: none;
		}
	}