/************************** main **************************/
#header{ background: #fff;}

/* MAIN VISUAL */

.mainVisual{ width: 100%; height: 1429rem; position: relative; color: #fff;}
.mainVisual .mainBg{}
.mainVisual .mainBg .swiper-slide-active > img{ animation: zoom-in 5s forwards}  

@keyframes zoom-in{
	0%{ transform:scale(1.2);}
	100%{ transform:scale(1);}
}


.mainVisual .container{z-index: 1; overflow: hidden;}
.mainVisual .mainTit{ font-weight: 700; padding-top: 342rem; line-height: 1.13; display: flex; align-items: center;}
.mainVisual .mainTit .txt1{ font-size: 120rem;}
.mainVisual .mainTit .txt2{ font-size: 100rem; margin-left: 40rem;}

.mainVisual .mainTxt{ position: absolute; left: 162rem; bottom: 350rem; }
/* .mainVisual .mainTxt::after{ content: ''; width: 578.6rem; height: 97rem; background: url(/images/main/mainTxtDeco.png)no-repeat right top / contain; position: absolute; right: 0; top: 0%;} */
.mainVisual .mainTxt .txt1{ font-size: 14rem; font-weight: 500;}
.mainVisual .mainTxt .txt2{ font-size: 70rem; font-weight: 700; margin: 0 0 50rem;}
.mainVisual .mainTxt .txt3{ opacity: .8;}
.mainVisual .mainTxt a{ margin-top: 66rem;}

.mainVisual .paginWrap{ position: absolute; right: 162rem; bottom: 105rem;}
.mainVisual .paginWrap .mainPagin{ position: static; text-align: left;}
.mainVisual .paginWrap .mainPagin .swiper-pagination-bullet{ width: 10rem; height: 10rem; background: #fff; margin: 0 15rem 20rem 0; opacity: .5;}
.mainVisual .paginWrap .mainPagin .swiper-pagination-bullet-active{ opacity: 1;}

.mainVisual .paginWrap p{ line-height: 1.5;}
.mainVisual .paginWrap p strong{ font-weight: 700;}


/* MAIN CONTENTS */

.mainCon{ padding: 80rem 0 110rem; margin-bottom: 80rem; background: #F5F5F5;}

.mainConTit{ font-size: 60rem; font-weight: 700; text-align: center; margin-bottom: 40rem;}
.mainCon .mainConTit span{ display: block; font-size: 17rem; font-weight: 500; color: #8d8d8d; margin-bottom: 10rem;}


.mainCon .con.type1{}
.mainCon .con .banner{ height: 444rem; border-radius: 12rem; position: relative; overflow: hidden;}
.mainCon .con .banner .txtBox{ position: absolute; left: 60rem; bottom: 60rem;}
.mainCon .con .banner .txtBox .txt1{ font-size: 70rem; font-weight: 700; color: #fff; line-height: 1.1;}
.mainCon .con .banner .txtBox .txt3 + .txt1{ font-size: 40rem; line-height: 1.4;}
.mainCon .con .banner .txtBox .txt2{ color: #fff; opacity: .5; margin-top: 21rem;}
.mainCon .con .banner .txtBox .txt3{ margin-bottom: 5rem; color: #cc092f; font-weight: 700;}
.mainCon .con.type1 ul{ display: flex; justify-content: space-between; margin: 33rem 0;}
.mainCon .con.type1 ul li{width: 100%; height: 460rem; background: #fff; border-radius: 12rem; margin-right: 32rem; overflow: hidden; flex-shrink: unset;}
.mainCon .con.type1 ul li:last-child{ margin-right: 0;}
.mainCon .con.type1 ul li a{display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 50rem 60rem; position: relative; color: #505050;}
.mainCon .con.type1 ul li a img{ height: 258rem; position: absolute; right: 0; top: 0; transition: .5s ease;}
.mainCon .con.type1 ul li a:hover img{ right: -30rem;}
.mainCon .con.type1 ul li a .txt1{ font-size: 15rem;}
.mainCon .con.type1 ul li a .txtBox{ padding-bottom: 33rem; position: relative;}
.mainCon .con.type1 ul li a .txtBox::after{ content: ''; width: 30rem; height: 3rem; background: #e31837; position: absolute; left: 0; bottom: 0; transition: .5s ease;}
.mainCon .con.type1 ul li a:hover .txtBox::after{ width: 50rem;}
.mainCon .con.type1 ul li a .txtBox .tit{ font-size: 30rem; font-weight: 700; margin-bottom: 10rem; color: #000; line-height: 1.2;}
.mainCon .con.type1 ul li a .txtBox .txt{ font-size: 18rem;}

.mainCon .con.type2{}
.mainCon .con.type2 .banner{ height: 301rem;}
.mainCon .con.type2 .banner a img{ transition: .3s ease;}
.mainCon .con.type2 .banner a:hover img{ transform: scale(1.2);}
.mainCon .con.type2 .banner.half{ display: inline-block; width: calc( 50% - 24.1rem ); margin-bottom: 33rem; margin-right: 42rem;}
.mainCon .con.type2 .banner .txtBox .txt1{font-size: 40rem;}
.mainCon .con.type2 .banner .txtBox{ bottom: 50rem;}


/* MAIN CONTENTS : 2 */

.mainCon2{}
.mainCon2 .mainEvent{ display: flex; align-items: center; padding-left: 59rem; position: relative; width: 100%; height: 389rem; margin-bottom: 80rem; overflow: hidden; border-radius: 12rem;}
.mainCon2 .mainEvent img{ transition: .3s ease;}
.mainCon2 .mainEvent:hover img{ transform: scale(1.2);}

.mainCon2 .mainEvent .txtBox{ z-index: 1;color: #fff;}
.mainCon2 .mainEvent .txtBox p{ font-size: 40rem; font-weight: 700;}
.mainCon2 .mainEvent .txtBox a{ margin-top: 50rem;}

.mainCon2 .mainService{ display: flex; margin-bottom: 184rem;}
.mainCon2 .mainService li{ width: 100%; background:#F9F9F9 url(/images/main/serviceCon1.png)no-repeat right 60rem center / 52rem; border-radius: 12rem; padding: 44rem 59rem;}
.mainCon2 .mainService li:last-child{ background-image: url(/images/main/serviceCon2.png); margin-left: 42rem;}
.mainCon2 .mainService li .txt1{ font-size: 30rem; font-weight: 500; color: #0c0c0c;}
.mainCon2 .mainService li .txt2{ margin: 10rem 0 24rem; color: #8d8d8d;}
.mainCon2 .mainService li a{ display: inline-block; font-size: 14rem; text-decoration: underline; position: relative;}
.mainCon2 .mainService li a::after{ content: '>'; position: absolute; right: -15rem;}




@media screen and ( min-width:768px){
	.mainCon .con.type1 ul{ transform:none !important;}
}	


@media screen and ( max-width:767px){

	/************************** main **************************/

	/* MAIN VISUAL */

	.mainVisual{ height: auto; padding-bottom: 35px;}
	.mainVisual .container{ height: auto; position: relative;}
	.mainVisual .mainTit{ padding-top: 95px; display: block;}
	.mainVisual .mainTit .txt1{ font-size: 45px;}
	.mainVisual .mainTit .txt2{ font-size: 40px; margin-left: 49px;}

	.mainVisual .mainTxt{ position: relative; bottom: auto; width: 100%; left:0; padding: 50px 0 0 0; margin-top: 95px;}
	/* .mainVisual .mainTxt::after{ width: 334px; height: 56px; right: 0; transform: translateX(50%);} */
	.mainVisual .mainTxt .txt1{ font-size: 10px;}
	.mainVisual .mainTxt .txt2{ font-size: 25px; margin: 5px 0 25px;}
	.mainVisual .mainTxt .txt3{ font-size:14px;}
	.mainVisual .mainTxt a{ margin-top: 40px;}

	.mainVisual .paginWrap{ position: static; margin-top: 94px;}
	.mainVisual .paginWrap .mainPagin .swiper-pagination-bullet{ width: 10px; height: 10px; margin: 0 15px 20px 0;}

	.mainVisual .paginWrap p{ font-size:14px;}


	/* MAIN CONTENTS */
	

	.mainCon{ padding: 50px 0 45px; margin-bottom: 40px;}

	.mainConTit{ font-size: 35px; margin-bottom: 30px;}
	.mainCon .mainConTit span{ font-size: 16px; margin-bottom: 0;}

	.mainCon .con .banner{ height: 200px; border-radius: 12px;}
	.mainCon .con .banner .txtBox{ left: 20px; bottom: 40px;}
	.mainCon .con .banner .txtBox .txt1{ font-size: 25px;}
	.mainCon .con .banner .txtBox .txt3 + .txt1{ font-size: 20px;}
	.mainCon .con .banner .txtBox .txt2{ margin-top: 10px; font-size:14px;}
	.mainCon .con .banner .txtBox .txt3{ margin-bottom: 5px; font-size: 14px;}
	.mainCon .con.type1 .mainConsld{ margin: 30px 0 50px; border-radius: 12px;}
	.mainCon .con.type1 ul{ justify-content: inherit; margin: 0 0 25px;}
	.mainCon .con.type1 ul li{ height: 270px; border-radius: 12px; margin-right: 0; flex-shrink: 0;}
	.mainCon .con.type1 ul li a{ padding: 29px 20px;}
	.mainCon .con.type1 ul li a img{ height: auto; transform: scale(.7); transform-origin: right top;}
	.mainCon .con.type1 ul li a:hover img{ right: -30px;}
	.mainCon .con.type1 ul li a .txt1{ font-size: 12px;}
	.mainCon .con.type1 ul li a .txtBox{ padding-bottom: 27px;}
	.mainCon .con.type1 ul li a .txtBox::after{ width: 18px; height: 3px;}
	.mainCon .con.type1 ul li a:hover .txtBox::after{ width: 30px;}
	.mainCon .con.type1 ul li a .txtBox .tit{ font-size: 20px; margin-bottom: 7px;}
	.mainCon .con.type1 ul li a .txtBox .txt{ font-size: 14px;}
	.mainCon .con.type1 .mainConPagin{ text-align: center;}
	.mainCon .con.type1 .mainConPagin .swiper-pagination-bullet{ width: 10px; height: 10px; margin: 0 7.5px; background: #c5c5c5; opacity: .5;}
	.mainCon .con.type1 .mainConPagin .swiper-pagination-bullet-active{ background: #686868; opacity: 1;}

	.mainCon .con.type2 .banner{ height: 200px;}
	.mainCon .con.type2 .banner.half{ display: block; width: 100%; margin-bottom: 20px; margin-right: 0;}
	.mainCon .con.type2 .banner .txtBox .txt1{font-size: 25px;}
	.mainCon .con.type2 .banner .txtBox{ bottom: 50rem;}


	/* MAIN CONTENTS : 2 */

	.mainCon2 .mainEvent{ padding:26px 20px; height: auto; margin-bottom: 50px; border-radius: 12px;}
	.mainCon2 .mainEvent .txtBox p{ font-size: 22px;}
	.mainCon2 .mainEvent .txtBox a{ margin-top: 25px;}

	.mainCon2 .mainService{ display: block; margin-bottom: 60px;}
	.mainCon2 .mainService li{ background-position: right 34px top 25px; background-size: 52px; padding: 34px 20px; margin-bottom: 20px; border-radius: 12px;}
	.mainCon2 .mainService li:last-child{ margin-left: 0;}
	.mainCon2 .mainService li .txt1{ font-size: 20px; width: calc(100% - 72px);}
	.mainCon2 .mainService li .txt2{ margin: 23px 0 10px; font-size: 14px;}
	.mainCon2 .mainService li a{ font-size: 14px;}
	.mainCon2 .mainService li a::after{ right: -15px;}

}