@charset "utf-8";




@keyframes logen_circle{
    100% {
        transform: rotate(360deg);
    }
}
@keyframes box{
    0% {transform: translateY(0);} /* 처음 위치 */
    100% {transform: translateY(15px);} /* 마지막 위치 */
}






/* PC */
@media screen and (min-width:1441px) {
    /* topBanner */
#topBanner{position: relative;}
#topBanner .top_bg{opacity: 0; width: 100%; height: 100vh; background-position: center; background-size: cover; background-image: url(../img/main/topbanner0.jpg);}
#topBanner .top_img li{position: absolute; left: 0; top: 0;width: 100%; height: 100vh; background-position: center; background-size: cover;}
#topBanner .top_img li:nth-child(1){background-image: url(../img/main/topbanner0.jpg);}
#topBanner .top_img li:nth-child(2){background-image: url(../img/main/topbanner1.jpg);}
#topBanner .top_img li:nth-child(3){background-image: url(../img/main/topbanner2.jpg);}
#topBanner .top_img li img{width: 100%;}

#topBanner .mobile{display: none;}

#topBanner .top_text li{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: none;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 3vw; color: #FFF; 
position: relative;  text-align: center; font-weight: 500; transition-duration: 0.5s;}

#topBanner .top_controls{position: absolute; display: flex; left: 50%; top: 50%; transform: translate(-30px,-50%);}
#topBanner .top_controls li{width: 14px; height: 14px; background-color: #FFF; margin: 0 5px; cursor: pointer; border-radius: 7px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #FFAA45; width:40px;}

#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; transition-duration: 0.5s;}
#topBanner .top_btn img{width: 100%;}
#topBanner .top_prev{left: 50px;}
#topBanner .top_next{right: 50px;}
#topBanner .top_play{position: absolute; left: 50%; top: 50%; transform: translate(-70px,-50%); width: 30px; height: 30px; background: none; background-image: url(../img/Pause.png); border: none; cursor: pointer;}

#topBanner .search_box{position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%);background-color: #fff; padding: 10px 30px; border-radius: 40px; transition-duration: 0.5s;}
#topBanner .search_box ul{display: flex; align-items: center;}
#topBanner .search_box ul li{margin: 0 10px; white-space: nowrap;}
#topBanner .search_box ul li label{font-size: 1.2em;}
#topBanner .search_box ul li input{width: 400px; padding:10px; border: none; border-bottom: 1px solid #333; outline: none;}
#topBanner .search_box ul li input::placeholder{text-indent: 5px;}

#topBanner .search_box ul li input:focus{border-bottom: 1px solid #FFAA45;}

/* brand */
#brand{position: relative; width: 90%; max-width: 1440px; margin: 250px auto 0 auto; padding: 100px 0;}

#brand .brand_wrap{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; top: 200px; opacity: 0; transition-duration: 1s; transition-delay: 0.5s;}

#brand .brand_wrap>p:nth-child(1){position: relative; font-size: 1.3em; color: #777;}
#brand .brand_wrap>p:nth-child(1)::after{content: ''; position: absolute; width: 110%; height: 4px; background-color: #FFBB46; left: -5%; bottom: 2px; z-index: -1;}
#brand .brand_wrap>p:nth-child(2){position: relative; font-size: 1.8em; font-weight: 500; margin: 30px;}
#brand .brand_wrap .good_wrap{position: relative; display: flex; margin-top: 80px;}
#brand .brand_wrap .good_wrap li{position: relative; margin: 0 20px;}
#brand .brand_wrap .good_wrap li img{width: 100%;}
#brand .brand_wrap .good_wrap li .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
#brand .brand_wrap .good_wrap li .text_box p{font-size: 1.3em; white-space: nowrap; font-weight: 700; margin: 5px 0;}
#brand .brand_wrap .good_wrap li .text_box p:first-child{font-weight: 400;}

#brand .coner{opacity: 0; transition-duration: 1s;}

#brand .coner0{position: absolute; left: 50%; top: 0; transform: translateX(-600%);}
#brand .coner1{position: absolute; left: 50%; top: 0;transform: translateX(500%)}
#brand .coner2{position: absolute; left:  50%; bottom: 0;transform: translateX(500%)}
#brand .coner3{position: absolute; left:  50%;bottom: 0;transform: translateX(-600%)}


/* text_liner */
.text_liner{position: relative; margin: 150px 0; width: 100%; overflow: hidden;}
.text_liner ul{position: relative; display: flex; width: 4200px;}
/* .text_liner ul li{padding: 0 1%; box-sizing: border-box;} */
/* .text_liner ul li img{width: 100%;} */


/* service */
#service{position: relative; width: 90%; max-width: 1440px; margin: 0 auto 300px auto; text-align: center;}
#service .main_title{position: relative; top: 100px; opacity: 0;}
#service>p{position: relative; font-size: 1.8em; margin-top: 20px; top: 50px; opacity: 0;}
#service .service_list{position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 100px; opacity: 0;  right: -100px;}
#service .service_list li{width: 14%;transition-duration: 0.3s; opacity: 0;}
#service .service_list li h3{font-size: 1.3em; margin-top: 20px;}
#service .service_list li .img_box{background-color: #fff; box-shadow: 4px 4px 7px rgba(0, 0,0,0.5); padding: 30%; border-radius: 50%;}
#service .service_list li img{width: 100%;}

#service .service_list li:hover{margin-top: -50px;}
#service .service_list li:hover h3{color: #FFAA45; font-weight: 700;}


/* better */
#better{position: relative; width: 90%; max-width: 1440px; margin: 0 auto;}
#better .title_wrap{display: flex; justify-content: space-between; text-align: right; align-items: center;}

#better .title_wrap .img_box{position: relative; left: -100px; opacity: 0;}
#better .title_wrap .title_box{position: relative; right: -100px; opacity: 0;}

#better .title_wrap .main_title::after{content: ''; position: absolute; width: 100%; height: 5px; background-color: #FFBB46;right: 0; bottom: 3px; z-index: -1; }
#better .title_wrap .title_box p{font-size: 1.6em; margin-top: 30px; line-height: 160%;}
#better .better_list{display: flex; justify-content: space-evenly; align-items: flex-end; margin-top: 50px;}
#better .better_list li{text-align: center; position: relative; top: 100px; opacity: 0;}

