/* style02 */ #header .wrap {} #header .logo {float:left;padding:0;margin:0;position:relative;margin-left:60px} #header .logo ._logo_img {display:block;height:90px;width:324px;background:url(/layouts/default/image/logo.png) no-repeat 50% 50%;} #header .logo ._logo_img img {display:none} #header .logo ._logo_txt {padding:0;margin:0;} #header .logo ._logo_txt a {} #header .tel {font-weight:normal;position:absolute;right:60px;top:55%;margin-top:-20px;display:block;padding:6px 15px;background:#DC000C;color:#fff;border-radius:50px} #header .login {position:absolute;right:0;z-index:10} #header .login a {color:#999;} #header .login i {display:inline-block;margin:0 3px 0 3px;position:relative;top:1px;width:1px;height:11px;} #header .login .btn-member {margin:8px 30px;display:inline-block} #header .search {float:right;position:relative;margin:0 0 0 20px;} #header .search form {display:block;width:228px;height:25px;background:#ffffff;border-radius:6px 6px 6px 6px;} #header .search .keyword {float:left;padding:2px 0 0 3px;margin:3px 0 0 6px;width:186px;height:17px;font-size:11px;color:#888888;border:0;background:#ffffff;} #header .search .keyword:focus {font-weight:bold;font-size:12px;color:#222222;} #header .search .sbtn {float:left;padding:5px;position:relative;top:-1px;left:4px;} #header {position:fixed;z-index:10;background:#fcfcfc;width:100%;border-bottom:1px solid rgba(128,128,128,0.1);} #header .wrap {width:1400px;position:relative;margin:0 auto;height:90px !important} #header .menu-btn {display:none;z-index:100;width:6rem;height:6rem;position:absolute;top:0;right:0} #header .menu-btn b {display:block;width:40%;height:2px;background:#343434;position:absolute;top:50%;margin-top:-1px;left:50%;margin-left:-20%;} #header .menu-btn b:after, #header .menu-btn b:before {transition:all .3s ease;position:absolute;top:0;left:0;content:'';display:block;width:100%;height:100%;background:#343434} #header .menu-btn b:after {transform:translate(0, -6px)} #header .menu-btn b:before {transform:translate(0, 6px)} .snsblog {position:fixed; right:50px; top:25px; z-index:100; width:40px;} .snsblog img {width:100%;} #topmenu {display:flex;justify-content:flex-end;margin-right:60px;position:relative;} #topmenu ul {list-style-type:none;margin:0;display:table;} #topmenu li {position:relative;z-index:5;height:90px;display:table-cell;vertical-align:middle;text-align:center;} #topmenu li a {display:block;font-size:1.5rem;color:#000; font-weight:400;padding:1rem 1.5rem} #topmenu li a span {display:block;font-style:normal;white-space:nowrap} #topmenu>ul>li>a>span:after {margin-left:5px;content:'';display:inline-block;width:0;height:0;border:4px solid #111;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;} #topmenu li div.smenu-box {position:absolute;display:none;background:#fff;border-radius:5px;border:1px solid #707070;top:65px;left:50%;width:130px;margin-left:-65px} #topmenu li div a {color:#000000;overflow:hidden;line-height:1.5;display:block;font-weight:normal;font-size:1.3rem;padding:6px 0;margin:0;font-size:14px;} #topmenu li div a:hover {border:none;color:#777} #topmenu li:hover>a, #topmenu ul>li>a .on {color:#000;border-bottom:1px solid #666;} .smenu-box {} #topmenu .on1 {text-decoration:underline} #topmenu .none {color:#999999;padding:0 0 0 10px;} #topmenu .none a {display:inline;background:#ffffff;padding:3px 5px 3px 5px;position:relative;top:1px;left:-5px;} #topmenu .more {margin:0 0 3px 3px;} #topmenu .home a {margin-left:0;} #topmenu li:hover div.smenu-box {display:block} #mcontent {position:relative;z-index:1} #footer .wrap {position:relative;text-align:center;height:226px;border-top:1px solid #ccc} #footer .wrap .flogo {position:absolute;left:30px;top:56px;width:287px;height:37px;background:url(/layouts/default/image/logo.png) no-repeat} #footer .wrap .fsns {position:absolute;right:30px;top:56px;text-align:right;} #footer .wrap .fsns a {display:inline-block;margin-left:8px;} #footer .wrap address {font-size:1.4rem;color:#3D3D3D;font-style:normal;line-height:1.8;text-align:left;padding:110px 30px 30px 30px} #header .logo ._logo_img {display:block;height:90px;width:238px;background:url(/layouts/default/image/logo.png) no-repeat 50% 50%;} .mgap {height:0;} #bbslist {max-width:100%;padding:0 0 100px 0} .main-container {padding-top:90px} .main-container.sub {max-width:1200px;margin:0 auto} .main-container.sub.full {max-width:100%} .main-container.sub .sub-title {padding:80px 0 30px 0;text-align:center;font-size:32px;color:#3D3D3D;font-weight:bold} .main-container.sub .sub-title * {transition:all .7s .7s ease;transform:translate(40px,0);opacity:0;filter:blur(7px);} .main-container.sub .sub-title.play * {transform:translate(0,0);opacity:1;filter:blur(0)} .main-container.sub p.p {font-size:22px;color:#DC000C;font-weight:500;padding-top:14px} .main-container.sub.s01 {max-width:100%;background-image:url(/pages/image/sub0601_bg.jpg);background-position:50% 50%;background-size:cover;background-repeat:no-repeat} .main-container.sub.s02 {max-width:100%;background-image:url(/pages/image/sub0801_bg.jpg);background-position:50% 50%;background-size:cover;background-repeat:no-repeat} .main-container.sub.s03 {max-width:100%;background-image:url(/pages/image/sub0802_bg.jpg);background-position:50% 50%;background-size:cover;background-repeat:no-repeat} .main-container.sub p.p .tel {color:#DC000C;font-size:22px} /*.main-container.sub p.p .tel:before {vertical-align:-5px;margin-right:5px;content:'';display:inline-block;width:25px;height:25px;background:url(/pages/image/sub0601_icon01.png) no-repeat}*/ .mainSwiper {overflow:hidden;position:relative;width:100%;margin-bottom:80px} .mainSwiper .swiper-slide {display:flex;align-items:center;justify-content:center;position:relative;height:850px;overflow:hidden} .mainSwiper .swiper-slide .thumb {position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:50% 50%} .mainSwiper .swiper-slide .thumb.play {transition:all 3s ease;transform:scale(1.05,1.05)} .mainSwiper .swiper-button-next:after, .mainSwiper .swiper-button-prev:after {display:none} .mainSwiper .swiper-button-next, .mainSwiper .swiper-button-prev {width:50px;height:50px;background:none;border:3px solid #fff;border-left:0;border-top:0;margin-top:-24px} .mainSwiper .swiper-button-next {transform:rotate(-45deg);right:30px} .mainSwiper .swiper-button-prev {transform:rotate(135deg);left:30px} .mainSwiper .swiper-slide .t {position:relative;z-index:100; text-align:center; /*animation: yiradiuss5 5.1s linear infinite;*/ color:#fff; font-size:50px; font-weight:700; text-shadow: 1px 1px 3px #0000009E; padding-bottom:20rem;} .mainSwiper .swiper-slide .t i {font-size:18px; font-style: normal; margin-bottom:8px; display: block;} .mainSwiper .swiper-slide .t strong {color:#DC000C; font-size:48px;} .mainSwiper .swiper-slide .t p {font-size:36px; margin-bottom:26px;} .mainSwiper .swiper-slide .t b {font-weight:700;display:block;font-size:17px;width:384px;height:52px;line-height:50px;margin:0 auto;margin-top:10px;border-radius: 26px;background: #DC000C linear-gradient(100deg, #DC000CB3 0%, #DC000CE6 51%, #DC000C99 100%) 0% 0% no-repeat padding-box;} .mainSwiper .swiper-slide2 {display:flex;align-items:center;justify-content:center;position:relative;height:850px;overflow:hidden} .mainSwiper .swiper-slide2 .thumb {position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:50% 50%} .page-mt {transition:.7s ease;opacity:0;transform:translate(0px,20px)} .page-mt.on {opacity:1;transform:translate(0,0)} .bnw1 {height:300px !important;} .cbh {clear:both;} .bn3_area {max-width:1200px; margin:0 auto; display: flex; justify-content: space-between; gap:2rem;} .bn3_area>div {background:gray;} .bn3_area .bn3_item:nth-child(1) { flex-grow: 1;} .bn3_area .bn3_item:nth-child(2) { flex-grow: 1;} .bn3_area .bn3_item:nth-child(3) { flex-grow: 1;} .bn3_area>div img {width:100%;} .clayout {padding:100px 0 30px 0;max-width:1400px;margin:0 auto} .clayout .h3 {font-size:32px;color:#000;text-align:center;margin:0;margin-bottom:80px} .clayout .h3 span.e {font-size:28px;color:#000;display:block;font-family:Montserrat;font-weight:200} .clayout .h3 .ptxt {font-size:18px;font-weight:normal;padding-top:10px} .clayout .h3 .ptxt.red {color:#DC000C} .clayout .h3 .btns {text-align:center;padding-top:18px} .clayout .h3 .btns .ybtn {transition:all .3s ease;position:relative;height:52px;border:1px solid #DC000C;font-size:18px;border-radius:52px;line-height:47px;display:inline-block;padding:0 70px 0 40px;font-weight:normal} .clayout .h3 .btns .ybtn b {display:none;font-weight:normal;line-height:1} .clayout .h3 .btns .ybtn:after {content:'';display:block;width:15px;height:15px;border:1px solid #DC000C;border-top:0;border-left:0;position:absolute;top:50%;margin-top:-8px;right:25px;transform:rotate(-45deg)} .clayout .h3 .btns .ybtn:hover {background:#DC000C;color:#fff;} .clayout .h3 .btns .ybtn:hover:after {border-color:#fff} .clayout .h3 .btns .ybtn:hover b {display:inline} .clayout.lg3 {max-width:100%;} .clayout.lg8 {max-width:100%;background:url(/layouts/default/image/step08_bg.png) no-repeat fixed 50% 50%;background-size:cover} .clayout.lg9 {margin-bottom:60px} .list-showroom {display:grid;width:1200px;margin:0 auto;grid-template-columns:1fr 1fr;column-gap: 2%;row-gap: 25px;} .list-showroom a.l {display:flex;align-items:center;height:240px;position:relative;overflow:hidden} .list-showroom a.l .thumb {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:contain;transition:all .7s ease} .list-showroom a.l .texts {position:relative;z-index:5;text-align:center;width:100%;color:#fff;font-size:22px;line-height:1.6} .list-showroom a.l .texts strong {font-weight:normal} .list-showroom a.l .texts span {display:block;font-size:22px;margin-bottom:10px} .list-showroom a.l .texts b {padding:5px 15px 5px 15px;font-weight:normal;font-size:14px;} .list-showroom a.l .texts b em {display:none;font-style:normal} .list-showroom a.l .texts p {font-size:18px; width:40%; margin:5px auto 0 auto; color:#DC000C; background:rgba(255, 255, 255, 0.9); border-radius:30px;} .list-showroom a.l:hover .thumb {transform:scale(1.2,1.2)} .list-showroom a.l:hover .texts b em {display:inline} .list-showroom.g2 {grid-template-columns:1fr 1fr;margin-top:25px} .pc-list {margin:0 5%;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;column-gap: 2%;row-gap: 25px;} .pc-list a.l {display:flex;flex-wrap:wrap;align-items:center;height:200px;box-shadow:0px 3px 6px #00000014;border-radius:44px;border:1px solid #f0f0f0;text-align:center;} .pc-list a.l span {display:block;width:100%;text-align:center;font-size:22px} .pc-list a.l img {display:block;margin:0 auto 10px auto} .pc-list a.l:hover {background:rgba(0,0,0,0.02)} .pc-list a.l:hover span {color:#DC000C} .yi-list {position:relative;height:250px} .yi-list span.radius {color:#000;font-size:28px;text-align:center;display:flex;align-items:center;width:250px;height:250px;margin-top:-150px;border-radius:100%;border:1px solid #ef5857;position:absolute;top:50%;left:50%;} .yi-list span.radius:after {transform:translate(-1px,-1px) scale(1.08,1.08);content:'';display:block;width:100%;height:100%;border-radius:100%;border:1px solid #9e9e9e;opacity:0.59;position:absolute;top:50%;left:50%;margin:-50% 0 0 -50%;} .yi-list span.radius span {width:100%;position:relative;z-index:5} .yi-list span.radius span b {display:block;font-size:32px;color:#dc000c;font-family:Montserrat;} .yi-list span.radius.r1 {margin-left:-588px;margin-top:-120px;background:#FFFFFFEE} .yi-list span.radius.r2 {margin-left:-280px;margin-top:-120px;background:#FFFFFFEE} .yi-list span.radius.r3 {margin-left:30px;margin-top:-120px;background:#FFFFFFEE} .yi-list span.radius.r4 {margin-left:339px;margin-top:-120px;background:#FFFFFFEE} .pf-box {display:grid;grid-template-columns:1fr 1fr;column-gap:30px;margin:0 50px;height:300px} .pf-box .box {position:relative;display:flex;align-items:center;font-size:32px;border-radius:10px;color:#fff;cursor:pointer;overflow:hidden} .pf-box .box .thumb {z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-size:cover;transition:all .3s ease} .pf-box .box .info {width:100%;position:relative;z-index:5;text-align:center;font-size:22px;font-weight:400; text-shadow:1px 1px 2px black;} .pf-box .box .info span {/*display:block;*/display:none;margin:0 auto;margin-bottom:10px} .pf-box .box:hover .thumb {transform:scale(1.1,1.1)} .pf-box.bs02 {height:350px;margin:0;} .pf-box.bs02 .box {font-size:22px} .pf-box .box .t {font-family:Montserrat;font-size:32px} .pf-box .box .info span.btn {transition:all .3s ease;width:40%;display:block;margin:0 auto;/*margin-top:35px;*/height:43px;line-height:43px;border-radius:43px; font-size:22px;} .pf-box .box:hover .info span.btn {width:50%} .cert-slider {overflow:hidden} .cert-slider .swiper-slide {width:16%} .cert-slider .swiper-slide img {width:100%} .statistical-box {line-height:1.1;width:1024px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.4fr;font-size:24px;column-gap:2%;margin-bottom:65px} .statistical-box .box {padding:0 40px} .statistical-box .box .data {font-size:90px;font-weight:bold;display:block;font-family:Montserrat} .statistical-bn {width:1024px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;font-size:30px;column-gap:5%} .statistical-bn a {background:#DC000C;padding:30px;color:#fff;font-size:22px;border-radius:33px;overflow:hidden;border:6px solid #ffbfc3} .statistical-bn a:last-child {background:#7A96E9;border-color:#d0dcff} .statistical-bn a .name {display:block;padding-bottom:12px;font-weight:bold;position:relative;border-bottom:1px solid #fff} .statistical-bn a .name:after {content:'';display:block;width:15px;height:15px;border:3px solid #fff;border-top:0;border-left:0;position:absolute;top:50%;margin-top:-14px;right:5px;transform:rotate(-45deg)} .statistical-bn a .txt {display:block;padding-top:45px;letter-spacing:-0.05em} .corp-with {display:flex;flex-wrap:wrap} .corp-with span {width:14%;padding:0 30px} .corp-with span img {width:100%} .yi-tabs {max-width:1200px;margin:0 auto 60px auto} .yi-tabs label {display:block;border:1px solid #DC000C;height:52px;border-radius:26px;width:179px;line-height:50px;color:#3d3d3d;text-align:center;font-size:14px;margin:7px} .yi-tabs label:hover {background:#F7F7F7} .yi-tabs label.on {background:#DC000C;color:#fff} .yi-tabs label input {display:none} .yi-tabs .sub {display:flex;flex-wrap:wrap;justify-content:center} .yi-tabs > label {margin:0 auto;margin-bottom:15px} .yi-portfolio-list .tab_content {display:none;padding:15px 30px} .yi-portfolio-list .tab_content.on {display:block} .yi-portfolio-list .widget_gallery02 ul {display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:30px;row-gap:30px} .yi-portfolio-list .widget_gallery02 ul li {float:none;border-radius:10px;width:auto;margin:0;overflow:hidden} .yi-portfolio-list .widget_gallery02 li .thumb {width:70%} .yi-portfolio-list .widget_gallery02 ul li a {transition:all .3s ease} .yi-portfolio-list .widget_gallery02 ul li:hover a {transform:scale(1.1,1.1)} .yi-portfolio-list .widget_gallery02 li p {pointer-events:none;user-select:none;background:transparent linear-gradient(180deg, #00000000 0%, #00000099 100%) 0% 0% no-repeat padding-box;text-align:left;padding:6%;} .yi-portfolio-list .widget_gallery02 li p a {color:#fff;font-size:14px;font-weight:400:} .yi-portfolio-list .last-btns {text-align:center;padding-top:70px} .yi-portfolio-list .last-btns a {font-family:'Montserrat';transition:all .3s ease;position:relative;height:52px;border:1px solid #DC000C;font-size:18px;border-radius:52px;line-height:50px;display:inline-block;font-weight:500;width:460px} .yi-portfolio-list .last-btns a:after {content:'';display:block;width:15px;height:15px;border:1px solid #DC000C;border-top:0;border-left:0;position:absolute;top:50%;margin-top:-8px;right:25px;transform:rotate(-45deg)} .yi-portfolio-list .last-btns a:hover {background:#DC000C;color:#fff;width:520px} .yi-portfolio-list .last-btns a:hover:after {border-color:#fff} .yi-portfolio-list-btns {display:none;grid-template-columns:1fr 1fr;column-gap:1rem} .yi-portfolio-list-btns a {border:1px solid #DC000C;font-size:1.2rem;color:#3D3D3D;height:4.7rem;line-height:4.5rem;border-radius:4.7rem;text-align:center} .yd-layer {display:none;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:150} .yd-layer iframe {width:90%;height:80%} .yd-layer .img {padding:1.5rem} .yd-layer .img img {width:100%;max-height:800px} .yd-layer a.close {width:60px;height:60px;background:#fff;position:absolute;top:16.9%;right:5%;margin:-60px -60px 0 0} .yd-layer a.close:after, .yd-layer a.close:before {transition:all .3s ease;position:absolute;top:50%;left:50%;margin:-1px 0 0 -40%;content:'';display:block;width:80%;height:2px;background:#111} .yd-layer a.close:after {transform:rotate(45deg)} .yd-layer a.close:before {transform:rotate(-45deg)} .yd-layer.on {display:flex} .yd-layer.pp-layer a.close {margin-left:282px} .svisual.s01 {display:flex;align-items:center;height:850px;position:relative;overflow:hidden} .svisual.s01:before {content:'';display:block;position:absolute;background:#121F28;left:0;top:0;bottom:0;width:25%;z-index:4;} .svisual.s01:after {transition:all 5s 2s ease;content:'';display:block;position:absolute;top:0;left:0;bottom:0;right:0;background:url(/pages/image/sub0101_bg.jpg) no-repeat 50% 50%;background-size:cover;z-index:3} .svisual.s01.play:after {transform:scale(1.1,1.1)} .svisual.s01 .t {transition:all .7s .7s ease;transform:translate(40px,0);opacity:0;filter:blur(5px)} .svisual.s01.play .t {transform:translate(0,0);opacity:1;filter:blur(0)} .svisual .t {position:relative;z-index:5;color:#fff;font-size:42px;padding-left:150px} .svisual.s01 .t strong {color:#DC000C;font-size:62px} .s-cont {padding:40px 0;color:#000;overflow:hidden} .s-cont.sc01 {font-size:22px;color:#000;display:grid;grid-template-columns:1fr 1fr;height:624px;background:url(/pages/image/sub0102_bg.jpg) no-repeat 50% 50%;background-size:cover;} .s-cont.sc01 .b {display:flex;align-items:center;justify-content:center;} .s-cont.sc01 .t {font-weight:300} .s-cont.sc01 .t strong {color:#E12A32} .s-cont.sc01 .i {display:flex;align-items:center;justify-content:center;} .s-cont.sc01 .i span {margin-right:50px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;width:224px;height:224px;border-radius:80px;color:#fff;font-weight:200;background:#DC000C} .s-cont.sc01 .i span b {display:block;width:100%;text-align:center;font-weight:200;} .s-cont.sc01 .i span b img {display:block;margin:0 auto;margin-bottom:5px} .s-cont.sc02 {background:#F1F1F1;} .s-cont .h3 {text-align:center;font-size:32px;margin:50px 0 10px 0} .s-cont .h3 strong {color:#DC252D} .s-cont .stit {font-size:52px;text-align:center;font-weight:200;} .s-cont p.p {font-size:22px;text-align:center;margin-bottom:70px} .s-cont.sc02 .step-info {width:1142px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:70px} .s-cont.sc02 .step-info .step {font-size:22px;text-align:center;align-items:center;justify-content:center;display:flex;flex-wrap:wrap;width:334px;height:224px;border:1px solid #DC000C;position:relative;border-radius:80px;} .s-cont.sc02 .step-info .step b {color:#3d3d3d;font-size:70px;font-family:'Montserrat';position:absolute;top:-44px;left:50%;margin-left:-44px} .s-cont.sc02 .step-info .step .ico {display:block;margin-bottom:10px} .svisual.s02 {position:relative;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;position:relative;background:url(/pages/image/sub0201_bg.jpg) no-repeat 50% 50%;background-size:cover;height:989px;padding:150px 30px} .svisual.s02:before {content:'';display:block;position:absolute;background:#F1F1F1;top:31%;left:31%;right:9%;bottom:7%;z-index:0} .svisual.s02 .t {color:#3D3D3D;width:100%;padding-left:0;text-align:center;margin-bottom:135px;font-weight:500} .svisual.s02 .mid {position:relative;z-index:5;display:grid;grid-template-columns:1fr 1.3fr;text-align:center;column-gap:50px;overflow:hidden} .svisual.s02 .mid .txts {text-align:left;padding-top:40px;font-size:22px;font-weight:300;} .svisual.s02 .mid .txts strong {display:block;padding-top:66px} .svisual.s02 .mid .thumb img {width:100%} .s-cont.sc03 {padding:100px 60px} .s-cont.sc03 .img {max-width:1400px; margin:0 auto; display:block;overflow:hidden} .s-cont.sc03 .img img {width:100%} .s-cont.sc03 .img.m {display:none} .s-cont.sc04 {position:relative;background:url(/pages/image/sub0301_bg.jpg) no-repeat center top;background-size:cover;height:2300px;} .s-cont.sc04 .pp-wrap {position:absolute;top:15%;left:10%;right:10%;bottom:10%} .s-cont.sc04 .pp-wrap .p-btn {display:block;width:18%;position:absolute;} .s-cont.sc04 .pp-wrap .p-btn img {width:100%} .s-cont.sc04 .pp-wrap .p-btn.p1 {top:0;left:10%} .s-cont.sc04 .pp-wrap .p-btn.p2 {top:2%;left:30%} .s-cont.sc04 .pp-wrap .p-btn.p3 {top:4%;left:50%} .s-cont.sc04 .pp-wrap .p-btn.p4 {top:6%;left:70%} .s-cont.sc04 .pp-wrap .p-btn.p5 {top:28%;left:65%} .s-cont.sc04 .pp-wrap .p-btn.p6 {top:30%;left:45%} .s-cont.sc04 .pp-wrap .p-btn.p7 {top:32%;left:25%} .s-cont.sc04 .pp-wrap .p-btn.p8 {top:34%;left:5%} .s-cont.sc04 .pp-wrap .p-btn.p9 {top:56%;left:10%} .s-cont.sc04 .pp-wrap .p-btn.p10 {top:58%;left:30%} .s-cont.sc04 .pp-wrap .p-btn.p11 {top:60%;left:50%} .s-cont.sc04 .pp-wrap .p-btn.p12 {top:62%;left:70%} .s-cont.sc04 .pp-wrap .p-btn.p13 {top:84%;left:65%} .op-free-list {margin:0 30px;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:34px;row-gap:34px} .op-free-list .list {position:relative;height:320px;overflow:hidden} .op-free-list .list .thumb {position:relative;z-index:0;display:block;height:100%;background-size:cover;background-position:50% 50%;} .op-free-list .list .info {color:#fff;font-size:18px;position:absolute;z-index:5;left:0;right:0;bottom:0;padding:20px;background:transparent linear-gradient(180deg, #00000000 0%, #00000099 100%) 0% 0% no-repeat padding-box;} .op-free-list .list .info span {display:block;font-size:15px} .corp-intro {padding:0 30px;max-width:1600px;margin:0 auto;position:relative;} .corp-intro .calltxt {position:absolute; right:60px; top:0; z-index:1; font-size:17px; color:#DC000C;} .corp-intro .name {position:relative;margin-bottom:30px} .corp-intro .name span {position:relative;z-index:5;color:#fff;text-align:center;font-size:22px;background:#DC000C;width:30%;margin:0 auto;display:block;height:52px;line-height:52px;border-radius:26px} .corp-intro .name p {position:relative;z-index:5;color:#fff;text-align:center;font-size:28px;background:#DC000C;width:60%;margin:0 auto;display:block;height:52px;line-height:52px;border-radius:26px} .corp-intro .name:before {content:'';display:block;height:1px;background:#ddd;position:absolute;top:50%;left:0;width:100%} .corp-intro .nametitle {font-size:18px; text-align:center; margin-bottom:30px} .corp-intro .nametitle2 {font-size:28px; text-align:center; margin-bottom:30px} .tabtbarea {text-align: center;} .tabtbarea a {color: #3D3D3D;text-align: center;font-size: 22px;background: #fff; border:1px solid #DC000C;width: 200px; display:inline-block; border-radius:30px; padding:10px 0; margin:0 5px;} .tabtbarea a:hover {color: #fff;background:#DC000C; border:0px;} .ci-swiper {position:relative;overflow:hidden;max-width:1080px; margin:0 auto 60px auto} .ci-swiper .swiper-slide {position:relative; height:667px;background-position:50% 50%;background-size:cover} .ci-swiper .swiper-slide .ss_txt {position:absolute; left:20px; top:20px; background:#DC000C; color:#fff; font-size:22px; padding:2px 20px 5px 20px;} .ci-swiper .swiper-button-next:after, .ci-swiper .swiper-button-prev:after {display:none} .ci-swiper .swiper-button-next, .ci-swiper .swiper-button-prev {width:50px;height:50px;background:none;border:3px solid #fff;border-left:0;border-top:0;margin-top:-24px} .ci-swiper .swiper-button-next {transform:rotate(-45deg);right:30px} .ci-swiper .swiper-button-prev {transform:rotate(135deg);left:30px} .ci-swiper .swiper-slide .t {text-align:center;animation: yiradiuss5 5.1s linear infinite;color:#fff;font-size:52px;text-shadow: 1px 1px 3px #0000006E;} .ci-swiper .swiper-slide .t b {font-weight:200;display:block;font-size:28px;width:344px;height:52px;line-height:50px;margin:0 auto;margin-top:26px;border-radius: 26px;background: transparent linear-gradient(100deg, #DC000CB3 0%, #DC000CE6 51%, #DC000C99 100%) 0% 0% no-repeat padding-box;} .ci-swiper .swiper-pagination {left:0;right:0;bottom:30px} .ci-swiper .swiper-pagination .swiper-pagination-bullet {background:#fff;width:18px;height:18px;opacity:1;margin:0 6px} .ci-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#DC000C} .main-big-banner {max-width:1200px;margin:0 auto 50px auto} .main-big-banner .swiper-slide {position:relative;aspect-ratio:16/4;display:flex;flex-direction:column;justify-content:center;align-items:center} .main-big-banner .swiper-slide .thumb {height:100%;display:block;position:absolute;top:0;left:0;width:100%;z-index:1;background-position:50% 50%;background-size:cover} .main-big-banner .swiper-slide .t {pointer-events: none;user-select:none;display:block;position:relative;z-index:5;color:#fff;font-size:28px;text-shadow:1px 1px 3px rgba(0,0,0,0.3)} .main-big-banner .swiper-button-next:after, .main-big-banner .swiper-button-prev:after {filter:brightness(0) invert(1)} @keyframes yiradiuss1 { 33% {transform:translate(0,0)} 66% {transform:translate(0,10px)} } @keyframes yiradiuss2 { 33% {transform:translate(0,0)} 66% {transform:translate(0,-15px)} } @keyframes yiradiuss3 { 33% {transform:translate(0,0)} 66% {transform:translate(0,8px)} } @keyframes yiradiuss4 { 33% {transform:translate(0,0)} 66% {transform:translate(0,-10px)} } @keyframes yiradiuss5 { 33% {transform:translate(0,0);opacity:1} 66% {transform:translate(0,-3px);opacity:0.7} } @media (max-width: 1480px) { #header .wrap {width:auto} #topmenu li a {font-size:1.5rem} .mainSwiper .swiper-slide {height:700px} .mainSwiper .swiper-button-next, .mainSwiper .swiper-button-prev {margin-top:-39px} .yi-list {height:250px} .yi-list span.radius {width:200px;height:200px;font-size:18px} .yi-list span.radius span b {font-size:26px} .yi-list span.radius.r1 {margin-left:-488px;} .yi-list span.radius.r2 {margin-left:-230px;} .yi-list span.radius.r3 {margin-left:35px;} .yi-list span.radius.r4 {margin-left:301px;} .svisual.s01 {height:600px} .svisual.s01 .t {font-size:36px} .svisual.s01 .t strong {font-size:46px} .s-cont.sc01 {padding:0 30px;font-size:18px} .s-cont.sc01 .i span {width:180px;height:180px;border-radius:60px;margin-right:30px} .s-cont.sc02 .step-info {width:100%;padding:0 30px} .s-cont.sc02 .step-info .step {width:100%;} .svisual.s02 .mid .txts {font-size:18px} .s-cont.sc04 {height:1650px} .op-free-list .list {height:286px;} .op-free-list .list .info {font-size:18px;padding:25px;} .tabtbarea {margin-bottom:50px;} .tabtbarea a {font-size: 1.6rem;padding:10px 0; width:150px;} .mainSwiper .swiper-slide .t {padding-right:90rem; padding-bottom:50rem;} } @media (max-width: 1280px) { #header .logo {margin-left:30px} #header .logo ._logo_img {width:280px;background-size:200px auto} #header .tel {right:30px} #topmenu {margin-right:30px} #topmenu .snsblog {position:absolute; right:0px; top:10px; z-index:2; width:3%;} #topmenu .snsblog img {width:100%;} #topmenu li a {font-size:1.3rem;padding:0 .6rem} .mainSwiper .swiper-slide {height:600px} .mainSwiper .swiper-slide .t {padding-right:60rem; padding-bottom:40rem;} .mainSwiper .swiper-slide .t b {font-size:18px} .snsblog {right:10px; top:35px; z-index:100; width:20px;} .clayout {padding:80px 10px} .clayout .h3 {font-size:30px;margin-bottom:50px} .list-showroom {width:90%} .list-showroom.g2 {margin-top:15px} .list-showroom a.l {height:200px} .list-showroom a.l .texts {font-size:35px} .pc-list {column-gap: 3%;} .pc-list a.l {height:15.8rem;border-radius:33px;} .pc-list a.l span {font-size:1.6rem} .pf-box {height:300px} .pf-box.bs02 {height:290px;margin:0 -10px} .pf-box.bs02 .box {font-size:18px} .pf-box.bs02 .box .i {width:55%;margin:0 auto;margin-bottom:15px;display:block} .pf-box.bs02 .box .i img {display:none;width:100%} .pf-box .box .info span.btn {font-size:15px} .statistical-box {width:100%;font-size:2.4rem;margin-bottom:3rem;overflow:hidden} .statistical-box .box .data {font-size:6.7rem} .statistical-bn {width:auto} .statistical-bn a {font-size:1.7rem;border-width:3px;padding:1.5rem;border-radius:1.5rem} .statistical-bn a .name {padding-bottom:.6rem} .statistical-bn a .name:after {border-width:1px;width:7px;height:7px;margin-top:-7px} .statistical-bn a .txt {padding-top:1.9rem} .s-cont.sc01 {height:500px} .s-cont.sc01 .i span {width:150px;height:150px;border-radius:50px;margin-right:25px;font-size:14px} .s-cont.sc01 .i span b img {width:50px} .s-cont.sc04 {height:1420px} } @media (max-width: 1024px) { #header .logo {margin-left:0} #header .logo ._logo_img {width:180px;background-size:143px auto;height:6rem;} #header .wrap {height:6rem !important} #header .tel {font-size:1.3rem;padding:.6rem 2rem;right:6.3rem;margin-top:-19px} #topmenu {transition:all .3s ease;z-index:1;display:flex;align-items: center;position:fixed;top:0;right:-100%;width:100%;bottom:0;z-index:15;margin:0;background:rgba(0,0,0,0.9)} #topmenu ul {width:90%;margin:0 auto;padding:0;display:flex;flex-wrap:wrap} #topmenu ul li {display:block;width:50%;height:auto;margin-bottom:.8rem} #topmenu ul li a {margin:0 2rem;padding:1rem 0;font-size:1.6rem;font-weight:normal;color:#fff;border-bottom:1px solid rgba(255,255,255,0.5)} #topmenu ul li a:hover, #topmenu ul li:hover a {border-width:1px;color:#fff} #topmenu li div.smenu-box {display:block;position:static;width:auto;margin:0;background:none;border:none;margin-bottom:1.3rem} #topmenu li div.smenu-box a {border:none;color:#9F9F9F;font-size:1.4rem;line-height:1.3;padding:.6rem 0} #topmenu li div.smenu-box a:hover {color:#fff} #topmenu .snsblog {position:absolute; left:20px; top:20px; z-index:20; width:35px;} body.menuOpen #topmenu {right:0} body.menuOpen #header .menu-btn b {background:none} body.menuOpen #header .menu-btn b:after, body.menuOpen #header .menu-btn b:before {background:#fff;} body.menuOpen #header .menu-btn b:after {transform:rotate(45deg)} body.menuOpen #header .menu-btn b:before {transform:rotate(-45deg)} .snsblog {right:60px; top:15px; z-index:100; width:30px;} #header .menu-btn {display:block} #header .login .btn-member {margin:2.1rem 7.4rem 0 0} #footer .wrap .flogo {left:1.5rem;top:2rem;width:140px; background-size:143px auto} #footer .wrap .fsns {top:2rem;right:1.5rem} #footer .wrap .fsns img {width:19px;height:19px} #footer .wrap address {font-size:1.2rem;padding:5.5rem 1.5rem 1.5rem 1.5rem} #footer .wrap {height:auto;border-width:1px} .main-container {padding:0 1.5rem;padding-top:6rem} .main-container.sub .sub-title {font-size:3rem;padding:3rem 0 1.5rem 0} .main-container.sub p.p {font-size:1.3rem;padding-top:.6rem;margin-bottom:1.5rem} .mainSwiper {margin-bottom:3rem} .mainSwiper .swiper-slide {height:auto} .mainSwiper .swiper-button-next, .mainSwiper .swiper-button-prev {width:2.4rem;height:2.4rem;margin-top:-1.5rem} .mainSwiper .swiper-button-next {right:2rem} .mainSwiper .swiper-button-prev {left:2rem} .mainSwiper .swiper-slide .t {font-size:1.7rem; text-align:center; padding-right:0; padding-bottom:18rem; padding-top:10rem;} .mainSwiper .swiper-slide .t b {font-size:1.1rem;width:270px;height:30px;line-height:30px;margin-top:1.5rem} .mainSwiper .swiper-slide .t strong {font-size:22px;} .main-big-banner .swiper-slide .t {font-size:1.6rem} .bnw1 {height:auto !important;} .clayout {padding:2.5rem 0} .clayout .h3 {font-size:1.8rem;margin-bottom:2rem} .clayout .h3 .ptxt {font-size:1.4rem} .clayout .h3 .btns {padding-top:.6rem} .clayout .h3 .btns .ybtn {font-size:1.3rem;height:30px;line-height:28px;padding:0 3rem 0 1.5rem} .clayout .h3 .btns .ybtn:after {width:9px;height:9px;margin-top:-5px;right:1rem} .clayout.lg3 {;overflow:hidden;margin:0 -1.5rem;max-width:200%} .clayout.lg8 {margin:0 -1.5rem;max-width:200%;padding:2.5rem 1.5rem} .list-showroom {width:100%;grid-template-columns:1fr;column-gap: 3%;row-gap: 15px;} .list-showroom a.l {height:15rem} .list-showroom a.l .texts {font-size:1.4rem} .list-showroom a.l .texts span {font-size:1.2rem;margin-bottom:.4rem} .list-showroom a.l .texts b {font-size:1.2rem} .list-showroom a.l .texts p {width:40%; font-size:1.4rem} .pc-list {margin:0;grid-template-columns:1fr 1fr 1fr;column-gap: 2.5%;row-gap: 1.5rem;} .pc-list a.l {height:10.8rem;border-radius:22px;} .pc-list a.l span {font-size:1.2rem} .pc-list a.l img {margin:0 auto 1rem auto;width:39.5px} .yi-list {height:12rem} .yi-list span.radius {width:8rem;height:8rem;font-size:1.2rem;top:100%} .yi-list span.radius span b {font-size:1.6rem} .yi-list span.radius.r1 {margin-left:-17.9rem;} .yi-list span.radius.r2 {margin-left:-8.6rem;} .yi-list span.radius.r3 {margin-left:0.6rem;} .yi-list span.radius.r4 {margin-left:9.9rem;} .pf-box {height:17rem;margin:0;column-gap:1rem} .pf-box .box {font-size:1.3rem} .pf-box .box .info {font-size:1.6rem;} .pf-box .box .info span img {display:none;width:19px} .pf-box .box .info .btntxt {display:none;} .pf-box.bs02 {height:17rem;margin:0} .pf-box.bs02 .box {font-size:1.3rem} .pf-box.bs02 .box .i {width:65%;margin-bottom:1.3rem;} .pf-box .box .t {display:none!important;font-size:1.5rem} .pf-box .box .info span.btn {width:76% !important;height:24px;line-height:24px;font-size:1.2rem;margin-top:.8rem} .cert-slider {margin:0 -1.5rem} .corp-with {justify-content:center} .corp-with span {width:33%;padding:0 5%} .yi-tabs label {height:3.5rem;line-height:3.3rem;width:32.3%;font-size:1.5rem} .yi-tabs .sub label {margin:.3rem .5%;} .yi-tabs > label {margin-bottom:.6rem} .yi-portfolio-list-btns {display:none} .yd-layer iframe {width:100%;height:350px} .yd-layer a.close {right:50%;top:auto;bottom:10%;margin-right:-30px;border-radius:60px;} .yd-layer a.close:after, .yd-layer a.close:before {margin:-1px 0 0 -30%;width:60%;} .yd-cont {margin:0} .yd-layer.pp-layer a.close {top:auto;bottom:3%;margin-top:0;margin-left:-30px} .s-cont {padding:0} .s-cont .h3 {font-size:2rem;margin-bottom:.6rem} .s-cont .stit {font-size:1.8rem;} .svisual.s01 {height:20rem} .svisual.s01 .t {font-size:1.8rem;padding-left:3rem} .svisual.s01 .t strong {font-size:2.3rem} .s-cont.sc01 {padding:3rem 1.5rem;height:auto;grid-template-columns:1fr;font-size:1.5rem} .s-cont.sc01 .t {line-height:1.7;margin-bottom:3rem;text-align:center} .s-cont.sc01 .i {width:100%;} .s-cont.sc01 .i span {width:30%;margin:0 1.5%;border-radius:3rem;height:13rem;font-size:1.3rem} .s-cont.sc01 .b {width:100%} .s-cont.sc02, .s-cont.sc04 {padding:3rem 1.5rem;} .s-cont.sc02 .step-info {padding:0;column-gap:1.5rem} .s-cont.sc02 .step-info .step {height:13rem;font-size:1.5rem;border-radius:3rem} .s-cont.sc02 .step-info .step b {font-size:3.5rem;top:-2.2rem;margin-left:-2.4rem;} .s-cont.sc02 .step-info .step .ico img {width:36px} .svisual.s02 {padding:3rem 1.5rem;height:auto;} .svisual.s02:before {display:none} .svisual.s02 .t {font-size:2.5rem;margin-bottom:3rem} .svisual.s02 .mid {grid-template-columns:1fr;colums-gap:0} .svisual.s02 .mid .thumb img {width:50%} .svisual.s02 .mid .txts {padding-top:1.5rem;font-size:1.3rem} .svisual.s02 .mid .txts strong {padding-top:3rem;text-align:right} .s-cont.sc03 .img.pc {display:none} .s-cont.sc03 .img.m {display:block} .s-cont.sc03 {padding:3rem 0} .s-cont.sc04 {height:auto;margin-bottom:1.5rem;padding-bottom:6rem} .s-cont.sc04 .pp-wrap {position:static;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:1.5rem;row-gap:1.5rem} .s-cont.sc04 .pp-wrap .p-btn {position:static;display:block;width:auto} .op-free-list {margin:0;grid-template-columns:1fr 1fr;column-gap:1.5rem;row-gap:1.5rem} .op-free-list .list {height:186px;} .op-free-list .list .info {font-size:18px;padding:25px;} .corp-intro {padding:0} .corp-intro .calltxt {right:0; top:50px; font-size:1.2rem;} .corp-intro .name {margin-bottom:1.5rem} .corp-intro .name span {font-size:1.6rem;width:50%;height:4rem;line-height:4rem} .corp-intro .nametitle {font-size:1.2rem; text-align:center; margin-bottom:30px} .tabtbarea {margin-bottom:50px;} .tabtbarea a {font-size: 1.2rem;padding:10px 0; width:110px;} .ci-swiper .swiper-slide {height:25rem} .ci-swiper .swiper-slide .ss_txt {font-size:1.2rem;} .ci-swiper .swiper-pagination {bottom:1.5rem} .ci-swiper .swiper-pagination .swiper-pagination-bullet {width:1rem;height:1rem;margin:0 .3rem} .statistical-box {font-size:1.3rem} .statistical-box .box {padding:0 20px} .statistical-box .box .data {font-size:2.8rem} .statistical-bn {grid-template-columns:1fr} .statistical-bn a {font-size:1.3rem;margin-bottom:1.5rem} .yi-portfolio-list .tab_content {padding:0} .yi-portfolio-list .widget_gallery02 ul {grid-template-columns:1fr 1fr 1fr;column-gap:0.5rem;row-gap:0.5rem} .yi-portfolio-list .widget_gallery02 li p a {line-height:1.4;display:none;} .yi-portfolio-list .last-btns {padding-top:2.5rem} .yi-portfolio-list .last-btns a {width:auto;display:block} .yi-portfolio-list .last-btns a:hover {width:auto} .mgap {height:8.4rem;} } @media (max-width: 767px) { .snsblog {right:80px; top:35px; z-index:100; width:30px;} } @media (max-width: 595px) { .snsblog {right:60px; top:15px; z-index:100; width:30px;} }