@charset "UTF-8";

.quick2{position: fixed; right: 0px; top: 35%; z-index: 9; width: 70px; padding: 20px 0px; text-align: center; border-radius: 10px 0px 0px 10px;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 400% 400%;
		animation: gradient 6s ease infinite;
}
.quick2 a{color: #fff; font-size: 1.9rem; font-weight: 500;}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.main .swiper{height: 100%;}
.main .slide1{background: url('../img/visual1.png')no-repeat; background-size: cover; background-position: center;}
.main .slide2{background: url('../img/visual2.png')no-repeat; background-size: cover; background-position: center;}
.main .slide2 h2{max-width: 1000px;}
.main .slide2 h2 img{width: 100%;}
.main .main_text{display: flex; justify-content: center; align-items: center; height: 100%;}


.page1{background: url('../img/bg2.png')no-repeat; background-size: cover; background-position: center;}
.page1 .width{display: flex; gap: 50px 0px; align-items: center; justify-content: space-between;}
.page1 .title{text-align: center; width: 45%;}
.page1 .title h5 img{width: 100%;}
.page1 .title p{font-size: 2.5rem; font-weight: 200; color: #fff;}
.page1 .box_wrap{display: flex; gap: 30px 5%; width: 50%; flex-wrap: wrap;}
.page1 .box{width: 47%; background: #fff; position: relative; border-radius: 50%; overflow: hidden;}
.page1 .box .cover{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border: 1px solid #e6e6e6; border-radius: 50%; z-index: 10; padding: 20px; cursor: pointer; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.page1 .box .cover img{width: 100px; margin-bottom: 30px;}
.page1 .box .cover h3{font-size: 1.8rem; font-weight: 400;}
.page1 .box .cover h2{font-size: 2.4rem; font-weight: 300; margin-top: 5px;}
/* .page1 .box .cover .flipbox{position: absolute; bottom: 0; right: 0; width: 100px; background: #f67f6f6; transition: 0.4s all; left:0; margin:0 auto;} */
.page1 .box .cover .flipbox{ width: 120px; background: #e43b32; transition: 0.4s all; height: 33px; line-height: 33px; color: #fff; border-radius: 30px; margin-top: 20px;}
.page1 .box .cover .flipbox span{font-family: 'SUIT-Medium'; letter-spacing: 1px;}
/* .page1 .box .cover .flipbox::before{content: ''; position: absolute; top: 12px; right: 12px; z-index: 15; display: block; width: 80px; height: 80px; background: #061d27; border-radius: 15px; transition: 0.4s all;} */
/* .page1 .box .cover .flipbox::after{content: ''; position: absolute; top: 0; right: 0; z-index: 30; border-style: solid; border-width: 0 100px 100px 0; border-color: #f9f9f9 transparent; transition: 0.4s all; filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.1)) drop-shadow(8px -2px 8px rgba(0, 0, 0, 0.15));} */
/* .page1 .box .cover .flipbox span{position: absolute; top: 3px; right: 3px; z-index: 20; display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; font-size: 1.7rem; font-weight: 500; color: #fff; transform: rotate(45deg);} */
.page1 .box .inside{position: relative; padding: 40px 30px; min-height: 320px; display: flex; flex-direction: column; justify-content: center;}
.page1 .box .inside .intop{text-align: left;; margin-bottom: 30px; display: flex; align-items: center; gap: 10px 15px;}
.page1 .box .inside .intop img{width: 60px;}
.page1 .box .inside .intop h3{font-size: 1.8rem; font-weight: 500;}
.page1 .box .inside .intop h2{font-size: 2.3rem; font-weight: 300;}
.page1 .box .inside .intext p{font-size: 1.6rem; line-height: 130%; text-align: center;}
/* .page1 .box_wrap .box:hover .cover .flipbox::before {background: var(--color);} */
/* .page1 .box_wrap .box:hover .cover .flipbox::after {border-width: 0 120px 120px 0;} */
.page1 .box_wrap .box .cover.on {animation: coverFlip_txt 2s 0s ease-out normal 1 forwards;cursor: auto;  pointer-events: none;}
.page1 .box_wrap .box .cover.on .flipbox {transition: none;  animation: coverFlip 2s 0s ease-out normal 1 forwards;}
.page1 .box_wrap .box .cover.on .flipbox>span {transition: none;animation: coverFlip_hide 2s 0s ease-out normal 1 forwards;}
.page1 .box_wrap .box .cover.on .flipbox::before {transition: none;  animation: coverFlip_hide 2s 0s ease-out normal 1 forwards;  background: var(--color);}
.page1 .box_wrap .box .cover.on .flipbox::after {  transition: none;  animation: coverFlip_aft 2s 0s ease-out normal 1 forwards;}


/* @keyframes coverFlip{
	0% { width: 150px; height: 150px; opacity: 1; }
	30% { width: 1000px; height: 1000px; opacity: 1; }
	100% { opacity: 0; }
} */
@keyframes coverFlip_txt{
	0% { opacity: 1; }
	15% { opacity: 1; }
	30% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes coverFlip_hide{
	0% { opacity: 1; }
	15% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes coverFlip_aft{
	0% { border-width: 0 150px 150px 0; opacity: 1; }
	30% { border-width: 0 1000px 1000px 0; opacity: 1; }
	100% { opacity: 0; }
}

.page2{background: #f8f9fb;}
.page2 .po1{ width: 3.4%;}
.page2 .po1 img{width: 100%;}
.page2 .po2{width: 10%;}
.page2 .po2 img{width: 100%;;}
.page2 .title{text-align: center; margin-bottom: 80px;}
.page2 .title h6{font-size: 4.8rem; font-weight: 800; margin-top: 30px;}
.page2 .box_wrap{display: flex; gap: 30px 0.5%; margin-bottom: 60px;}
.page2 .box{width: 18%; text-align:center;}
.page2 .box span{display: block; width: 88%; margin: 0 auto;}
.page2 .box span img{width: 100%;}
.page2 .box h2{font-size: 2.3rem; font-weight: 800; margin-top: 25px; margin-bottom: 15px;}
.page2 .box p{font-size: 1.7rem; line-height: 135%;}
.page2 .info{text-align: center; margin-top: 80px;}
.page2 .info img{margin: 0 auto;}

.page3{background: url('../img/bg1.png')no-repeat; background-size: cover; background-position: center;}
.page3 .title{text-align: center; margin-bottom: 50px;}
.page3 .title h3{margin-bottom: 20px;}
.page3 .title h4{font-size: 2.6rem; margin-bottom: 10px;}
.page3 .title h2{font-size: 4.5rem; font-weight: 800;}
.page3 .swiper-grid-column>.swiper-wrapper{flex-direction: initial !important;}
.page3 .swiper-slide{margin-top: 0px !important; display: flex; gap: 20px 3%; border: 1px solid #e7e7e7; box-shadow: 0px 5px 15px rgba(0,0,0,0.15); padding: 15px; margin-bottom: 20px; align-items: center;}
.page3 .pic_lt_block li .lt_img{width: 35%; border-radius: 10px; overflow: hidden;}
.page3 .pic_lt_block li .li_text{width: 60%;}

.page4 {background: url('../img/bg3.png')no-repeat; background-size: cover; background-position: center;}
.page4 .latest_top_wr{display: flex; gap: 30px 0px;  justify-content: space-between; align-items: center;}
.page4 .latest_top_wr .la_board{width: 50%;}
.page4 .tel_wrap{position: relative; padding: 100px 50px; width: 46%;}
.page4 .tel_wrap::before{content: ''; width: 250%; height: 100%; background: url('../img/bg4.png') no-repeat; background-size: cover; background-position: center; position: absolute; right: 0; top: 0; z-index: 1;}
.page4 .tel_wrap span{position: relative; z-index: 3;;}
.page4 .tel_wrap img{width: 100%;}
.page4 .la_board .title{display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;}
.page4 .la_board .title h3{width: 80%;}
.page4 .la_board .title h3 img{width: 100%;}
.page4 .la_board .title a{font-size: 1.8rem; font-weight: 800; color: #e43b32;}


#ft{background: #000000; border-top: 1px solid #eee;}
.foot_logo{margin-bottom: 0px; padding-bottom: 0px; border-bottom: none;}
#ft .footer{display: flex; justify-content: space-between; align-items: center;}
#ft .foot_top{display: flex; align-items: center; gap: 25px 30px;}
.foot_info .text{display: flex; align-items: center; gap: 3px 10px}
.foot_info .text2{margin-top: 20px;}
.foot_info .text p{color: #fff; line-height: 140%;}
.foot_info .text span{color: #000;}
.foot_info .text a{color: #fff; display: flex; align-items: center; font-size: 1.6rem; line-height: 140%;}
.foot_info .text a i{width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fae80c; border-radius: 50%; margin-right: 5px; font-size: 22px;}
#ft .ft_tel{min-width: 300px; padding-left: 30px; text-align: left;}
#ft .ft_tel h3{font-size: 1.8rem; color: #fff;}
#ft .ft_tel a{color: #fff; font-size: 3.0rem; font-weight: bold;}

.quick{position: fixed; z-index: 3; top: 25%; right: 15px; width: 110px; text-align: center; display: flex; flex-direction: column; align-items: center;}
.quick .box{width: 100%; padding: 10px; background: #fff; box-shadow: 0px 0px 13px rgba(0,0,0,0.24); border-radius: 5px;}
.quick .box img{width: 100%;}
.quick .box2{width: 100%; padding: 25px 10px; background: #fff; box-shadow: 0px 0px 13px rgba(0,0,0,0.24); border-radius: 5px;}
.quick .box2 h3{text-align: center; font-weight: bold; font-size: 1.6rem; margin-bottom: 20px;}
.quick .box2 a{margin-top: 10px; display: block;}
.quick .box2 a img{width: 58px;}

.page5{padding-top: 200px;}
.page5 .box_wrap{display: flex; justify-content: space-between; align-items: center;}
.page5 .box_wrap:nth-child(2){flex-direction: row-reverse; margin-top: 150px; margin-bottom: 150px;}
.page5 .box_wrap .img{width: 40%; text-align: center;}
.page5 .box_wrap .text{width: 50%;}
.page5 .box_wrap .text h2{font-size: 3.6rem; margin-bottom: 20px;}
.page5 .box_wrap .text h2 b{color: var(--color)}
.page5 .box_wrap .text p{font-size: 1.8rem; line-height: 150%;}
.page5 .box_wrap .text h3{margin-bottom: 10px; font-size: 2.4rem;}
.page5 .box_wrap .text h3 i{color: var(--color); margin-right: 7px;}


.page6 .box_wrap{margin-top: 120px; display: flex; align-items: center; justify-content: space-between;}
.page6 .text h2{font-size: 3.6rem;}
.page6 .text h2 b{color: var(--color)}
.page6 .text p{font-size: 2.0rem; margin-top: 25px;}
.page6 .con_btn{width: 50%; display: flex; gap:0px 10%;}
.page6 .con_btn a{min-width: 200px; min-height: 200px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.15); overflow: hidden; position: relative;}
.page6 .con_btn a i{font-size: 7.0rem; margin-bottom: 10px;}
.page6 .con_btn a:nth-child(1){background: #fae80c;}
.page6 .con_btn a:nth-child(1) i{color: #3e3237;}
.page6 .con_btn a:nth-child(2){background: var(--color);}
.page6 .con_btn a:nth-child(2) p{color: #fff;}
.page6 .con_btn a:nth-child(2) i{color: #fff;}
.page6 .con_btn a p{font-size: 2.1rem; font-weight: 500;}
.page6 .con_btn a::after{content: ''; width: 250px; height: 250px; position: absolute; top: -100px; right: -100px; transform: rotate(45deg); background: rgba(0,0,0,0.03); transition: 0.3s all;}
.page6 .con_btn a:hover::after{top: -125px; right: -125px; background: rgba(0,0,0,0.08)}



/* 공통 반응형 */
@media all and (max-width: 1600px){
	.page1 .box .cover h2{font-size: 2.4rem;}
	.page1 .box .cover h3{font-size: 1.8rem;}
	.page1 .box .inside .intop h2{font-size: 2.1rem;}
	.page1 .box .inside .intext p{font-size: 1.5rem; letter-spacing: -0.06em;}
  .page1 .box .inside{padding: 20px 20px;}
}
@media all and (max-width: 1200px){
	.page1 .box_wrap{flex-wrap: wrap; width: 100%; gap: 20px 2%}
	.page1 .box{width: 49%; border-radius: 10px;}
	.page1 .box .inside{min-height: 280px}
	.foot_info .text{flex-wrap: wrap;}
	.foot_logo img{width: 180px;}
	.page5 .box_wrap .img img{width: 80%;}
  .page1 .width{flex-direction: column;}
  .page1 .box .cover{border-radius: 10px;}
}
@media all and (max-width: 1024px){
	.main{background: url('../img/mvisual.png')no-repeat; background-size: cover; background-position: center;}
	.main .text h2{font-size: 3.0rem;}
	.main .text p{font-size: 2.0rem; position: relative; z-index: 3;}
	.main span{width: 100%; z-index: 1;}
	.main span img{width: 100%; z-index: 1; position: relative;}
	.page1 .title h3 img{width: 200px;}
	.quick{display: none;}
	.main .main_text{position: relative; z-index: 5;}
	.page1 .title h2{font-size: 2.2rem;}
	.page1 .title p{font-size: 1.8rem;}
	.page2 .info .info_title{font-size: 2.4rem;}
	.page2 .info .text{padding: 20px 30px;}
	.page2 .info .text li p, .page2 .info .text li span{font-size: 1.8rem;}
	.page2 .info .text h4{font-size: 1.6rem;}
	.page2 .box p{font-size: 1.6rem;}
	.page2 .title h3 img{width: 75px;}
	.page2 .title h6{font-size: 3.2rem; margin-top: 15px;}
	.page3 .title h3 img{width: 180px;}
	.page3 .title h4{font-size: 2.0rem;}
	.page3 .title h2{font-size: 3.2rem;}
	.page4 .title h3 img{width: 70px;}
	.page4 .title h2{font-size: 3.2rem;}
	.page5{padding-top: 140px;}
	.page5 .box_wrap .text h2{font-size: 2.6rem;}
  .main .slide1 img{width: 95%;}
  .main .slide1 h2{text-align: center;}
  .main .slide2 img{width: 85%;}
  .main .slide2 h2{text-align: center;}
  .page3 .title h6 img{width: 85%;}
  .page2 .title h6 img{width: 85%;}
  .page2 .info img{width: 90%;}
  #ft .foot_top{flex-direction: column;}
  .board_title{padding-top: 0px;}
  .page5 .box_wrap .text h3{font-size: 2.1rem;}
  .page3 .title{padding-top: 80px;}
  .pic_lt_block{padding-bottom: 80px;}
  .page1 .title{padding-top: 80px;}
  .page1 .box_wrap{padding-bottom: 80px;}
  .page2 .title{padding-top: 80px;}
  .page2 .info{padding-bottom: 80px;}
}
@media all and (max-width: 900px){
	/* .pic_gallery{flex-wrap: wrap; gap: 40px 2.5%;} */
	/* .pic_lt ul li{width: 48.5%;} */
	.pic_list .lt_wrap{width: 100%;}
	.page6 .box_wrap{flex-direction: column;}
	.page6 .box_wrap .text{width: 100%; margin-bottom: 35px;}
	.page6 .con_btn{width: 100%; gap: 0px 5%;}
  .page4 .latest_top_wr{flex-direction: column; padding: 80px 0px; gap: 50px 0px}
  .page4 .latest_top_wr .la_board{width: 100%;}
  .page4 .tel_wrap{width: 100%;}
  .page4 .tel_wrap::before{width: 100%;}
  #ft .footer{flex-direction: column;}
  .foot_info .text{flex-direction: column;}
  #ft .ft_tel{padding-left: 0px; margin-top: 25px; text-align: center;}
  #bo_gall .gall_li{width: 50%;}
  .page4 .la_board .title{margin-bottom: 30px;}
}
@media all and (max-width: 850px){
	.page2 .box{width: 24%;}
	.page2 .box_wrap{gap:30px 1.5%;}
	.page2 .box h2{margin-top: 10px;}
	.page2 .box h6{font-size: 1.8rem; font-weight: 800; color: var(--color); margin-top: 15px;}
	#ft .footer{flex-direction:column;}
	#ft .ft_tel{min-width: initial; width: 100%; text-align: center; padding-left: 0px; border-left: 0px; padding-top: 25px; border-top: 1px solid #eee;}
	#ft .foot_top{flex-direction: column; padding-bottom: 25px;}
	.foot_info .text{flex-direction: column; gap: 3px 0px;}
	.foot_info .text span{display: none;}
	.pic_lt_block li .last_title{font-size: 2.2rem;}
	.lt_content p{font-size: 1.6rem;}
	.page5 .box_wrap{flex-direction: column;}
	.page5 .box_wrap .img{width: 100%; margin-bottom: 35px;}
	.page5 .box_wrap .text{width: 100%;}
	.page5 .box_wrap:nth-child(2){flex-direction: column;}
}
@media all and (max-width: 768px){
	.page1 .box{width: 100%;}
	.main .main_text img{width: 90%;}
	.main .text{width: 100%;}
	.main span{bottom: -27px;}
	.main .text h2{font-size: 2.4rem;}
	.main .text p{font-size: 1.6rem;}
	.page2 .box_wrap{flex-wrap: wrap;}
	.page2 .box{width: 49%;}
	.page2 .info{flex-direction: column;}
	.page2 .info .info_title{width: 100%; border-bottom: 1px solid #b6b6b6; padding: 15px 0px;}
	.page2 .info .text{border-left: 0px;}
	.page2 .info .info_title img{margin-bottom: 15px; width: 45px;}
	.page6 .con_btn a{min-width: 160px; min-height: 160px;}
	.page6 .con_btn a p{font-size: 1.8rem;}
	.page6 .con_btn a::after{width: 200px; height: 200px; display: none;}
	.page6 .con_btn a i{font-size: 6.0rem;}
	.page6 .text h2{font-size: 2.6rem; text-align: center;}
	.page6 .text p{text-align: center;}
	.page6 .con_btn{justify-content: center;}
	.page6 .box_wrap{margin-top: 60px;}
	.bo_tit a{white-space: nowrap; text-overflow: ellipsis; width: 180px; overflow: hidden;}
	.tbl_head01 thead th{font-size: 16px;}
	.bo_cate_link{width: 60px; height: 26px; line-height: 26px;}
  .page3 .swiper-slide{flex-direction: column;}
  .page3 .pic_lt_block li .lt_img{width: 100%;}
  .page3 .pic_lt_block li .li_text{width: 100%;}
  .page1 .title{width: 60%;}
  .page2 .box p br{display: none;}
  .page2 .info img{width: 90%; margin: 0 auto;}
}
@media all and (max-width: 650px){}