#better .better_list li .img_box{ transition-duration: 0.5s;}
#better .better_list li h3{font-size: 1.2vw; font-weight: 700; margin: 30px 0; transition-duration: 0.5s;}
#better .better_list li p{font-size: 1vw; transition-duration: 0.5s;}
#better .better_list li img{width: 100%;transition-duration: 0.5s; filter: grayscale(100%); }

#better .better_list li:hover img{ filter: grayscale(0%); }


#better .title_wrap .img_box img{width: 100%;animation: box 1s linear infinite alternate; transform-origin: 50% 50%;}

/* about */
#about{position: relative; width: 100%; background-image: url(../img/topbanner0.png); background-size: cover; background-position:center; background-attachment: fixed;margin: 300px 0;}
#about .about_inner{position: relative; width: 90%; max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10% 0; }
#about .about_inner>div{width: 50%;}
#about .about_inner .about_left{text-align: center; padding: 0 7%; box-sizing: border-box; position: relative; top: 100px; opacity: 0;}
#about .about_inner .about_left .main_title{color: #fff;}
#about .about_inner .about_left p{font-size: 1.3em; line-height: 200%; margin: 50px 0 100px 0; color: #FFF;}
#about .about_inner .about_left .more_btn{display: block; line-height: 40px; width: 200px; border: 1px solid #fff; color: #fff; margin: 0 auto; border-radius: 10px; transition-duration: 0.5s;}

#about .about_inner .about_left .more_btn:hover{background-color: #fff;color: #333;}

#about .about_inner .about_right{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#about .about_inner .about_right .info_box{display: flex;align-items: center; margin-top: 20px; background-color: rgba(0, 0,0,0.5); padding: 20px; border-radius: 40px; position: relative; right: -150px; opacity: 0;}
#about .about_inner .about_right .info_box p{color: #FFF;font-size: 1.3em; line-height: 160%; margin-left:30px; width: 60%;}
#about .about_inner .about_right .info_box .img_box img{width: 100%;}


/* midBanner */
#midBanner{position: relative; width: 90%; max-width: 1440px; margin: 0 auto; background-color: #ffbb4657; display: flex; justify-content: space-between; align-items: center; padding: 10px 150px ; box-sizing: border-box; top: 100px; opacity: 0;}
#midBanner .img_box{margin-top: -40px;}
#midBanner .text_box a{display: flex; font-size: 1.3em; margin-top: 30px; align-items: center; justify-content: space-between; border-bottom: 1px solid #333; width: 140px;}


/* notice */
#notice{position: relative; width: 100%; background-color: #FFAA45; overflow: hidden; margin: 300px auto 0 auto;}
#notice .notice_inner{position: relative; width: 90%; max-width: 1440px; display: flex; justify-content: space-between; padding: 200px 0; margin: 0 auto;}
#notice .notice_inner .main_title{position: relative; left: -100px; font-size: 100px; letter-spacing: 15px; transform:  translate(-20%) rotate(90deg); z-index: 1; opacity: 0;}
#notice .notice_inner .notice_list{width: 50%; opacity: 0; position: relative; right: -100px;}
#notice .notice_inner .notice_list li{position: relative; right: -100px; border-bottom: 1px solid #333; margin-bottom: 30px; padding: 0 20px; transition-duration: 0.3s;}
#notice .notice_inner .notice_list li p{margin-bottom: 10px; font-size: 1.1em; transition-duration: 0.3s;}
#notice .notice_inner .notice_list li h3{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 1.6em; transition-duration: 0.3s;}

#notice .notice_inner .img_box{position: absolute; left: -20%; bottom: -22%;}
#notice .notice_inner .img_box img{width: 100%;animation: logen_circle 15s linear infinite;}
#notice .notice_inner .notice_list li h3 span{background-image: url(../img/go_24.png); width: 24px; height: 24px; display: block; position: relative; background-position: center; transition-duration: 0.3s;}

#notice .notice_inner .notice_list li:hover{border-bottom: 1px solid #fff;}
#notice .notice_inner .notice_list li:hover h3{color: #fff;}
#notice .notice_inner .notice_list li:hover p{color: #fff;}
#notice .notice_inner .notice_list li:hover h3 span{background-image: url(../img/go_24_w.png); }


}












@media screen and (min-width:1201px) and (max-width:1440px) {
    /* topBanner */
#topBanner{position: relative; }
#topBanner .top_bg{opacity: 0; width: 100%; height: 100vh; background-position: center; background-size: cover; background-image: url(../img/main/topbanner0.jpg);}
#topBanner .top_img li{position: absolute; left: 0; top: 0;width: 100%; height: 100vh; background-position: center; background-size: cover; }
#topBanner .top_img li:nth-child(1){background-image: url(../img/main/topbanner0.jpg);}
#topBanner .top_img li:nth-child(2){background-image: url(../img/main/topbanner1.jpg);}
#topBanner .top_img li:nth-child(3){background-image: url(../img/main/topbanner2.jpg);}

#topBanner .mobile{display: none;}

#topBanner .top_text li{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: none;}
#topBanner .top_text li:first-child{display: block}

#topBanner .top_text li h2{font-size: 3.2vw; color: #FFF; 
position: relative;  text-align: center; font-weight: 500;}

#topBanner .top_controls{position: absolute; display: flex; left: 50%; top: 50%; transform: translate(-30px,-50%);}
#topBanner .top_controls li{width: 14px; height: 14px; background-color: #FFF; margin: 0 5px; cursor: pointer; border-radius: 7px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #FFAA45; width:40px;}
#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; width: 7%; transition-duration: 0.5s;}
#topBanner .top_btn img{width: 100%; }
#topBanner .top_prev{left: 50px;}
#topBanner .top_next{right: 50px;}
#topBanner .top_play{position: absolute; left: 50%; top: 50%; transform: translate(-70px,-50%); width: 30px; height: 30px; background: none; background-image: url(../img/Pause.png); border: none; cursor: pointer;}
#topBanner .search_box{position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%);background-color: #fff; padding: 10px 30px; border-radius: 40px;transition-duration: 0.5s;}
#topBanner .search_box ul{display: flex; align-items: center;}
#topBanner .search_box ul li{margin: 0 10px; white-space: nowrap;}
#topBanner .search_box ul li label{font-size: 1.2em;}
#topBanner .search_box ul li input{width: 400px; padding:10px; border: none; border-bottom: 1px solid #333; outline: none;}
#topBanner .search_box ul li input::placeholder{text-indent: 5px;}

