@charset "utf-8";
  .CRL_main .font_54 {

    line-height: 160%;
  }

  .CRL_main img {
    width: 100%;
  }

  .c-yellow {
    background: -webkit-linear-gradient(180deg, #fff3c8 0%, #fff 50%, #fff3c8 100%);
    background-clip: text;
    -webkit-background-clip: -webkit-text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: inline-block;
  }

  .c-coffee {
    background: -webkit-linear-gradient(180deg, #010100 0%, #532407 50%, #010100 100%);
    background-clip: text;
    -webkit-background-clip: -webkit-text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: inline-block;
  }

  .c-yellow2 {
    color: #fcf9da;
  }

  .c-yellow3 {
    color: #fff3c8;
  }

  .c-coffee1 {
    color: #a77856;
  }

  .c-coffee2 {
    color: #532407;
  }

  .r_tit {
    background-image: url(../images/r_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0% 2%;
    color: #fff;
    line-height: 130%;
  }

  .CRL_main figure {
    width: 100%;
    text-align: center;
  }


  @media (max-width: 761px) {
    .CRL_main .font_54 {
      line-height: 150%;
    }
  }
  /*********s1*********/

  .CRL_main .s1 figure {
    top: 56%;
  }

  .CRL_main .s1 h3,
  .CRL_main .s1 h2 {
    letter-spacing: 3px;
    text-shadow: 0px 0px 10px #76350d, 0px 0px 10px #76350d;
  }

  .CRL_main .s1 h2 {
    line-height: 150%;
  }

  .CRL_main .s1 ul {
    margin: 6% auto 12%;
  }

  .CRL_main .s1 ul p.font_72 {
    line-height: 100%;
    letter-spacing: -3px;
  }

  .CRL_main .s1 ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .s1_txt1 {

    transform: translateX(10%);
  }

  .s1_txt2 {

    transform: translateX(7%)translateY(-13%);
  }

  .s1_txt3 {

    transform: translateY(3%);
  }

  .s1_txt4 {

    transform: translateX(-12%)translateY(-17%);
  }

  .CRL_main .s1 .shine_line2 {
    width: 30%;
    top: 16.5%;
    left: 47%;
  }


  @media (max-width: 761px) {
    .CRL_main .s1 figure h3,
    .CRL_main .s1 figure h2 {
      transform: scale(0.85);
    }
    .CRL_main .s1 figure h2 {
      margin-top: -1.9%;
      margin-bottom: -3%;
    }
    .CRL_main .s1 ul p.font_72 {
      letter-spacing: -0.4vw;
    }
  }
  /*********s2*********/

  @media (max-width: 761px) {}
  /*********s3*********/

  @media (max-width: 761px) {}
  /*********s4*********/

  .CRL_main .s4 figure {
    top: 4.5%;
  }

  .CRL_main .s4 h2 {
    margin-bottom: 11%;
  }

  .CRL_main .s4 dl {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 94%;
    margin: 0 auto 10.7%;
  }

  .CRL_main .s4 dt,
  .CRL_main .s4 dd {
    width: 48%;
  }

  .CRL_main .s4 dt ul {
    display: flex;
  }

  .CRL_main .s4 dt ul li {
    line-height: 95%;
    margin-bottom: 20%;
    width: 33%;
  }

  .CRL_main .s4 dt ul li.c-coffee1 {
    transform: translateX(15%);
  }

  .CRL_main .s4 dt ul li.c-coffee2 {
    transform: translateX(7%)translateY(-50%);
  }

  .CRL_main .s4 dt ul li.c-r {
    transform: translateX(-3%)translateY(-140%);
  }

  .CRL_main .s4 .s4_4 dt ul li.c-coffee1 {
    transform: translateX(22%);
  }

  .CRL_main .s4 dd p.font_28 {
    padding-bottom: 65.5%;
    line-height: 150%;
   
  }

  .CRL_main .s4 dl.s4_3 {
    margin-bottom: 12%;
  }

  .CRL_main .s4 .font_60 {
    letter-spacing: -3px;
  }

  

  @media (max-width: 761px) {
    .CRL_main .s4 .font_18 {
      font-size: 2.8vw;
    }
    .CRL_main .s4 h2 {
      margin-top: 1%;
      margin-bottom: 10.5%;
    }
    .CRL_main .s4 dt ul li {
      margin-bottom: 18%;
      line-height: 85%;
    }
    .CRL_main .s4 dd p.font_28 {
      padding-bottom: 65%;
    }
    .CRL_main .s4_1 dt p {
      transform: translateY(10%);
    }
    .CRL_main .s4 dl {
      margin-bottom: 11%;
    }
    .CRL_main .s4_2 dt,
    .CRL_main .s4_3 dt,
    .CRL_main .s4_4 dt {
      transform: translateY(4%);
    }
    .CRL_main .s4 dt ul li.c-coffee1 {
      transform: translateX(10%);
    }
    .CRL_main .s4 .font_60 {
      letter-spacing: -.5vw;
    }
  }
  @supports(-webkit-touch-callout:none) {
    .CRL_main .s4 dd p.font_28 {
      padding-bottom: 65.5%;
      transform: translateY(2%);
    }
  }
  /*********s5*********/

  .CRL_main .s5 figure {
    top: 7.5%;
  }

  .CRL_main .s5 figure.shine_line2 {
    width: 35%;
    top: 40%;
    left: 23%;
  }

  .CRL_main .s5 ul {
    width: 20%;
    margin-left: 63%;
    margin-top: 16%;
  }

  .CRL_main .s5 ul li {
    margin-bottom: 52%;
  }

  .CRL_main .s5 ul li:nth-of-type(2) {
    margin-bottom: 65%;
  }

  .CRL_main .s5 .font_28 {
    line-height: 140%;
    margin-top: 15%;
  }

  .CRL_main .s5 ul li:nth-of-type(1) .font_28 {
    margin-top: 0%;
  }

  @media (max-width: 761px) {}
  /*********s6*********/

  .CRL_main .s6 figure {
    top: 8.5%;
  }
  /* .CRL_main .s6 h2,
  .CRL_main .s6 h3 {
    text-shadow: 0px 0px 10px #76350d, 0px 0px 10px #76350d;
  }*/

  .CRL_main .s6 li,
  .s6_1 {
    display: flex;
    align-items: flex-start;
  }

  .CRL_main .s6_1 {
    justify-content: center;
    margin-top: 12.5%;
  }

  .CRL_main .s6_1 p {
    font-weight: 400;
  }

  .CRL_main .s6_1 div>p.font_24 {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #542508;
    color: #542508;
    padding: 0 8%;
    margin-bottom: 6%;
  }

  .CRL_main .s6_1 div.s6_1_1>p.font_24 {

    border: 1px solid #2c8de1;
    color: #2c8de1;
  }

  .CRL_main .s6_1 h4 {
    margin: 6% 0 20%;
  }

  .CRL_main .s6_1 li {
    margin-bottom: 10%;
  }

  .CRL_main .s6_1 li p {
    color: #4f4e4e;
    text-align: left;
    line-height: 160%;
  }

  .CRL_main .s6_1 li p b {
    color: #000;
  }

  .CRL_main .s6_1_2 {
    transform: translateX(5%)
  }

  .CRL_main .s6_1_1 .c-coffee {
    background: -webkit-linear-gradient(180deg, #2c8de1 0%, #2c8de1 50%, #2c8de1 100%);
    background-clip: text;
    -webkit-background-clip: -webkit-text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: inline-block;
  }


  .CRL_main .s6_1_1 li p b {
    color: #2c8de1;
  }

  .CRL_main .s6_1_1 {
    margin-right: 33%;
  }

  .CRL_main .s6 li img {
    width: 25px;
    margin-right: 8px;
    margin-top: 7px;
  }

  .CRL_main .s6 figure.shine_line2 {
    width: 35%;
    top: 28%;
    left: 31%;
  }


  @media (max-width: 761px) {
    .CRL_main .s6 h3 {
      margin-top: 1%;
    }
    .CRL_main .s6 li img {
      width: 3.33vw;
      margin-right: 1.07vw;
      margin-top: 0.93vw;
    }
    .CRL_main .s6_1 .font_24 {
      font-size: 3.2vw;
    }
    .CRL_main .s6_1 {
      margin-top: 13%;
    }
  }
  /*********s9*********/

  .CRL_main .s9 .CRL_L_BOX {
    top: 11%;
    z-index: 3;
  }

  .s9 h2 .shine_line_img {
    width: 70%;
    margin: -10% auto -13%;
    display: block;
  }

  .CRL_main .s9_img {
    left: 26%;
    width: 48%;
    top: 42%;
    animation: s9_img 6s infinite;
    z-index: 1;
  }

  .s9_img2 {
    z-index: 2;
  }

  .s9_img2 p {
    position: absolute;
  }

  .s9_img2_1 {
    left: 7.5%;
    top: 42%;
  }

  .s9_img2_2 {
    left: 69%;
    top: 72.5%;
  }

  @keyframes s9_img {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @media (max-width: 761px) {
    .CRL_main .s9 .font_30 {
      font-size: 4vw;
    }
  }
  /*********CRL_CRS永續之美*********/

  .CRL_main .CRL_CRS_BOX {
    background-color: #fde9c3;
    padding-top: 10%;
    padding-bottom: 10%;
    color: #FFF;
    text-align: center;
  }

  .CRL_main .CRL_CRS {
    background-image: url(../images/crs_m.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 10% 0%;
    border: 1px solid #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .CRL_main .CRL_CRS_img1 {
    position: absolute;
    width: 45%;
    margin-top: 8%;
  }

  .CRL_main .CRL_CRS>div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .CRL_main .CRL_CRS>div>div {
    width: 50%;
  }



  .CRL_main .CRL_CRS_L h3 {
    margin-bottom: 5%;
  }


  .CRL_CRS_R img {
    margin: 0 auto;
  }

  .CRL_CRS_R .CRL_CRS_img3 {
    width: 70%;
    margin: 5% auto;
  }

  .CRL_main .CRL_CRS_R_txt {
    text-align: left;
    padding: 5%;
    margin-top: 5%;
    line-height: 150%;
  }

  .CRL_main .CRL_CRS_img1 {
    width: 80%;
    margin-top: 0;
    top: 10%;
  }

  .CRL_main .CRL_CRS_img2 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .CRL_main .CRL_CRS>div {
    margin-top: 80%;
  }

  .CRL_main .CRL_CRS_L li {
    margin: 10% 0;
  }

  .CRL_main .CRL_CRS_R_txt {
    border-top: 1px dashed #fff;
  }

  .CRL_main .CRL_CRS_R .txtM2 {
    margin: 5% 0;
  }

  @media (max-width: 761px) {}
  /*********s11-- 表單*********/

  .CRL_main .s11 {
    text-align: left;
    padding: 10% 0;
    position: relative;
    color: #333;
    background-color: #fde9c3;
  }

  .CRL_main .s11 .CRL_cnt {
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden
  }

  .shadow {
    box-shadow: 10px 10px 20px rgba(50, 28, 14, .5)
  }

  .CRL_main .s11 h2 {
    text-align: center;
    margin-bottom: 3%;
    letter-spacing: 1px
  }

  .CRL_main .s11 .CRL_cnt figure {
    position: relative;
  }


  .CRL_main .s11 .CRL_cnt figure p.txtS {
    position: absolute;
    text-align: right;
    right: 2%;
    bottom: 2%;
    text-shadow: 10px 0 10px #fff, 10px 0 10px #fff;
  }

  .CRL_main .s11 .CRL_cnt figcaption {
    padding: 5%
  }

  .CRL_main .s11 .CRL_cnt b {
    color: #b40024
  }

  .CRL_main .s11 .CRL_cnt b.txt6L {
    font-weight: 500 !important;
  }

  .CRL_main .s11 .formdesc1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px
  }

  .CRL_main .s11 .formdesc1 label {
    position: relative;
    width: 45%;
    text-align: left
  }

  .CRL_main .s11 .formdesc1 p {
    padding-left: 35px
  }

  .CRL_main .s11 .formdesc1 input[type=radio]+label:before {
    position: absolute;
    left: 0;
    top: 76%
  }

  .CRL_main .s11 .s11_txt {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .CRL_main .s11 .s11_txt .c-r {
    display: inline-block
  }

  .CRL_main .s11 .s11_txt p {
    width: 61%;
    line-height: 150%;
  }

  .CRL_main .s11 p.txtS {
    line-height: 120%;
  }


  .CRL_main .s11.no_form a {
    padding: 1rem 2rem;
    line-height: inherit;
    margin: 5% auto 0;
    display: flex;
    width: fit-content;
  }

  #maincontent {
    margin-bottom: 15%;
  }

  .CRL_main .s11 .CRL_cnt figcaption {
    padding: 5% 3%;
  }

  .CRL_main .s11 .s11_txt img {
    width: 50%
  }

  .CRL_main .s11 .CRL_cnt figcaption {
    padding: 10%
  }

  @media(max-width:761px) {
    .CRL_main .s11 .CRL_cnt figcaption {
      padding: 10% 5%;
    }
    .CRL_main .s11 .s11_txt img {
      width: 40%;
    }
    .CRL_main .s11 .formdesc1 label {
      position: relative;
      width: 47%;
    }

    .CRL_main .s11 {
      padding: 8vw 0;
    }

    .CRL_main .s11.no_form a {
      padding: 3vw 5vw;
    }
  }
  /*@media(max-width:550px) {
  .CRL_main .s11 .CRL_cnt figcaption {
    padding: 5% 5% 10%;
  }

  .CRL_main .s11.no_form button {
    line-height: inherit;
    padding: 2.5vw 3.5vw;
  }

  .CRL_main .s11 .formdesc1 label {
    width: 48%
  }
}

@media(max-width:414px) {
  .CRL_main .s11 .formdesc1 label {
    width: 50%
  }
}

@media(max-width:360px) {
  .CRL_main .s11 .formdesc1 input[type=radio]+label:before {
    top: 65%
  }
}*/