/* html version */

/* general */

:root{
  --bg-color: #FFFFFF;
  --outline-color: #617042;
  --title-color: #062A3F;
  --content-color: #000000;

  --highlight-color: rgb(0, 38, 80);
}

:lang( en ){
  font-family: "Noto San";
}

:lang( zh ){
  font-family: "Noto San HK";
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html{
  width: 100%;
}

body{
  max-width: 500px;
  margin: auto;

  background-color: #FFFFFF;
  background-color: var( --bg-color );

  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.015em;
  /* text-align: center; */
  text-align: justify;
  text-align-last: center;
}


h1, h2, h3, h4, h5, h6{
  color: #062A3F;
  color: var( --title-color );
}

h1{
  font-size: 2.8em;
  margin: 0;
}

h2{
  font-size: 2em;
  margin: 1em 0;
}

h3{
  font-size: 1.6em;
}


:lang( zh ) body{
  font-size: 13px;
  line-height: 1.25;
}

:lang( zh ) h1{
  font-size: 2.2em;
  margin: 0 0 .5em 0;
}

:lang( zh ) h2{
  font-size: 1.6em;
  margin: 0 0 .5em 0;
}

:lang( zh ) h3{
  font-size: 1.4em;
  margin: 0 0 .5em 0;
}

p{
  color: #000000;
  color: var( --content-color );
}


/* margin */
header,
main > *{
  margin-left: 25px;
  margin-right: 25px;
}

main > *.no-margin{
  margin-left: 0;
  margin-right: 0;
}

h1.no-margin,
h2.no-margin,
h3.no-margin,
h4.no-margin,
h5.no-margin,
h6.no-margin,
p.no-margin,
img.no-margin{
  margin: 0;
}

/*  header  */
#remark-1{
  margin-bottom: 20px;
}

#img-ac-logo{
  width: 145px;
  max-width: 40%;
}

#img-news-logo{
  width: 260px;
  max-width: 40%;
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-bottom: 20px;
}

footer{
  width: 100%;
  height: 35px;

  background-image: url("img/pattern_deco-01.jpg");
  background-repeat: repeat;
  background-size: cover;
}

p.remark{
  font-size: .75em;
  margin: 1em 0 0 0;
}

img{
  max-width: 100%;
  -ms-flex-negative: 1;
      flex-shrink: 1;

  margin: .5em 0;
}



.mobile-only{
  display: block;
}

.desktop-only{
  display: none;
}

.flex-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-box > div:not( :last-child ) {
  margin-bottom: 10px;
}

.flex-box.flex-start,
.flex-box.flex-start.responsive
{
  align-items: flex-start;
}

.flex-box.responsive{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-box.separate{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-box.responsive.separate{
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}


.relative-wrapper{
  position: relative;
}

.absolute-wrapper{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.center-flex-wrapper{
  width: 100%;
  height: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.text-align-left{
  text-align: left;
}

.text-align-center{
  text-align: center;
}

.text-align-right{
  text-align: right;
}

@media( min-width: 800px ){
  body{
    max-width: 800px;
    /* text-align: left; */
    /* text-align: justify; */
    text-align-last: auto;
  }


  header,
  main > * {
    margin-left: 45px;
    margin-right: 45px;
  }

  .mobile-only{
    display: none;
  }

  .desktop-only{
    display: block;
  }

  .flex-box > div:not( :last-child ) {
    margin-right: 20px;
    margin-bottom: unset;
  }

  .flex-box.responsive{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .flex-box.responsive.separate{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }


}




/* custom  */
.img-con{
  min-width: 275px;
  padding: 0 45px;
}

section{
  margin-bottom: 10px;
}

#section-1{
  margin-top: 20px;
  margin-bottom: 30px;
}

#section-3 p:first-child{
  margin-top: 0;
}

#section-4{
  border: 2px solid var( --highlight-color );
  padding: 0 5px;
  /* margin-bottom: 40px; */
  margin: 0 15px 40px 15px;
  letter-spacing: -0.01em;
}


#section-4 > p{
  color: var( --highlight-color );
  line-height: .9;
  margin: 0.8em 0;
}

:lang( zh ) #section-4 > p{
  line-height: 1.2;
}

