/*body.main{overflow: hidden}*/ #contents{ padding-top: 0; } .section{ position: relative; } .section .section_title{ display:inline-block; position:absolute; width:100%; text-align: center; z-index: 2} .section .section_title h2{ font-size: 18px; padding-bottom:14px; opacity: 0; } .section .section_title p{ font-size: 16px; color:#adadad; opacity: 0; } .main .video_container{ display:block; position:relative; height: 45.3vw; min-height: 600px; } .main .video_container .video_wrap{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width:100%; height:100%; } .main .video_container .video_wrap{ opacity: 0; z-index:0; position: absolute; top:0; right:0; bottom: 0; left:0; -webkit-transition:opacity 2s; -moz-transition:opacity 2s; -o-transition:opacity 2s; transition:opacity 2s; } .main .video_container .video_wrap.first{ opacity: 1} .main .video_container .video_wrap.motion{ z-index: 1; /*-webkit-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s; -moz-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s; -o-transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s; transition:all 14s cubic-bezier(0, 1, 0.34, 0.99), opacity 2s;*/ } .main .video_container .video_wrap.on { opacity: 1; z-index: 2; } /*.main .video_container .video_wrap:nth-child(1){z-index: 4;} .main .video_container .video_wrap:nth-child(2){z-index: 3;} .main .video_container .video_wrap:nth-child(3){z-index: 2;} .main .video_container .video_wrap:nth-child(4){z-index: 1;}*/ .main .video_container .video_wrap .video_inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .main .video_container .video_wrap .video_inner:before{ content: ''; z-index: 1; position: absolute; top:0; left:0; right:0; bottom:0; background:url(../images/main/rolling-b_poster.jpg) no-repeat center top; background-size: cover; } .main .video_container .video_wrap:first-child .video_inner:before{ background-image: url(../images/main/rolling-a_poster.jpg)} .main .video_container .video_wrap3 .video_inner:before{ background-image: url(../images/main/rolling-c_poster.jpg)} .main .video_container .video_wrap .video_inner:after{ content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.1); z-index: 1; } .main .video_container .video_wrap .video_inner video{ position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-height: none; max-width: none; min-height: 100%; min-width: 100%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .main .video_container .video_wrap .copy_container{ position: absolute; z-index: 1; bottom: 15%; left: 0; right:0; width: 94%; text-align: left; color:#ffffff; margin:0 auto; max-width: 1280px; } /*.main .video_container .video_wrap .copy_container{transition: all 1s cubic-bezier(.25,.1,.25,1)}*/ .main .video_container .video_wrap.on .video_inner:before{ content: none; } .main .video_container .video_wrap.on .copy_container{ opacity: 1; } .main .video_container .video_wrap .copy_container .sub_title{ position: relative; font-size: 18px; opacity: 0; padding-bottom: 30px; line-height: 21px; letter-spacing: 0.4px; } .main .video_container .video_wrap .copy_container:after{ content: ''; position: absolute; right: 0; top:10px; left:345px; height: 1px; background: rgba(255,255,255,0.3); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .main .video_container .video_wrap:first-child .copy_container:after{ left: 400px; opacity: 0; } .main .video_container .video_wrap3 .copy_container:after{ left: 305px; } .main .video_container .video_wrap .copy_container h2{ opacity: 0; position: relative; font-size: 66px; line-height: 70px; float:left; padding-right: 30px; margin-right: 30px; } .main .video_container .video_wrap .copy_container h2:after{ content: ''; position: absolute; top:10px; right: 0; height: 45px; width: 1px; background: rgba(255,255,255,0.3)} .main .video_container .video_wrap .copy_container h2 em{ display: inline-block; opacity: 0; } .main .video_container .video_wrap .copy_container p{ float: left; font-size: 16px; line-height:28px; letter-spacing: -0.1px; opacity: 0; margin-top: 5px} .main .video_container .video_wrap .copy_container .btn_round{ position:absolute; right: 0; top: 50px; opacity: 0; } .main .video_container .video_wrap .copy_container .btn_round a{ display:inline-block; width:168px; height:55px; /*border:2px solid #ffffff;*/text-align: center; line-height:59px; font-size:18px; border-radius: 58px; background: #ef85b3; background-image: -webkit-linear-gradient(46deg, #ec6ca5, #f29ec2); background-image: -moz-linear-gradient(46deg, #ec6ca5, #f29ec2); background-image: -o-linear-gradient(46deg, #ec6ca5, #f29ec2); background-image: linear-gradient(46deg, #ec6ca5, #f29ec2); color:#fff; } .main .video_container .video_wrap .copy_container .btn_round a:hover{ /*background-color: #ffffff;color:#333333;*/opacity: 0.7} .main .video_container .video_wrap.on .copy_container .sub_title{ opacity: 1; } .main .video_container .video_wrap.on .copy_container h2{ opacity: 1; } .main .video_container .video_wrap.on .copy_container h2.on{ opacity: 1} .main .video_container .video_wrap.on .copy_container p{ opacity: 1; } .main .video_container .video_wrap.on .copy_container .btn_round{ opacity: 1; } .main .video_container .video_wrap .copy_container.on:after{ opacity: 1; } .main .video_step_wrap{ display: block; position: absolute; bottom:15%; width:100%; z-index: 5; color:#ffffff; max-width: 1280px; left: 0; right: 0; margin: 0 auto 130px; } .main .video_step_wrap ul{ width:200px; margin-right: 10px; float: right} .main .video_step_wrap ul li{ float:left; display: inline-block; width: 50px; text-align: center; opacity: 0; } .main .video_step_wrap ul li a{ position: relative; text-align: center; width:44px; height:44px; margin:0 auto; display: block} .main .video_step_wrap ul li a .step_bg_num{ text-indent: -9999em; overflow: hidden; display:block; position:absolute; left:2px; top:2px; height:40px; width:40px; border-radius: 100px; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .main .video_step_wrap ul li a .step_bg_num:before{ content:''; position:absolute; top:0px; left:0px; width:40px; height:40px; border-radius: 50%; background: #ec6ca5; background-image: -webkit-linear-gradient(46deg, #ec6ca5, #ec6ca5); background-image: -moz-linear-gradient(46deg, #ec6ca5, #ec6ca5); background-image: -o-linear-gradient(46deg, #ec6ca5, #ec6ca5); background-image: linear-gradient(46deg, #ec6ca5, #ec6ca5); transform: scale(0); -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .main .video_step_wrap ul li a .step_bg_num:after{ content:''; position:absolute; top:0px; left:0px; width:40px; height:40px; border-radius: 50%; } .main .video_step_wrap ul li a .step_bg_num1:after{ background: url(../images/main/ico_step1.png) no-repeat center; } .main .video_step_wrap ul li a .step_bg_num2:after{ background: url(../images/main/ico_step2.png) no-repeat center; } .main .video_step_wrap ul li a .step_bg_num3:after{ background: url(../images/main/ico_step3.png) no-repeat center; } .main .video_step_wrap ul li a .step_circle{ display:block; position:absolute; width:44px; height:44px; border-radius: 50%; opacity: 0; } .main .video_step_wrap ul li a .step_circle canvas{ position:relative; z-index: 2; } .main .video_step_wrap ul li.on a .step_bg_num:before ,.main .video_step_wrap ul li a:hover .step_bg_num:before{ transform: scale(1)} .main .video_step_wrap ul li.on a .step_bg_num{ border-color: #88bb8a; background:#88bb8a } .main .video_step_wrap ul li.on a .step_circle{ opacity: 1; } .main .scroll_arrow{ position: absolute; bottom:45px; left:50%; width:33px; height:33px; z-index: 2} .main .scroll_arrow .arrow{ position:absolute; width:33px; height:33px; overflow: hidden} .main .scroll_arrow .arrow_img{ position:absolute; opacity: 0; width:33px; height: 16px; background: url("../images/scroll_arrow.png") no-repeat center top; } .main .scroll_arrow .arrow_img:nth-child(1){ -webkit-animation: arrow 1.4s 0s linear infinite ; -moz-animation: arrow 1.4s 0s linear infinite ; animation: arrow 1.4s 0s linear infinite ; } .main .scroll_arrow .arrow_img:nth-child(2) { -webkit-animation: arrow 1.4s 0.7s linear infinite; -moz-animation: arrow 1.4s 0.7s linear infinite; animation: arrow 1.4s 0.7s linear infinite; } @-webkit-keyframes arrow { 0% { -webkit-transform: translate(0px, 2px); opacity: 0; } 50% { -webkit-transform: translate(0px, 11px); opacity: 1; } 100% { -webkit-transform: translate(0px, 20px); opacity: 0; } } @-moz-keyframes arrow{ 0% { -moz-transform: translate(0px, 2px); opacity: 0; } 50% { -moz-transform: translate(0px, 11px); opacity: 1; } 100% { -moz-transform: translate(0px, 20px); opacity: 0; } } @keyframes arrow { 0% { transform: translate(0px, 2px); opacity: 0; } 50% { transform: translate(0px, 11px); opacity: 1; } 100% { transform: translate(0px, 20px); opacity: 0; } } .maincopy{ display:block; height:320px; font-size:22px; line-height: 45px; letter-spacing: -0.25px; text-align: center; } .maincopy p{ opacity: 0; } .maincopy p:first-child{ padding-top:125px; } .section.others{ position: relative; overflow: hidden; } .section.others .bg{ position: absolute; top:0; right:0; left:0; bottom:0; background: url(/img/otherbgone121.jpg) no-repeat center top; } .section.others .section_area{ position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box} .section.others .section_area .pattern{ position: absolute; } .section.others .section_area .pattern1_1{ top:-25px; right: 0; } .section.others .section_area .pattern1_2{ top:330px; left: 30%; margin-left: -487px; } .section.others .section_area .pattern2_1{ top: -270px; left: 56%; margin-left: 487px; } .section.others .section_area .pattern2_2{ top: 0; left: 0; } .section.others .section_area .pattern2_3{ top: 80px; left: 52%; margin-left: -210px; } .section.others .section_area .pattern2_4{ top: 765px; left: 0; margin-left: 550px; } .section.others .section_area .pattern2_5{ top: 640px; right: 7%; margin-left: -580px; } .section.others .section_area .pattern2_6{ top:1200px; right: 4%; margin-left: 350px; } .section.others .section_area .pattern3_1{ top: 154px; left: 50%; margin-left: -487px; } .section.others .section_area .section_inner{ position: relative; max-width: 1386px; margin: 0 auto; width:94%; } .section.others .section_area .section_inner h4{ font-family:Microsoft YaHei; font-weight:bold; position: relative; padding: 40px 0 15px; font-size: 40px; color: #f9d423; line-height: 60px; } .section.others .section_area .section_inner h4 span{ position: absolute; display: block; top:0; left:2px; width: 50px; height: 5px; background: #f9d423; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .section.others .section_area .section_inner h4 span:before{ content: ''; background: #fc913a; position: absolute; top:0; left:0; width: 5px; height: 5px; } .section.others .section_area .section_inner h4 span:after{ content: ''; background: #fc913a; position: absolute; top:0; right:0; width: 5px; height: 5px; } .section.others .section_area .section_inner p{ font-size: 24px; line-height: 36px; color: #636161; } .section.others .section_area .section_inner .title_wrap{ opacity: 0; transform: translate(0,30px); -webkit-transform: translate(0,30px); transition: all 1s cubic-bezier(.25,.1,.25,1); -webkit-transition: all 1s cubic-bezier(.25,.1,.25,1)} .section.others .section_area.now_area .section_inner .title_wrap{ transform: translate(-30px,0); -webkit-transform: translate(-30px,0); } .section.others .section_area .section_inner .title_wrap.on{ opacity: 1; transform: translate(0,0px); -webkit-transform: translate(0,0px); } .section.others .section_area .section_inner .title_wrap .arrow_btn_area{ overflow: hidden; width: 64px; margin-top: 35px; display:none; } .section.others .section_area .section_inner .title_wrap .arrow_btn_area a{ position: relative; float: left; width: 30px; height: 30px; background: #fff; border: 1px solid #cdcdcd; } .section.others .section_area .section_inner .title_wrap .arrow_btn_area a img.on{ position: absolute; left:0; right:0; opacity: 0; visibility: hidden; } .section.others .section_area .section_inner .title_wrap .arrow_btn_area a:hover{ background: #ec6ca5; border-color: #ec6ca5} .section.others .section_area .section_inner .title_wrap .arrow_btn_area a:hover img.on{ visibility: visible; opacity: 1} .section.others .section_area .section_inner .title_wrap .arrow_btn_area a.btn_right{ border-left: 0px} .section.others .section_area .section_inner .title_wrap .arrow_btn_area a.btn_left{ border-right: 0px} .section.others .section_area .section_inner .title_wrap .arrow_btn_area a.btn_right:before{ content: ''; position: absolute; top:5px; bottom:5px; width: 1px; background:#e6e6e6; } .section.others .section_area .section_inner .title_wrap .arrow_btn_area a.btn_right:hover:before{ content: none; } .section.others .section_area .section_inner .title_wrap .arrow_btn_area a.btn_left:hover+.btn_right:before{ content: none; } .section.others .business_area .section_inner{ height: 840px; padding-top: 160px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-bottom: 50px; } .section.others .business_area .section_inner .title_wrap{ position: relative; width: 20%; } .section.others .business_area ul{ width: 73%; } .section.others .business_area ul li{ position: relative; float: left; transition-timing-function: cubic-bezier(.25,.1,.25,1); -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1); -moz-transition-timing-function: cubic-bezier(.25,.1,.25,1); -ms-transition-timing-function: cubic-bezier(.25,.1,.25,1); transition-duration: .3s; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -ms-transition-duration: .3s; width: calc(100% / 3); } .section.others .business_area ul li .overlay{ position: absolute; left:0; top:0; right:0; bottom:0; width: 100%; height: 100%; background: #fac148; visibility: hidden; opacity: 0; } .section.others .business_area ul li a{ opacity: 0; visibility: hidden; } .section.others .business_area ul li a .box{ position: relative; display: block; width: 100%; height: 632px; overflow: hidden; -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -ms-transition: transform .3s ease; transition: transform .3s ease; } .section.others .business_area ul li a .box:after{ content: ''; position: absolute; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,0.5); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .section.others .business_area ul li a .text{ position: absolute; left:0; right:0; bottom: 0; transition: transform .3s ease; -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -ms-transition: transform .3s ease; height: 235px; overflow: hidden; } .section.others .business_area ul li a .box:before{ content: ''; position: absolute; right:0; bottom:0; left:0; height: 277px; z-index:1; background:#fac148; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -ms-transition: -o-transform .3s ease; transition: transform .3s ease; } .section.others .business_area ul li a .text .text_inner{ position: relative; color: #fff; width: 94%; max-width: 240px; white-space: nowrap; margin: 0 auto; padding: 35px 0; transition: transform .3s ease; -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -ms-transition: transform .3s ease; transform: none; } .section.others .business_area ul li a .text .text_inner .tit{ font-size: 24px; line-height: 40px; letter-spacing: -0.5px; padding: 0 0 45px; } .section.others .business_area ul li a .text .text_inner .tit .ico{ display: block} .section.others .business_area ul li a .text .text_inner .desc{ font-size: 13px; line-height: 23px; white-space: nowrap; padding-bottom: 25px; border-bottom:1px solid rgba(255,255,255,0.3)} .section.others .business_area ul li a .text .text_inner .more{ position: relative; font-size: 17px; margin-top: 25px; padding-left: 40px; } .section.others .business_area ul li a .text .text_inner .more span{ position: absolute; display: block; top: 7px; left: 0; width: 25px; height: 4px; border-radius: 8px; background: rgba(255,255,255,0.3); } .section.others .business_area ul li a .text .text_inner .more span:before{ content: ''; background: #fff; position: absolute; top:0; left:0; width: 4px; height: 4px; border-radius: 8px; } .section.others .business_area ul li a .text .text_inner .more span:after{ content: ''; background: #fff; position: absolute; top:0; right:0; width: 4px; height: 4px; border-radius: 8px; } .section.others .business_area ul li a .text .tit >br.on{ display: none; } .section.others .business_area ul li a .img{ transition: transform .3s ease; -webkit-transition: transform .3s ease; -moz-transition: transform .3s ease; -ms-transition: transform .3s ease; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .section.others .business_area ul li:hover a .box{ -webkit-transform: scale(1.12); -moz-transform: scale(1.12); -ms-transform: scale(1.12); -o-transform: scale(1.12); transform: scale(1.12); -webkit-box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.23); -moz-box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.23); -ms-box-shadow: 1px 1px 10px 0 rgb(0 0 0 / 23%); box-shadow: 1px 1px 10px 0 rgb(0 0 0 / 23%); } .section.others .business_area ul li:hover{ } .section.others .business_area ul li:hover{ z-index: 10; } .section.others .business_area ul li:hover a .box .img{ -webkit-transform: translateY(-120px); -moz-transform: translateY(-120px); -ms-transform: translateY(-120px); -o-transform: translateY(-120px); transform: translateY(-120px); } /*.section.others .business_area ul li:hover a .img{top:30px;}*/ .section.others .business_area ul li:hover a .text{ transform: translateY(45px); -webkit-transform: translateY(45px); height: 316px; } .section.others .business_area ul li:hover a .box:before{ -webkit-transform: scale(1.12); -moz-transform: scale(1.12); -ms-transform: scale(1.12); -o-transform: scale(1.12); transform: scale(1.12); /*transform: none;-webkit-transform: none;-moz-transform: none;-ms-transform: none;-o-transform: none;*/} .section.others .business_area ul li:hover a .box:after{ visibility: hidden; opacity: 0; } .section.others .business_area ul li:hover a .text .text_inner{ width: 94%; padding: 18px 0; max-width: 290px; } .section.others .business_area ul li:hover a .text .tit{ padding-bottom: 10px; } .section.others .business_area ul li:hover a .text .text_inner .tit .ico{ display: none; } .section.others .infra_area .section_inner{ height: 2084px; } .section.others .infra_area ul{ position: relative; width: 1080px; margin: 0 auto; overflow: hidden} .section.others .infra_area ul li{ float: left; width: 100%; margin-bottom: 120px } /*.section.others .infra_area ul li .text{transform: translate(0px,100px); } .section.others .infra_area ul li.on .text{transform: translate(0px,0px);transition: all 1s cubic-bezier(.25,.1,.25,1);} .section.others .infra_area ul li .img{transform: translate(0px,100px);} .section.others .infra_area ul li.on .img{transform: translate(0px,0px);transition: all 1s cubic-bezier(.25,.1,.25,1);}*/ .section.others .infra_area ul li .text{ float: left; padding: 125px 118px; } .cj_title_medium2{ font-size: 30px; line-height: 31px; color:#333; } .cj_title_medium1{ position: relative; font-size: 18px; line-height: 55px; width: 180px; height: auto; letter-spacing: 0.4px; text-align: center; margin-top: 3.6vw; color: #ec6ca5; display: block; } .desc1 { font-size: 18px; line-height: 30px; padding: 22px 0 0; color: #626262; } .section.others .business_area ul li a .text .text_inner .desc { font-size: 13px; line-height: 23px; white-space: nowrap; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.3); } .section.others .infra_area ul li .text .infra_icons{ overflow: hidden; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 4.1vw; } .section.others .infra_area ul li .text .infra_icons .item{ position: relative; text-align: center; width: 32%; border: none; } .section.others .infra_area ul li .text .infra_icons .item span{ display: block; line-height: 30px; font-size: 18px; color: #242424; margin-top: 1.8vw; } .section.others .infra_area ul li .text .lianjie_a{ position: relative; width: 100%; height: auto; display: block; } .section.others .infra_area ul li .text img{ width:100%; } .section.others .infra_area ul li .text a .more_text{ position: relative; opacity: 0; visibility: hidden; background: #fedc6e; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; color: #fff; } .section.others .infra_area ul li .text a .more_text:before{ content:''; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .section.others .infra_area ul li .text a span.ico{ position: absolute; display: block; top: 25px; left: -14px; width: 28px; height: 5px; background: #f9c04b; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .section.others .infra_area ul li .text a span.ico:before{ content: ''; background: #ec6ca5; position: absolute; top:0; left:0; width: 5px; height: 5px; } .section.others .infra_area ul li .text a span.ico:after{ content: ''; background: #f9a11b; position: absolute; top:0; right:0; width: 5px; height: 5px; } .section.others .infra_area ul li .text a span.overlay{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #74b0b6; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05,0); -moz-transform: scale(.05,0); -ms-transform: scale(.05,0); -o-transform: scale(.05,0); transform: scale(.05,0); -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86); } .section.others .infra_area ul li .text a:hover .more_text:before{ padding: 0 0 0 35px} .section.others .infra_area ul li .text a:hover span.ico{ width: 80px; left: -40px; } .section.others .infra_area ul li .img{ position: relative; float: right; } .section.others .infra_area ul li .img .overlay{ position: absolute; left:0; top:0; right:0; bottom:0; width: 100%; height: 100%; background: #73c697; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05,0); -moz-transform: scale(.05,0); -ms-transform: scale(.05,0); -o-transform: scale(.05,0); transform: scale(.05,0); -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86); } .section.others .infra_area ul li .img .mask{ height: 580px; overflow: hidden; box-shadow: 0px 4px 18px 0 rgba(60,74,66,0.2); } .section.others .infra_area ul li.infra_li2 .img{ float: left; } .section.others .infra_area ul li.on .img .mask{ opacity: 1; visibility: visible; } .section.others .infra_area ul li.on .text a .more_text{ transition-delay: 0.5s; -webkit-transition-delay: 0.5s; opacity: 1; visibility: visible; } /*.section.others .infra_area ul li.on .text a span.overlay{animation-name: slide-bg-1;-webkit-animation-name: slide-bg-1;} .section.others .infra_area ul li.on .img .overlay{animation-name: slide-bg-1;-webkit-animation-name: slide-bg-1;}*/ @keyframes slide-bg-1 { 0% { display: none; } 0% { display: block; } 33.3% { -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05, 1); -moz-transform: scale(.05, 1); -ms-transform: scale(.05, 1); -o-transform: scale(.05, 1); transform: scale(.05, 1) } 66.6% { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1) } 66.7% { -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1) } 100% { -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1) } } @-webkit-keyframes slide-bg-1 { 0% { display: none; } 0% { display: block; } 33.3% { -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05, 1); -moz-transform: scale(.05, 1); -ms-transform: scale(.05, 1); -o-transform: scale(.05, 1); transform: scale(.05, 1) } 66.6% { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1) } 66.7% { -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1) } 100% { -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1) } } @-webkit-keyframes slide-bg-2 { 33.3% { -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05, 1); -moz-transform: scale(.05, 1); -ms-transform: scale(.05, 1); -o-transform: scale(.05, 1); transform: scale(.05, 1) } 66.6% { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1) } 66.7% { -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1) } 100% { -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1) } } .section.others .inside_area #clipCircle circle{ -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .section.others .inside_area #clipCircle.on circle{ -webkit-transform: scale(0.66, 0.66); -moz-transform: scale(0.66, 0.66); -ms-transform: scale(0.66, 0.66); -o-transform: scale(0.66, 0.66); transform: scale(0.66, 0.66)} .section.others .inside_area .section_inner{ height: 820px; margin-top: 300px; } .section.others .inside_area .circle_area{ position: absolute; left: 80%; top: 0; width: 100%; max-width: 888px; transform: translateX(-80%); } .section.others .inside_area .circle_area svg{ display: block; margin: 0 auto; } .section.others .inside_area .title_wrap.left{ position: absolute; top: 180px; left: 0; } .section.others .inside_area .title_wrap.right{ position: absolute; top:365px; right: 70px; display:none; } .section.others .inside_area .title_wrap.right p:before{ content: '“'; margin-left: -8px; } .section.others .inside_area .title_wrap.right .text_area{ width: 210px; } .section.others .inside_area .title_wrap.right .assignment{ font-size: 18px; color: #ec6ca5; margin-top: 22px; } .section.others .inside_area .title_wrap.right .thumb{ position: relative; margin-top: 35px; margin-left: 5px; display:none; } .section.others .inside_area .title_wrap.right .thumb ul{ overflow: hidden} .section.others .inside_area .title_wrap.right .thumb ul li{ float: left; margin-right: 10px; } .section.others .inside_area .title_wrap.right .thumb ul li a{ position: relative; display: block; width: 7px; height: 7px; text-indent: -999em; overflow: hidden; border-radius: 100%; background: #b5b5b5; } .section.others .inside_area .section_inner[data-num='0'] .title_wrap.right .thumb ul li.thumb1 a{ background: #ec6ca5; } .section.others .inside_area .section_inner[data-num='1'] .title_wrap.right .thumb ul li.thumb2 a{ background: #ec6ca5; } .section.others .inside_area .section_inner[data-num='2'] .title_wrap.right .thumb ul li.thumb3 a{ background: #ec6ca5; } .section.others .inside_area .section_inner[data-num='3'] .title_wrap.right .thumb ul li.thumb4 a{ background: #ec6ca5; } .section.others .inside_area .section_inner .title_wrap.right .text{ display: none} .section.others .inside_area .section_inner[data-num='0'] .title_wrap.right .text1{ display: block} .section.others .inside_area .section_inner[data-num='1'] .title_wrap.right .text2{ display: block; } .section.others .inside_area .section_inner[data-num='2'] .title_wrap.right .text3{ display: block; } .section.others .inside_area .section_inner[data-num='3'] .title_wrap.right .text4{ display: block; } .section.others .inside_area .circle_area .btn_play{ position: absolute; top:50%; left:50%; width: 91px; height: 91px; margin: -46px 0 0 -46px; border-radius: 100%; transform: scale(0); -webkit-transform: scale(0)} .section.others .inside_area .circle_area .btn_play a{ visibility: hidden; opacity: 0; position: absolute; top:0; left:0; width: 100px; height: 100px; display: block; overflow: hidden; transition: 0.5s all; } .section.others .inside_area .circle_area .btn_play a:hover{ transform: scale(1.22); -webkit-transform: scale(1.22)} .section.others .inside_area .circle_area svg image{ visibility: hidden; opacity: 0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .section.others .inside_area .section_inner[data-num='0'] .circle_area svg image.inside_img1{ visibility: visible; opacity: 1} .section.others .inside_area .section_inner[data-num='1'] .circle_area svg image.inside_img2{ visibility: visible; opacity: 1} .section.others .inside_area .section_inner[data-num='2'] .circle_area svg image.inside_img3{ visibility: visible; opacity: 1} .section.others .inside_area .section_inner[data-num='3'] .circle_area svg image.inside_img4{ visibility: visible; opacity: 1} .section.others .inside_area .section_inner[data-num='0'] .circle_area .btn_play1{ visibility: visible; opacity: 1} .section.others .inside_area .section_inner[data-num='1'] .circle_area .btn_play2{ visibility: visible; opacity: 1} .section.others .inside_area .section_inner[data-num='2'] .circle_area .btn_play3{ visibility: visible; opacity: 1} .section.others .inside_area .section_inner[data-num='3'] .circle_area .btn_play4{ visibility: visible; opacity: 1} .section.others .now_area{ background: #eee; padding: 140px 0; } .section.others .now_area .section_inner{ overflow: hidden; } .section.others .now_area .section_inner .title_wrap{ float: left; } .section.others .now_area .section_inner .slide_area{ float: right; } .section.others .now_area .section_inner .slide_area ul li{ opacity: 0; transform: translate(30px,0); -webkit-transform: translate(30px,0); transition: all 0.5s cubic-bezier(.25,.1,.25,1); -webkit-transition: all 0.5s cubic-bezier(.25,.1,.25,1); } .section.others .now_area .section_inner .slide_area.on ul li{ opacity: 1; transform: translate(0,0px); -webkit-transform: translate(0,0px); } .section.others .now_area .section_inner .slide_area.on ul li:nth-child(1){ transition-delay: 0.1s; -webkit-transition-delay: 0.1s; } .section.others .now_area .section_inner .slide_area.on ul li:nth-child(2){ transition-delay: 0.2s; -webkit-transition-delay: 0.2s; } .section.others .now_area .section_inner .slide_area.on ul li:nth-child(3){ transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } .section.others .now_area .section_inner .slide_area .slide_inner{ width: 978px; overflow: hidden} .section.others .now_area .section_inner .slide_area .slide_inner ul{ width: 310%; overflow: hidden} .section.others .now_area .section_inner .slide_area .slide_inner ul li{ position: relative; float: left; margin:0 13px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box} .section.others .now_area .section_inner .slide_area .slide_inner ul li a{ display: block; width: 300px; height: 300px; color: #fff; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box} .section.others .now_area .section_inner .slide_area .slide_inner ul li a:before{ content: ''; position: absolute; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .section.others .now_area .section_inner .slide_area .slide_inner ul li a .text_area{ position: absolute; top:30px; right:30px; bottom:30px; left: 30px; } .section.others .now_area .section_inner .slide_area .slide_inner ul li a .text_area .sns_ico{ float:right; display:none; } .section.others .now_area .section_inner .slide_area .slide_inner ul li a .text_area .now_tit{ position: absolute; bottom:25px; font-size: 18px; line-height: 21px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .section.others .now_area .section_inner .slide_area .slide_inner ul li a .text_area .now_date{ position: absolute; bottom:0; font-size: 12px; line-height: 15px; } .section.others .now_area .section_inner .slide_area .slide_inner ul li.article a{ border: 1px solid #dedede; background: #fff; color: #333; } .section.others .now_area .section_inner .slide_area .slide_inner ul li.article a .text_area .now_desc{ font-size: 14px; line-height: 24px; height: 164px; /* word-break: keep-all;*/ overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: 7; -webkit-box-orient: vertical; word-wrap: break-word; } .section.others .now_area .section_inner .slide_area .slide_inner ul li.article a:before{ content: none; } .section.others .now_area .section_inner .slide_area .slide_inner ul li a:hover{ border-color: #fedc6e} .section.others .now_area .section_inner .slide_area .slide_inner ul li a:hover .now_tit{ color: #fedc6e; } .section.others .now_area .section_inner .slide_area .slide_inner ul li a:hover:before{ opacity: 1; visibility: visible} .section.others .now_area .section_inner .slide_area .carousel ul{ font-size: 0; letter-spacing: 0; word-spacing: 0; text-align: center; margin-top: 30px} .section.others .now_area .section_inner .slide_area .carousel ul li{ width: 7px; height: 7px; background: #b5b5b5; display: inline-block; vertical-align: top; margin: 0 5px; border-radius: 100%; } .section.others .now_area .section_inner .slide_area .carousel ul li.on{ background: #ec6ca5; } .section.others .now_area .section_inner .slide_area .carousel ul li a{ display: block; width: 7px; height: 7px; } .section.others .now_area .section_inner[data-num='0'] .slide_area .carousel ul li.carousel1{ background: #ec6ca5; } .section.others .now_area .section_inner[data-num='1'] .slide_area .carousel ul li.carousel2{ background: #ec6ca5; } .section.others .now_area .section_inner[data-num='2'] .slide_area .carousel ul li.carousel3{ background: #ec6ca5; } .wave{ position: absolute; top:0; left:0; } .wave .curve{ position: absolute; top:0; left:0; display: block} .wave .curve img{ max-width: none; width: 2000px; } .waves{ position: absolute; top:0; left:50%; right: 0; margin-left: -1000px; overflow: hidden; } #wave1{ position: absolute; top:330px; height:400px; } #wave2{ position: absolute; top: 1280px; height: 380px; } #wave3{ position: absolute; top: -10%; height: auto; } #wave4{ position: absolute; top: 540px; height: auto; } .dimmed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 999; } .dimmed.on{ opacity: 0; visibility: hidden; } /*Main Layer Popup 2018-01-25*/ .layerPopup { position: absolute; top: 70px; left: 50%; margin-left: 166px; border: 1px solid #73c697; z-index: 998; display: none !important; } .layerPopup .layerPopInner{ float: right} .layerPopup img { width: auto; max-width: inherit; } .layerPopup .layerToday { padding: 5px 10px; background-color: #FFF; font-size: 14px; border-top: 1px solid #ebebeb; overflow: hidden; } .layerPopup .layerToday input[type="checkbox"] { margin-right: 3px; -webkit-appearance: checkbox; } .layerPopup .layerToday label { display: inline-block; vertical-align: middle; } .layerPopup .layerToday a { float: right; display: inline-block; } .layerPopup .layerToday a:before { content: 'X '; } .hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); } @media only screen and (min-width: 769px) and (max-width: 1024px){ #wave2{ top: 1120px; } .section.others .inside_area .title_wrap.left{ top: -30px; } } @media only screen and (max-width: 768px){ .main .video_container{ height: 76vh; min-height: 400px; } .main .video_container .video_wrap .copy_container h2{ font-size: 34px; line-height: 34px; } .main .video_container .video_wrap .copy_container .sub_title{ padding-bottom: 20px; } .main .video_container .video_wrap .copy_container p{ margin-top: 15px; } .main .video_container .video_wrap .copy_container .btn_round{ bottom: -60px; top: auto; left:0; right:auto; } .main .video_container .video_wrap .copy_container .btn_round a{ height: auto; line-height: 46px; } .main .video_step_wrap{ bottom: 0; margin: 0 auto 18px; } .main .video_container .video_wrap .copy_container h2:after{ display:none; } #wave2{ top: 1495px; } .main .video_step_wrap ul{ width: 100px; } }