@charset "UTF-8";



@media screen and (min-width:1024px) {
.smp{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
.floating_smp{
display:none;
}
.flow-navi__wrapper{
display:none;
}
.floating{
position:fixed;
height:auto;
top:auto;
right:0.5%;
bottom:10%;
left:auto;
z-index:1000;
}
.floating ol{
}
.floating ol li{
width:100px;
margin:0 0 6px 0;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
p{
font-size:13px;
line-height:1.5em;
text-align:justify;
}
.floating_smp{
display:none;
}
.flow-navi__wrapper{
display:none;
}
.floating{
position:fixed;
height:auto;
top:auto;
right:0.5%;
bottom:3%;
left:auto;
z-index:1000;
}
.floating ol{
}
.floating ol li{
width:100px;
margin:0 0 10px 0;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
.flow-navi__wrapper{
display:none;
}
.floating{
display:none;
}
.floating_smp{
position:fixed;
width:100%;
height:auto;
top:auto;
right:0;
bottom:0;
left:0;
z-index:1000;
}
.floating_smp ol{
}
.floating_smp ol li{
width:50%;
margin:0;
float:left;
}
}









/* ==================================================

INDEX_AREA

================================================== */
@media screen and (min-width:1024px) {
#header_area_pc{
}
#header_area_smp{
display:none;
}
.header_area_pc_bg{
width:20%;
height:100%;
background-color:#FFF;
position:absolute;
top:0;
bottom:0;
left:0;
}
.header_area_pc_bg h1{
width:90%;
height:auto;
position:absolute;
top:3%;
right:5%;
bottom:15%;
left:5%;
padding:0 5%;
}
#header_area_pc h2{
width:50%;
height:auto;
position:absolute;
top:46%;
/*right:40%;*/
bottom:auto;
left:35%;
}
.header_area_pc_bg div.group{
width:80%;
position:absolute;
top:auto;
right:10%;
bottom:10%;
left:10%;
}
.header_area_pc_bg div.group ol{
text-align:center;
font-size:1.2vw;
font-weight:600;
letter-spacing:0.15em;
}
.header_area_pc_bg div.group ol li{
margin:1.2em auto;
}
.header_area_pc_bg div.group ol li span{
font-size:1.0vw;
}
.scroll_down{
}
.scroll_down a{
color:#FFF;
position:absolute;
bottom:20px;
left:56%;
z-index:2;
display:inline-block;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
text-decoration:none;
padding-top:70px;
}
.scroll_down a span{
position:absolute;
top:0;
left:56%;
width:24px;
height:24px;
margin-left:-12px;
border-left:1px solid #FFF;
border-bottom:1px solid #FFF;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:sdb 1.5s infinite;
animation:sdb 1.5s infinite;
box-sizing:border-box;
}
@-webkit-keyframes sdb{
0%{
-webkit-transform: rotate(-45deg) translate(0,0);
opacity: 0;
}
50%{
opacity:1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px,20px);
opacity: 0;
}
}
@keyframes sdb{
0%{
transform:rotate(-45deg) translate(0,0);
opacity:0;
}
50%{
opacity:1;
}
100%{
transform:rotate(-45deg) translate(-20px,20px);
opacity:0;
}
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
#header_area_pc{
display:none;
}
#header_area_smp{
}
#header_area_smp h1{
width:36%;
padding:3%;
position:absolute;
top:0;
right:29%;
bottom:auto;
left:29%;
background-color:#FFF;
}
#header_area_smp h2{
width:60%;
position:absolute;
top:44%;
/*right:45%;*/
bottom:auto;
left:20%;
}
.scroll_down{
}
.scroll_down a{
color:#FFF;
position:absolute;
bottom:50px;
left:50%;
z-index:2;
display:inline-block;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
text-decoration:none;
padding-top:70px;
}
.scroll_down a span{
position:absolute;
top:0;
left:50%;
width:24px;
height:24px;
margin-left:-12px;
border-left:1px solid #FFF;
border-bottom:1px solid #FFF;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:sdb 1.5s infinite;
animation:sdb 1.5s infinite;
box-sizing:border-box;
}
@-webkit-keyframes sdb{
0%{
-webkit-transform: rotate(-45deg) translate(0,0);
opacity: 0;
}
50%{
opacity:1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px,20px);
opacity: 0;
}
}
@keyframes sdb{
0%{
transform:rotate(-45deg) translate(0,0);
opacity:0;
}
50%{
opacity:1;
}
100%{
transform:rotate(-45deg) translate(-20px,20px);
opacity:0;
}
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
#header_area_pc{
display:none;
}
#header_area_smp{
}
#header_area_smp h1{
width:60%;
padding:5%;
position:absolute;
top:0;
right:20%;
bottom:auto;
left:20%;
background-color:#FFF;
}
#header_area_smp h2{
width:90%;
position:absolute;
top:44%;
/*right:42.5%;*/
bottom:auto;
left:5%;
}
.scroll_down{
}
.scroll_down a{
color:#FFF;
position:absolute;
bottom:13%;
left:45%;
z-index:2;
display:inline-block;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
text-decoration:none;
padding-top:70px;
}
.scroll_down a span{
position:absolute;
top:0;
left:50%;
width:24px;
height:24px;
margin-left:-12px;
border-left:1px solid #FFF;
border-bottom:1px solid #FFF;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-animation:sdb 1.5s infinite;
animation:sdb 1.5s infinite;
box-sizing:border-box;
}
@-webkit-keyframes sdb{
0%{
-webkit-transform: rotate(-45deg) translate(0,0);
opacity: 0;
}
50%{
opacity:1;
}
100% {
-webkit-transform: rotate(-45deg) translate(-20px,20px);
opacity: 0;
}
}
@keyframes sdb{
0%{
transform:rotate(-45deg) translate(0,0);
opacity:0;
}
50%{
opacity:1;
}
100%{
transform:rotate(-45deg) translate(-20px,20px);
opacity:0;
}
}
}