#topBanner .search_box ul li input:focus{border-bottom: 1px solid #FFAA45;}

/* brand */
#brand{position: relative; width: 90%; max-width: 1440px; margin: 250px auto 0 auto; padding: 100px 0;}
#brand .brand_wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;top: 200px; opacity: 0; transition-duration: 1s; transition-delay: 0.5s; position: relative;}
#brand .brand_wrap>p:nth-child(1){position: relative; font-size:1.4vw; color: #777;}
#brand .brand_wrap>p:nth-child(1)::after{content: ''; position: absolute; width: 110%; height: 4px; background-color: #FFBB46; left: -5%; bottom: 2px; z-index: -1;}
#brand .brand_wrap>p:nth-child(2){position: relative; font-size: 2vw; font-weight: 500; margin: 30px;}
#brand .brand_wrap .good_wrap{position: relative; display: flex; margin-top: 80px;}
#brand .brand_wrap .good_wrap li{position: relative; margin: 0 20px;}
#brand .brand_wrap .good_wrap li img{width: 100%;}
#brand .brand_wrap .good_wrap li .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
#brand .brand_wrap .good_wrap li .text_box p{font-size: 1.4vw; white-space: nowrap; font-weight: 700; margin: 5px 0;}
#brand .brand_wrap .good_wrap li .text_box p:first-child{font-weight: 400;}

#brand .coner{opacity: 0; transition-duration: 1s;}

#brand .coner0{position: absolute; left: 50%; top: 0; transform: translateX(-600%);}
#brand .coner1{position: absolute; left: 50%; top: 0;transform: translateX(500%)}
#brand .coner2{position: absolute; left:  50%; bottom: 0;transform: translateX(500%)}
#brand .coner3{position: absolute; left:  50%;bottom: 0;transform: translateX(-600%)}


/* text_liner */
.text_liner{position: relative; margin: 150px 0; width: 100%; overflow: hidden;}
.text_liner ul{position: relative; display: flex; width: 5226px;}
.text_liner ul li{padding: 0 1%; box-sizing: border-box;}
.text_liner ul li img{width: 100%;}



/* service */
#service{position: relative; width: 90%; max-width: 1440px; margin: 0 auto 300px auto; text-align: center;}
#service .main_title{position: relative; top: 100px; opacity: 0;}

#service>p{font-size: 1.5vw; margin-top: 20px; position: relative; top: 50px; opacity: 0;}
#service .service_list{display: flex; justify-content: space-between; align-items: center; margin-top: 100px; position: relative; opacity: 0;  right: -100px;}
#service .service_list li{ width: 14%;opacity: 0;transition-duration: 0.3s;}
#service .service_list li h3{font-size: 1.4vw; margin-top: 20px;}
#service .service_list li .img_box{background-color: #fff; box-shadow: 4px 4px 7px rgba(0, 0,0,0.5); padding: 30%; border-radius: 50%;}
#service .service_list li img{width: 100%;}

#service .service_list li:hover{margin-top: -50px;}
#service .service_list li:hover h3{color: #FFAA45; font-weight: 700;}


/* better */
#better{position: relative; width: 90%; max-width: 1440px; margin: 0 auto;}
#better .title_wrap{display: flex; justify-content: space-between; text-align: right; align-items: center;}

#better .title_wrap .img_box{position: relative; left: -100px; opacity: 0;}
#better .title_wrap .title_box{position: relative; right: -100px; opacity: 0;}

#better .title_wrap .main_title::after{content: ''; position: absolute; width: 100%; height: 5px; background-color: #FFBB46; right: 0; bottom: 3px; z-index: -1; }
#better .title_wrap .title_box p{font-size: 1.5vw; margin-top: 30px; line-height: 160%;}

#better .better_list{display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px;}
#better .better_list li{text-align: center; position: relative; top: 100px; opacity: 0;}

#better .better_list li .img_box{transition-duration: 0.5s;}
#better .better_list li h3{font-size: 1.4vw; font-weight: 700; margin: 30px 0; }
#better .better_list li p{font-size: 1.2vw; }
#better .better_list li img{width: 100%; filter: grayscale(100%); transition-duration: 0.5s;}

#better .better_list li:hover img{ filter: grayscale(0%); }

#better .title_wrap .img_box img{width: 100%;animation: box 1s linear infinite alternate; transform-origin: 50% 50%;}

/* about */
#about{position: relative; width: 100%; background-image: url(../img/topbanner0.png); background-size: cover; background-position:center; background-attachment: fixed;}
#about .about_inner{position: relative; width: 90%; max-width: 1440px; margin: 300px auto; display: flex; align-items: center; justify-content: space-between; padding: 15% 0; }
#about .about_inner p{font-size: 1.4vw;}
#about .about_inner>div{width: 50%;}
#about .about_inner .about_left{text-align: center; padding: 0 4%; box-sizing: border-box;  position: relative; top: -150px; opacity: 0;}
#about .about_inner .about_left .main_title{color: #fff;}
#about .about_inner .about_left p{font-size: 1.4vw; line-height: 200%; margin: 50px 0 100px 0; color: #FFF;}
#about .about_inner .about_left .more_btn{display: block; line-height: 40px; width: 200px; border: 1px solid #fff; color: #fff; margin: 0 auto; border-radius: 10px; transition-duration: 0.5s;}

#about .about_inner .about_left .more_btn:hover{background-color: #fff;color: #333;}

#about .about_inner .about_right{display: flex; flex-direction: column; justify-content: center; align-items: center; }
#about .about_inner .about_right .info_box{display: flex;align-items: center; margin-top: 20px; background-color: rgba(0, 0,0,0.5); padding: 2%; border-radius: 40px; position: relative; right: -150px; opacity: 0;}
#about .about_inner .about_right .info_box p{color: #FFF; line-height: 160%; margin-left:30px; width: 60%;}
#about .about_inner .about_right .info_box .img_box{width: 25%;}
#about .about_inner .about_right .info_box .img_box img{width: 100%;}


