/* section */
section{padding: 6vw 0;}
section >*{z-index:5}
section .title_box .title_box{position:relative;padding-left:110px;font-style:normal;font-size:20px;color:var(--complement);letter-spacing:2px;font-family:'Lato',sans-serif;font-weight:500;text-transform:uppercase}
section .title_box .title_box::before {content: "";display: block;width: 88px;height: 1px;background: var(--complement);position: absolute;top: 10px;left: 2px;}
section .title_box .text{font-weight: 700;font-size: 42px;color: var(--secondary);position: relative;font-family: 'Lato', sans-serif;line-height: 160%;text-transform: uppercase;margin: 20px 0;letter-spacing: 2px;}
section .title_box .page_title{font-weight:600;font-size: 28px;color:var(--complement);position:relative;font-family:'Lato',sans-serif;line-height:110%;text-transform:uppercase;margin-bottom:30px;display: flex;align-items: stretch;letter-spacing: 3px;}
section .title_box .page_title svg{width:31px;height:28px;fill:var(--complement);margin-right:10px}
section .title_box p{line-height: 130%;letter-spacing: 0.5px;font-weight: 400;font-size: 20px;color: var(--complement);position: relative;}
section.bg_box{background:no-repeat 50% / cover;padding: 3vw 0 3vw 0;}
.more_btn{margin-top:0px}
.more_btn a{position:relative;overflow:hidden;width: 110px;padding: 10px 50px 10px 30px;display:inline-block;border-radius: 100px;}
.more_btn font{font-size: 14px;position:relative;-webkit-writing-mode:inherit;-ms-writing-mode:inherit;writing-mode:inherit;color:#fff;text-transform: uppercase;text-align: left;font-weight: 500;letter-spacing: 1px;font-family: 'Lato', sans-serif;}
.more_btn span::before{content:"";position:absolute;top:calc(50% - 0px);right:25px;width:18px;height:2px;background-color:currentColor;background:#fff}
.more_btn span::after{content:"";position:absolute;top:calc(50% - 5px);right:25px;width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid  #fff;transform:rotate(45deg)}
.more_btn a:before{content:"";height:100%;width:100%;display:block;position:absolute;bottom:0;left:0;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background: linear-gradient(to right, #b4b4b4 0, #b4b4b4 60%, #b4b4b4 110%);}

header #webmenu{opacity:0}
header.scroll #webmenu{opacity:1}

.sideMenuBox{width:320px;height:460px;background:url(/images/39/img_bn_M_BG_01.png) #ffffff 50% 100%  no-repeat;border-radius:200px 200px 60px 60px;padding:100px 20px 80px 20px;position:absolute;bottom:0;z-index:100;opacity:1;top:47%;left:50%;transform:translate(-50%,-50%);-webkit-transition:all 0.9s 0.5s ease-in-out;transition:all 0.9s 0.5s ease-in-out}
.sideMenuBox.scroll{opacity:0;-webkit-transition-delay:0s;transition-delay:0s;top:40%}
.sideMenuBox.hide{left:-140px}
.sideMenuBox .sideLogo{max-width:220px;margin:0 auto}
.sideMenuBox .sideLogo .side_title{color:#78562a;text-align:center;display:flex;flex-direction:column;margin-top:30px;font-weight:500;letter-spacing:2px}
.sideMenuBox .sideLogo:before{content:'';position:absolute;height:248px;width:410px;top:0;left:50%;transform:translate(-50%,-10%);background:url(/images/39/img_bn_M_BG_top_01.png) no-repeat 50% 50%;background-size:cover;z-index:2}
.sideMenuBox .slideMenuTrigger{all:unset;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;padding-top:30px;cursor:pointer}
.sideMenuBox .telBox{padding:40px 0 0px}
.sideMenuBox .telBox a{display:flex;flex-direction:column;align-items:center}
.sideMenuBox .telBox .txt .name{color:#595656;font-size:18px;letter-spacing:6px}
.sideMenuBox .number{color:#78562a;font-size:30px;font-family:'Lato',sans-serif;display:flex;align-items:center}
.sideMenuBox .telBox .number svg{width:24px;height:24px;fill:#78562a;margin-right:10px}
.sideMenuBox #webmenu nav ul{display:flex;justify-content:center}
.sideMenuBox #webmenu nav ul li:first-child{border-left:1px solid rgb(157 157 157 / 20%)}
.sideMenuBox #webmenu nav ul li{border-right:1px solid rgb(157 157 157 / 20%);padding:0 10px}
.sideMenuBox #webmenu nav ul li:hover{transform:translateY(-10%)}
.sideMenuBox #webmenu nav ul li a svg{width:30px;height:20px;fill:#9cbc97;margin-bottom:10px}
.sideMenuBox #webmenu nav ul li a{writing-mode:vertical-lr;display:flex;flex-direction:row;align-items:center;font-size:18px;letter-spacing:8px;color:#4a4a4a}

/* serviceArea */
.serviceArea{background-image:url(/images/39/img_service_BG.png);background-size:auto;background-position:50% 90%;background-repeat:no-repeat;padding:7vw 0;position:revert}
.serviceArea .textBox{display:grid;grid-template-columns:1fr 460px;gap:10px 20px;align-items:center}
.serviceArea .textBox .subtitle{position:absolute;right:-150px;top:-90px}
.serviceArea .righttext{font-size:19px;color:#54463b;letter-spacing:2px;z-index:10}
.serviceArea .wrap{max-width:100%;overflow-x:clip}
.serviceArea .serviceCircle{position:relative;max-width:760px;margin:0 auto}
.serviceArea .inside{position:relative}
.serviceArea .inside .serviceImg{position:relative;top:0px;left:0;display:block;width:100%;height:100%;pointer-events:none}
.serviceArea .moreBtn3{position:absolute;bottom:0;left:14%;z-index:20}
.serviceArea .moreBtn3 a{width:100px;height:100px;background-color:#724f37;padding:30px;border-radius:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.serviceArea .moreBtn3 a:hover svg{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:.2}
.serviceArea .moreBtn3 a:hover{background-color:#5a5757}
.serviceArea .moreBtn3 a span{font-size:14px;color:#fff;font-family:'Lato',sans-serif;margin-bottom:10px}
.serviceArea .moreBtn3 a svg{width:30px;height:20px;fill:#fff}
.serviceArea .inside .serviceImg .dashCircle{-webkit-user-select:none;user-select:none;overflow:hidden;width:68%;margin:auto}
.serviceArea .inside .serviceImg .deliciousMeet{width:100%;height:100%}
@keyframes rotate{0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
.serviceArea .inside .serviceImg .dashCircle img{width:100%;display:block}
.serviceArea .inside .serviceImg .sloganTw{top:60%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:1;width:100%;height:100%}
.serviceArea .inside .serviceImg .sloganTw img{margin:0 auto}
.serviceArea .inside .serviceImg .deliciousMeet{left:0%;right:23%;top:59%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:block;margin:0 auto;padding:0;z-index:-10;width:100%;height:100%}
.serviceArea .inside .serviceImg .deliciousMeet img{width:100%}
.serviceArea .inside .textBox{position:absolute;top:58%;display:block;width:100%}
.serviceArea .inside .titleBox{margin-bottom:10px}
.serviceArea .inside .titleBox .subtitle{margin-bottom:210px}
.serviceArea .inside .titleBox .subtitle span{position:absolute;background:linear-gradient(to top,#dbba79 50%,#b48427 100%);background-size:cover;background-repeat:no-repeat;width:5px;height:120px;bottom:-20px;left:50.1%;transform:translate(-50%,100%);overflow:hidden}
.serviceArea .inside .titleBox .subtitle span::after{content:"";position:absolute;top:-10px;right:0;z-index:1;width:5px;height:40px;background:linear-gradient(to top,#e6b96270 50%,#bc8f38 100%);background-size:cover;background-repeat:no-repeat;animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite;-webkit-animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite}
@keyframes scrollarrow1{0%{transform:translateY(-150%)}
50%{transform:translateY(0%)}
to{transform:translateY(500%)}
}@-webkit-keyframes scrollarrow1{0%{-webkit-transform:translateY(-150%)}
50%{-webkit-transform:translateY(0%)}
to{-webkit-transform:translateY(500%)}
}
.serviceArea .inside .subtitle img{display:block;margin:0 auto}
.serviceArea .outside .serviceStep{position:absolute;top:0;display:block;width:100%;height:100%}
.serviceArea .inside .titleBox .title{font-weight:bold;font-size:38px;letter-spacing:5px;color:#2b2b2b;text-align:center;margin:-24px 0 0 0}
.serviceArea .inside .titleBox .decoTitle{color:#82a2a2;font-size:120px;line-height:60%;text-transform:uppercase;font-family:"Cormorant Infant",serif;text-align:center;opacity:.3;letter-spacing:5px}
.serviceArea .outside .item{display:block}
.serviceArea .outside .circleBox{position:relative;z-index:10;display:inline-block}
.serviceArea .outside .item:hover .circleBox span{top:48%;width:140px;height:140px}
.serviceArea .outside .item:hover .circleBox .circle{width:100px;height:100px}
.serviceArea .outside .item:hover .circleBox .Img{opacity:1}
.serviceArea .outside .circleBox span{position:absolute;top:60%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:20px;height:20px;width:110px;height:110px;border-radius:100%;background:#b0c9ac;opacity:0.5}
.serviceArea .outside .stepList .stepItem.move:nth-of-type(2) .textBox .stepTitle,.serviceArea .outside .stepList .stepItem.move:nth-of-type(4) .textBox .stepTitle{color:#67bec2}
.serviceArea .outside .stepList .stepItem.move:nth-of-type(2) .circleBox span,.serviceArea .outside .stepList .stepItem.move:nth-of-type(4) .circleBox span{background:#b9e5e7}
.serviceArea .outside .circleBox .circle{position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:inline-block;width:100px;height:100px;border-radius:100%;background:#fff}
.serviceArea .outside .circleBox .Img{position:absolute;top:50%;z-index:2;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:50px;height:50px;opacity:1}
.serviceArea .outside .circleBox .Img img{margin:0 auto;display:block;width:100%;aspect-ratio:1/1;object-fit:contain}
.serviceArea .outside .textBox{position:absolute;top:50%;right:95px;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:200px;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:end;align-items:flex-end}
.serviceArea .outside .textBox .stepTitle{font-size:22px;color:#6b8767;letter-spacing:1px;font-weight:600;letter-spacing:2px}
.serviceArea .outside .textBox .stepText{color:#54463b;text-align:end;letter-spacing:1px;font-size:17px;font-weight:500}

/* fly-could */
#fly-could{transition:unset;-webkit-transition:unset;-moz-transition:unset;-o-transition:unset;-ms-transition:unset}
.fly-out{position:absolute;z-index:9;width: 295px;height: 295px;bottom: 300px;right: -100px;}
.fly-out img{-webkit-animation:butterfly 4s -2.8s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite;animation:butterfly 4s -2.8s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite}
.fly-out02{position:absolute;z-index:13;width: 274px;height: 170px;bottom: 80px;left: -10%;}
.fly-out02 img{-webkit-animation:butterfly  8s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite;animation:butterfly 8s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite}
.fly-out03{position:absolute;z-index:9;width: 190px;height: 178px;bottom: -26%;right: 47%;}
.fly-out03 img{-webkit-animation: butterfly  6s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite;animation: butterfly 6s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite;}
.fly-out04{position:absolute;z-index:10;width:45px;height:38px;top:70px;right:170px}
.fly-out04 img{-webkit-animation: butterfly  12s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite;animation: butterfly 12s -4s forwards cubic-bezier(0.45,0.05,0.55,0.95) infinite;}
#fly-could img,#fly-could02 img,#fly-could03 img,#fly-could04 img,#fly-could05 img{width:auto;height:auto;transition:unset;-webkit-transition:unset;-moz-transition:unset;-o-transition:unset;-ms-transition:unset}
@-webkit-keyframes butterfly{0%,32%,64%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
16%,48%,80%{-webkit-transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg);transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg)}
}
@keyframes butterfly{0%,32%,64%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
16%,48%,80%{-webkit-transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg);transform:translate(5px,-5px) scaleX(0.88) rotateY(20deg)}
}


/* mainArea */
#mainArea{background-color: #f8f6f3;position:relative}

/* photo_area */
#photo_area {padding:20px 0;}
#photo_area .track{width:100vw;max-width:100%;overflow:hidden;white-space:nowrap}
#photo_area .track p{animation: marquee 100s linear infinite;display: flex;}
#photo_area .track p img{aspect-ratio: 1 / 1;object-fit: cover;margin: 0 -20px;width: 570px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* about_area */
#wrap{position:relative}
#about_area{padding:2vw 0;position:relative}
@keyframes circle{0%{transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0)}
100%{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg)}
}
#about_area::after{content:'';position:absolute;height:100%;width:100%;bottom:-180px;right:0;background-image:url(/images/39/img-ab-04.png);background-repeat:no-repeat;background-size:cover;opacity:1;z-index:3}
#about_area .aboutArea .textBox{display:grid;grid-template-columns:1fr 600px;gap: 20px;margin-bottom:100px}
#about_area .aboutArea .content_box{padding:20px 40px;color:#3a2618;letter-spacing:0px;line-height:190%}
#about_area .areaTitle .title_box h2{margin-bottom:20px;color:var(--white);text-align:center;font-size:72px}
#about_area .areaTitle .title_box p{font-size:18px;color:var(--white);text-align:center;width:600px;margin:auto;line-height:170%;position:relative;padding-top:30px;margin-top:30px}
#about_area .areaTitle .title_box p:before{content:"";width:80px;height:1px;background:#ffffff70;display:block;position:absolute;top:0px;left:50%;transform:translate(-50%,-50%)}
#about_area .about_logo{text-align:center;margin-top:60px}
#about_area .about_icon *{transition:unset;-webkit-transition:unset}
#about_area .title_box .text{word-spacing:100vw;letter-spacing:5px}
#about_area .title_box p{color:#3a2618;word-spacing:100vw;letter-spacing:2px;line-height:170%;margin-top:50px}
#about_area .schedule_box{background-color:#fff;padding:20px 50px;border-radius:30px}
#about_area .schedule_box .item{display:grid;grid-template-columns:130px 1fr;gap:20px 60px;align-items: start;}
#about_area .schedule_box .item .noteBox{display:flex;justify-content:space-around;width:270px;letter-spacing:5px;margin-bottom:10px}
#about_area .schedule_box .ttll{background-color:#f7e7d2;display:flex;justify-content:center;gap:8px}
#about_area .schedule_box .txt{display:flex;flex-direction:column;align-items:flex-start;align-content:space-around}
#about_area .schedule_box .txt font{font-family:'Lato',sans-serif;font-size:20px;color:#787878}
#about_area .schedule_box .txt font span{margin:0 20px}
#about_area .aboutProtectArea{display:grid;grid-template-columns:440px 1fr 330px;gap:20px 20px}
#about_area .aboutProtectArea .areaTitle{display:flex;flex-direction:column;align-items:center;margin-right:70px;margin-top:50px}
#about_area .aboutProtectArea .areaTitle .areaTitle_box{position:revert}
#about_area .aboutProtectArea .areaTitle_box h2:before{content:'';position:absolute;height:17px;width:23px;top:-30px;left:-20px;background-image:url(/images/39/img-ab-icon-l.png);background-repeat:no-repeat;background-size:cover}
#about_area .aboutProtectArea .areaTitle_box h2:after{content:'';position:absolute;height:17px;width:23px;bottom:-30px;right:-20px;background-image:url(/images/39/img-ab-icon-r.png);background-repeat:no-repeat;background-size:cover}
#about_area .aboutProtectArea .areaTitle .text{text-align:center;line-height:200%}
#about_area .aboutProtectArea .areaTitle_box h2{text-align:center;font-size: 27px;color:#724f37;font-weight:400;letter-spacing:3px;position:relative}
#about_area .aboutProtectArea .areaTitle_box p{text-align:center;margin:30px}
#about_area .aboutProtectArea .bottom{margin-top:130px}
#about_area .about_icon{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1}
.serviceArea .textBox{
    grid-template-columns: 1fr;
    margin-bottom: 50px;
}

/* news_area */
#news_area{padding:3vw 0 8vw 0;position:relative}
#news_area:before{position:absolute;display:block;top:0;content:"";background-image:url(/images/39/img-ab-05.png);background-repeat:no-repeat;background-size:contain;z-index:1;height:740px;width:740px;left:0}
#news_area::after{content:"";display:block;position:absolute;background-image:url(/images/39/img-ab-06.png);background-repeat:no-repeat;background-size:contain;height:363px;width:363px;bottom:-200px;right:0;z-index:1}
#news_area .title_box .title_box{color:var(--secondary)}
#news_area .title_box .page_title{margin-top:20px}
#news_area .title_box .title_box::before{background:var(--secondary)}
#news_area #imglist{display:grid;grid-template-columns: 55% 35%;gap: 80px;width:100%;align-items:end;margin-top:70px}
#news_area #imglist .left  ul{-webkit-box-shadow:10px 20px 55px 0px rgba(0,0,0,0.15);box-shadow:10px 20px 55px 0px rgba(0,0,0,0.15);background-color: #fff;}
#news_area #imglist .left li{background-color:#fff}
#news_area #imglist .left li .leftItem{display:grid;grid-template-columns:400px 1fr;gap:0px}
#news_area .right{position:relative}
#news_area li .img_scale img{aspect-ratio:1 / 1;width:100%}
#news_area .img_box li .item{padding: 50px 30px;gap:20px;display:flex;flex-direction:column;justify-content:space-between}
#news_area .img_box li .item .info_box .time{display:flex;flex-direction:column;align-items:center;width:50px;color:var(--secondary);font-family:'Lato',sans-serif;margin-bottom:30px}
#news_area .img_box li .item .info_box .time b{font-size:40px;font-family:'Lato',sans-serif;font-weight:400;color:var(--secondary);line-height:90%}
#news_area li .item .Txt h3{color:#54463b;font-size:20px;letter-spacing:1px;margin-bottom:10px;-webkit-line-clamp:2;height:auto;font-weight:500}
#news_area li .item .Txt article{color:#848484;font-size:18px}
#news_area .img_nav li .item .Txt h3{-webkit-line-clamp:1;height:auto;margin-bottom:20px;font-size:19px}
#news_area .img_nav li .row{padding:0 15px}
#news_area .img_nav li{border-bottom:1px solid #dddddd;margin-bottom:30px}
#news_area .img_nav li .info_box{margin-bottom:5px}
#news_area .img_nav li .info_box .Ntxt{background:#e5e4e1;padding:2px 18px;border-radius:100px}
#news_area .img_nav li .info_box .time{font-weight:500;font-size:14px;color:#666666;margin-right:20px;letter-spacing:.5px;font-family:'Lato',sans-serif}
#imglist .img_nav{width:100%;right:0}
#imglist .img_nav .img_show{margin:0 10px 0}
#imglist .img_nav img{width:140px;aspect-ratio:4 / 3;object-fit:cover}
.newsbtn{display:flex;justify-content:space-between;align-items:center;position:absolute;top:60px;right: 40px;}
#news_prev{-webkit-transform:scaleX(-1);transform:scaleX(-1);position:relative}
#news_prev,#news_next{-webkit-box-shadow: 8px 9px 20px 1.4px rgb(192 192 192 / 50%);box-shadow: 8px 9px 20px 1.4px rgb(192 192 192 / 50%);border-radius:150px;margin: 0 7px;}
#news_prev svg,#news_next svg{width:35px;height:35px;fill:var(--secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--white);border-radius:150px;padding:20px}
#news_next svg{background-color:var(--secondary);fill:var(--white)}


@media screen and (max-width:1440px){
	section .title_box{margin-bottom:0px}
	section .title_box .text{font-size: 36px;}
	.serviceArea .outside .textBox .stepTitle{font-size: 20px;}
}
@media (max-width:1350px){
	.serviceArea .serviceCircle{max-width: 600px;}
	.serviceArea .inside .textBox{top:40%}
	.serviceArea .outside .stepList .stepItem:nth-of-type(4) .textBox,.serviceArea .outside .stepList .stepItem:nth-of-type(5) .textBox,.serviceArea .outside .stepList .stepItem:last-of-type .textBox{left:50px}
	.serviceArea .outside .circleBox:hover span{width:90px;height:90px}
	.serviceArea .outside .circleBox:hover .circle{width:70px;height:70px}
	.serviceArea .outside .circleBox .Img{width:40px;height:40px}
	.serviceArea .outside .textBox{right: 80px;}
#about_area .aboutProtectArea{
    grid-template-columns: 260px 1fr 180px;
}
}

@media screen and (min-width:1281px){
	.serviceArea .inside .serviceImg .dashCircle::after {content: "";width: 95px;height: 95px;position: absolute;top: 9%;right: -30px;transform: translate(-50%, -50%);display: block;background-image: url(/images/39/img_service_002.png);background-size: contain;z-index: -1;}
	.more_btn.white a:hover font{color:#ffffff}
	.more_btn.white a:hover{width:150px}

}

@media screen and (max-width:1280px){
	
		#news_area #imglist .left li .leftItem{
    grid-template-columns: 320px 1fr;
}
	#news_area .img_box li .item{
    padding: 20px 20px;
}
	#news_area .img_nav li{
    margin-bottom: 10px;
}
}
@media (min-width:1201px){
}

@media (max-width:1200px){
	#imglist .img_nav{position:relative}
	#news_area::after{width:100%;height:45%}
	#about_area .about_logo{margin:50px auto;width:200px}
	.more_btn a{padding:6px 30px 6px 20px}
	
.serviceArea .textBox .subtitle{
    right: 0;
}
}
@media (max-width:1180px){.sideMenuBox{display:none}
}
@media screen and (min-width: 1181px) {
	.serviceArea::after {content: "";width: 580px;height: 840px;position: absolute;top: 18%;left: 50%;transform: translate(-50%, -50%);display: block;background-image: url(/images/39/img_service_BG_LOGO.png);background-size: cover;}
	.serviceArea .outside .stepList .stepItem{position:absolute;display:inline-block}
	.serviceArea .outside .stepList .stepItem:first-of-type,.serviceArea .outside .stepList .stepItem:nth-of-type(2),.serviceArea .outside .stepList .stepItem:nth-of-type(3),.serviceArea .outside .stepList .stepItem:nth-of-type(4){-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
	.serviceArea .outside .stepList .stepItem:nth-of-type(5),.serviceArea .outside .stepList .stepItem:nth-of-type(6),.serviceArea .outside .stepList .stepItem:nth-of-type(7),.serviceArea .outside .stepList .stepItem:last-of-type{-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
	.serviceArea .outside .stepList .stepItem:nth-of-type(3) .stepText, .serviceArea .outside .stepList .stepItem:nth-of-type(4) .stepText, .serviceArea .outside .stepList .stepItem:last-of-type .stepText{text-align:justify}
	.serviceArea .outside .stepList .stepItem:nth-of-type(3) .textBox, .serviceArea .outside .stepList .stepItem:nth-of-type(4) .textBox, .serviceArea .outside .stepList .stepItem:last-of-type .textBox{left:75px;right:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
	.serviceArea .outside .stepList .stepItem.move:first-of-type{top: 27%;left: -25px;}
	.serviceArea .outside .stepList .stepItem.move:first-of-type .item{opacity:1;-webkit-transition-delay:0.2s;transition-delay:0.2s}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(2){top: 57%;left: -25px;}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(2) .item{opacity:1;-webkit-transition-delay:0.4s;transition-delay:0.4s}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(3){top: 15%;right: 1%;}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(3) .item{opacity:1;-webkit-transition-delay:1.6s;transition-delay:1.6s}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(4){top:46%;right: 1%;}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(4) .item{opacity:1;-webkit-transition-delay:1.4s;transition-delay:1.4s}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(5){top:59%;right:1%}
	.serviceArea .outside .stepList .stepItem.move:nth-of-type(5) .item{opacity:1;-webkit-transition-delay:1.2s;transition-delay:1.2s}
	.serviceArea .outside .stepList .stepItem.move:last-of-type{top: 77%;right: 1%;}
	.serviceArea .outside .stepList .stepItem.move:last-of-type .item{opacity:1;-webkit-transition-delay:1s;transition-delay:1s}
}
@media (max-width: 1180px){
	.serviceArea{background-position: 30% 50%;}
	.serviceArea .outside .stepList{display: grid;grid-template-columns: repeat(2, 1fr);gap:  20px 20px;margin-top: 40px;}
	.serviceArea .outside .circleBox{position:absolute;top:35%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:0 auto;display: none;}
	.serviceArea .outside .circleBox:hover span{width:20px;height:20px}
	.serviceArea .outside .circleBox:hover .circle{width:6px;height:6px}
	.serviceArea .outside .circleBox:hover .Img{opacity:0}
	.serviceArea .outside .textBox{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 auto;position:static;-webkit-transform:translateY(0);transform:translateY(0);width:100%;max-width:210px}
	.serviceArea .outside .textBox .stepTitle{padding-top: 20px;white-space:nowrap}
	.serviceArea .outside .textBox .stepText,.serviceArea .outside .stepList .stepItem:last-of-type .stepText{text-align:center}
	.serviceArea .inside .textBox{top:auto;position:relative;margin-top:0}
	.serviceArea .inside .titleBox .subtitle{margin-bottom:0;position:absolute;top: -230%;left: 10%;width: 80%;}
	.serviceArea .inside .titleBox .title{font-size:30px}
	.serviceArea .inside .titleBox .subtitle span{height:100px;display:none}
	.serviceArea .outside .serviceStep{position:relative}
	.serviceArea .serviceCircle{max-width:100%;margin:0 auto 70px}
	.serviceArea .serviceCircle{margin: 0 auto 20px;}
	#about_area .aboutArea .textBox{
    grid-template-columns: 1fr;
    gap: 40px;
}
#about_area .title_box p{
    margin-top: 20px;
}
	#about_area .aboutProtectArea .bottom{
    display: none;
}
	#about_area .aboutProtectArea{
    grid-template-columns: 1fr;
}
	#about_area .aboutProtectArea .ImgCenter .Img{
    text-align: center;
}
	#about_area .aboutProtectArea .areaTitle{
    margin: 0;
    margin-top: 50px;
}
}
@media screen and (max-width:1024px){
	#news_area #imglist{display:flex;flex-direction:column;gap:20px;justify-content: center;margin-bottom: 30px;}
	#news_area #imglist .left{order:1;width:100%}
	#news_area #imglist .right .img_nav,.serviceArea .textBox .subtitle{display:none}
	#news_area .img_box li .item{padding: 40px 20px;}
	#news_area li .more_btn.white font{display:none}
	#news_area li .more_btn a{width:40px;padding:20px 10px 20px 10px}
#photo_area .track p img{
    width: 400px;
}
	.newsbtn{
    right: 0;
    top: 80px;
}
		#news_prev svg, #news_next svg{
    width: 30px;
    height: 30px;
    padding: 15px;
}
	#news_area #imglist .left li .leftItem{
    grid-template-columns: 1fr;
}
	#news_area li .img_scale img{
    aspect-ratio: 4 / 2.7;
}
}

@media (max-width: 960px){
	#news_area{padding: 10vw 0 16vw 0;}
	#about_area .areaTitle .title_box p{width:90%}
	.serviceArea .inside .titleBox .subtitle{left: 10%;top: -208%;width: 80%;}
	section .title_box .title_box{
    font-size: 16px;
}
			section .title_box .text{
    font-size: 26px;
}
	section .title_box .page_title{
    font-size: 20px;
    margin-bottom: 20px;
}
	section .title_box .page_title svg{
    width: 26px;
    height: 20px;
}
		.serviceArea .inside .serviceImg .dashCircle{
    width: 90%;
}
	.serviceArea .inside .serviceImg .sloganTw{
    top: 50%;
    width: 90%;
    height: 90%;
}
	.serviceArea .moreBtn3 a{
    width: 90px;
    height: 90px;
    padding: 20px;
}
	.serviceArea .moreBtn3{
    left: 1%;
}
	#about_area .schedule_box .item{
    gap: 10px;
}
	#about_area .schedule_box{
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
	#about_area .aboutArea .content_box{
    padding: 20px 20px;
}
#about_area .aboutProtectArea .areaTitle_box h2{
    font-size: 20px;
}
		.fly-out{
    width: 155px;
    height: 155px;
    right: -70px;
    bottom: 340px;
}
	.fly-out02{
    width: 134px;
    height: 90px;
    left: -23%;
}
}
@media screen and (max-width:640px){
	#product_next::after{top: 6px;}
	.serviceArea{padding: 9vw 0 0vw 0;}
	.serviceArea .inside .titleBox .subtitle{left: 25%;top: -190%;width: 50%;}
	.serviceArea .inside .titleBox .decoTitle{font-size:80px}
	#photo_area .track p img{
    width: 200px;
    margin: 0 -10px;
}
	#about_area .schedule_box .item .noteBox{
    width: auto;
    padding: 0 40px;
}
	#about_area .schedule_box .item{
    grid-template-columns: 1fr;
}
	#about_area .schedule_box .txt{
    width: 100%;
    display: flex;
    align-items: center;
}
	#about_area .schedule_box .txt font{
    font-size: 17px;
}
		#news_area .img_box li .item{padding: 30px 20px;}
	#news_area .img_box li .item .info_box .time{
    margin-bottom: 10px;
}
	#news_area li .item .Txt h3{
    font-size: 17px;
}

}
@media screen and (max-width: 550px){
	.serviceArea .inside .titleBox .subtitle{left: 35%;top: -110%;width: 30%;}
}