#section-5 h2 {
  font-size: 1.75em;
  margin: 0;
}

#section-6 {
  margin: 100px 15px 50px 15px;
  position: relative;
}

/* #section-6 {
  margin: 100px 30px 50px 30px;
  position: relative;
} */

#section-6 > .upper-con{
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#section-6 > .upper-con > h2 {
  font-weight: normal;
  font-family: "Time new Roman";

  padding-bottom: 5px;
  margin: 0 20px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

#section-6 > .upper-con .heart-deco {
  height:  100px;
  margin: 0;
  z-index: 1;
}

#section-6 > .upper-con .heart-deco.right {
  transform: rotateY( 180deg );
}

#section-6 > .upper-con .cover {
  position: absolute;
  width: 350px;
  max-width: 100%;
  height: 60px;
  background: var( --bg-color );
}

#section-6 > .inner-con {
  border-width: 5px 8px;
  border-color: rgb( 255, 240, 241 );
  border-style: solid;
  border-radius: 5px;

  padding: 30px 20px;

  text-align: justify;
  text-align-last: center;
}



#section-6 > .lower-con{
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#section-6 > .lower-con > p {
  color: var( --title-color );
  font-size: 1.1em;
  margin: 0 20px;
  z-index: 1;
}

#section-6 > .lower-con > .rose-deco {
  height: 50px;
  margin: 0;
  z-index: 1;
}
#section-6 > .lower-con > .rose-deco.right {
  transform: rotateY( 180deg );
}

#section-6 > .lower-con > .cover {
  position: absolute;
  width: 380px;
  max-width: 100%;
  height: 50px;
  background: var( --bg-color );
}


:lang( zh ) #section-6 > .upper-con > h2 {
  font-size: 2em;
}
:lang( zh ) #section-6 > .lower-con > p {
  font-size: 1.2em;
}

:lang( zh ) #section-6 > .upper-con .cover {
  width: 280px;
}
:lang( zh ) #section-6 > .lower-con .cover {
  width: 230px;
}

#section-7,
#section-8 {
  margin: 0;
}


#section-9 {

}

#section-9 .deco-line{
  width: 100%;
  height: 25px;

  background-image: url("img/pattern_deco-01.jpg");
  background-repeat: repeat;
  background-size: cover;
}

#section-9 .img-row{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#section-9 .img-row > img {
  margin: 0;
  width: calc( 100% / 3 );
}

#section-9 h2{
  font-weight: normal;
  font-family: "Time new Roman";
  margin: 15px 0;
}

:lang( zh ) #section-9 h2 {
  font-size: 2em;
}

#section-9 .small-divider {
  width: 65px;
  margin:0;
}

#section-9 .inner-con{
  /* padding: 20px 45px 10px; */
  padding: 20px 15px;
  text-align: justify;
  text-align-last: center;
}


.big-divider{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.big-divider img{
  width: 20px;
  height: 20px;
}
.big-divider hr{
  border-width: 1px;
  border-color: #617042;
  border-color: var( --outline-color );
  width: auto;
  min-width: 50px;
  flex-grow: 1;
}

.big-divider h2{
  /* font-size: 2em; */
  font-family: "Time new Roman";
  font-weight: normal;
  line-height: 1em;
  margin: 0 10px;
  flex-shrink: 1;
  width: min-content;
}

:lang( zh ) .big-divider h2{
  /* font-size: 2.2em; */
  width: auto;
}


#section-10 {
  margin: 30px 10px 0;
}
#section-10 > .flex-box{
   margin: 15px 10px 0 10px;
}
#section-10 .inner-con{
  padding-top: 15px;
  width: 100%;
}
#section-10 .inner-con h3{
  font-size: 1.8em;
}
#section-10 .inner-con .img-row{
  margin-top: 20px;
  /* height: 185px; */
  justify-content: space-between;
  /* height: 155px; */
}
#section-10 .inner-con .img-row img{
  /* flex-shrink: 1; */
  margin: 0;
}
#section-10 .img-con{
  padding: 0;
  margin-top: 10px;
}
/* #section-10 .inner-con .img-row img:not( :last-child ){
  margin-right: 10px;
} */