/* midBanner */
#midBanner{position: relative; width: 90%; max-width: 1440px; margin: 0 auto; background-color: #ffbb4657; display: flex; justify-content: space-between; align-items: center; padding: 2% 8% ; box-sizing: border-box; top: 100px; opacity: 0;}
#midBanner .img_box{margin-top: -40px;}
#midBanner .text_box a{display: flex; font-size: 1.4vw; margin-top: 30px; align-items: center; justify-content: space-between; border-bottom: 1px solid #333; width: 140px;}


/* notice */
#notice{position: relative; width: 100%; background-color: #FFAA45; overflow: hidden;margin: 300px auto 0 auto;}
#notice .notice_inner{position: relative; width: 90%; max-width: 1440px;  display: flex; padding: 15% 0; margin: 0 auto;}
#notice .notice_inner .main_title{font-size: 100px; letter-spacing: 15px; transform:  translate(-50%) rotate(90deg); z-index: 1; position: relative; left: -100px; opacity: 0;}
#notice .notice_inner .notice_list{position: relative; right: -100px; opacity: 0; width: 60%; }
#notice .notice_inner .notice_list li{border-bottom: 1px solid #333; margin-bottom: 30px; padding: 0 20px; transition-duration: 0.3s;}
#notice .notice_inner .notice_list li p{margin-bottom: 10px; transition-duration: 0.3s;}
#notice .notice_inner .notice_list li h3{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 1.8vw; transition-duration: 0.3s;}

#notice .notice_inner .img_box{position: absolute; left: -20%; bottom: -22%;}
#notice .notice_inner .img_box img{width: 100%;animation: logen_circle 15s linear infinite; transform-origin: 50% 50%;}
#notice .notice_inner .notice_list li h3 span{background-image: url(../img/go_24.png); width: 24px; height: 24px; display: block; position: relative; background-position: center; transition-duration: 0.3s;}

#notice .notice_inner .notice_list li:hover{border-bottom: 1px solid #fff;}
#notice .notice_inner .notice_list li:hover h3{color: #fff;}
#notice .notice_inner .notice_list li:hover p{color: #fff;}
#notice .notice_inner .notice_list li:hover h3 span{background-image: url(../img/go_24_w.png); }
}










@media screen and (min-width:801px) and (max-width:1200px) {
/* topBanner */
#topBanner{position: relative; }
#topBanner .top_bg{opacity: 0; width: 100%; height: 80vh; background-position: center; background-size: cover; background-image: url(../img/main/topbanner_m0.jpg);}
#topBanner .top_img li{position: absolute; left: 0; top: 0;width: 100%; height: 80vh; background-position: center; background-size: cover; transition-duration: 0.5s;}
#topBanner .top_img li:nth-child(1){background-image: url(../img/main/topbanner_m0.jpg);}
#topBanner .top_img li:nth-child(2){background-image: url(../img/main/topbanner_m1.jpg);}
#topBanner .top_img li:nth-child(3){background-image: url(../img/main/topbanner_m2.jpg);}

#topBanner .mobile{display: none;}

#topBanner .top_text li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 3.6vw; color: #FFF; 
position: relative;  text-align: center; font-weight: 500;}
#topBanner .top_controls{position: absolute; display: flex; left: 50%; top: 65%; transform: translate(-30px,-50%);}
#topBanner .top_controls li{width: 14px; height: 14px; background-color: #FFF; margin: 0 5px; cursor: pointer; border-radius: 7px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #FFAA45; width:40px;}
#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; width: 8%; transition-duration: 0.5s;}
#topBanner .top_btn img{width: 100%; }
#topBanner .top_prev{left: 5%;}
#topBanner .top_next{right: 5%;}
#topBanner .top_play{position: absolute; left: 50%; top: 65%; transform: translate(-70px,-50%); width: 30px; height: 30px; background: none; background-image: url(../img/Pause.png); border: none; cursor: pointer;}
#topBanner .search_box{position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50%);background-color: #fff; padding: 10px 30px; border-radius: 40px; box-shadow: 2px 2px 2px rgba(0, 0,0,0.3); transition-duration: 0.5s;}
#topBanner .search_box ul{display: flex; align-items: center;}
#topBanner .search_box ul li{margin: 0 10px; white-space: nowrap;}
#topBanner .search_box ul li label{font-size: 1.2em;}
#topBanner .search_box ul li input{width: 400px; padding:10px; border: none; border-bottom: 1px solid #333; outline: none;}
#topBanner .search_box ul li input::placeholder{text-indent: 5px;}

#topBanner .search_box ul li input:focus{border-bottom: 1px solid #FFAA45;}

/* brand */
#brand{position: relative; width: 90%; max-width: 1440px; margin: 250px auto 0 auto; padding: 100px 0;}
#brand .brand_wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;position: relative;top: 200px; opacity: 0; transition-duration: 1s; transition-delay: 0.5s;}

#brand .brand_wrap>p:nth-child(1){position: relative; font-size:2vw; color: #777;}
#brand .brand_wrap>p:nth-child(1)::after{content: ''; position: absolute; width: 110%; height: 4px; background-color: #FFBB46; left: -5%; bottom: 2px; z-index: -1;}
#brand .brand_wrap>p:nth-child(2){position: relative; font-size: 3vw; font-weight: 500; margin: 30px;}
#brand .brand_wrap .good_wrap{position: relative; display: flex; margin-top: 80px;}
#brand .brand_wrap .good_wrap li{position: relative; margin: 0 20px;}
#brand .brand_wrap .good_wrap li img{width: 100%;}
#brand .brand_wrap .good_wrap li .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
#brand .brand_wrap .good_wrap li .text_box p{font-size: 2vw; white-space: nowrap; font-weight: 700; margin: 5px 0;}
#brand .brand_wrap .good_wrap li .text_box p:first-child{font-weight: 400;}

#brand .coner{opacity: 0; transition-duration: 1s;}
#brand .coner0{position: absolute; left: 50%; top: 0; transform: translateX(-500%);}
#brand .coner1{position: absolute; left: 50%; top: 0;transform: translateX(400%)}
#brand .coner2{position: absolute; left:  50%; bottom: 0;transform: translateX(400%)}
#brand .coner3{position: absolute; left:  50%;bottom: 0;transform: translateX(-500%)}


/* text_liner */
.text_liner{position: relative; margin: 150px 0; width: 100%; overflow: hidden;}
.text_liner ul{position: relative; display: flex; width: 5226px;}
.text_liner ul li{padding: 0 1%; box-sizing: border-box;}
.text_liner ul li img{width: 100%;}


