/* --------------------
   main
-------------------- */
#main { height: 1080px;}
#main .back {
  position: absolute;
  width: 100%;
  height: 1080px;}
#main .back div {
  z-index: -1;
  position: absolute;}
#main .back div.back1 { bottom: 0; left: 0;}
#main .back div.back2 { bottom: 0; right: 0;}
#main .back div.back3 { top: 0; right: 0;}
#main .photo {
  width: 840px;
  z-index: 1;
  max-width: 80vw;
  position: absolute;
  top: 140px; right: 0;}
#main .textbox {
  pointer-events: none;
  position: relative;
  z-index: 2;
  width: 50vw;}
#main h1 { padding: 320px 0 40px;}
#main p { padding: 24px 0 60px;}

@media screen and (max-width: 1280px){
  #main .back,#main { height: calc(70vw + 400px);}
  #main .photo { top: 4vw;max-width: 85vw;}
  #main .wrap,#main .contents { height: 100%;}
  #main .textbox { position: absolute;bottom: 80px;width: 85%;}
  #main h1 { padding-top: 0;}}
@media screen and (max-width: 768px){
  #main .back,#main { height: calc(90vw + 340px);}
  #main h1 { padding-bottom:0.5em;}
  #main p { padding: 0.5em 0 2em;}}
@media screen and (max-width: 480px){
  #main .photo { top: 15vw;max-width: 90vw;}
  #main .textbox { width: 90vw;}
  #main .back,#main { height: calc(130vw + 350px);}}

/* --------------------
   news
-------------------- */
#news {
  padding: 140px 0 340px;
  color: #fff;
  position: relative;
  background-image: linear-gradient(0deg, #27c4fc, #0080ff);}
#news h1 span {
  line-height: 1.5;
  display: block;
  padding-bottom: 80px;}
#news .contents {
  gap:60px;
  justify-content: space-between;
  display: flex;} 
#news .area {
  padding: 20px 40px;
  width: 780px;
  background: rgba(41,41,41,0.2);
  border-radius: 20px;}
#news .area .item {
  padding-right: 30px;
  display: flex;
  gap:20px;
  border-bottom: 1px solid #7AAFED;
  color: #fff;
  background: url("../images/common/arrow-right.png") no-repeat center right;
  background-size: 20px auto;
  height: 80px;
  align-items: center;}
#news .area .item.b0 { border: none;}
#news .area .item p.category {
  width: 100px;
  border:1px solid #FFFFFF;
  border-radius: 12px;
  height: 24px;
  text-align: center;
  line-height: 18px;
  padding: 2px 10px;}
#news .area .item p.txs-18 { flex: 1; line-height: 1.2;}

@media screen and (max-width: 1280px){
  #news .contents { display: block;}
  #news h1 span { padding-bottom: 60px;}
  #news .textbox { display: flex; justify-content: space-between;}
  #news .area { width: 100%;}}
@media screen and (max-width: 768px){
  #news h1 span { padding-bottom: 40px;}
  #news .area .item { flex-wrap: wrap;height: auto;gap:10px 20px;padding-top: 20px;}
  #news .area .item p.txs-18 { width: 100%;flex: auto;padding-bottom: 20px;}}
@media screen and (max-width: 480px){
  #news .area { padding: 10px 8vw;}
  #news .textbox { flex-wrap: wrap;padding-bottom: 30px;}
  #news h1 span { padding-bottom: 20px;}
  #news .area .item p.txs-18 { font-size: 16px;}
  #news .area .item p.category { font-size: 12px;}
  #news { padding: 80px 0 240px;}}

/* --------------------
   service
-------------------- */
#service {
  position: relative;
  background: url("../images/index/service-back.png") no-repeat top right #EFF9FB;
  padding: 140px 0 0;}
#service::before {
  content: "";
  z-index: 2;
  display: block;
  position: absolute;
  top: -200px;
  left: 0;
  width: calc(100% - 80px);
  height: calc(100% + 120px);
  background: #fff;
  border-radius: 0 100px 100px 0;}
#service .contents {
  top: -200px;
  position: relative;
  z-index: 3;
  justify-content: space-between;
  display: flex;} 
#service .area { width: 780px;}
#service h1 span {
  line-height: 1.5;
  display: block;
  padding-bottom: 80px;}
#service .list {
  padding: 80px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap:60px 20px;}
#service .list > a {
  width: 380px;}
#service .list img {
  border-radius: 10px;}
#service .list h2 {
  padding: 20px 0 16px;}
#service .list p span {
  color: #00A4E0;
  text-decoration: underline;}

@media screen and (max-width: 1480px){
  #service .contents { padding-right: 140px;}}
@media screen and (max-width: 1280px){
  #service h1 span { padding-bottom: 30px;}
  #service::before { width: 98vw;}
  #service .contents { display: block; padding-right: 8vw;}
  #service .textbox { display: flex; justify-content: space-between;}
  #service .area { width: 100%;}
  #service .list > a { width: calc(50% - 20px);}
  #service .list { padding-top: 60px;gap:60px 40px;}}
@media screen and (max-width: 768px){
  #service h1 span { padding-bottom: 20px;}
  #service .list { padding-top: 40px;gap:40px 20px;}
  #service .list > a { width: calc(50% - 10px);}}
@media screen and (max-width: 480px){
  #service::before { border-radius: 0 60px 60px 0;height: calc(100% + 20px);top: -140px;}
  #service .list > a { width: 100%;}}

/* --------------------
   other
-------------------- */
#other { background: #EFF9FB;}
#other .list {
  padding: 80px 0 0;
  display: flex;
  gap:20px;}
#other .list a {
  padding: 20px;
  background: #fff;
  border: 10px solid #E4F3F5;
  border-radius: 10px;
  width: 100%;}
#other .list img {
  margin-right: 20px;
  width: 100px;}
#other .list a > div {
  align-items: center;
  display: flex;}
#other .list h1 { padding: 2px 0 5px;}

@media screen and (max-width: 1280px){
  #other .list {flex-wrap: wrap;}}
@media screen and (max-width: 480px){
  #other { margin-top: -20px;}
  #other .list a { padding: 20px 10px;}
  #other .list img { margin-right: 10px;}
  #other .list {padding:0;}}

/* --------------------
   recruit
-------------------- */
#recruit {
  padding: 160px 40px 0;
  background: #EFF9FB;}
#recruit .area {
  border-radius: 10px;
  background: url("../images/index/recruit-back.png") no-repeat center center;
  background-size: cover;
  padding: 85px 0;}
#recruit  .text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;}
#recruit .text h1 { padding-bottom: 20px;}

@media screen and (max-width: 1280px){
  #recruit { padding: 160px 5vw 0;}
  #recruit .area { padding: 60px 8vw;}
  #recruit .text { flex-wrap: wrap;gap:30px;}
  #recruit .text .left { width: 100%;}}
@media screen and (max-width: 480px){
  #recruit { padding: 20vw 4vw 0;}
  #recruit .area { padding: 40px 8vw;}
  #recruit .txs-18 { font-size: 16px;}
  #recruit .txs-44 { font-size: 30px;}}