@charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap'); @import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css); /* font-family: 'NanumSquare', sans-serif; Regular(400), Bold(700), Extra Bold(800), Light(300) */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap'); /* font-family: 'Lato', sans-serif; */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap'); @font-face {font-family: 'NanumSquareRound'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff'); font-weight: normal; font-style: normal;} @font-face {font-family: "NanumSquareRound";font-style: normal;font-weight: 800; src: url("../../font/NanumSquareRoundEB.eot"), url("../../font/NanumSquareRoundEB.eot?#iefix") format("embedded-opentype"), url("../../font/NanumSquareRoundEB.woff2") format("woff2"), url("../../font/NanumSquareRoundEB.woff") format("woff"), url("../../font/NanumSquareRoundEB.ttf") format("truetype");} @font-face {font-family:'Nanum Gothic'; font-style:normal; font-weight:300; src:url('../../font/NanumGothicLight.otf') format('embedded-opentype'), url('../../font/NanumGothicLight.woff') format('woff'), url('../../font/NanumGothicLight.otf') format('opentype');} *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} html, body,div,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,textarea,p,blockquote,p,iframe,span,strong,em { margin:0; padding:0; font-size:inherit; word-break:break-all; -webkit-text-size-adjust:none; } body{font-family:'Noto Sans SC', 'Malgun Gothic', 'Dotum', sans-serif;color:#000;line-height:auto;font-weight:normal; padding:0px;margin:0px;letter-spacing:-0.025em; word-break:break-all;} html, body {width:100%;/*height:100%;*/;} header, hgroup, footer, section, article, aside, nav, canvas, figure, figcaption { display:block; } table { font-size:inherit; border-collapse:separate /*collapse*/; border-spacing:0; table-layout:fixed; } th, td { word-wrap:break-word; word-break:break-all;font-weight:normal } fieldset, iframe { border:0; vertical-align:top; } small { font-size:12px; color:#666; } img { border:0; font-size:0; vertical-align:top; } address,cite,code,dfn,em,var { font-style:normal; font-weight:normal; } li, dd { list-style:none; word-break:break-all; } hr { display:none; } caption { overflow:hidden;width:100%;height:1px;font-size:1px;line-height:0;text-indent:-9999px; margin-top:-1px; } legend { overflow:hidden; left:-9999px; text-indent:9999px; width:0; height:0; overflow:hidden; line-height:0; white-space:nowrap; color:#000; } button {color:#000; padding:0; border:0; cursor:pointer; background:none; vertical-align:middle; font-size:12px; appearance: none; moz-appearance: none; border:0; *overflow:visible; outline:none;} a {text-decoration:none; color:#000} .transition { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; } .small-r { font-size: 0.7em; /* Adjust this value to make it smaller or larger as needed */ vertical-align: super; /* This keeps the ® at the superscript level */ } /* layout */ #wrap {overflow:hidden;} .inner {width:1440px; position:relative; margin-left:auto; margin-right:auto;} .s-inner {width:1440px; position:relative; margin-left:auto; margin-right:auto;} .s-inner2 {width:1200px; position:relative; margin-left:auto; margin-right:auto;} .text_hidden {display:none;} html.no_scroll {position:fixed; left:0; top:0; right:0; bottom:0;} .tc {text-align:center;} br.pc_br {display:none;} br.tab_br2 {display:none;} br.tab_br3 {display:none;} @media all and (max-width:1440px) { .inner {width:100%;} .s-inner {width:1200px;} } @media all and (max-width:1220px){ .s-inner {width:calc(100% - 80px);} .s-inner2 {width:calc(100% - 80px);} } @media all and (max-width:1024px) { body { font-size: 15px; } br.tab_br {display:none;} br.tab_br2 {display:block;} br.tab_br3 {display:block;} } @media all and (max-width:767px) { .s-inner {width:calc(100% - 40px);} .s-inner2 {width:calc(100% - 40px);} br.mo_br {display:none;} br.pc_br {display:block;} br.tab_br2 {display:none;} } ::selection {background:rgba(0,119,215,0.8); color:#fff;} ::-moz-selection {background:rgba(0,119,215,0.8); color:#fff;} ::-webkit-selection {background:rgba(0,119,215,0.8); color:#fff;} /* header */ #header {width:100%; height:120px; position:fixed; left:0; top:0; z-index:300;} #header > div {width:1440px; margin:0 auto;} #header.sub_header > div {width:1200px;} #header.on {height:400px; background:#fff;} #header.on:before {content:''; display:block; width:100%; height:1px; background:rgba(0,0,0,0.1); position:absolute; left:0; top:120px;} .header_dim {width:100%; height:100%; background:rgba(0,0,0,0.4); position:fixed; left:0; top:0; z-index:290; opacity:0; visibility:hidden;} #header.on + .header_dim {opacity:1; visibility:visible;} @keyframes header { 0% {opacity:0; transform:translateY(-100%);} 100% {opacity:1; transform:translateY(0);} } #logo {float:left; width:150px; height:44px; margin:38px 30px 0 0; transition:margin-top 0.5s} #logo a {display:block; width:100%; height:100%;} #gnb {float:left; } #gnb a {letter-spacing:0;} #gnb > ul > li {float:left;} #gnb > ul > li > a {display:block; font-size:1.125em; line-height:120px; font-weight:600; padding:0 33px; transition:line-height 0.5s} #gnb > ul > li > a span {display:block; position:relative;} #gnb > ul > li > a span:after {content:''; display:block; width:0; height:4px; border-radius:2px; background:#c3ca2c; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.5s} #gnb > ul > li > div {width:905px; height:280px; position:absolute; left:50%; top:120px; margin-left:-510px; padding:40px 80px 0 0; opacity:0; visibility:hidden; transition:top 0.5s} #gnb > ul > li > div > ul {display:flex; justify-content:left;} #gnb > ul > li > div > ul > li {width:20%;} #gnb > ul > li > div > ul > li > a {display:inline-block; font-size:1em; line-height:1.4em; margin-bottom:30px; position:relative;} #gnb > ul > li > div > ul > li > a:after {content:''; display:block; width:0; height:1px; background:#000; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.5s} #gnb > ul > li > div > ul > li > ul > li > a {display:inline-block; font-size:0.875em; color:#666; line-height:1.5em; font-weight:400; margin-bottom:10px; position:relative;} #gnb > ul > li > div > ul > li > ul > li:last-child > a {margin-bottom:0;} #gnb > ul > li > div > ul > li > ul > li > a:after {content:''; display:block; width:0; height:1px; background:#666; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.5s} #gnb > ul > li > div.case2 > ul > li {width:50%; overflow:hidden;} #gnb > ul > li > div.case2 > ul > li > a {float:left; display:block;} #gnb > ul > li > div.case2 > ul > li > a:after {display:inline-block; width:9px !important; height:9px; background:url(../images/icon_gnb_arrow.svg) no-repeat center center; background-size:9px 9px; position:relative; left:0; top:-1px; margin-left:10px; transform:translateX(0) rotate(-90deg)} #gnb > ul > li > div.case2 > ul > li > a:before {content:''; display:block; width:0; height:1px; background:#000; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.5s} #gnb > ul > li > div.case2 > ul > li > a:hover:before {width:100%;} #gnb > ul > li > div.case2 > ul > li > ul {float:right; width:65%;} #gnb > ul > li > div.case3 > ul {justify-content:right;} #gnb > ul > li.on > a span:after, #gnb > ul > li > div > ul > li > a:hover:after, #gnb > ul > li > div > ul > li > ul > li:hover > a:after {width:100%;} #gnb > ul > li.on > div {opacity:1; visibility:visible;} #gnb > div {display:flex; justify-content:space-between; width:332px; height:217px; position:absolute; right:50%; top:150px; margin-right:-720px; opacity:0; visibility:hidden;} #gnb > div > a {display:block; width:calc(50% - 8px); height:100%; border-radius:10px; position:relative; overflow:hidden;} #gnb > div > a:before {content:''; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; transition:transform 0.5s} #gnb > div > a:nth-child(1):before {background-image:url(../images/gnb_banner1.png)} #gnb > div > a:nth-child(2):before {background-image:url(../images/gnb_banner2.png)} #gnb > div > a span {font-size:0.875em; color:#fff; background:url(../images/icon_banner_arrow.svg) no-repeat right center; background-size:16px 16px; padding-right:26px; position:absolute; left:20px; bottom:20px; z-index:5; transition:padding 0.5s;} #header.on #gnb > div {opacity:1; visibility:visible;} #gnb > div > a:hover:before {transform:scale(1.2);} #gnb > div > a:hover span {padding-right:36px;} #header .h_util {float:right;} #header .h_util > a {float:left; display:block; font-size:0.875em; line-height:120px; letter-spacing:0; font-weight:400; position:relative; transition:line-height 0.5s} #header .h_util > a:after {content:''; display:block; width:0; height:1px; background:#000; position:absolute; left:50%; bottom:50%; transform:translate(-50%, 12px); transition:width 0.5s} #header .h_util > a:hover:after {width:100%;} #header .h_util .h_lang {float:left; margin:0 20px 0 30px; position:relative;} #header .h_util .h_lang > button {display:block; font-size:0.875em; line-height:120px; letter-spacing:0; font-weight:400; padding-right:17px; position:relative; transition:line-height 0.5s} #header .h_util .h_lang > button:after {content:''; display:block; width:9px; height:9px; background:url(../images/icon_gnb_arrow.svg) no-repeat center center; background-size:9px 9px; position:absolute; right:0; top:49%; transform:translateY(-50%); transition:margin 0.5s} #header .h_util .h_lang > ul {width:55px; background:#f5f5f5; border-radius:10px; position:absolute; left:50%; top:65%; transform:translateX(-50%); padding:10px 0; opacity:0; visibility:hidden; transition:all 0.6s; transition-property:opacity, visibility;} #header .h_util .h_lang > ul > li > a {display:block; font-size:0.75em; color:#888; line-height:1.5em; font-weight:400; text-align:center;} #header .h_util .h_lang > ul > li.on > a {color:#000;} #header .h_util .h_lang.on > button:after {transform:translateY(-50%) rotate(180deg)} #header .h_util .h_lang.on > ul {opacity:1; visibility:visible;} #header .h_util .h_lang:not(.on) > button:hover:after {margin-top:2px;} #menuOpen {width:28px; height:28px; background:url(../images/icon_menu.svg) no-repeat center center; background-size:28px 28px; margin-top:46px; transition:margin-top 0.5s} #menuClose {width:28px; height:28px; background:url(../images/icon_menu_close.svg) no-repeat center center; background-size:28px 28px; position:absolute; right:50%; top:45px; margin-right:-720px;} #all_gnb {width:100%; height:100vh; background:#fff; padding:120px 0 0; position:fixed; left:0; top:0; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility;} #all_gnb .gnb_box {width:1420px; height:100%; overflow-y:scroll; margin:0 auto;} #all_gnb .gnb_box::-webkit-scrollbar {width:2px;} #all_gnb .gnb_box::-webkit-scrollbar-thumb {background:#000;} #all_gnb .gnb_box::-webkit-scrollbar-track {background:#fff} #all_gnb .gnb_box .icon.arrow {background:url(../images/icon_gnb_arrow.svg) no-repeat center center; position:absolute; top:48%; transform:translateY(-50%) rotate(-90deg)} #all_gnb .gnb_box > ul {width:1144px; margin:0 auto;} #all_gnb .gnb_box > ul > li {width:100%; overflow:hidden; border-bottom:1px solid rgba(0,0,0,0.1); padding:50px 0;} #all_gnb .gnb_box > ul > li:first-child {padding-top:0;} #all_gnb .gnb_box > ul > li > a {float: left; display:block; width:250px; font-size:1.75em; font-weight:800; font-family:'Noto Sans SC';} #all_gnb .gnb_box > ul > li > a > span {position:relative;} #all_gnb .gnb_box > ul > li > a > span .icon.arrow {width:14px; height:14px; background-size:14px 14px; right:-35px;} #all_gnb .gnb_box > ul > li > div {float:left; width:calc(100% - 250px);} #all_gnb .gnb_box > ul > li > div > ul {display:flex; justify-content:left;} #all_gnb .gnb_box > ul > li > div > ul > li {width:20%;} #all_gnb .gnb_box > ul > li > div > ul > li > a {display:inline-block; font-size:1em; line-height:1.4em; margin-bottom:30px; position:relative;} #all_gnb .gnb_box > ul > li > div > ul > li > a:after {content:''; display:block; width:0; height:1px; background:#000; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.5s} #all_gnb .gnb_box > ul > li > div > ul > li > a .icon.arrow {width:9px; height:9px; background-size:9px 9px; right:-26px;} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li > a {display:inline-block; font-size:0.875em; color:#666; line-height:1.5em; font-weight:400; margin-bottom:10px; position:relative;} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li > a:after {content:''; display:block; width:0; height:1px; background:#666; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.5s} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li:last-child > a {margin-bottom:0;} #all_gnb .gnb_box > ul > li > div > ul > li > a:hover:after, #all_gnb .gnb_box > ul > li > div > ul > li > ul > li:hover > a:after {width:100%;} #all_gnb .all_util {display:none;} #all_gnb.active {opacity:1; visibility:visible;} #header.scroll_on {background:#fff;} @media screen and (min-width:1221px){ #header.sub_header {} #header.sub_header #gnb > ul > li > div {width:660px; margin-left:-385px;} #header.sub_header #gnb > div {margin-right:-600px;} #header.sub_header #all_gnb .gnb_box {width:1180px;} #header.sub_header #menuClose {margin-right:-600px;} } @media screen and (min-width:1025px){ #header.scroll_on {height:90px;} #header.scroll_on.on {height:370px;} #header.scroll_on.on:before {top:90px;} #header.scroll_on #logo {margin-top:25px;} #header.scroll_on #gnb > div {top:120px;} #header.scroll_on #gnb > ul > li > a {line-height:90px;} #header.scroll_on #gnb > ul > li > div {top:90px;} #header.scroll_on .h_util > a {line-height:90px;} #header.scroll_on .h_util .h_lang > button {line-height:90px;} #header.scroll_on #menuOpen {margin-top:30px;} #header.scroll_on #menuClose {top:30px;} #all_gnb .gnb_box > ul > li > div {display:block !important;} #all_gnb .gnb_box > ul > li > div.case2 > ul > li {width:40%;} #all_gnb .gnb_box > ul > li > div.case2 > ul > li > ul {width:100%; overflow:hidden;} #all_gnb .gnb_box > ul > li > div.case2 > ul > li > ul > li {float:left; width:50%;} } @media screen and (max-width:1440px){ #header > div {width:1200px;} #gnb > ul > li > a {padding:0 20px;} #gnb > ul > li > div {width:668px; margin-left:-400px; padding-right: 20px;} #gnb > div {margin-right:-600px; opacity:1;} #all_gnb .gnb_box {width:1180px;} #menuClose {margin-right:-600px;} } @media screen and (max-width:1220px){ #header > div, #header.sub_header > div {width:calc(100% - 80px);} #gnb > ul > li > a {padding:0 15px;} #gnb > ul > li > div {width:calc(100% - 412px); left:40px; margin-left:0;} #gnb > div {right:40px; margin-right:0;} #all_gnb .gnb_box {width:calc(100% - 100px);} #all_gnb .gnb_box > ul {width:calc(100% - 40px);} #all_gnb .gnb_box > ul > li > a {width:180px;} #all_gnb .gnb_box > ul > li > div {width:calc(100% - 180px);} #menuClose {margin-right:0; right:40px;} } @media screen and (max-width:1024px){ #header {height:90px;} #logo {width:138px; height:40px; margin-top:24px;} #logo img {width:100%;} #gnb {display:none;} #header .h_util > a {display:none;} #header .h_util .h_lang {display:none;} #menuOpen {width:42px; height:42px; background-size:42px 42px; margin-top:24px;} #menuClose {width:42px; height:42px; background-size:42px 42px; right:43px; top:24px;} #all_gnb {padding-bottom:100px;} #all_gnb .gnb_box {width:100%; padding-left:80px; -ms-overflow-style: none; scrollbar-width: none;} #all_gnb .gnb_box::-webkit-scrollbar {display: none;} #all_gnb .gnb_box .icon.arrow {display:none;} #all_gnb .gnb_box > ul {width:100%;} #all_gnb .gnb_box > ul > li {border-bottom:0; margin-bottom:10px; padding:0;} #all_gnb .gnb_box > ul > li:last-of-type {display:none;} #all_gnb .gnb_box > ul > li > a {float:none; width:100%; font-size:1.76em; line-height:80px; position:relative; padding:0 80px 0 95px; background-repeat:no-repeat; background-position:40px center; background-size:32px auto; border-radius:15px 0 0 15px;} #all_gnb .gnb_box > ul > li > a:after {content:''; display:block; width:19px; height:12px; background:url(../images/icon_gnb_arrow2.svg) no-repeat center center; background-size:19px 12px; position:absolute; right:60px; top:50%; margin-top:-6px; transform:rotate(180deg); opacity:0.4} #all_gnb .gnb_box > ul > li > a.on {background-color:#efefef} #all_gnb .gnb_box > ul > li > a.on:after {transform:rotate(0deg); opacity:1;} #all_gnb .gnb_box > ul > li > div {display:none; float:none; width:100%;} #all_gnb .gnb_box > ul > li > div > ul {display:block; width:100%; padding:0 0 0 38px;} #all_gnb .gnb_box > ul > li > div > ul > li {width:100%; padding:25px 0; border-bottom:1px solid rgba(0,0,0,0.08); overflow:hidden;} #all_gnb .gnb_box > ul > li > div > ul > li:last-child {border-bottom:0;} #all_gnb .gnb_box > ul > li > div > ul > li > a {float:left; font-size:1.2em; font-family:'Noto Sans SC'; margin-bottom:0;} #all_gnb .gnb_box > ul > li > div > ul > li > ul {float:right; width:calc(100% - 145px); overflow:hidden;} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li {float:left; width:33.33%;} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li:nth-child(3) ~ li {margin-top:15px;} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li > a {font-size:1.06em; color:#666; font-family:'Noto Sans SC'; margin-bottom:0;} #all_gnb .gnb_box > ul > li > div.case2 > ul > li {width:100%;} #all_gnb .all_util {display:block; width:100%; padding:0 100px 0 80px; position:absolute; left:0; top:0; overflow:hidden;} #all_gnb .all_util > a {float:left; font-size:1.33em; line-height:90px;} #all_gnb .all_util > ul {float:right; overflow:hidden;} #all_gnb .all_util > ul > li {float:left; margin-left:15px;} #all_gnb .all_util > ul > li > a {display:block; font-size:1.07em; color:#888; font-weight:400; line-height:90px;} #all_gnb .all_util > ul > li.on > a {color:#000;} #all_gnb .gnb_box > ul > li:nth-child(1) > a {background-image:url(../images/icon_gnb1.png);} #all_gnb .gnb_box > ul > li:nth-child(2) > a {background-image:url(../images/icon_gnb2.png);} #all_gnb .gnb_box > ul > li:nth-child(3) > a {background-image:url(../images/icon_gnb3.png);} #all_gnb .gnb_box > ul > li:nth-child(4) > a {background-image:url(../images/icon_gnb4.png);} #all_gnb .gnb_box > ul > li:nth-child(5) > a {background-image:url(../images/icon_gnb5.png);} #all_gnb .gnb_box > ul > li:nth-child(6) > a {background-image:url(../images/icon_gnb6.png);} } @media screen and (max-width:767px){ #header {height:60px;} #header > div, #header.sub_header > div {width:calc(100% - 40px);} #logo {width:111px; height:32px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); margin-top:0;} #menuOpen {width:28px; height:28px; background-size:28px 28px; margin-top:16px;} #menuClose {width:28px; height:28px; background-size:28px 28px; right:20px; top:15px;} #all_gnb {padding:100px 0;} #all_gnb .gnb_box {padding-left:46px;} #all_gnb .gnb_box > ul > li > a {font-size:1.2em; line-height:54px; padding:0 40px 0 58px; background-position:22px center; background-size:22px auto;} #all_gnb .gnb_box > ul > li > a:after {width:13px; height:8px; background-size:13px 8px; right:28px; margin-top:-4px;} #all_gnb .gnb_box > ul > li > div > ul {padding:0 0 0 23px;} #all_gnb .gnb_box > ul > li > div > ul > li {width:100%; padding:15px 0;} #all_gnb .gnb_box > ul > li > div.case2 > ul > li {width:100%;} #all_gnb .gnb_box > ul > li > div > ul > li > a {font-size:0.93em;} #all_gnb .gnb_box > ul > li > div > ul > li > ul {width:calc(100% - 120px)} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li {float:none; width:100%;} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li:nth-child(1) ~ li {margin-top:10px;} #all_gnb .gnb_box > ul > li > div > ul > li > ul > li > a {font-size:0.86em;} #all_gnb .all_util {padding:0 80px 0 45px;} #all_gnb .all_util > a {font-size:1.07em; line-height:60px;} #all_gnb .all_util > ul > li > a {font-size:0.93em; line-height:60px;} } /* footer */ #footer {width:100%; background:#f5f5f5; padding:80px 0; position:relative; z-index:30;} #footer .s-inner {display:flex; justify-content:space-between; flex-wrap:wrap;} #footer .f_logo {display:block; position:absolute; left:0; bottom:35px} #footer .f_util {overflow:hidden;} #footer .f_util li {float:left; margin-right:25px;} #footer .f_util li:last-child {margin-right:0;} #footer .f_util li a {font-size:1em; font-weight:600; position:relative;} #footer .f_util li a:after {content:''; display:block; width:0; height:1px; background:#000; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:width 0.5s;} #footer .f_util li a:hover:after {width:100%;} #footer .f_info {overflow:hidden;} #footer .f_info li {float:left; font-size:0.75em; color:rgba(0,0,0,0.6); line-height:1.76em;} #footer .f_info li:first-child {margin-right:60px;} #footer .f_txt {font-size:0.75em; color:rgba(0,0,0,0.6); line-height:1.76em; margin-top:30px;} #footer .f_sns {overflow:hidden; margin-top:30px;} #footer .f_sns li {float:left; margin-right:8px;} #footer .f_sns li a {display:block; width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:100% auto; transition:background 0.5s} #footer .f_sns li.facebook a {background-image:url(../images/icon_facebook.png);} #footer .f_sns li.instagram a {background-image:url(../images/icon_instagram.png);} #footer .f_sns li.youtube a {background-image:url(../images/icon_youtube.png);} #footer .f_sns li.blog a {background-image:url(../images/icon_blog.png);} #footer .f_sns li.naverstore a {background-image:url(../images/icon_naverstore.png);} #footer .f_sns li.knmall a {background-image:url(../images/icon_knmall.png);} #footer .f_sns li.naverblog a {background-image:url(../images/icon_naverblog.png);} #footer .copy {font-size:0.75em; position:absolute; left:0; bottom:0;} @media screen and (min-width:1221px){ #footer.sub_footer .s-inner {width:1200px;} } @media screen and (max-width:1024px){ #footer {padding:40px 0;} #footer .s-inner {display:block;} #footer .f_logo {position:relative; bottom:0; margin-bottom:40px;} #footer .f_util li {float:none; margin-right:0; margin-bottom:20px;} #footer .f_util li a {font-size:1.1em;} #footer .f_info li {float:none; font-size:0.86em;} #footer .f_info li:first-child {margin-right:0;} #footer .f_info li br {display:none;} #footer .f_txt {font-size:0.86em; margin-top:0;} #footer .copy {font-size:0.86em; margin-top:15px; position:relative;} } @media screen and (max-width:767px){ #footer .f_logo {width:125px; margin-bottom:30px;} #footer .f_logo img {width:100%} #footer .f_util li {margin-bottom:10px;} #footer .f_util li a {font-size:1em;} #footer .f_info {margin-top:10px;} #footer .f_info li {font-size:0.8em;} #footer .f_txt {font-size:0.8em;} #footer .copy {font-size:0.8em;} } /* quick */ #Quick:before {content:''; display:block; width:300px; height:100vh; position:fixed; right:0; top:0; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0.5)); opacity:0; visibility:hidden; transition:opacity 0.3s, visibility 0.3s; z-index:90;} #Quick > div {max-width:88px; position:fixed; right:0; top:50%; transform:translate(100%, -50%); z-index:100; transition:transform 0.5s, top 0s 0.5s, max-width 0s 0.5s /*animation:quick1 1.5s forwards*/} #Quick.load > div {transform:translate(0, -50%);} #Quick .brand_btn {float:right; display:block; width:88px; height:88px; background:#34ab81; box-shadow:0 15px 15px rgba(12,17,27,0.15); font-size:1em; color:#fff; font-weight:600; font-family:'Noto Sans SC'; border-radius:0 40px 0 40px; text-transform:uppercase; position:relative; transition:margin-right 0.2s, margin-bottom 0s 0.2s;} #Quick .brand_btn span {width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); transition:all 0s; transition-property:opacity, visibility; transition-delay:0.5s, 0.5s;} #Quick .brand_btn span:last-child {width:20px; height:20px; background:url(../images/quick_icon.png) no-repeat center center; background-size:cover; font-size:0; opacity:0; visibility:hidden;} #Quick ul {width:183px; clear:both;} #Quick ul:after {content:''; display:block; width:100%; clear:both;} #Quick ul li {float:left; width:88px; border-radius:32px; overflow:hidden; transition:transform 0.5s, box-shadow 0.5s;} #Quick ul li:nth-child(2) ~ li {margin-top:7px;} #Quick ul li:nth-child(even), #Quick ul li:last-of-type {float:right;} #Quick ul li a {display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:0; background:#fff; overflow:hidden; transition:height 0s 0.2s;} #Quick ul li a img {max-width:80%; margin:-12px 0;} #Quick ul li a p {font-size:0.75em; color:#666; line-height:1.2em; text-align: center;} #Quick ul li:hover {transform:scale(1.05); box-shadow:0 12px 24px rgba(12,17,27,0.2)} #Quick .top_btn {float:right; width:60px; height:60px; background:#c2ca2b; box-shadow:0 15px 15px rgba(12,17,27,0.15); font-size:0.96em; color:#fff; font-weight:600; font-family:'Noto Sans SC'; border-radius:30px 0 30px 0; text-transform:uppercase; margin-top:-50px; position:relative; z-index:5; transition:margin-right 0.2s, margin-top 0s 0.2s;} #Quick.on:before {opacity:1; visibility:visible;} #Quick.on > div {max-width:100%; transform:translate(-20px, -50%); transition:transform 0.5s, top 0s 0s, max-width 0s 0s; /*animation:quick2 1.5s linear forwards*/} #Quick.on .brand_btn {margin-bottom:25px; transition:margin-right 0.5s;} #Quick.on .brand_btn span {transition-delay:0s, 0s;} #Quick.on .brand_btn span:first-child {opacity:0; visibility:hidden;} #Quick.on .brand_btn span:last-child {opacity:1; visibility:visible;} #Quick.on ul li a {height:88px; transition-delay:0s;} #Quick.on .top_btn {margin-top:25px;transition:margin-right 0.5s;} #Quick .brand_btn:hover, #Quick .top_btn:hover {margin-right:10px;} @keyframes quick1 { 0% {transform:translate(100%, -50%);} 100% {transform:translate(0%, -50%);} } @keyframes quick2 { 00% {transform:translate(100%, -50%);} 100% {transform:translate(0%, -50%); right:27px;} } @media screen and (max-height:650px){ #Quick.on .brand_btn {margin-bottom:8px;} #Quick.on .top_btn {margin-top:7px;} } @media screen and (max-height:768px){ #Quick.on .brand_btn {margin-bottom:8px;} #Quick.on .top_btn {margin-top:7px;} @keyframes quick2 { 0% {transform:translate(100%, -50%);} 100% {transform:translate(0%, -50%); right:10px;} } } @media screen and (max-width:1024px){ #Quick > div {top:70%;} #Quick .brand_btn {font-size:1.06em;} #Quick ul li a p {font-size:0.8em;} #Quick .top_btn {font-size:1.06em;} #Quick.on > div {top:50%;} } @media screen and (max-width:767px){ #Quick .brand_btn {font-size:0.8em; width:50px; height:50px; border-radius:0 25px 0 25px;} #Quick .top_btn {width:40px; height:40px; border-radius:20px 0 20px 0; font-size:0.8em; margin-top:-20px;} #Quick.on .brand_btn {margin-bottom:8px; margin-right:-20px;} #Quick.on .top_btn {margin-top:7px; margin-right:-20px;} } /* main */ #main {width:100%; position:relative;} #main > div {position:relative; z-index:10;} #main h2 {font-size:3.25em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC';} #lottie1 {display:block; width:3000px; height:1800px; position:absolute; left:50%; top:-260px; transform:translateX(-50%);} #lottie1_tab {display:block; width:900px; height:auto; position:absolute; left:-65px; top:0; display:none;} #lottie1_mo {display:block; width:600px; height:1000px; position:absolute; left:50%; top:-280px; transform:translateX(-50%); display:none;} #lottie2 {display:block; width:3000px; height:2500px; position:absolute; left:50%; /*top:-79.5vh;*/ top:-780px; transform:translateX(-50%);} #lottie2_tab {display:block; width:900px; height:auto; position:absolute; left:50%; /*top:-79.5vh;*/ top:-370px; transform:translateX(-50%); display:none;} #lottie2_mo {display:block; width:600px; height:1800px; position:absolute; left:50%; /*top:-79.5vh;*/ top:-470px; transform:translateX(-50%); display:none;} #lottie3 {display:block; width:3000px; height:3050px; position:absolute; left:50%; top:80px; transform:translateX(-50%);} #lottie3_tab {display:block; width:1100px; height:auto; position:absolute; left:50%; top:370px; transform:translateX(-50%); display:none;} #lottie3_mo {display:block; width:600px; height:auto; position:absolute; left:50%; top:200px; transform:translateX(-50%); display:none;} #mVisu {display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:100vh; background:#fff; padding-top:120px; position:relative; overflow:hidden; z-index:30 !important;} #mVisu > div:not(.mVisu_slide_wrap) {width:100%; position:relative;} #mVisu .tit {font-size:2.75em; line-height:1.6em; letter-spacing:0; font-weight:600; font-family:'Noto Sans SC'; text-align:center; opacity:0; transform:translateY(70px); animation:mVisu_tit 0.5s linear forwards 1.5s} #mVisu .bar {width:1px; height:80px; background:#000; margin:70px auto 20px; position:relative; opacity:0; transition:opacity 0.4s 1s} #mVisu .bar:before {content:''; display:block; width:16px; height:16px; border-radius:50%; border:4px solid #fff; background:#000; position:absolute; left:0; top:-10px; transform:scale(0.5); margin-left:-7px;} #mVisu.active .bar {opacity:1;} #mVisu.active .bar:before {animation:mVisu_bar 1s infinite alternate cubic-bezier(0.42, 0.0, 1.0, 1.0) 2s;} #mVisu .mVisu_slide_wrap {height:300px; margin:0 auto;} #mVisu .mVisu_slide_box {width:0; height:300px; border-radius:30px; box-shadow:0 40px 40px rgba(12,17,27,0.15); background:#000; position:absolute; left:50%; top:0; z-index:5; margin:0 auto; transform:translateX(-50%); /*position:absolute; left:50%; top:63vh; transform:translateX(-50%);*/ transition:width 0.4s 0.4s, height 0.4s, top 0.4s, left 0.4s 0.4s, transform 0.4s 0.4s, border-radius 0.2s, box-shadow 0.2s; overflow:hidden;} #mVisu.active .mVisu_slide_box {width:100%; /* transition:width 0.8s 1s, height 1s, top 1s, left 0.8s 1s, transform 0.8s 1s, border-radius 0.5s, box-shadow 0.5s;*/} /*#mVisu .mVisu_slide_box.on {width:100vw; height:100vh; top:0; border-radius:0; box-shadow:none; position:absolute; left:50%; top:0; transform:translateX(-50%); transition:width 0.8s, height 1s 0.8s, top 1s 0.8s, border-radius 0.5s 0.8s, box-shadow 0.5s 0.8s, position 0s 0.8s;}*/ #mVisu .mVisu_slide_box.on {width:100vw !important; height:100vh; left:50%; top:0; border-radius:0; transform:translateX(-50%); margin:0; transition:width 0.4s, height 0.4s 0.4s, top 0.4s 0.4s, border-radius 0.2s 0.8s, box-shadow 0.2s 0.4s, position 0s 0.4s; transition-timing-function:ease-in-out;} #mVisu .mVisu_slide_box.stop {transition:all 0s; transition-timing-function:ease-in-out;} #mVisu .mVisu_slide {width:100vw; height:100vh; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); overflow:hidden; background:#000;} #mVisu .mVisu_slide .swiper-slide {height:100%; position:relative;} #mVisu .mVisu_slide video {min-width:125vw; min-height:125vh; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)} #mVisu .mVisu_slide .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0;} #mVisu .mVisu_slide .swiper-button-next, #mVisu .mVisu_slide .swiper-button-prev {display:block; width:70px; line-height:44px; opacity:0; font-size:1em; color:#fff; font-family:'Noto Sans SC';} #mVisu .mVisu_slide .swiper-button-next {right:115px; text-align:right; padding-right:20px;} #mVisu .mVisu_slide .swiper-button-prev {left:85px; text-align:left; padding-left:20px;} #mVisu .mVisu_slide .swiper-button-next:after, #mVisu .mVisu_slide .swiper-button-prev:after {content:''; width:0; height:2px; background:#fff; position:absolute; top:50%; margin-top:-1px; transition:all 0.5s} #mVisu .mVisu_slide .swiper-button-next:after {right:6px;} #mVisu .mVisu_slide .swiper-button-prev:after {left:6px;} #mVisu .mVisu_slide .swiper-button-next:before, #mVisu .mVisu_slide .swiper-button-prev:before {width:20px; height:20px; background-repeat:no-repeat; background-position:center center; background-size:20px 20px; position:absolute; top:50%; margin-top:-10px; transition:all 0.5s} #mVisu .mVisu_slide .swiper-button-next:before {content:''; background-image:url(../images/icon_arrow_next_w.svg); right:0;} #mVisu .mVisu_slide .swiper-button-prev:before {content:''; background-image:url(../images/icon_arrow_prev_w.svg); left:0;} #mVisu .mVisu_slide .swiper-button-next:hover {} #mVisu .mVisu_slide .swiper-button-next:hover:after {width:20px; right:-13px} #mVisu .mVisu_slide .swiper-button-prev:hover:after {width:20px; left:-13px;} #mVisu .mVisu_slide .swiper-button-next:hover:before {right:-20px;} #mVisu .mVisu_slide .swiper-button-prev:hover:before {left:-20px;} #mVisu .mVisu_slide .swiper-pagination {opacity:0; transition:opacity 0.5s} #mVisu .mVisu_slide.swiper-container-horizontal>.swiper-pagination-bullets {bottom:240px;} #mVisu .mVisu_slide.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 14px;} #mVisu .mVisu_slide .swiper-pagination-bullet {width:220px; height:auto; border-radius:0; background:none; font-size:1em; color:#fff; font-family:'Noto Sans SC'; padding-bottom:20px; position:relative; opacity:0.5;} #mVisu .mVisu_slide .swiper-pagination-bullet .num {display:inline-block; margin-right:8px; word-break:keep-all} #mVisu .mVisu_slide .swiper-pagination-bullet .num:after {content:''; display:block; width:100%; height:2px; background:rgba(255,255,255,0.4); position:absolute; left:0; bottom:0;} #mVisu .mVisu_slide .swiper-pagination-bullet .num .progress {content:''; display:block; width:0; height:2px; background:#fff; position:absolute; left:0; bottom:0; z-index:2;} #mVisu .mVisu_slide .swiper-pagination-bullet a {display:none; width:100%; font-size:0.81em; color:#fff; font-family:'Noto Sans SC'; text-align:center; position:absolute; left:0; top:100%; margin-top:15px;} #mVisu .mVisu_slide .swiper-pagination-bullet a:after {content:''; display:inline-block; width:9px; height:9px; background:url(../images/mVisu_icon.svg) no-repeat center center; background-size:9px 9px; margin-left:2px; position:relative; top:1px;} #mVisu .mVisu_slide .swiper-pagination-bullet-active {opacity:1;} #mVisu .mVisu_slide .swiper-pagination-bullet-active .num .progress {animation:mVisu_bullet 5s forwards linear;} #mVisu .mVisu_slide .swiper-pagination-bullet-active a {display:block;} #mVisu .stop .mVisu_slide .swiper-button-next, #mVisu .stop .mVisu_slide .swiper-button-prev, #mVisu .stop .mVisu_slide .swiper-pagination {opacity:1;} #mVisu .mVisu_slide .swiper-pagination-bullet:hover {opacity:1;} @keyframes mVisu_tit { 0% {opacity:0; transform:translateY(70px);} 100% {opacity:1; transform:translateY(0px);} } @keyframes mVisu_bar { 0% {top:-10px; transform:scale(0.5)} 100% {top:90%; transform:scale(1)} } @keyframes mVisu_bullet { 0% {width:0%;} 100% {width:100%;} } @media screen and (min-height:1080px){ #lottie2 {top:-60.1vh} #mVisu .mVisu_slide_wrap {height:400px;} #mVisu .mVisu_slide_box {height:400px;} } @media screen and (max-width:1440px){ } @media screen and (max-width:1220px){ } @media screen and (max-width:1024px){ #lottie1 {display:none;} #lottie1_tab {display:block;} #lottie2 {display:none;} #lottie2_tab {display:block;} #lottie3 {display:none;} #lottie3_tab {display:block;} #main h2 {font-size:2.53em;} #mVisu {padding-top:250px;} #mVisu .mVisu_slide_box {border-radius:30px;} #mVisu .tit {font-size:2.53em;} #mVisu .bar {margin-top:20px;} #mVisu .mVisu_slide video {min-width:0; min-height:110vh;} #mVisu .mVisu_slide .swiper-button-next {right:30px;} #mVisu .mVisu_slide .swiper-button-prev {left:30px;} #mVisu .mVisu_slide.swiper-container-horizontal>.swiper-pagination-bullets {bottom:140px;} #mVisu .mVisu_slide.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 8px;} #mVisu .mVisu_slide .swiper-pagination-bullet {width:130px; font-size:0.93em;} #mVisu .mVisu_slide .swiper-pagination-bullet a {font-size:0.86em;} } @media screen and (max-width:767px){ #lottie1_tab {display:none;} #lottie1_mo {display:block;} #lottie2_tab {display:none;} #lottie2_mo {display:block;} #lottie3_tab {display:none;} #lottie3_mo {display:block;} #main h2 {font-size:1.73em;} #mVisu .tit {font-size:1.73em;} #mVisu .bar {margin:15px auto 0;} #mVisu .mVisu_slide_wrap {height:200px;} #mVisu .mVisu_slide_box {height:200px; border-radius:16px; box-shadow:0 13px 13px rgba(12,17,27,0.15);} #mVisu .mVisu_slide .swiper-button-next, #mVisu .mVisu_slide .swiper-button-prev {display:none;} #mVisu .mVisu_slide.swiper-container-horizontal>.swiper-pagination-bullets {bottom:30px;} #mVisu .mVisu_slide .swiper-pagination-bullet {width:20px; font-size:0; vertical-align:top;} #mVisu .mVisu_slide .swiper-pagination-bullet .num {display:block; font-size:16px; padding-right:140px;} #mVisu .mVisu_slide .swiper-pagination-bullet .num .progress, #mVisu .mVisu_slide .swiper-pagination-bullet .num:after {display:none; width:130px; left:20%; bottom:auto; top:8px;} #mVisu .mVisu_slide .swiper-pagination-bullet .num:after {} #mVisu .mVisu_slide .swiper-pagination-bullet a {top:72%; margin-top:0;} #mVisu .mVisu_slide .swiper-pagination-bullet-active {width:180px; font-size:16px;} #mVisu .mVisu_slide .swiper-pagination-bullet-active .num .progress, #mVisu .mVisu_slide .swiper-pagination-bullet-active .num:after {display:block;} @keyframes mVisu_bullet { 0% {width:0%;} 100% {width:130px;} } } #mService {margin:200px auto 0;} #mService > div {width:50%; margin-top:295px;} #mService > div:nth-of-type(2) {margin-left:50%;} #mService > div:nth-of-type(3) {height:250px; margin-top:0 !important;} #mService > div h3 {font-size:2.5em; line-height:1.2em; letter-spacing:0; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:60px;} #mService > div ul {width:100%; overflow:hidden;} #mService > div ul li {float:left; width:50%; font-size:1.125em; line-height:24px; padding-left:12px; position:relative;} #mService > div ul li:nth-child(3) {clear:both;} #mService > div ul li:nth-child(2) ~ li {margin-top:30px;} #mService > div ul li:before {content:''; display:block; width:4px; height:4px; background:#000; border-radius:50%; position:absolute; left:0; top:9px;} #mService > div ul li span {display:block; font-size:0.8em; color:rgba(0,0,0,0.6); font-weight:400; margin-top:10px;} @media screen and (max-width:1024px){ #mService > div {margin-top:310px;} #mService > div:nth-of-type(2) {width:60%; margin:210px 0 0 45%;} #mService > div:nth-of-type(2) ul li:nth-child(odd) {width:40%;} #mService > div:nth-of-type(2) ul li:nth-child(even) {width:53%;} #mService > div:nth-of-type(2) ~ div {width:65%; margin-top:160px;} #mService > div:nth-of-type(3) {height:40px;} #mService > div h3 {font-size:2em; margin-bottom:50px;} #mService > div ul li {font-size:1em; padding-left:18px;} #mService > div ul li:nth-child(2) ~ li {margin-top:20px;} #mService > div ul li:before {width:7px; height:7px; top:6px;} } @media screen and (max-width:767px){ #mService {margin-top:100px;} #mService h2 {text-align:left !important;} #mService > div {width:100%; margin-top:100px;} #mService > div:nth-of-type(2) {width:100%; margin-left:0; margin-top:120px;} #mService > div:nth-of-type(2) ~ div {width:100%; margin-top:190px;} #mService > div:nth-of-type(2) ul li:nth-child(odd), #mService > div:nth-of-type(2) ul li:nth-child(even) {width:100%;} #mService > div:nth-of-type(3) {height:130px;} #mService > div h3 {font-size:1.46em; margin-bottom:20px;} #mService > div ul li {float:none; width:100%; font-size:0.93em; padding-left:10px;} #mService > div ul li:nth-child(1) ~ li {margin-top:10px;} #mService > div ul li:before {width:4px; height:4px;} #mService > div ul li span {margin-top:5px;} } #mNews {margin-top:260px;} #mNews .box {width:100%; margin-top:60px;} #mNews .box:after {content:''; display:block; width:100%; clear:both;} #mNews .box > div {float:left; width:calc(33.33% - 32px); height:428px; border-radius:80px; margin:0 48px 45px 0; position:relative; overflow:hidden; transition:box-shadow 0.5s, border-radius 0.6s} #mNews .box > div:nth-child(1) {width:calc(66.66% - 16px);} #mNews .box > div:nth-child(2), #mNews .box > div:last-child {margin-right:0;} #mNews .box > div:nth-child(2) ~ div {margin-bottom:0;} #mNews .box > div a {display:block; width:100%; height:100%; color:#fff;} #mNews .box > div .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; transition:transform 0.5s; overflow:hidden;} #mNews .box > div .img_box:before {content:''; display:block; width:100%; height:100%; background:url(../images/mNews_gradation.png) repeat-x left bottom; background-size:auto 263px; position:absolute; left:0; bottom:0;} #mNews .box > div .txt_box {width:100%; padding:0 35px; position:absolute; left:0; bottom:35px; z-index:5;} #mNews .box > div .txt_box .cate {display:inline-block; background:#34ab81; border-radius:16px 16px 16px 0; font-size:0.84em; line-height:32px; font-family:'Noto Sans SC'; padding:0 15px; margin-bottom:15px;} #mNews .box > div .txt_box h3 {font-size:1.25em; font-weight:600; font-family:'Noto Sans SC';} #mNews .box > div .txt_box .date {display:block; font-size:0.84em; margin-top:30px;} #mNews .box > div:hover {box-shadow:0px 40px 40px rgba(12,17,27,0.15); border-radius:180px 10px 180px 10px;} #mNews .box > div:hover .img_box {transform:scale(1.1);} @media screen and (max-width:1440px){ #mNews .box > div {height:367px;} } @media screen and (max-width:1220px){ #mNews .box > div {width:calc(33.33% - 20px); height:28vw; border-radius:50px; margin:0 30px 30px 0;} #mNews .box > div:nth-child(1) {width:calc(66.66% - 10px);} #mNews .box > div .txt_box {padding:0 20px;} #mNews .box > div .txt_box .cate {margin-bottom:5px;} #mNews .box > div .txt_box .date {margin-top:15px;} #mNews .box > div:hover {border-radius:120px 10px 120px 10px;} } @media screen and (max-width:1024px){ #mNews .box > div {width:calc(33.33% - 13.33px); border-radius:40px; margin:0 20px 20px 0;} #mNews .box > div:nth-child(1) {width:calc(66.66% - 7.77px);} #mNews .box > div:hover {border-radius:80px 10px 80px 10px;} #mNews .box > div .img_box:before {height:50%; background-size:auto 100%;} #mNews .box > div .txt_box {bottom:15px; } #mNews .box > div .txt_box .cate {font-size:0.93em;;} #mNews .box > div .txt_box h3 {font-size:0.96em;} #mNews .box > div .txt_box .date {font-size:0.9em; margin-top:10px;} } @media screen and (max-width:767px){ #mNews {margin-top:250px;} #mNews > div {width:calc(100% + 40px); overflow-x:scroll; margin-left:-20px; padding:0 20px; -ms-overflow-style: none; scrollbar-width: none;} #mNews > div::-webkit-scrollbar {display: none;} #mNews .box {width:1104px; margin-top:40px;} #mNews .box > div {width:208px; height:auto; border-radius:0; margin:0 16px 0 0; overflow:visible;} #mNews .box > div:nth-child(1) {width:208px;} #mNews .box > div:nth-child(2) {border-radius:0; margin-right:16px;} #mNews .box > div .img_box {height:174px; position:relative; border-radius:26px; /*box-shadow:0 13px 13px rgba(12,17,27,0.15)*/ box-shadow:none;} #mNews .box > div .txt_box {padding:0; position:relative; bottom:0; margin-top:20px;} #mNews .box > div .txt_box h3 {color:#000;} #mNews .box > div .txt_box .date {font-size:0.8em; color:#000;} #mNews .box > div:hover {box-shadow:none;} #mNews .box > div:hover .img_box {transform:scale(1); /*box-shadow:0 13px 13px rgba(12,17,27,0.15)*/ box-shadow:none;} } #mCompany {display:flex; justify-content:space-between; margin:260px auto 1100px; position:relative;} #mCompany > div {width:calc(25% - 36px); height:270px; position:relative; z-index:10; border-radius:100px 10px 100px 10px; transition:all 0.5s; transition-property:background, box-shadow;} #mCompany > div:after, #mCompany > div:before {content:''; display:block; border-radius:1.5px; background:#000; position:absolute; transition:all 0.5s; transition-property:background, transform;} #mCompany > div:after {width:21px; height:3px; left:48px; bottom:59px;} #mCompany > div:before {width:3px; height:21px; left:57px; bottom:50px;} #mCompany > div a {display:block; width:100%; height:100%; padding:50px 10px 0 48px;} #mCompany > div h3 {font-size:1.78em; font-weight:600; font-family:'Noto Sans SC'; transition:color 0.3s} #mCompany > div p {font-size:0.96em; line-height:1.67em; margin-top:20px; transition:color 0.3s} @media screen and (min-width:1025px){ #mCompany > div:hover {background:#bdd537; box-shadow:0 40px 40px rgba(12,17,27,0.15)} #mCompany > div:hover:after, #mCompany > div:hover:before {background:#fff; transform:rotate(180deg)} #mCompany > div:hover h3, #mCompany > div:hover p {color:#fff;} } @media screen and (max-width:1440px){ #mCompany > div {width:calc(25% - 15px);} #mCompany > div:after {left:30px;} #mCompany > div:before {left:39px;} #mCompany > div a {padding-left:30px;} } @media screen and (max-width:1220px){ #mCompany > div {border-radius:80px 10px 80px 10px;} } @media screen and (max-width:1024px){ #mCompany {flex-wrap:wrap; margin-top:200px; margin-bottom:650px;} #mCompany > div {width:calc(50% - 5px); height:220px; border-radius:50px 10px 50px 10px;} #mCompany > div a {padding:30px 10px 0 20px;} #mCompany > div:nth-child(2) ~ div {margin-top:10px;} #mCompany > div:after {left:20px; bottom:29px;} #mCompany > div:before {left:29px; bottom:20px;} #mCompany > div h3 {font-size:1.73em; } #mCompany > div p {font-size:1.17em; margin-top:30px;} } @media screen and (max-width:767px){ #mCompany {margin-top:100px; margin-bottom:450px;} #mCompany > div {height:155px; border-radius:30px 10px 30px 10px;} #mCompany > div:nth-of-type(2) ~ div {margin-top:20px;} #mCompany > div a {padding:0;} #mCompany > div:after {width:14px; height:2px; left:0;} #mCompany > div:before {width:2px; height:14px; left:6px; bottom:23px;} #mCompany > div h3 {font-size:1.2em;} #mCompany > div p {font-size:0.8em; margin-top:15px;} #mCompany > div:hover {background:#fff; box-shadow:none;} #mCompany > div:hover:after, #mCompany > div:hover:before {background:#000; transform:rotate(0deg)} #mCompany > div:hover h3, #mCompany > div:hover p {color:#000;} } .mReport_slide {width:100%; padding-top:80px; position:relative;} .mReport_slide .swiper-slide {width:448px} .mReport_slide .swiper-slide.case1 {width:570px} .mReport_slide .swiper-slide a {display:block; width:100%; height:100%;} .mReport_slide .img_box {width:100%; height:370px; border-radius:80px; transition:all 0.5s; transition-property:box-shadow, border-radius; position:relative; overflow:hidden;} .mReport_slide .swiper-slide:hover .img_box {border-radius:180px 10px 180px 10px; box-shadow:0 40px 40px rgba(12,17,27,0.15)} .mReport_slide .img_box > div {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; transition:transform 0.5s} .mReport_slide .swiper-slide:hover .img_box > div {transform:scale(1.1)} .mReport_slide .txt_box {margin-top:30px;} .mReport_slide .txt_box span {display:block; font-size:0.96em; color:rgba(0,0,0,0.5); margin-bottom:20px;} .mReport_slide .txt_box p {font-size:1.25em; line-height:1.5em; letter-spacing:0; font-weight:600; font-family:'Noto Sans SC'; max-height:3em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .mReport_slide .swiper-button-next, .mReport_slide .swiper-button-prev {width:48px; height:48px; background-size:48px 48px; margin-top:0; top:-30px;} .mReport_slide .swiper-button-next {background-image:url(../images/icon_arrow_next.svg); right:0;} .mReport_slide .swiper-button-prev {background-image:url(../images/icon_arrow_prev.svg); left:auto; right:58px;} .mReport_slide .swiper-button-next:after, .mReport_slide .swiper-button-prev:after {display:none;} @media screen and (max-width:1440px){ .mReport_slide .swiper-slide {width:28vw;} .mReport_slide .swiper-slide.case1 {width:55vw} .mReport_slide .img_box {height:28vw;} } @media screen and (max-width:1220px){ .mReport_slide .img_box {border-radius:50px;} .mReport_slide .swiper-slide:hover .img_box {border-radius:120px 10px 120px 10px;} } @media screen and (max-width:1024px){ .mReport_slide {padding-top:50px;} .mReport_slide .swiper-slide.case1 {width:45vw;} .mReport_slide .img_box {height:220px; border-radius:40px;} .mReport_slide .swiper-slide:hover .img_box {border-radius:80px 10px 80px 10px;;} .mReport_slide .txt_box {margin-top:20px;} .mReport_slide .txt_box span {font-size:0.9em; margin-bottom:10px;} .mReport_slide .txt_box p {font-size:0.96em;} .mReport_slide .swiper-button-next, .mReport_slide .swiper-button-prev {width:31px; height:31px; background-size:31px 31px; top:-20px;} .mReport_slide .swiper-button-prev {right:45px;} } @media screen and (max-width:767px){ .mReport_slide {padding-top:30px;} .mReport_slide .swiper-slide {width:208px;} .mReport_slide .swiper-slide.case1 {width:208px;} .mReport_slide .img_box {height:174px; border-radius:26px; /*box-shadow:0 13px 13px rgba(12,17,27,0.15)*/} .mReport_slide .swiper-slide:hover .img_box {border-radius:16px; /*box-shadow:0 13px 13px rgba(12,17,27,0.15)*/ box-shadow:none;} .mReport_slide .swiper-slide:hover .img_box > div {transform:scale(1)} .mReport_slide .txt_box span, .mReport_slide .txt_box p {font-size:0.93em;} .mReport_slide .swiper-button-next, .mReport_slide .swiper-button-prev {display:none;} } #mContact {margin-bottom:130px; padding-top:720px;} #mContact h2 {margin-bottom:200px;} #mContact > div {width:100%; height:180px; border-top:1px solid #000; padding-top:60px; position:relative;} #mContact > div:after {content:''; display:block; width:100%; clear:both;} #mContact > div h3 {float:left; width:50%; font-size:2em; font-weight:600; font-family:'Noto Sans SC';} #mContact > div .txt_box {float:left; width:50%; padding-right:50px;} #mContact > div .txt_box .txt1 {font-size:1em; line-height:1.75em;} #mContact > div .txt_box .number {font-size:1.5em; letter-spacing:0; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:10px;} #mContact > div .txt_box a {display:block; width:46px; height:46px; border-radius:50%; background:#000; position:absolute; right:0; top:50%; transform:translateY(-50%); transition:all 0.5s; transition-property:background, box-shadow;} #mContact > div .txt_box a:after {content:''; display:block; width:100%; height:100%; background:url(../images/mContact_icon1.svg) no-repeat center center; background-size:46px 46px; position:absolute; left:0; top:0; transition:all.2s ease-in-out;} #mContact > div .txt_box a:before {display:block; content:''; position:absolute; top:50%; margin-top:-1px; right:41%; width:0; height:2px; background:#fff; transition:all.2s ease-in-out;} #mContact > div .txt_box a:hover:after {transform:translateX(5px);} #mContact > div .txt_box a:hover:before {width:20px; transform:translateX(5px)} @media screen and (max-width:1024px){ #mContact {margin-bottom:100px; padding-top:470px;} #mContact h2 {margin-bottom:90px;} #mContact > div {height:auto; min-height:110px; padding:40px 0;} #mContact > div h3 {width:40%; font-size:1.6em;} #mContact > div .txt_box {width:60%; padding-right:35px;} #mContact > div .txt_box a {width:32px; height:32px;} #mContact > div .txt_box a:after {background-size:32px 32px;} #mContact > div .txt_box a:before {display:none; height:1px; margin-top:0;} #mContact > div .txt_box a:hover:after {transform:translateX(0)} #mContact > div .txt_box .number {font-size:1.46em; margin-bottom:0px;} } @media screen and (max-width:767px){ #mContact {margin-bottom:70px; padding-top:430px;} #mContact h2 {margin-bottom:40px;} #mContact > div {height:auto; min-height:0; padding:20px 0;} #mContact > div h3 {float:none; width:100%; font-size:1.2em; margin-bottom:10px;} #mContact > div .txt_box {float:none; width:100%; padding-right:0;} #mContact > div .txt_box .txt1 {font-size:0.8em;} #mContact > div .txt_box .number {font-size:1.07em;} #mContact > div .txt_box a {width:26px; height:26px; background-size:26px 26px; top:27px; transform:translateY(0);} } /* sub */ #sub_content {width:100%; min-height:70vh; padding:120px 0;} @media screen and (max-width:1024px){ #sub_content {padding:90px 0;} } @media screen and (max-width:767px){ #sub_content {padding:60px 0;} } .sCompany h3 {font-size:3.75em; line-height:1.33em; font-weight:600; font-family:'Noto Sans SC';} .sCompany .sub_tab {position:fixed; left:20px; top:50vh; transform:translateY(-50%); z-index:20;} .sCompany .sub_tab li {padding-left:11px; position:relative; margin-bottom:20px;} .sCompany .sub_tab li:last-child {margin-bottom:0;} .sCompany .sub_tab li a {font-size:1em;} .sCompany .sub_tab li.on:before {content:''; display:block; width:5px; height:5px; border-radius:50%; background:#000; position:absolute; left:0; top:7px;} .sCompany .sub_tab li.on a {font-weight:600;} .sCompany_case1_wrap {position:relative;} .sCompany_case1 {display:flex; justify-content:center; align-items:center; height:100vh; position:relative;} .sCompany_case1 h3 {margin-top:-300px; position:relative; z-index:5; transition:all 0.6s; transition-property:color, margin;} .sCompany_case1 .img_box {width:694px; height:315px; border-radius:30px; box-shadow:0 40px 40px rgba(12,17,27,0.15); background:url(../images/sCompany_img1.jpg) no-repeat center center; background-size:cover; position:absolute; left:50%; top:50%; transform:translate(-50%, 0); overflow:hidden; /*transition:all 1s; transition-property:width, height, left, top, transform, border-radius;*//*transition:width 0.8s 1s, height 1s, top 1s, left 0.8s 1s, transform 0.8s 1s, border-radius 0.5s, box-shadow 0.5s;*/transition:all 0.8s;} .sCompany_case1 .bar {position:absolute; left:50%; bottom:20px; width:1px; height:80px; background:#000; transition:background 0.5s} .sCompany_case1 .bar:before {content:''; display:block; width:15px; height:15px; border-radius:50%; border:4px solid #fff; background:#000; position:absolute; left:50%; top:-10px; transform:translateX(-50%) scale(0.5); transition:background 0.5s; animation:sCompany_bar 1s infinite alternate cubic-bezier(0.42, 0.0, 1.0, 1.0);} .sCompany_case1.active h3 {color:#fff; margin-top:0;} .sCompany_case1.active .img_box {width:100%; height:100%; top:0; box-shadow:none; border-radius:0; /*transition:width 0.8s, height 1s 0.8s, top 1s 0.8s, border-radius 0.5s 0.8s, box-shadow 0.5s 0.8s, position 0s 0.8s;*/ transition-timing-function:ease-in-out;} .sCompany_case1.active .bar {background:#fff;} .sCompany_case1.active .bar:before {border-color:#2d4233; background:#fff;} @keyframes sCompany_bar { 0% {top:-10px; transform:translateX(-50%) scale(0.5)} 100% {top:90%; transform:translateX(-50%) scale(1)} } .sCompany_case2 {width:100%; height:100vh; position:relative;} .sCompany_case2 > div {width:100%; height:100%; position:absolute; left:0; top:0;} .sCompany_case2 > div .txt_box {padding-top:350px;} .sCompany_case2 > div .txt_box h3 {width:50%; background:#fff;} .sCompany_case2 > div .txt_box p {width:45%; font-size:1.125em; line-height:2.22em; margin-top:80px;} .sCompany_case2 > div .img_box {width:calc(50% - 20px); height:100%; position:absolute; right:0; top:0; z-index:10;} .sCompany_case2 > div .img_box:before {content:''; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);} .sCompany_case2 > div:nth-child(1) .img_box:before {background-image:url(../images/sCompany_img2.jpg)} .sCompany_case2 > div:nth-child(2) .img_box:before {background-image:url(../images/sCompany_img3.jpg)} .sCompany_case2 > div .txt_box h3 {opacity:0; visibility:hidden; transform:translateY(60px); transition:all 0.5s; transition-property:opacity, visibility, transform; transition-delay:0.4s;} .sCompany_case2 > div .txt_box p {opacity:0; visibility:hidden; transform:translateY(60px); transition:all 0.5s; transition-property:opacity, visibility, transform; transition-delay:0.5s;} .sCompany_case2 > div .img_box:before {width:50%; height:60%; border-radius:50px; opacity:0; margin-top:60px; transition:width 0.8s 1s, height 0.8s 1s, border-radius 0.8s 1s, opacity 0.5s 0.6s, margin-top 0.5s 0.6s} .sCompany_case2.active > div .txt_box h3 {opacity:1; visibility:visible; transform:translateY(0);} .sCompany_case2 > div.on {z-index:5;} .sCompany_case2 > div.on .txt_box p {opacity:1; visibility:visible; transform:translateY(0);} .sCompany_case2 > div.on .img_box:before {width:100%; height:100%; border-radius:0; opacity:1; margin-top:0;} .sCompany_case2 > div.hide .txt_box p {opacity:0; visibility:hidden; transform:translateY(-60px);} .sCompany_case3 {position:relative;} .sCompany_case3:before {content:''; display:block; width:100%; height:100%; background:url(../images/sCompany_img4.png) no-repeat center top; position:absolute; left:0; top:0; z-index:5;} .sCompany_case3:after {content:''; display:block; width:600px; height:461px; background:url(../images/sCompany_img5.png) no-repeat center center; position:absolute; left:48.5%; bottom:230px; transform:translateX(-50%); z-index:5;} .sCompany_case3 .tit {font-size:12.5em; letter-spacing:0.12em; line-height:1.2em; font-weight:600; font-family:'Noto Sans SC'; text-align:center; text-transform:uppercase;} .sCompany_case3 .tit1 {padding:365px 0 150px 0;} .sCompany_case3 .tit2 {padding:385px 0 150px 0;} .sCompany_case3 dl {text-align:center; position:relative; z-index:10;} .sCompany_case3 dl dt {font-size:2.25em; line-height:1.55em; font-weight:600; font-family:'Noto Sans SC'} .sCompany_case3 dl dd {font-size:1em; line-height:2em; margin-top:25px;} .sCompany_case3.trigger1:before, .sCompany_case3.trigger1:after {display:none !important;} .sCompany_case3.trigger1 .tit {opacity:0 !important;} #company_lottie1 {display:block; width:3000px; height:1880px; position:absolute; left:50%; top:0; transform:translateX(-50%)} #company_lottie1_tab {display:none; width:768px; height:auto; position:absolute; left:50%; top:0; transform:translateX(-50%)} #company_lottie1_mo {display:none; width:640px; height:auto; position:absolute; left:50%; top:0; transform:translateX(-50%)} .sCompany_case4 {margin-top:130px; padding-top:100px;} .sCompany_case4 div ul:after {content:''; display:block; width:100%; clear:both;} .sCompany_case4 div ul li {float:left; width:calc(50% - 24px); height:428px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:50px; box-shadow:0 30px 60px rgba(12,17,27,0.15); position:relative;} .sCompany_case4 div ul li:nth-child(2n) {float:right;} .sCompany_case4 div ul li:nth-child(2) ~ li {margin-top:46px;} .sCompany_case4 div ul li p {font-size:2.25em; color:#fff; line-height:1.2em; font-weight:600; font-family:'Noto Sans SC'; position:absolute; left:50px; bottom:50px;} .sCompany_case4 {position:relative;} .sCompany_case4 div ul li:nth-child(1) {background-image:url(../images/sCompany_img6.png)} .sCompany_case4 div ul li:nth-child(2) {background-image:url(../images/sCompany_img7.png)} .sCompany_case4 div ul li:nth-child(3) {background-image:url(../images/sCompany_img8.png)} .sCompany_case4 div ul li:nth-child(4) {background-image:url(../images/sCompany_img9.png)} @media screen and (min-width:1025px){ } @media screen and (max-width:1440px){ .sCompany_case2 > div .txt_box {padding-left:150px; padding-right:150px;} .sCompany_case2 > div .txt_box p br {display:none;} } @media screen and (max-width:1220px){ .sCompany_case2 > div .txt_box {padding-left:110px; padding-right:110px;} .sCompany_case3:before {background-size:1000px auto;} .sCompany_case3:after {width:480px; height:360px; background-size:contain; left:47.5%;} .sCompany_case3 .tit {font-size:10em;} /*.sCompany_case3 .tit1 {padding:275px 0 90px;} .sCompany_case3 .tit2 {padding:277px 0 60px;}*/ .sCompany_case4 div ul li {height:30vw;} } @media screen and (max-width:1024px){ .sCompany h3 {font-size:2.53em;} .sCompany .sub_tab {display:flex; justify-content:center; width:100%; height:70px; border-bottom:1px solid #eee; background:#fff; position:fixed; left:0; top:90px; transform:translate(0);} .sCompany .sub_tab li {padding-left:0; margin:0 25px;} .sCompany .sub_tab li a {font-size:1.33em; color:#aaa; line-height:70px;} .sCompany .sub_tab li.on:before {width:100%; height:3px; border-radius:1px; top:auto; bottom:0;} .sCompany .sub_tab li.on a {color:#000;} .sCompany .sub_tab.scroll_on {position:fixed;} .sCompany_case1 .img_box {width:688px; height:310px; top:45%;} .sCompany_case1 .img_box:before {margin-top:-95px;} .sCompany_case1.active .img_box {height:calc(100vh - 91px); top:91px;} /*.sCompany_case2 {height:auto;} .sCompany_case2 > div {position:relative;}*/ .sCompany_case2 > div .txt_box {height:50vh; padding:250px 0 0 0;} .sCompany_case2 > div .txt_box h3 {width:100%; font-size:2em;} .sCompany_case2 > div .txt_box p {width:100%; font-size:1em; margin-top:40px;} .sCompany_case2 > div .img_box {width:100%; height:50vh; position:relative;} #company_lottie1 {display:none;} #company_lottie1_tab {display:block;} .sCompany_case3 {margin-bottom:70px;} .sCompany_case3:before {background-size:732px auto;} .sCompany_case3:after {width:340px; height:261px; background-size:contain; left:48.5%; bottom:auto; top:646px;} .sCompany_case3 .tit {font-size:7.3em;} .sCompany_case3 .tit1 {padding:204px 0 110px} .sCompany_case3 .tit2 {padding:180px 0 110px;} .sCompany_case3 dl dt {font-size:1.6em;} .sCompany_case3 dl dd {font-size:1em; margin-top:20px;} .sCompany_case4 {padding-top:230px; margin-top:0;} .sCompany_case4 div ul li {width:calc(50% - 8px); height:25vw; border-radius:35px;} .sCompany_case4 div ul li:nth-child(2) ~li {margin-top:16px;} .sCompany_case4 div ul li p {font-size:1.06em; left:30px; bottom:20px;} } @media screen and (max-width:767px){ .sCompany h3 {font-size:1.73em;} .sCompany .sub_tab {height:50px; top:60px;} .sCompany .sub_tab li {margin:0 15px;} .sCompany .sub_tab li a {font-size:0.8em; line-height:50px;} .sCompany .sub_tab li.on:before {height:2px;} .sCompany_case1 {} .sCompany_case1 h3 {margin-bottom:0; padding-left:20px; padding-right:20px;} .sCompany_case1 .img_box {width:320px; height:200px;} .sCompany_case1 .img_box:before {margin-top:-55px;} .sCompany_case1.active .img_box {height:calc(100vh - 61px); top:61px;} .sCompany_case2 > div .txt_box {padding:160px 0 0;} .sCompany_case2 > div .txt_box h3 {font-size:1.73em;} .sCompany_case2 > div .txt_box p {font-size:0.93em; margin-top:30px;} #company_lottie1_tab {display:none;} #company_lottie1_mo {display:block;} .sCompany_case3:before {background-size:440px auto;} .sCompany_case3:after {width:193px; height:149px; top:395px;} .sCompany_case3 .tit1 {font-size:5em; padding:167px 0 60px;} .sCompany_case3 .tit2 {font-size:4.3em; letter-spacing:0.02em; padding:206px 0 65px;} .sCompany_case3 dl dt {font-size:1.2em;} .sCompany_case3 dl dd {font-size:0.8em; margin-top:10px;} .sCompany_case4 {padding-top:150px;} .sCompany_case4 div ul li {height:40vw; border-radius:15px;} .sCompany_case4 div ul li p {font-size:0.93em; left:20px; bottom:15px;} } .sEsg_case1 {width:100%; height:100vh; position:relative; overflow:hidden;} .sEsg_case1 .img_box {width:400px; height:400px; border-radius:150px 10px 150px 10px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); overflow:hidden; transition:all 0.8s; transition-property:width, height, border-radius;} .sEsg_case1 .img_box div {width:100vw; height:100vh; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)} .sEsg_case1 .img_box.active {width:100%; height:100%; border-radius:0;} .sEsg_case1 .txt_list {width:100%; position:relative; z-index:10; transition:transform 0.8s} .sEsg_case1 .txt_list > div {width:100%; height:100vh;} .sEsg_case1 .sEsg_txt1 {width:100%; height:100%; position:relative; text-align:center;} .sEsg_case1 .sEsg_txt1 h3 {font-size:2em; color:#44b48c; font-weight:800; font-family:'Noto Sans SC'; position:absolute; left:50%; top:50%; transform:translate(-50%, -290px);} .sEsg_case1 .sEsg_txt1 p {width:100%; font-size:5em; font-weight:800; font-family:'Noto Sans SC'; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)} .sEsg_case1 .bar {position:absolute; left:50%; bottom:20px; width:1px; height:80px; background:#000; transition:background 0.5s} .sEsg_case1 .bar:before {content:''; display:block; width:15px; height:15px; border-radius:50%; border:4px solid #fff; background:#000; position:absolute; left:50%; top:-10px; transform:translateX(-50%) scale(0.5); transition:background 0.5s; animation:sCompany_bar 1s infinite alternate cubic-bezier(0.42, 0.0, 1.0, 1.0);} .sEsg_case1 .img_box.active + .txt_list {transform:translateY(-50%)} .sEsg_case1 .img_box.active + .txt_list + .bar {background:#fff;} .sEsg_case1 .img_box.active + .txt_list + .bar:before {border-color:#92bd35; background:#fff;} .sEsg_case1 .img_box.active + .txt_list + .bar.case2:before {border-color:#8fc8e6;} .sEsg_case1 .img_box.active + .txt_list + .bar.case3:before {border-color:#405c3f;} .sEsg_tit1 {text-align:center;} .sEsg_tit1 span {display:inline-block; background:#34ab81; border-radius:16px 16px 16px 0; font-size:0.875em; color:#fff; line-height:32px; padding:0 20px;} .sEsg_tit1 h4 {font-size:3.24em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'; margin-top:30px;} .sEsg_tit1 p {font-size:1.125em; color:#888; line-height:1.5em; margin-top:15px;} @media screen and (max-width:1024px){ .sEsg_case1 .img_box {width:300px; height:300px; border-radius:100px 5px 100px 5px;} .sEsg_case1 .sEsg_txt1 h3 {font-size:1.73em; transform:translate(-50%, -220px)} .sEsg_case1 .sEsg_txt1 p {font-size:2.33em;} .sEsg_case1 .sEsg_txt1 p img {width:139px;} .sEsg_tit1 span {font-size:0.93em; } .sEsg_tit1 h4 {font-size:2.33em; margin-top:20px;} .sEsg_tit1 p {font-size:1em; margin-top:10px;} } @media screen and (max-width:767px){ .sEsg_case1 .img_box {width:200px; height:200px; border-radius:70px 5px 70px 5px; box-shadow:0 13px 13px rgba(12,17,27,0.15)} .sEsg_case1 .sEsg_txt1 h3 {font-size:1.33em; transform:translate(-50%, -145px)} .sEsg_case1 .sEsg_txt1 p {font-size:1.73em;} .sEsg_case1 .sEsg_txt1 p img {width:85px;} .sEsg_case1 .img_box.actvie {box-shadow:0;} .sEsg_tit1 span {border-radius:15px 15px 15px 0; line-height:30px; padding:0 16px;} .sEsg_tit1 h4 {font-size:1.73em;} .sEsg_tit1 p {font-size:0.93em; margin-top:5px;} } .sEnvironmental_case1 {display:flex; justify-content:center; align-items:center; width:100%; height:100%; text-align:center; color:#fff;} .sEnvironmental_case1 .tit {font-size:1.5em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:100px;} .sEnvironmental_case1 .txt {font-size:2.5em; line-height:1.7em; font-weight:600; font-family:'Noto Sans SC';} .sEnvironmental_case1 span {display:block; font-size:1em; margin-top:60px;} .sEnvironmental_case2 {padding-top:150px;} .sEnvironmental_case2 .img_box {width:100%; text-align:center; margin:100px auto;} .sEnvironmental_case2 .img_box img {width:100%; max-width:954px;} .sEnvironmental_case2 .img_box .mo_img {display:none;} .sEnvironmental_case2 .tit {font-size:1.125em; font-weight:600; margin:100px 0 20px;} .sEnvironmental_case2 table .img1 {max-width:100%;} .sEnvironmental_case2 table.table_case2 td:not(td.center) {vertical-align:top;} .sEnvironmental_case2 .marker_list1 {font-size:0;} .sEnvironmental_case2 .marker_list1 li {display:inline-block; vertical-align:middle;} .sEnvironmental_case2 .marker_list2 {font-size:0;} .sEnvironmental_case2 .marker_list2 li {display:inline-block; vertical-align:middle;} .sEnvironmental_case2 .marker_list2 li:nth-child(2) img {width:49px;} .sEnvironmental_case3 {padding-top:180px;} .sEnvironmental_case3 .img_box {width:590px; margin:100px auto 0;} .sEnvironmental_case3 .img_box img {width:100%;} .sEnvironmental_case3 .img_box .mo_img {display:none;} @media screen and (max-width:1024px){ .sEnvironmental_case1 .tit {font-size:1.6em; margin-bottom:70px;} .sEnvironmental_case1 .txt {font-size:2.27em;} .sEnvironmental_case1 span {margin-top:30px;} .sEnvironmental_case2:last-of-type .sub_table_box {width:calc(100% + 40px); overflow-x:auto;} .sEnvironmental_case2:last-of-type .sub_table_box .table_style2 {min-width:1128px;} .sEnvironmental_case2 .img_box {margin-top:80px; margin-bottom:60px;} .sEnvironmental_case2 .tit {font-size:1.13em; margin-top:50px;} .sEnvironmental_case2 .img2 {width:36px;} .sEnvironmental_case2 .img3 {width:32px;} .sEnvironmental_case2 .img4 {width:59px;} .sEnvironmental_case2 .marker_list1 li:nth-child(1) img {width:59px} .sEnvironmental_case2 .marker_list1 li:nth-child(2) img {width:51px} .sEnvironmental_case2 .marker_list2 li:nth-child(1) img {width:37px} .sEnvironmental_case2 .marker_list2 li:nth-child(2) img {width:42px} } @media screen and (max-width:767px){ .sEnvironmental_case2:first-of-type .sub_table_box {width:calc(100% + 20px); overflow-x:auto;} .sEnvironmental_case2.box1 .sub_table_box .table_style2 {min-width:680px;} .sEnvironmental_case2.box1 .sub_table_box .table_style2.case2 tbody td {padding-left:20px;} .sEnvironmental_case2:last-of-type .sub_table_box {width:calc(100% + 20px);} .sEnvironmental_case2:last-of-type .sub_table_box .table_style2 {min-width:1220px;} .sEnvironmental_case2 .img_box {margin-top:50px; margin-bottom:50px;} .sEnvironmental_case2 .img_box .pc_img {display:none;} .sEnvironmental_case2 .img_box .mo_img {display:inline;} } .sEnvironmental_case3 {padding-top:150px;} .sEnvironmental_case3 .img_box {width:541px; margin-top:50px;} @media screen and (max-width:767px){ .sEnvironmental_case1 .tit {font-size:1.2em; margin-bottom:40px;} .sEnvironmental_case1 .txt {font-size:1.73em;} .sEnvironmental_case1 span {font-size:0.93em;} .sEnvironmental_case2 {padding-top:80px;} .sEnvironmental_case2 .tit {font-size:1.07em; margin-top:40px;} .sEnvironmental_case2 .img2 {width:37px;} .sEnvironmental_case2 .img3 {width:36px;} .sEnvironmental_case2 .img4 {width:51px;} .sEnvironmental_case2 .marker_list1 li:nth-child(1) img {width:33px} .sEnvironmental_case2 .marker_list1 li:nth-child(2) img {width:36px} .sEnvironmental_case3 {padding-top:100px;} .sEnvironmental_case3 .img_box {width:100%; max-width:337px; margin-top:40px;} .sEnvironmental_case3 .img_box .pc_img {display:none;} .sEnvironmental_case3 .img_box .mo_img {display:inline;} } .sSocially_case1 {display:flex; justify-content:center; align-items:center; width:100%; height:100%; text-align:center; color:#fff;} .sSocially_case1 .tit {margin-bottom:60px;} .sSocially_case1 .tit img {width:89px;} .sSocially_case1 .txt {font-size:2.5em; line-height:1.7em; font-weight:600; font-family:'Noto Sans SC';} .sSocially_case1 .instagram {display:block; width:255px; line-height:78px; border-radius:39px; background:#000; margin:60px auto 0; font-size:1.5em; color:#fff; font-weight:600; text-align:left; padding-left:39px;} .sSocially_case1 .instagram:before {content:''; display:inline-block; width:52px; height:52px; background:url(../images/sSocially_icon1.png) no-repeat center center; background-size:contain; margin-right:5px; vertical-align:middle;} .sSocially_case2 {padding:150px 0 200px;} .sSocially_case2 > div {margin-bottom:190px;} .sSocially_case2 > div:last-child {margin-bottom:0;} .sSocially_case2 > div:after {content:''; display:block; width:100%; clear:both;} .sSocially_case2 .sEsg_tit1 {float:left; width:410px; text-align:left;} .sSocially_case2 ul {float:left; width:calc(100% - 410px);} .sSocially_case2 ul:after {content:''; display:block; width:100%; clear:both;} .sSocially_case2 ul li {float:left; width:calc(50% - 12px); margin-right:24px;} .sSocially_case2 ul li:nth-child(even) {margin-right:0;} .sSocially_case2 ul li:nth-child(2) ~ li {margin-top:70px;} .sSocially_case2 ul li .img_box {width:100%; height:280px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:10px;} .sSocially_case2 ul li p {font-size:0.9375em; font-weight:600; text-align:center; margin-top:30px;} .sSocially_case3 {width:100%; position:relative; padding-top:120px;} .sSocially_case3:before {content:''; display:block; width:100%; height:calc(100% - 200px); background:url(../images/sSocially_img5.jpg) no-repeat center center; background-size:cover; position:absolute; left:0; top:0;} .sSocially_case3 .s-inner2 {position:relative; z-index:10;} .sSocially_case3 .box {margin-top:60px;} .sSocially_case3 .box:after {content:''; display:block; width:100%; clear:both;} .sSocially_case3 .box > div {float:left; display:flex; justify-content:center; width:calc(50% - 12px); height:520px; background:#fff; border-radius:50px; box-shadow:0 30px 60px rgba(26,19,37,0.2); padding-top:70px;} .sSocially_case3 .box > div:last-child {float:right;} .sSocially_case3 .box p {font-size:1.25em; color:rgba(0,0,0,0.8); font-weight:600; text-align:center;} .sSocially_case3 .box p span {display:block; font-size:2em; font-weight:800; font-family:'Noto Sans SC'; margin-top:20px;} .sSocially_case3 .box > div:first-child p span {color:#f388b0;} .sSocially_case3 .box > div:last-child p span {color:#34ab81} .sSocially_case3 .box .img_box {display:flex; justify-content:center; width:100%; margin:40px 0;} .sSocially_case3 .box .img_box > li:first-child {margin-right:24px;} .sSocially_case3 .box .img_box > li img {max-width:100%;} .sSocially_case3 .box .list_box > li {font-size:0.875em; color:rgba(0,0,0,0.5); line-height:1.43em; text-align:center; margin-bottom:7px;} .sSocially_case3 .box .list_box > li:last-child {margin-bottom:0;} .sSocially_case3 .box .list_box > li:before {content:'•';} .sSocially_case4 {padding:150px 0 260px;} .sSocially_case4 .sEsg_tit1 h4 {margin-top:0} .sSocially_case4 .img_box {margin-top:45px; position:relative;} .sSocially_case4 .img_box img {max-width:100%;} .sSocially_case4 .img_box p {width:100%; font-size:0.875em; color:rgba(255,255,255,0.6); position:absolute; left:0; bottom:30px; text-align:center;} .sSocially_case5:after {content:''; display:block; width:100%; clear:both;} .sSocially_case5 .sEsg_tit1 {float:left; width:410px; text-align:left;} .sSocially_case5 .sEsg_tit1 h4 {margin-top:0} .sSocially_case5 .txt_box {float:left; width:calc(100% - 410px);} .sSocially_case5 .img_box {display:inline-block; margin-top:40px; position:relative;} .sSocially_case5 .img_box:before {content:''; display:block; width:159px; height:159px; border-radius:50%; background:url(../images/sSocially_img9_2.png) no-repeat center center; background-size:cover; position:absolute; right:-94px; bottom:27px;} @media screen and (max-width:1220px){ .sSocially_case3 .box > div {} } @media screen and (max-width:1024px){ .sSocially_case1 .tit img {width:64px;} .sSocially_case1 .txt {font-size:2em;} .sSocially_case1 .instagram {width:177px; line-height:54px; border-radius:27px; font-size:1.06em; margin-top:30px; padding-left:27px;} .sSocially_case1 .instagram:before {width:35px; height:35px;} .sSocially_case2 {padding:100px 0 120px;} .sSocially_case2 > div {margin-bottom:100px;} .sSocially_case2 .sEsg_tit1 {float:none; width:100%; margin-bottom:60px;} .sSocially_case2 ul {float:none; width:100%;} .sSocially_case2 ul li {width:calc(50% - 10px); margin-right:20px;} .sSocially_case2 ul li:nth-child(2) ~ li {margin-top:40px;} .sSocially_case2 ul li .img_box {height:33vw} .sSocially_case2 ul li p {font-size:1em; margin-top:20px;} .sSocially_case3 {padding-top:70px;} .sSocially_case3:before {height:calc(100% - 135px);} .sSocially_case3 .box {display:flex; justify-content:space-between; width:100%; margin-top:40px;} .sSocially_case3 .box:after {display:none;} .sSocially_case3 .box > div {float:none !important; width:calc(50% - 10px); height:auto; border-radius:30px; padding:40px 0 25px; box-shadow:0 2px 40px rgba(26,19,37,0.2)} .sSocially_case3 .box p {font-size:0.87em;} .sSocially_case3 .box p span {font-size:1.8em; margin-top:10px;} .sSocially_case3 .box .img_box {padding:0 50px; margin:25px 0 20px;} .sSocially_case3 .box .img_box > li:first-child {margin-right:10px;} .sSocially_case3 .box .list_box > li {font-size:0.87em;} .sSocially_case3 .box > div:first-child .list_box {padding:0 55px;} .sSocially_case3 .box > div:last-child .list_box {padding:0 25px;} .sSocially_case4 {padding:120px 0;} .sSocially_case4 .img_box {margin-top:40px;} .sSocially_case4 .img_box p {font-size:0.87em; bottom:20px;} .sSocially_case5 .sEsg_tit1 {float:none; width:100%; text-align:center;} .sSocially_case5 .txt_box {float:none; width:100%; margin-top:40px;} .sSocially_case5 .img_box img {width:208px;} .sSocially_case5 .img_box:before {width:146px; height:146px; right:-87px; bottom:25px;} } @media screen and (max-width:767px){ .sSocially_case1 .tit {margin-bottom:50px;} .sSocially_case1 .tit img {width:45px;} .sSocially_case1 .txt {font-size:1.33em;} .sSocially_case1 .instagram {width:152px; line-height:45px; border-radius:23px; font-size:0.93em; padding-left:19px;} .sSocially_case1 .instagram:before {width:35px; height:31px;} .sSocially_case2 {padding:80px 0 100px} .sSocially_case2 .sEsg_tit1 {margin-bottom:30px;} .sSocially_case2 ul li {float:none; width:100%; margin-right:0;} .sSocially_case2 ul li:nth-child(1) ~ li {margin-top:30px;} .sSocially_case2 ul li .img_box {height:60vw;} .sSocially_case2 ul li p {font-size:0.93em; text-align:left; margin-top:15px;} .sSocially_case3 {padding-top:80px;} .sSocially_case3:before {height:calc(100% - 145px); background-position:30% center;} .sSocially_case3 .box {display:block; margin-top:50px;} .sSocially_case3 .box > div {width:100%; margin-bottom:14px; padding:35px 0 25px; box-shadow:0 15px 30px rgba(26,19,37,0.2)} .sSocially_case3 .box > div:last-child {margin-bottom:0;} .sSocially_case3 .box p {font-size:0.93em;} .sSocially_case3 .box p span {font-size:1.57em} .sSocially_case3 .box .img_box {margin:20px 0;} .sSocially_case3 .box .img_box > li:first-child img {width:90px;} .sSocially_case3 .box .img_box > li:last-child img {width:118px;} .sSocially_case3 .box .list_box > li {font-size:0.8em;} .sSocially_case3 .box > div:last-child .list_box {padding:0 45px;} .sSocially_case4 {padding:100px 0;} .sSocially_case4 .img_box {margin-top:30px;} .sSocially_case4 .img_box p {font-size:0.8em; bottom:10px;} .sSocially_case5 .txt_box {margin-top:30px;} .sSocially_case5 .img_box img {width:146px;} .sSocially_case5 .img_box:before {width:103px; height:103px; right:-61px; bottom:18px;} } .sGovernance_case1 {display:flex; justify-content:center; align-items:center; width:100%; height:100vh;} .sGovernance_case1 .txt {font-size:2.5em; color:#fff; line-height:1.7em; font-weight:800; font-family:'Noto Sans SC'; text-align:center; margin-top:80px;} .sGovernance_case1 .sGovernance_slide {width:100%; margin-top:60px;} .sGovernance_case1 .sGovernance_slide .swiper-slide {width:calc(33.33% - 16px); height:486px; background:#fff; border-radius:30px; box-shadow:0 30px 40px rgba(12,17,27,0.2); padding:60px 30px 20px; text-align:center;} .sGovernance_case1 .sGovernance_slide .tit {font-size:1.5em; line-height:1.33em; font-weight:800; font-family:'Noto Sans SC';} .sGovernance_case1 .sGovernance_slide .icon {display:inline-block; width:120px; height:120px; background-repeat:no-repeat; background-position:center center; background-size:cover; margin:30px 0 50px;} .sGovernance_case1 .sGovernance_slide .txt {font-size:1em; line-height:1.75em; font-weight:400;} .sGovernance_case2 {padding-top:150px;} .sGovernance_case2 ul {width:100%; margin-top:100px;} .sGovernance_case2 ul li {display:flex; align-items:center;} .sGovernance_case2 ul li:nth-child(even) {flex-direction:row-reverse;} .sGovernance_case2 ul li .img_box {width:588px; height:400px; border-radius:20px; background-repeat:no-repeat; background-position:center center; background-size:cover;} .sGovernance_case2 ul li .txt_box {width:calc(100% - 588px); padding-left:58px;} .sGovernance_case2 ul li .txt_box dl dt {font-size:1.5em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:30px;} .sGovernance_case2 ul li .txt_box dl dd {font-size:1em; line-height:1.75em; font-weight:400;} .sGovernance_case3 {padding-top:150px;} .sGovernance_case3 .box {width:100%; position:relative; text-align:center; margin-top:100px;} .sGovernance_case3 .box .tit1 {width:238px; line-height:120px; background:#fff; border-radius:50px 10px 50px 10px; box-shadow:0 10px 22px rgba(12,17,27,0.15); font-size:1.5em; font-weight:800; margin:0 auto 230px; position:relative;} .sGovernance_case3 .box .tit1:after {content:''; display:block; width:1px; height:230px; background:rgba(0,0,0,0.2); position:absolute; left:50%; top:100%;} .sGovernance_case3 .box .txt1 {position:absolute; left:50%; top:177px; padding-left:33px;} .sGovernance_case3 .box .txt1:before {content:''; display:block; display:block; width:7px; height:7px; background:#333; border-radius:50%; position:absolute; left:0; top:23px; transform:translateX(-50%);} .sGovernance_case3 .box .txt1 li {width:200px; line-height:52px; background:#fff; border-radius:25px 5px 25px 5px; box-shadow:0 8px 20px rgba(12,17,27,0.15); font-size:1.125em; font-weight:600;} .sGovernance_case3 .box .txt1 li:last-child {background:#333; box-shadow:0; color:#fff; margin-top:10px;} .sGovernance_case3 .box .txt2 {display:flex; justify-content:space-between; width:100%; position:relative;} .sGovernance_case3 .box .txt2:before {content:''; display:block; width:calc(100% - 200px); height:1px; background:rgba(0,0,0,0.2); position:absolute; left:50%; top:0; transform:translateX(-50%)} .sGovernance_case3 .box .txt2 li {width:200px; position:relative; padding-top:33px;} .sGovernance_case3 .box .txt2 li:before {content:''; display:block; width:7px; height:7px; background:#333; border-radius:50%; position:absolute; left:50%; top:1px; transform:translate(-50%, -50%); z-index:5;} .sGovernance_case3 .box .txt2 li .txt2_1 {background:#34ab81; border-radius:25px 5px 25px 5px; font-size:1.125em; color:#fff; line-height:52px; font-weight:600; position:relative; margin-bottom:140px;} .sGovernance_case3 .box .txt2 li .txt2_1:before {content:''; display:block; width:1px; height:80px; background:rgba(0,0,0,0.2); position:absolute; left:50%; top:82px;} .sGovernance_case3 .box .txt2 li .txt2_1:after {content:''; display:block; width:7px; height:7px; background:#333; border-radius:50%; position:absolute; left:50%; top:155px; transform:translateX(-50%);} .sGovernance_case3 .box .txt2 li .txt2_2 {background:#e7f5f0; border-radius:25px 5px 25px 5px; font-size:1.125em; line-height:52px;} .sGovernance_case3 .box .txt2 li span {font-size:0.875em; color:rgba(0,0,0,0.6); position:absolute; left:50%; top:50%; transform:translate(20px, -50%); margin-top:16px;} .sGovernance_case3 .box .txt3 {display:flex; justify-content:space-between; width:100%; margin-top:45px;} .sGovernance_case3 .box .txt3 li {width:282px; height:296px; background:#fff; border-radius:20px; box-shadow:0 8px 20px rgba(12,17,27,0.15); padding:30px 0; text-align:center;} .sGovernance_case3 .box .txt3 li strong {display:inline-block; line-height:42px; border-radius:21px 21px 21px 0; background:#000; font-size:1.125em; color:#fff; font-weight:800; font-family:'Noto Sans SC'; text-align:center; margin:0 auto 20px; padding:0 24px;} .sGovernance_case3 .box .txt3 li p {font-size:1em; line-height:1.33em; margin-bottom:13px;} .sGovernance_case3 .box .txt3 li p:last-child {margin-bottom:0;} @media screen and (max-width:1220px){ .sGovernance_case2 ul li .img_box {width:calc(50% - 10px);} .sGovernance_case2 ul li .txt_box {width:calc(50% + 10px)} } @media screen and (max-width:1024px){ .sGovernance_case1 .txt {font-size:2em; line-height:1.66em;} .sGovernance_case1 .sGovernance_slide {width:calc(100% - 70px);} .sGovernance_case1 .sGovernance_slide .swiper-slide {width:295px; height:372px; padding:50px 30px 20px;} .sGovernance_case1 .sGovernance_slide .tit {font-size:1.33em;} .sGovernance_case1 .sGovernance_slide .icon {width:69px; height:69px; margin:20px 0;} .sGovernance_case1 .sGovernance_slide .txt {font-size:0.93em;} .sGovernance_case2 ul li .img_box {height:30vw;} .sGovernance_case2 ul li .txt_box {padding-left:40px;} .sGovernance_case2 ul li .txt_box dl dt {font-size:1.2em; margin-bottom:25px;} .sGovernance_case3 {padding-top:120px;} .sGovernance_case3 .box {margin-top:60px;} .sGovernance_case3 .box .tit1 {width:217px; line-height:115px; font-size:1.33em; margin-bottom:200px;} .sGovernance_case3 .box .tit1:after {height:200px; top:115px;} .sGovernance_case3 .box .txt1 {top:155px;} .sGovernance_case3 .box .txt1:before {top:21px;} .sGovernance_case3 .box .txt1 li {width:184px; line-height:50px;} .sGovernance_case3 .box .txt2:before {width:calc(100% - 177px)} .sGovernance_case3 .box .txt2 li {width:177px; padding-top:27px;} .sGovernance_case3 .box .txt2 li .txt2_1 {line-height:50px; margin-bottom:128px;} .sGovernance_case3 .box .txt2 li .txt2_1:before {top:74px;} .sGovernance_case3 .box .txt2 li .txt2_2:after {top:147px;} .sGovernance_case3 .box .txt2 li .txt2_2 {line-height:50px;} .sGovernance_case3 .box .txt2 li span {margin-top:13px;} .sGovernance_case3 .box .txt3 li {width:177px; height:305px;} .sGovernance_case3 .box .txt3 li strong {line-height:36px; font-size:1.06em; padding:0 20px;} } @media screen and (max-width:767px){ .sGovernance_case1 .txt {font-size:1.33em; margin-top:40px;} .sGovernance_case1 .sGovernance_slide {width:240px; margin:55px auto 0;} .sGovernance_case1 .sGovernance_slide .swiper-slide {width:240px; height:400px; border-radius:20px; box-shadow:0; padding:40px 20px 20px;} .sGovernance_case1 .sGovernance_slide .tit {font-size:1.2em;} .sGovernance_case1 .sGovernance_slide .icon {width:100px; height:100px; margin:10px 0;} .sGovernance_case2 {padding-top:80px;} .sGovernance_case2 ul {margin-top:40px;} .sGovernance_case2 ul li {display:block; margin-bottom:40px;} .sGovernance_case2 ul li:last-child {margin-bottom:0;} .sGovernance_case2 ul li .img_box {width:100%; height:60vw;} .sGovernance_case2 ul li .txt_box {width:100%; padding-left:0; margin-top:24px;} .sGovernance_case2 ul li .txt_box dl dt {font-size:1.07em; margin-bottom:20px;} .sGovernance_case2 ul li .txt_box dl dd {font-size:0.93em;} .sGovernance_case3 {padding-top:100px} .sGovernance_case3 .box {margin-top:40px;} .sGovernance_case3 .box .tit1 {width:128px; line-height:65px; border-radius:30px 5px 30px 5px; font-size:1.2em; margin-bottom:152px;} .sGovernance_case3 .box .tit1:after {height:152px; top:65px;} .sGovernance_case3 .box .txt1 {top:95px; padding-left:24px;} .sGovernance_case3 .box .txt1:before {top:15px;} .sGovernance_case3 .box .txt1 li {width:136px; line-height:37px; border-radius:18px 3px 18px 3px; font-size:0.93em;} .sGovernance_case3 .box .txt1 li:last-child {margin-top:5px;} .sGovernance_case3 .box .txt2:before {width:calc(100% - 102px)} .sGovernance_case3 .box .txt2 li {width:102px; padding-top:23px;} .sGovernance_case3 .box .txt2 li .txt2_1 {line-height:36px; border-radius:18px 3px 18px 3px; font-size:0.8em; margin-bottom:100px;} .sGovernance_case3 .box .txt2 li .txt2_1:before {height:60px; top:56px;} .sGovernance_case3 .box .txt2 li .txt2_1:after {top:109px;} .sGovernance_case3 .box .txt2 li .txt2_2 {line-height:36px; border-radius:18px 3px 18px 3px; font-size:0.8em;} .sGovernance_case3 .box .txt2 li span {margin-top:12px; transform:translate(6px, -50%);} .sGovernance_case3 .box .txt3 li {width:102px; height:290px; padding:20px 0;} .sGovernance_case3 .box .txt3 li strong {line-height:27px; font-size:0.93em; padding:0 15px; margin-bottom:15px;} .sGovernance_case3 .box .txt3 li p {font-size:0.93em;} } .sEthicalpolicy_case1 > dl dt {font-size:2em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC';} .sEthicalpolicy_case1 > dl dd {font-size:1em; line-height:1.8em; margin-top:25px;} .sEthicalpolicy_case1 ul {width:100%; margin-top:60px; overflow:hidden;} .sEthicalpolicy_case1 ul li {float:left; width:calc(25% - 18px); margin-right:24px; padding-top:30px; border-top:2px solid #000;} .sEthicalpolicy_case1 ul li:last-child {margin-right:0;} .sEthicalpolicy_case1 ul li dl dt {font-size:1.25em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC';} .sEthicalpolicy_case1 ul li dl dd {font-size:1em; line-height:1.8em; margin-top:15px;} .sEthicalpolicy_case2 {margin-top:150px; position:relative; padding-top:60px;} .sEthicalpolicy_case2:before {content:''; display:block; width:690px; height:360px; border-radius:30px; background:url(../images/sEthicalpolicy_img1.png) no-repeat center center; background-size:cover;} .sEthicalpolicy_case2 .txt_box {display:flex; align-items:center; width:690px; height:360px; border-radius:30px; background:#34ab81; padding:0 60px; position:absolute; right:0; top:0;} .sEthicalpolicy_case2 .txt_box dl dt {font-size:2em; color:#fff; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC'} .sEthicalpolicy_case2 .txt_box dl dd {font-size:1em; color:#fff; line-height:1.8em; margin-top:30px;} .sEthicalpolicy_case2 .txt {font-size:1em; line-height:1.8em; margin-top:40px;} .sEthicalpolicy_case3 {margin-top:145px;} .sEthicalpolicy_case3 .tit {font-size:2em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:40px;} .sEthicalpolicy_case3 .tit2 {font-size:1.25em; color:#34ab81; line-height:1.5em; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:15px;} .sEthicalpolicy_case3 dl dt {font-size:1.25em; line-height:1.5em; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:10px;} .sEthicalpolicy_case3 dl dd {font-size:1em; line-height:1.75em; font-weight:400; margin-bottom:40px;} .sEthicalpolicy_case3 dl dd:last-of-type {margin-bottom:0;} .sEthicalpolicy_case3 .cate {display:inline-block; background:#34ab81; font-size:0.875em; color:#fff; letter-spacing:0; line-height:32px; padding:0 20px; border-radius:16px 16px 16px 0; margin-bottom:15px;} .sEthicalpolicy_case3 .txt {font-size:1em; line-height:1.75em; font-weight:400;} .sEthicalpolicy_case3 ul li {font-size:0.875em; color:rgba(0,0,0,0.7); line-height:1.5em; margin:5px 0;} .sEthicalpolicy_case3 .img_box {background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px; position:relative;} .sEthicalpolicy_case3 .img_box p {font-size:3.5em; color:#fff; line-height:1.42em; font-weight:800; font-family:'Noto Sans SC'; position:absolute; bottom:60px;} .sEthicalpolicy_case3 .box1 > div {display:flex; align-items:center;} .sEthicalpolicy_case3 .box1 > div:nth-child(even) {flex-direction:row-reverse;} .sEthicalpolicy_case3 .box1 > div .img_box {width:calc(50% - 12px); height:560px;} .sEthicalpolicy_case3 .box1 > div .txt_box {width:calc(50% + 12px);} .sEthicalpolicy_case3 .box1 > div:nth-child(even) .img_box p {right:60px; text-align:right;} .sEthicalpolicy_case3 .box1 > div:nth-child(odd) .img_box p {left:60px;} .sEthicalpolicy_case3 .box1 > div:nth-child(odd) .txt_box {padding-left:60px;} .sEthicalpolicy_case3 .box2 {margin-top:40px;} .sEthicalpolicy_case3 .box2 .img_box {width:100%; height:480px; margin-bottom:60px;} .sEthicalpolicy_case3 .box2 .img_box p {right:60px; text-align:right;} .sEthicalpolicy_case3 .box2 .txt_box {width:100%; overflow:hidden;} .sEthicalpolicy_case3 .box2 .txt_box dl {float:left; width:calc(50% - 18px)} .sEthicalpolicy_case3 .box2 .txt_box > div {float:right; width:calc(50% - 18px)} .sEthicalpolicy_case3 .box3 {width:100%; background:rgba(0,0,0,0.04); border-radius:10px; padding:10px 30px; overflow:hidden; margin:20px 0;} .sEthicalpolicy_case3 .box3 > ul {float:left; width:50%;} @media screen and (max-width:1024px){ .sEthicalpolicy_case1 > dl dt {font-size:1.73em;} .sEthicalpolicy_case1 > dl dd {font-size:1em; margin-top:20px;} .sEthicalpolicy_case1 ul {margin-top:50px;} .sEthicalpolicy_case1 ul li {width:calc(25% - 15px); margin-right:20px; padding-top:20px;} .sEthicalpolicy_case1 ul li dl dt {font-size:1.33em;} .sEthicalpolicy_case1 ul li dl dd {margin-top:10px;} .sEthicalpolicy_case2 {margin-top:80px; padding-top:116px;} .sEthicalpolicy_case2:before {width:calc(50% + 50px); height:205px; border-radius:20px;} .sEthicalpolicy_case2 .txt_box {width:calc(50% + 50px); height:290px; border-radius:20px; padding:0 30px;} .sEthicalpolicy_case2 .txt_box dl dt {font-size:1.27em;} .sEthicalpolicy_case2 .txt_box dl dd {font-size:0.87em; margin-top:20px;} .sEthicalpolicy_case2 .txt {margin-top:25px;} .sEthicalpolicy_case3 {margin-top:100px;} .sEthicalpolicy_case3 .tit {font-size:1.73em; margin-bottom:60px;} .sEthicalpolicy_case3 .tit2 {font-size:1.2em; margin-bottom:10px;} .sEthicalpolicy_case3 dl dt {font-size:1.2em; margin-bottom:10px;} .sEthicalpolicy_case3 dl dd {font-size:0.93em; margin-bottom:25px;} .sEthicalpolicy_case3 .box2 .txt {font-size:0.93em;} .sEthicalpolicy_case3 .box2 ul li {font-size:0.93em;} .sEthicalpolicy_case3 .img_box p {font-size:2.13em; bottom:30px;} .sEthicalpolicy_case3 .box1 > div {margin-bottom:40px;} .sEthicalpolicy_case3 .box1 > div:last-child {align-items:flex-start} .sEthicalpolicy_case3 .box1 > div .img_box {width:calc(50% - 10px); height:40vw;} .sEthicalpolicy_case3 .box1 > div .txt_box {width:calc(50% + 10px);} .sEthicalpolicy_case3 .box1 > div:nth-child(even) .img_box p {right:35px;} .sEthicalpolicy_case3 .box1 > div:nth-child(odd) .img_box p {left:35px;} .sEthicalpolicy_case3 .box1 > div:nth-child(odd) .txt_box {padding-left:35px;} .sEthicalpolicy_case3 .box2 {margin-top:0;} .sEthicalpolicy_case3 .box2 .img_box {height:36vw; margin-bottom:40px;} .sEthicalpolicy_case3 .box2 .img_box p {right:35px;} .sEthicalpolicy_case3 .box2 .txt_box dl {float:none; width:100%;} .sEthicalpolicy_case3 .box2 .txt_box > div {float:none; width:100%; margin-top:50px;} .sEthicalpolicy_case3 .box3 {margin:15px 0; padding:20px 30px;} } @media screen and (max-width:767px){ .sEthicalpolicy_case1 > dl dt {font-size:1.47em;} .sEthicalpolicy_case1 > dl dd {font-size:0.93em;} .sEthicalpolicy_case1 ul {margin-top:40px;} .sEthicalpolicy_case1 ul li {width:calc(50% - 8px); margin-right:16px; padding-top:15px;} .sEthicalpolicy_case1 ul li:nth-child(even) {margin-right:0;} .sEthicalpolicy_case1 ul li:nth-child(2) ~ li {margin-top:40px;} .sEthicalpolicy_case1 ul li dl dt {font-size:1.2em;} .sEthicalpolicy_case1 ul li dl dd {font-size:0.93em; margin-top:5px;} .sEthicalpolicy_case2 {padding-top:0;} .sEthicalpolicy_case2:before {width:calc(100% - 40px); height:145px; border-radius:12px;} .sEthicalpolicy_case2 .txt_box {width:calc(100% - 40px); height:auto; border-radius:12px; position:relative; margin:-35px 0 0 40px; padding:30px;} .sEthicalpolicy_case2 .txt_box dl dt {font-size:1.47em;} .sEthicalpolicy_case2 .txt_box dl dd {font-size:0.93em; margin-top:15px;} .sEthicalpolicy_case2 .txt {font-size:0.93em; margin-top:20px;} .sEthicalpolicy_case3 {margin-top:80px;} .sEthicalpolicy_case3 .tit {font-size:1.47em; margin-bottom:30px;} .sEthicalpolicy_case3 .tit2 {font-size:1.07em; font-family:'Noto Sans SC'} .sEthicalpolicy_case3 dl dt {font-size:1.07em; font-family:'Noto Sans SC'} .sEthicalpolicy_case3 .cate {padding:0 16px; line-height:30px; border-radius:15px 15px 15px 0;} .sEthicalpolicy_case3 .img_box p {font-size:2em; bottom:25px;} .sEthicalpolicy_case3 .box1 > div {display:block;} .sEthicalpolicy_case3 .box1 > div .img_box {width:100%; height:80vw; border-radius:10px;} .sEthicalpolicy_case3 .box1 > div .txt_box {width:100%; margin-top:30px;} .sEthicalpolicy_case3 .box1 > div:nth-child(even) .img_box p {right:30px;} .sEthicalpolicy_case3 .box1 > div:nth-child(odd) .img_box p {left:30px;} .sEthicalpolicy_case3 .box1 > div:nth-child(odd) .txt_box {padding-left:0;} .sEthicalpolicy_case3 .box2 .img_box {height:80vw; border-radius:10px; margin-bottom:30px;} .sEthicalpolicy_case3 .box2 .img_box p {right:30px;} .sEthicalpolicy_case3 .box2 .txt_box > div {margin-top:40px;} .sEthicalpolicy_case3 .box3 > ul {float:none; width:100%;} } .now_stock_box .txt1 {font-size:0.875em; margin-top:20px; text-align:right;} .now_stock_box .box1 {display:flex; justify-content:space-between; align-items:center; width:100%; height:120px; background:#fff; border-radius:20px; box-shadow:0 10px 20px rgba(12,17,27,0.15); padding:0 60px;} .now_stock_box .box1 .title {font-size:2.25em; font-weight:800; font-family:'Noto Sans SC'} .now_stock_box .box1 .title span {font-size:0.67em; font-weight:400; margin-left:15px;} .now_stock_box .box1 .date {font-size:0.875em; color:#888; font-weight:400;} .now_stock_box .box2 {display:flex; justify-content:space-between; align-items:center; margin:60px 0;} .now_stock_box .box2 > div {width:calc(50% - 12px); overflow:hidden;} .now_stock_box .box2 .price {font-size:4.5em; font-weight:800; font-family:'Noto Sans SC'; letter-spacing:0; text-align:center;} .now_stock_box .box2 .price span.won {font-size:0.25em; font-weight:400; font-family:'Noto Sans SC';} .now_stock_box .box2 dl {float:left; width:50%; overflow:hidden;} .now_stock_box .box2 dl dt {float:left; width:50%; font-size:1em; padding-left:30px;} .now_stock_box .box2 dl dd {float:left; width:50%; font-size:1em; color:#666;} .now_stock_box .box2 dl:nth-of-type(2) ~ dl {margin-top:40px;} .now_stock_box .box3 {display:flex; justify-content:space-between; align-items:center;} .now_stock_box .box3 > table {width:calc(50% - 12px)} .price_down {display:inline-block; font-size:0; width:0; height:0; border-top:9px solid #306ffc; border-left:7px solid transparent; border-right:7px solid transparent; margin-right:15px;} .price_up {display:inline-block; font-size:0; width:0; height:0; border-bottom:9px solid #fc3052; border-left:7px solid transparent; border-right:7px solid transparent; margin-right:15px;} @media screen and (max-width:1024px){ .now_stock_box .txt1 {font-size:0.87em;} .now_stock_box .box1 {height:100px; padding:0 40px;} .now_stock_box .box1 .title {font-size:2em;} .now_stock_box .box1 .date {font-size:0.87em;} .now_stock_box .box2 > div:nth-child(1) {width:295px;} .now_stock_box .box2 > div:nth-child(2) {width:calc(100% - 295px)} .now_stock_box .box2 .price {font-size:3.33em;} .now_stock_box .box2 .price span.won {font-size:0.32em;} .now_stock_box .box2 dl dt {padding-left:10px;} .now_stock_box .box2 dl:nth-of-type(2) ~ dl {margin-top:25px;} .now_stock_box .box3 > table {width:calc(50% - 10px)} } @media screen and (max-width:767px){ .now_stock_box .txt1 {font-size:0.8em; color:#666; text-align:left;} .now_stock_box .box1 {display:block; height:auto; padding:30px 20px;} .now_stock_box .box1 .title {font-size:1.87em;} .now_stock_box .box1 .title span {font-size:0.64em; margin-left:10px;} .now_stock_box .box1 .date {display:block; font-size:0.93em; margin-top:15px;} .now_stock_box .box2 {display:block; margin:50px 0;} .now_stock_box .box2 > div:nth-child(1) {width:100%; margin-bottom:45px;} .now_stock_box .box2 > div:nth-child(2) {width:100%} .now_stock_box .box2 .price {font-size:2.67em;} .now_stock_box .box2 .price span.won {font-size:0.35em;} .now_stock_box .box2 dl {text-align:center;} .now_stock_box .box2 dl dt {float:none; width:100%; font-size:0.93em; margin-bottom:10px; padding-left:0;} .now_stock_box .box2 dl dd {float:none; width:100%; font-size:0.93em; text-align:center !important;} .now_stock_box .box3 {display:block;} .now_stock_box .box3 > table {width:100%;} .now_stock_box .box3 > table:first-child {border-bottom:0;} .now_stock_box .box3 > table:last-child {border-top:0;} .price_down {border-top-width:8px; border-left-width:6px; border-right-width:6px; margin-right:10px;} .price_up {border-bottom-width:8px; border-left-width:6px; border-right-width:6px; margin-right:10px;} } .sub_top_box {width:100%; height:440px; padding-top:80px;} .sub_top_box > div {z-index:10;} .sub_top_box h3 {font-size:1.125em; color:#34ab81; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:40px;} .sub_top_box p {font-size:3.5em; line-height:1.46em; font-weight:600; font-family:'Noto Sans SC';} .sub_top_box span {display:block; font-size:1em; line-height:1.8em; margin-top:30px;} .sub_top_box.case2 {height:auto; padding:110px 0;} .sub_top_box2 {padding:140px 0;} .sub_top_box2.case2 {padding-bottom:100px;} .sub_top_box2 h3 {font-size:3.75em; line-height:1.2em ;font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sub_top_box3 {padding:120px 0 100px;} .sub_top_box3 h3 {font-size:3.125em; line-height:1.2em; letter-spacing:0; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .select_box {width:160px; position:relative;} .select_box select {position:fixed; left:-9999px; top:-9999px;} .select_box > button {width:100%; height:50px; border:1px solid rgba(0,0,0,0.3); border-radius:25px; font-size:0.9375em; color:#666; text-align:left; font-family:'Noto Sans SC'; padding:0 20px; position:relative;} .select_box > button:after {content:''; display:block; width:12px; height:7px; background:url(../images/icon_select.svg) no-repeat center center; background-size:12px 7px; position:absolute; right:20px; top:50%; transform:translateY(-50%)} .select_box ul {width:100%; background:#fff; position:absolute; left:0; top:100%; border:1px solid rgba(0,0,0,0.3); border-top:0; border-radius:0 0 25px 25px; z-index:30; overflow:hidden;} .select_box ul li button {display:block; width:100%; font-size:0.9375em; color:#666; letter-spacing:0; text-align:left; font-family:'Noto Sans SC'; padding:4px 20px; transition:background 0.5s} .select_box ul li.active button, .select_box ul li:hover button {background:#f8f8f8;} .select_box.on > button {border-radius:25px 25px 0 0; border-bottom:0;} @media screen and (max-width:1024px){ .sub_top_box {height:290px; padding-top:60px;} .sub_top_box h3 {font-size:1.2em; margin-bottom:30px;} .sub_top_box p {font-size:2.53em;} .sub_top_box span {margin-top:25px;} .sub_top_box.case2 {padding:120px 0 60px;} .sub_top_box2 {padding:120px 0 100px;} .sub_top_box2.case2 {padding-bottom:80px;} .sub_top_box2 h3 {font-size:2.53em;} .sub_top_box3 {padding:120px 0 80px;} .sub_top_box3 h3 {font-size:2.53em;} .select_box > button {font-size:1em;} } @media screen and (max-width:767px){ .sub_top_box {height:240px; padding-top:50px;} .sub_top_box h3 {margin-bottom:20px;} .sub_top_box p {font-size:1.73em;} .sub_top_box span {margin-top:20px;} .sub_top_box.case2 {padding:80px 0 60px;} .sub_top_box2 {padding:55px 0 80px;} .sub_top_box2.case2 {padding:80px 0;} .sub_top_box2 h3 {font-size:1.73em;} .sub_top_box3 {padding:50px 0;} .sub_top_box3 h3 {font-size:2em;} .select_box {width:80px;} .select_box > button {height:36px; border-radius:18px; padding:0 7px; font-size:0.8em;} .select_box > button:after {width:10px; height:6px; background-size:10px 6px; right:10px;} .select_box ul {border-radius:0 0 18px 18px;} .select_box ul li button {font-size:0.8em; padding:4px 13px;} .select_box.on > button {border-radius:18px 18px 0 0;} } .table_style1 {width:100%; border-top:2px solid #000; border-bottom:1px solid #000;} .table_style1 thead th {height:77px; background:#f5f5f5; font-size:1em; text-align:center; padding:5px; border-right:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1)} .table_style1 thead tr th:last-child {border-right:0;} .table_style1 tbody td {height:55px; font-size:1em; line-height:1.5em; text-align:center; padding:5px; border-right:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1)} .table_style1 tbody tr td:last-child {border-right:0;} .table_style1 .bg_gray {background:#f5f5f5} .table_style1.case2 tbody td {height:110px;} .table_style2 {width:100%; border-top:1px solid #000; border-bottom:1px solid #000;} .table_style2 thead th {height:77px; background:#f5f5f5; font-size:1em; text-align:center; padding:5px; border-right:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1)} .table_style2 thead tr th:last-child {border-right:0;} .table_style2 tbody th {height:55px; font-size:1em; text-align:left; padding:18px 40px; border-bottom:1px solid rgba(0,0,0,0.1); background:#f5f5f5;} .table_style2 tbody td {height:55px; font-size:1em; line-height:1.75em; padding:18px 40px; border-right:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1)} .table_style2 tbody td.center {padding-left:5px !important; padding-right:5px !important;} .table_style2 tbody td:last-child {border-right:0;} .table_style2 tbody td.border_r {border-right:1px solid rgba(0,0,0,0.1)} .table_style2 .bg_gray {background:#f5f5f5} .table_style2.case2 tbody td {padding-left:15px; padding-right:15px;} .table_style3 {width:100%; border-top:2px solid #000; padding-bottom:15px;} .table_style3 thead th {height:40px; background:#fff; font-size:0.875em; text-align:center; padding:5px; border-right:1px solid #ddd; border-bottom:1px solid #ddd} .table_style3 thead tr th:last-child {border-right:0;} .table_style3 tbody td {padding:20px 14px; font-size:0.75em; line-height:2em; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd} .table_style3 tbody td.no_br {border-right:0;} /*.table_style3 tbody tr td:last-child {border-right:0;}*/ @media screen and (max-width:1024px){ .sub_table_box > table {margin-bottom:13px;} .table_style1 thead th {height:53px; font-size:0.93em;} .table_style1 tbody td {height:50px; font-size:0.93em;} .table_style1.case2 tbody td {height:60px; letter-spacing:-0.045em} .table_style2 thead th {height:53px; font-size:0.93em; padding:24px 5px;} .table_style2 tbody th {height:50px; font-size:0.93em; padding:15px 20px;} .table_style2 tbody td {height:50px; font-size:0.93em; padding:15px 20px;} .table_style2.case2 tbody td {/*padding-left:25px; */padding-right:10px;} .table_style3 {padding-bottom:0;} .table_style3 tbody td {font-size:0.8em;line-height: 1.67;} } @media screen and (max-width:767px){ .sub_table_box {width:calc(100% + 20px); overflow-x:scroll; padding-right:20px;} .sub_table_box::-webkit-scrollbar {height:2px;} .sub_table_box::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,0.3);} .sub_table_box::-webkit-scrollbar-track {background-color: #fff;} .sub_table_box > table {margin-bottom:5px;} .sub_table_box .table_style1 {width:788px;} .table_style1 thead th {height:45px;} .table_style1 tbody td {height:45px;} .sub_table_box .table_style2 {min-width:1000px;} .sub_table_box.case2 .table_style2 {min-width:600px;} .sub_table_box.case3 .table_style2 {min-width:640px;} .table_style2 thead th {height:50px;} .table_style2 tbody th {height:45px;} .table_style2 tbody td {height:45px;} .table_style2.case2 tbody td {padding-left:5px; padding-right:5px;} .sub_table_box .table_style3 {min-width:1200px;} } .list_style1 > li {position:relative; line-height:1.5em; padding-left:7px; margin-bottom:8px;} .list_style1 > li:last-child {margin-bottom:0;} .list_style1 > li:before {content:''; display:block; width:3px; height:3px; background:#000; position:absolute; left:0; top:10px;} @media screen and (max-width:1024px){ .list_style1 > li:before {top:8px;} } .btn_style1 {display:flex; flex-wrap:wrap; width:100%;} .btn_style1.line_right {justify-content:right;} .btn_style1 .btn {display:flex; justify-content:center; align-items:center; width:220px; height:64px; border-radius:32px; font-size:1.25em; color:#fff; font-weight:600; font-family:'Noto Sans SC'; text-align:center; margin-right:10px; transition:background 0.5s} .btn_style1 .btn:last-child {margin-right:0;} .btn_style1 .btn.btn_case1 {background:#34ab81} .btn_style1 .btn.btn_case1:hover {background:#1d946a;} .btn_style1 .btn.btn_case2 {background:#333;} .btn_style1 .btn.btn_case2:hover {background:#000;} .btn_style1 .btn.btn_case3 {background:#f1f1f1; color:#000} .btn_style1 .btn.btn_case3:hover {background:#e8e8e8; color:#000} @media screen and (max-width:1024px){ .btn_style1 .btn {width:200px; height:58px; border-radius:29px; font-size:1.2em;} } @media screen and (max-width:767px){ .btn_style1 .btn {width:152px; height:44px; border-radius:22px; font-size:1.07em; margin-right:16px;} } .select_change_wrap .select_change_box > div:not(.active) {display:none;} .sBoard {position:relative;} #sBoard_pc {width:3000px; position:absolute; left:50%; top:0; transform:translateX(-50%); margin-top:0;} #sBoard_pc.case2 {top:120px;} #sBoard_pc.case3 {top:-50px;} #sBoard_tab {width:1024px; position:absolute; left:50%; top:80px; transform:translateX(-50%); display:none;} #sBoard_tab.case2 {top:150px;} #sBoard_tab.case3 {left:auto; right:0; transform:translateX(0);} #sBoard_tab.case4 {left:60%;} .sBoard .board_box {display:flex; align-items:center; flex-direction:row-reverse; width:100%;} .sBoard .board_box .cate_box {width:calc(100% - 570px)} .sBoard .board_box .sch_box {width:570px;} .sBoard .cate_box {width:100%; overflow:hidden;} .sBoard .cate_box li {float:left; margin-right:8px;} .sBoard .cate_box li:last-child {margin-right:0;} .sBoard .cate_box li a {display:block; height:32px; border:1px solid #ccc; border-radius:16px 16px 16px 0; font-size:0.875em; color:#aaa; line-height:30px; letter-spacing:0; padding:0 14px; transition:all 0.5s; transition-property:border, background, color;} .sBoard .cate_box li.on a, .sBoard .cate_box li:hover a {border-color:#000; background:#000; color:#fff;} .sBoard .year_box {width:100%; overflow:hidden; margin-top: -15px; margin-bottom: 15px;} .sBoard .year_box li {float:left; margin-right:8px;} .sBoard .year_box li:last-child {margin-right:0;} .sBoard .year_box li a {display:block; height:32px; border:1px solid #ccc; border-radius:16px 16px 16px 0; font-size:0.875em; color:#aaa; line-height:30px; letter-spacing:0; padding:0 14px; transition:all 0.5s; transition-property:border, background, color;} .sBoard .year_box li.on a, .sBoard .year_box li:hover a {border-color:#34ab81; background:#34ab81; color:#fff;} .sBoard .sch_box {display:flex; justify-content:right; align-items:center;} .sBoard .sch_box input[type="text"] {width:340px; height:50px; border:1px solid rgba(0,0,0,0.3); border-radius:25px; padding:0 20px; font-size:0.9375em; color:#666; font-family:'Noto Sans SC'; margin:0 10px;} .sBoard .sch_box .submit_btn {width:50px; height:50px; background:#34ab81 url(../images/icon_search.svg) no-repeat center center; background-size:25px 25px; border-radius:50%; transition:background 0.5s;} .sBoard .sch_box .submit_btn:hover {background-color:#1d946a;} .sBoard .paging_box {display:flex; justify-content:center; align-items:center; width:100%; margin-top:80px;} .sBoard .paging_box > a {display:block; width:18px; height:18px; position:relative;} .sBoard .paging_box > a:before {content:''; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:18px 18px; position:absolute; top:0; transition:all 0.5s} .sBoard .paging_box > a:after {content:''; display:block; width:0px; height:2px; background:#000; position:absolute; top:50%; margin-top:-1px; transition:all 0.5s;} .sBoard .paging_box > a.prev_btn:before {background-image:url(../images/icon_paging_prev.svg); left:0;} .sBoard .paging_box > a.prev_btn:after {left:6px;} .sBoard .paging_box > a.next_btn:before {background-image:url(../images/icon_paging_next.svg); right:0;} .sBoard .paging_box > a.next_btn:after {right:6px;} .sBoard .paging_box > a.prev_btn:not(.disabled):hover:before {left:-20px;} .sBoard .paging_box > a.prev_btn:not(.disabled):hover:after {width:20px; left:-13px;} .sBoard .paging_box > a.next_btn:not(.disabled):hover:before {right:-20px;} .sBoard .paging_box > a.next_btn:not(.disabled):hover:after {width:20px; right:-13px;} .sBoard .paging_box > a.disabled {opacity:0.2} .sBoard .paging_box ul {margin:0 10px;} .sBoard .paging_box ul li {float:left; margin:0 3px;} .sBoard .paging_box ul li a {display:block; width:27px; border-radius:50%; line-height:27px; font-size:0.875em; text-align:center;} .sBoard .paging_box ul li.on a, .sBoard .paging_box ul li:hover a {background:#000; color:#fff;} @media screen and (max-width:1024px){ #sBoard_pc {display:none;} #sBoard_tab {display:block;} #sBoard_tab.tab_case2 {top:30px;} #sBoard_tab.tab_case3 {top:120px; left:60%;} #sBoard_tab.case2 {top:100px;} .sBoard .board_box {display:block;} .sBoard .board_box .cate_box {width:100%;} .sBoard .board_box .sch_box {width:100%; margin-bottom:60px;} .sBoard .cate_box li a {font-size:0.93em;} .sBoard .sch_box {justify-content:left;} .sBoard .sch_box select {width:170px; height:48px; border-radius:24px; font-size:1em;} .sBoard .sch_box input[type="text"] {height:48px; border-radius:24px; font-size:1em;} .sBoard .sch_box .submit_btn {width:48px; height:48px;} } @media screen and (max-width:767px){ #sBoard_tab {display:none;} .sBoard .board_box .sch_box {margin-bottom:40px;} .sBoard .board_box .cate_box {width:calc(100% + 20px)} .sBoard .paging_box {margin-top:60px;} .sBoard .paging_box ul li a {width:23px; line-height:23px; font-size:0.8em;} .sBoard .sch_box input[type="text"] {width:calc(100% - 133px); height:36px; border-radius:18px; padding:0 14px; font-size:0.8em;} .sBoard .sch_box .submit_btn {width:33px; height:33px; background-size:17px 17px;} .sBoard .cate_box {overflow-x:scroll; -ms-overflow-style: none; scrollbar-width: none;} .sBoard .cate_box::-webkit-scrollbar {display: none;} .sBoard .cate_box ul {white-space:nowrap;} .sBoard .cate_box li {float:none; display:inline-block;} } .sBoard .notice_box {width:100%; margin-bottom:100px;} .sBoard .notice_box:after {content:''; display:block; width:100%; clear:both;} .sBoard .notice_box .tit_box {float:left; width:486px; height:260px; background:#34ab81; border-radius:20px; box-shadow:0 15px 30px rgba(12,17,27,0.15); position:relative; padding:50px;} .sBoard .notice_box .tit_box p {font-size:2.5em; color:#fff; line-height:1.3em; font-weight:500; font-family:'Noto Sans SC';} .sBoard .notice_box .tit_box p:after {content:''; display:inline-block; width:26px; height:26px; background:#ff974b url(../images/icon_notice.png) no-repeat center center; background-size:12px auto; border-radius:50%; border-bottom-left-radius:0; margin-left:10px; vertical-align:middle;} .sBoard .notice_box .tit_box .date {font-size:0.875em; color:#fff; position:absolute; left:50px; bottom:45px;} .sBoard .notice_box .tit_box a {width:16px; height:16px; position:absolute; right:40px; bottom:45px; transition:transform 0.5s} .sBoard .notice_box .tit_box a:before {content:''; display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; top:50%; margin-top:-1px; border-radius:2px;} .sBoard .notice_box .tit_box a:after {content:''; display:block; width:2px; height:100%; background:#fff; position:absolute; left:50%; top:0; margin-left:-1px; border-radius:2px;} .sBoard .notice_box .tit_box a:hover {transform:rotate(180deg)} .sBoard .notice_box .txt_box {float:left; width:792px; height:260px; background:#f8f8f8; border-radius:20px; padding:50px 45px 0 110px; margin:40px 0 0 -78px;} .sBoard .notice_box .txt_box p {font-size:0.9375em; line-height:1.7em; max-height:10.2em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;} .sBoard .board_notice_box {width:100%; margin-top:40px;} .sBoard .board_notice_box ul:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_notice_box ul li {float:left; width:calc(33.33% - 16px); margin-right:24px;} .sBoard .board_notice_box ul li:nth-child(3n) {margin-right:0;} .sBoard .board_notice_box ul li:nth-child(3) ~ li {margin-top:24px;} .sBoard .board_notice_box ul li a {display:block; width:100%; height:230px; border-radius:20px; background:#f8f8f8; padding:40px 30px; transition:all 0.6s; transition-property:background, box-shadow; position:relative;} .sBoard .board_notice_box ul li a .num {font-size:0.875em; color:#aaa; font-weight:600; font-family:'Noto Sans SC'; position:absolute; right:40px; top:50px;} .sBoard .board_notice_box ul li a .cate {display:inline-block; line-height:32px; background:#34ab81; border-radius:16px 16px 16px 0; font-size:0.875em; color:#fff; padding:0 15px; margin-bottom:15px;} .sBoard .board_notice_box ul li a .subject {font-size:1.25em; line-height:1.6em; font-weight:600; font-family:'Noto Sans SC'; max-height:3.2em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .sBoard .board_notice_box ul li a .date {font-size:0.875em; position:absolute; left:30px; bottom:40px;} .sBoard .board_notice_box ul li:hover a {background:#fff; box-shadow:0 15px 30px rgba(12,17,27,0.15)} .sBoard .board_gallery_box {width:100%; margin-top:40px;} .sBoard .board_gallery_box ul:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_gallery_box ul li {float:left; width:calc(33.33% - 16px); margin-right:24px;} .sBoard .board_gallery_box ul li:nth-child(3n) {margin-right:0;} .sBoard .board_gallery_box ul li:nth-child(3) ~ li {margin-top:60px;} .sBoard .board_gallery_box ul li a {display:block; width:100%;} .sBoard .board_gallery_box ul li a .img_box {width:100%; height:368px; border-radius:40px; margin-bottom:20px; overflow:hidden; transition:box-shadow 0.5s;} .sBoard .board_gallery_box ul li a .img_box div {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transition:transform 0.5s;} .sBoard .board_gallery_box ul li a .cate {display:inline-block; line-height:32px; background:#34ab81; border-radius:16px 16px 16px 0; font-size:0.875em; color:#fff; padding:0 15px; margin-bottom:15px;} .sBoard .board_gallery_box ul li a .subject {font-size:1.25em; line-height:1.6em; font-weight:600; font-family:'Noto Sans SC'; max-height:3.2em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .sBoard .board_gallery_box ul li a .date {display:block; font-size:0.875em; margin-top:15px;} .sBoard .board_gallery_box ul li a .tag {display:block; font-size:0.875em; margin-top:15px;} .sBoard .board_gallery_box ul li:hover a .img_box {box-shadow:0 40px 40px rgba(12,17,27,0.15);} .sBoard .board_gallery_box ul li:hover a .img_box div {transform:scale(1.1)} .sBoard .board_faq_box {width:100%; margin-top:40px;} .sBoard .board_faq_box > div {width:100%; border-radius:10px; overflow:hidden; box-shadow:0 3px 12px rgba(12,17,27,0.15); margin-bottom:10px;} .sBoard .board_faq_box > div:last-child {margin-bottom:0;} .sBoard .board_faq_box .question button {width:100%; height:100px; background:#fff; font-size:1em; color:#000; text-align:left; font-family:'Noto Sans SC'; position:relative; padding:0 45px 0 140px;} .sBoard .board_faq_box .question button:after {content:''; display:block; width:20px; height:20px; background:url(../images/icon_faq_arrow.svg) no-repeat center center; background-size:20px 20px; position:absolute; right:30px; top:50%; transform:translateY(-50%) rotate(180deg);} .sBoard .board_faq_box .question .cate {display:inline-block; background:#34ab81; border-radius:16px 16px 16px 0; font-size:0.875em; color:#fff; line-height:32px; padding:0 15px; position:absolute; left:30px; top:50%; transform:translateY(-50%)} .sBoard .board_faq_box .question p {font-size:1.25em; line-height:1.7em; font-weight:600; font-family:'Noto Sans SC'; padding-left:27px; position:relative;} .sBoard .board_faq_box .question p:before {content:'Q.'; color:#34ab81; font-weight:800; position:absolute; left:0; top:0;} .sBoard .board_faq_box .answer {display:none; width:100%; background:#f1f1f1; padding:40px 160px 40px 140px;} .sBoard .board_faq_box .answer p {font-size:0.9375em; color:#666; line-height:2.13em; position:relative; padding-left:27px;} .sBoard .board_faq_box .answer p:before {content:'A.'; font-size:1.33em; color:#999; font-weight:800; font-family:'Noto Sans SC'; position:absolute; left:0; top:0;} .sBoard .board_faq_box > div.active .question button:after {transform:translateY(-50%)} /*.sBoard .board_faq_box > div.active .answer {display:block;}*/ @media screen and (min-width:768px){ .sBoard .board_gallery_box ul li:nth-child(3n) + li {clear:both;} } @media screen and (max-width:1220px){ .sBoard .notice_box .tit_box {width:45%;} .sBoard .notice_box .txt_box {width:60%; margin-left:-5%; padding-left:80px;} .sBoard .board_gallery_box ul li a .img_box {height:28vw;} } @media screen and (max-width:1024px){ .sBoard .notice_box {margin-bottom:60px;} .sBoard .notice_box .tit_box {width:275px; height:230px; padding:40px;} .sBoard .notice_box .tit_box p {font-size:1.46em;} .sBoard .notice_box .tit_box p:after {width:22px; height:22px; background-size:10px auto;} .sBoard .notice_box .tit_box .data {font-size:0.86em; left:40px; bottom:40px;} .sBoard .notice_box .tit_box a {right:40px;} .sBoard .notice_box .txt_box {width:calc(100% - 170px); height:230px; padding:30px 30px 30px 125px; margin:20px 0 0 -105px;} .sBoard .notice_box .txt_box p {font-size:0.86em; line-height:2em; max-height:14em; -webkit-line-clamp:7;} .sBoard .board_notice_box ul li {width:calc(50% - 10px); margin-right:20px;} .sBoard .board_notice_box ul li:nth-child(3n) {margin-right:20px;} .sBoard .board_notice_box ul li:nth-child(even) {margin-right:0;} .sBoard .board_notice_box ul li:nth-child(2) ~ li {margin-top:20px;} .sBoard .board_notice_box ul li a {height:180px; border-radius:15px; padding:30px 20px;} .sBoard .board_notice_box ul li a .num {font-size:0.87em; top:40px; right:30px;} .sBoard .board_notice_box ul li a .cate {font-size:0.93em; margin-bottom:10px;} .sBoard .board_notice_box ul li a .subject {font-size:1em; font-family:'Noto Sans SC'} .sBoard .board_notice_box ul li a .date {font-size:0.87em; left:20px; bottom:30px;} .sBoard .board_gallery_box ul li {width:calc(33.33% - 13.33px); margin-right:20px;} .sBoard .board_gallery_box ul li:nth-child(3) ~ li {margin-top:50px;} .sBoard .board_gallery_box ul li a .img_box {border-radius:25px;} .sBoard .board_gallery_box ul li a .cate {font-size:0.93em; margin-bottom:10px;} .sBoard .board_gallery_box ul li a .subject {font-size:0.93em; font-family:'Noto Sans SC'} .sBoard .board_gallery_box ul li a .date {font-size:0.93em; margin-top:20px;} .sBoard .board_gallery_box ul li a .tag {font-size:0.93em; margin-top:20px;} .sBoard .board_faq_box > div {margin-bottom:10px;} .sBoard .board_faq_box .question button {height:90px; padding:0 65px 0 155px;} .sBoard .board_faq_box .question button:after {right:40px;} .sBoard .board_faq_box .question .cate {font-size:0.93em; left:40px;} .sBoard .board_faq_box .question p {font-size:1em; font-family:'Noto Sans SC';} .sBoard .board_faq_box .answer {padding:30px 40px;} .sBoard .board_faq_box .answer p {font-size:0.875em; color:#555; line-height:2em;} .sBoard .board_faq_box .answer p:before {font-size:1.15em;} } @media screen and (max-width:767px){ .sBoard .notice_box {margin-bottom:40px;} .sBoard .notice_box .tit_box {float:none; width:100%; height:170px; border-radius:14px; box-shadow:0 10px 20px rgba(12,17,27,0.15); padding:30px;} .sBoard .notice_box .tit_box p {font-size:1.6em;} .sBoard .notice_box .tit_box p:after {width:21px; height:21px;} .sBoard .notice_box .tit_box .date {left:30px; bottom:30px;} .sBoard .notice_box .tit_box a {right:30px; bottom:28px;} .sBoard .notice_box .txt_box {float:none; width:100%; height:190px; border-radius:14px; margin:-30px 0 0; padding:60px 20px 0;} .sBoard .notice_box .txt_box p {font-size:0.93em; font-weight:400; max-height:8em; -webkit-line-clamp:4;} .sBoard .board_notice_box {margin-top:25px;} .sBoard .board_notice_box ul li {float:none; width:100%; margin-right:0;} .sBoard .board_notice_box ul li:nth-child(1) ~ li {margin-top:18px;} .sBoard .board_notice_box ul li a {padding:20px;} .sBoard .board_notice_box ul li a .num {top:20px; right:20px;} .sBoard .board_notice_box ul li a .cate {line-height:30px; border-radius:15px 15px 15px 0;} .sBoard .board_notice_box ul li a .date {left:20px; bottom:20px;} .sBoard .board_gallery_box {margin-top:24px;} .sBoard .board_gallery_box ul li {width:calc(50% - 8px); margin-right:16px;} .sBoard .board_gallery_box ul li:nth-child(3n) {margin-right:16px;} .sBoard .board_gallery_box ul li:nth-child(even) {margin-right:0;} .sBoard .board_gallery_box ul li:nth-child(even) + li {clear:both;} .sBoard .board_gallery_box ul li:nth-child(2) ~ li {margin-top:50px;} .sBoard .board_gallery_box ul li a .img_box {border-radius:20px; height:41vw;} .sBoard .board_gallery_box ul li a .cate {line-height:30px; border-radius:15px 15px 15px 0;} .sBoard .board_faq_box {margin-top:24px;} .sBoard .board_faq_box .question button {height:auto; padding:20px;} .sBoard .board_faq_box .question button:after {width:16px; height:16px; background-size:16px 16px; right:20px; top:38px;} .sBoard .board_faq_box .question button .cate {position:relative; left:0; top:0; transform:translateY(0)} .sBoard .board_faq_box .question button p {font-size:0.93em; margin-top:10px;} .sBoard .board_faq_box .answer {padding:20px;} .sBoard .board_faq_box .answer p {font-size:0.8em;} .sBoard .board_faq_box .answer p:before {font-size:1.17em;} } .sBoard .board_inquiry_box:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_inquiry_box h4 {font-size:1.5em; font-weight:800; font-family:'Noto Sans SC'; margin:100px 0 40px;} .sBoard .board_inquiry_box h4:first-of-type {margin-top:0;} .sBoard .board_inquiry_box .form_list > li {width:100%; margin-bottom:10px;} .sBoard .board_inquiry_box .form_list > li:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_inquiry_box .form_list > li:last-child {margin-bottom:0;} .sBoard .board_inquiry_box .form_list > li > label {float:left; display:block; width:150px; font-size:1em; line-height:50px;} .sBoard .board_inquiry_box .form_list > li > label .required {display:inline-block; width:7px; height:7px; border-radius:50%; background:#34ab81; margin-left:8px; vertical-align:top; position:relative; top:12px;} .sBoard .board_inquiry_box .form_list > li > div {float:left; width:calc(100% - 150px)} .sBoard .board_inquiry_box .form_list.case2 {width:100%; position:relative;} .sBoard .board_inquiry_box .form_list.case2 > li {width:calc(50% - 50px);} .sBoard .board_inquiry_box .form_list.case2 > li:last-of-type {position:absolute; right:0; top:0;} .sBoard .board_inquiry_box .form_list.case3:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_inquiry_box .form_list.case3 > li {float:left; width:calc(50% - 50px);} .sBoard .board_inquiry_box .form_list.case3 > li:nth-child(even) {float:right;} .sBoard .board_inquiry_box .form_txt {display:block; width:100%; height:50px; border:0; border-radius:0; border-bottom:1px solid #666; font-size:1em; font-family:'Noto Sans SC';} .sBoard .board_inquiry_box .form_textarea {width:100%; height:150px; padding:30px; font-size:1em; font-family:'Noto Sans SC'; border:1px solid #666; border-radius:5px; resize:none; margin-top:10px;} .sBoard .board_inquiry_box .form_txt:focus, .sBoard .board_inquiry_box .form_textarea:focus {outline:none; border-color:#34ab81; } .sBoard .board_inquiry_box .form_txt::placeholder, .sBoard .board_inquiry_box .form_textarea::placeholder {color:#aaa;} .sBoard .board_inquiry_box .form_txt::-webkit-input-placeholder, .sBoard .board_inquiry_box .form_textarea::-webkit-input-placeholder {color:#aaa;} .sBoard .board_inquiry_box .form_txt:-ms-input-placeholder, .sBoard .board_inquiry_box .form_textarea:-ms-input-placeholder {color:#aaa;} .sBoard .board_inquiry_box .chk_box {position:relative;} .sBoard .board_inquiry_box .chk_box input {display:block; width:100%; height:100%; position:absolute; left:0; top:0; appearance: none; -webkit-appearance: none; -webkit-border-radius: 0;} .sBoard .board_inquiry_box .chk_box p {font-size:1em; line-height:24px; position:relative; padding-left:34px;} .sBoard .board_inquiry_box .chk_box p:before {content:''; display:block; width:24px; height:24px; border:1px solid #aaa; border-radius:50%; background:url(../images/icon_checkbox.svg) no-repeat center center; background-size:24px 24px; position:absolute; left:0; top:0;} .sBoard .board_inquiry_box .chk_box input:checked + p:before {border-color:#34ab81; background-color:#34ab81; background-image:url(../images/icon_checkbox_on.svg)} .sBoard .board_inquiry_box .radio_box {position:relative;} .sBoard .board_inquiry_box .radio_box input {display:block; width:100%; height:100%; position:absolute; left:0; top:0; appearance: none; -webkit-appearance: none; -webkit-border-radius: 0;} .sBoard .board_inquiry_box .radio_box p {font-size:1em; line-height:50px; position:relative; padding-left:34px;} .sBoard .board_inquiry_box .radio_box p:before {content:''; display:block; width:22px; height:22px; background:#fff; border:1px solid #aaa; border-radius:50%; position:absolute; left:0; top:50%; transform:translateY(-50%);} .sBoard .board_inquiry_box .radio_box input:checked + p:before {border:5px solid #34ab81;} .sBoard .board_inquiry_box .privacy_box {width:100%; height:170px; padding:30px 7px 30px 30px; border-radius:5px; border:1px solid #666; margin-bottom:25px; margin-top:10px;} .sBoard .board_inquiry_box .privacy_box div {width:100%; height:100%; padding-right:40px; overflow-y:scroll;} .sBoard .board_inquiry_box .privacy_box div::-webkit-scrollbar {width:3px;} .sBoard .board_inquiry_box .privacy_box div::-webkit-scrollbar-thumb {background-color: #000;} .sBoard .board_inquiry_box .privacy_box div::-webkit-scrollbar-track {background-color: #fff; border-radius:3px;} .sBoard .board_inquiry_box .privacy_box p {font-size:0.875em; color:#666; line-height:1.57em;} .sBoard .board_inquiry_box .privacy_box p strong {color:#000;} .sBoard .board_inquiry_box .submit_btn {float:right; display:block; width:220px; height:64px; background:#333; border-radius:32px; font-size:1.25em; color:#fff; font-weight:600; font-family:'Noto Sans SC'; margin-top:80px; transition:background 0.5s;} .sBoard .board_inquiry_box .submit_btn:hover {background:#000;} .sBoard .board_inquiry_box .email_box {} .sBoard .board_inquiry_box .email_box:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_inquiry_box .email_box .form_txt {float:left; width:calc(52.5% - 5px); margin-bottom:10px;} .sBoard .board_inquiry_box .email_box div {float:left; width:calc(47.5% - 5px); margin-left:10px; border-bottom:1px solid #666; position:relative;} .sBoard .board_inquiry_box .email_box div:after {content:''; display:block; width:20px; height:20px; background:url(../images/icon_select2.svg) no-repeat center center; background-size:20px 20px; position:absolute; right:0; top:50%; transform:translateY(-50%);} .sBoard .board_inquiry_box .email_box div > button {height:100%; height:50px; font-size:1em; font-family:'Noto Sans SC'; border-radius:0; border:0; padding:0;} .sBoard .board_inquiry_box .email_box div > button:after {display:none;} .sBoard .board_inquiry_box .email_box div.on:after {right:10px; transform:translateY(-50%) rotate(180deg)} .sBoard .board_inquiry_box .email_box div.on > button {border-radius:25px 25px 0 0; border:1px solid rgba(0,0,0,0.3); border-bottom:0; padding:0 20px;} .sBoard .board_inquiry_box .email_box div select {width:100%; padding-bottom:14px; font-size:1em; font-family:'Noto Sans SC'; border:0; border-radius:0; background:#fff; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .sBoard .board_inquiry_box .email_box div select:focus {outline:none;} .sBoard .board_inquiry_box .email_box span {float:left; font-size:1em; line-height:50px;} .sBoard .board_inquiry_box .add_box {width:100%; overflow:hidden;} .sBoard .board_inquiry_box .add_box .form_txt {margin-bottom:10px;} .sBoard .board_inquiry_box .add_box button {float:left; width:120px; height:40px; background:#34ab81; border-radius:6px; font-size:1em; color:#fff; font-family:'Noto Sans SC'; margin-top:10px;} .sBoard .board_inquiry_box .add_box .zip {float:left; width:calc(100% - 140px); height:50px; margin-left:20px;} .sBoard .board_inquiry_box .chk_list {width:100%;} .sBoard .board_inquiry_box .chk_list:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_inquiry_box .chk_list > label {float:left;} .sBoard .board_inquiry_box .chk_list > label:not(:last-child) {margin-right:40px;} .sBoard .board_inquiry_box .chk_list input:checked + p {font-weight:600; color:#34ab81;} .sBoard .board_inquiry_box .file_box {width:100%; overflow:hidden; position:relative; margin-top:15px;} .sBoard .board_inquiry_box .file_box input {width:100%; height:100%; position:absolute; left:0; top:0; opacity:0;} .sBoard .board_inquiry_box .file_box > div {display:flex; align-itmes:center; width:100%;} .sBoard .board_inquiry_box .file_box > div > span {display:block; width:100px; line-height:40px; border-radius:5px; background:#34ab81; text-align:center; font-size:1em; color:#fff;} .sBoard .board_inquiry_box .file_box > div p {display:flex; align-items:center; width:calc(100% - 100px); height:40px; padding:0 20px; font-size:1em; color:#aaa;} .sBoard .board_inquiry_box .file_box > div p p {padding:0;} .sBoard .board_inquiry_box .file_box .file_delete {display:inline-block; width:18px; height:18px; background:url(../images/icon_file_delete.svg) no-repeat center center; background-size:18px 18px; margin-left:15px; position:relative; z-index:30;} .sBoard .board_inquiry_box .file_add_btn {font-size:1em; color:#000; margin-top:20px;font-family:'Noto Sans SC'; } .sBoard .board_inquiry_box .file_add_btn i {display:inline-block; width:21px; height:21px; border:1px solid #000; border-radius:50%; margin-right:10px; vertical-align:middle; position:relative;} .sBoard .board_inquiry_box .file_add_btn i:before, .sBoard .board_inquiry_box .file_add_btn i:after {content:''; display:block; background:#000; position:absolute; left:54%; top:51%; transform:translate(-50%, -50%)} .sBoard .board_inquiry_box .file_add_btn i:before {width:9px; height:1px;} .sBoard .board_inquiry_box .file_add_btn i:after {width:1px; height:9px;} .sBoard .board_inquiry_box .txt_chk_box {width:100%;} .sBoard .board_inquiry_box .txt_chk_box:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_inquiry_box .txt_chk_box .form_txt {float:left; width:calc(100% - 120px);} .sBoard .board_inquiry_box .txt_chk_box .chk_box {float:left; margin-top:10px; position:relative;} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop {display:none; align-items:center; width:430px; background:#fff; border:1px solid #34ab81; border-radius:10px; box-shadow:3px 5.2px 10px rgba(1,1,1,0.05); padding:15px 20px; position:absolute; left:0; bottom:100%; transform:translateX(-50%); margin-bottom:20px;} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop:after {content:''; display:block; width:10px; height:10px; background:#fff; border:1px solid #34ab81; border-left:0; border-top:0; border-bottom-right-radius:3px; position:absolute; left:50%; top:100%; transform:translate(55%, -50%) rotate(45deg);} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop > span {display:block; width:calc(100% - 18px); font-size:1em; text-align:center; padding-right:10px;} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop .close_btn {display:block; width:18px; height:18px; background:url(../images/icon_close_btn.svg) no-repeat center center; background-size:18px 18px;} .sBoard .board_inquiry_box .txt_chk_box input:checked + p + .layer_pop {display:flex;} @media screen and (max-width:1024px){ .sBoard .board_inquiry_box h4 {font-size:1.6em; margin:70px 0 25px;} .sBoard .board_inquiry_box .form_list > li > label {width:120px; font-size:1em;} .sBoard .board_inquiry_box .form_list > li > div {width:calc(100% - 120px)} .sBoard .board_inquiry_box .form_txt {font-size:0.87em;} .sBoard .board_inquiry_box .form_textarea {font-size:0.87em; padding:20px;} .sBoard .board_inquiry_box .form_list.case2 > li {width:100%;} .sBoard .board_inquiry_box .form_list.case2 > li:last-of-type {position:relative;} .sBoard .board_inquiry_box .form_list.case2 > li:not(:last-of-type) > div {width:275px;} .sBoard .board_inquiry_box .form_list.case3 > li {float:none; width:100%;} .sBoard .board_inquiry_box .chk_box p {font-size:0.87em; line-height:20px;} .sBoard .board_inquiry_box .chk_box p:before {width:20px; height:20px; background-size:20px 20px;} .sBoard .board_inquiry_box .radio_box p {font-size:0.87em;} .sBoard .board_inquiry_box .radio_box p:before {width:20px; height:20px;} .sBoard .board_inquiry_box .radio_box input:checked + p:before {border-width:4px;} .sBoard .board_inquiry_box .privacy_box {padding:25px 10px 25px 20px;} .sBoard .board_inquiry_box .privacy_box div {padding-right:20px;} .sBoard .board_inquiry_box .privacy_box p {font-size:0.93em;} .sBoard .board_inquiry_box .submit_btn {float:none; font-size:1.33em; margin:100px auto 0;} .sBoard .board_inquiry_box .email_box .form_txt {width:calc(35% - 11.33px); margin-bottom:0;} .sBoard .board_inquiry_box .email_box div {width:calc(30% - 11.33px); margin-left:17px;} .sBoard .board_inquiry_box .email_box div > button {font-size:0.86em;} .sBoard .board_inquiry_box .email_box div select {font-size:0.87em; padding-bottom:12px;} .sBoard .board_inquiry_box .email_box span {width:17px; text-align:center; line-height:50px;} .sBoard .board_inquiry_box .add_box button {width:116px; height:35px; font-size:0.93em; margin-top:15px;} .sBoard .board_inquiry_box .add_box .zip {width:calc(100% - 127px); margin-left:11px;} .sBoard .board_inquiry_box .file_box > div > span {width:87px; font-size:0.93em; line-height:35px;} .sBoard .board_inquiry_box .file_box > div p {width:calc(100% - 87px); height:35px; font-size:0.87em; padding:0 15px;} .sBoard .board_inquiry_box .txt_chk_box .chk_box {margin-top:15px;} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop {width:400px} } @media screen and (max-width:767px){ .sBoard .board_inquiry_box h4 {font-size:1.33em; margin-top:60px;} .sBoard .board_inquiry_box .form_list > li {margin-bottom:30px;} .sBoard .board_inquiry_box .form_list > li > label {float:none; width:100%; font-size:0.93em; line-height:1.5em; margin-bottom:10px;} .sBoard .board_inquiry_box .form_list > li > label .required {width:6px; height:6px; margin-left:3px; top:0;} .sBoard .board_inquiry_box .form_list > li > div {float:none; width:100%;} .sBoard .board_inquiry_box .form_list.case2 > li:not(:last-of-type) > div {width:100%;} .sBoard .board_inquiry_box .form_txt {font-size:0.93em; height:36px;} .sBoard .board_inquiry_box .form_textarea {height:200px; font-size:0.93em; padding:15px; margin-top:10px;} .sBoard .board_inquiry_box .chk_box p {font-size:0.93em; line-height:16px; padding-left:27px;} .sBoard .board_inquiry_box .chk_box p:before {width:16px; height:16px; background-size:16px 16px;} .sBoard .board_inquiry_box .radio_box p {font-size:0.93em; line-height:16px; padding-left:27px;} .sBoard .board_inquiry_box .radio_box p:before {width:16px; height:16px;} .sBoard .board_inquiry_box .radio_box input:checked + p:before {border-width:3px;} .sBoard .board_inquiry_box .privacy_box {height:150px; padding:20px 5px 20px 15px; margin-top:20px;} .sBoard .board_inquiry_box .privacy_box div {padding-right:15px;} .sBoard .board_inquiry_box .privacy_box div p {font-size:0.8em;} .sBoard .board_inquiry_box .submit_btn {width:150px; height:44px; border-radius:22px; font-size:0.93em; margin-top:60px;} .sBoard .board_inquiry_box .email_box {position:relative;} .sBoard .board_inquiry_box .email_box .form_txt {width:calc(50% - 8px); padding-left:20px;} .sBoard .board_inquiry_box .email_box .form_txt:first-of-type {width:100%; margin-bottom:15px; padding-left:0;} .sBoard .board_inquiry_box .email_box div {width:calc(50% - 8px); margin-left:16px;} .sBoard .board_inquiry_box .email_box div:after {width:16px; height:16px; background-size:16px 16px;} .sBoard .board_inquiry_box .email_box div > button {height:35px; font-size:0.93em;} .sBoard .board_inquiry_box .email_box div.on > button {border-radius:18px 18px 0 0; padding:0 10px;} .sBoard .board_inquiry_box .email_box span {font-size:0.93em; color:#aaa; line-height:36px; position:absolute; left:0; bottom:0;} .sBoard .board_inquiry_box .add_box button {width:105px; height:32px; font-size:0.8em; margin-top:4px;} .sBoard .board_inquiry_box .add_box .zip {width:calc(100% - 117px); height:36px; margin-left:12px;} .sBoard .board_inquiry_box .chk_list {margin-top:15px;} .sBoard .board_inquiry_box .chk_list .pc_br {clear:both;} .sBoard .board_inquiry_box .chk_list .pc_br ~ label {margin-top:15px;} .sBoard .board_inquiry_box .chk_list > label:not(:last-child) {margin-right:20px;} .sBoard .board_inquiry_box .file_box > div > span {display:block; width:80px; line-height:32px;} .sBoard .board_inquiry_box .file_box > div p {width:calc(100% - 80px); height:auto; font-size:0.8em; color:#aaa; padding:0 0 0 15px;} .sBoard .board_inquiry_box .txt_chk_box .form_txt {width:calc(100% - 100px);} .sBoard .board_inquiry_box .txt_chk_box .chk_box {margin-top:10px;} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop {width:208px; padding:10px; margin-bottom:15px;} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop:after {transform:translate(40%, -50%) rotate(45deg);} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop > span {width:calc(100% - 15px); font-size:0.93em; text-align:left; padding-right:0px;} .sBoard .board_inquiry_box .txt_chk_box .chk_box .layer_pop .close_btn {width:15px; height:15px; background-size:15px 15px;} } .sBoard .board_file_box ul {width:100%;} .sBoard .board_file_box ul:after {content:''; display:block; width:100%; clear:both;} .sBoard .board_file_box ul li {float:left; width:calc(33.33% - 16px); margin-right:24px;} .sBoard .board_file_box ul li a {display:flex; align-items:center; width:100%; height:120px; background:#f8f8f8; border-radius:20px; padding:0 90px; position:relative; transition:all 0.5s; transition-property:background, box-shadow} .sBoard .board_file_box ul li a .icon {display:block; width:37px; height:33px; background-repeat:no-repeat; background-position:center center; background-size:contain; position:absolute; left:38px; top:50%; transform:translateY(-50%)} .sBoard .board_file_box ul li a:after {content:''; display:block; width:48px; height:48px; background:url(../images/icon_pdf_arrow.svg) no-repeat center center; background-size:48px 48px; border:1px solid #000; border-radius:50%; position:absolute; right:40px; top:50%; margin-top:-24px; transition:all 0.5s; transition-property:border, background, box-shadow;} .sBoard .board_file_box ul li a .subject {font-size:1.125em; font-weight:600;} .sBoard .board_file_box ul li a:hover {background:#fff; box-shadow:0 15px 30px rgba(12,17,27,0.15);} .sBoard .board_file_box ul li a:hover:after {border-color:#34ab81; background-color:#34ab81; background-image:url(../images/icon_pdf_arrow_w.svg); box-shadow:0 15px 15px rgba(12,17,27,0.15)} .sBoard .board_file_box ul li a .icon.pdf {background-image:url(../images/icon_pdf.png);} .sBoard .board_file_box ul li a .icon.doc {background-image:url(../images/icon_doc.png);} .sBoard .board_file_box ul li a .icon.ppt {background-image:url(../images/icon_ppt.png);} .sBoard .board_file_box ul li a .icon.png {background-image:url(../images/icon_png.png);} @media screen and (min-width:1025px){ .sBoard .board_file_box ul li:nth-child(3n) {margin-right:0;} .sBoard .board_file_box ul li:nth-child(3n) ~ li {margin-top:24px;} } @media screen and (max-width:1024px){ .sBoard .board_file_box ul li {width:calc(50% - 10px); margin-right:20px;} .sBoard .board_file_box ul li:nth-child(2n) {margin-right:0;} .sBoard .board_file_box ul li:nth-child(2n) ~ li {margin-top:20px;} .sBoard .board_file_box ul li a {height:84px; border-radius:14px; padding:0 83px;} .sBoard .board_file_box ul li a .icon {width:31px; height:27px;} .sBoard .board_file_box ul li a:after {width:36px; height:36px; background-size:36px 36px; margin-top:-18px;} .sBoard .board_file_box ul li a .subject {font-size:1em;} } @media screen and (max-width:767px){ .sBoard .board_file_box ul li {float:none; width:100%; margin-right:0;} .sBoard .board_file_box ul li:nth-child(1) ~ li {margin-top:16px;} .sBoard .board_file_box ul li a {height:62px; border-radius:12px; padding:0 55px 0 66px;} .sBoard .board_file_box ul li a .icon {width:28px; height:25px; left:25px;} .sBoard .board_file_box ul li a:after {width:30px; height:30px; background-size:30px 30px; right:24px; margin-top:-15px;} .sBoard .board_file_box ul li a .subject {font-size:0.93em;} } .sBoard .board_list_box ul {width:100%; border-top:2px solid #000;} .sBoard .board_list_box ul li a {display:flex; align-items:center; flex-wrap:wrap; width:100%; min-height:100px; padding:10px 0; border-bottom:1px solid #ccc;} .sBoard .board_list_box ul li .num {width:75px; font-size:0.875em; color:#34ab81; line-height:1.5em; font-weight:600; text-align:center;} .sBoard .board_list_box ul li .subject {width:calc(100% - 215px); padding-left:55px; font-size:1.25em; letter-spacing:0; line-height:1.5em; font-weight:600; font-family:'Noto Sans SC'} .sBoard .board_list_box ul li .subject.file {padding-right:110px; position:relative;} .sBoard .board_list_box ul li .subject .icon_file {width:39px; height:44px; background:url(../images/icon_clip.png) no-repeat center center; background-size:contain; position:absolute; right:70px; top:50%; transform:translateY(-50%)} .sBoard .board_list_box ul li .date {width:140px; font-size:0.875em; color:#999; letter-spacing:0; line-height:1.5em; font-weight:600; text-align:center;} .sBoard .board_file_box .file_none {display: flex; justify-content: center; align-items: center; width: 100%; height: 265px; border-radius: 20px; background: #f8f8f8; text-align: center; font-size: 1.5em; color: rgba(0,0,0,0.5); font-weight: 600;} @media screen and (max-width:1024px){ .sBoard .board_list_box ul {border-top-width:1px;} .sBoard .board_list_box ul li a {min-height:75px;} .sBoard .board_list_box ul li .num {width:100px; font-size:0.87em;} .sBoard .board_list_box ul li .subject {width:calc(100% - 250px); padding-left:0; font-size:1em;} .sBoard .board_list_box ul li .subject.file {padding-right:30px;} .sBoard .board_list_box ul li .subject .icon_file {width:30px; height:35px; right:0;} .sBoard .board_list_box ul li .date {width:150px; font-size:0.87em;} } @media screen and (max-width:767px){ .sBoard .board_list_box ul {border-top-width:2px;} .sBoard .board_list_box ul li a {min-height:0; padding:16px 0;} .sBoard .board_list_box ul li .num {width:100%; font-size:0.8em; margin-bottom:4px; text-align:left;} .sBoard .board_list_box ul li .subject {width:100%; font-size:0.93em; font-family:'Noto Sans SC'} .sBoard .board_list_box ul li .subject .icon_file {width:26px; height:29px;} .sBoard .board_list_box ul li .date {width:100%; font-size:0.8em; text-align:left; margin-top:8px;} } .sBoard_view .top_box {width:100%; padding:80px 0 40px; border-bottom:1px solid #000; position:relative;} .sBoard_view .top_box h3 {font-size:1.125em; color:#34ab81; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:40px;} .sBoard_view .top_box .subject {width:calc(100% - 80px); font-size:1.875em; font-weight:600; font-family:'Noto Sans SC';} .sBoard_view .top_box .icon_notice {display:inline-block; width:26px; height:26px; background:#ff974b url(../images/icon_notice.png) no-repeat center center; background-size:12px auto; border-radius:50%; border-bottom-left-radius:0; margin-left:10px; vertical-align:middle;} .sBoard_view .top_box .date {font-size:0.875em; color:#666; position:absolute; right:0; bottom:40px;} .sBoard_view .content_box {min-height:460px; padding:80px 0} .sBoard_view .content_box img {max-width:100%;} .sBoard_view .content_box.case2 {margin-bottom:80px; border-bottom:1px solid} .sBoard_view .content_box p {font-size:1em; line-height:1.6em;} .sBoard_view .content_box .more_view {display:block; font-size:0.96em; font-weight:600; margin-top:50px;} .sBoard_view .content_box .more_view:after {content:''; display:inline-block; width:20px; height:16px; background:url(../images/icon_board_more.svg) no-repeat center center; background-size:20px 16px; vertical-align:middle; margin-left:10px;} .sBoard_view .content_box .video_box {width:886px; height:498px; margin:0 auto;} .sBoard_view .content_box .video_box iframe {width:100%; height:100%;} .sBoard_view .download_box {margin-bottom:60px;} .sBoard_view .download_box li:not(:last-child) {margin-bottom:5px;} .sBoard_view .download_box li a {display:flex; align-items:center; width:100%; height:60px; border:1px solid #000; border-radius:10px; padding:0 60px 0 30px; font-size:1em; font-weight:600; position:relative;} .sBoard_view .download_box li a:after {content:''; display:block; width:26px; height:26px; background:url(../images/icon_download.svg) no-repeat center center; background-size:26px 26px; position:absolute; right:30px; top:50%; transform:translateY(-50%)} .sBoard_view .download_box li a .date {display:inline-block; font-size:0.75em; font-weight:400; margin-left:20px;} .sBoard_view .bottom_box {width:100%; position:relative;} .sBoard_view .bottom_box > div {display:flex; justify-content:space-between; align-items:center; width:100%;} .sBoard_view .bottom_box > div > div {width:calc(50% - 60px)} .sBoard_view .bottom_box > div > div a {display:block; width:56px; height:56px; background-color:#333; background-repeat:no-repeat; background-position:center center; background-size:30px 26px; border-radius:50%; box-shadow:0 15px 15px rgba(12,17,27,0.15); position:absolute; top:50%; transform:translateY(-50%); transition:background 0.5s} .sBoard_view .bottom_box > div > div a:hover {background-color:#000;} .sBoard_view .bottom_box > div > div p {width:100%; font-size:0.875em; color:#888; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .sBoard_view .bottom_box > div > div p.none {overflow:visible; text-overflow:unset;} .sBoard_view .bottom_box > div > div.prev_board {padding-left:85px;} .sBoard_view .bottom_box > div > div.prev_board a {background-image:url(../images/icon_board_prev.svg); left:0;} .sBoard_view .bottom_box > div > div.next_board {text-align:right; padding-right:85px;} .sBoard_view .bottom_box > div > div.next_board a {background-image:url(../images/icon_board_next.svg); right:0;} .sBoard_view .bottom_box > div > div.none a {background-color:#b3b3b3;} .sBoard_view .bottom_box .list_btn {width:56px; height:56px; background:#34ab81 url(../images/icon_board_list.svg) no-repeat center center; background-size:28px 24px; border-radius:25px 0 25px 0; box-shadow:0 15px 15px rgba(12,17,27,0.15); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); transition:background 0.5s;} .sBoard_view .bottom_box .list_btn:hover {background-color:#1d946a;} @media screen and (max-width:1024px){ .sBoard_view .top_box {padding-top:60px;} .sBoard_view .top_box h3 {font-size:1.2em; margin-bottom:25px;} .sBoard_view .top_box .subject {width:100%; font-size:2em;} .sBoard_view .top_box .icon_notice {width:26px; height:26px; background-size:12px auto;} .sBoard_view .top_box .date {font-size:1.3em; font-family:'Noto Sans SC'; bottom:auto; top:65px;} .sBoard_view .content_box {padding:40px 0;} .sBoard_view .content_box .more_view {font-size:1.03em;} .sBoard_view .content_box .video_box {width:688px; height:387px;} .sBoard_view .download_box li a {font-size:1.07em;} .sBoard_view .download_box li a .date {font-size:12px;} } @media screen and (max-width:767px){ .sBoard_view .top_box {padding:50px 0 30px;} .sBoard_view .top_box h3 {margin-bottom:15px;} .sBoard_view .top_box .subject {font-size:1.47em;} .sBoard_view .top_box .icon_notice {width:21px; height:21px;} .sBoard_view .top_box .date {font-size:0.93em; top:55px;} .sBoard_view .content_box.case2 {margin-bottom:50px;} .sBoard_view .content_box p {font-size:0.93em;} .sBoard_view .content_box .video_box {width:100%; height:50vw;} .sBoard_view .download_box li a {height:auto; padding:20px 60px 20px 30px; font-size:0.93em;} .sBoard_view .download_box li a .date {display:block; margin:5px 0 0 0;} .sBoard_view .bottom_box > div > div {padding:0 !important;} .sBoard_view .bottom_box > div > div a {display:inline-block; width:34px; height:34px; background-size:16px 16px; position:relative; top:0; transform:translateY(0); box-shadow:none;} .sBoard_view .bottom_box > div > div p {font-size:0.8em; margin-top:10px;} .sBoard_view .bottom_box .list_btn {width:40px; height:40px; background-size:20px 18px; border-radius:15px 0 15px 0; box-shadow:none; top:-3px; transform:translate(-50%, 0)} } .sBoard_view .promotional_material_box ul {display:flex; flex-wrap:wrap;} .sBoard_view .promotional_material_box ul li {width:calc(25% - 18px); margin-right:24px; overflow:hidden;} .sBoard_view .promotional_material_box ul li:first-child {width:calc(50% - 12px)} .sBoard_view .promotional_material_box ul li:nth-child(3) ~ li {margin-top:80px;} .sBoard_view .promotional_material_box ul li .img_box {width:100%; height:282px; border:1px solid #e6e6e6; border-radius:30px; background-repeat:no-repeat; background-position:center center; background-size:contain; margin-bottom:20px;} .sBoard_view .promotional_material_box ul li .award {float:left; width:52px; line-height:52px; text-align:center; background:#f3f3f3; font-size:0.875em; border-radius:20px 20px 20px 0;} .sBoard_view .promotional_material_box ul li .award1 {background:#34ab81; color:#fff;} .sBoard_view .promotional_material_box ul li .award2 {background:#c2ca2b; color:#fff;} .sBoard_view .promotional_material_box ul li .award3 {background:#939bad; color:#fff;} .sBoard_view .promotional_material_box ul li .award4 {background:#b47b49; color:#fff;} .sBoard_view .promotional_material_box ul li dl {float:left; width:calc(100% - 52px); padding-left:20px;} .sBoard_view .promotional_material_box ul li dl dt {font-size:1.25em; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:5px;} .sBoard_view .promotional_material_box ul li dl dd {font-size:0.875em; } .sBoard_view .promotional_material_tag {width:100%; margin-bottom:30px;} .sBoard_view .promotional_material_tag li {display:inline-block; background:#f3f3f3; line-height:32px; border-radius:6px; margin-right:6px; font-size:0.875em; color:#666; padding:0 10px;} .sBoard_view .promotional_material_tag li:before {content:'#'} .sBoard_view .promotional_material_tag li:last-child {margin-right:0;} @media screen and (min-width:1025px){ .sBoard_view .promotional_material_box ul li:nth-child(3), .sBoard_view .promotional_material_box ul li:nth-child(7), .sBoard_view .promotional_material_box ul li:nth-child(11), .sBoard_view .promotional_material_box ul li:nth-child(15) {margin-right:0;} } @media screen and (max-width:1220px){ .sBoard_view .promotional_material_box ul li .img_box {height:21vw} } @media screen and (max-width:1024px){ .sBoard_view .promotional_material_box ul li {width:calc(33.33% - 13.33px); margin-right:20px;} .sBoard_view .promotional_material_box ul li:nth-child(2) ~ li {margin-top:60px;} .sBoard_view .promotional_material_box ul li:first-child {width:calc(66.66% - 7.77px)} .sBoard_view .promotional_material_box ul li:nth-child(2), .sBoard_view .promotional_material_box ul li:nth-child(5), .sBoard_view .promotional_material_box ul li:nth-child(8), .sBoard_view .promotional_material_box ul li:nth-child(11), .sBoard_view .promotional_material_box ul li:nth-child(14) {margin-right:0;} .sBoard_view .promotional_material_box ul li .img_box {height:27vw;} .sBoard_view .promotional_material_box ul li .award {width:36px; line-height:36px; border-radius:10px 10px 10px 0; font-size:0.87em;} .sBoard_view .promotional_material_box ul li dl {width:calc(100% - 36px)} .sBoard_view .promotional_material_box ul li dl dt {font-size:0.97em; margin-bottom:5px;} } @media screen and (max-width:767px){ .sBoard_view .promotional_material_box {margin-bottom:30px;} .sBoard_view .promotional_material_box ul li {width:calc(50% - 8px); margin-right:16px !important;} .sBoard_view .promotional_material_box ul li:nth-child(odd) {margin-right:0 !important;} .sBoard_view .promotional_material_box ul li:first-child {width:100%;} .sBoard_view .promotional_material_box ul li:nth-child(1) ~ li {margin-top:20px;} .sBoard_view .promotional_material_box ul li .img_box {height:42vw;} .sBoard_view .promotional_material_box ul li .award {width:32px; line-height:32px;} .sBoard_view .promotional_material_box ul li dl {width:calc(100% - 32px); padding-left:10px;} .sBoard_view .promotional_material_tag li {font-size:0.83em; line-height:27px;} } .board_invest_box {border-top:2px solid #000; margin-top:50px; padding-top:80px;} .board_invest_box.case2 {border-top:0; padding-top:0;} .board_invest_box .tit_box {display:flex; justify-content:space-between; align-items:end; width:100%; margin:145px 0 30px;} .board_invest_box .tit_box:first-of-type {margin-top:0;} .board_invest_box .tit_box span {font-size:0.875em;} .board_invest_box h4 {font-size:1.875em; font-weight:800; font-family:'Noto Sans SC'; letter-spacing:0;} .board_invest_box h4.date span {font-size:0.47em; color:#888; font-weight:400; font-family:'Noto Sans SC'; margin-left:20px;} .board_invest_box .graph_box {display:flex; align-items:center; width:100%; margin-bottom:70px;} .board_invest_box .graph_box > div:first-child {width:715px; text-align:center;} .board_invest_box .graph_box > div:last-child {width:403px;} .board_invest_box .graph_box .chart_box {width:280px; height:280px; margin:0 auto;} .board_invest_box .graph_box .top_box {width:100%;} .board_invest_box .graph_box .top_box:after {content:''; display:block; width:100%; clear:both;} .board_invest_box .graph_box .top_box li {float:left; width:calc(100% - 129px); background:#f5f5f5; border-radius:6px; font-size:0.875em; font-weight:600; line-height:50px; text-align:center;} .board_invest_box .graph_box .top_box li:last-child {float:right; width:120px;} .board_invest_box .graph_box .info_box li {margin-top:30px;} .board_invest_box .graph_box .info_box li:after {content:''; display:block; width:100%; clear:both;} .board_invest_box .graph_box .info_box li p {font-size:0.875em;} .board_invest_box .graph_box .info_box li .txt1 {float:left; width:calc(100% - 129px); position:relative; padding-left:66px;} .board_invest_box .graph_box .info_box li .txt1:before {content:''; display:block; width:15px; height:15px; border-radius:5px 0 5px 0; position:absolute; left:28px; top:50%; transform:translateY(-50%);} .board_invest_box .graph_box .info_box li .txt1.case1:before {background:#b6d82f;} .board_invest_box .graph_box .info_box li .txt1.case2:before {background:#33b0a8;} .board_invest_box .graph_box .info_box li .txt1.case3:before {background:#057071;} .board_invest_box .graph_box .info_box li .txt1.case4:before {background:#b9bfcd;} .board_invest_box .graph_box .info_box li .txt1.case5:before {background:#7b65e7;} .board_invest_box .graph_box .info_box li .number {float:right; width:120px; text-align:center;} @media screen and (max-width:1024px){ .board_invest_box {border-top:0; margin-top:40px; padding-top:0;} .board_invest_box .tit_box {margin:60px 0 25px;} .board_invest_box .tit_box span {font-size:0.87em;} .board_invest_box .tit_box .select_box {width:170px;} .board_invest_box .tit_box .select_box > button {height:40px; border-radius:20px;} .board_invest_box .tit_box .select_box ul {border-radius:0 0 20px 20px;} .board_invest_box .tit_box .select_box.on > button {border-radius:20px 20px 0 0;} .board_invest_box h4 {font-size:1.6em;} .board_invest_box h4.date span {font-size:0.54em; margin-left:10px} .board_invest_box .graph_box > div:first-child {width:50%;} .board_invest_box .graph_box > div:first-child img {width:310px;} .board_invest_box .graph_box > div:last-child {width:50%;} .board_invest_box .graph_box .chart_box {width:250px; height:250px;} .board_invest_box .graph_box .top_box li {font-size:0.93em; line-height:45px;} .board_invest_box .graph_box .info_box li {margin-top:20px;} .board_invest_box .graph_box .info_box li p {font-size:0.93em;} .board_invest_box .graph_box .info_box li .txt1 {padding-left:58px;} .board_invest_box .graph_box .info_box li .txt1:before {left:20px;} } @media screen and (max-width:767px){ .board_invest_box {margin-top:30px;} .board_invest_box .tit_box {margin:70px 0 20px;} .board_invest_box .tit_box span {font-size:0.8em;} .board_invest_box .tit_box .select_box {width:97px;} .board_invest_box .tit_box .select_box > button {height:36px; border-radius:18px;} .board_invest_box .tit_box .select_box.on > button {border-radius:18px 18px 0 0;} .board_invest_box .tit_box .select_box ul {border-radius:0 0 18px 18px;} .board_invest_box h4 {font-size:1.33em;} .board_invest_box h4.date {width:100%;} .board_invest_box h4.date span {float:right; display:block; font-size:0.7em; margin-left:0;} .board_invest_box .graph_box {display:block;} .board_invest_box .graph_box > div:first-child {width:100%; margin-bottom:20px;} .board_invest_box .graph_box > div:last-child {width:100%;} .board_invest_box .graph_box .top_box li {line-height:37px;} .board_invest_box .graph_box .info_box li .txt1 {padding-left:50px;} } .sReportcenter_case1 dl {display:flex; align-items:center; width:100%; height:80px; background:#f7f7f7; border-radius:10px; padding:0 45px;} .sReportcenter_case1 dl dt {font-size:1em; line-height:1.8em; font-weight:600; margin-right:40px; position:relative; padding-left:38px;} .sReportcenter_case1 dl dt:before {content:''; display:inline-block; width:24px; height:24px; background:url(../images/icon_warning.svg) no-repeat center center; background-size:24px 24px; vertical-align:middle; position:absolute; left:0; top:2px;} .sReportcenter_case1 dl dd {font-size:1em; line-height:1.8em;} .sReportcenter_case1 ul {width:100%; margin-top:60px;} .sReportcenter_case1 ul:after {content:''; display:block; width:100%; clear:both;} .sReportcenter_case1 ul li {float:left; width:calc(25% - 18px); height:360px; border-radius:20px; background:#fff; box-shadow:0 8px 20px rgba(12,17,27,0.15); margin-right:24px; padding:30px 10px 0; text-align:center;} .sReportcenter_case1 ul li:last-child {margin-right:0;} .sReportcenter_case1 ul li .num {display:inline-block; background:#000; border-radius:21px 21px 21px 0; font-size:1.125em; color:#fff; font-weight:800; line-height:42px; font-family:'Noto Sans SC'; padding:0 20px;} .sReportcenter_case1 ul li .icon {display:block; width:60px; height:60px; background-repeat:no-repeat; background-position:center center; background-size:contain; margin:25px auto 30px;} .sReportcenter_case1 ul li .txt {font-size:1em; line-height:1.8em;} .sReportcenter_case1 ul li span {display:block; font-size:0.875em; color:rgba(0,0,0,0.6); font-weight:400; line-height:1.57em; margin-top:5px;} .sReportcenter_case1 .btn_style1 {margin-top:85px;} .sReportcenter_case1 ul li .icon1 {background-image:url(../images/sReportcenter_icon1.png)} .sReportcenter_case1 ul li .icon2 {background-image:url(../images/sReportcenter_icon2.png)} .sReportcenter_case1 ul li .icon3 {background-image:url(../images/sReportcenter_icon3.png)} .sReportcenter_case1 ul li .icon4 {background-image:url(../images/sReportcenter_icon4.png)} .sReportcenter_case2 .warning {display:flex; align-items:center; width:100%; height:80px; background:#f7f7f7; border-radius:10px; padding:0 45px;} .sReportcenter_case2 .warning p {font-size:1em; line-height:1.8em; padding-left:39px; position:relative;} .sReportcenter_case2 .warning p:before {content:''; display:inline-block; width:24px; height:24px; background:url(../images/icon_warning.svg) no-repeat center center; background-size:24px 24px; vertical-align:middle; margin-right:15px; position:absolute; left:0; top:2px;} .sReportcenter_case2 .board_inquiry_box {margin-top:60px;} .sReportcenter_case2 .btn_style1 {margin-top:60px;} .sReportcenter_case3:after {content:''; display:block; width:100%; clear:both;} .sReportcenter_case3 .tit {float:left; width:calc(100% - 648px); font-size:1.5em; line-height:1.67em;} .sReportcenter_case3 .board_inquiry_box {float:left; width:648px;} .sReportcenter_case3 .board_inquiry_box .form_list > li {margin-bottom:60px;} .sReportcenter_case3 .board_inquiry_box .form_list > li > label {float:none; width:100%; line-height:1.5em; margin-bottom:5px;} .sReportcenter_case3 .board_inquiry_box .form_list > li > div {float:none; width:100%;} .sReportcenter_case3 .board_inquiry_box .form_list > li .form_txt[type="password"] {width:300px;} .sReportcenter_case3 .board_inquiry_box .email_box .form_txt {width:calc(33.33% - 16px);} .sReportcenter_case3 .board_inquiry_box .email_box span {width:24px;} .sReportcenter_case3 .board_inquiry_box .email_box div {width:calc(33.33% - 16px); margin-left:24px;} .sReportcenter_case3 .btn_style1 {margin-top:140px;} .sReportcenter_case3 .btn_style1 .btn {box-shadow:0 15px 15px rgba(12,17,27,0.15)} .sReportcenter_case4 ul {display:flex; width:100%;} .sReportcenter_case4 ul li {width:25%; padding-left:40px; position:relative;} .sReportcenter_case4 ul li:before {content:''; display:block; width:36px; height:36px; background:url(../images/sReportcenter_icon5.svg) no-repeat center center; background-size:36px 36px; position:absolute; left:-56px; top:55%; transform:translateY(-50%);} .sReportcenter_case4 ul li:first-child:before {display:none;} .sReportcenter_case4 ul li:last-child:before {background-image:url(../images/sReportcenter_icon5_on.svg);} .sReportcenter_case4 ul li .num {display:block; font-size:1.25em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:15px;} .sReportcenter_case4 ul li dl dt {font-size:1.25em; font-weight:800; font-family:'Noto Sans SC';} .sReportcenter_case4 ul li dl dd {font-size:0.875em; color:#666; line-height:1.42em; margin-top:15px;} .sReportcenter_case4 ul li:last-child .num, .sReportcenter_case4 ul li:last-child dl dt {color:#34ab81;} .sReportcenter_case5 {margin-top:80px;} .sReportcenter_case5 > div {width:100%; border-radius:10px; overflow:hidden; box-shadow:0 3px 12px rgba(12,17,27,0.15); margin-bottom:10px;} .sReportcenter_case5 > div:last-child {margin-bottom:0;} .sReportcenter_case5 .top_box {width:100%; height:80px;} .sReportcenter_case5 .top_box button {display:flex; justify-content:left; align-items:center; width:100%; height:100%; font-size:1em; color:#000; font-family:'Noto Sans SC'; text-align:left; padding-right:80px; position:relative;} .sReportcenter_case5 .top_box button:after {content:''; display:block; width:20px; height:20px; background:url(../images/icon_faq_arrow.svg) no-repeat center center; background-size:20px 20px; position:absolute; right:30px; top:50%; transform:translateY(-50%) rotate(180deg);} .sReportcenter_case5 .top_box button .num {display:block; width:70px; font-size:1em; line-height:32px; font-weight:600; text-align:center;} .sReportcenter_case5 .top_box button .cate {width:70px; line-height:32px; border-radius:16px 16px 16px 0; background:#34ab81; font-size:0.875em; color:#fff; text-align:center;} .sReportcenter_case5 .top_box button .date {width:80px; text-align:right; font-size:0.875em; color:rgba(102,102,102,0.6); line-height:32px; font-family:'Noto Sans SC'} .sReportcenter_case5 .top_box button .state {width:70px; font-size:1em; text-align:right; line-height:32px; font-family:'Noto Sans SC'} .sReportcenter_case5 .top_box button .state.complete {color:#34ab81} .sReportcenter_case5 .top_box button p {width:calc(100% - 290px); padding-left:20px; font-size:1.125em; line-height:1.7em; font-weight:600;} .sReportcenter_case5 .txt_box {display:none;} .sReportcenter_case5 .txt_box > div {width:100%; padding:35px 80px 35px 70px;} .sReportcenter_case5 .txt_box > div.inquiry {border-top:1px solid #f1f1f1;} .sReportcenter_case5 .txt_box > div.inquiry p {font-size:0.9375em; color:#555; line-height:2.13em;} .sReportcenter_case5 .txt_box > div.answer {background:#f1f1f1;} .sReportcenter_case5 .txt_box > div.answer > span {font-size:0.9375em; color:#34ab81; position:relative; padding-left:20px;} .sReportcenter_case5 .txt_box > div.answer > span:after {content:''; display:block; width:8px; height:8px; border-left:1px solid #34ab81; border-bottom:1px solid #34ab81; position:absolute; left:0; top:4px;} .sReportcenter_case5 .txt_box > div.answer p {font-size:0.9375em; color:#555; line-height:2.13em; padding-left:20px;} .sReportcenter_case5 > div.active .top_box button:after {transform:translateY(-50%) rotate(0deg)} /*.sReportcenter_case5 > div.active .txt_box {display:block;}*/ @media screen and (max-width:1024px){ .sReportcenter_case1 dl {height:75px; padding:0 0 0 35px;} .sReportcenter_case1 ul {margin-top:80px;} .sReportcenter_case1 ul li {width:calc(50% - 10px); height:425px; margin-right:20px; padding:35px 40px 0;} .sReportcenter_case1 ul li:nth-child(even) {margin-right:0;} .sReportcenter_case1 ul li:nth-child(2) ~ li {margin-top:20px;} .sReportcenter_case1 ul li .num {border-radius:26px 26px 26px 0; font-size:1.33em; line-height:51px; padding:0 24px;} .sReportcenter_case1 ul li .icon {width:72px; height:72px; margin:30px auto 35px;} .sReportcenter_case1 ul li .txt {font-size:1.2em;} .sReportcenter_case1 ul li span {font-size:1em; margin-top:10px;} .sReportcenter_case1 .btn_style1 {margin-top:80px;} .sReportcenter_case2 .warning {height:75px; padding:0 35px;} .sReportcenter_case2 .board_inquiry_box {margin-top:50px;} .sReportcenter_case2 .btn_style1 {margin-top:100px;} .sReportcenter_case2 .form_txt {max-width:275px;} .sReportcenter_case2 .form_txt.zip ~ .form_txt {float:left; width:calc(50% - 10px);} .sReportcenter_case2 .form_txt.zip + .form_txt {margin-right:20px;} .sReportcenter_case3 .tit {width:calc(100% - 355px); font-size:1.2em; letter-spacing:-0.05em;} .sReportcenter_case3 .board_inquiry_box {width:354px;} .sReportcenter_case3 .board_inquiry_box .form_list > li {margin-bottom:40px;} .sReportcenter_case3 .board_inquiry_box .form_list > li > label {float:none; width:100%;} .sReportcenter_case3 .board_inquiry_box .email_box .form_txt {width:calc(50% - 12px);} .sReportcenter_case3 .board_inquiry_box .email_box div {width:calc(50% - 12px); margin-left:0;} .sReportcenter_case3 .board_inquiry_box .form_list > li .form_txt[type="password"] {width:100%;} .sReportcenter_case3 .btn_style1 {margin-top:80px;} .sReportcenter_case3 .btn_style1 .btn {width:173px; height:50px; border-radius:25px; font-size:1.07em; margin-right:7px;} .sReportcenter_case3 .btn_style1 .btn:last-child {margin-right:0;} .sReportcenter_case4 ul li {padding-left:30px;} .sReportcenter_case4 ul li:not(:last-child) {padding-right:30px;} .sReportcenter_case4 ul li:before {width:29px; height:29px; background-size:29px 29px; left:-30px; top:40px; transform:translateY(0)} .sReportcenter_case4 ul li .num {font-size:1.33em; margin-bottom:10px;} .sReportcenter_case4 ul li dl dt {font-size:1.33em;} .sReportcenter_case4 ul li dl dd {font-size:0.93em;} .sReportcenter_case5 .top_box {height:auto;} .sReportcenter_case5 .top_box button {align-items:flex-start; padding:30px 80px 30px 24px;} .sReportcenter_case5 .top_box button:after {top:45px;} .sReportcenter_case5 .top_box button .num {width:50px; } .sReportcenter_case5 .top_box button .cate {width:83px; font-size:0.93em;} .sReportcenter_case5 .top_box button .date {font-size:0.93em; text-align:center;} .sReportcenter_case5 .top_box button .state {width:60px;} .sReportcenter_case5 .top_box button p {font-size:1em; padding-left:14px; margin-top:3px;} .sReportcenter_case5 .txt_box > div {padding:35px 42px;} .sReportcenter_case5 .txt_box > div.inquiry p {font-size:1em;} .sReportcenter_case5 .txt_box > div.answer > span {font-size:1em;} .sReportcenter_case5 .txt_box > div.answer p {font-size:1em; padding-left:0; margin-top:20px;} } @media screen and (max-width:767px){ .sReportcenter_case1 dl {display:block; height:auto; padding:30px 24px;} .sReportcenter_case1 dl dt {font-size:1.07em; margin-bottom:10px;} .sReportcenter_case1 dl dd {font-size:0.93em; } .sReportcenter_case1 ul {margin-top:60px;} .sReportcenter_case1 ul li {float:none; width:100%; height:320px; margin-right:0; padding:24px 40px;} .sReportcenter_case1 ul li:nth-child(1) ~ li {margin-top:14px;} .sReportcenter_case1 ul li .num {line-height:40px; border-radius:20px 20px 20px 0; font-size:1.07em;} .sReportcenter_case1 ul li .icon {width:60px; height:60px; margin:25px auto 30px;} .sReportcenter_case1 ul li .txt {font-size:0.93em; line-height:1.7em;} .sReportcenter_case1 ul li span {font-size:0.8em; } .sReportcenter_case1 .btn_style1 {margin-top:60px;} .sReportcenter_case2 .warning {display:block; height:auto; padding:30px 24px;} .sReportcenter_case2 .warning p {font-size:0.93em;} .sReportcenter_case2 .board_inquiry_box {margin-top:40px;} .sReportcenter_case2 .btn_style1 {margin-top:80px;} .sReportcenter_case2 .form_txt {max-width:100%;} .sReportcenter_case2 .form_txt.zip ~ .form_txt {float:none; width:100%;} .sReportcenter_case2 .form_txt.zip + .form_txt {margin-right:0;} .sReportcenter_case3 .tit {float:none; width:100%; margin-bottom:60px;} .sReportcenter_case3 .board_inquiry_box {float:none; width:100%;} .sReportcenter_case3 .board_inquiry_box .email_box .form_txt {width:100%;} .sReportcenter_case3 .board_inquiry_box .email_box .form_txt:nth-of-type(2) {width:calc(50% - 8px);} .sReportcenter_case3 .board_inquiry_box .email_box div {width:calc(50% - 8px); margin-left:16px;} .sReportcenter_case3 .btn_style1 .btn {width:152px; height:44px; border-radius:22px; font-size:0.93em;} .sReportcenter_case4 ul {justify-content:center;} .sReportcenter_case4 ul li {padding-left:0;} .sReportcenter_case4 ul li:nth-child(1) ~ li {padding-left:30px;} .sReportcenter_case4 ul li:not(:last-child) {padding-right:0;} .sReportcenter_case4 ul li:nth-child(1) {width:40px;} .sReportcenter_case4 ul li:nth-child(2) {width:92px;} .sReportcenter_case4 ul li:nth-child(3) {width:100px;} .sReportcenter_case4 ul li:nth-child(4) {width:90px;} .sReportcenter_case4 ul li:before {width:15px; height:15px; background-size:15px 15px; left:0;} .sReportcenter_case4 ul li .num {font-size:1.07em;} .sReportcenter_case4 ul li dl dt {font-size:1.07em;} .sReportcenter_case4 ul li dl dd {font-size:0.8em;} .sReportcenter_case5 {margin-top:60px;} .sReportcenter_case5 .top_box button {padding:60px 20px 20px;} .sReportcenter_case5 .top_box button:after {width:16px; height:16px; background-size:16px 16px; right:20px; top:35px;} .sReportcenter_case5 .top_box button .num {width:40px; font-size:0.93em; line-height:30px; position:absolute; left:8px; top:20px;} .sReportcenter_case5 .top_box button .cate {width:80px; line-height:30px; border-radius:15px 15px 15px 0; position:absolute; left:45px; top:20px;} .sReportcenter_case5 .top_box button .date {width:100px; font-size:0.93em; line-height:30px; text-align:right; position:absolute; left:125px; top:20px;} .sReportcenter_case5 .top_box button .state {width:50px; font-size:0.93em; line-height:30px; position:absolute; left:auto; right:43px; top:20px;} .sReportcenter_case5 .top_box button p {width:100%; font-size:0.93em; padding-left:0;} .sReportcenter_case5 .txt_box > div {padding:25px 20px;} .sReportcenter_case5 .txt_box > div.inquiry p {font-size:0.75em;} .sReportcenter_case5 .txt_box > div.answer > span {font-size:0.92em;} .sReportcenter_case5 .txt_box > div.answer p {font-size:0.75em; padding-left:20px; margin-top:5px;} } .sSharedgrowth_case1 dl dt {font-size:2em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC'} .sSharedgrowth_case1 dl dd {font-size:1em; line-height:1.8em; margin-top:25px;} .sSharedgrowth_case1 ul {width:100%; margin-top:60px;} .sSharedgrowth_case1 ul:after {content:''; display:block; width:100%; clear:both;} .sSharedgrowth_case1 ul li {float:left; width:282px; line-height:52px; text-align:center; background:#fff; box-shadow:0 6px 15px rgba(12,17,27,0.15); font-size:1em; margin-right:24px; border-radius:36px; overflow:hidden;} .sSharedgrowth_case1 ul li:last-child {margin-right:0;} .sSharedgrowth_case1 ul li a {display:block; width:100%; height:100%;} .sSharedgrowth_case1 ul li:hover a {background:#34ab81; box-shadow:0 6px 15px rgba(12,17,27,0.15); color:#fff;} .sSharedgrowth_case1 ul li:hover a:after {content:''; display:inline-block; width:15px; height:15px; background:url(../images/icon_arrow_next_w.svg) no-repeat center center; background-size:15px 15px; vertical-align:middle; margin-left:10px; position:relative; top:-2px;} .sSharedgrowth_case2 {padding-top:120px;} .sSharedgrowth_case2 .top_box {display:flex; justify-content:center; align-items:center; width:100%; height:320px; background:url(../images/sSharedgrowth_img1.png) no-repeat center center; background-size:cover; border-radius:20px; text-align:center;} .sSharedgrowth_case2 .top_box dl dt {font-size:3em; color:#fff; font-weight:800; font-family:'Noto Sans SC'} .sSharedgrowth_case2 .top_box dl dd {font-size:1.25em; color:#fff; font-weight:600; font-family:'Noto Sans SC'; margin-top:30px;} .sSharedgrowth_case2 .list_box > div {padding:40px 0; border-bottom:1px solid #000;} .sSharedgrowth_case2 .list_box > div > div {height:125px; position:relative; overflow:hidden;} .sSharedgrowth_case2 .list_box > div > div.active {height:auto;} .sSharedgrowth_case2 .list_box button {height:16px; font-size:0.875em; color:#34ab81; font-weight:600; font-family:'Noto Sans SC'; padding-right:25px; position:relative;} .sSharedgrowth_case2 .list_box button:after {content:''; display:block; width:13px; height:16px; background:url(../images/sSharedgrowth_icon1.png) no-repeat center center; background-size:contain; position:absolute; right:0; top:0;} .sSharedgrowth_case2 .list_box button.view_btn {position:absolute; right:0; top:0;} .sSharedgrowth_case2 .list_box .active button.view_btn:after {transform:rotate(180deg);} .sSharedgrowth_case2 .list_box button.close_btn {float:right; margin-top:40px;} .sSharedgrowth_case2 .list_box button.close_btn:after {transform:rotate(180deg);} .sSharedgrowth_case2 .list_box .tit {font-size:1.25em; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:15px; padding-right:90px;} .sSharedgrowth_case2 .list_box .txt {font-size:0.875em; line-height:2em; font-weight:400;} .sSharedgrowth_case2 .list_box .txt strong {font-weight:600;} .sSharedgrowth_case2 .list_box .table_style2 tbody td {font-size:0.875em;} .sSharedgrowth_case2 .list_box .table_style2 .list_style1 > li:before {top:8px;} .sSharedgrowth_case2 .sSharedgrowth_table tr td:nth-child(1) {width:8%;} .sSharedgrowth_case2 .sSharedgrowth_table tr th:nth-child(2) {width:60%;} .sSharedgrowth_case2 .sSharedgrowth_table tr th:nth-child(3) {width:32%;} .sSharedgrowth_case2 .list_box .txt_box .sub_table_box {margin: 40px 0;} .sSharedgrowth_case3 {padding-top:150px;} .sSharedgrowth_case3 .top_box {display:flex; justify-content:center; align-items:center; width:100%; height:320px; background:url(../images/sSharedgrowth_img2.png) no-repeat center center; background-size:cover; border-radius:20px; text-align:center; margin-bottom:40px;} .sSharedgrowth_case3 .top_box dl dt {font-size:3em; color:#fff; font-weight:800; font-family:'Noto Sans SC'} .sSharedgrowth_case3 .top_box dl dd {font-size:1.25em; color:#fff; font-weight:600; font-family:'Noto Sans SC'; margin-top:30px;} .sSharedgrowth_case3 .txt_box {width:100%; overflow:hidden;} .sSharedgrowth_case3 .txt_box dl {float:left; width:calc(50% - 50px);} .sSharedgrowth_case3 .txt_box dl:nth-child(even) {float:right;} .sSharedgrowth_case3 .txt_box dl:nth-child(2) ~ dl {margin-top:70px;} .sSharedgrowth_case3 .txt_box dl dt {font-size:1.25em; font-weight:600; font-family:'Noto Sans SC'} .sSharedgrowth_case3 .txt_box dl dd {font-size:1em; line-height:1.75em; font-weight:400; margin-top:15px;} .sSharedgrowth_case4 {margin-top:100px;} .sSharedgrowth_case4 .tit {font-size:1.25em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:20px;} .sSharedgrowth_case4 .tit:before {content:''; display:inline-block; width:24px; height:24px; background:url(../images/icon_warning.svg) no-repeat center center; background-size:24px 24px; vertical-align:middle; margin-right:15px;} .sSharedgrowth_case4 div {width:100%; padding:35px 40px; border:1px solid #000; border-radius:10px; position:relative;} .sSharedgrowth_case4 div .list_style1 > li {font-size:0.875em;} .sSharedgrowth_case4 div .list_style1 > li:before {top:9px;} .sSharedgrowth_case4 div a {position:absolute; right:40px; bottom:40px; font-size:0.875em; color:#34ab81; font-weight:600; font-family:'Noto Sans SC'; line-height:24px; padding-right:32px;} .sSharedgrowth_case4 div a:after {content:''; display:block; width:24px; height:24px; background:#34ab81 url(../images/icon_arrow_next_w.svg) no-repeat center center; background-size:16px 16px; border-radius:50%; box-shadow:0 6px 10px rgba(12,17,27,0.15); position:absolute; right:0; top:0;} .sSharedgrowth_case4 .list_style1 .case2 {display:flex;} .sSharedgrowth_case4 .list_style1 .case2 span {display:block; width:65px;} .sSharedgrowth_case4 .list_style1 .case2 p {width:calc(100% - 65px);} @media screen and (max-width:1024px){ .sSharedgrowth_case1 dl dt {font-size:1.47em;} .sSharedgrowth_case1 dl dd {margin-top:20px;} .sSharedgrowth_case1 ul {margin-top:40px;} .sSharedgrowth_case1 ul li {width:calc(33.33% - 6.66px); line-height:48px; border-radius:24px; margin-right:10px; font-size:0.93em;} .sSharedgrowth_case1 ul li:hover a:after {margin-left:5px; top:-1px;} .sSharedgrowth_case2 {padding-top:100px;} .sSharedgrowth_case2 .top_box {height:185px; border-radius:10px; margin-bottom:10px;} .sSharedgrowth_case2 .top_box dl dt {font-size:2em;} .sSharedgrowth_case2 .top_box dl dd {font-size:1em; margin-top:15px;} .sSharedgrowth_case2 .list_box > div {padding:30px 0;} .sSharedgrowth_case2 .list_box > div > div {height:125px;} .sSharedgrowth_case2 .list_box button {font-size:0.93em;} .sSharedgrowth_case2 .list_box .tit {font-size:1.2em;} .sSharedgrowth_case2 .list_box .txt {font-size:0.93em;} .sSharedgrowth_case2 .list_box .table_style2 tbody td {font-size:0.93em;} .sSharedgrowth_case2 .sSharedgrowth_table tr td:nth-child(1) {width:10%;} .sSharedgrowth_case2 .sSharedgrowth_table tr th:nth-child(2) {width:45%;} .sSharedgrowth_case2 .sSharedgrowth_table tr th:nth-child(3) {width:45%;} .sSharedgrowth_case3 {padding-top:100px;} .sSharedgrowth_case3 .top_box {height:185px; border-radius:10px; margin-bottom:30px;} .sSharedgrowth_case3 .top_box dl dt {font-size:2em;} .sSharedgrowth_case3 .top_box dl dd {font-size:1em; margin-top:15px;} .sSharedgrowth_case3 .txt_box dl {width:calc(50% - 15px);} .sSharedgrowth_case3 .txt_box dl:nth-child(2) ~ dl {margin-top:40px;} .sSharedgrowth_case3 .txt_box dl:nth-child(odd) {padding-right:20px;} .sSharedgrowth_case3 .txt_box dl dt {font-size:1.2em;} .sSharedgrowth_case4 {margin-top:65px;} .sSharedgrowth_case4 .tit {font-size:1.2em;} .sSharedgrowth_case4 div {padding:25px 30px; overflow:hidden;} .sSharedgrowth_case4 div .list_style1 > li {font-size:0.93em;} .sSharedgrowth_case4 div a {float:right; font-size:0.93em; position:relative; right:0; bottom:0; margin-top:30px;} } @media screen and (max-width:767px){ .sSharedgrowth_case1 dl dt {font-size:1.2em;} .sSharedgrowth_case1 dl dd {font-size:0.93em; margin-top:10px;} .sSharedgrowth_case1 ul li {float:none; width:100%; line-height:42px; margin:0 0 10px;} .sSharedgrowth_case1 ul li:last-child {margin-bottom:0;} .sSharedgrowth_case2 .top_box {height:200px; margin-bottom:0;} .sSharedgrowth_case2 .top_box dl dt {font-size:1.87em;} .sSharedgrowth_case2 .top_box dl dd {font-size:0.93em; line-height:1.57em;} .sSharedgrowth_case2 .list_box > div > div {height:140px;} .sSharedgrowth_case2 .list_box .tit {font-size:1.07em; margin-bottom:10px;} .sSharedgrowth_case2 .list_box .txt_box .sub_table_box {margin-top: 25px;} .sSharedgrowth_case3 .top_box {height:200px;} .sSharedgrowth_case3 .txt_box dl {float:none; width:100%;} .sSharedgrowth_case3 .txt_box dl:nth-child(even) {float:none;} .sSharedgrowth_case3 .txt_box dl:nth-child(1) ~ dl {margin-top:30px;} .sSharedgrowth_case3 .txt_box dl:nth-child(odd) {padding-right:0;} .sSharedgrowth_case3 .txt_box dl dt {font-size:1.07em;} .sSharedgrowth_case3 .txt_box dl dd {font-size:0.93em; margin-top:10px;} .sSharedgrowth_case4 .tit {font-size:1.33em;} .sSharedgrowth_case4 div {padding:25px 20px;} } .sCscentered .tit {font-size:1.5em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC';} .sCscentered_case1 .top_box {display:flex; justify-content:center; align-items:center; width:100%; height:320px; background:url(../images/sCscentered_img1.png) no-repeat center center; background-size:cover; border-radius:20px; text-align:center; padding:0 15px;} .sCscentered_case1 .top_box dl dt {font-size:3em; color:#fff; font-weight:800; font-family:'Noto Sans SC'} .sCscentered_case1 .top_box dl dd {font-size:1.25em; color:#fff; line-height:1.6em; font-weight:600; font-family:'Noto Sans SC'; margin-top:30px;} .sCscentered_case2 {margin-top:120px;} .sCscentered_case2 > div {width:100%; height:635px; background:url(../images/sCscentered_img2.png) no-repeat center center; background-size:cover; margin-top:60px; position:relative;} .sCscentered_case2 ul li {display:flex; justify-content:center; align-items:center; width:274px; height:274px; font-size:1.56em; color:#fff; line-height:1.3em; font-weight:800; font-family:'Noto Sans SC'; text-align:center; position:absolute;} .sCscentered_case2 ul li:nth-child(1) {left:50px; top:0;} .sCscentered_case2 ul li:nth-child(2) {left:50%; top:297px; transform:translateX(-50%)} .sCscentered_case2 ul li:nth-child(3) {right:50px; top:0;} .sCscentered_case2 dl {text-align:center; position:absolute;} .sCscentered_case2 dl dt {font-size:1.125em; line-height:62px; font-weight:600; font-family:'Noto Sans SC'} .sCscentered_case2 dl dd {font-size:0.875em; color:#999; line-height:1.33em; margin-top:20px;} .sCscentered_case2 dl:nth-child(1) {left:200px; top:402px;} .sCscentered_case2 dl:nth-child(2) {right:260px; top:402px;} .sCscentered_case2 dl:nth-child(3) {left:50%; top:105px; transform:translateX(-50%)} .sCscentered_case3 {margin-top:50px;} .sCscentered_case3 ul {display:flex; justify-content:space-between; width:100%; margin-top:80px;} .sCscentered_case3 ul li {width:180px; position:relative;} .sCscentered_case3 ul li:not(:first-child):before {content:''; display:block; width:36px; height:36px; background:url(../images/sCscentered_icon1.svg) no-repeat center center; background-size:36px 36px; position:absolute; top:90px; left:-56px; transform:translateY(-50%)} .sCscentered_case3 ul li p {display:flex; justify-content:center; align-items:center; width:100%; height:180px; background:#c2ca2b; border-radius:50%; font-size:1.25em; color:#fff; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sCscentered_case3 ul li span {display:block; width:100%; font-size:0.875em; color:#666; line-height:1.42em; text-align:center; margin-top:30px;} .sCscentered_case4 {margin-top:190px;} .sCscentered_case4 .sub_top_box {height:auto;} .sCscentered_case4 .tit {margin-top:60px;} .sCscentered_case4 .txt {font-size:1em; color:#888; line-height:1.5em; margin-top:15px;} .sCscentered_case4 .box1 {display:flex; justify-content:center; width:100%; margin-top:60px;} .sCscentered_case4 .box1 > div {height:300px; border-radius:50px; box-shadow:0 40px 40px rgba(12,17,27,0.15); position:relative;} .sCscentered_case4 .box1 .icon {display:block; width:70px; height:70px; background-repeat:no-repeat; background-position:center center; background-size:cover; margin-bottom:20px;} .sCscentered_case4 .box1 .case1, .sCscentered_case4 .box1 .case3 {display:flex; justify-content:center; align-items:center; flex-direction:column; width:185px; font-size:1.125em; color:#fff; line-height:1.5em; font-weight:600; text-align:center;} .sCscentered_case4 .box1 .case1 {background:#949bad;} .sCscentered_case4 .box1 .case1:after {content:''; display:block; width:40px; height:30px; background:url(../images/sCscentered_icon2.png) no-repeat; background-size:cover; position:absolute; right:-38px; top:50%; transform:translateY(-50%)} .sCscentered_case4 .box1 .case2 {display:flex; align-items:center; flex-wrap:wrap; width:600px; background:#f1f1f3; box-shadow:none; margin:0 40px; padding:40px 45px;} .sCscentered_case4 .box1 .case2:after {content:''; display:block; width:40px; height:30px; background:url(../images/sCscentered_icon3.png) no-repeat; background-size:cover; position:absolute; right:-38px; top:50%; transform:translateY(-50%)} .sCscentered_case4 .box1 .case2 .tit1 {font-size:3.5em; letter-spacing:0.1em; line-height:1.2em; font-weight:800; font-family:'Noto Sans SC'; margin-right:40px;} .sCscentered_case4 .box1 .case2 div {display:flex;} .sCscentered_case4 .box1 .case2 div dl:not(:last-child) {margin-right:30px;} .sCscentered_case4 .box1 .case2 div dl dt {font-size:1em; font-weight:600; letter-spacing:0.05em;} .sCscentered_case4 .box1 .case2 div dl dd {font-size:0.875em; color:rgba(0,0,0,0.5); margin-top:5px;} .sCscentered_case4 .box1 .case2 ul {width:100%; overflow:hidden; margin-top:20px;} .sCscentered_case4 .box1 .case2 ul li {float:left; width:calc(25% - 7.5px); line-height:52px; border-radius:26px; background:#fff; font-size:1em; font-weight:600; text-align:center; margin-right:10px;} .sCscentered_case4 .box1 .case2 ul li:nth-child(4n) {margin-right:0;} .sCscentered_case4 .box1 .case2 ul li:nth-child(4) ~ li {margin-top:10px;} .sCscentered_case4 .box1 .case3 {background:#34ab81;} .sCscentered_case4 .box2 {width:100%; overflow:hidden; margin-top:15px;} .sCscentered_case4 .box2 > div {float:left; margin-right:25px;} .sCscentered_case4 .box2 > div:last-child {margin-right:0;} .sCscentered_case4 .box2 > div img {max-width:100%;} .sCscentered_case4 .box1 .icon1 {background-image:url(../images/sCscentered_img3.png)} .sCscentered_case4 .box1 .icon2 {background-image:url(../images/sCscentered_img4.png)} @media screen and (max-width:1220px){ .sCscentered_case2 > div {height:50vw;} .sCscentered_case2 ul li {width:21.5vw; height:21.5vw;} .sCscentered_case2 ul li:nth-child(1) {left:2.2vw; top:0;} .sCscentered_case2 ul li:nth-child(2) {left:50%; top:23.2vw; transform:translateX(-50%)} .sCscentered_case2 ul li:nth-child(3) {right:2.2vw; top:0;} .sCscentered_case2 dl dt {line-height:4.9vw} .sCscentered_case2 dl:nth-child(1) {left:13vw; top:31.7vw;} .sCscentered_case2 dl:nth-child(2) {right:18vw; top:31.7vw;} .sCscentered_case2 dl:nth-child(3) {top:8.3vw} .sCscentered_case3 ul li {width:14vw;} .sCscentered_case3 ul li:not(:first-child):before {top:7.5vw; left:calc(-1vw - 36px);} .sCscentered_case3 ul li p {height:14vw;} .sCscentered_case4 .box1 .case2 .tit1 {margin-right:20px;} .sCscentered_case4 .box1 .case2 div dl:not(:last-child) {margin-right:15px;} } @media screen and (max-width:1024px){ .sCscentered .tit {font-size:1.33em;} .sCscentered_case1 .top_box {height:185px;} .sCscentered_case1 .top_box dl dt {font-size:1.87em;} .sCscentered_case1 .top_box dl dd {font-size:1em; margin-top:15px;} .sCscentered_case2 {margin-top:70px;} .sCscentered_case2 > div {margin-top:40px;} .sCscentered_case2 ul li {font-size:1.2em;} .sCscentered_case2 ul li:nth-child(1) {left:1.5vw} .sCscentered_case2 ul li:nth-child(3) {right:1.5vw} .sCscentered_case2 dl dt {font-size:1em;} .sCscentered_case2 dl dd {font-size:0.87em; margin-top:5px;} .sCscentered_case2 dl:nth-child(1) {left:11vw} .sCscentered_case2 dl:nth-child(2) {right:16vw;} .sCscentered_case3 ul {justify-content:center; margin-top:40px;} .sCscentered_case3 ul li {width:98px; margin-right:50px;} .sCscentered_case3 ul li:last-child {margin-right:0;} .sCscentered_case3 ul li:not(:first-child):before {width:22px; height:22px; background-size:22px 22px; top:49px; left:-35px;} .sCscentered_case3 ul li p {height:98px; font-size:1em;} .sCscentered_case3 ul li span {font-size:0.87em; margin-top:15px;} .sCscentered_case4 {margin-top:120px;} .sCscentered_case4 .sub_top_box {margin-bottom:80px;} .sCscentered_case4 .tit {margin-top:40px;} .sCscentered_case4 .txt {margin-top:10px;} .sCscentered_case4 .box1 > div {height:200px; border-radius:30px;} .sCscentered_case4 .box1 .icon {width:40px; height:40px; margin-bottom:10px;} .sCscentered_case4 .box1 .case1, .sCscentered_case4 .box1 .case3 {width:120px; font-size:1em;} .sCscentered_case4 .box1 .case1:after {width:26px; height:20px; right:-22px;} .sCscentered_case4 .box1 .case2 {width:calc(100% - 290px); max-width:395px; margin:0 24px; padding:10px 30px;} .sCscentered_case4 .box1 .case2:after {width:26px; height:20px; right:-22px;} .sCscentered_case4 .box1 .case2 .tit1 {font-size:2.4em;} .sCscentered_case4 .box1 .case2 div dl:not(:last-child) {margin-right:12px;} .sCscentered_case4 .box1 .case2 div dl dt {font-size:0.87em;} .sCscentered_case4 .box1 .case2 div dl dd {font-size:0.87em;} .sCscentered_case4 .box1 .case2 ul li {width:calc(25% - 3.75px); line-height:35px; border-radius:18px; font-size:0.87em; margin-right:5px;} .sCscentered_case4 .box1 .case2 ul li:nth-child(4) ~ li {margin-top:5px;} .sCscentered_case4 .box2 > div {margin-right:24px;} .sCscentered_case4 .box2 > div img {height:250px;} } @media screen and (max-width:767px){ .sCscentered .tit {font-size:1.2em;} .sCscentered_case1 .top_box {height:200px; border-radius:10px;} .sCscentered_case1 .top_box dl dt {font-size:1.47em;} .sCscentered_case1 .top_box dl dd {font-size:0.93em; margin-top:20px;} .sCscentered_case2 > div {width:360px; height:770px; background-image:url(../images/sCscentered_img2_mo.png); margin:30px auto 0; left:-20px;} .sCscentered_case2 ul li {width:153px; height:153px; font-size:1.07em;} .sCscentered_case2 ul li:nth-child(1) {left:40px; top:10px;} .sCscentered_case2 ul li:nth-child(2) {left:40px; top:280px; right:auto; transform:translateX(0);} .sCscentered_case2 ul li:nth-child(3) {left:40px; top:550px;} .sCscentered_case2 dl {width:163px;} .sCscentered_case2 dl dt {font-size:1.07em; } .sCscentered_case2 dl dd {font-size:0.93em;} .sCscentered_case2 dl:nth-child(1) {left:35px; top:195px;} .sCscentered_case2 dl:nth-child(2) {left:35px; top:470px; right:auto;} .sCscentered_case2 dl:nth-child(3) {right:-15px; top:270px; left:auto; transform:translateX(0)} .sCscentered_case3 ul {display:block;} .sCscentered_case3 ul li {display:flex; align-items:center; width:100%; margin-right:0; margin-bottom:60px;} .sCscentered_case3 ul li:last-child {margin-bottom:0;} .sCscentered_case3 ul li:not(:first-child):before {width:36px; height:36px; background-size:36px 36px; left:76px; top:auto; top:-48px; transform:translateX(-50%) rotate(90deg)} .sCscentered_case3 ul li p {width:152px; height:152px; font-size:1.2em;} .sCscentered_case3 ul li span {width:calc(100% - 152px); font-size:0.93em;} .sCscentered_case4 {margin-top:100px;} .sCscentered_case4 .sub_top_box {margin-bottom:0;} .sCscentered_case4 .tit {margin-top:40px;} .sCscentered_case4 .txt {font-size:0.93em; margin-top:5px} .sCscentered_case4 .box1 {flex-wrap:wrap; width:100%; max-width:302px; margin:40px auto 0;} .sCscentered_case4 .box1 > div {border-radius:50px; box-shadow:0 20px 20px rgba(12,17,27,0.15)} .sCscentered_case4 .box1 .icon {width:65px; height:65px;} .sCscentered_case4 .box1 .case1, .sCscentered_case4 .box1 .case3 {width:100%; height:185px; font-size:1.2em;} .sCscentered_case4 .box1 .case1:after {width:40px; height:29px; right:auto; left:50%; top:100%; transform:translate(-50%, 0) rotate(90deg)} .sCscentered_case4 .box1 .case2 {width:100%; max-width:100%; height:auto; margin:40px 0; padding:50px 20px;} .sCscentered_case4 .box1 .case2:after {width:40px; height:29px; right:auto; left:50%; top:100%; transform:translate(-50%, 0) rotate(90deg)} .sCscentered_case4 .box1 .case2 .tit1 {width:100%; font-size:2.67em; margin:0 0 15px 0;} .sCscentered_case4 .box1 .case2 div dl {margin-right:0;} .sCscentered_case4 .box1 .case2 div dl dt {font-size:0.93em;} .sCscentered_case4 .box1 .case2 div dl dd {font-size:0.93em;} .sCscentered_case4 .box1 .case2 ul li {width:calc(50% - 5px); line-height:52px; border-radius:26px; font-size:1.067em; margin-right:10px;} .sCscentered_case4 .box1 .case2 ul li:nth-child(even) {margin-right:0;} .sCscentered_case4 .box1 .case2 ul li:nth-child(2) ~ li {margin-top:10px;} .sCscentered_case4 .box2 {margin:5px 0 10px;} .sCscentered_case4 .box2 > div {margin-right:10px;} .sCscentered_case4 .box2 > div img {height:120px;} } .sReport_case1 {width:100%; padding-right:500px; position:relative; margin-bottom:60px; padding-bottom:70px; border-bottom:1px solid #000;} .sReport_case1 dl dt {font-size:1.5em; font-weight:600; margin-bottom:20px;} .sReport_case1 dl dd {font-size:1em; line-height:1.6em;} .sReport_case1 .img_box {position:absolute; right:0; bottom:70px; border-radius:20px; box-shadow:0 10px 20px rgba(12,17,27,0.12); overflow:hidden;} .sReport_case1 .img_box img {max-width:100%;} @media screen and (max-width:1024px){ .sReport_case1 {padding-right:280px; margin-bottom:50px; padding-bottom:50px;} .sReport_case1 dl dt {font-size:1.33em; margin-bottom:15px;} .sReport_case1 dl dd {font-size:1em;} .sReport_case1 .img_box {width:235px; bottom:50px;} } @media screen and (max-width:767px){ .sReport_case1 {padding-right:0; margin-top:-50px; padding-bottom:40px;} .sReport_case1 dl dt {font-size:1.2em;} .sReport_case1 dl dd {font-size:0.93em;} .sReport_case1 .img_box {width:225px; box-shadow:0 10px 15px rgba(12,17,27,0.08); position:relative; bottom:0; margin-bottom:40px;margin-top: 20px;} } .sRightpeople_case1 {width:100%; height:100vh; overflow:hidden;} .sRightpeople_case1 .txt_box {position:relative; z-index:10; transition:transform 1.5s} .sRightpeople_case1 .txt_box > div {display:flex; justify-content:center; align-items:center; height:100vh; position:relative; width:100%; height:100vh;} .sRightpeople_case1 h3 {font-size:3.75em; line-height:1.33em; font-weight:800; font-family:'Noto Sans SC'; margin-top:-300px; position:relative; z-index:5; transition:all 0.6s; transition-property:color, margin;} .sRightpeople_case1 .txt {font-size:3.25em; line-height:1.53em; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sRightpeople_case1 .img_box {width:694px; height:315px; border-radius:30px; box-shadow:0 40px 40px rgba(12,17,27,0.15); background:url(../images/sRightpeople_img1.jpg) no-repeat center center; background-size:cover; position:absolute; left:50%; top:50%; transform:translate(-50%, 0); overflow:hidden; /*transition:all 1s; transition-property:width, height, left, top, transform, border-radius;*//*transition:width 0.8s 1s, height 1s, top 1s, left 0.8s 1s, transform 0.8s 1s, border-radius 0.5s, box-shadow 0.5s;*/transition:all 0.8s;} .sRightpeople_case1 .bar {position:absolute; left:50%; bottom:20px; width:1px; height:80px; background:#000; transition:background 0.5s} .sRightpeople_case1 .bar:before {content:''; display:block; width:15px; height:15px; border-radius:50%; border:4px solid #fff; background:#000; position:absolute; left:50%; top:-10px; transform:translateX(-50%) scale(0.5); transition:background 0.5s; animation:sCompany_bar 1s infinite alternate cubic-bezier(0.42, 0.0, 1.0, 1.0);} .sRightpeople_case1.active .txt_box {transform:translateY(-50%); padding-left:20px; padding-right:20px;} .sRightpeople_case1.active .img_box {width:100%; height:100%; top:0; box-shadow:none; border-radius:0; /*transition:width 0.8s, height 1s 0.8s, top 1s 0.8s, border-radius 0.5s 0.8s, box-shadow 0.5s 0.8s, position 0s 0.8s;*/ transition-timing-function:ease-in-out;} .sRightpeople_case1.active .bar {background:#fff;} .sRightpeople_case1.active .bar:before {border-color:#2d4233; background:#fff;} .sRightpeople_case2 {min-height:2354px; padding:250px 0 408px; position:relative;} .sRightpeople_case2 .s-inner2 {position:relative; z-index:10;} .sRightpeople_case2 .tit {font-size:3.25em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sRightpeople_case2 dl:nth-of-type(1) {margin-top:350px;} .sRightpeople_case2 dl:nth-of-type(2) {margin-top:320px;} .sRightpeople_case2 dl:nth-of-type(3) {margin-top:340px;} .sRightpeople_case2 dl:nth-child(even) {padding-left:715px;} .sRightpeople_case2 dl dt {font-size:3em; line-height:1.3em; font-weight:600; font-family:'Noto Sans SC';} .sRightpeople_case2 dl dd.txt1 {font-size:1.75em; color:#b8cf22; letter-spacing:0; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC'; margin-top:30px;} .sRightpeople_case2 dl dd.txt2 {font-size:1.125em; line-height:1.6em; margin-top:15px;} #rightpeople_lottie {width:3000px; position:absolute; left:50%; top:20px; transform:translateX(-50%); z-index:0;} #rightpeople_lottie_tab {width:767px; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:0; display:none;} #rightpeople_lottie_mo {width:600px; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:0; display:none;} @media screen and (max-width:1220px){ .sRightpeople_case2 dl:nth-child(even) {padding-left:50%;} } @media screen and (max-width:1024px){ .sRightpeople_case1 h3 {font-size:2.53em; line-height:1.68em;} .sRightpeople_case1 .txt {font-size:2.27em; line-height:1.64em;} .sRightpeople_case1 .img_box {width:688px; height:310px;} .sRightpeople_case2 {min-height:1550px; padding:160px 0 265px} .sRightpeople_case2 .tit {font-size:2.33em;} .sRightpeople_case2 dl:nth-of-type(1) {margin-top:220px;} .sRightpeople_case2 dl:nth-of-type(2) {margin-top:210px;} .sRightpeople_case2 dl:nth-of-type(3) {margin-top:210px;} .sRightpeople_case2 dl:nth-child(even) {padding-left:50%;} .sRightpeople_case2 dl dt {font-size:2.13em;} .sRightpeople_case2 dl dd.txt1 {font-size:1.33em; margin-top:15px;} .sRightpeople_case2 dl dd.txt2 {font-size:1em; margin-top:10px;} #rightpeople_lottie {display:none;} #rightpeople_lottie_tab {display:block;} } @media screen and (max-width:767px){ .sRightpeople_case1 h3 {font-size:1.73em;} .sRightpeople_case1 .txt {font-size:1.73em;} .sRightpeople_case1 .img_box {width:320px; height:200px;} .sRightpeople_case2 {min-height:1684px; padding:100px 0 170px} .sRightpeople_case2 .tit {font-size:1.73em;} .sRightpeople_case2 dl {text-align:center;} .sRightpeople_case2 dl:nth-of-type(1) {margin-top:360px;} .sRightpeople_case2 dl:nth-of-type(2) {margin-top:340px;} .sRightpeople_case2 dl:nth-of-type(3) {margin-top:355px;} .sRightpeople_case2 dl:nth-child(even) {padding-left:0;} .sRightpeople_case2 dl dt {font-size:1.73em;} .sRightpeople_case2 dl dd.txt1 {font-size:1.2em; margin-top:10px;} .sRightpeople_case2 dl dd.txt2 {font-size:0.93em; margin-top:5px;} #rightpeople_lottie_tab {display:none;} #rightpeople_lottie_mo {display:block;} } #personnelmanagement_lottie {width:3000px; position:absolute; left:50%; top:-56px; transform:translateX(-50%); z-index:0;} #personnelmanagement_lottie_tab {width:1024px; position:absolute; left:50%; top:290px; transform:translateX(-50%); z-index:0; display:none} #personnelmanagement_lottie_mo {width:600px; position:absolute; left:50%; top:135px; transform:translateX(-50%); z-index:0; display:none} #personnelmanagement2_lottie {width:3000px; position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:0;} #personnelmanagement2_lottie_mo {width:600px; position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:0; display:none;} .sPersonnelmanagement .sub_tab {position:fixed; left:20px; top:50vh; transform:translateY(-50%); z-index:20;} .sPersonnelmanagement .sub_tab li {padding-left:11px; position:relative; margin-bottom:20px;} .sPersonnelmanagement .sub_tab li:last-child {margin-bottom:0;} .sPersonnelmanagement .sub_tab li a {font-size:1em;} .sPersonnelmanagement .sub_tab li.on:before {content:''; display:block; width:5px; height:5px; border-radius:50%; background:#000; position:absolute; left:0; top:7px;} .sPersonnelmanagement .sub_tab li.on a {font-weight:600;} .sPersonnelmanagement h3 {font-size:3.75em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sPersonnelmanagement .tit_case1 {text-align:center;} .sPersonnelmanagement .tit_case1 .num {display:inline-block; width:56px; height:42px; line-height:40px; border-radius:21px 21px 21px 0; background:#000; font-size:1.5em; color:#fff; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:20px;} .sPersonnelmanagement .tit_case1 h4 {font-size:3.25em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'} .sPersonnelmanagement .txt_case1 dt {font-size:2.25em; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC';} .sPersonnelmanagement .txt_case1 dd {font-size:1.125em; line-height:1.8em; margin-top:15px;} .sPersonnelmanagement_wrap1 {padding-top:120px; position:relative;} .sPersonnelmanagement_case1 {margin:190px 0 0;} .sPersonnelmanagement_case1 dl:nth-of-type(2) {margin-top:260px; padding-left:610px;} .sPersonnelmanagement_case2 {padding-top:240px} .sPersonnelmanagement_case2 .txt_case1 {width:100%; text-align:center;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(1) {margin-top:120px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(2) {margin-top:190px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(3) {margin-top:200px;} .sPersonnelmanagement_case2 .box1 {display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; width:100%; text-align:center; padding-top:150px;} .sPersonnelmanagement_case2 .box1 > div {position:relative; padding-bottom:80px;} .sPersonnelmanagement_case2 .box1 > div.case1 {width:calc(100% - 408px);} .sPersonnelmanagement_case2 .box1 > div.case2 {width:384px;} .sPersonnelmanagement_case2 .box1 .tit {width:100%; font-size:2em; line-height:1.4em; font-weight:600; font-family:'Noto Sans SC'; position:absolute; left:0; bottom:0; z-index:10;} .sPersonnelmanagement_case2 .box1 ul li {display:flex; justify-content:center; align-items:center; font-size:1.5em; color:#fff; line-height:1.25em; font-weight:600; font-family:'Noto Sans SC'; box-shadow:0 40px 40px rgba(12,17,27,0.15)} .sPersonnelmanagement_case2 .box1 .case1 .txt1 {font-size:1.25em; color:#aaa; line-height:1.4em; position:absolute; right:0; bottom:10px; transform:translateX(30%)} .sPersonnelmanagement_case2 .box1 .case1 ul {display:flex; align-items:flex-end;} .sPersonnelmanagement_case2 .box1 .case1 li {background:rgba(18,181,110,0.76); object-fit:contain; position:relative; padding-top:10px;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(1) {width:198px; height:97px; border-radius:97px 97px 0 0;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(2) {width:297px; height:147px; border-radius:147px 147px 0 0; margin:0 -75px 0 -55px;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(3) {width:427px; height:214px; border-radius:214px 214px 0 0;} .sPersonnelmanagement_case2 .box1 .case1 li span {width:100%; font-size:1em; color:#34ab81; position:absolute; left:0; top:-50px;} .sPersonnelmanagement_case2 .box1 .case2 li {width:100%; height:190px; border-radius:190px 190px 0 0; background:#d7d656; padding-top:20px;} .sPersonnelmanagement_case2 .box2 {display:flex; justify-content:center; width:100%; padding:30px 0; margin-top:100px;} .sPersonnelmanagement_case2 .box2 dl {width:342px; height:342px; text-align:center; padding-top:120px; position:relative;} .sPersonnelmanagement_case2 .box2 dl:nth-child(1) ~ dl {color:#fff;} .sPersonnelmanagement_case2 .box2 dl:not(:first-child):after {content:''; display:block; width:34px; height:34px; background:url(../images/icon_plus.svg) no-repeat center center; background-size:34px 34px; position:absolute; left:-15px; top:50%; transform:translateY(-50%)} .sPersonnelmanagement_case2 .box2 dl:before {content:''; display:block; width:100%; height:100%; box-shadow:0 40px 40px rgba(12,17,27,0.15); border-radius:100px; position:absolute; left:0; top:0; z-index:0; transform:rotate(45deg);} .sPersonnelmanagement_case2 .box2 dl:nth-child(1):before {border:2px solid #eee; background:#fff;} .sPersonnelmanagement_case2 .box2 dl:nth-child(2):before {background:#333;} .sPersonnelmanagement_case2 .box2 dl:nth-child(3):before {background:#5aa4f7;} .sPersonnelmanagement_case2 .box2 dl dt {font-size:1.75em; font-weight:600; font-family:'Noto Sans SC'; position:relative; z-index:5;} .sPersonnelmanagement_case2 .box2 dl dd {font-size:1.125em; line-height:1.7em; margin-top:20px; position:relative; z-index:5;} .sPersonnelmanagement_case2 .box3 {width:1055px; height:608px; background:url(../images/sPersonnelmanagement_img1.png) no-repeat center center; background-size:1055px 608px; position:relative; margin:80px auto 0;} .sPersonnelmanagement_case2 .box3 li, .sPersonnelmanagement_case2 .box3 p {font-size:1.75em; color:#fff; line-height:1.42em; font-weight:600; font-family:'Noto Sans SC'; text-align:center; position:absolute;} .sPersonnelmanagement_case2 .box3 li:nth-child(1) {left:97px; top:95px;} .sPersonnelmanagement_case2 .box3 li:nth-child(2) {left:429px; top:241px;} .sPersonnelmanagement_case2 .box3 li:nth-child(3) {left:166px; top:403px;} .sPersonnelmanagement_case2 .box3 p {left:814px; top:261px;} .sPersonnelmanagement_case3 {padding-top:240px} .sPersonnelmanagement_case3 .txt_case1 {width:100%; text-align:center} .sPersonnelmanagement_case3 .txt_case1:nth-of-type(1) {margin-top:120px;} .sPersonnelmanagement_case3 .txt_case1:nth-of-type(2) {margin-top:200px;} .sPersonnelmanagement_case3 .box1 {width:100%; overflow:hidden; margin-top:100px;} .sPersonnelmanagement_case3 .box1 dl {float:left; width:calc(25% - 18px); margin-right:24px; padding-top:30px; border-top:2px solid #000;} .sPersonnelmanagement_case3 .box1 dl:last-child {margin-right:0;} .sPersonnelmanagement_case3 .box1 dl dt {font-size:1.75em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'} .sPersonnelmanagement_case3 .box1 dl dd {font-size:1.125em; line-height:1.7em; margin-top:15px;} .sPersonnelmanagement_case3 .box2 {width:871px; height:300px; background:url(../images/sPersonnelmanagement_img2.png) no-repeat center top; background-size:100% auto; margin:100px auto 0; text-align:center; position:relative;} .sPersonnelmanagement_case3 .box2 p {font-size:1.75em; color:#fff; line-height:1.3em; font-weight:800; font-family:'Noto Sans SC'; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)} .sPersonnelmanagement_case3 .box2 ul {display:flex; justify-content:space-between; align-items:center; width:100%; height:100%; padding:0 40px;} .sPersonnelmanagement_case3 .box2 ul li {width:180px; font-size:1.75em; color:#fff; font-weight:800; font-family:'Noto Sans SC';} .sPersonnelmanagement_case3 .box3 {width:100%; max-width:996px; height:120px; background:#fff; border-radius:30px; box-shadow:0 40px 40px rgba(12,17,27,0.15); margin:50px auto 0;} .sPersonnelmanagement_case3 .box3 ul {display:flex; justify-content:center; align-items:center; width:100%; height:100%;} .sPersonnelmanagement_case3 .box3 ul li {font-size:1.625em; font-weight:800; font-family:'Noto Sans SC'; margin-right:110px;} .sPersonnelmanagement_case3 .box3 ul li:last-child {margin-right:0;} .sPersonnelmanagement_case3 .box3 ul li:before {content:''; display:inline-block; width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:cover; vertical-align:middle; margin-right:10px;} .sPersonnelmanagement_case3 .box3 ul li:nth-child(1):before {background-image:url(../images/sPersonnelmanagement_icon1.png)} .sPersonnelmanagement_case3 .box3 ul li:nth-child(2):before {background-image:url(../images/sPersonnelmanagement_icon2.png)} .sPersonnelmanagement_case3 .box3 ul li:nth-child(3):before {background-image:url(../images/sPersonnelmanagement_icon3.png)} .sPersonnelmanagement_case4 {padding-top:200px; padding-bottom:150px;} .sPersonnelmanagement_case4 .box1 {width:100%; margin-top:80px;} .sPersonnelmanagement_case4 .box1:after {content:''; display:block; width:100%; clear:both;} .sPersonnelmanagement_case4 .box1 dl {float:left; width:calc(33.33% - 16px); height:260px; background:#fff; border-radius:30px; box-shadow:0 40px 40px rgba(12,17,27,0.15); padding:50px 0 0 100px; position:relative; margin-left:24px;} .sPersonnelmanagement_case4 .box1 dl:first-child {margin-left:0;} .sPersonnelmanagement_case4 .box1 dl:last-child {float:right; margin-top:24px;} .sPersonnelmanagement_case4 .box1 dl:before {content:''; display:block; width:42px; height:42px; background-repeat:no-repeat; background-position:center center; background-size:contain; position:absolute; left:40px; top:50px;} .sPersonnelmanagement_case4 .box1 dl:nth-child(1):before {background-image:url(../images/sPersonnelmanagement_icon4.png);} .sPersonnelmanagement_case4 .box1 dl:nth-child(2):before {background-image:url(../images/sPersonnelmanagement_icon5.png);} .sPersonnelmanagement_case4 .box1 dl:nth-child(3):before {background-image:url(../images/sPersonnelmanagement_icon6.png);} .sPersonnelmanagement_case4 .box1 dl:nth-child(4):before {background-image:url(../images/sPersonnelmanagement_icon7.png);} .sPersonnelmanagement_case4 .box1 dl dt {font-size:1.81em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'} .sPersonnelmanagement_case4 .box1 dl dd {font-size:1em; line-height:1.8em; margin-top:20px;} @media screen and (max-width:1220px){ .sPersonnelmanagement_case1 dl:nth-of-type(2) {padding-left:50%;} .sPersonnelmanagement_case2 .box1 > div.case1 {width:calc(68% - 20px);} .sPersonnelmanagement_case2 .box1 > div.case2 {width:32%;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(1) {width:25%;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(2) {width:37%; margin:0 -10% 0 -6%} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(3) {width:54%;} .sPersonnelmanagement_case2 .box2 dl {width:30vw; height:30vw; padding-top:9vw;} .sPersonnelmanagement_case2 .box3 {width:1000px; height:576px; background-size:1000px 576px;} .sPersonnelmanagement_case2 .box3 li:nth-child(1) {left:92px; top:85px;} .sPersonnelmanagement_case2 .box3 li:nth-child(2) {left:408px; top:227px;} .sPersonnelmanagement_case2 .box3 li:nth-child(3) {left:159px; top:379px;} .sPersonnelmanagement_case2 .box3 p {left:767px; top:241px;} } @media screen and (max-width:1024px){ #personnelmanagement_lottie {display:none;} #personnelmanagement_lottie_tab {display:block;} #personnelmanagement2_lottie {width:1900px;} .sPersonnelmanagement .sub_tab {display:flex; justify-content:center; width:100%; height:70px; border-bottom:1px solid #eee; background:#fff; position:fixed; left:0; top:90px; transform:translate(0);} .sPersonnelmanagement .sub_tab li {padding-left:0; margin:0 25px;} .sPersonnelmanagement .sub_tab li a {font-size:1.33em; color:#aaa; line-height:70px;} .sPersonnelmanagement .sub_tab li.on:before {width:100%; height:3px; border-radius:1px; top:auto; bottom:0;} .sPersonnelmanagement .sub_tab li.on a {color:#000;} .sPersonnelmanagement .sub_tab.scroll_on {position:fixed;} .sPersonnelmanagement h3 {font-size:2.93em;} .sPersonnelmanagement .tit_case1 .num {font-size:1.6em;} .sPersonnelmanagement .tit_case1 h4 {font-size:2.4em;} .sPersonnelmanagement .txt_case1 dt {font-size:1.73em;} .sPersonnelmanagement .txt_case1 dd {font-size:1em; margin-top:10px;} .sPersonnelmanagement_wrap1 {padding-top:170px;} .sPersonnelmanagement_case1 {margin:120px 0 0;} .sPersonnelmanagement_case1 dl:nth-of-type(2) {margin-top:150px; padding-left:50%;} .sPersonnelmanagement_case2 {padding-top:200px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(1) {margin-top:100px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(2) {margin-top:140px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(3) {margin-top:150px;} .sPersonnelmanagement_case2 .box1 {max-width:720px; padding-top:90px; margin:0 auto; position:relative;} .sPersonnelmanagement_case2 .box1:before {content:''; display:block; width:100vw; height:2px; background:#000; position:absolute; left:50%; bottom:48px; transform:translateX(-50%)} .sPersonnelmanagement_case2 .box1 .tit {font-size:1.2em;} .sPersonnelmanagement_case2 .box1 > div {padding-bottom:50px;} .sPersonnelmanagement_case2 .box1 ul li {font-size:1em; box-shadow:0 20px 20px rgba(12,17,27,0.15)} .sPersonnelmanagement_case2 .box1 .case1 .txt1 {font-size:1em; bottom:3px;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(1) {height:57px; border-radius:57px 57px 0 0;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(2) {height:86px; border-radius:86px 86px 0 0;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(3) {height:124px; border-radius:124px 124px 0 0;} .sPersonnelmanagement_case2 .box1 .case1 li span {top:-25px;} .sPersonnelmanagement_case2 .box1 .case2 li {height:110px; border-radius:110px 110px 0 0;} .sPersonnelmanagement_case2 .box2 {margin-top:60px;} .sPersonnelmanagement_case2 .box2 dl {max-width:260px; max-height:260px; padding-top:10%;} .sPersonnelmanagement_case2 .box2 dl:not(:first-child):after {width:27px; height:27px; background-size:27px 27px; left:-5px;} .sPersonnelmanagement_case2 .box2 dl:before {border-radius:75px;} .sPersonnelmanagement_case2 .box2 dl dt {font-size:1.7em;} .sPersonnelmanagement_case2 .box2 dl dd {font-size:1em; margin-top:10px;} .sPersonnelmanagement_case2 .box3 {width:709px; height:402px; background-size:709px 402px; margin-top:60px;} .sPersonnelmanagement_case2 .box3 li, .sPersonnelmanagement_case2 .box3 p {font-size:1.33em;} .sPersonnelmanagement_case2 .box3 li:nth-child(1) {left:62px; top:59px;} .sPersonnelmanagement_case2 .box3 li:nth-child(2) {left:285px; top:157px;} .sPersonnelmanagement_case2 .box3 li:nth-child(3) {left:109px; top:261px;} .sPersonnelmanagement_case2 .box3 p {left:541px; top:168px;} .sPersonnelmanagement_case3 {padding-top:180px} .sPersonnelmanagement_case3 .txt_case1:nth-of-type(1) {margin-top:100px;} .sPersonnelmanagement_case3 .txt_case1:nth-of-type(2) {margin-top:150px;} .sPersonnelmanagement_case3 .box1 {margin-top:60px;} .sPersonnelmanagement_case3 .box1 dl {width:calc(25% - 15px); margin-right:20px; padding-top:20px;} .sPersonnelmanagement_case3 .box1 dl dt {font-size:1.6em;} .sPersonnelmanagement_case3 .box1 dl dd {font-size:1em; margin-top:10px;} .sPersonnelmanagement_case3 .box2 {width:100%; height:31vw; max-width:767px; max-height:270px; margin-top:60px;} .sPersonnelmanagement_case3 .box2 p {font-size:1.67em;} .sPersonnelmanagement_case3 .box2 ul {padding:0 25px;} .sPersonnelmanagement_case3 .box2 ul li {font-size:1.67em;} .sPersonnelmanagement_case3 .box3 {max-width:688px; height:82px; border-radius:20px; box-shadow:0 25px 25px rgba(12,17,27,0.15); margin-top:40px;} .sPersonnelmanagement_case3 .box3 ul li {width:auto; font-size:1.2em; margin-right:65px; } .sPersonnelmanagement_case3 .box3 ul li:before {width:29px; height:29px;} .sPersonnelmanagement_case4 {width:100%; padding-bottom:100px;} .sPersonnelmanagement_case4 .box1 dl {width:calc(33.33% - 13.33px); height:190px; box-shadow:0 20px 20px rgba(12,17,27,0.15); margin-left:20px; padding:30px 0 0 58px;} .sPersonnelmanagement_case4 .box1 dl:last-child {margin-top:20px;} .sPersonnelmanagement_case4 .box1 dl:before {width:32px; height:32px; left:16px; top:23px;} .sPersonnelmanagement_case4 .box1 dl dt {font-size:1.33em;} .sPersonnelmanagement_case4 .box1 dl dd {line-height:1.7em; margin-top:10px;} } @media screen and (max-width:850px){ .sPersonnelmanagement_case3 .box2 ul {padding:0 2.5%;} } @media screen and (max-width:767px){ #personnelmanagement_lottie_tab {display:none;} #personnelmanagement_lottie_mo {display:block;} #personnelmanagement2_lottie {display:none;} #personnelmanagement2_lottie_mo {display:block;} .sPersonnelmanagement .sub_tab {height:50px; top:60px;} .sPersonnelmanagement .sub_tab li {margin:0 15px;} .sPersonnelmanagement .sub_tab li a {font-size:0.8em; line-height:50px;} .sPersonnelmanagement .sub_tab li.on:before {height:2px;} .sPersonnelmanagement h3 {font-size:2.4em;} .sPersonnelmanagement .tit_case1 .num {width:42px; height:29px; line-height:27px; border-radius:15px 15px 15px 0; font-size:1.2em; margin-bottom:10px;} .sPersonnelmanagement .tit_case1 h4 {font-size:2em;} .sPersonnelmanagement .txt_case1 dt {font-size:1.47em;} .sPersonnelmanagement .txt_case1 dd {height:9em; font-size:0.93em;} .sPersonnelmanagement_wrap1 {padding-top:130px;} .sPersonnelmanagement_case1 {margin:280px 0 0;} .sPersonnelmanagement_case1 dl:nth-of-type(2) {margin-top:230px; padding-left:0;} .sPersonnelmanagement_case2 {padding-top:120px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(1) {margin-top:80px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(2) {margin-top:100px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(3) {margin-top:100px;} .sPersonnelmanagement_case2 .box1 {max-width:320px; justify-content:center; padding-top:51px;} .sPersonnelmanagement_case2 .box1:before {display:none;} .sPersonnelmanagement_case2 .box1 > div.case1 {width:100%;} .sPersonnelmanagement_case2 .box1 > div.case2 {width:243px; margin-top:25px;} .sPersonnelmanagement_case2 .box1 .tit {font-size:1.07em;} .sPersonnelmanagement_case2 .box1 > div {padding-bottom:40px;} .sPersonnelmanagement_case2 .box1 ul {border-bottom:2px solid #000;} .sPersonnelmanagement_case2 .box1 ul li {font-size:0.93em; box-shadow:0 10px 15px rgba(12,17,27,0.15)} .sPersonnelmanagement_case2 .box1 .case1 .txt1 {display:block; font-size:0.86em; bottom:auto; top:100%; transform:translateX(0);} .sPersonnelmanagement_case2 .box1 .case1 li {padding-top:5px;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(1) {width:26%; height:43px; border-radius:43px 43px 0 0;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(2) {width:40%; height:65px; border-radius:65px 65px 0 0;} .sPersonnelmanagement_case2 .box1 .case1 li:nth-child(3) {width:50%; height:82px; border-radius:82px 82px 0 0;} .sPersonnelmanagement_case2 .box1 .case2 li {height:122px; border-radius:122px 122px 0 0;} .sPersonnelmanagement_case2 .box2 {display:block; margin-top:30px;} .sPersonnelmanagement_case2 .box2 dl {width:180px; height:180px; max-width:100%; max-height:100%; padding-top:50px; margin:0 auto;} .sPersonnelmanagement_case2 .box2 dl:not(:first-child):after {width:13px; height:13px; background-size:13px 13px; left:50%; top:-10px; transform:translateX(-50%)} .sPersonnelmanagement_case2 .box2 dl:before {border-radius:40px; box-shadow:0 10px 15px rgba(12,17,27,0.15)} .sPersonnelmanagement_case2 .box2 dl dt {font-size:1.07em;} .sPersonnelmanagement_case2 .box2 dl dd {font-size:0.93em;} .sPersonnelmanagement_case2 .box3 {width:346px; height:559px; background-image:url(../images/sPersonnelmanagement_img1_mo.png); background-size:contain; margin-top:30px;} .sPersonnelmanagement_case2 .box3 li, .sPersonnelmanagement_case2 .box3 p {font-size:1.2em;} .sPersonnelmanagement_case2 .box3 li:nth-child(1) {left:46px; top:47px;} .sPersonnelmanagement_case2 .box3 li:nth-child(2) {left:232px; top:128px;} .sPersonnelmanagement_case2 .box3 li:nth-child(3) {left:85px; top:216px;} .sPersonnelmanagement_case2 .box3 p {left:110px; top:437px;} .sPersonnelmanagement_case3 {padding-top:100px} .sPersonnelmanagement_case3 .txt_case1:nth-of-type(1) {margin-top:80px;} .sPersonnelmanagement_case3 .txt_case1:nth-of-type(2) {margin-top:100px;} .sPersonnelmanagement_case3 .box1 {margin-top:40px;} .sPersonnelmanagement_case3 .box1 dl {width:calc(50% - 8px); margin-right:16px; padding-top:20px;} .sPersonnelmanagement_case3 .box1 dl:nth-child(even) {margin-right:0;} .sPersonnelmanagement_case3 .box1 dl:nth-child(2) ~ dl {margin-top:40px;} .sPersonnelmanagement_case3 .box1 dl:nth-child(even) + dl {clear:both;} .sPersonnelmanagement_case3 .box1 dl dt {font-size:1.2em;} .sPersonnelmanagement_case3 .box1 dl dd {font-size:0.93em;} .sPersonnelmanagement_case3 .box2 {width:360px; height:130px; background-size:360px auto; margin-top:30px; margin-left:-20px;} .sPersonnelmanagement_case3 .box2 p {font-size:0.93em;} .sPersonnelmanagement_case3 .box2 ul {width:320px; padding:0; margin:0 auto 0;} .sPersonnelmanagement_case3 .box2 ul li {width:64px; font-size:0.93em;} .sPersonnelmanagement_case3 .box3 {width:174px; height:auto; border-radius:30px; box-shadow:0 20px 20px rgba(12,17,27,0.15); padding:20px 0; margin-top:30px;} .sPersonnelmanagement_case3 .box3 ul {display:block; text-align:center;} .sPersonnelmanagement_case3 .box3 ul li {font-size:0.93em; margin-right:0; margin-bottom:15px;} .sPersonnelmanagement_case3 .box3 ul li:last-child {margin-bottom:0;} .sPersonnelmanagement_case3 .box3 ul li:before {width:20px; height:20px; margin-right:5px;} .sPersonnelmanagement_case4 {padding-top:120px; padding-bottom:210px;} .sPersonnelmanagement_case4 .box1 {margin-top:80px;} .sPersonnelmanagement_case4 .box1 dl {width:calc(50% - 8px); height:155px; padding:20px 0 0 20px; margin-left:16px;} .sPersonnelmanagement_case4 .box1 dl:nth-child(odd) {margin-left:0;} .sPersonnelmanagement_case4 .box1 dl:nth-child(2) ~ dl {margin-toP:16px;} .sPersonnelmanagement_case4 .box1 dl:before {width:21px; height:21px; left:20px; top:18px;} .sPersonnelmanagement_case4 .box1 dl dt {font-size:0.93em; padding-left:30px;} .sPersonnelmanagement_case4 .box1 dl dd {font-size:0.8em; margin-top:10px;} } @media screen and (max-width:499px){ .sPersonnelmanagement_case2 {padding-top:72px;} .sPersonnelmanagement_case2 .txt_case1:nth-of-type(1) {margin-top:60px;} } .sRecruitment_case1 {width:100%; height:100vh; overflow:hidden;} .sRecruitment_case1 .txt_box {position:relative; z-index:10; transition:transform 1.5s} .sRecruitment_case1 .txt_box > div {display:flex; justify-content:center; align-items:center; flex-direction:column; height:100vh; position:relative; width:100%; height:100vh;} .sRecruitment_case1 h3 {font-size:3.75em; line-height:1.33em; font-weight:800; font-family:'Noto Sans SC'; margin-top:-300px; position:relative; z-index:5; transition:all 0.6s; transition-property:color, margin;} .sRecruitment_case1 .txt {font-size:3.25em; color:#fff; line-height:1.53em; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sRecruitment_case1 .btn_box {display:flex; justify-content:center; width:100%; margin-top:60px;} .sRecruitment_case1 .btn_box a {display:block; width:255px; line-height:78px; background:#1bbe77; border-radius:39px; text-align:center; margin-right:34px; font-size:1.5em; color:#fff; font-weight:600;} .sRecruitment_case1 .btn_box a:after {content:''; display:inline-block; width:23px; height:23px; background:url(../images/sRecruitment_icon1.svg) no-repeat center center; background-size:23px 23px; vertical-align:middle; margin-left:15px; position:relative; top:-3px;} .sRecruitment_case1 .btn_box a:last-child {background:#1ec2da; margin-right:0;} .sRecruitment_case1 .img_box {width:694px; height:315px; border-radius:30px; box-shadow:0 40px 40px rgba(12,17,27,0.15); background:url(../images/sRecruitment_img1.jpg) no-repeat center center; background-size:cover; position:absolute; left:50%; top:50%; transform:translate(-50%, 0); overflow:hidden; /*transition:all 1s; transition-property:width, height, left, top, transform, border-radius;*/transition:all 0.8s;} .sRecruitment_case1 .bar {position:absolute; left:50%; bottom:20px; width:1px; height:80px; background:#000; transition:background 0.5s} .sRecruitment_case1 .bar:before {content:''; display:block; width:15px; height:15px; border-radius:50%; border:4px solid #fff; background:#000; position:absolute; left:50%; top:-10px; transform:translateX(-50%) scale(0.5); transition:background 0.5s; animation:sCompany_bar 1s infinite alternate cubic-bezier(0.42, 0.0, 1.0, 1.0);} .sRecruitment_case1.active .txt_box {transform:translateY(-50%);} .sRecruitment_case1.active .img_box {width:100%; height:100%; top:0; box-shadow:none; border-radius:0; /*transition:width 0.8s, height 1s 0.8s, top 1s 0.8s, border-radius 0.5s 0.8s, box-shadow 0.5s 0.8s, position 0s 0.8s;*/ transition-timing-function:ease-in-out;} .sRecruitment_case1.active .bar {background:#fff;} .sRecruitment_case1.active .bar:before {border-color:#286693; background:#fff;} .sRecruitment_case2 {padding-top:150px;} .sRecruitment_case2 h4 {font-size:3.25em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:70px;} .sRecruitment_case2 .box > div {width:100%; display:flex; justify-content:left; align-items:center; width:100%; margin-bottom:75px;} .sRecruitment_case2 .box > div:last-child {margin-bottom:0;} .sRecruitment_case2 .box .tit {display:flex; justify-content:center; align-items:center; width:120px; min-height:52px; line-height:1.3em; border-radius:26px 26px 26px 0; text-align:center; font-size:1.625em; color:#fff; font-weight:800; font-family:'Noto Sans SC'; margin-right:84px; padding:10px 0} .sRecruitment_case2 .box ul {display:flex; justify-content:space-between; align-items:center; width:calc(100% - 204px); position:relative;} .sRecruitment_case2 .box ul:after {content:''; display:block; width:100%; height:3px; background:#ccc; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:0;} .sRecruitment_case2 .box ul li {display:flex; justify-content:center; align-items:center; width:180px; height:180px; border-radius:50%; font-size:1.625em; color:#fff; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'; text-align:center; position:relative; z-index:5;} .sRecruitment_case2 .box ul li span {display:block; width:100%; position:absolute; left:0; top:100%; margin-top:20px; font-size:0.61em; color:#666; line-height:1.5em; font-weight:400; font-family:'Noto Sans SC';} .sRecruitment_case2 .txt1 {margin-top:90px;} .sRecruitment_case2 .txt1 li {display:flex; font-size:1.125em; line-height:1.5em; margin-bottom:5px;} .sRecruitment_case2 .box > div:first-child .tit {background:#4fa5e2;} .sRecruitment_case2 .box > div:first-child ul li:nth-child(1) {background:#b2cfe4;} .sRecruitment_case2 .box > div:first-child ul li:nth-child(2) {background:#9bc3e0;} .sRecruitment_case2 .box > div:first-child ul li:nth-child(3) {background:#7bb6e0;} .sRecruitment_case2 .box > div:first-child ul li:nth-child(4) {background:#67aada;} .sRecruitment_case2 .box > div:first-child ul li:nth-child(5) {background:#4fa5e2;} .sRecruitment_case2 .box > div:last-child .tit {background:#f57b4c;} .sRecruitment_case2 .box > div:last-child ul li:nth-child(1) {background:#f4c1ad;} .sRecruitment_case2 .box > div:last-child ul li:nth-child(2) {background:#f6ac90;} .sRecruitment_case2 .box > div:last-child ul li:nth-child(3) {background:#f09572;} .sRecruitment_case2 .box > div:last-child ul li:nth-child(4) {background:#f5895f;} .sRecruitment_case2 .box > div:last-child ul li:nth-child(5) {background:#f57b4c;} .sRecruitment_case3 {padding:150px 0 220px; position:relative;} .sRecruitment_case3 .s-inner2 {position:relative; z-index:10;} .sRecruitment_case3 h4 {font-size:3.25em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:60px;} .sRecruitment_case3 .txt1 {font-size:1.125em; line-height:2em; margin-bottom:70px;} .sRecruitment_case3 ul {width:100%; overflow:hidden;} .sRecruitment_case3 ul li {float:left; width:calc(33.33% - 16px); margin-right:24px; border-top:2px solid #000; padding-top:30px;} .sRecruitment_case3 ul li:nth-child(3) ~ li {margin-top:120px;} .sRecruitment_case3 ul li dl dt {font-size:1.75em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC';} .sRecruitment_case3 ul li dl dd {font-size:1.125em; line-height:1.7em; margin-top:20px;} .sRecruitment_case4:after {content:''; display:block; width:100%; clear:both;} .sRecruitment_case4 > div {float:left; display:flex; align-items:center; width:calc(50% - 12px); height:160px; background:#1bbe77; border-radius:70px 10px 70px 10px; box-shadow:0 40px 40px rgba(12,17,27,0.15); padding:0 40px 0 50px;} .sRecruitment_case4 > div:last-child {float:right; background:#1ec2da;} .sRecruitment_case4 dl {width:calc(100% - 170px);} .sRecruitment_case4 dl dt {font-size:1.75em; color:#fff; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'} .sRecruitment_case4 dl dd {font-size:1.125em; color:#fff; line-height:1.7em; margin-top:10px;} .sRecruitment_case4 a {display:block; width:170px; line-height:52px; background:#000; border-radius:26px; text-align:center; font-size:1em; color:#fff; font-weight:600;} .sRecruitment_case4 a:after {content:''; display:inline-block; width:15px; height:15px; background:url(../images/sRecruitment_icon1.svg) no-repeat center center; background-size:15px 15px; vertical-align:middle; margin-left:10px; position:relative; top:-2px;} #recruitment_lottie {width:3000px; position:absolute; left:50%; bottom:-40px; transform:translateX(-50%); z-index:0;} #recruitment_lottie_tab {width:1024px; position:absolute; left:50%; bottom:70px; transform:translateX(-50%); z-index:0; display:none;} #recruitment_lottie_mo {width:600px; position:absolute; left:50%; bottom:15px; transform:translateX(-50%); z-index:0; display:none;} @media screen and (min-width:768px){ .sRecruitment_case3 ul li:nth-child(3n) {margin-right:0;} .sRecruitment_case3 ul li:nth-child(3n) + li {clear:both;} } @media screen and (max-width:1220px){ .sRecruitment_case2 .box ul li {width:13vw; height:13vw;} } @media screen and (max-width:1024px){ .sRecruitment_case1 h3 {font-size:2.53em; line-height:1.68em;} .sRecruitment_case1 .txt {font-size:2.27em; line-height:1.64em;} .sRecruitment_case1 .btn_box {margin-top:40px;} .sRecruitment_case1 .btn_box a {width:177px; line-height:54px; border-radius:27px; font-size:1.13em; margin-right:20px;} .sRecruitment_case1 .btn_box a:after {width:17px; height:16px; background-size:17px 16px; margin-left:10px;} .sRecruitment_case1 .img_box {width:688px; height:310px;} .sRecruitment_case2 {padding-top:100px;} .sRecruitment_case2 h4 {font-size:2.67em; margin-bottom:60px;} .sRecruitment_case2 .box > div {margin-bottom:60px;} .sRecruitment_case2 .box .tit {width:68px; min-height:31px; border-radius:16px 16px 16px 0; font-size:1em; margin-right:50px;} .sRecruitment_case2 .box ul {width:calc(100% - 118px);} .sRecruitment_case2 .box ul:after {height:2px;} .sRecruitment_case2 .box ul li {width:14vw; height:14vw; font-size:1em;} .sRecruitment_case2 .box ul li span {font-size:1em; margin-top:10px;} .sRecruitment_case2 .txt1 {margin-top:65px;} .sRecruitment_case2 .txt1 {font-size:1em;} .sRecruitment_case2 .txt1 li {font-size:0.999999em;} .sRecruitment_case3 {padding:100px 0 135px;} .sRecruitment_case3 h4 {font-size:2.67em; margin-bottom:40px;} .sRecruitment_case3 .txt1 {font-size:1em; line-height:1.87em; margin-bottom:60px;} .sRecruitment_case3 ul li {width:calc(33.33% - 13.33px); margin-right:20px; padding-top:20px;} .sRecruitment_case3 ul li:nth-child(3) ~ li {margin-top:80px;} .sRecruitment_case3 ul li dl dt {font-size:1.33em;} .sRecruitment_case3 ul li dl dd {font-size:1em; margin-top:10px;} .sRecruitment_case4 > div {flex-direction:column; justify-content:center; align-items:stretch; width:calc(50% - 10px); height:175px; padding:0 35px; border-radius:60px 5px 60px 5px;} .sRecruitment_case4 dl {width:100%; margin-bottom:20px} .sRecruitment_case4 dl dt {font-size:1.33em;} .sRecruitment_case4 dl dd {font-size:1em; margin-top:5px;} .sRecruitment_case4 a {width:150px; line-height:40px; border-radius:20px;} .sRecruitment_case4 a:after {width:14px; height:14px; background-size:14px 14px;} #recruitment_lottie {display:none;} #recruitment_lottie_tab {display:block;} } @media screen and (max-width:767px){ .sRecruitment_case1 h3 {font-size:1.73em;} .sRecruitment_case1 .txt {font-size:1.73em;} .sRecruitment_case1 .btn_box {margin-top:30px;} .sRecruitment_case1 .btn_box a {width:152px; line-height:46px; border-radius:23px; font-size:0.93em; margin-right:15px;} .sRecruitment_case1 .btn_box a:after {width:14px; height:14px; background-size:14px 14px;} .sRecruitment_case1 .img_box {width:320px; height:200px;} .sRecruitment_case2 {padding-top:80px;} .sRecruitment_case2 h4 {font-size:1.73em; margin-bottom:40px;} .sRecruitment_case2 .box {overflow:hidden;} .sRecruitment_case2 .box > div {float:left; display:block; width:50%; margin-bottom:0; text-align:center;} .sRecruitment_case2 .box .tit {display:inline-block; width:auto; min-height:26px; border-radius:13px 13px 13px 0; font-size:0.93em; line-height:26px; padding:0 10px; margin:0 auto 20px;} .sRecruitment_case2 .box ul {display:block; width:80px; margin:0 auto;} .sRecruitment_case2 .box ul:after {width:3px; height:100%; left:50%; top:0; transform:translateX(-50%)} .sRecruitment_case2 .box ul li {width:80px; height:80px; font-size:0.93em; margin-bottom:9px;} .sRecruitment_case2 .box ul li:last-child {margin-bottom:0;} .sRecruitment_case2 .box ul li span {left:100%; top:50%; transform:translate(0, -50%); margin-top:-4px;} .sRecruitment_case2 .box > div:last-of-type ul li span {display:none;} .sRecruitment_case2 .txt1 {margin-top:40px;} .sRecruitment_case2 .txt1 li {font-size:0.93em;} .sRecruitment_case3 {padding:100px 0 120px;} .sRecruitment_case3 h4 {font-size:1.73em; margin-bottom:35px;} .sRecruitment_case3 .txt1 {font-size:0.93em; margin-bottom:55px;} .sRecruitment_case3 ul li {width:calc(50% - 8px); margin-right:16px;} .sRecruitment_case3 ul li:nth-child(even) {margin-right:0;} .sRecruitment_case3 ul li:nth-child(even) + li {clear:both;} .sRecruitment_case3 ul li:nth-child(2) ~ li {margin-top:40px;} .sRecruitment_case3 ul li dl dt {font-size:1.2em;} .sRecruitment_case3 ul li dl dd {font-size:0.93em;} .sRecruitment_case4 > div {float:none; width:100%; height:140px; margin-bottom:14px; padding:0 40px; border-radius:50px 5px 50px 5px;} .sRecruitment_case4 > div:last-child {margin-bottom:0;} .sRecruitment_case4 dl {margin-bottom:15px;} .sRecruitment_case4 dl dt {font-size:1.2em;} .sRecruitment_case4 dl dd {font-size:0.93em; margin-top:0;} .sRecruitment_case4 a {width:127px; line-height:33px; border-radius:17px; font-size:0.87em;} .sRecruitment_case4 a:after {width:10px; height:10px; background-size:10px 10px; margin-left:7px; top:0;} #recruitment_lottie_tab {display:none;} #recruitment_lottie_mo {display:block;} } .sJobintroduction_box {padding-top:140px;} .sJobintroduction_box h3 {font-size:3.75em; text-align:center; line-height:1.3em; font-weight:800; font-family:'Noto Sans SC';} .sJobintroduction_case1 {width:100%; margin-top:120px; } .sJobintroduction_case1 > div {width:100%; overflow:hidden; padding:75px 0; border-bottom:2px solid #000;} .sJobintroduction_case1 > div:first-child {padding-top:0;} .sJobintroduction_case1 .top_box {float:left; width:510px;} .sJobintroduction_case1 .top_box h4 {font-size:2.25em; line-height:1.3em; font-weight:800; font-family:'Noto Sans SC'} .sJobintroduction_case1 .top_box ul {width:100%; margin-top:30px; font-size:0; padding-right:140px;} .sJobintroduction_case1 .top_box ul li {display:inline-block; margin:0 8px 8px 0;} .sJobintroduction_case1 .top_box ul li button {height:32px; font-size:14px; color:#aaa; letter-spacing:0; font-family:'Noto Sans SC'; border:1px solid #ccc; border-radius:16px 16px 16px 0; padding:0 15px; transition:all 0.3s; transition-property:border, background, color;} .sJobintroduction_case1 .top_box ul li.on button, .sJobintroduction_case1 .top_box ul li:hover button {border-color:#34ab81; background:#34ab81; color:#fff;} .sJobintroduction_case1 .txt_box {float:left; width:calc(100% - 510px); min-height:200px;} .sJobintroduction_case1 .txt_box > div:not(.on) {display:none;} .sJobintroduction_case1 .txt_box p {font-size:1em; line-height:1.8em;} @media screen and (max-width:1220px){ .sJobintroduction_case1 .top_box {width:400px;} .sJobintroduction_case1 .top_box ul {padding-right:70px;} .sJobintroduction_case1 .txt_box {width:calc(100% - 400px)} } @media screen and (max-width:1024px){ .sJobintroduction_box {padding-top:120px;} .sJobintroduction_box h3 {font-size:2.53em;} .sJobintroduction_case1 {margin-top:100px;} .sJobintroduction_case1 > div {padding:60px 0;} .sJobintroduction_case1 .top_box {width:275px;} .sJobintroduction_case1 .top_box h4 {font-size:1.73em;} .sJobintroduction_case1 .top_box ul {margin-top:20px; padding-right:0;} .sJobintroduction_case1 .txt_box {width:calc(100% - 275px);} } @media screen and (max-width:767px){ .sJobintroduction_box {padding-top:80px;} .sJobintroduction_box h3 {font-size:1.73em;} .sJobintroduction_case1 {margin-top:80px;} .sJobintroduction_case1 > div {padding:50px 0 40px;} .sJobintroduction_case1 .top_box {float:none; width:100%; margin-bottom:10px;} .sJobintroduction_case1 .top_box h4 {font-size:1.47em;} .sJobintroduction_case1 .top_box ul li button {height:30px;} .sJobintroduction_case1 .txt_box {float:none; width:100%; min-height:0;} .sJobintroduction_case1 .txt_box p {font-size:0.93em;} } .sBusiness_index {display:flex; width:100%; height:calc(100vh - 120px); overflow:hidden;} .sBusiness_index > div {width:150px; height:100%; position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover; transition:width 0.7s;} .sBusiness_index > div.box1 {background-image:url(../images/sBusiness_indexBG1.jpg)} .sBusiness_index > div.box2 {background-image:url(../images/sBusiness_indexBG2.jpg); background-position:center top;} .sBusiness_index > div .tit {display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:1.25em; color:#fff; line-height:1.5em; font-weight:800; font-family:'Noto Sans SC'; position:absolute; left:0; top:0; background-repeat:no-repeat; background-position:center center; background-size:cover; cursor:pointer;} .sBusiness_index > div.box1 .tit {background-image:url(../images/sBusiness_indexBG1_hide.jpg)} .sBusiness_index > div.box2 .tit {background-image:url(../images/sBusiness_indexBG2_hide.jpg)} .sBusiness_index > div > div {width:1285px; height:100%; margin:0 auto; opacity:0; visibility:hidden; padding:0 40px 0 65px; overflow-y:scroll; -ms-overflow-style: none; scrollbar-width: none;} .sBusiness_index > div > div::-webkit-scrollbar {display: none;} .sBusiness_index > div > div:after {content:''; display:block; width:100%; clear:both;} .sBusiness_index > div > div .txt_box {width:620px; position:absolute; left:50%; top:200px; transform:translateX(-555px)} .sBusiness_index > div > div .txt_box h2 {font-size:6.25em; color:#fff; line-height:1.2em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:50px;} .sBusiness_index > div > div .txt_box p {font-size:1.125em; color:#fff; line-height:1.7em; font-weight:600;} .sBusiness_index > div > div .txt_box ul {width:100%; overflow:hidden; margin-top:60px;} .sBusiness_index > div > div .txt_box ul li {float:left; width:126px; margin-right:20px;} .sBusiness_index > div > div .txt_box ul li:last-child {margin-right:0;} .sBusiness_index > div > div .txt_box ul li a {display:flex; justify-content:center; align-items:center; width:100%; height:126px; border-radius:20px; background-repeat:no-repeat; background-position:center center; background-size:cover; transition:border-radius 0.6s;} .sBusiness_index > div > div .txt_box ul li a p {font-weight:800; font-family:'Noto Sans SC'} .sBusiness_index > div > div .txt_box ul li a:hover {border-radius:50px 5px 50px 5px;} .sBusiness_index > div > div .list_box {float:right; width:557px; padding:200px 0; opacity:0; transform:translateY(60px); transition:all 0.7s; transition-property:opacity, transform; transition-delay:0.8s} .sBusiness_index > div > div .list_box ul:after {content:''; display:block; width:100%; clear:both;} .sBusiness_index > div > div .list_box ul li {float:left; width:260px; clear:both; position:relative;} .sBusiness_index > div > div .list_box ul li:nth-child(even) {float:right;} .sBusiness_index > div > div .list_box ul li .img_box {width:100%; height:260px; border-radius:40px; background:#fff; box-shadow:0 40px 40px rgba(12,17,27,0.15); overflow:hidden; transition:border-radius 0.5s} .sBusiness_index > div > div .list_box ul li .img_box img {max-width:100%;} .sBusiness_index > div > div .list_box ul li:hover .img_box {border-radius:100px 10px 100px 10px;} .sBusiness_index > div > div .list_box ul li dl {width:100%; padding:25px 20px 0; position:absolute; left:0; top:100%; color:#fff;} .sBusiness_index > div > div .list_box ul li dl dt {font-size:1.5em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'} .sBusiness_index > div > div .list_box ul li dl dd {font-size:0.9375em; line-height:1.6em; margin-top:10px;} .sBusiness_index > div.box2 > div {padding-left:0;} .sBusiness_index > div.box2 > div .txt_box h2, .sBusiness_index > div.box2 > div .txt_box p {color:#000;} .sBusiness_index > div.box2 > div .list_box dl dt {color:#000;} .sBusiness_index > div.box2 > div .list_box dl dd {color:rgba(0,0,0,0.8)} .sBusiness_index > div.active {width:calc(100% - 150px)} .sBusiness_index > div.active .tit {width:0; opacity:0; visibility:hidden;} .sBusiness_index > div.active > div {opacity:1; visibility:visible;} .sBusiness_index > div.active > div .list_box {opacity:1; transform:translateY(0)} .sBusiness_index > div.box1 > div .txt_box ul li:nth-child(1) a {background-image:url(../images/sBusiness_index1_1.png)} .sBusiness_index > div.box1 > div .txt_box ul li:nth-child(2) a {background-image:url(../images/sBusiness_index1_2.png)} @media screen and (min-width:1025px){ .sBusiness_index > div:not(.active):hover {width:calc(200px)} } @media screen and (max-width:1440px){ .sBusiness_index > div > div {width:95%; padding-left:0; margin:0 0 0 5%;} .sBusiness_index > div > div .txt_box {width:calc(88% - 470px); left:5%; transform:translateX(0)} .sBusiness_index > div > div .txt_box h2 {font-size:5.2em;} .sBusiness_index > div > div .list_box {width:470px;} .sBusiness_index > div > div .list_box ul li {width:230px;} .sBusiness_index > div > div .list_box ul li .img_box {height:230px;} .sBusiness_index > div.box2 > div .txt_box {width:calc(88% - 470px); left:5%;} } @media screen and (max-width:1024px){ .sBusiness_index {display:block; height:calc(100vh - 90px); padding-top:100px; position:relative;} .sBusiness_index > div {width:100%; height:100px; position:absolute; left:0; top:0; opacity:1;} .sBusiness_index > div .tit {background-size:100% auto;} .sBusiness_index > div > div {width:calc(100% - 80px); margin:0 auto;} .sBusiness_index > div > div .txt_box {width:calc(100% - 346px); left:40px; top:100px; padding-right:50px;} .sBusiness_index > div > div .txt_box h2 {font-size:4.27em; margin-bottom:40px;} .sBusiness_index > div > div .txt_box p {font-size:1em;} .sBusiness_index > div > div .txt_box ul {margin-top:50px;} .sBusiness_index > div > div .txt_box ul li {width:120px;} .sBusiness_index > div > div .txt_box ul li a {height:120px; border-radius:15px;} .sBusiness_index > div > div .list_box {width:216px; padding:100px 0; margin-right:10px;} .sBusiness_index > div > div .list_box ul li {width:100%; margin-bottom:60px;} .sBusiness_index > div > div .list_box ul li:last-child {margin-bottom:0;} .sBusiness_index > div > div .list_box ul li .img_box {height:216px;} .sBusiness_index > div > div .list_box ul li dl {position:relative; padding:20px 10px 0;} .sBusiness_index > div > div .list_box ul li dl dt {font-size:1.6em;} .sBusiness_index > div > div .list_box ul li dl dd {font-size:1em; margin-top:5px;} .sBusiness_index > div.box2 > div .txt_box {width:calc(100% - 346px); left:40px;} .sBusiness_index > div.active {width:100%; height:100%; position:relative;} } @media screen and (max-width:767px){ .sBusiness_index {height:calc(100vh - 60px); padding-top:50px;} .sBusiness_index > div {height:50px;} .sBusiness_index > div > div {width:calc(100% - 40px); padding:100px 0;} .sBusiness_index > div > div .txt_box {width:100%; position:relative; left:0; top:0; padding-right:0;} .sBusiness_index > div > div .txt_box h2 {font-size:3.2em; margin-bottom:30px;} .sBusiness_index > div > div .txt_box p {font-size:0.93em;} .sBusiness_index > div > div .txt_box ul {margin-top:30px;} .sBusiness_index > div > div .txt_box ul li {width:100px; border-radius:12px; margin-right:10px;} .sBusiness_index > div > div .txt_box ul li a {height:100px;} .sBusiness_index > div > div .list_box {float:none; width:240px; margin:80px auto 0; padding:0; transition-delay:0.3s} .sBusiness_index > div > div .list_box ul {width:240px;} .sBusiness_index > div > div .list_box ul li .img_box {height:240px;} .sBusiness_index > div > div .list_box ul li dl {padding:15px 0 0;} .sBusiness_index > div > div .list_box ul li dl dt {font-size:1.33em;} .sBusiness_index > div.box2 > div .txt_box {width:100%; left:0;} } .sBusiness_visu {width:100%; height:855px;} .sBusiness_visu > div {width:100%; height:855px; position:fixed; left:0; top:0; margin-top:120px; z-index:0;} .sBusiness_visu > div .img_box {content:''; display:block; width:100%; height:680px; background-repeat:no-repeat; background-size:cover; background-position:center center; position:absolute; left:0; bottom:0;} .sBusiness_visu .s-inner {display:flex; align-items:center; height:100%; padding-top:175px;} .sBusiness_visu h3 {font-size:7.5em; line-height:1.2em; font-weight:800; font-family:'Noto Sans SC'; position:absolute; left:0; top:80px;} .sBusiness_visu .logo_box {position:absolute; left:0; top:65px;} .sBusiness_visu .logo_box.case2 {margin-bottom:190px;} .sBusiness_visu dl dt {font-size:2.5em; font-weight:600; line-height:1.5em;} .sBusiness_visu dl dd {font-size:1.25em; line-height:1.8em; margin-top:30px;} .sBusiness_visu p {font-size:1.5em; line-height:1.75em; font-family:'Noto Sans SC';} .sBusiness_visu .btn_box {overflow:hidden; position:absolute; right:0; top:100px;} .sBusiness_visu .btn_box li {float:left; margin-right:10px;} .sBusiness_visu .btn_box li:last-child {margin-right:0;} .sBusiness_visu .btn_box li a {display:flex; justify-content:center; align-items:center; width:170px; height:52px; border-radius:26px; font-size:1em; color:#fff; /* font-weight:600; */} .sBusiness_visu .btn_box li a:before {content:''; display:block; width:40px; height:40px; background-repeat:no-repeat; background-position:center; background-size:cover; margin-right:7px; margin-left:-10px;} .sBusiness_visu .btn_box li a.instagram {background:#000;} .sBusiness_visu .btn_box li a.instagram:before {background-image:url(../images/sBusiness_instagram.png)} .sBusiness_visu .btn_box li a.mall {background:#34ab81;} .sBusiness_visu .btn_box li a.mall:before {background-image:url(../images/sBusiness_mall.png)} .sBusiness_visu .btn_box li a.mall:after {content:''; display:block; width:15px; height:15px; background:url(../images/sRecruitment_icon1.svg) no-repeat center center; background-size:15px 15px; margin-left:10px;} @media screen and (max-width:1024px){ .sBusiness_visu {height:933px;} .sBusiness_visu > div {height:933px; margin-top:90px;} .sBusiness_visu > div .img_box {height:800px; background-position:75% center;} .sBusiness_visu .s-inner {padding-top:133px;} .sBusiness_visu h3 {font-size:6.66em; top:50px;} .sBusiness_visu p {font-size:1.33em;} .sBusiness_visu .logo_box {top:40px;} .sBusiness_visu .logo_box.case1 img {width:180px;} .sBusiness_visu .logo_box.case2 {margin-bottom:30px;} .sBusiness_visu .logo_box.case2 img {width:auto; height:125px;} .sBusiness_visu dl dt {font-size:2.53em;} .sBusiness_visu dl dd {font-size:1.2em; margin-top:20px;} .sBusiness_visu .btn_box {right:auto; left:0; top:185px;} .sBusiness_visu .btn_box li a {width:141px; height:42px; border-radius:21px; font-size:1em;} .sBusiness_visu .btn_box li a:before {width:32px; height:32px; margin-right:0;} .sBusiness_visu .btn_box li a.mall:after {width:13px; height:13px; background-size:13px 13px; margin-left:8px;} } @media screen and (max-width:767px){ .sBusiness_visu {height:auto;} .sBusiness_visu > div {height:auto; margin-top:0; position:relative} .sBusiness_visu > div .img_box {height:280px; /* background-position:center center; */ bottom:auto; top:80px;} .sBusiness_visu .s-inner {padding-top:390px;} .sBusiness_visu h3 {font-size:3.6em; margin:0; position:absolute; left:0; top:35px;} .sBusiness_visu p {font-size:0.93em; color:#000 !important; font-family:'Nanum Gothic'} .sBusiness_visu .logo_box {top:30px;} .sBusiness_visu .logo_box.case1 img {width:96px;} .sBusiness_visu .logo_box.case2 {margin-bottom:15px;} .sBusiness_visu .logo_box.case2 img {height:80px;} .sBusiness_visu dl dt {font-size:1.6em;} .sBusiness_visu dl dd {font-size:0.93em; margin-top:10px;} .sBusiness_visu .btn_box {top:130px;} .sBusiness_visu .btn_box li a {width:127px; height:32px; border-radius:16px; font-size:0.93em;} .sBusiness_visu .btn_box li a:before {width:24px; height:24px; margin-left:-7px;} } .sBusiness_content {width:100%; background:#fff; position:relative; z-index:10; padding:150px 0 200px;} .sBusiness_table1 {width:100%; border-top:2px solid #000;} .sBusiness_table1 tbody th {width:125px; text-align:left; font-size:1em; line-height:1.7em; font-weight:800; font-family:'Noto Sans SC'; letter-spacing:0; padding:20px 0; border-bottom:1px solid #000;} .sBusiness_table1 tbody td {font-size:1em; line-height:1.7em; font-family:'Noto Sans SC'; letter-spacing:0; padding:20px 0; border-bottom:1px solid #000;} @media screen and (max-width:1024px){ .sBusiness_content {padding:120px 0 150px;} .sBusiness_table1 tbody th, .sBusiness_table1 tbody td {padding:18px 0;} .sBusiness_table1 tbody th {width:100px;} } @media screen and (max-width:767px){ .sBusiness_content {padding:100px 0;} .sBusiness_table1 tbody th, .sBusiness_table1 tbody td {font-size:0.93em; padding:15px 0;} .sBusiness_table1 tbody th {width:95px;} } .sBusiness_case1 > div {display:flex; align-items:center; width:100%; margin-bottom:150px;} .sBusiness_case1 > div:last-child {margin-bottom:0;} .sBusiness_case1 > div .img_box {width:420px; height:420px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:70px; overflow:hidden; box-shadow:0 40px 40px rgba(12,17,27,0.15)} .sBusiness_case1 > div .txt_box {width:calc(100% - 420px); padding-left:150px;} .sBusiness_case1 > div .txt_box h4 {font-size:2.5em; line-height:1.3em; font-weight:600; font-family:'Noto Sans SC'; letter-spacing:0;} .sBusiness_case1 > div .txt_box p {font-size:1.25em; line-height:1.8em; font-family:'Noto Sans SC'; margin-top:10px;} .sBusiness_case1 > div .txt_box p strong {color:#34ab81; font-weight:600;} .sBusiness_case1 > div .txt_box .sBusiness_table1 {margin-top:25px;} .sBusiness_case2 > div {display:flex; width:100%; margin-bottom:150px;} .sBusiness_case2 > div:last-child {margin-bottom:0;} .sBusiness_case2 > div h4 {width:455px; font-size:3.75em; line-height:1.3em; font-weight:600; font-family:'Noto Sans SC'; letter-spacing:0;} .sBusiness_case2 > div .txt_box {width:calc(100% - 455px);} .sBusiness_case2 > div .txt_box p {font-size:1.25em; line-height:1.8em; font-family:'Noto Sans SC';} .sBusiness_case2 > div .txt_box p strong {color:#34ab81; font-weight:600;} .sBusiness_case2 > div .txt_box .sBusiness_table1 {margin-top:25px;} .sBusiness_case3 {width:100%; overflow:hidden; margin-bottom:155px;} .sBusiness_case3 .img_box {float:left; width:190px;} .sBusiness_case3 .img_box img {max-width:100%;} .sBusiness_case3 dl {float:left; width:calc(100% - 190px); padding-left:95px;} .sBusiness_case3 dl dt {font-size:2.5em; letter-spacing:0; line-height:1.2em; font-weight:600; font-family:'Noto Sans SC'} .sBusiness_case3 dl dd {font-size:1.25em; line-height:1.8em; font-family:'Noto Sans SC'; margin-top:20px;} @media screen and (max-width:1440px){ .sBusiness_case1 > div .txt_box {padding-left:80px;} } @media screen and (max-width:1024px){ .sBusiness_case1 > div {align-items:flex-start; margin-bottom:100px;} .sBusiness_case1 > div .img_box {width:236px; height:236px; border-radius:40px; box-shadow:0 20px 20px rgba(12,17,27,0.15)} .sBusiness_case1 > div .txt_box {width:calc(100% - 236px); padding-left:60px;} .sBusiness_case1 > div .txt_box h4 {font-size:2em;} .sBusiness_case1 > div .txt_box p {font-size:1em;} .sBusiness_case1 > div .txt_box .sBusiness_table1 {margin-top:20px;} .sBusiness_case2 > div {margin-bottom:100px;} .sBusiness_case2 > div h4 {width:235px; font-size:2em;} .sBusiness_case2 > div .txt_box {width:calc(100% - 235px);} .sBusiness_case2 > div .txt_box p {font-size:1em;} .sBusiness_case2 > div .txt_box .sBusiness_table1 {margin-top:20px;} .sBusiness_case3 {margin-bottom:115px;} .sBusiness_case3 .img_box {float:none; width:200px; margin:0 auto 60px;} .sBusiness_case3 dl {float:none; width:100%; padding-left:0;} .sBusiness_case3 dl dt {font-size:2em;} .sBusiness_case3 dl dd {font-size:1em; margin-top:15px;} } @media screen and (max-width:767px){ .sBusiness_case1 > div {display:block; margin-bottom:80px;} .sBusiness_case1 > div .img_box {width:calc(100vw - 40px); height:calc(100vw - 40px); max-width:320px; max-height:320px; margin:0 auto 40px; border-radius:50px;} .sBusiness_case1 > div .txt_box {width:100%; padding-left:0;} .sBusiness_case1 > div .txt_box h4 {font-size:1.6em;} .sBusiness_case1 > div .txt_box p {font-size:0.93em; margin-top:5px;} .sBusiness_case1 > div .txt_box .sBusiness_table1 {margin-top:15px;} .sBusiness_case2 > div {display:block; margin-bottom:80px;} .sBusiness_case2 > div h4 {width:100%; font-size:1.6em; margin-bottom:10px;} .sBusiness_case2 > div .txt_box {width:100%;} .sBusiness_case2 > div .txt_box p {font-size:0.93em; margin-top:5px;} .sBusiness_case2 > div .txt_box .sBusiness_table1 {margin-top:15px;} .sBusiness_case3 {margin-bottom:60px;} .sBusiness_case3 .img_box {width:152px; margin-bottom:40px;} .sBusiness_case3 dl {float:none; width:100%; padding-left:0;} .sBusiness_case3 dl dt {font-size:1.86em;} .sBusiness_case3 dl dd {font-size:0.93em; margin-top:10px;} } .sBusiness_product:not(:last-of-type) {margin-bottom:120px;} .sBusiness_product .tit_box {margin-bottom:40px;} .sBusiness_product .tit_box h4 {display:inline-block; font-size:2em; font-weight:800; font-family:'Noto Sans SC';} .sBusiness_product .tit_box span {display:inline-block; font-size:1.25em; color:#34ab81; font-weight:800; font-family:'Noto Sans SC'; margin-left:10px;} .sBusiness_product .box {width:100%; margin-top:40px; background-repeat:no-repeat; background-position:center center; background-size:cover;} .sBusiness_product .box > div {display:none; width:100%; height:480px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:100px; overflow:hidden; padding:80px 75px 0; position:relative;} .sBusiness_product .box > div.active {display:block;} .sBusiness_product .box .img_box {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0;} .sBusiness_product .box dl {position:relative; z-index:10;} .sBusiness_product .box dl dt {display:inline-block; font-size:1em; font-weight:600; line-height:36px; padding:0 15px; background:#f7f7f6; border-radius:18px 18px 18px 0; margin-bottom:40px;} .sBusiness_product .box dl dd {font-size:1.5em; color:#fff; line-height:1.8em; font-family:'Noto Sans SC'; } .sBusiness_product .box dl dd.case2 {font-size:2.5em; line-height:1.4em; margin-bottom:20px;} .sBusiness_product_slide_wrap {position:relative;} .sBusiness_product_slide {width:100%; overflow:hidden;} .sBusiness_product_slide .swiper-slide {width:200px; cursor:pointer;} .sBusiness_product_slide .img_box {width:100%; height:200px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:50px; overflow:hidden; position:relative;} .sBusiness_product_slide p {font-size:1em; text-align:center; margin-top:20px;} .sBusiness_product_slide .active .img_box:before {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5) url(../images/icon_sBusinee_over.svg) no-repeat center center; background-size:35px 23px;} .sBusiness_product_slide .active p {font-weight:600;} .sBusiness_product_slide .swiper-button-next, .sBusiness_product_slide .swiper-button-prev {width:auto; height:200px; top:0; margin-top:0;} .sBusiness_product_slide .swiper-button-next {right:0;} .sBusiness_product_slide .swiper-button-prev {left:0;} .sBusiness_product_slide .swiper-button-next:after, .sBusiness_product_slide .swiper-button-prev:after {content:''; width:44px; height:44px; background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:10px 16px; border-radius:50%; box-shadow:0 5px 15px rgba(26,19,37,0.2); z-index:10;} .sBusiness_product_slide .swiper-button-next:after {background-image:url(../images/sBusiness_arrow_next.svg)} .sBusiness_product_slide .swiper-button-prev:after {background-image:url(../images/sBusiness_arrow_prev.svg)} .sBusiness_product_slide .swiper-button-next:before, .sBusiness_product_slide .swiper-button-prev:before {content:''; display:block; width:100px; height:100%; background:#fff; position:absolute; left:-3px; top:0; background:linear-gradient(to right, white 13%, rgba(255,255,255,0.9) 29%, rgba(255,255,255,0.8) 39%, rgba(255,255,255,0.7) 47%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.5) 61%, rgba(255,255,255,0.4) 68%, rgba(255,255,255,0.2) 83%, transparent)} .sBusiness_product_slide .swiper-button-next:before {transform:rotate(180deg); left:auto; right:-3px;} .sBusiness_product_slide .swiper-button-disabled {display:none;} @media screen and (max-width:1024px){ .sBusiness_product:not(:last-of-type) {margin-bottom:100px;} .sBusiness_product .tit_box h4 {font-size:2.13em;} .sBusiness_product .tit_box span {font-size:1.33em;} .sBusiness_product .box > div {height:250px; border-radius:60px; padding:40px; margin-top:25px;} .sBusiness_product .box dl dt {font-size:0.87em; line-height:30px; border-radius:15px 15px 15px 0; margin-bottom:20px;} .sBusiness_product .box dl dd {font-size:1em; line-height:1.3em;} .sBusiness_product .box dl dd.case2 {font-size:1.33em; line-height:1.3em; margin-bottom:10px;} .sBusiness_product_slide .swiper-slide {width:157px;} .sBusiness_product_slide .img_box {height:157px; border-radius:40px;} .sBusiness_product.case2 .box .img_box {background-position:right center;} .sBusiness_product_slide p {margin-top:15px;} .sBusiness_product_slide .swiper-button-next, .sBusiness_product_slide .swiper-button-prev {height:157px;} } @media screen and (max-width:767px){ .sBusiness_product:not(:last-of-type) {margin-bottom:60px;} .sBusiness_product .tit_box {margin-bottom:20px;} .sBusiness_product .tit_box h4 {font-size:1.33em;} .sBusiness_product .tit_box span {font-size:0.93em; margin-left:10px;} .sBusiness_product .box {margin-top:20px;} .sBusiness_product .box > div {height:auto; min-height:200px; border-radius:30px; padding:24px;} .sBusiness_product .box > div {min-height:180px;} .sBusiness_product .box .img_box {height:183px; border-radius:30px;} .sBusiness_product .box dl dt {font-size:0.8em; line-height:27px; border-radius:14px 14px 14px 0; padding:0 11px; margin-bottom:10px;} .sBusiness_product .box dl dd {font-size:1.26em; color:#000; margin-left:-24px;} .sBusiness_product .box dl dd.case2 {font-size:1.26em; color:#000; margin-top:135px; margin-bottom:0;} .sBusiness_product .box dl dd.case3 {margin-top:135px;} .sBusiness_product_slide .swiper-slide {width:112px;} .sBusiness_product_slide .img_box {height:112px; border-radius:30px;} .sBusiness_product_slide p {font-size:0.93em; margin-top:10px;} .sBusiness_product_slide .active .img_box:before {background-size:21px 14px;} .sBusiness_product_slide .swiper-button-next,.sBusiness_product_slide .swiper-button-prev {height:112px;} .sBusiness_product_slide .swiper-button-next:after, .sBusiness_product_slide .swiper-button-prev:after {width:30px; height:30px; background-size:7px 11px;} .sBusiness_product_slide .swiper-button-next:before, .sBusiness_product_slide .swiper-button-prev:before {width:60px;} } #sHistory_pc {width:3000px; height:1000px; position:absolute; left:50%; top:-120px; transform:translateX(-50%)} #sHistory_tab {width:1024px; position:absolute; left:50%; top:-90px; transform:translateX(-50%); display:none;} #sHistory_mo {width:600px; height:350px; position:absolute; left:50%; top:-60px; transform:translateX(-50%); display:none;} #sHistory2_pc {width:3000px; position:absolute; left:50%; top:950px; transform:translateX(-50%)} #sHistory2_pc2 {width:3000px; position:absolute; left:50%; top:5100px; transform:translateX(-50%)} #sHistory2_pc3 {width:3000px; position:absolute; left:50%; top:8100px; transform:translateX(-50%)} #sHistory2_pc4 {width:3000px; position:absolute; left:50%; top:10900px; transform:translateX(-50%)} #sHistory2_tab {width:1024px; position:absolute; left:50%; top:950px; transform:translateX(-50%); display:none;} .sHistory_case1 {position:relative;} .sHistory_case1 .top_box {background:#fff; padding:220px 0 300px; position:relative; /*z-index:50;*/} .sHistory_case1 .top_box p {font-size:2.5em; line-height:1.4em; font-weight:600; text-align:center; font-family:'Noto Sans SC'} .sHistory_case1 .history_box {width:100%; position:relative;} .sHistory_case1 .history_box:after {content:''; display:block; width:100%; clear:both;} .sHistory_case1 .history_box .history_year_wrap {width:180px; height:calc(100vh - 200px); max-height:780px; position:absolute; left:50%; top:0; transform:translateY(-50%); margin-top:0; margin-left:-420px; transition:transform 0.6s; z-index:10;} .sHistory_case1 .history_box .history_year_wrap:before {content:''; display:block; width:100%; height:150px; background:linear-gradient(to bottom, white 13%, rgba(255,255,255,0.9) 29%, rgba(255,255,255,0.8) 39%, rgba(255,255,255,0.7) 47%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.5) 61%, rgba(255,255,255,0.4) 68%, rgba(255,255,255,0.2) 83%, transparent); position:absolute; left:0; top:0; z-index:30; display:none;} .sHistory_case1 .history_box .history_year_wrap:after {content:''; display:block; width:100%; height:150px; background:linear-gradient(to top, white 13%, rgba(255,255,255,0.9) 29%, rgba(255,255,255,0.8) 39%, rgba(255,255,255,0.7) 47%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.5) 61%, rgba(255,255,255,0.4) 68%, rgba(255,255,255,0.2) 83%, transparent); position:absolute; left:0; bottom:0; z-index:30;} .sHistory_case1 .history_box .history_year_wrap.fixed {position:fixed; top:0; margin-top:0; transform:translateY(100px);} .sHistory_case1 .history_box .history_year_wrap.fixed:before {display:block;} .sHistory_case1 .history_box .history_year_wrap.bottom {position:absolute; top:auto; bottom:0; transform:translateY(20%);} .sHistory_case1 .history_box .history_year {width:100%; height:100%; overflow:hidden;} .sHistory_case1 .history_box .history_year .swiper-slide {display:flex; justify-content:center; align-items:center; height:80px; font-size:3.75em; color:rgba(45,49,50,0.2); line-height:1.3em; font-weight:700; font-family:'Lato'; text-align:center; cursor:pointer; white-space:nowrap} .sHistory_case1 .history_box .history_year .swiper-slide-active {height:110px; font-size:4.93em; color:#2d3132; font-weight:900;} .sHistory_case1 .history_box .history_list {float:right; width:calc(50% - 10px);} .sHistory_case1 .history_box .history_list > div:not(:first-child) {padding-top:170px;} .sHistory_case1 .history_box .history_list li {width:100%; position:relative; padding-left:105px; margin-bottom:15px;} .sHistory_case1 .history_box .history_list li:last-child {margin-bottom:0;} .sHistory_case1 .history_box .history_list li .date {display:block; width:105px; font-size:1.125em; line-height:1.66em; font-weight:600; position:absolute; left:0; top:0;} .sHistory_case1 .history_box .history_list li .txt {font-size:1.125em; line-height:1.66em;} .sHistory_case1 .history_box .history_list li img {display:block; width:100%; max-width:340px; margin:20px 0 40px;} .sHistory_case1 .history_box .history_list .active li .date {color:#34ab81;} .sHistory_case1.case2 .history_box .history_year_wrap {transition:transform 0.6s linear;} @media screen and (max-width:1024px){ #sHistory_pc {display:none;} #sHistory_tab {display:block;} #sHistory2_pc {display:none;} #sHistory2_pc2 {display:none;} #sHistory2_tab {display:block;} .sHistory_case1 .top_box {padding:120px 0 220px;} .sHistory_case1 .top_box p {font-size:2.53em;} .sHistory_case1 .history_box .history_year_wrap {width:120px; left:0; margin-left:0;} .sHistory_case1 .history_box .history_year_wrap.fixed {left:40px;} .sHistory_case1 .history_box .history_year_wrap.bottom {left:0;} .sHistory_case1 .history_box .history_year .swiper-slide {height:45px; font-size:2.13em;} .sHistory_case1 .history_box .history_year .swiper-slide-active {height:70px; font-size:3.06em;} .sHistory_case1 .history_box .history_list {width:calc(100% - 210px)} .sHistory_case1 .history_box .history_list li {padding-left:85px;} .sHistory_case1 .history_box .history_list li .date {width:85px; font-size:1em;} .sHistory_case1 .history_box .history_list li .txt {font-size:1em; font-weight:400;} } @media screen and (max-width:767px){ #sHistory_tab {display:none;} #sHistory_mo {display:block;} #sHistory2_tab {display:none;} .sHistory_case1 .top_box {padding:55px 0 140px;} .sHistory_case1 .top_box p {font-size:1.73em;} .sHistory_case1 .history_box {padding-top:50px} .sHistory_case1 .history_box .history_year_wrap {background:#fff; width:100%; height:50px; left:0; top:0; transform:translateY(0); margin-top:0; transition:none} .sHistory_case1 .history_box .history_year_wrap:before {width:100vw; height:1px; background:#eee; top:auto; bottom:0; left:-20px;} .sHistory_case1 .history_box .history_year_wrap:after {display:none;} .sHistory_case1 .history_box .history_year_wrap.fixed {top:60px; left:20px; transform:translateY(0)} .sHistory_case1 .history_box .history_year_wrap.bottom {position:fixed; left:0;} .sHistory_case1 .history_box .history_year {width:60px; overflow:visible;} .sHistory_case1 .history_box .history_year .swiper-slide {width:100%; height:50px; font-size:1.06em; font-weight:400; font-family:'Noto Sans SC'} .sHistory_case1 .history_box .history_year .swiper-slide-active {height:50px; font-size:1.6em; font-weight:600;} .sHistory_case1 .history_box .history_year .swiper-slide-active:before {content:''; display:block; width:100%; height:3px; background:#000; position:absolute; left:0; bottom:0; z-index:10;} .sHistory_case1 .history_box .history_list {width:100%;} .sHistory_case1 .history_box .history_list > div {padding:50px 0; border-bottom:1px solid rgba(0,0,0,0.1)} .sHistory_case1 .history_box .history_list > div:not(:first-child) {padding-top:50px;} .sHistory_case1 .history_box .history_list li {padding-left:70px; margin-bottom:10px;} .sHistory_case1 .history_box .history_list li .date {width:70px; font-size:0.93em; } .sHistory_case1 .history_box .history_list li .txt {font-size:0.93em;} .sHistory_case1 .history_box .history_list li img {max-width:238px; margin:10px 0 20px;} } .sIntroduction_case1 {width:100%; height:100vh; overflow:hidden;} .sIntroduction_case1 .txt_box {position:relative; z-index:10; transition:transform 1.5s} .sIntroduction_case1 .txt_box > div {display:flex; justify-content:center; align-items:center; height:100vh; position:relative; width:100%; height:100vh;} .sIntroduction_case1 h3 {font-size:3.75em; line-height:1.33em; font-weight:800; font-family:'Noto Sans SC'; margin-top:-300px; position:relative; z-index:5; transition:all 0.6s; transition-property:color, margin;} .sIntroduction_case1 .txt {font-size:3.25em; color:#fff; line-height:1.53em; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sIntroduction_case1 .img_box {width:694px; height:315px; border-radius:30px; box-shadow:0 40px 40px rgba(12,17,27,0.15); position:absolute; left:50%; top:50%; transform:translate(-50%, 0); overflow:hidden; /*transition:all 1s; transition-property:width, height, left, top, transform, border-radius;*//*transition:width 0.8s 1s, height 1s, top 1s, left 0.8s 1s, transform 0.8s 1s, border-radius 0.5s, box-shadow 0.5s;*/transition:all 0.8s;} .sIntroduction_case1 .img_box:before {content:''; display:block; width:100%; height:100%; background:url(../images/sIntroduction_img1.jpg) no-repeat center center; background-size:cover; position:absolute; left:0; top:0; transition:transform 6000ms linear;} .sIntroduction_case1 .bar {position:absolute; left:50%; bottom:20px; width:1px; height:80px; background:#000; transition:background 0.5s} .sIntroduction_case1 .bar:before {content:''; display:block; width:15px; height:15px; border-radius:50%; border:4px solid #fff; background:#000; position:absolute; left:50%; top:-10px; transform:translateX(-50%) scale(0.5); transition:background 0.5s; animation:sCompany_bar 1s infinite alternate cubic-bezier(0.42, 0.0, 1.0, 1.0);} .sIntroduction_case1.active .txt_box {transform:translateY(-50%);} .sIntroduction_case1.active .img_box {width:100%; height:100%; top:0; box-shadow:none; border-radius:0; /*transition:width 0.8s, height 1s 0.8s, top 1s 0.8s, border-radius 0.5s 0.8s, box-shadow 0.5s 0.8s, position 0s 0.8s;*/ transition-timing-function:ease-in-out;} .sIntroduction_case1.active .img_box:before {transform:scale(1.1); transition-delay:0.5s} .sIntroduction_case1.active .bar {background:#fff;} .sIntroduction_case1.active .bar:before {border-color:#2d4233; background:#fff;} .sIntroduction_case2 {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:relative; overflow:hidden;} .sIntroduction_case2:before {content:''; display:block; width:100%; height:100%; background:url(../images/sIntroduction_img2.jpg) no-repeat center center; background-size:cover; position:absolute; left:0; top:0; transition:transform 6000ms linear;} .sIntroduction_case2 .box {transition:transform 0.7s; position:relative; z-index:10;} .sIntroduction_case2 .box > div:not(:last-child) {margin-bottom:30px;} .sIntroduction_case2 p {font-size:1.125em; color:#fff; line-height:1.66em; text-align:center; opacity:0; transform:translateY(80px); transition:all 0.7s; transition-property:opacity, transform;} .sIntroduction_case2 .bar {position:absolute; left:50%; bottom:20px; width:1px; height:80px; background:#fff; transition:background 0.5s} .sIntroduction_case2 .bar:before {content:''; display:block; width:15px; height:15px; background:#fff; border-radius:50%; border:4px solid #4c535b; position:absolute; left:50%; top:-10px; transform:translateX(-50%) scale(0.5); transition:background 0.5s; animation:sCompany_bar 1s infinite alternate cubic-bezier(0.42, 0.0, 1.0, 1.0);} .sIntroduction_case2.on:before {transform:scale(1.1); transition-delay:0.2s} .sIntroduction_case2.on p {opacity:1; transform:translateY(0); transition-delay:0.5s} .sIntroduction_case3 {display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:relative; overflow:hidden;} .sIntroduction_case3:before {content:''; display:block; width:100%; height:100%; background:url(../images/sIntroduction_img3.jpg) no-repeat center center; background-size:cover; position:absolute; left:0; top:0; transition:transform 6000ms linear;} .sIntroduction_case3 > div {position:relative; z-index:10; opacity:0; transform:translateY(80px); transition:all 0.7s; transition-property:opacity, transform;} .sIntroduction_case3 p {font-size:2.25em; color:#fff; line-height:1.55em; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sIntroduction_case3 a {display:block; width:350px; background:#1bbe77; border-radius:39px; text-align:center; font-size:1.5em; color:#fff; font-weight:600; line-height:78px; margin:60px auto 0; transition:background 0.5s} .sIntroduction_case3 a:after {content:''; display:inline-block; width:23px; height:23px; background:url(../images/sRecruitment_icon1.svg) no-repeat center center; background-size:23px 23px; margin-left:15px; vertical-align:middle; position:relative; top:-4px;} .sIntroduction_case3 a:hover {background:#04a06f;} .sIntroduction_case3.on:before {transform:scale(1.1); transition-delay:0.2s} .sIntroduction_case3.on > div {opacity:1; transform:translateY(0); transition-delay:0.5s} @media screen and (min-width:768px){ .sIntroduction_case2 .box > div:first-of-type {margin-top:0 !important;} } @media screen and (max-width:1220px){ .sIntroduction_case2 p .tab_br {display:none;} } @media screen and (max-width:1024px){ .sIntroduction_case1 h3 {font-size:2.53em; line-height:1.68em;} .sIntroduction_case1 .txt {font-size:2.27em; line-height:1.64em;} .sIntroduction_case1 .img_box {width:688px; height:310px;} .sIntroduction_case2 p {font-size:1.067em;} .sIntroduction_case3 p {font-size:2em;} .sIntroduction_case3 a {width:280px; line-height:62px; font-size:1.27em; border-radius:31px;} .sIntroduction_case3 a:after {width:17px; height:17px; background-size:17px 17px; margin-left:13px;} } @media screen and (max-width:767px){ .sIntroduction_case1 h3 {font-size:1.73em;} .sIntroduction_case1 .txt {font-size:1.73em;} .sIntroduction_case1 .img_box {width:320px; height:200px;} .sIntroduction_case2 {display:block;} .sIntroduction_case2 .box > div {display:flex; justify-content:center; align-items:center; height:100vh;} .sIntroduction_case2 .box > div:not(:last-child) {margin-bottom:0;} .sIntroduction_case2 p {font-size:1em; line-height:2em;} .sIntroduction_case3 p {font-size:1.46em;} .sIntroduction_case3 a {width:210px; line-height:46px; border-radius:23px; font-size:0.93em; margin-top:40px;} .sIntroduction_case3 a:after {width:14px; height:14px; background-size:14px 14px; top:-1px;} } .sFactory_case1 {padding-top:120px;} .sFactory_case1 .txt_box {width:100%; overflow:hidden;} .sFactory_case1 .txt_box .tit {float:left; width:510px;} .sFactory_case1 .txt_box .tit h3 {font-size:3.25em; font-weight:800; font-family:'Noto Sans SC';} .sFactory_case1 .txt_box .tit p {font-size:1.75em; line-height:1.4em; font-weight:800; font-family:'Noto Sans SC'; margin-top:45px;} .sFactory_case1 .txt_box .txt {float:left; width:calc(100% - 510px); margin-top:25px;} .sFactory_case1 .txt_box .txt p {font-size:1.125em; line-height:1.66em;} .sFactory_case1 .img_box {margin-top:100px;} .sFactory_case1 .img_box img {max-width:100%;} .sFactory_case1 .img_box .top {width:100%; height:382px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:60px; box-shadow:0 15px 40px rgba(49,51,65,0.2); border-radius:60px;} .sFactory_case1 .img_box ul {width:100%; margin-top:70px; overflow:hidden;} .sFactory_case1 .img_box ul li {float:left; width:calc(25% - 18px); margin-right:24px; position:relative;} .sFactory_case1 .img_box ul li:last-child {margin-right:0;} .sFactory_case1 .img_box ul li p {width:100%; text-align:center; font-size:1.25em; color:#fff; line-height:1.1em; font-weight:600; position:absolute; left:0; bottom:15px;} .sFactory_case1 dl {display:flex; justify-content:left; flex-wrap:wrap; width:100%; margin-top:60px;} .sFactory_case1 dl dt {width:410px; font-size:1.75em; line-height:1.2em; font-weight:800; font-family:'Noto Sans SC'; padding:60px 0; border-bottom:2px solid #000;} .sFactory_case1 dl dd {width:calc(100% - 410px); font-size:1em; line-height:1.5em; margin-top:0; padding:60px 0; border-bottom:2px solid #000;} .sFactory_case1 dl dt:last-of-type, .sFactory_case1 dl dd:last-of-type {border-bottom:0;} @media screen and (max-width:1024px){ .sFactory_case1 .txt_box .tit {width:calc(50% + 10px)} .sFactory_case1 .txt_box .tit h3 {font-size:2.53em;} .sFactory_case1 .txt_box .tit p {font-size:1.47em; margin-top:30px;} .sFactory_case1 .txt_box .txt {width:calc(50% - 10px); margin-top:15px;} .sFactory_case1 .txt_box .txt p {font-size:1em;} .sFactory_case1 .img_box {margin-top:80px;} .sFactory_case1 .img_box .top {height:220px; border-radius:40px;} .sFactory_case1 .img_box ul {margin-top:40px;} .sFactory_case1 .img_box ul li {width:calc(25% - 15px); margin-right:20px;} .sFactory_case1 .img_box ul li p {font-size:0.93em; bottom:10px;} .sFactory_case1 dl {margin-top:35px;} .sFactory_case1 dl dt, .sFactory_case1 dl dd {padding:45px 0;} .sFactory_case1 dl dt {width:240px; font-size:1.47em;} .sFactory_case1 dl dd {width:calc(100% - 240px); font-size:1em; margin-top:0;} } @media screen and (max-width:767px){ .sFactory_case1 {padding-top:80px;} .sFactory_case1 .txt_box .tit {float:none; width:100%;} .sFactory_case1 .txt_box .tit h3 {font-size:2.13em;} .sFactory_case1 .txt_box .tit p {font-size:1.33em; margin-top:20px;} .sFactory_case1 .txt_box .txt {float:none; width:100%; margin-top:35px;} .sFactory_case1 .txt_box .txt p {font-size:0.93em;} .sFactory_case1 .img_box {margin-top:60px;} .sFactory_case1 .img_box .top {height:130px; border-radius:25px; box-shadow:0 15px 20px rgba(49,51,65,0.2)} .sFactory_case1 .img_box ul {margin-top:30px;} .sFactory_case1 .img_box ul li {width:calc(50% - 8px); margin-right:16px;} .sFactory_case1 .img_box ul li:nth-child(2) ~ li {margin-top:16px;} .sFactory_case1 .img_box ul li:nth-child(even) {margin-right:0;} .sFactory_case1 .img_box ul li p {font-size:1em;} .sFactory_case1 dl {margin-top:40px;} .sFactory_case1 dl dt {float:none; width:100%; font-size:1.33em; padding:25px 0 5px; border-bottom:0;} .sFactory_case1 dl dd {float:none; width:100%; font-size:0.93em; padding:0 0 25px;} } .sAffiliates_case1 .tit {font-size:3.5em; line-height:1.42em; font-weight:800; font-family:'Noto Sans SC'; margin:110px 0 100px;} .sAffiliates_case1 dl dt {font-size:2em; line-height:1.3em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:30px;} .sAffiliates_case1 dl dd {font-size:1em; line-height:1.8em;} .sAffiliates_case1 ul {width:100%; margin-top:80px; overflow:hidden;} .sAffiliates_case1 ul li {float:left; width:calc(50% - 12px); margin-right:24px; border-top:2px solid #000; padding-top:30px; position:relative;} .sAffiliates_case1 ul li:last-child {margin-right:0;} .sAffiliates_case1 ul li strong {display:block; width:100%; font-size:1.75em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:110px;} .sAffiliates_case1 ul li p {font-size:1em; line-height:1.8em;} .sAffiliates_case1 ul li p:last-of-type {margin-top:50px;} .sAffiliates_case1 ul li img {position:absolute; right:20px; top:30px;} @media screen and (max-width:1024px){ .sAffiliates_case1 .tit {font-size:2.53em; margin:120px 0 60px;} .sAffiliates_case1 dl dt {font-size:1.6em; margin-bottom:25px;} .sAffiliates_case1 ul {margin-top:60px;} .sAffiliates_case1 ul li {width:calc(50% - 29px); margin-right:58px; border-top-width:1px; padding:15px 10px 0;} .sAffiliates_case1 ul li strong {font-size:1.33em; margin-bottom:70px;} .sAffiliates_case1 ul li p:first-of-type {height:10.8em;} .sAffiliates_case1 ul li p:last-of-type {margin-top:20px;} .sAffiliates_case1 ul li img {height:60px; right:10px; top:20px;} } @media screen and (max-width:767px){ .sAffiliates_case1 .tit {font-size:1.73em; margin:80px 0 50px;} .sAffiliates_case1 dl dt {font-size:1.33em; margin-bottom:20px;} .sAffiliates_case1 dl dd {font-size:0.93em;} .sAffiliates_case1 ul {margin-top:60px;} .sAffiliates_case1 ul li {float:none; width:100%; margin-right:0; padding:20px 0 0; margin-bottom:80px;} .sAffiliates_case1 ul li:last-child {margin-bottom:0;} .sAffiliates_case1 ul li p {font-size:0.93em;} .sAffiliates_case1 ul li p:first-of-type {height:auto;} .sAffiliates_case1 ul li p:last-child {margin-top:35px;} .sAffiliates_case1 ul li img {height:53px; right:0;} } .sLocation_case1:after {content:''; display:block; width:100%; clear:both;} .sLocation_case1 > div {float:left; width:calc(33.33% - 16px); margin-right:24px;} .sLocation_case1 > div:last-child {margin-right:0;} .sLocation_case1 > div .img_box {width:100%; height:400px; border-radius:20px; box-shadow:0 30px 40px rgba(12,17,27,0.2); background-repeat:no-repeat; background-position:center center; background-size:cover; margin-bottom:90px;} .sLocation_case1 > div .info dt {font-size:1.75em; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:40px;} .sLocation_case1 > div .info dd {font-size:1.125em; line-height:1.5em; margin-bottom:10px;} .sLocation_case1 > div .info dd.tf {display:inline-block; margin-right:25px;} .sLocation_case1 > div .info dd.tf:last-of-type {margin-right:0;} .traffic_box {display:inline-block; position:relative; margin-top:20px;} .traffic_box button {height:30px; font-size:1.25em; font-weight:600; font-family:'Noto Sans SC'; padding-right:45px; position:relative;} .traffic_box button span {display:block; width:30px; height:30px; background:#c2ca2b; border-radius:50%; position:absolute; right:0; top:0; box-shadow:0 15px 15px rgba(12,17,27,0.15); } .traffic_box button span:before, .traffic_box button span:after {content:''; display:block; background:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); transition:transform 0.6s} .traffic_box button span:before {width:2px; height:14px;} .traffic_box button span:after {width:14px; height:2px;} .traffic_box > div {display:none; width:500px; background:#fff; border:4px solid #c2ca2b; border-radius:20px; position:absolute; left:100%; top:15px; margin-left:10px; z-index:40; padding:30px 20px;} .traffic_box > div dl dt {font-size:1em; font-weight:600; margin-bottom:5px;} .traffic_box > div dl dd {font-size:1em; line-height:1.75em; margin-bottom:20px;} .traffic_box > div dl dd:last-of-type {margin-bottom:0;} .traffic_box.active button span:before, .traffic_box.active button span:after {transform:translate(-50%, -50%) rotate(225deg)} .traffic_box.active > div {display:block;} @media screen and (max-width:1024px){ .sLocation_case1 > div {width:calc(33.33% - 13.33px); margin-right:20px;} .sLocation_case1 > div .img_box {height:225px; margin-bottom:60px;} .sLocation_case1 > div .info dt {font-size:1.47em; margin-bottom:25px;} .sLocation_case1 > div .info dd {font-size:1em;} .sLocation_case1 > div .info dd.tf {display:block; margin-right:0; margin-bottom:0;} .traffic_box button {font-size:1.2em; height:27px; padding-right:41px;} .traffic_box button span {width:27px; height:27px;} .traffic_box button span:before {width:1px; height:13px;} .traffic_box button span:after {width:13px; height:1px} .traffic_box > div {width:50vw;} } @media screen and (max-width:767px){ .sLocation_case1 > div {float:none; width:100%; margin:0 0 80px;} .sLocation_case1 > div:last-child {margin-bottom:0;} .sLocation_case1 > div .img_box {height:333px;} .sLocation_case1 > div .info dt {font-size:1.33em; margin-bottom:20px;} .sLocation_case1 > div .info dd {font-size:0.93em; margin-bottom:6px;} .sLocation_case1 > div .info dd.tf {display:inline-block; margin-right:15px;} .traffic_box button {font-size:1.07em; height:25px; padding-right:37px;} .traffic_box button span {width:25px; height:25px;} .traffic_box > div {width:70vw; padding:20px 15px; border-width:2px; margin-left:5px; top:5px;} .traffic_box > div dl dt, .traffic_box > div dl dd {font-size:0.93em;} } .sCscenter_case1 {width:100%; margin-bottom:120px;} .sCscenter_case1:after {content:''; display:block; width:100%; clear:both;} .sCscenter_case1 > div {float:left; height:210px; margin-right:24px; box-shadow:0 20px 37px 13px rgba(12,17,27,0.15);} .sCscenter_case1 > div:last-child {margin-right:0;} .sCscenter_case1 .info {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; width:calc(50% - 16px); background:#fff; border-radius:40px; padding:45px 40px;} .sCscenter_case1 .info strong {font-size:1.5em; font-weight:600; font-family:'Noto Sans SC';} .sCscenter_case1 .info .number {font-size:1.5em; font-weight:800; font-family:'Noto Sans SC'} .sCscenter_case1 .info ul {width:100%; margin-top:40px;} .sCscenter_case1 .info ul li {font-size:1em; color:#666; line-height:1.8em} .sCscenter_case1 .link {width:calc(25% - 16px);} .sCscenter_case1 .link a {display:block; width:100%; height:100%; padding:45px 20px 45px 40px;} .sCscenter_case1 .link strong {display:block; font-size:1.25em; color:#fff; font-weight:600; font-family:'Noto Sans SC'; margin-bottom:30px;} .sCscenter_case1 .link strong:after {content:''; display:inline-block; width:15px; height:15px; background:url(../images/sRecruitment_icon1.svg) no-repeat center center; background-size:15px 15px; vertical-align:middle; margin-left:15px; position:relative; top:-2px;} .sCscenter_case1 .link p {font-size:1em; color:#fff; line-height:1.8em;} .sCscenter_case1 .link1 {background:#34ab81; border-radius:5px 80px 5px 80px;} .sCscenter_case1 .link2 {background:#c2ca2b; border-radius:80px 5px 80px 5px;} .sCscenter_case2 .tit_box {width:100%; position:relative;} .sCscenter_case2 .tit_box h4 {font-size:1.875em; line-height:1.3em; font-weight:800; font-family:'Noto Sans SC'} .sCscenter_case2 .tit_box .all_btn {font-size:1em; font-weight:600; background:url(../images/sCscenter_icon1.svg) no-repeat right center; background-size:16px 12px; padding-right:33px; position:absolute; right:0; top:15px;} .sCscenter_case2 .tit_box p {font-size:1em; line-height:1.7em; margin-top:20px;} .sCscenter_case2 .board_faq_box {margin:50px 0 120px;} .sCscenter_case2 .box1 {display:flex; justify-content:space-between; width:100%; margin:70px 0 140px;} .sCscenter_case2 .box1 li {width:180px; position:relative;} .sCscenter_case2 .box1 li:not(:first-child):before {content:''; display:block; width:36px; height:36px; background:url(../images/sCscentered_icon1.svg) no-repeat center center; background-size:36px 36px; position:absolute; top:90px; left:-56px; transform:translateY(-50%)} .sCscenter_case2 .box1 li p {display:flex; justify-content:center; align-items:center; width:100%; height:180px; background:#c2ca2b; border-radius:50%; font-size:1.25em; color:#fff; font-weight:800; font-family:'Noto Sans SC'; text-align:center;} .sCscenter_case2 .box1 li span {display:block; width:100%; font-size:0.875em; color:#666; line-height:1.42em; text-align:center; margin-top:30px;} .sCscenter_case2 .sub_table_box {margin-top:60px;} .sCscenter_case2 .sub_table_box .tit {display:block; width:100%; line-height:65px; background:#242424; font-size:1em; color:#fff; font-weight:400; text-align:center; border-radius:10px 10px 0 0;} .sCscenter_case2 .sub_table_box tbody td {font-size:0.875em; font-weight:400;} .sCscenter_case2 .sub_table_box tbody td span {display:block; font-size:1.14em; color:#000; font-weight:400;} .sCscenter_case2 .sub_table_box tbody td ul li:not(:last-child) {margin-bottom:5px;} .sCscenter_case2 .sub_table_box tbody td.case2 ul {float:left; width:50%;} @media screen and (max-width:1220px){ .sCscenter_case1 .link p br {display:none;} .sCscenter_case2 .box1 li {width:14vw;} .sCscenter_case2 .box1 li:not(:first-child):before {top:7.5vw; left:calc(-1vw - 36px);} .sCscenter_case2 .box1 li p {height:14vw;} } @media screen and (max-width:1024px){ .sCscenter_case1 {margin-bottom:100px;} .sCscenter_case1 > div {height:160px; margin-right:10px;} .sCscenter_case1 .info {width:calc(50% - 6.66px); padding:30px 24px;} .sCscenter_case1 .info strong {font-size:1.2em;} .sCscenter_case1 .info .number {font-size:1.2em;} .sCscenter_case1 .info ul {margin-top:10px;} .sCscenter_case1 .link {width:calc(25% - 6.66px)} .sCscenter_case1 .link a {padding:30px 5px 30px 10px;} .sCscenter_case1 .link strong {font-size:1.06em; margin-bottom:15px;} .sCscenter_case1 .link strong:after {width:13px; height:13px; background-size:13px 13px; margin-left:10px;} .sCscenter_case1 .link p {font-size:1em;} .sCscenter_case1 .link1 {border-radius:5px 40px 5px 40px;} .sCscenter_case1 .link2 {border-radius:40px 5px 40px 5px;} .sCscenter_case2 .tit_box h4 {font-size:1.87em;} .sCscenter_case2 .board_faq_box {margin:60px 0 100px;} .sCscenter_case2 .box1 {justify-content:center; margin:50px 0 100px;} .sCscenter_case2 .box1 li {width:98px; margin-right:50px;} .sCscenter_case2 .box1 li:last-child {margin-right:0;} .sCscenter_case2 .box1 li:not(:first-child):before {width:22px; height:22px; background-size:22px 22px; top:49px; left:-35px;} .sCscenter_case2 .box1 li p {height:98px; font-size:1em;} .sCscenter_case2 .box1 li span {font-size:0.87em; margin-top:15px;} .sCscenter_case2 .sub_table_box {margin-top:50px;} .sCscenter_case2 .sub_table_box thead th {font-size:1.06em;} .sCscenter_case2 .sub_table_box tbody td {font-size:0.93em;} } @media screen and (max-width:767px){ .sCscenter_case1 {margin-bottom:80px;} .sCscenter_case1 > div {box-shadow:0 15px 30px rgba(12,17,27,0.15); margin-right:16px;} .sCscenter_case1 .info {width:100%; border-radius:30px; margin-bottom:20px; margin-right:0;} .sCscenter_case1 .info strong, .sCscenter_case1 .info .number {font-size:1.33em;} .sCscenter_case1 .info ul li {font-size:0.93em;} .sCscenter_case1 .link {width:calc(50% - 8px);} .sCscenter_case1 .link strong {font-size:0.93em;} .sCscenter_case1 .link strong:after {margin-left:5px;} .sCscenter_case1 .link p {font-size:0.93em;} .sCscenter_case2 .tit_box h4 {font-size:1.6em;} .sCscenter_case2 .tit_box .all_btn {font-size:0.93em; padding-right:26px; top:50%; transform:translateY(-50%);} .sCscenter_case2 .tit_box p {font-size:0.93em; margin-top:15px;} .sCscenter_case2 .board_faq_box {margin:40px 0 80px;} .sCscenter_case2 .box1 {display:block; margin:60px 0 70px;} .sCscenter_case2 .box1 li {display:flex; align-items:center; width:100%; margin-right:0; margin-bottom:60px;} .sCscenter_case2 .box1 li:last-child {margin-bottom:0;} .sCscenter_case2 .box1 li:not(:first-child):before {width:36px; height:36px; background-size:36px 36px; left:76px; top:auto; top:-48px; transform:translateX(-50%) rotate(90deg)} .sCscenter_case2 .box1 li p {width:152px; height:152px; font-size:1.2em;} .sCscenter_case2 .box1 li span {width:calc(100% - 152px); font-size:0.93em;} .sCscenter_case2 .sub_table_box .tit {min-width:1000px;} .sCscenter_case2 .sub_table_box ul:first-of-type {margin-right:10px;} } .sPrivacy_case1 p {font-size:0.875em; letter-spacing:0; line-height:1.57em;} .sPrivacy_case1 .txt {font-size:0.875em; letter-spacing:0; line-height:1.57em;margin-bottom: 30px;} .sPrivacy_case1 .sPrivacy_tabBtn {overflow:hidden; margin:50px 0;} .sPrivacy_case1 .sPrivacy_tabBtn li {float: left; width: calc(33.33% - 8px); margin-right: 12px; margin-bottom:10px; } .sPrivacy_case1 .sPrivacy_tabBtn li:nth-child(3n) {margin-right:0;} .sPrivacy_case1 .sPrivacy_tabBtn li a {display:flex; justify-content:center; align-items:center; width:100%; height:50px; background-color:#f5f5f5; color:#000; font-size:0.875em; border-radius: 5px; line-height:1.71em;text-align:center;transition:all 0.6s;} .sPrivacy_case1 .sPrivacy_tabBtn li a:hover {background-color: #34ab81; color:#fff; transition:all 0.6s;} .sPrivacy_case1 dl {border-top:1px solid #aab0af;} .sPrivacy_case1 dl dt {font-size: 1.5em;font-weight: bold;line-height: 2.5;margin-top:46px;} .sPrivacy_case1 dl dd {margin-top:15px;} .sPrivacy_case1 dl dd p {font-size: 0.875em; line-height:1.71em; margin-bottom:22px;} .sPrivacy_case1 dl dd ul {margin-bottom:22px;} .sPrivacy_case1 dl dd ul li {padding-left:10px; font-size: 0.875em;line-height:1.71em;} .sPrivacy_case1 dl dd ul li:before {content:''; display:block; width:3px; height:1px;background:#000;position: relative;left: -10px;top: 12px;} .sPrivacy_case1 dl dd ul li.list_none {padding-left:0;} .sPrivacy_case1 dl dd ul li.list_none:before {display:none;} .sPrivacy_case1 dl dd ul li span {color:#34ab81;} .sPrivacy_case1 a.prev_btn {display:block; margin-top:190px; margin-bottom:120px;font-size: 1.5em;font-weight: 800;line-height: 1;letter-spacing: -0.96px;} .sPrivacy_case2 {margin-bottom:72px;} .sPrivacy_case2 h4 {font-size: 1.5em;font-weight: 800;line-height: 2.2;} .sPrivacy_case2 dl {} .sPrivacy_case2 dl dt {font-size: 1.25em;font-weight: bold;line-height: 2;margin-top:30px;} .sPrivacy_case2 dl dd {margin-top:6px;} .sPrivacy_case2 dl dd p {font-size: 0.875em; line-height:1.71em; } .sPrivacy_case2 dl dd ul {margin: 22px 0;} .sPrivacy_case2 dl dd ul li {padding-left:10px; font-size: 0.875em;line-height:1.71em;} .sPrivacy_case2 dl dd ul li:before {content:''; display:block; width:3px; height:1px;background:#000;position: relative;left: -10px;top: 12px;} .sPrivacy_case2 dl dd ul li.list_none {padding-left:0;} .sPrivacy_case2 dl dd ul li.list_none:before {display:none;} @media screen and (max-width:1024px){ .sPrivacy_case1 p {font-size:0.93em;} .sPrivacy_case1 .txt, .sPrivacy_case1 .sPrivacy_tabBtn li a, .sPrivacy_case1 dl dd p, .sPrivacy_case1 dl dd ul li {font-size:0.93em;} .sPrivacy_case1 .sPrivacy_tabBtn {margin:60px 0 40px;} .sPrivacy_case1 .sPrivacy_tabBtn li {float: left; width: calc(50% - 20px); margin-right: 20px;} .sPrivacy_case1 .sPrivacy_tabBtn li:nth-child(3n) {margin-right:20px;} .sPrivacy_case1 .sPrivacy_tabBtn li:nth-child(2n) {margin-right:0;} .sPrivacy_case1 dl dt {margin-top:30px;} .sPrivacy_case1 dl dd {margin-top:5px;} .sPrivacy_case1 a.prev_btn {margin-top: 110px;margin-bottom: 60px;} .sPrivacy_case2 h4 {line-height: 1.71em;} .sPrivacy_case2 dl dt {margin-top:22px;} } @media screen and (max-width:767px){ .sPrivacy_case1 .txt {margin-bottom: 24px;line-height:1.71em;} .sPrivacy_case1 .sPrivacy_tabBtn {margin:45px 0 40px;} .sPrivacy_case1 .sPrivacy_tabBtn li {float: left; width: 100%; margin-right: 0;margin-bottom:8px;} .sPrivacy_case1 .sPrivacy_tabBtn li:nth-child(3n) {margin-right:0;} .sPrivacy_case1 .sPrivacy_tabBtn li a {height:auto; padding:12px 28px;} .sPrivacy_case1 dl dt {margin-top:44px;font-size: 1.34em;line-height: 1.4;} .sPrivacy_case1 dl dd {margin-top:10px;} .sPrivacy_case1 a.prev_btn {margin-top: 80px;margin-bottom: 30px;} } /* popup */ .popup_wrap {width:100%; height:100vh; background:rgba(0,0,0,0.6); position:fixed; left:0; top:0; z-index:500;} .popup_inner {max-height:95vh; border-radius:20px; background:#fff; box-shadow:0 15px 15px rgba(12,17,27,0.15); overflow:hidden; position:absolute; padding-bottom:44px;} .popup_inner img {width:100%;} .popup_inner .popup_content {height:100%;} .popup_inner .img_box {width:100%; min-height:210px; background:#e5e5e5;} .popup_inner .txt_box {width:100%; padding:24px 24px 45px;} .popup_inner .txt_box .title {font-size:1.375em; color:#000; font-weight:800; font-family:'Noto Sans SC'; margin-bottom:15px;} .popup_inner .txt_box .txt {font-size:0.9375em; color:#222; line-height:1.6em;} .popup_inner .popup_bottom {display:flex; justify-content:space-between; align-items:center; width:100%; padding:0 24px; position:absolute; left:0; bottom:20px;} .popup_inner .popup_bottom label {position:relative; padding-left:26px;} .popup_inner .popup_bottom label input {display:none;} .popup_inner .popup_bottom label span {display:block; width:20px; height:20px; border:1px solid #ccc; border-radius:50%; position:absolute; left:0; top:0;} .popup_inner .popup_bottom label input:checked + span {border:5px solid #34ab81;} .popup_inner .popup_bottom label p {font-size:0.8125em; color:#666; line-height:20px;} .popup_inner .popup_bottom .close_btn {font-size:0.9375em; color:#333; line-height:20px; font-family:'Nanum Gothic'} @media screen and (max-width:1024px){ .popup_inner {width:calc(100% - 40px) !important; max-width:calc(100% - 40px); height:auto !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%)} .popup_inner .txt_box .title {font-size:1.47em;} .popup_inner .txt_box .txt {font-size:1em;} .popup_inner .popup_bottom label p {font-size:0.87em;} .popup_inner .popup_bottom .close_btn {font-size:1em;} } /* swiper */ /** * Swiper 5.3.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: January 11, 2020 */ @font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}