.text_liner ul li img{width: 100%;}


/* service */
#service{position: relative; width: 90%; max-width: 1440px; margin: 0 auto 300px auto; text-align: center;}

#service .main_title{position: relative; top: 100px; opacity: 0;top: 50px; opacity: 0;}
#service>p{font-size: 2vw; margin-top: 20px;position: relative;top: 50px; opacity: 0;}

#service .service_list{display: flex; justify-content: space-between; align-items: center; margin-top: 100px; position: relative;opacity: 0;  right: -100px;}
#service .service_list li{ width: 14%; transition-duration: 0.3s; opacity: 0;}
#service .service_list li h3{font-size: 1.8vw; margin-top: 20px;}
#service .service_list li .img_box{background-color: #fff; box-shadow: 4px 4px 7px rgba(0, 0,0,0.5); padding: 30%; border-radius: 50%;}
#service .service_list li img{width: 100%;}

#service .service_list li:hover{margin-top: -50px;}
#service .service_list li:hover h3{color: #FFAA45; font-weight: 700;}


/* better */
#better{position: relative; width: 90%; max-width: 1440px; margin: 0 auto;}
#better .title_wrap{display: flex; justify-content: space-between; text-align: right; align-items: center;}

#better .title_wrap .img_box{width: 30%;position: relative; left: -100px; opacity: 0;}
#better .title_wrap .title_box{width: 65%;position: relative; right: -100px; opacity: 0;}

#better .title_wrap .main_title::after{content: ''; position: absolute; width: 90%; height: 5px; background-color: #FFBB46; right: 0; bottom: 3px; z-index: -1; }
#better .title_wrap .title_box p{font-size: 2vw; margin-top: 30px; line-height: 160%;}
#better .better_list{display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px;}
#better .better_list li{text-align: center; position: relative; top: 100px; opacity: 0; width: 28%;}

#better .better_list li h3{font-size: 2vw; font-weight: 700; margin: 30px 0; }
#better .better_list li p{font-size: 1.8vw; }
#better .better_list li p:last-child{display: none;}
#better .better_list li img{width: 100%; filter:grayscale(100%); transition-duration: 0.5s;}

#better .better_list li:hover .img_box img{filter:grayscale(0%); }


#better .title_wrap .img_box img{width: 100%;animation: box 1s linear infinite alternate; transform-origin: 50% 50%;}

/* about */
#about{position: relative; width: 100%; background-image: url(../img/topbanner0.png); background-size: cover; background-position:center; background-attachment: fixed;}
#about .about_inner{position: relative; width: 90%; max-width: 1440px; margin: 300px auto; display: flex; align-items: center; justify-content: space-between; padding: 15% 0; }
#about .about_inner p{font-size:2vw; line-height: 200%; margin: 50px 0 100px 0; color: #FFF;}
#about .about_inner .about_left{text-align: center; padding: 0 4%; box-sizing: border-box; position: relative; top: 100px; opacity: 0;}
#about .about_inner .about_left .main_title{color: #fff;}
#about .about_inner .about_left .more_btn{display: block; line-height: 40px; width: 200px; border: 1px solid #fff; color: #fff; margin: 0 auto; border-radius: 10px; }

#about .about_inner .about_left .more_btn:hover{background-color: #fff;color: #333;}

#about .about_inner .about_right{display: none;}


/* midBanner */
#midBanner{position: relative; width: 90%; max-width: 1440px; margin: 0 auto; background-color: #ffbb4657; display: flex; justify-content: space-between; align-items: center; padding: 4% 4% ; box-sizing: border-box; top: 100px; opacity: 0;}
#midBanner .img_box{margin-top: -10%; width: 40%;}
#midBanner .img_box img{width: 100%;}
#midBanner .text_box{width: 70%;}
#midBanner .text_box a{display: flex; font-size: 1.1em; margin-top: 30px; align-items: center; justify-content: space-between; border-bottom: 1px solid #333; width: 140px;}


/* notice */
#notice{position: relative; width: 100%; background-color: #FFAA45; overflow: hidden;margin: 300px auto 0 auto;}
#notice .notice_inner{position: relative; width: 90%; max-width: 1440px;  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15% 0; margin: 0 auto;}

#notice .notice_inner .main_title{font-size: 80px; letter-spacing: 15px; z-index: 1; margin-bottom: 50px; left: -100px; opacity: 0;}

#notice .notice_inner .notice_list{width: 80%; position: relative; right: -100px; opacity: 0;}
#notice .notice_inner .notice_list li{position: relative; z-index: 1; border-bottom: 1px solid #333; margin-bottom: 30px; padding: 0 20px; transition-duration: 0.3s; z-index: 2;}
#notice .notice_inner .notice_list li p{margin-bottom: 10px; transition-duration: 0.3s;}
#notice .notice_inner .notice_list li h3{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 2vw; transition-duration: 0.3s;}

#notice .notice_inner .img_box{position: absolute; left: -20%; bottom: 0%; width: 50%;}
#notice .notice_inner .img_box img{width: 100%;animation: logen_circle 15s linear infinite;}
#notice .notice_inner .notice_list li h3 span{background-image: url(../img/go_24.png); width: 24px; height: 24px; display: block; position: relative; background-position: center; transition-duration: 0.3s;}

#notice .notice_inner .notice_list li:hover{border-bottom: 1px solid #fff;}
#notice .notice_inner .notice_list li:hover h3{color: #fff;}
#notice .notice_inner .notice_list li:hover p{color: #fff;}
#notice .notice_inner .notice_list li:hover h3 span{background-image: url(../img/go_24_w.png); }

}