/* ==================================================

MESSAGE_AREA

================================================== */
@media screen and (min-width:1024px) {
.message_area_bg{
width:100%;
padding:80px 0;
background-color:#6FB92C;
color:#FFF;
}
.message_area{
width:1000px;
margin:0 auto;
}
.message_area h3{
font-size:24px;
font-weight:700;
font-style:italic;
line-height:1.5em;
margin-bottom:1.5em;
}
.message_area h3 span{
font-size:0.75em;
}
.message_area p{
font-size:16px;
font-weight:500;
line-height:1.65em;
overflow:hidden;
}
.message_area img{
width:20%;
float:right;
margin:80px 0 auto 30px;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.message_area_bg{
width:100%;
padding:50px 0;
background-color:#6FB92C;
color:#FFF;
}
.message_area{
width:98%;
margin:0 auto;
}
.message_area h3{
font-size:20px;
font-weight:700;
font-style:italic;
line-height:1.5em;
margin-bottom:1.5em;
}
.message_area h3 span{
font-size:0.75em;
}
.message_area p{
font-size:14px;
font-weight:500;
line-height:1.5em;
text-align:left;
}
.message_area div{
width:24%;
margin:0 auto 30px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.message_area_bg{
width:100%;
padding:30px 0;
background-color:#6FB92C;
color:#FFF;
}
.message_area{
width:90%;
margin:0 auto;
}
.message_area h3{
font-size:18px;
font-weight:700;
font-style:italic;
line-height:1.5em;
margin-bottom:1.5em;
}
.message_area h3 span{
font-size:0.75em;
}
.message_area p{
font-size:14px;
font-weight:500;
line-height:1.35em;
}
.message_area div{
width:40%;
margin:0 auto 20px;
}
}









/* ==================================================

INTERNSHIP_AREA

================================================== */
@media screen and (min-width:1024px) {
.internship_area{
width:1000px;
margin:80px auto 0;
padding:0;
}
.internship_area h2{
font-size:26px;
font-weight:500;
position:relative;
padding:0 45px;
text-align:center;
width:10em;
margin:1em auto 1.2em;
letter-spacing:0.2em;
text-indent:0.5em;
}
.internship_area h2:before{
content:'';
position:absolute;
top:50%;
display:inline-block;
width:44px;
height:4px;
background-color:#FFF;
transform:rotate(60deg);
}
.internship_area h2:after{
content:'';
position:absolute;
top:50%;
display:inline-block;
width:44px;
height:4px;
background-color:#FFF;
transform:rotate(-60deg);
}
.internship_area h2:before{
left:0;
}
.internship_area h2:after{
right:0;
}
.internship_area p{
text-align:center;
line-height:1.8em;
}
.internship_area h3{
width:84%;
margin:20px auto 0;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.internship_area{
width:100%;
margin:60px auto 0;
padding:0;
}
.internship_area h2{
font-size:23px;
font-weight:500;
position:relative;
padding:0 45px;
text-align:center;
width:10em;
margin:1em auto 1.2em;
letter-spacing:0.2em;
text-indent:0.5em;
}
.internship_area h2:before{
content:'';
position:absolute;
top:50%;
display:inline-block;
width:40px;
height:4px;
background-color:#FFF;
transform:rotate(60deg);
}
.internship_area h2:after{
content:'';
position:absolute;
top:50%;
display:inline-block;
width:40px;
height:4px;
background-color:#FFF;
transform:rotate(-60deg);
}
.internship_area h2:before{
left:0;
}
.internship_area h2:after{
right:0;
}
.internship_area p{
text-align:center;
line-height:1.8em;
}
.internship_area h3{
width:84%;
margin:15px auto 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.internship_area{
width:98%;
margin:50px auto 0;
padding:0;
}
.internship_area h2{
font-size:23px;
font-weight:500;
position:relative;
padding:0 45px;
text-align:center;
width:10em;
margin:1em auto 1.2em;
letter-spacing:0.2em;
text-indent:0.5em;
}
.internship_area h2:before{
content:'';
position:absolute;
top:50%;
display:inline-block;
width:40px;
height:4px;
background-color:#FFF;
transform:rotate(60deg);
}
.internship_area h2:after{
content:'';
position:absolute;
top:50%;
display:inline-block;
width:40px;
height:4px;
background-color:#FFF;
transform:rotate(-60deg);
}
.internship_area h2:before{
left:0;
}
.internship_area h2:after{
right:0;
}
.internship_area p{
text-align:center;
line-height:1.5em;
}
.internship_area h3{
width:90%;
margin:15px auto 0;
}
}









/* ==================================================

note_AREA

================================================== */
@media screen and (min-width:1024px) {
.note_area{
width:1000px;
margin:80px auto 0;
padding:0;
}
.note_area h4{
width:40%;
margin:80px auto 0;
padding:0;
}
.note_area ul{
width:84%;
margin:0 auto;
}
.note_area ul li:first-child{
width:45%;
margin:20px 5% 0 0;
float:left;
}
.note_area ul li{
width:45%;
margin:20px 0 0 5%;
float:left;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.note_area{
width:100%;
margin:60px auto 0;
padding:0;
}
.note_area h4{
width:40%;
margin:60px auto 0;
padding:0;
}
.note_area ul{
width:84%;
margin:0 auto;
}
.note_area ul li:first-child{
width:45%;
margin:20px 5% 0 0;
float:left;
}
.note_area ul li{
width:45%;
margin:20px 0 0 5%;
float:left;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.note_area{
width:100%;
margin:40px auto 0;
padding:0;
}
.note_area h4{
width:80%;
margin:20px auto 0;
padding:0;
}
.note_area ul{
width:84%;
margin:0 auto;
}
.note_area ul li{
width:100%;
margin:20px auto 0;
}
}









/* ==================================================

FACILITY_AREA

================================================== */
@media screen and (min-width:1024px) {
.facility_area{
width:100%;
padding:50px 0;
}
.facility{
width:1000px;
margin:50px auto;
}
.facility h3{
width:40%;
margin:0 auto 20px 0;
}
.facility dl{
}
.facility dl dt{
width:45%;
margin:0;
padding:0;
float:left;
}
.facility dl dt p{
padding:2em 1em 0 0;
}
.facility dl dd{
width:55%;
margin:0;
padding:0;
float:right;
}
.facility_area div.facility01_bg{
width:100%;
background-color:#D9EEF4;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility02_bg{
width:100%;
background-color:#FFFCD5;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility03_bg{
width:100%;
background-color:#FBE1E0;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility04_bg{
width:100%;
background-color:#DFEDCE;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility05_bg{
width:100%;
background-color:#FDEAD3;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility06_bg{
width:100%;
background-color:#FAD9E7;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility07_bg{
width:100%;
background-color:#D3DFF2;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility08_bg{
width:100%;
background-color:#D8CAE3;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility09_bg{
width:100%;
background-color:#A2D7DD;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility10_bg{
width:100%;
background-color:#F2F2B0;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility11_bg{
width:100%;
background-color:#F6BFBC;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility12_bg{
width:100%;
background-color:#FFE9A9;
padding:30px 0;
margin-top:50px;
}
.facility_area div.detail{
width:1000px;
margin:0 auto;
}
.facility_area div.detail dl{
width:64%;
margin:0 auto;
}
.facility_area div.detail dl dt{
width:40%;
margin:0 5% 0 0;
float:left;
}
.facility_area div.detail dl dd{
width:55%;
margin:0;
float:left;
padding-top:20px;
}
.facility_area div.detail dl dd h5{
font-size:15px;
font-weight:500;
margin-bottom:0.5em;
letter-spacing:0.05em;
}
.facility_area div.detail dl dd h4{
font-size:18px;
font-weight:500;
margin-bottom:1em;
letter-spacing:0.05em;
}
.facility_area div.detail dl dd p{
word-spacing:1em;
line-height:1.7em;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.facility_area{
width:100%;
padding:20px 0 25px;
}
.facility{
width:98%;
margin:60px auto;
}
.facility h3{
width:50%;
margin:0 auto 20px 0;
}
.facility dl{
}
.facility dl dt{
width:45%;
margin:0;
padding:0;
float:left;
}
.facility dl dt p{
font-size:13px;
line-height:1.35em;
padding:1.5em 1.5em 0 0;
}
.facility dl dd{
width:55%;
margin:0;
padding:0;
float:right;
}
.facility_area div.facility01_bg{
width:100%;
background-color:#D9EEF4;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility02_bg{
width:100%;
background-color:#FFFCD5;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility03_bg{
width:100%;
background-color:#FBE1E0;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility04_bg{
width:100%;
background-color:#DFEDCE;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility05_bg{
width:100%;
background-color:#FDEAD3;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility06_bg{
width:100%;
background-color:#FAD9E7;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility07_bg{
width:100%;
background-color:#D3DFF2;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility08_bg{
width:100%;
background-color:#D8CAE3;
padding:30px 0;
margin-top:35px;
}
.facility_area div.facility09_bg{
width:100%;
background-color:#A2D7DD;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility10_bg{
width:100%;
background-color:#F2F2B0;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility11_bg{
width:100%;
background-color:#F6BFBC;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility12_bg{
width:100%;
background-color:#FFE9A9;
padding:30px 0;
margin-top:50px;
}
.facility_area div.detail{
width:98%;
margin:0 auto;
}
.facility_area div.detail dl{
width:80%;
margin:0 auto;
}
.facility_area div.detail dl dt{
width:40%;
margin:0 5% 0 0;
float:left;
}
.facility_area div.detail dl dd{
width:55%;
margin:0;
float:left;
padding-top:20px;
}
.facility_area div.detail dl dd h5{
font-size:14px;
font-weight:500;
margin-bottom:0.5em;
letter-spacing:0.05em;
}
.facility_area div.detail dl dd h4{
font-size:17px;
font-weight:500;
margin-bottom:1em;
letter-spacing:0.05em;
}
.facility_area div.detail dl dd p{
word-spacing:1em;
line-height:1.7em;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.facility_area{
width:100%;
padding:0px 0 20px;
}
.facility{
width:98%;
margin:50px auto;
}
.facility h3{
width:90%;
margin:0 auto 10px 5%;
}
.facility dl{
}
.facility dl dt{
width:90%;
margin:0 auto;
padding:0;
}
.facility dl dt p{
font-size:14px;
line-height:1.5em;
padding:1em 0;
}
.facility dl dd{
width:90%;
margin:0 auto;
padding:0;
}
.facility_area div.facility01_bg{
width:100%;
background-color:#D9EEF4;
padding:20px 0 13px;
}
.facility_area div.facility02_bg{
width:100%;
background-color:#FFFCD5;
padding:20px 0 13px;
}
.facility_area div.facility03_bg{
width:100%;
background-color:#FBE1E0;
padding:20px 0 13px;
}
.facility_area div.facility04_bg{
width:100%;
background-color:#DFEDCE;
padding:20px 0 13px;
}
.facility_area div.facility05_bg{
width:100%;
background-color:#FDEAD3;
padding:20px 0 13px;
}
.facility_area div.facility06_bg{
width:100%;
background-color:#FAD9E7;
padding:20px 0 13px;
}
.facility_area div.facility07_bg{
width:100%;
background-color:#D3DFF2;
padding:20px 0 13px;
}
.facility_area div.facility08_bg{
width:100%;
background-color:#D8CAE3;
padding:20px 0 13px;
}
.facility_area div.facility09_bg{
width:100%;
background-color:#A2D7DD;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility10_bg{
width:100%;
background-color:#F2F2B0;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility11_bg{
width:100%;
background-color:#F6BFBC;
padding:30px 0;
margin-top:50px;
}
.facility_area div.facility12_bg{
width:100%;
background-color:#FFE9A9;
padding:30px 0;
margin-top:50px;
}
.facility_area div.detail{
width:98%;
margin:0 auto;
}
.facility_area div.detail dl{
width:100%;
margin:0 auto;
}
.facility_area div.detail dl dt{
width:70%;
margin:0 auto;
}
.facility_area div.detail dl dd{
width:100%;
margin:0 auto;
padding-top:5px;
}
.facility_area div.detail dl dd h5{
font-size:14px;
font-weight:500;
text-align:center;
margin-bottom:0.1em;
letter-spacing:0.05em;
}
.facility_area div.detail dl dd h4{
font-size:17px;
font-weight:500;
text-align:center;
margin-bottom:1em;
letter-spacing:0.05em;
}
.facility_area div.detail dl dd p{
font-size:15px;
line-height:1.8em;
text-align:center;
}
}









/* ==================================================

FOOTER_AREA

================================================== */
@media screen and (min-width:1024px) {
.footer_area{
width:1000px;
margin:0 auto;
padding:10px 0 10px;
}
.footer_area div#logo{
width:300px;
margin:0px auto 30px;
}
.footer_area p{
font-size:15px;
text-align:center;
letter-spacing:0.05em;
color:#6FB92C;
}
.sns{
width:50px;
height:auto;
position:fixed;
top:auto;
right:0;
bottom:10%;
left:auto;
z-index:2000;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.footer_area{
width:98%;
margin:0 auto;
padding:10px 0 10px;
}
.footer_area div#logo{
width:240px;
margin:0px auto 20px;
}
.footer_area p{
font-size:14px;
text-align:center;
letter-spacing:0.05em;
color:#6FB92C;
}
.sns{
width:50px;
height:auto;
position:fixed;
top:auto;
right:0;
bottom:10%;
left:auto;
z-index:2000;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.footer_area{
width:98%;
margin:0 auto;
padding:10px 0 10px;
}
.footer_area div#logo{
width:60%;
margin:0 auto 15px;
}
.footer_area p{
font-size:13px;
line-height:1.5em;
text-align:center;
letter-spacing:0.05em;
color:#6FB92C;
}
.sns{
width:10%;
height:auto;
position:fixed;
top:auto;
right:0;
bottom:10%;
left:auto;
z-index:2000;
}
}









/* ==================================================

STAFF

================================================== */
@media screen and (min-width:1024px) {
.people{
margin:50px 0;
}
.smile__wrap{
display:flex;
overflow:hidden;
width:100%;
margin:0;
}
.smile__list{
display:flex;
list-style:none;
}
.smile__item{
width:130px;
}
.smile__item > img{
width:100%;
}
.smile__list--left{
animation:infinity-scroll-left 150s infinite linear 3.5s both;
}
@keyframes infinity-scroll-left{
from{
transform:translateX(0);
}
to{
transform:translateX(-100%);
}
}
@keyframes infinity-scroll-right{
from{
transform: translateX(-100%);
}
to{
transform: translateX(0%);
}
}
.smile__list--right{
animation :infinity-scroll-right 150s infinite linear 3.5s both;
}
_:-ms-lang(x)::-ms-backdrop,
.smile{
display:-ms-grid;
overflow:hidden;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.people{
margin:35px 0;
}
.smile__wrap{
display:flex;
overflow:hidden;
width:100%;
margin:0;
}
.smile__list{
display:flex;
list-style:none;
}
.smile__item{
width:100px;
}
.smile__item > img{
width:100%;
}
.smile__list--left{
animation:infinity-scroll-left 150s infinite linear 3.5s both;
}
@keyframes infinity-scroll-left{
from{
transform:translateX(0);
}
to{
transform:translateX(-100%);
}
}
@keyframes infinity-scroll-right{
from{
transform: translateX(-100%);
}
to{
transform: translateX(0%);
}
}
.smile__list--right{
animation :infinity-scroll-right 150s infinite linear 3.5s both;
}
_:-ms-lang(x)::-ms-backdrop,
.smile{
display:-ms-grid;
overflow:hidden;
}
.index_area h6{
width:20%;
margin:30px auto 50px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.people{
margin:30px 0;
}
.smile__wrap{
display:flex;
overflow:hidden;
width:100%;
margin:0;
}
.smile__list{
display:flex;
list-style:none;
}
.smile__item{
width:70px;
}
.smile__item > img{
width:100%;
}
.smile__list--left{
animation:infinity-scroll-left 150s infinite linear 3.5s both;
}
@keyframes infinity-scroll-left{
from{
transform:translateX(0);
}
to{
transform:translateX(-100%);
}
}
@keyframes infinity-scroll-right{
from{
transform: translateX(-100%);
}
to{
transform: translateX(0%);
}
}
.smile__list--right{
animation :infinity-scroll-right 150s infinite linear 3.5s both;
}
_:-ms-lang(x)::-ms-backdrop,
.smile{
display:-ms-grid;
overflow:hidden;
}
.index_area h6{
width:20%;
margin:30px auto 50px;
}
}