@charset "utf-8";
.culture-container{ width: 100vw; height: 100vh; overflow: hidden;}
.culture-row{ display: grid; width: 100vw; height: 100vh; background: #fff;}

.culture-row .cap{ position: relative; z-index: 1; display: grid; justify-items: center; grid-gap: 2rem;}
.culture-row .cap i{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; font-style: normal;}
.culture-row .cap i:before{ content: ''; width: 4.5rem; height: 6.5rem; background: url('../images/logo.svg') center center no-repeat; background-size: 100% auto;}
.culture-row .cap i:after{ content: 'huaqiang\A construction'; white-space: pre; text-transform: uppercase; text-align: center; font-size: 1rem; line-height: 1; color: #fff; font-weight: bold; margin-top: 1em;}
.culture-row .cap .cn{ font-size: 2.5rem; line-height: 1.5; color: #fff; font-weight: bold;}
.culture-row .cap .en{ font-size: 5rem; line-height: 1; color: #fff; font-weight: bold; text-transform: uppercase; font-family: 'Dubai'; white-space: nowrap;}

.culture-row.dark .cap i:after{ color: #3274CF;}
.culture-row.dark .cap .cn{ color: #222;}
.culture-row.dark .cap .en{ color: #3274CF;}

.culture-row .slo{ display: grid; justify-items: center; grid-gap: 2rem;}
.culture-row .slo .cn{ font-size: 2rem; line-height: 2; color: #fff; font-weight: bold;}
.culture-row .slo .en{ font-size: 1rem; line-height: 1.5; color: #fff; font-weight: bold; text-transform: uppercase; font-family: 'Dubai';}

.culture-row.dark .slo .cn{ color: #222;}
.culture-row.dark .slo .en{ color: #545454;}

.culture-row .grid{ display: grid; grid-gap: 2rem; justify-items: center; width: 70%; text-align: center;}


/* culture */
.culture{ background: url('../images/c_bg.webp') center center no-repeat; background-size: cover;}
.culture .content{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.culture .content .cap{ text-shadow: 0 6px 16px rgba(0,0,0,.5);}
.culture .content .cap .cn{ font-size: 5rem;}

/* idea */
.idea{ grid-template-columns: repeat(2,1fr);}
.idea .cover{ position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;}
.idea .cover .img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; background: url('../images/c_idea.webp') center center no-repeat; background-size: cover;}
.idea .content{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background: #3274CF;}
.idea .content a.more{ padding: 0 2em; margin-top: 4em; font-size: 1.25rem; font-weight: bold; line-height: 2.5; font-family: 'Dubai'; color: #3274CF; text-transform: uppercase; background: #fff;}

/* vision */
.vision{ grid-template-rows: repeat(2,1fr);}
.vision .cover{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; background: url('../images/c_vision.webp') center center no-repeat; background-size: cover;}
.vision .content{ display: grid; grid-template-columns: repeat(6,1fr); justify-items: center; align-items: center;}
.vision .content .itm{ display: grid; grid-gap: 1.5rem; line-height: 1; justify-items: center; text-align: center;}
.vision .content .itm i{ font-size: 4rem; color:#3274CF}
.vision .content .itm .cn{ font-size: 1.75rem; font-weight: bold; color: #222;}
.vision .content .itm .en{ font-size: 1rem; font-weight: bold; line-height: 1.5; color: #666; text-transform: uppercase;}

/* worker */
.worker{ grid-template-columns: repeat(12,1fr); grid-gap: 3rem; padding: 0 5vw}
.worker .content{ grid-column: span 9;}
.worker .title{ position: relative; grid-column: span 3; display: flex; justify-content: center; align-items: center; width: calc( 100% + 5vw); background: url('../images/c_worker.webp') center center no-repeat; background-size: cover;}
.worker .title:after{ content: ''; position: absolute; width: 100%; height: 100%; background: rgba(50, 116, 207, .9);}
.worker .title .grid{ position: relative; z-index: 1; width: 100%;}
.worker .title .cate{ display: flex; margin-top: 4rem;}
.worker .title .cate a{ font-size: 1.25rem; line-height: 2; color: #fff; font-weight: bold; padding: 0 1em; margin: 0 .5em}
.worker .title .cate a.on{ background: #fff; color: #3274CF;}
.worker .content{ display: flex; justify-content: center; align-items: center;}
.worker .content .box{ display: grid; grid-template-columns: 5fr 4fr; grid-gap: 3rem; align-items: center; width: 100%;}
.worker .content .left{ display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: 2fr 1fr; grid-gap: 3rem; height: 100%;}
.worker .content .right{ display: grid; grid-template-rows: repeat(2,1fr); grid-gap: 3rem;}
.worker .content .itm{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: #000;}
.worker .content .itm .thumb{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%;}
.worker .content .left .itm{ width: 100%; height: 100%; padding: 0;}
.worker .content .left .itm:nth-child(1){ grid-column: span 2;}

/* care */
.care{ grid-template-columns: repeat(2,1fr);}
.care .title{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; text-align: center;}
.care .content{ width: 100%; overflow: hidden;}
.care .content .list{ width: 100%; height: 100%;}
.care .content .list .itm .box{ display: grid; grid-template-rows: 60% 40%; width: 100%; height: 100%;}
.care .content .list .itm .box .thumb{ width: 100%; height: 100%;}
.care .content .list .itm .box .thumb .img{ width: 100%; height: 100%;}
.care .content .list .itm .box .info{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding:2.5vw; background: #3274CF;}
.care .content .list .itm .box .info .con{ display: grid; grid-gap: 1.5rem;}
.care .content .list .itm .box .info .con .date{ display: flex; flex-flow: column nowrap; color: #fff}
.care .content .list .itm .box .info .con .date .md{ font-size: 2rem; font-family: 'Dubai'; line-height: 1;}
.care .content .list .itm .box .info .con .date .y{ font-size: 1.25rem; color: #fff; line-height: 1;}
.care .content .list .itm .box .info .con .tit{ font-size: 1.5rem; color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.care .content .list .itm .box .info .con .desc{ font-size: 1.25rem; color: rgba(255,255,255,.5); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}
.care .content .list .itm .box .info .con .view{ font-size: 1.25rem; color: #fff; text-transform: uppercase; text-align: right;}

/* social */
.social{ grid-template-columns: repeat(12,1fr); grid-gap: 3rem; padding: 0 5vw}
.social .title{ grid-column: span 6; display: flex; flex-flow: column nowrap; justify-content: center;}
.social .title .grid{ width: 100%; justify-items: normal; text-align: left;}
.social .title .grid .cap{ justify-items: normal;}
.social .title .grid .slo{ justify-items: normal;}
.social .content{ position: relative; grid-column: span 5; display: flex; justify-content: center; align-items: center;}
.social .content .shadow{ content: ''; position: absolute; bottom: 10%; left: 0; width: 100%; height: 3.5rem; border-radius: 50%; background: rgba(0,0,0,.1); filter: blur(1rem);}
.social .content .box{ position: relative; width: 80%; height: 0; padding-bottom: 80%; transform: rotate(45deg);}
.social .content .list{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); grid-gap: 1.5rem;}
.social .content .list .itm{ width: 100%; height: 100%; background: #000;}
.social .content .list .itm .thumb{ width: 100%; height: 100%;}
.social .content .list .itm .thumb .img{ width: 100%; height: 100%;}
/* song */
.song{ }
.song .cover{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background: #000;}
.song .cover .img{ width: 100%; height: 100%; background: url('../images/c_song.webp') center center no-repeat; background-size: cover;}
.song .content{ position: relative; z-index: 1; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center;}

.scroll-tip{ position: fixed; z-index: 9; right: 0; bottom: 2.5vw; left: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 3rem; margin: auto; font-size: 1.25rem; color: #c00; font-weight: bold; line-height: 1;}
.scroll-tip i{ display: flex; justify-content: center; align-items: center; font-size: 3rem; line-height: 1; height: 1.5rem; overflow: hidden; animation: c_d 2s infinite linear;}
@keyframes c_d{ 
  0% { position: relative; top: 0; opacity: 0; } 
  50% { position: relative; top: 0.5rem; opacity: 1;} 
  100% {position: relative; top: 1rem; opacity: 0;}
}

.header{ position: fixed; z-index: 99; top: 0; right: 0; display: flex; justify-content: space-between; align-items: center; width: 100vw; height: 10vw; padding: 0 5vw;}
.header .logo{ width: 10vw; height: 3.125vw; background: url('../images/logo-f.svg') left center no-repeat; background-size: auto 100%; opacity: 1; transition: all .5s;}
.header .menu{ display: flex; flex-flow: column nowrap; justify-content: space-between; width: 4rem; height: 2.5rem;}
.header .menu i{ width: 100%; height: 1px; background: #fff; transition: all .5s;}
.header .menu span{ position: relative; font-size: 0.875rem; line-height: 1; text-transform: uppercase; color: #fff; text-align: right; transition: all .5s;}
.header .menu span:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; height: 1px; background: #fff; margin: auto; transition: all .5s;}

.header.act .logo{ opacity: 0;}

.header.dark .menu i{ background: #3274CF;}
.header.dark .menu span{ color: #3274CF;}
.header.dark .menu span:before{ background: #3274CF;}

.culture-pagination{ position: fixed; z-index: 10; top: 50%; right: 0; display: flex; flex-flow: column nowrap; align-items: flex-end; width: auto; height: auto; transform: translateY(-50%);}
.culture-pagination span{ position: relative; width: 1rem!important; height: auto!important; border-radius: 0!important; background: none!important; padding: .5rem 0; transition: all .5s;}
.culture-pagination span:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 100%; height: 1px; margin: auto; background: #fff!important; transition: all .5s;}
.culture-pagination span.swiper-pagination-bullet-active{ width: 2rem!important;}

.culture-pagination.dark span:after{ background: #c00!important;}

/* by_container */

.by_container{ width: 100%; height: auto;}
.by_container .row{ display: grid; grid-gap: 2.5vw; width: 100%; padding: 5vw 15vw;}
.by_container .row .title{ display: grid; grid-gap: .5rem; text-align: center; line-height: 1.25;}
.by_container .row .title .cn{ font-size: 2.25rem; color: #222;}
.by_container .row .title .en{ font-size: 1rem; color: rgba(0,0,0,.5); text-transform: uppercase;}

.by_container .row .cate{ display: flex; justify-content: center; align-items: center;}
.by_container .row .cate a{ font-size: 1.125rem; line-height: 2; padding: .25em 1.5em; margin: 0 .5em; color: #333; border-radius: 9999px;}
.by_container .row .cate a.on{ color: #fff; background: #3274CF;}

.by_container .row .content{ display: grid; width: 100%;}

.by_container .banner{ width: 100vw; height: 23vw; margin-top: 100px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background: url('../images/tebg.png') center center no-repeat; background-size: cover;}
.by_container .banner .cn{ font-size: 2rem; line-height: 1.5; font-weight: bold; color: #fff;}
.by_container .banner .en{ font-size: 1.125rem; line-height: 1.5; font-weight: bold; color: #fff;}

.property{ background: url('../images/t_property.png') center center no-repeat #fff; background-size: cover;}
.property .content{ grid-gap: 5vw;}
.property .content .list{ width: calc( 100% + 1rem); margin-left: -.5rem;}
.property .content .list .itm{ padding: 0 .5rem;}
.property .content .list .itm .box{ display: grid; grid-template-areas: 'a' 'b'; padding: 1.25rem; background: #fff; transition: all .5s;}
.property .content .list .itm .box .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; overflow: hidden; transition: all .5s;}
.property .content .list .itm .box .thumb .img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
.property .content .list .itm .box .info{ display: grid; grid-gap: 1.25rem; justify-items: center; padding: 1.5rem 0; transition: all .5s;}
.property .content .list .itm .box .info .tit{ width: 100%; font-size: 1.5rem; line-height: 1.5; color: #222; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all .5s;}
.property .content .list .itm .box .info .line{ width: 3rem; height: 3px; background: #3274cf; transition: all .5s;}
.property .content .list .itm .box .info .desc{ font-size: 1.125rem; line-height: 1.75; color: #999; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden; transition: all .5s;}
.property .content .list .itm:hover .box{ background: #3274cf;}
.property .content .list .itm:hover .box .thumb{ grid-area: b;}
.property .content .list .itm:hover .box .info{ grid-area: a;}
.property .content .list .itm:hover .box .info .tit{ color: #fff;}
.property .content .list .itm:hover .box .info .line{ background: #fff;}
.property .content .list .itm:hover .box .info .desc{ color: #fff;}

.property .content .arrows{ display: flex; justify-content: center; align-items: center;}
.property .content .arrows .prev,
.property .content .arrows .next{ width: 10rem; height: 2.5rem; background: url('../images/t-r.png') center center no-repeat #f2f6ff;}
.property .content .arrows .prev{ background: url('../images/t-l.png') center center no-repeat #3274cf;}

.course.row{ background: url('../images/t_course.png') center top no-repeat #f1f1f1; grid-gap: 5vw; padding-bottom: 0;}
.course .cover{ display: grid; grid-gap: 1.5rem;}
.course .cover h1{ font-size: 3rem; line-height: 1.5; font-weight: normal; color: #fff;}
.course .cover h1 span{ font-size: 1.5rem;}
.course .cover h5{ font-size: 1.125rem; line-height: 2; font-weight: normal; color: #fff;}

.course .content{ grid-gap: 1.5rem; padding: 3rem 4rem; background: #fff;}
.course .content h1{ font-size: 1.5rem; line-height: 1.5; font-weight: normal; color: #3274CF}
.course .content h5{ font-size: 1.125rem; line-height: 2; font-weight: normal; color: #666;}

.course .content .list{ display: flex; justify-content: space-between; align-items: center;}

.results{ background: #f1f1f1;}
.results .title .cn{ color:#3274CF}
.results .content .list{ display: grid; grid-template-columns: repeat(4,1fr); width: 100%; grid-gap: 1rem;}
.results .content .list .itm{ position: relative; z-index: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 2rem; padding-bottom: 5.5rem; background: #fff; transition: all .5s;}
.results .content .list .itm .info{ position: absolute; z-index: 2; bottom: 2rem; left: 2rem; width: calc(100% - 4rem); font-size: 1.25rem; line-height: 2; text-align: center; color: #222; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all .5s;}
.results .content .list .itm .thumb{ position: relative; z-index: 1;width: 100%; height: 0; padding-bottom: calc(100% / 3 * 4); overflow: hidden; transition: all .5s;}
.results .content .list .itm .thumb .img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
.results .content .list .itm .mask{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; opacity: 0; background: #c00; transition: all .5s;}
.results .content .list .itm:hover{ z-index: 1; transform: scale(1.1);}
.results .content .list .itm:hover .info{ color: #fff;}
.results .content .list .itm:hover .thumb{ opacity: 0; }
.results .content .list .itm:hover .mask{ opacity: 1; }


.row.technology{ background: url('../images/t_technology.png') center center no-repeat; background-size: cover;}
.row.technology .title .cn{ color: #fff;}
.row.technology .title .en{ color: rgba(255,255,255,.5);}
.technology .content .list{ display: grid; grid-template-columns: repeat(4,1fr); width: 100%;}
.technology .content .list .itm{ position: relative; z-index: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 2rem; padding-top: 5.5rem; background: #fff; transition: all .5s;}
.technology .content .list .itm .info{ position: absolute; z-index: 2; top: 2rem; left: 2rem; width: calc(100% - 4rem); font-size: 1.25rem; line-height: 2; text-align: center; color: #222; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all .5s;}
.technology .content .list .itm .thumb{ position: relative; z-index: 1;width: 100%; height: 0; padding-bottom: calc(100% / 3 * 4); overflow: hidden; transition: all .5s;}
.technology .content .list .itm .thumb .img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.technology .content .list .itm .mask{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; opacity: 0; background: #c00; transition: all .5s;}
.technology .content .list .itm:hover{ z-index: 1; transform: scale(1.1);}
.technology .content .list .itm:hover .info{ color: #fff;}
.technology .content .list .itm:hover .thumb{ opacity: 0; }
.technology .content .list .itm:hover .mask{ opacity: 1; }

.idea-banner{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100vw; height: 30vw; margin-top: 100px; background: url('../images/idea-bg.jpg') center center no-repeat; background-size: cover;}
.idea-banner .en{ font-size: 3.5rem; line-height: 1.5; color: #fff; font-family: 'ac'; text-transform: uppercase; font-weight: bold;}
.idea-banner .cn{ font-size: 2rem; line-height: 1.5; color: #fff; font-weight: bold;}

.idea-wrap{ width: 100vw; padding: 2.5vw 0;}

.list-idea{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; width: 87.5vw; margin: auto;}
.list-idea .itm{ position: relative; padding: 10vw 2.5vw 2.5vw; background: #f5f5f5; overflow: hidden;}
.list-idea .itm .thumb{ position: absolute; z-index: 0; top: 2.5vw; right: 0; left: 0; width: 60%; height: 0; padding-bottom: 60%; margin: auto; box-shadow: inset -16px 16px 16px rgba(0, 0, 0, .2); border-radius: 50%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.list-idea .itm .thumb:after{ content: ''; position: absolute; top: 55%; right: 55%; width: 100%; height: 100%; transform: rotate(45deg); border-top: 2px solid #3375D0; background: #f5f5f5;}
.list-idea .itm .info{ position: relative; z-index: 2; display: grid; grid-gap: 1.25vw; font-family: 'ac';}
.list-idea .itm .info .line{ width: 6rem; height: 3px; background: none;}
.list-idea .itm .info .en{ font-size: 2rem; line-height: 1.25; text-transform: uppercase; color: #111}
.list-idea .itm .info .cn{ font-size: 2rem; line-height: 1.5; color: #222}
.list-idea .itm .info .slo{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: #222}
.list-idea .itm .info .con{ font-size: 1rem; line-height: 2; color: #666;}
.list-idea .itm .num{ position: absolute; right: 2.5vw; bottom: 2.5vw; font-size: 4rem; line-height: 1; font-family: 'ac'; text-align: right; color: #222}

@media screen and (min-width:1921px){
  :root{
    font-size: 20px;
  }
}
@media screen and (max-width:1680px){
  :root{
    font-size: 14px;
  }
  .by_container .row{ padding: 5vw 10vw;}
}
@media screen and (max-width:1440px){
  :root{
    font-size: 12px;
  }
}
@media screen and (max-width:1280px){
  .by_container .row{ grid-gap: 5vw; padding: 5vw;}
}
@media screen and (max-width:1024px){
  .course .content{ padding: 5vw}
  .course .content .list{ flex-flow: row wrap;}

  .by_container .row .cate a{ padding: 0 .75em}
  .by_container .row .content .list{ grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}
  
  .results .content .list .itm{ padding: 3vw; padding-bottom: 11vw;}
  .results .content .list .itm .info{ bottom: 3vw; line-height: 6vw;}
  
  .technology .content .list .itm{ padding: 3vw; padding-top: 11vw;}
  .technology .content .list .itm .info{ top: 3vw; line-height: 6vw;}

  .header{ height: auto; padding: 5vw;}
  .header .logo{ width: 50%; height: 10vw;}
  .header .menu{ width: 40px; height: 5vw;}
  .header .menu span:before{ width: 20%;}

  .scroll-tip{ display: none;}
  .culture-row{ padding-top: 50px!important;}
  .culture-row .cap{ grid-gap: .5rem;}
  .culture-row .cap .cn{ font-size: 2rem;}
  .culture-row .cap .en{ font-size: 1.5rem;}
  .culture-row .cap .en br{ display: none;}
  .culture-row .cap i:before{ width: 10vw; height: 20vw;}
  .culture-row .cap i:after{ font-size: 0.5rem; margin-top: 0;}
  .culture-row .slo{ grid-gap: 0.5rem;}
  .culture-row .slo .cn{ font-size: 1.25rem; line-height: 1.5;}
  .culture-row .slo .en{ font-size: .75rem;}
  .culture-row .grid{ grid-gap: 0.5rem; width: 90%;}

  .idea{ grid-template-columns: 1fr; grid-template-rows: repeat(2,1fr);}
  .idea .cover{ width: 100vw; height: 50vh;}
  .idea .content a.more{ margin-top: 1em; font-size: 0.875rem;}

  .vision .content{ grid-template-columns: repeat(3,1fr);}
  .vision .content .itm{ grid-gap: 1rem;}
  .vision .content .itm i{ font-size: 2.5rem;}
  .vision .content .itm .cn{ font-size: 1.25rem;}
  .vision .content .itm .en{ font-size: 0.75rem;}

  .care{ grid-template-columns: 1fr; grid-template-rows: repeat(2,1fr);}
  .care .content .list .itm .box .info .con .date{ display: none;}
  .care .content .list .itm .box .info .con .view{ text-align: center; font-size: 0.875rem;}

  .social{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-gap: 0;}
  .social .title{ grid-column: span 1; padding: 10vw 0;}
  .social .content{ grid-column: span 1; width: 80%; margin: auto;}
  .social .content .shadow{ bottom: -15vw;}

  .worker{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'a' 'b'; grid-gap: 0; padding: 0;}
  .worker .title{ grid-column: span 1; grid-area: a; padding: 10vw 0;}
  .worker .title .cate{ margin-top: 2rem;}
  .worker .content{ grid-column: span 1; grid-area: b; padding: 5vw}
  .worker .content .box{ height: 100%; grid-template-columns: 1fr; grid-gap: 5vw;}
  .worker .content .box .left{ grid-template-columns: repeat(2,1fr); grid-template-rows: auto; grid-gap: 5vw;}
  .worker .content .box .left .itm:first-child{ grid-column: span 2!important; height: 0%!important; padding-bottom: 40% !important; }
  .worker .content .box .right{ height: 100%; grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}
  .worker .content .box .itm{ grid-column: span 1!important; width: 100% !important; height: 0 !important; padding-bottom: 60% !important;}

  .idea-banner{ height: 50vw; margin-top: 50px;}
  .idea-banner .en{ font-size: 2rem;}

  .idea-wrap{ padding: 5vw 0;}
  
  .list-idea{ grid-template-columns: 1fr; width: 90vw; grid-gap: 5vw;}
  .list-idea .itm{ padding: 50vw 10vw 10vw}
  .list-idea .itm .thumb{ top: 10vw;}
}