@media screen and (min-width:601px) and (max-width:800px) {

#topBanner{position: relative; }
#topBanner .top_bg{opacity: 0; width: 100%; height: 60vh; background-position: center; background-size: cover; background-image: url(../img/main/topbanner_m0.jpg);}
#topBanner .top_img li{position: absolute; left: 0; top: 0;width: 100%; height: 60vh; background-position: center; background-size: cover;}
#topBanner .top_img li:nth-child(1){background-image: url(../img/main/topbanner_m0.jpg);}
#topBanner .top_img li:nth-child(2){background-image: url(../img/main/topbanner_m1.jpg);}
#topBanner .top_img li:nth-child(3){background-image: url(../img/main/topbanner_m2.jpg);}

#topBanner .top_img li img{width: 100%;}
#topBanner .top_text li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;}
#topBanner .pc{display: none;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 3.6vw; color: #FFF; 
position: relative;  text-align: center; font-weight: 500; transition-duration: 0.5s;}
#topBanner .top_controls{position: absolute; display: flex; left: 50%; top: 65%; transform: translate(-30px,-50%);transition-duration: 0.5s;}
#topBanner .top_controls li{width: 14px; height: 14px; background-color: #FFF; margin: 0 5px; cursor: pointer; border-radius: 7px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #FFAA45; width:40px;}
#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; width: 10%; transition-duration: 0.5s;}
#topBanner .top_btn img{width: 100%; }
#topBanner .top_prev{left: 5%;}
#topBanner .top_next{right: 5%;}
#topBanner .top_play{position: absolute; left: 50%; top: 65%; transform: translate(-70px,-50%); width: 30px; height: 30px; background: none; background-image: url(../img/Pause.png); border: none; cursor: pointer; transition-duration: 0.5s;}

#topBanner .search_box{position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50%);background-color: #fff; padding: 10px 20px; border-radius: 40px; box-shadow: 2px 2px 2px rgba(0, 0,0,0.3); transition-duration: 0.5s;}
#topBanner .search_box ul{display: flex; align-items: center; justify-content: space-between;}
#topBanner .search_box ul li{margin: 0 5px; white-space: nowrap;}
#topBanner .search_box ul li:nth-of-type(1){width: 20%;}
#topBanner .search_box ul li:nth-of-type(3){flex-grow: 3;}
#topBanner .search_box ul li label{font-size: 1.2em;}
#topBanner .search_box ul li input{width: 300px; padding:10px 3px; border: none; border-bottom: 1px solid #333; outline: none;}
#topBanner .search_box ul li input::placeholder{text-indent: 5px;}

#topBanner .search_box ul li input:focus{border-bottom: 1px solid #FFAA45;}

/* brand */
#brand{position: relative; width: 90%; max-width: 1440px; margin: 250px auto 0 auto;}
#brand .brand_wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative;top: 200px; opacity: 0; transition-duration: 1s; transition-delay: 0.1s;}
#brand .brand_wrap>p:nth-child(1){position: relative; font-size:2vw; color: #777;}
#brand .brand_wrap>p:nth-child(1)::after{content: ''; position: absolute; width: 110%; height: 4px; background-color: #FFBB46; left: -5%; bottom: 2px; z-index: -1;}
#brand .brand_wrap>p:nth-child(2){position: relative; font-size: 3vw; font-weight: 500; margin: 30px;}
#brand .brand_wrap .good_wrap{position: relative; display: flex; margin-top: 80px;}
#brand .brand_wrap .good_wrap li{position: relative; margin:0 10px;}
#brand .brand_wrap .good_wrap li img{width: 100%;}
#brand .brand_wrap .good_wrap li .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
#brand .brand_wrap .good_wrap li .text_box p{font-size: 2.3vw; white-space: nowrap; font-weight: 700; margin: 5px 0;}
#brand .brand_wrap .good_wrap li .text_box p:first-child{font-weight: 400;}
#brand .coner{display: none;}


/* text_liner */
.text_liner{position: relative; margin: 150px 0; width: 100%; overflow: hidden;}
.text_liner ul{position: relative; display: flex; width: 5226px;}
.text_liner ul li{padding: 0 1%; box-sizing: border-box;}
.text_liner ul li img{width: 100%;}


.text_liner ul li img{width: 100%;}
    

/* service */
#service{position: relative; width: 90%; max-width: 1440px; margin: 0 auto 300px auto; text-align: center;}

#service .main_title{position: relative; top: 100px; opacity: 0;}
#service>p{font-size: 3vw; margin-top: 20px; position: relative; top: 50px; opacity: 0;}

#service .service_list{display: flex; justify-content: space-between; align-items: center; margin-top: 100px; flex-wrap: wrap; position: relative;opacity: 0;  right: -100px;}
#service .service_list li{width: 23.33%; margin: 0 5%; margin-bottom: 30px; transition-duration: 0.3s; opacity: 0; }
#service .service_list li h3{font-size: 1.1em; margin-top: 20px;}
#service .service_list li .img_box{background-color: #fff; box-shadow: 4px 4px 7px rgba(0, 0,0,0.5); padding: 20%; border-radius: 50%;}
#service .service_list li img{width: 100%;}

#service .service_list li:hover{margin-top: -40px;}
#service .service_list li:hover h3{color: #FFAA45; font-weight: 700;}

/* better */
#better{position: relative; width: 90%; max-width: 1440px; margin: 0 auto;}
#better .title_wrap{display: flex; justify-content: space-between; text-align: right; align-items: center;}

#better .title_wrap .img_box{width: 30%;position: relative; left: -100px; opacity: 0;}
#better .title_wrap .title_box{width: 70%;position: relative; right: -100px; opacity: 0;}

#better .title_wrap .main_title::after{content: ''; position: absolute; width: 90%; height: 5px; background-color: #FFBB46; right: 0; bottom: 3px; z-index: -1; }
#better .title_wrap .title_box p{font-size: 3vw; margin-top: 30px; line-height: 160%;}
#better .better_list{display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px;}
#better .better_list li{text-align: center; position: relative; top: 100px; opacity: 0;width: 28%;}

#better .better_list li h3{font-size: 2.6vw; font-weight: 700; margin: 30px 0; }
#better .better_list li p{font-size: 2vw; }
#better .better_list li p:last-child{display: none;}
#better .better_list li img{width: 100%; filter:grayscale(100%); transition-duration: 0.5s;}

#better .better_list li:hover img{filter:grayscale(0%); }

#better .title_wrap .img_box img{width: 100%;animation: box 1s linear infinite alternate; transform-origin: 50% 50%;}

/* about */
#about{position: relative; width: 100%; background-image: url(../img/topbanner0.png); background-size: cover; background-position:center; background-attachment: fixed;}
#about .about_inner{position: relative; width: 90%; max-width: 1440px; margin: 300px auto; display: flex; align-items: center; justify-content: space-between; padding: 15% 0; }
#about .about_inner p{font-size:2.8vw; line-height: 200%; margin: 50px 0 100px 0; color: #FFF;}
#about .about_inner .about_left{text-align: center; padding: 0 4%; box-sizing: border-box; position: relative; top: 100px; opacity: 0;}
#about .about_inner .about_left .main_title{color: #fff;}
#about .about_inner .about_left .more_btn{display: block; line-height: 40px; width: 200px; border: 1px solid #fff; color: #fff; margin: 0 auto; border-radius: 10px; }