:lang( zh ) #section-10 h2 {
  font-size: 2.2em;
}

#section-11{
  margin-bottom: 10px;
}

#section-11 h2{
  font-size: 1.8em;
}

#section-11 .img-con{
  min-width: 235px;
  margin-top: 15px;
}

#section-12{
  margin-bottom: 20px;
}

#section-12 .medium-divider{
    width: 225px;
    margin: 0 auto 30px;
}

#section-12 h2{
  margin: 0;
  color: var( --outline-color );
  font-size: 1.8em;
}



#section-12 .img-con{
  min-width: 230px;
}

#section-12 small{
  letter-spacing: -0.045em;
}

:lang( zh ) #section-12 small {
  line-height: 1.25;
}


#section-13 {
  border-top: 2px solid var( --outline-color );
  font-size: 1.05em;
  margin-bottom: 30px;
}


#section-14{
  background-color: var( --highlight-color );
  padding: 10px 15px;
  margin-bottom: 20px;
}

#section-14 > p {
  color: white;
  margin: 5px 0 10px 0;
}
:lang( zh ) #section-14 > p{
  margin: 10px 0 15px 0;
}

#section-14 .big-divider-white{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

#section-14  .big-divider-white img{
  width: 12px;
  height: 12px;
}
#section-14  .big-divider-white hr{
  /* border-width: 1px;
  border-color: white; */

  border: none;
  background: white;
  height: 2px;
  width: auto;
  min-width: 50px;
  flex-grow: 1;
}

#section-14  .big-divider-white p{
  color: white;
  font-weight: normal;
  line-height: 1em;
  margin: 0 10px;
  flex-shrink: 1;

}

:lang( zh ) #section-14 .big-divider-white p{
  font-size: 1.2em;
}

#section-15{
  font-size: .8em;
  line-height: 1.1em;

  margin-top: 10px;
  margin-bottom: 30px;
}
#section-15 span {
  font-weight: bold;
  color: var( --highlight-color );
}

:lang( zh ) #section-15 {
  margin-top: 15px;
}
:lang( zh ) #section-15 p {
  line-height: 1.5;
}

@media( min-width: 800px ){
  .img-con{
    min-width: 275px;
    padding: 0;
  }

  #section-1{
    margin-bottom: none;
  }

  #section-4{
    padding: 0 35px;
    margin: 0 45px 20px 45px;
  }

  #section-6{
    margin-left: 25px;
    margin-right: 25px;
  }

  #section-6 > .inner-con {
    padding: 40px 35px;
  }

  #section-7,
  #section-8 {
    margin: 0 25px;
  }

  #section-9 .inner-con{
    padding: 20px 45px 10px;
  }

  #section-10 {
    margin: 45px 25px 0;
  }
  #section-10 .inner-con{
    padding: 20px 10px 20px 20px;
    width: 85%;
  }
  #section-10 .inner-con .img-row{
    /* height: 155px; */
  }
  #section-10 .img-con{
    /* padding: 0 45px; */
    margin-top: 0;
  }

  #section-11{
    margin-bottom: 30px;
  }

  #section-11 .img-con {
    margin-top: 0;
    margin-right: 30px;
  }

  #section-12{
    margin-bottom: 10px;
  }

  #section-12 h2{
    font-size: 1.5em;
  }

  #section-14{
    padding: 10px 45px;
    margin-bottom: 10px;
  }

  #section-14 > p{
    margin: 5px 0 20px 0;
  }


  .big-divider h2{
    width: auto;
  }


  footer{
    height: 60px;
  }
}