@charset "utf-8"; @import url("fullpage.css"); /* #fp-nav { display:block !important; } */ #fp-nav.right { left:54px !important; top:auto; top:50% !important; margin-top:0 !important; height:157px; transform:translateY(-50%); } #fp-nav:after { content:""; display:block; width:1px; height:157px; position:absolute; left:50%; top:0; background-color:rgba(0,0,0, 0.2); } #fp-nav:before { content:""; display:block; width:9px; height:6px; position:absolute; left:50%; bottom:-17px; transform:translateX(calc(-50% + 0.5px)); background:url(/img/main/icon_r_down.png) center center no-repeat; } .fp-viewing-Main #fp-nav:after { background-color:rgba(255,255,255, 0.3) !important; } .fp-viewing-Main #fp-nav:before { background:url(/img/main/icon_r_down1.png) center center no-repeat;} .fp-viewing-Company #fp-nav:before, .fp-viewing-Careers #fp-nav:before { top:-17px; bottom:auto; background:url(/img/main/icon_r_up.png) center center no-repeat;} #fp-nav ul li, .fp-slidesNav ul li { margin:18px 0 !important; display:inline-block; transition:all 0.3s ease-in-out;} #fp-nav ul li:first-child { margin-top:-7px !important;} .fp-viewing-Careers #fp-nav ul li:last-child { margin-bottom:-7px !important;} .fp-viewing-Last #fp-nav { display:none !important; } #fp-nav ul li a span, .fp-slidesNav ul li a span {transition:all 0.3s ease-in-out; opacity:0; background:none !important; width:0 !important; height:0 !important; border:1px solid rgba(34,38,112,0); background:none!important; margin:0 !important; border-radius:0 !important; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { opacity:1; width:13px !important; height:13px !important; border:1px solid rgba(34,38,112,0.5); background:none!important; margin:-7px !important; border-radius:0 !important;} #fp-nav ul li a { width:0 !important; height:0 !important; } #fp-nav ul li a.active { width:14px !important; height:13px !important;} #fp-nav ul li a.active span:before { content:""; display:block; width:3px; height:3px; position:absolute; left:50%; top:50%; transform:translate(calc(-50% - 0.5px),calc(-50% - 0.5px));background-color:#222670; } @media screen and (max-width:1480px){ #fp-nav.right { left:20px !important; } } @media screen and (max-width:1280px){ #fp-nav.right { left:10px !important; } } #fullpage { overflow:hidden !important; position:relative; z-index:1; } .iScrollIndicator, .fp-scroller {transition-duration:0.5s !important; transition-timing-function:unset !important; overflow:hidden;} @media screen and (max-width:1024px){ .main1, .main2, .main3, .main4, .main5, .main6, .main7 { height:100% !important; height:-webkit-fill-available; } .main1 .fp-tableCell, .main2 .fp-tableCell, .main3 .fp-tableCell, .main4 .fp-tableCell, .main5 .fp-tableCell, .main6 .fp-tableCell, .main7 .fp-tableCell { height:100% !important; height:-webkit-fill-available; } .iScrollIndicator, .fp-scrollable { height:100% !important; height:-webkit-fill-available; } .iScrollVerticalScrollbar { display:none !important; } } /* visual s */ #mainVisual { position:relative; width:100vw; height:100%; } #mainVisual .swiper-container { position:relative; width:100%; height:100%; overflow:hidden; } #mainVisual .swiper-container .swiper-slide { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; } #mainVisual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; z-index:2; opacity:0; background: rgba(0,0,0,0.6); transition:all 0.3s ease-in-out; } #mainVisual .swiper-container .swiper-slide .mov video { position:absolute; left:0; right:0; top:0; height:100%; top:0; bottom:auto; width:100%; overflow:hidden; object-fit:cover; -o-object-fit: cover; } #mainVisual .swiper-container .swiper-slide .mvisualImage { position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; } #mainVisual .swiper-container .swiper-slide .imgbox { position:absolute; top:80px; right:100px; z-index:10; width:890px; height:670px; } #mainVisual .swiper-container .swiper-slide .imgbox > div { opacity:0; } #mainVisual .swiper-container .swiper-slide .imgbox .img_1 { position:absolute; top:0; left:57px; } #mainVisual .swiper-container .swiper-slide .imgbox .img_2 { position:absolute; bottom:0; left:0; } #mainVisual .swiper-container .swiper-slide .imgbox .img_3 { position:absolute; bottom:0; right:0; } #mainVisual .swiper-container .swiper-slide.swiper-slide-active {} #mainVisual .swiper-container .swiper-slide.swiper-slide-active .mov { opacity:1; } #mainVisual .swiper-container .swiper-slide.swiper-slide-active .mvisualImage { animation:m_vsImg 4.5s; transform:scale(1); } #mainVisual .swiper-container .swiper-slide.swiper-slide-active .imgbox .img_1 { animation:img_1 1.5s 0.9s; animation-fill-mode:both; } #mainVisual .swiper-container .swiper-slide.swiper-slide-active .imgbox .img_2 { animation:img_2 1.5s 0.9s; animation-fill-mode:both; } #mainVisual .swiper-container .swiper-slide.swiper-slide-active .imgbox .img_3 { animation:img_3 1.5s 0.9s; animation-fill-mode:both; } #mainVisual .swiper-container .pagination { position:absolute; bottom:80px; right:180px; z-index:9; display:none; } #mainVisual .swiper-container .pagination span { display:inline-block; margin:0 15px 0 0; font-size:10px; font-weight:300; color: #fff; letter-spacing:0.11em;} #mainVisual .swiper-container .swiper-pagination.swiper-pagination { display:inline-block; position:relative; width:auto !important; bottom:auto !important; left:auto !important; z-index:99; } #mainVisual .swiper-container .swiper-pagination.swiper-pagination .swiper-pagination-bullet { background-color:#fff; width:2px; height:2px; border:none; margin:0 15px; display:inline-block; vertical-align:middle; border-radius:0 !important; } #mainVisual .swiper-container .swiper-pagination.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width:14px; height:14px; border:1px solid #fff; background:none; margin:0 -3px; border-radius:50% !important;} #mainVisual .swiper-container .btn_pn { display:none; position:absolute; top:50%; margin-top:0; transform:translateY(-50%); left:auto; text-transform:uppercase; z-index:333; color:#fff; font-size:12px; line-height:10px; height:auto !important; background:none !important; } #mainVisual .swiper-container .btn_pn span { font-weight:200; } #mainVisual .swiper-container .swiper-button-next { right:226px; } #mainVisual .swiper-container .btn_pn:after { content:""; display:block; width:350px; height:1px; position:absolute; left:55px; top:5px; background-color:rgba(255,255,255, 0.3); } #mainVisual .swiper-container .swiper-button-prev { right:283px; } #mainVisual .swiper-container .swiper-button-prev:after { width:0; } #mainVisual .swiper-container .swiper-button-prev:hover:before { width:350px; } #mainVisual .swiper-container .swiper-button-prev span:before { content:""; display:block; width:5px; height:10px; position:absolute; right:-16px; top:0; background:url(/img/main/bg_swiper_bar.png) left center no-repeat; } #mainVisual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; top:calc(50% - 60px); left:50%; max-width:1400px; width:100%; transform:translate(-50%, -50%); z-index:15; } #mainVisual .swiper-container .swiper-slide .txtbox .txt { position:relative; } #mainVisual .swiper-container .swiper-slide .txtbox .txt > div { overflow:hidden; display:inline-block; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div { margin:15px 0 0 0; } #mainVisual .swiper-container .swiper-slide .txtbox .txt > div span { opacity:0; font-size:62px; font-weight:600; color:#fff; line-height:75px; padding-right:5px; letter-spacing:-0.02em; display:inline-block; position:relative; word-break: break-word; word-wrap: break-word; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div span { line-height:100px; } #mainVisual .swiper-container .swiper-slide.s-slide2 .txtbox .txt > div span, #mainVisual .swiper-container .swiper-slide.s-slide3 .txtbox .txt > div span { color: #333; font-size:55px; } #mainVisual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt > div span { animation:txtLeft 1.0s 1.0s; animation-fill-mode:both; } #mainVisual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt.txt_2 > div span { animation:txtLeft 1.0s 1.5s; animation-fill-mode:both; } #mainVisual .newsBox { position:absolute; bottom:0; left:50%; transform:translateX(-50%);z-index:3; max-width:1400px; width:100%; } #mainVisual .newsBox .box { position:relative; width:66%; height:100px; padding:25px 100px 0 60px; box-sizing:border-box; overflow:hidden; } #mainVisual .newsBox .title { opacity:0; color:#fff; font-size:16px; font-weight:500; letter-spacing:-0.02em; } #mainVisual .newsBox #news-container { opacity:0; margin:15px 0 0 0; } #mainVisual .newsBox li { color:#fff; font-size:16px; font-weight:300; overflow:hidden; padding:1px 0; margin:4px 0; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; } #mainVisual .newsBox li a { color:#fff; font-weight:300; } #mainVisual .newsBox .btn_more { position:absolute; right:60px; top:50%; margin-top:-13px; } #mainVisual .newsBox .btn_more a { position:relative; width:25px; height:25px; display:block; text-indent:-9999em; overflow:hidden; } #mainVisual .newsBox .btn_more a:after { content:""; display:block; width:25px; height:25px; position:absolute; left:0; top:0; background:url(/img/main/btn_more.png) center center no-repeat; transform:rotate(0deg); transition:all 0.4s ease-in-out; } #mainVisual .newsBox .btn_more a:hover:after { transform:rotate(180deg);} #mainVisual .newsBox .box:before, #mainVisual .newsBox .box:after{ content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; transition:.8s ease-in-out; z-index:-1; } #mainVisual .newsBox .box:before{ right:-50%; border-right:132px solid transparent; border-top:132px solid #223888; transform:translateX(-100%); } #mainVisual .newsBox .box:after{ left:-50%; border-left:132px solid transparent; border-bottom:132px solid #223888; transform:translateX(100%); } .main1 { overflow:hidden; } .main1.on #mainVisual .newsBox .box:before, .main1.on #mainVisual .newsBox .box:after{ transform:translateX(0); } .main1.on #mainVisual .newsBox .title { animation:ani_2 0.5s 0.5s; animation-fill-mode:both; } .main1.on #mainVisual .newsBox #news-container { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; } @media screen and (max-width:1480px){ #mainVisual .swiper-container .swiper-slide .imgbox { top:80px; right:50px; width:650px; height:490px; } #mainVisual .swiper-container .swiper-slide .imgbox .img_1 img, #mainVisual .swiper-container .swiper-slide .imgbox .img_2 img, #mainVisual .swiper-container .swiper-slide .imgbox .img_3 img { width:100% } #mainVisual .swiper-container .swiper-slide .txtbox { padding:0 0 0 50px; box-sizing:border-box; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div { margin:10px 0 0 0; } #mainVisual .swiper-container .swiper-slide .txtbox .txt > div span { font-size:50px; line-height:65px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div span { line-height:80px; } #mainVisual .swiper-container .swiper-slide.s-slide2 .txtbox .txt > div span { font-size:45px; } #mainVisual .newsBox .box { width:66%; height:90px; padding:20px 100px 0 60px; } } @media screen and (max-width:1024px){ #mainVisual .swiper-container .swiper-slide { height:calc(100vh - 70px); } #mainVisual .swiper-container .swiper-slide .txtbox { padding:0 0 0 20px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div { margin:10px 0 0 0; } #mainVisual .swiper-container .swiper-slide .txtbox .txt > div span { font-size:40px; line-height:45px; } #mainVisual .swiper-container .swiper-slide.s-slide2 .txtbox .txt > div span { font-size:38px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div span { line-height:65px; } #mainVisual .newsBox .box { width:66%; height:90px; padding:20px 90px 0 40px; } #mainVisual .newsBox #news-container { opacity:0; margin:10px 0 0 0; } #mainVisual .newsBox .btn_more { right:40px; } } @media screen and (max-width:860px){ #mainVisual .swiper-container .swiper-slide .imgbox { top:auto; bottom:80px; right:50px; width:450px; height:340px; } #mainVisual .swiper-container .swiper-slide .txtbox { top:20%; transform:translate(-50%, 0); } #mainVisual .swiper-container .swiper-slide .txtbox .txt { text-align:center; } #mainVisual .swiper-container .swiper-slide .txtbox .txt > div span { font-size:38px; line-height:46px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt > div span span.m_br { display:block; } #mainVisual /*.swiper-container .swiper-slide .txtbox .txt:nth-child(2) > div span { font-size:16px; font-weight:300; }*/ #mainVisual .swiper-container .swiper-slide.s-slide2 .txtbox .txt > div span { font-size:34px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div span { line-height:45px; } #mainVisual .newsBox .box { width:100%; height:80px; padding:20px 70px 0 40px; } #mainVisual .newsBox .btn_more a:after { background:url(/img/main/btn_more1.png) center center no-repeat; } } @media screen and (max-width:640px){ #mainVisual .swiper-container .swiper-slide .imgbox { right:0; width:400px; height:300px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt > div span { font-size:34px; line-height:44px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div span { line-height:44px; } } @media screen and (max-width:500px){ #mainVisual .swiper-container .swiper-slide .txtbox .txt > div span { font-size:30px; line-height:40px; } #mainVisual .swiper-container .swiper-slide.s-slide2 .txtbox .txt > div span { font-size:30px; } #mainVisual .swiper-container .swiper-slide .txtbox .txt.txt_2 > div span { line-height:40px; } } /* services */ .main2 { position:relative; } .main2 .bg { position:absolute; right:0; top:0; width:37%; height:100vh; background:url(/img/main/bg_services.jpg) left center no-repeat; background-size:cover; } .main2 .bg:before { content:''; display:block; width:100%; height:100%; position:absolute; bottom:0; left:0; background-color:#f5f5f5; z-index:2; } .main2.on .bg:before{ height:0; transition:height 0.5s; } .main2 .servicesBox { position:absolute; bottom:0; left:50%; max-width:1400px; width:100%; transform:translateX(-50%); } .main2 .servicesBox .titleBox { opacity:0;} .main2 .servicesBox .titleBox h3.tit { font-size:80px; font-weight:600; color:#222; } .main2 .servicesBox .titleBox p { margin:15px 0 0 0; font-size:36px; font-weight:200; color:#222; } .main2 .swiper-info { position:relative; max-width:980px; width:100%; margin:55px 0 0 0;} .main2 .swiper-info .swiper-container { position:relative; left:0; width:100% !important; margin:0; } .main2 .swiper-info .swiper-container .swiper-slide { opacity:0; padding-bottom:20px; z-index:1; display:flex; } .main2 .swiper-info .swiper-container .swiper-slide .box { cursor:pointer; display:table-cell; position:relative; width:100%; height:140px; text-align:center; background-color:#f5f5f5; transition:all 0.3s ease-in-out; } .main2 .swiper-info .swiper-container .swiper-slide .box:before { content:""; display:block; width:100%; height:100%; position:absolute; top:0; z-index:9; left:0; transition:all 0.3s ease-in-out; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon { position:relative; display:block; width:100%; margin:0 0 12px 0; background-position:center bottom; background-repeat:no-repeat; transition:all 0.3s ease-in-out; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon:before { content:""; display:block; padding-bottom:52%; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon.icon1 { background-image:url(/img/main/img_services_s1.png); background-position:calc(50% + 5px) bottom; margin:0 0 20px 0; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon.icon2 { background-image:url(/img/main/img_services_s2.png); margin:0 0 20px 0; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon.icon3 { background-image:url(/img/main/img_services_s3.png); margin:0 0 20px 0; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon.icon4 { background-image:url(/img/main/img_services_s4.png); background-position:calc(50% + 2px) bottom; margin:0 0 20px 0;} .main2 .swiper-info .swiper-container .swiper-slide .box .icon.icon5 { background-image:url(/img/main/img_services_s5.png); background-position:calc(50% + 1px) bottom; margin:0 0 20px 0; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon.icon6 { background-image:url(/img/main/img_services_s6.png); margin:0 0 20px 0; } .main2 .swiper-info .swiper-container .swiper-slide .box .icon.icon7 { background-image:url(/img/main/img_services_s7.png); background-position:calc(50% + 3px) bottom; margin:0 0 20px 0;} .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active { z-index:2; } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box .icon.icon1 { background-image:url(/img/main/img_services_s1_on.png); } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box .icon.icon2 { background-image:url(/img/main/img_services_s2_on.png); } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box .icon.icon3 { background-image:url(/img/main/img_services_s3_on.png); } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box .icon.icon4 { background-image:url(/img/main/img_services_s4_on.png); } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box .icon.icon5 { background-image:url(/img/main/img_services_s5_on.png); } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box .icon.icon6 { background-image:url(/img/main/img_services_s6_on.png); } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box .icon.icon7 { background-image:url(/img/main/img_services_s7_on.png); } .main2 .swiper-info .swiper-container .swiper-slide .box strong { display:block; vertical-align:middle; width:100%; font-weight:400; color:#222; font-size:16px; line-height:20px; letter-spacing:-0.02em; transition:all 0.3s ease-in-out; } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box { background-color:#233b8f;} .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box:before { box-shadow:5px 5px 8px #ccd0e1; } .main2 .swiper-info .swiper-container .swiper-slide.swiper-slide-thumb-active .box strong { color:#fff; } .main2 .swiper-info .btn_pn { position:absolute; top:-40px; left:auto; right:60px !important; display:inline-block !important; vertical-align:middle; width:30px; height:30px; outline:none; background-position:center center; background-repeat:no-repeat; background-size:auto !important; } .main2 .swiper-info .swiper-button-prev { margin-right:36px; background-image:url(/img/main/btn_swiper_v_prev.png); } .main2 .swiper-info .swiper-button-next { background-image:url(/img/main/btn_swiper_v_next.png); } .main2 .swiper-info .swiper-button-next:before { content:''; display:block; width:1px; height:10px; position:absolute; top:50%; left:-4px; margin-top:-5px; background-color:#aaa; } .main2 .swiper-services { position:relative; height:400px; } .main2 .swiper-services .swiper-container { opacity:0; position:relative; width:100%; height:100%; overflow:hidden; } .main2 .swiper-services .swiper-container .swiper-slide { position:relative; width:100%; height:100%; overflow:hidden; display:flex; } .main2 .swiper-services .swiper-container .swiper-slide .box { display:none; margin:45px 0 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box:after {content:""; display:block; visibility:hidden; clear:both; height:0; } .main2 .swiper-services .swiper-container .swiper-slide .box .imgbox { float:left; position:relative; opacity:0; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox { float:left; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dl { padding:55px 0 0 50px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt { color:#233b8f; font-size:18px; font-weight:400; margin-left:3px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt span { opacity:0; color:#233b8f; font-weight:400; display:block; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt strong { opacity:0; margin:20px 0 0 -3px; display:block; color:#222; font-size:45px; font-weight:700; letter-spacing:-0.02em; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd { opacity:0; margin:40px 0 0 0; display:block; color:#444; font-size:18px; line-height:32px; font-weight:300; letter-spacing:-0.02em; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd .btn_more { display:block; margin:20px 0 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd .btn_more a { text-transform:uppercase; font-size:15px; font-weight:400; color:#444; } .main2 .swiper-services .swiper-container .swiper-slide.swiper-slide-active .box { display:block; } .main2 .swiper-services .swiper-container .swiper-slide.swiper-slide-active .box .imgbox { animation:ani_1 0.5s 0.5s; animation-fill-mode:both; } .main2 .swiper-services .swiper-container .swiper-slide.swiper-slide-active .box .txtbox dt span { animation:ani_2 0.5s 0.5s; animation-fill-mode:both; } .main2 .swiper-services .swiper-container .swiper-slide.swiper-slide-active .box .txtbox dt strong { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; } .main2 .swiper-services .swiper-container .swiper-slide.swiper-slide-active .box .txtbox dd { animation:ani_2 0.5s 1.2s; animation-fill-mode:both; } .main2.on .servicesBox .titleBox { animation:ani_3 0.5s 0.3s; animation-fill-mode:both; } .main2.on .swiper-services .swiper-container { animation:ani_5 0.5s 0.2s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(1) { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(2) { animation:ani_3 0.5s 0.4s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(3) { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(4) { animation:ani_3 0.5s 0.8s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(5) { animation:ani_3 0.5s 1.0s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(6) { animation:ani_3 0.5s 1.2s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(7) { animation:ani_3 0.5s 1.4s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(8) { animation:ani_3 0.5s 1.6s; animation-fill-mode:both; } .main2.on .swiper-info .swiper-container .swiper-slide:nth-child(9) { animation:ani_3 0.5s 1.8s; animation-fill-mode:both; } @media screen and (max-width:1480px){ .main2 .bg { width:38%; } .main2 .servicesBox { padding:0 50px; box-sizing:border-box; } .main2 .servicesBox .titleBox h3.tit { font-size:60px; } .main2 .servicesBox .titleBox p { margin:12px 0 0 0; font-size:32px; } .main2 .swiper-info { max-width:840px; } .main2 .swiper-info .swiper-container .swiper-slide .box, .main2 .swiper-info .swiper-container .swiper-slide .box:before { height:120px; } .main2 .swiper-info .swiper-container .swiper-slide .box strong { font-size:14px; line-height:18px; } .main2 .swiper-services { position:relative; height:380px; } .main2 .swiper-services .swiper-container .swiper-slide .box { margin:40px 0 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box .imgbox { width:340px; } .main2 .swiper-services .swiper-container .swiper-slide .box .imgbox img { width:100%; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox { width:calc(100% - 340px); } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dl { padding:45px 0 0 10px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt { font-size:17px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt strong { margin:18px 0 0 -3px; font-size:38px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd { margin:35px 0 0 0; font-size:17px; line-height:30px; } } @media screen and (max-width:1280px){ .main2 .bg { width:36%; } .main2 .servicesBox { padding:0 40px; box-sizing:border-box; } .main2 .servicesBox .titleBox h3.tit { font-size:50px; } .main2 .servicesBox .titleBox p { margin:12px 0 0 0; font-size:28px; } .main2 .swiper-services { position:relative; height:380px; } .main2 .swiper-services .swiper-container .swiper-slide .box { margin:40px 0 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box .imgbox { width:280px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox { width:calc(100% - 280px); } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dl { padding:40px 0 0 10px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt { font-size:16px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt strong { margin:18px 0 0 -3px; font-size:34px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd { margin:30px 0 0 0; font-size:16px; line-height:30px; } } @media screen and (max-width:1280px){ .main2 .bg { width:28%; } } @media screen and (max-width:1024px){ .main2 .bg { left:0; top:0; width:100%; height:380px; background:url(/img/main/bg_services_m.jpg) left center no-repeat; background-size:cover; } .main2 .servicesBox .titleBox { padding:100px 0 0 0; } .main2 .servicesBox .titleBox h3.tit { color:#fff; } .main2 .servicesBox .titleBox p { color:#fff; } .main2 .servicesBox { position:relative; bottom:0; padding:30px 0 80px 20px; } .main2 .swiper-info { max-width:100% !important; margin:50px auto 0 auto; width:calc(100% - 20px); padding-right:20px; background-color:#f5f5f5; } .main2 .swiper-info .swiper-container { } .main2 .swiper-info .swiper-container .swiper-slide { position:relative; width:14.3% !important; padding-bottom:0; padding-right:1px; margin-right:-1px; } .main2 .swiper-info .swiper-container .swiper-slide:before { content:""; display:block; padding-bottom:100%; } .main2 .swiper-info .swiper-container .swiper-slide .box { position:absolute; left:0; top:0; } .main2 .swiper-info .swiper-container .swiper-slide .box, .main2 .swiper-info .swiper-container .swiper-slide .box:before { width:100% !important; height:100% !important; } .main2 .swiper-services .swiper-container .swiper-slide { width:100%; } .main2 .swiper-services .swiper-container .swiper-slide .box .imgbox { float:left; width:60%; max-width:320px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox { width:100%; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dl { padding:0 20px 0 0; text-align:right;} .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt { margin-top:-150px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd { margin:50px 0 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd .btn_more { margin:15px 0 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd .btn_more a { font-size:14px; } .main2 .swiper-info .btn_pn { top:-20px; right:7px !important; } .main2 .swiper-info .swiper-button-prev { background-image:url(/img/main/btn_swiper_v_prev_ws.png); } .main2 .swiper-info .swiper-button-next { background-image:url(/img/main/btn_swiper_v_next_ws.png); } .main2 .swiper-info .swiper-button-next:before { background-color:#fff; } } @media screen and (max-width:860px){ .main2 .swiper-info .swiper-container .swiper-slide { width:16.7% !important; } } @media screen and (max-width:760px){ .main2 .servicesBox { position:relative; bottom:0; padding:30px 0 60px 20px; } .main2 .servicesBox .titleBox h3.tit { font-size:34px; } .main2 .servicesBox .titleBox p { margin:12px 0 0 0; font-size:18px; } .main2 .swiper-info .swiper-container .swiper-slide { width:20.2% !important; } .main2 .swiper-services { height:auto; } .main2 .swiper-services .swiper-container .swiper-slide .box { margin:20px 0 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox { width:100%; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dl { padding:10px 0 0 0;} .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt { font-size:15px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt strong { margin:15px 0 0 -3px; font-size:28px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd { font-size:15px; line-height:28px; } } @media screen and (max-width:640px){ .main2 .bg { height:280px; } .main2 .swiper-info .swiper-container .swiper-slide { width:25.2% !important; } .main2 .swiper-info .swiper-container .swiper-slide .box strong { margin-top:-6px; font-size:12px; line-height:16px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dl { padding:0 20px 0 0; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt { margin-top:-80px; font-size:14px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dt strong { margin:12px 0 0 -3px; font-size:24px; } .main2 .swiper-services .swiper-container .swiper-slide .box .txtbox dd { margin:40px 0 0 0; font-size:14px; line-height:24px; } } @media screen and (max-width:480px){ .main2 .swiper-info .swiper-container .swiper-slide { width:25.2% !important; } .main2 .swiper-info .swiper-container .swiper-slide .icon { background-size:30% auto !important; } } /* result */ .main3 { position:relative; } .main3 .bg { position:absolute; left:0; top:0; width:100%; height:45vh; background:#2f363d url(/img/main/bg_result.jpg) center top no-repeat; background-size:cover !important; } .main3 .resultBox { position:relative; top:0; left:50%; z-index:1; max-width:1400px; width:100%; transform:translateX(-50%); height:100vh; min-height:700px; box-sizing:border-box; } .main3 .resultBox .res_imgbox { opacity:0; position:absolute; margin-top:100px; width:550px; box-shadow:10px 10px 20px rgba(39,39,39,0.6); } .main3 .resultBox .res_imgbox > span { opacity:0; position:relative; z-index:2; width:100%; height:680px; display:block; } .main3 .resultBox .res_imgbox > span.img1 { background:url(/img/main/img_result_s02.jpg) left top no-repeat; } .main3 .resultBox .res_imgbox:after { opacity:0; content:""; display:block; position:absolute; left:50px; top:70px; width:100%; height:100%; background-color:#14236f; transition:all 0.5s ease-in-out; } .main3 .resultBox .swiper-result { position:relative; } .main3 .resultBox .swiper-result .swiper-container { opacity:0; position:relative; width:100%; overflow:hidden; z-index:2; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide { position:relative; width:100%; display:flex; margin:20px 0 0 0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox { position:relative; margin:0 0 70px 0; width:550px; } /* .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span { position:relative; z-index:2; width:550px; height:680px; display:block; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span.img1 { background:url(/img/main/img_result_s01.jpg) left top no-repeat; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span.img2 { background:url(/img/main/img_result_s02.jpg) left top no-repeat; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox img { position:relative; z-index:1; margin:0;} .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox { opacity:1; box-shadow:10px 10px 20px rgba(39,39,39,0.6) } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox img { position:relative; z-index:1; margin:-20px 0 0 -20px; transition:all 0.5s ease-in-out; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox > span { margin:-20px 0 0 -20px; transition:all 0.5s ease-in-out; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#14236f; transition:all 0.5s ease-in-out; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox:after { left:50px; top:70px; } */ .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox { opacity:0; position:relative; padding:210px 0 0 102px; opacity:0; z-index:2; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 { opacity:0; color:#fefefe; font-size:52px; font-weight:500; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 strong { font-size:110px; font-weight:500; display:inline-block; margin:0 0 0 15px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 strong:first-child { margin:0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 sup { font-size:20px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 { position:relative; color:#fff; font-size:22px; font-weight:400; letter-spacing:-0.02em; margin:25px 0 0 285px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2:after {content:""; display:block; position:absolute; left:-545px; top:50%; margin-top:-1px; width:0; height:2px; background-color:#fff; transition:all 0.5s ease-in-out; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 span { color:rgba(255,255,255,0.3); font-size:19px; font-weight:300; display:inline-block; margin:0 0 0 22px; letter-spacing:0;} .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active { } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .txtbox { display:inline-block; opacity:1; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt_2:after { width:500px; } .main3 .resultBox .swiper-result .btn_pn { position:absolute; top:380px; left:auto; right:0 !important; display:inline-block !important; vertical-align:middle; width:30px; height:30px; outline:none; background-position:center center; background-repeat:no-repeat; background-size:auto !important; } .main3 .resultBox .swiper-result .swiper-button-prev { margin-right:36px; background-image:url(/img/main/btn_swiper_v_prev_w.png); } .main3 .resultBox .swiper-result .swiper-button-next { background-image:url(/img/main/btn_swiper_v_next_w.png); } .main3 .resultBox .swiper-result .swiper-button-next:before { content:''; display:block; width:1px; height:10px; position:absolute; top:50%; left:-4px; margin-top:-5px; background-color:#6a6f74; } .main3 .resultBox .r-txtbox { position:absolute; right:0; top:52%; z-index:9; } .main3 .resultBox .r-txtbox .txt { opacity:0; } .main3 .resultBox .r-txtbox .txt strong { display:inline-block; vertical-align:middle; color:#222; font-size:64px; font-weight:600; letter-spacing:-0.02em; } .main3 .resultBox .r-txtbox .txt span { display:inline-block; vertical-align:middle; color:#444; font-size:16px; line-height:24px; font-weight:300; letter-spacing:-0.02em; margin:0 0 0 10px; } .main3 .resultBox .r-txtbox ul { margin:68px 0 0 -23px; } .main3 .resultBox .r-txtbox li { opacity:0; width:230px; height:260px; float:left; display:inline-block; margin:0 0 0 23px; background-color:#fff; border:1px solid #ddd; box-sizing:border-box; } .main3 .resultBox .r-txtbox li .sbox { display:table; width:100%; height:100%; } .main3 .resultBox .r-txtbox li a { text-align:center; vertical-align:middle; box-sizing:border-box; transition:all 0.3s ease-in-out; } .main3 .resultBox .r-txtbox li .sbox > span { width:100%; height:100%; display:table-cell; vertical-align:middle; } .main3 .resultBox .r-txtbox li .sbox > span:after { content:''; display:block; width:0; height:2px; position:absolute; left:50%; transform:translateX(-50%); top:0; background-color:#14236f; transition:all 0.3s ease-in-out; } .main3 .resultBox .r-txtbox li .sbox > span:before { content:''; display:block; width:0; height:2px; position:absolute; left:50%; transform:translateX(-50%); bottom:0; background-color:#14236f; transition:all 0.3s ease-in-out; } .main3 .resultBox .r-txtbox li:hover .sbox > span:after, .main3 .resultBox .r-txtbox li:hover .sbox > span:before { width:calc(100% - 1px); } .main3 .resultBox .r-txtbox li:after { content:''; display:block; width:2px; height:0; position:absolute; top:50%; transform:translateY(-50%); left:0; background-color:#14236f; transition:all 0.3s ease-in-out; } .main3 .resultBox .r-txtbox li:before { content:''; display:block; width:2px; height:0; position:absolute; top:50%; transform:translateY(-50%); right:0; background-color:#14236f; transition:all 0.3s ease-in-out; } .main3 .resultBox .r-txtbox li:hover:after, .main3 .resultBox .r-txtbox li:hover:before { height:calc(100% - 1px); } .main3 .resultBox .r-txtbox li .icon { display:block; } .main3 .resultBox .r-txtbox li strong { margin:20px 0 0 0; display:block; color:#222; font-size:18px; font-weight:500; letter-spacing:-0.02em; } .main3 .resultBox .r-txtbox li span.stxt { margin:15px 0 0 0; display:block; color:#444; font-size:16px; font-weight:300; line-height:24px; letter-spacing:-0.02em; } .main3.on .resultBox .res_imgbox { animation:ani_5 0.5s 0.5s; animation-fill-mode:both; } .main3.on .resultBox .res_imgbox > span { animation:ani_5 0.5s 0.5s; animation-fill-mode:both; } .main3.on .resultBox .res_imgbox:after { animation:ani_5 1.5s 0.8s; animation-fill-mode:both; } .main3.on .resultBox .swiper-result .swiper-container { animation:ani_1 0.5s 0.5s; animation-fill-mode:both; } .main3.on .resultBox .r-txtbox .txt { animation:ani_3 0.5s 0.5s; animation-fill-mode:both; } .main3.on .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt_1 { animation:ani_1 0.5s 0.3s; animation-fill-mode:both; } .main3.on .resultBox .r-txtbox li:nth-child(1) { animation:ani_3 0.5s 0.5s; animation-fill-mode:both; } .main3.on .resultBox .r-txtbox li:nth-child(2) { animation:ani_3 0.5s 0.8s; animation-fill-mode:both; } .main3.on .resultBox .r-txtbox li:nth-child(3) { animation:ani_3 0.5s 1.1s; animation-fill-mode:both; } @media screen and (max-width:1480px){ .main3 .resultBox { padding:0 50px; box-sizing:border-box; } .main3 .resultBox .res_imgbox { width:460px; } .main3 .resultBox .res_imgbox > span { height:568px; } .main3 .resultBox .res_imgbox:after {left:40px; top:40px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide { margin:150px 0 40px 0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox { width:460px; margin:0; } /* .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox img { width:460px; margin:0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span { width:460px; height:568px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox:after { left:40px; top:40px; } */ .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox { padding:55px 0 0 102px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 { font-size:48px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 strong { font-size:98px; margin:0 0 0 15px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 { font-size:20px; margin:25px 0 0 255px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 span { font-size:19px; margin:0 0 0 22px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2:after { left:-505px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt_2:after { width:440px; } .main3 .resultBox .swiper-result .btn_pn { top:344px; right:80px !important; } .main3 .resultBox .r-txtbox { right:30px; top:50%; } .main3 .resultBox .r-txtbox .txt strong { display:block; } .main3 .resultBox .r-txtbox .txt span { display:block; margin:10px 0 0 0; } .main3 .resultBox .r-txtbox .txt span br { display:none; } .main3 .resultBox .r-txtbox ul { margin:40px 0 0 -15px; } .main3 .resultBox .r-txtbox li { margin:0 0 0 15px; width:220px; height:255px; } } @media screen and (max-width:1280px){ .main3 .bg { min-height:340px; } .main3 .resultBox { padding:0 40px; } .main3 .resultBox .res_imgbox { width:400px; } .main3 .resultBox .res_imgbox > span { height:494px; } .main3 .resultBox .res_imgbox:after {left:40px; top:40px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide { margin:150px 0 40px 0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox { width:400px; } /* .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox img { width:400px; margin:0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span { width:400px; height:494px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox:after { left:40px; top:40px; } */ .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox { padding:55px 0 0 102px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 { font-size:48px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 strong { font-size:68px; margin:0 0 0 15px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 { font-size:18px; margin:25px 0 0 105px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 span { font-size:16px; margin:0 0 0 15px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2:after { left:-345px; height:1px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt_2:after { width:300px; } .main3 .resultBox .swiper-result .btn_pn { top:314px; right:80px !important; } .main3 .resultBox .r-txtbox .txt { opacity:0; } .main3 .resultBox .r-txtbox .txt strong {font-size:50px; } .main3 .resultBox .r-txtbox .txt span { font-size:15px; line-height:20px; } .main3 .resultBox .r-txtbox .txt span br { display:block; } .main3 .resultBox .r-txtbox ul { margin:40px 0 0 -10px; } .main3 .resultBox .r-txtbox li { margin:0 0 0 10px; width:170px; height:220px; } .main3 .resultBox .r-txtbox li strong { margin:15px 0 0 0; font-size:16px; } .main3 .resultBox .r-txtbox li span.stxt { margin:15px 0 0 0; font-size:14px; line-height:20px; } } @media screen and (max-width:1024px){ .main3 { background-color:#f9f9f9 !important; } .main3 .bg { height:350px; background:url(/img/main/bg_result_m.jpg) center top no-repeat; } .main3 .resultBox { padding:270px 40px 0 40px; position:relative; height:auto; min-height:400px; } .main3 .resultBox:after { content:""; display:block; padding-bottom:50%; } .main3 .resultBox .res_imgbox { width:100%; margin:0; position:relative; } .main3 .resultBox .res_imgbox > span.img1 { background:url(/img/main/img_result_s02_m.jpg) left top no-repeat; } .main3 .resultBox .res_imgbox > span { height:280px; background-size:cover !important; } .main3 .resultBox .res_imgbox:after { display:none;} .main3 .resultBox .swiper-result { position:relative; } .main3 .resultBox .swiper-result .swiper-container { margin-top:-50px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide { margin:0; padding-bottom:100px; width:100%; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox { height:150px; width:100%; } /* .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox img { width:100%; height:100%; margin:0; position:absolute; left:0; top:0; object-fit:cover; -o-object-fit:cover; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span { width:100%; height:280px; background-size:cover !important; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span.img1 { background:url(/img/main/img_result_s01_m.jpg) left top no-repeat; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span.img2 { background:url(/img/main/img_result_s02_m.jpg) left top no-repeat; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox { box-shadow:0 0 0 rgba(39,39,39,0) } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox > span { margin:0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox img { margin:0; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .imgbox:after { display:none; } */ .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox { position:absolute; left:0; top:80px; width:100%; padding:0 0 0 0; text-align:right; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 { font-size:30px; color:#222; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 strong { font-size:45px; margin:0 0 0 15px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 { font-size:18px; margin:25px 0 0 105px; color:#222; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 span { font-size:16px; margin:0 0 0 15px; color:rgba(34,34,34,.3); } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2:after { left:-80px; top:-180px; height:0; width:3px; background-color:#233b8f; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt_2:after { height:200px; width:3px; } .main3 .resultBox .swiper-result .btn_pn { top:400px; left:100px !important; right:auto !important; } .main3 .resultBox .swiper-result .swiper-button-prev { margin-left:-36px; background-image:url(/img/main/btn_swiper_v_prev.png); } .main3 .resultBox .swiper-result .swiper-button-next { background-image:url(/img/main/btn_swiper_v_next.png); } .main3 .resultBox .r-txtbox { position:absolute; left:0; top:140px; padding:0 40px; width:calc(100% - 80px); z-index:1; } .main3 .resultBox .r-txtbox .txt strong { color:#fff; } .main3 .resultBox .r-txtbox .txt span { color:#8b8b8b; } .main3 .resultBox .r-txtbox .txt span br { display:none; } .main3 .resultBox .r-txtbox ul { margin:40px 0 0 -10px; padding:470px 0 0 0; } .main3 .resultBox .r-txtbox li { width:calc(33.33% - 10px); height:260px; margin:0 0 0 10px; } } @media screen and (max-width:860px){ .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 { font-size:24px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 strong { font-size:40px; margin:0 0 0 15px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 sup { font-size:14px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 { font-size:16px; margin:22px 0 0 105px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 span { font-size:14px; margin:0 0 0 15px; } .main3 .resultBox .r-txtbox ul { margin:30px 0 0 -5px; } .main3 .resultBox .r-txtbox li { width:calc(33.33% - 5px); margin:0 0 0 5px; position:relative; background-color:#f9f9f9; height:auto; } .main3 .resultBox .r-txtbox li:before, .main3 .resultBox .r-txtbox li:after, .main3 .resultBox .r-txtbox li .sbox > span:after, .main3 .resultBox .r-txtbox li .sbox > span:before { display:none; } .main3 .resultBox .r-txtbox li span.stxt { display:none; } .main3 .resultBox .r-txtbox li .sbox { height:200px; } .main3 .resultBox .r-txtbox li .icon img { width:30%; } } @media screen and (max-width:640px){ .main3 .bg { height:280px; } .main3 .resultBox { padding:200px 20px 0 20px; } .main3 .resultBox:after { padding-bottom:45%; } .main3 .resultBox .res_imgbox > span { height:220px; } /* .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox, .main3 .resultBox .swiper-result .swiper-container .swiper-slide .imgbox > span { height:220px; } */ .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox { position:absolute; left:0; top:85px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 { font-size:30px; color:#222; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_1 strong { font-size:40px; margin:0 0 0 15px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 { font-size:16px; margin:20px 0 0 105px; color:#222; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2 span { font-size:16px; margin:0 0 0 15px; color:rgba(34,34,34,.3); } .main3 .resultBox .swiper-result .swiper-container .swiper-slide .txtbox .txt_2:after { left:-90px; top:-140px; } .main3 .resultBox .swiper-result .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt_2:after { height:160px; } .main3 .resultBox .swiper-result .btn_pn { top:330px; left:80px !important; } .main3 .resultBox .r-txtbox { top:80px; padding:0 20px; width:calc(100% - 40px); } .main3 .resultBox .r-txtbox .txt strong {font-size:34px; } .main3 .resultBox .r-txtbox .txt span { font-size:14px; line-height:18px; } .main3 .resultBox .r-txtbox ul { padding:400px 0 0 0; } .main3 .resultBox .r-txtbox li .sbox { height:140px; } } /* research */ .main4 { position:relative; } .main4 .bg { position:absolute; left:0; bottom:0; width:100%; height:50vh; background:#f1f2f5 url(/img/main/bg_research.jpg) center bottom no-repeat; background-size:cover; } .main4 .research_Box { position:relative; top:50px; left:50%; z-index:1; max-width:1400px; width:100%; transform:translateX(-50%); } .main4 .research_Box .titleBox { position:relative; } .main4 .research_Box .titleBox h3.tit { opacity:0; font-size:60px; font-weight:600; color:#222; letter-spacing:-0.02em; display:inline-block; } .main4 .research_Box .titleBox p { opacity:0; margin:0 0 0 10px; font-size:17px; font-weight:300; color:#555; letter-spacing:-0.01em; display:inline-block; } .main4 .research_Box .titleBox a { opacity:0; width:78px; height:78px; border:1px solid #aaa; position:absolute; right:0; top:-33px; text-indent:-9999em; overflow:hidden; } .main4 .research_Box .titleBox a:after { content:""; display:block; width:25px; height:25px; position:absolute; left:50%; top:50%; background:url(/img/main/btn_more_p1.png) center center no-repeat; transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) rotate(0deg); transition:all 0.3s ease-in-out; } .main4 .research_Box .titleBox a:hover:after { transform:translate(calc(-50% + 0.5px), calc(-50% + 0.5px)) rotate(180deg); } .main4 .research_Box .listbox { margin:55px 0 0 0; overflow:hidden; } .main4 .research_Box .listbox > ul { margin:0 0 0 -3px; } .main4 .research_Box .listbox > ul:after {content:""; display:block; visibility:hidden; clear:both; height:0; } .main4 .research_Box .listbox > ul > li { opacity:0; position:relative; float:left; height:480px; width:calc(14% - 3px); margin:0 0 0 3px; transition:width .6s; } .main4 .research_Box .listbox > ul > li > a { display:block; width:100%; height:100%;} .main4 .research_Box .listbox > ul > li:nth-child(1) { background: url(/img/main/bg_research_l1.jpg) left center no-repeat; background-size:cover !important; } .main4 .research_Box .listbox > ul > li:nth-child(2) { background: url(/img/main/bg_research_l2.jpg) left center no-repeat; background-size:cover !important; } .main4 .research_Box .listbox > ul > li:nth-child(3) { background: url(/img/main/bg_research_l3.jpg) left center no-repeat; background-size:cover !important; } .main4 .research_Box .listbox > ul > li:nth-child(4) { background: url(/img/main/bg_research_l4.jpg) left center no-repeat; background-size:cover !important; } .main4 .research_Box .listbox > ul > li.active:nth-child(1) { background: url(/img/main/bg_research_l1_on.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active:nth-child(2) { background: url(/img/main/bg_research_l2_on.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active:nth-child(3) { background: url(/img/main/bg_research_l3_on.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active:nth-child(4) { background: url(/img/main/bg_research_l4_on.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active { width:calc(58% - 3px); } .main4 .research_Box .listbox li .txt { position:absolute; left:30px; bottom:50px; transition:all 0.3s ease-in-out; } .main4 .research_Box .listbox li .txt strong { font-size:30px; font-weight:700; color:#fff; display:block; } .main4 .research_Box .listbox li .txt strong span { font-weight:700; display:none } .main4 .research_Box .listbox li .txt > span { opacity:0; visibility:hidden; transition:all 0.3s ease-in-out; } .main4 .research_Box .listbox li .txt .btn { display:none; width:25px; height:25px; position:absolute; right:0; top:33px; text-indent:-9999em; overflow:hidden; } .main4 .research_Box .listbox li .txt .btn:after { content:""; display:block; width:25px; height:25px; position:absolute; left:0; top:0; background:url(/img/main/btn_more_p.png) center center no-repeat; transform:rotate(0deg); transition:all 0.3s ease-in-out; } .main4 .research_Box .listbox li.active .txt { left:50px; bottom:70px; padding-bottom:25px; display:block; width:calc(100% - 100px); } .main4 .research_Box .listbox li.active .txt > span { display:block; opacity:1; visibility:visible; color:rgba(255,255,255,0.7); font-size:16px; letter-spacing:-0.01em; margin:10px 0 0 0; } .main4 .research_Box .listbox li.active .txt strong span { display:inline-block } .main4 .research_Box .listbox li.active .txt .btn { display:block; } .main4 .research_Box .listbox li.active .txt .btn:hover:after { transform:rotate(180deg); } .main4 .research_Box .listbox li.active .txt:after { content:""; display:block; width:0; height:1px; position:absolute; left:0; bottom:0; background-color:rgba(255,255,255,0.3); animation:w100 0.5s 0.5s; animation-fill-mode:both; } .main4.on .research_Box .listbox > ul > li:nth-child(1) { animation:ani_2 0.5s 0.5s; animation-fill-mode:both; } .main4.on .research_Box .listbox > ul > li:nth-child(2) { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; } .main4.on .research_Box .listbox > ul > li:nth-child(3) { animation:ani_2 0.5s 1.1s; animation-fill-mode:both; } .main4.on .research_Box .listbox > ul > li:nth-child(4) { animation:ani_2 0.5s 1.4s; animation-fill-mode:both; } .main4.on .research_Box .titleBox h3.tit { animation:ani_3 0.5s 0.3s; animation-fill-mode:both; } .main4.on .research_Box .titleBox p { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; } .main4.on .research_Box .titleBox a { animation:ani_2 0.5s 0.9s; animation-fill-mode:both; } .main4 .research_Box .listbox > ul > li .txt strong { animation:ani_3 0.5s 0.5s; animation-fill-mode:both; } .main4 .research_Box .listbox > ul > li.active .txt strong { animation:ani_2 0.5s 0.5s; animation-fill-mode:both; } .main4 .research_Box .listbox > ul > li.active .txt > span { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; } .main4 .research_Box .listbox > ul > li.active .txt .btn { animation:ani_1 0.5s 1.0s; animation-fill-mode:both; } @media screen and (max-width:1440px){ .main4 .research_Box { padding:0 50px; box-sizing:border-box; } } @media screen and (max-width:1280px){ .main4 .research_Box .titleBox h3.tit { font-size:55px; } .main4 .research_Box .titleBox p { font-size:17px; } .main4 .research_Box .titleBox a { width:70px; height:70px } .main4 .research_Box .listbox > ul > li { height:400px; } .main4 .research_Box .listbox li .txt { left:25px; bottom:35px; } .main4 .research_Box .listbox li .txt strong { font-size:26px; } .main4 .research_Box .listbox li .txt .btn { top:30px; } .main4 .research_Box .listbox li.active .txt { left:40px; bottom:60px; padding-bottom:18px; width:calc(100% - 80px); } } @media screen and (max-width:1024px){ .main4 .research_Box { padding:150px 20px 150px 20px; top:0; } .main4 .research_Box .titleBox a { width:65px; height:65px; top:-22px; } .main4 .research_Box .listbox > ul > li { height:110px; width:100%; margin:0; transition:height .6s; } .main4 .research_Box .listbox > ul > li.active { width:100%; height:350px; } .main4 .research_Box .listbox > ul > li:nth-child(1) { background: url(/img/main/bg_research_l1_m.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li:nth-child(2) { background: url(/img/main/bg_research_l2_m.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li:nth-child(3) { background: url(/img/main/bg_research_l3_m.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li:nth-child(4) { background: url(/img/main/bg_research_l4_m.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active:nth-child(1) { background: url(/img/main/bg_research_l1_on_m.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active:nth-child(2) { background: url(/img/main/bg_research_l2_on_m.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active:nth-child(3) { background: url(/img/main/bg_research_l3_on_m.jpg) left center no-repeat; } .main4 .research_Box .listbox > ul > li.active:nth-child(4) { background: url(/img/main/bg_research_l4_on_m.jpg) left center no-repeat; } .main4 .research_Box .listbox li .txt { left:30px; bottom:22px; width:calc(100% - 60px); } .main4 .research_Box .listbox li.active .txt { left:30px; bottom:22px; padding-bottom:18px; width:calc(100% - 60px); } .main4 .research_Box .listbox li .txt .btn { display:block; margin-top:-37px; } .main4 .research_Box .listbox li.active .txt .btn { margin-top:0; } } @media screen and (max-width:860px){ .main4 .bg { height:40vh; } .main4 .research_Box { padding:120px 20px 180px 20px;} .main4 .research_Box .titleBox h3.tit { font-size:34px; } .main4 .research_Box .titleBox p { margin:12px 0 0 0; font-size:16px; line-height:20px; display:block; } .main4 .research_Box .titleBox p span.m_br { display:block; } .main4 .research_Box .titleBox a { width:55px; height:55px; top:0px; } .main4 .research_Box .titleBox a:after { background:url(/img/main/btn_more_p3.png) center center no-repeat; } .main4 .research_Box .listbox ul { margin:0; } .main4 .research_Box .listbox li .txt strong { font-size:22px; } .main4 .research_Box .listbox li .txt .btn:after { background:url(/img/main/btn_more_p0.png) center center no-repeat; } .main4 .research_Box .listbox .slick-slide.slick-active .txt { left:20px; bottom:30px; padding-bottom:15px; width:calc(100% - 40px); } } @media screen and (max-width:640px){ .main4 .bg { height:35vh; } .main4 .research_Box { padding:100px 20px 120px 20px;} .main4 .research_Box .listbox > ul > li { height:100px; } .main4 .research_Box .listbox > ul > li.active { height:250px; } .main4 .research_Box .listbox li .txt { left:20px; bottom:20px; width:calc(100% - 40px); } .main4 .research_Box .listbox li.active .txt { left:20px; bottom:20px; padding-bottom:18px; width:calc(100% - 40px); } .main4 .research_Box .listbox li .txt .btn { display:block; margin-top:-35px; } } @media screen and (max-width:500px){ .main4 .research_Box { padding:100px 20px 100px 20px;} } /* company */ .main5 { position:relative; background:url(/img/main/bg_company.png) left 130% no-repeat; z-index:1; margin:0 auto; } .main5 .titleBox { position:relative; top:200px; left:50%; z-index:3; max-width:1400px; width:100%; transform:translateX(-50%); display:none; } .main5 .titleBox h3.tit { opacity:0; font-size:60px; font-weight:600; color:#222; letter-spacing:-0.02em; } .main5 .titleBox p { opacity:0; margin:16px 0 0 0; font-size:17px; line-height:30px; font-weight:300; color:#555; letter-spacing:-0.01em; } .main5 .companyBox { position:relative; top:0; left:50%; z-index:1; max-width:1400px; width:100%; transform:translateX(-50%); padding:150px 0 150px 0; } .main5 .companyBox:after {content:""; display:block; visibility:hidden; clear:both; height:0; } .main5 .companyBox .listbox { float:right; width:866px; } .main5 .companyBox .listbox ul { margin:-25px 0 0 -25px; } .main5 .companyBox .listbox ul:after {content:""; display:block; visibility:hidden; clear:both; height:0; } .main5 .companyBox .listbox li { opacity:0; position:relative; float:left; width:calc(50% - 25px); margin:25px 0 0 25px; box-sizing:border-box; overflow:hidden; background-color:#fff } .main5 .companyBox .listbox li:after {content:""; display:block; padding-bottom:100%; } .main5 .companyBox .listbox li > a, .main5 .companyBox .listbox li > img { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; } .main5 .companyBox .listbox li a { display:block; box-sizing:border-box; border:2px solid #f0f0f0; padding:48px 38px; } .main5 .companyBox .listbox li .type { font-size:17px; font-weight:500; color:#222670; transition:all 0.5s ease-in-out;} .main5 .companyBox .listbox li .txt { margin:35px 0 0 0; font-size:28px; line-height:40px; font-weight:500; color:#333; letter-spacing:-0.02em; transition:all 0.5s ease-in-out; max-height:250px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;} .main5 .companyBox .listbox li .date { position:absolute; left:38px; bottom:48px; font-size:15px; font-weight:300; color:#777; transition:all 0.5s ease-in-out; } .main5 .companyBox .listbox li a:before, .main5 .companyBox .listbox li a:after{ content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; transition:all 0.5s ease-in-out; z-index:-1; } .main5 .companyBox .listbox li a:after{ right:-50%; border-right:420px solid transparent; border-top:420px solid #233b8f; transform:translateX(-100%); } .main5 .companyBox .listbox li a:before{ left:-50%; border-left:420px solid transparent; border-bottom:420px solid #233b8f; transform:translateX(100%); } .main5 .companyBox .listbox li a:hover:before, .main5 .companyBox .listbox li a:hover:after{ transform:translateX(0); } .main5 .companyBox .listbox li a:hover .type { color:#fff; } .main5 .companyBox .listbox li a:hover .txt { color:#fff; } .main5 .companyBox .listbox li a:hover .date { color:rgba(255,255,255,0.4); } .main5.on .titleBox h3.tit { animation:ani_3 0.5s 0.3s; animation-fill-mode:both; } .main5.on .titleBox p { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(1) { animation:ani_3 0.5s 0.3s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(2) { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(3) { animation:ani_3 0.5s 0.9s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(4) { animation:ani_3 0.5s 1.2s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(5) { animation:ani_3 0.5s 0.3s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(6) { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(7) { animation:ani_3 0.5s 0.9s; animation-fill-mode:both; } .main5.on .companyBox .listbox li:nth-child(8) { animation:ani_3 0.5s 1.2s; animation-fill-mode:both; } .mainTitle { position:absolute; left:0; top:200px; width:100%; opacity:0; visibility:hidden;} .fp-viewing-Company .mainTitle { opacity:1; visibility:visible; animation:ani_3 0.5s 0.5s; animation-fill-mode:both; } .btn_scroll.section5 { opacity:0; visibility:hidden; } .fp-viewing-Company .btn_scroll.section5 { opacity:1; visibility:visible; } .mainTitle .titleBox { position:relative; top:0; left:50%; max-width:1400px; width:100%; transform:translateX(-50%); } .mainTitle .titleBox h3.tit { font-size:60px; font-weight:600; color:#222; letter-spacing:-0.02em; } .mainTitle .titleBox p { margin:16px 0 0 0; font-size:17px; line-height:30px; font-weight:300; color:#666; letter-spacing:-0.01em; } @media screen and (max-width:1440px){ .mainTitle .titleBox { padding:0 50px; box-sizing:border-box; } .main5 .companyBox { padding:150px 50px; box-sizing:border-box; } .main5 .companyBox .listbox { float:right; width:700px; } .main5 .companyBox .listbox ul { margin:-20px 0 0 -20px; } .main5 .companyBox .listbox li { width:calc(50% - 20px); margin:20px 0 0 20px; } .main5 .companyBox .listbox li a { padding:35px 30px; } .main5 .companyBox .listbox li .txt { max-height:200px; -webkit-line-clamp:4; } .main5 .companyBox .listbox li .date { left:30px; bottom:35px; } } @media screen and (max-width:1280px){ .main5 .titleBox { padding:0 50px; box-sizing:border-box; } .mainTitle .titleBox { padding:0 40px; } .main5 .titleBox h3.tit, .mainTitle .titleBox h3.tit { font-size:55px; } .main5 .titleBox p, .mainTitle .titleBox p { margin:14px 0 0 0; font-size:17px; } .main5 .companyBox { padding:150px 40px 120px 40px; } .main5 .companyBox .listbox { float:right; width:580px; } .main5 .companyBox .listbox ul { margin:-15px 0 0 -15px; } .main5 .companyBox .listbox li { width:calc(50% - 15px); margin:15px 0 0 15px; } .main5 .companyBox .listbox li a { padding:25px 20px; } .main5 .companyBox .listbox li .type { font-size:15px; } .main5 .companyBox .listbox li .txt { margin:25px 0 0 0; font-size:20px; line-height:30px; max-height:200px; -webkit-line-clamp:4; } .main5 .companyBox .listbox li .date { left:20px; bottom:25px; } } @media screen and (max-width:1100px){ .main5 .titleBox h3.tit, .mainTitle .titleBox h3.tit { font-size:48px; } .main5 .titleBox p, .mainTitle .titleBox p { margin:14px 0 0 0; font-size:16px; } } @media screen and (max-width:1024px){ .main5 { background:url(/img/main/bg_company.png) right 120px no-repeat; background-size:340px auto } .mainTitle { display:none; } .main5 .titleBox{ display:block; padding:150px 20px 0 20px; top:0; } .main5 .companyBox { padding:50px 20px 120px 20px; } .main5 .companyBox .listbox { float:none; width:100%; } .main5 .companyBox .listbox li { display:none; } .main5 .companyBox .listbox li:nth-child(1), .main5 .companyBox .listbox li:nth-child(2), .main5 .companyBox .listbox li:nth-child(3), .main5 .companyBox .listbox li:nth-child(4) { display:block; } } @media screen and (max-width:860px){ .main5 .titleBox{ padding:130px 20px 0 20px; } .main5 .titleBox h3.tit { font-size:34px; } .main5 .titleBox p { margin:12px 0 0 0; font-size:16px; line-height:20px; } .main5 .companyBox .listbox ul { margin:-15px 0 0 -15px; } .main5 .companyBox .listbox li { width:calc(50% - 15px); margin:15px 0 0 15px; } .main5 .companyBox .listbox li a { padding:20px 15px; } .main5 .companyBox .listbox li .type { font-size:15px; } .main5 .companyBox .listbox li .txt { margin:20px 0 0 0; font-size:18px; line-height:28px; max-height:200px; -webkit-line-clamp:4; } .main5 .companyBox .listbox li .date { left:15px; bottom:20px; font-size:14px; } } @media screen and (max-width:640px){ .main5 .titleBox{ padding:100px 20px 0 20px; } .main5 .companyBox { padding:50px 20px 100px 20px; } .main5 .companyBox .listbox ul { margin:-10px 0 0 -10px; } .main5 .companyBox .listbox li { width:calc(50% - 10px); margin:10px 0 0 10px; } .main5 .companyBox .listbox li .txt { margin:18px 0 0 0; font-size:16px; line-height:24px; max-height:150px; -webkit-line-clamp:3; } } /* careers */ .main6 { position:relative; } .main6 .bg { position:absolute; left:0; top:0; width:100%; height:58vh; background:#f9f9f9 url(/img/main/bg_careers.jpg) center top no-repeat; background-size:cover; } .main6 .careersBox { position:relative; left:50%; z-index:3; max-width:1400px; width:100%; transform:translateX(-50%);} .main6 .careersBox .titleBox { position:relative; } .main6 .careersBox .titleBox h3.tit { opacity:0; font-size:60px; font-weight:600; color:#222; letter-spacing:-0.02em; } .main6 .careersBox .titleBox p { opacity:0; margin:16px 0 0 0; font-size:18px; font-weight:300; color:#222; letter-spacing:-0.01em; } .main6 .careersBox .listbox { position:relative; margin:80px 0 0 0; } .main6 .careersBox .listbox > ul:after {content:""; display:block; visibility:hidden; clear:both; height:0; } .main6 .careersBox .listbox > ul > li { opacity:0; position:relative; float:left; width:25%; margin-left:-1px; display:table; } .main6 .careersBox .listbox li .sbox { display:table-cell; width:100%; height:420px; text-align:center; vertical-align:middle; background-color:#1d358d;} .main6 .careersBox .listbox > ul > li:nth-child(2n) .sbox { background-color:#13235d; } .main6 .careersBox .listbox li .sbox p.tit { font-size:28px; font-weight:500; color:#fff; letter-spacing:-0.02em; } .main6 .careersBox .listbox li .sbox .txt_1 { margin:12px 0 0 0; font-size:18px; font-weight:300; color:rgba(255,255,255,0.8); letter-spacing:-0.02em; } .main6 .careersBox .listbox li .sbox .txt_1 span { font-weight:400; color:#fff; } .main6 .careersBox .listbox li .sbox .icon { margin:32px 0 0 0; } .main6 .careersBox .listbox li .sbox .txt_2 { margin:28px 0 0 0; font-size:16px; line-height:26px; font-weight:300; color:rgba(255,255,255,0.6); letter-spacing:-0.02em; } .main6 .careersBox a.btn { opacity:0; width:265px; height:78px; border:1px solid #1b2f7f; position:absolute; left:50%; bottom:-50px; display:table; margin-left:-132px; z-index:1; background-color:#fff; } .main6 .careersBox a.btn span { display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; color:#172876; font-size:18px; line-height:16px; font-weight:400; padding-right:50px; } .main6 .careersBox a.btn:after { content:""; display:block; width:13px; height:13px; position:absolute; right:34px; top:50%; background:url(/img/main/btn_more_p2.png) center center no-repeat; transform:translateY(calc(-50% + 0.5px)) rotate(0deg); transition:all 0.3s ease-in-out; } .main6 .careersBox a.btn:hover:after { transform:translateY( calc(-50% + 0.5px)) rotate(180deg); } .main6.on .careersBox .titleBox h3.tit { animation:ani_3 0.5s 0.3s; animation-fill-mode:both; } .main6.on .careersBox .titleBox p { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; } .main6.on .careersBox a.btn { animation:ani_3 0.5s 1.8s; animation-fill-mode:both; } .main6.on .careersBox .listbox > ul > li:nth-child(1) { animation:ani_1 0.5s 0.3s; animation-fill-mode:both; } .main6.on .careersBox .listbox > ul > li:nth-child(2) { animation:ani_1 0.5s 0.6s; animation-fiLl-mode:both; } .main6.on .careersBox .listbox > ul > li:nth-child(3) { animation:ani_1 0.5s 0.9s; animation-fill-mode:both; } .main6.on .careersBox .listbox > ul > li:nth-child(4) { animation:ani_1 0.5s 1.2s; animation-fill-mode:both; } .main6.on .careersBox .listbox > ul > li:nth-child(1):after { width:0; transition:width 0.3s 0.3s; } .main6.on .careersBox .listbox > ul > li:nth-child(2):after { width:0; transition:width 0.3s 0.6s; } .main6.on .careersBox .listbox > ul > li:nth-child(3):after { width:0; transition:width 0.3s 0.9s; } .main6.on .careersBox .listbox > ul > li:nth-child(4):after { width:0; transition:width 0.3s 1.2s; } @media screen and (max-width:1440px){ .main6 .careersBox { padding:0 50px; box-sizing:border-box; } } @media screen and (max-width:1280px){ .main6 .careersBox .titleBox h3.tit { font-size:55px; } .main6 .careersBox .titleBox p { margin:14px 0 0 0; font-size:17px; } .main6 .careersBox .listbox li .sbox { height:380px; } .main6 .careersBox .listbox li .sbox p.tit { font-size:26px; } .main6 .careersBox .listbox li .sbox .txt_1 { margin:12px 0 0 0; font-size:17px; } .main6 .careersBox .listbox li .sbox .icon { margin:28px 0 0 0; } .main6 .careersBox .listbox li .sbox .txt_2 { margin:24px 0 0 0; font-size:15px; line-height:24px; } .main6 .careersBox a.btn a { width:240px; height:70px; margin-left:-120px; } .main6 .careersBox a.btn span { font-size:17px; line-height:15px; padding-right:45px; } .main6 .careersBox a.btn:after { right:30px; } } @media screen and (max-width:1024px){ .main6 .bg { height:350px; background:#f9f9f9 url(/img/main/bg_careers_m.jpg) center top no-repeat; background-size:cover; } .main6 .careersBox { padding:150px 20px; } .main6 .careersBox .listbox > ul > li { width:50%; height:100%; } .main6 .careersBox .listbox > ul > li:nth-child(2n) .sbox { background-color:#1d358d; } .main6 .careersBox .listbox > ul > li:nth-child(2) .sbox, .main6 .careersBox .listbox > ul > li:nth-child(3) .sbox{ background-color:#13235d; } .main6 .careersBox .listbox li .sbox { height:320px; } } @media screen and (max-width:860px){ .main6 .careersBox .titleBox h3.tit { font-size:34px; } .main6 .careersBox .titleBox p { margin:12px 0 0 0; font-size:16px; line-height:20px; } .main6 .careersBox .listbox { margin:60px 0 0 0; } .main6 .careersBox .listbox li .sbox { height:280px; } .main6 .careersBox .listbox li .sbox p.tit { font-size:20px; } .main6 .careersBox .listbox li .sbox .txt_1 { margin:10px 0 0 0; font-size:15px; } .main6 .careersBox .listbox li .sbox .icon { margin:20px 0 0 0; } .main6 .careersBox .listbox li .sbox .icon img { width:15%; } .main6 .careersBox .listbox li .sbox .txt_2 { margin:20px 0 0 0; font-size:14px; line-height:20px; } .main6 .careersBox a.btn { height:55px; bottom:-35px; } .main6 .careersBox a.btn span { font-size:16px; line-height:14px; padding-right:30px; } .main6 .careersBox a.btn:after { right:20px; } } @media screen and (max-width:760px){ .main6 .careersBox { padding:120px 20px 200px 20px; } .main6 .careersBox .titleBox p span.m_br { display:block; } .main6 .careersBox .listbox { margin:50px 0 0 0; } .main6 .careersBox .listbox li .sbox { height:220px; } .main6 .careersBox .listbox li .sbox p.tit { font-size:18px; } .main6 .careersBox .listbox li .sbox .txt_1 { margin:8px 0 0 0; font-size:14px; } .main6 .careersBox .listbox li .sbox .icon { margin:18px 0 0 0; } .main6 .careersBox .listbox li .sbox .txt_2 { margin:18px 0 0 0; font-size:13px; line-height:18px; } .main6 .careersBox a.btn { height:50px; bottom:-30px; } .main6 .careersBox a.btn span { font-size:14px; line-height:13px; padding-right:30px; } .main6 .careersBox a.btn:after { right:50px; } } @media screen and (max-width:640px){ .main6 .bg { height:280px; } .main6 .careersBox { padding:80px 20px 200px 20px; } .main6 .careersBox .listbox li .sbox .icon img { width:17%; } } .main7 { position:relative; z-index:2 !important } @keyframes m_vsImg { 0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); } 20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); } 100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } } @keyframes w100 { 0% { width:0; } 100% { width:100%; } } @-webkit-keyframes txtLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @keyframes txtLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @-webkit-keyframes txtUp { from { -webkit-transform: translate3d(0, 250%, 0); transform: translate3d(0, 250%, 0); visibility: visible; opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @keyframes txtUp { from { -webkit-transform: translate3d(0, 250%, 0); transform: translate3d(0, 250%, 0); visibility: visible; opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @-webkit-keyframes txtUp_1 { from { -webkit-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); visibility: visible; opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @keyframes txtUp_1 { from { -webkit-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); visibility: visible; opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @keyframes img_1 { from { -webkit-transform: translate3d(-30%, -20%, 0); transform: translate3d(-30%, -20%, 0); opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @keyframes img_2 { from { -webkit-transform: translate3d(-30%, 20%, 0); transform: translate3d(-30%, 20%, 0); opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } @keyframes img_3 { from { -webkit-transform: translate3d(20%, 20%, 0); transform: translate3d(20%, 20%, 0); opacity:0; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity:1; } } .popup-box { padding:40px 20px 20px; background:#fff url(/img/popup/popup_bg.png) no-repeat center / cover; } .popup-box * {font-family: 'Pretendard', sans-serif; box-sizing:border-box; } .popup-box .p-txt-1 { text-align:center; } .popup-box .p-txt-2 { margin-top:40px; text-align:center; color:#111; font-size:36px; font-weight:700; line-height:1.5; letter-spacing:-0.06em; } .popup-box .scroll-box { margin-top:30px; height:450px; width:100%; background:#fff; overflow:auto; padding:30px; border:1px solid #eee; } .popup-box .scroll-box .s-box { padding-right:5px; } .popup-box .scroll-box .s-box * { word-break:keep-all } .popup-box .scroll-box dl:not(:last-child) { margin-bottom:40px; } .popup-box .scroll-box dt { color:#333; font-size:18px; font-weight:600; line-height:1.2; letter-spacing:-0.03em; display:flex; align-items:center; gap:0 30px; } .popup-box .scroll-box dt span { font-weight:600;} .popup-box .scroll-box dd { margin-top:20px; } .popup-box .scroll-box dd ul li:not(:last-child) { margin-bottom:15px; } .popup-box .scroll-box dd ul li { position:relative; padding-left:19px; color:#555; font-size:17px; font-weight:300; line-height:1.3; letter-spacing:-0.03em; display:flex; gap:5px 15px; } .popup-box .scroll-box dd ul li strong { display:block; width:120px; color:#333; font-weight:500; flex-shrink:0; } .popup-box .scroll-box dd ul li:before { content:''; display:block; position:absolute; top:10px; left:0; width:4px; height:4px; border-radius:4px; background:#333; } .popup-box .scroll-box table { width:100%; border-collapse:collapse;border-spacing:0;table-layout:auto;} .popup-box .scroll-box table thead th { color:#333; font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-0.03em; height:41px; padding:0 15px; text-align:center; background:#F5F5F5; border:1px solid #ddd; } .popup-box .scroll-box table tbody td { color:#333; font-size:16px; font-weight:300; line-height:1.3; letter-spacing:-0.03em; padding:12px 5px; text-align:center; background:#fff; border:1px solid #ddd; } .popup-box .scroll-box table tbody td.td_left { padding-left:10px; text-align:left; } .popup-box .p-box { margin-top:10px; display:flex; flex-wrap:wrap; gap:10px; } .popup-box .p-box .box { width:calc((100% - 10px) / 2); text-align:center; height:112px; } .popup-box .p-box .box .txt-box { width:100%; height:100%; display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:15px; background:#0e3081; flex-direction:column; } .popup-box .p-txt-3 { color:#fff; font-size:19px; font-weight:600; line-height:1.3; letter-spacing:-0.04em; } .popup-box .p-txt-4 { color:#fff; font-size:16px; font-weight:500; line-height:1.1; letter-spacing:-0.04em; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 15px; text-align:center; } .popup-box .p-txt-4 span.bar { width:1px; height:10px; background:rgba(255, 255, 255, 0.50); display:block; } .popup-box .p-box .box a { width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:15px; background:#333; flex-direction:column; color:#fff; font-size:19px; font-weight:600; line-height:1.1; letter-spacing:-0.04em;} @media screen and (max-width:640px){ .popup-box .pop-wrap { position:absolute; top:20px !important; left:20px !important; width:calc(100% - 40px) !important; }*/ .popup-box .p-txt-2 { margin-top:20px; font-size:26px; } .popup-box .scroll-box { margin-top:20px; height:300px; padding:20px; } .popup-box .scroll-box dl:not(:last-child) { margin-bottom:20px; } .popup-box .scroll-box dt { font-size:16px; gap:0 10px; } .popup-box .scroll-box dd { margin-top:10px; } .popup-box .scroll-box dd ul li:not(:last-child) { margin-bottom:10px; } .popup-box .scroll-box dd ul li { padding-left:10px; font-size:15px; gap:5px 10px; } .popup-box .scroll-box dd ul li strong { width:105px; } .popup-box .scroll-box dd ul li:before { top:8px; width:2px; height:2px; } .popup-box .scroll-box table { width:100%; border-collapse:collapse;border-spacing:0;table-layout:auto;} .popup-box .scroll-box table thead th { font-size:15px; padding:0 10px; } .popup-box .scroll-box table tbody td { font-size:15px; padding:10px 5px; } .popup-box .scroll-box table tbody td.td_left { padding-left:8px; } .popup-box .p-box { margin-top:10px; display:flex; flex-wrap:wrap; gap:5px; } .popup-box .p-box .box { width:100%; text-align:center; height:80px; } .popup-box .p-box .box .txt-box { gap:10px; } .popup-box .p-txt-3 { font-size:17px; } .popup-box .p-txt-4 { font-size:15px; gap:5px 10px; text-align:center; } .popup-box .p-box .box a { gap:10px; font-size:17px; } }