#about .about_inner .about_left .more_btn:hover{background-color: #fff;color: #333;}

#about .about_inner .about_right{display: none;}


/* midBanner */
#midBanner{position: relative; width: 90%; max-width: 1440px; margin: 0 auto; background-color: #ffbb4657; display: flex; justify-content: space-between; align-items: center; padding: 4% 2% ; box-sizing: border-box; top: 100px; opacity: 0;}
#midBanner .img_box{margin-top: -10%; width: 40%;}
#midBanner .img_box img{width: 100%;}
#midBanner .text_box{width: 70%;}
#midBanner .text_box a{display: flex; margin-top: 30px; align-items: center; justify-content: space-between; border-bottom: 1px solid #333; width: 140px;}


/* notice */
#notice{position: relative; width: 100%; background-color: #FFAA45; overflow: hidden;margin: 300px auto 0 auto;}
#notice .notice_inner{position: relative; width: 90%; max-width: 1440px;  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15% 0; margin: 0 auto;}

#notice .notice_inner .main_title{font-size: 80px; letter-spacing: 15px; z-index: 1; margin-bottom: 50px; left: -100px; opacity: 0;}

#notice .notice_inner .notice_list{width: 100%; position: relative; right: -100px; opacity: 0;}
#notice .notice_inner .notice_list li{position: relative; z-index: 1; border-bottom: 1px solid #333; margin-bottom: 30px; padding: 0 20px; transition-duration: 0.3s; z-index: 2;}
#notice .notice_inner .notice_list li p{margin-bottom: 10px; transition-duration: 0.3s;}
#notice .notice_inner .notice_list li h3{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 3vw; transition-duration: 0.3s;}

#notice .notice_inner .img_box{position: absolute; left: -20%; bottom: 0%; width: 50%;}
#notice .notice_inner .img_box img{width: 100%;animation: logen_circle 15s linear infinite;}
#notice .notice_inner .notice_list li h3 span{background-image: url(../img/go_24.png); width: 24px; height: 24px; display: block; position: relative; background-position: center; transition-duration: 0.3s;}

#notice .notice_inner .notice_list li:hover{border-bottom: 1px solid #fff;}
#notice .notice_inner .notice_list li:hover h3{color: #fff;}
#notice .notice_inner .notice_list li:hover p{color: #fff;}
#notice .notice_inner .notice_list li:hover h3 span{background-image: url(../img/go_24_w.png); }
}








@media screen and (max-width:600px) {
#topBanner{position: relative; }
#topBanner .top_bg{opacity: 0; width: 100%; height: 60vh; background-position: center; background-size: cover; background-image: url(../img/main/topbanner_m0.jpg);}
#topBanner .top_img li{position: absolute; left: 0; top: 0;width: 100%; height: 60vh; background-position: center; background-size: cover;}
#topBanner .top_img li:nth-child(1){background-image: url(../img/main/topbanner_m0.jpg);}
#topBanner .top_img li:nth-child(2){background-image: url(../img/main/topbanner_m1.jpg);}
#topBanner .top_img li:nth-child(3){background-image: url(../img/main/topbanner_m2.jpg);}
#topBanner .top_img li img{width: 100%;}
#topBanner .top_text li{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none;}
#topBanner .pc{display: none;}
#topBanner .top_text li:first-child{display: block}
#topBanner .top_text li h2{font-size: 5.5vw; color: #FFF; 
position: relative;  text-align: center; font-weight: 500; white-space: nowrap; transition-duration: 0.5s;}
#topBanner .top_controls{position: absolute; display: flex; left: 50%; top: 50%; transform: translate(-30px,800%); transition-duration: 0.5s;}
#topBanner .top_controls li{width: 14px; height: 14px; background-color: #FFF; margin: 0 5px; cursor: pointer; border-radius: 7px; transition-duration: 0.5s;}
#topBanner .top_controls li.select{background-color: #FFAA45; width:40px;}
#topBanner .top_btn{position: absolute;  top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; width: 8%; transition-duration: 0.5s;}
#topBanner .top_btn img{width: 100%; }
#topBanner .top_prev{left: 3%;}
#topBanner .top_next{right: 3%;}
#topBanner .top_play{position: absolute; left: 50%; top: 50%; transform: translate(-70px,340%); width: 30px; height: 30px; background: none; background-image: url(../img/Pause.png); border: none; cursor: pointer;transition-duration: 0.5s;}

#topBanner .search_box{position: absolute; left: 50%; bottom: 0; transform: translate(-50%,80%);background-color: #fff; padding: 10px 8px; border-radius: 40px; box-shadow: 2px 2px 2px rgba(0, 0,0,0.3); transition-duration: 0.5s;}
#topBanner .search_box ul{display: flex; align-items: center;}
#topBanner .search_box ul li{margin: 0 2px; white-space: nowrap;}
#topBanner .search_box ul li .img_box{display: none;}
#topBanner .search_box ul li:nth-of-type(1 ){width: 20%;}
#topBanner .search_box ul li label{font-size: 14px;}
#topBanner .search_box ul li input{width: 220px; padding:10px 0; border: none; border-bottom: 1px solid #333; outline: none; position: relative;}
#topBanner .search_box ul li input::placeholder{text-indent: 10px; font-size: 12px;}

#topBanner .search_box ul li input:focus{border-bottom: 1px solid #FFAA45;}

/* brand */
#brand{position: relative; width: 90%; max-width: 1440px; margin: 150px auto 0 auto;}
#brand .brand_wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;position: relative;top: 200px; opacity: 0; transition-duration: 1s;transition-delay: 0.1s;}
#brand .brand_wrap>p:nth-child(1){position: relative; font-size: 3.2vw; color: #777;}
#brand .brand_wrap>p:nth-child(1)::after{content: ''; position: absolute; width: 110%; height: 4px; background-color: #FFBB46; left: -5%; bottom: 2px; z-index: -1;}
#brand .brand_wrap>p:nth-child(2){position: relative; font-size: 4vw; font-weight: 500; margin: 30px;}
#brand .brand_wrap .good_wrap{position: relative; display: flex; margin-top: 80px; flex-wrap: wrap; justify-content: center;}
#brand .brand_wrap .good_wrap li{position: relative; width: 45%; margin: 0 2.5%;}
#brand .brand_wrap .good_wrap li img{width: 100%;}
#brand .brand_wrap .good_wrap li .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%;}
#brand .brand_wrap .good_wrap li .text_box p{font-size: 3.2vw; white-space: nowrap; font-weight: 700; margin: 5px 0;}
#brand .brand_wrap .good_wrap li .text_box p:first-child{font-weight: 400;}
#brand .coner{display: none;}


/* text_liner */
.text_liner{position: relative; margin: 150px 0; width: 100%; overflow: hidden;}
.text_liner ul{position: relative; display: flex; width: 5226px;}
.text_liner ul li{padding: 0 1%; box-sizing: border-box;}
.text_liner ul li img{width: 100%;}


    

/* service */
#service{position: relative; width: 90%; max-width: 1440px; margin: 0 auto 100px auto; text-align: center;}

#service .main_title{position: relative; top: 100px; opacity: 0;}
#service>p{font-size: 3.8vw; margin-top: 20px;position: relative; top: 50px; opacity: 0;}

#service .service_list{display: flex; justify-content: space-between; align-items: center; margin-top: 60px; flex-wrap: wrap; position: relative;opacity: 0;  right: -100px;}
#service .service_list li{position: relative; padding: 3%; box-sizing: border-box; width: 40%; margin: 0 5%;margin-bottom: 30px; transition-duration: 0.3s; opacity: 0; }
#service .service_list li h3{font-size: 3.8vw; margin-top: 20px;}
#service .service_list li .img_box{background-color: #fff; box-shadow: 4px 4px 7px rgba(0, 0,0,0.5); padding: 25%; border-radius: 50%;}
#service .service_list li img{width: 100%;}

#service .service_list li:hover{transform: translateY(-25px);}
#service .service_list li:hover h3{color: #FFAA45; font-weight: 700;}

/* better */
#better{position: relative; width: 90%; max-width: 1440px; margin: 0 auto;}
#better .title_wrap{display: flex; justify-content: space-between; text-align: justify; align-items: center;}
#better .title_wrap .title_box{width: 100%;position: relative; right: -100px; opacity: 0;}
#better .title_wrap .img_box{display: none;}
#better .title_wrap .main_title::after{content: ''; position: absolute; width: 90%; height: 4px; background-color: #FFBB46; left: 0; bottom: 3px; z-index: -1; }
#better .title_wrap .title_box p{font-size: 3.8vw; margin-top: 30px; line-height: 160%;}
#better .better_list{display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 50px;}
#better .better_list li{text-align: center; width: 60%; position: relative; top: 100px; opacity: 0;}

#better .better_list li h3{font-size: 3.3vw; font-weight: 700; margin: 30px 0; }
#better .better_list li p{display: none; }
#better .better_list li img{width: 100%; filter:grayscale(100%); transition-duration: 0.5s;}

#better .better_list li:hover img{filter:grayscale(0%); }


#better .title_wrap .img_box img{width: 100%;animation: box 1s linear infinite alternate; transform-origin: 50% 50%;}

/* about */
#about{position: relative; margin: 100px auto; width: 100%; background-image: url(../img/topbanner0.png);background-size: cover; background-position:center; background-attachment: fixed;}
#about .about_inner{position: relative; margin: 0 auto; width: 90%; max-width: 1440px; display: flex; align-items: center; justify-content: space-between; padding: 15% 0; }
#about .about_inner p{font-size:3.8vw; line-height: 200%; margin: 50px 0 100px 0; color: #FFF;}
#about .about_inner .about_left{text-align: center; padding: 0 4%; box-sizing: border-box; position: relative; top: 100px; opacity: 0; }
#about .about_inner .about_left .main_title{color: #fff;}
#about .about_inner .about_left .more_btn{display: block; line-height: 40px; width: 200px; border: 1px solid #fff; color: #fff; margin: 0 auto; border-radius: 10px; }

#about .about_inner .about_left .more_btn:hover{background-color: #fff;color: #333;}

#about .about_inner .about_right{display: none;}


/* midBanner */
#midBanner{position: relative; width: 90%; max-width: 1440px; margin: 0 auto; background-color: #ffbb4657;padding: 4% 2% ; top: 100px; opacity: 0;}
#midBanner .img_box{position: absolute; right: 0; bottom: -40%; width: 40%;}
#midBanner .img_box img{width: 100%;}
#midBanner .text_box{width: 100%;}
#midBanner .text_box a{display: flex; margin-top: 30px; align-items: center; justify-content: space-between; border-bottom: 1px solid #333; width: 140px;}


/* notice */
#notice{position: relative; width: 100%; background-color: #FFAA45; overflow: hidden;margin: 300px auto 0 auto;}
#notice .notice_inner{position: relative; width: 90%; max-width: 1440px;  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15% 0; margin: 0 auto;}

#notice .notice_inner .main_title{font-size: 50px; letter-spacing: 15px; z-index: 1; margin-bottom: 50px; left: -100px; opacity: 0;}

#notice .notice_inner .notice_list{width: 100%; position: relative; right: -100px; opacity: 0;}
#notice .notice_inner .notice_list li{position: relative; z-index: 1; border-bottom: 1px solid #333; margin-bottom: 30px; padding: 0 20px; transition-duration: 0.3s; z-index: 2;}
#notice .notice_inner .notice_list li p{margin-bottom: 10px; transition-duration: 0.3s;}
#notice .notice_inner .notice_list li h3{margin-bottom: 20px; font-size: 4vw; transition-duration: 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

#notice .notice_inner .img_box{position: absolute; left: -20%; bottom: 0%; width: 50%;}
#notice .notice_inner .img_box img{width: 100%;animation: logen_circle 15s linear infinite;}
#notice .notice_inner .notice_list li h3 span{display: none;}

#notice .notice_inner .notice_list li:hover{border-bottom: 1px solid #fff;}
#notice .notice_inner .notice_list li:hover h3{color: #fff;}
#notice .notice_inner .notice_list li:hover p{color: #fff;}
#notice .notice_inner .notice_list li:hover h3 span{background-image: url(../img/go_24_w.png); }
   }