#pcNav {
    display: none;
}

#mNav {
    display: block;
}

/* ----------------------------------------------------------------------
                            class control
---------------------------------------------------------------------- */
/* garbage */
.ball {
    display: none;
}

.umbrella {
    display: none;
}

.drink {
    display: none;
}

.cola {
    display: none;
}

.shoe {
    display: none;
}

/* ad */
.ad-wrapper .ad-pc {
    display: none;
}

.ad-wrapper .ad-m {
    display: block;
}

.ad-wrapper2 .ad-pc {
    display: none;
}

.ad-wrapper2 .ad-m {
    display: block;
}

/* carousal */
.carousel-pc {
    display: none;
}

#carousel-m {
    display: block;
}

#carousel2-m {
    display: block;
}

/* section title */
/* pc */
.section-title-wrapperA #title-pc {
    display: none;
}

.section-title-wrapperB #title-pc {
    display: none;
}

.section-title-wrapperC #title-pc {
    display: none;
}

.section-title-wrapperD #title-pc {
    display: none;
}

.section-title-wrapperE #title-pc {
    display: none;
}

/* mobile */
.section-title-wrapperA #title-m {
    display: inline-block;
}

.section-title-wrapperB #title-m {
    display: inline-block;
}

.section-title-wrapperC #title-m {
    display: inline-block;
}

.section-title-wrapperD #title-m {
    display: inline-block;
}

.section-title-wrapperE #title-m {
    display: inline-block;
}

/* every title icon */
.section-title-wrapperA img {
    width: 14%;
}

.section-title-wrapperB img {
    width: 14%;
}

.section-title-wrapperC img {
    width: 14%;
}

.waveSlider-title-m {
    transform: translateY(-30%);
}

.section-title-wrapperD img {
    width: 12%;
}

.articleSlider-title-m {
    transform: translateY(-30%);
}

.section-title-wrapperE img {
    width: 12%;
}

.partner-title-m {
    transform: translateY(-30%);
}

/*  sea fixed obj animation */
.sea-turtle {
    display: none;
}

.purple-fish {
    display: none;
}

/* card box */
.card-pc-btn {
    display: none;
}

.card-m-btn {
    display: block;
}

.card-container .overlay-pc {
    display: none;
}

.card-container .overlay-m {
   display: block;
}

/* ----------------------------------------------------------------------
                            co-css
---------------------------------------------------------------------- */
.section-title-wrapper-all {
    margin-top: 6em;
}

.section-title-img {
    width: 10%;
}

/* note des */
.des {
    width: 90%;
    font-size: 0.8em;
    padding-top: 2em;
}

.section-title a {
    font-size: 1.8em;
}

/* every section title */
#title-m {
    font-size: 2.4em;
    color: #3e7fbe;
    position: relative;
    font-family: 'cwTeXYen', sans-serif;
    font-weight: 800;
}

/* ----------------------------------------------------------------------
                            mobile - menu
---------------------------------------------------------------------- */
#myNav {
  z-index: 1200;
}

/* The Overlay (background) */
.menu-overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgba(255,242,157, 1);
    
    overflow-y: hidden;
    transition: 0.5s;
}
  
.overlay-content {
    position: relative;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
  
.menu-overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.menu-overlay a:hover {
  text-decoration: none;
}

.menu-overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}
  
.menu-overlay .closebtn {
    position: absolute;
    top: 0;
    right: 0.7em;
    font-size: 2em;
    text-decoration: none;
    z-index: 1100;
}

@media screen and (max-height: 450px) {
    .menu-overlay {overflow-y: auto;}
    .menu-overlay a {font-size: 20px}
    .menu-overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
}

#mNav .menu-box {
    top: 0.5em;
    right: 1em;
    width: 35px;
    height: auto;
    position: fixed;
    color: rgb(255, 255, 255);
    background: #224357;
    z-index: 500;
} 

#mNav .menu-box:hover {
  background: rgb(125, 125, 125);
}


#mNav .menu-list {
    color: #224357;
    font-size: 1.4em;
    text-align: center;
    padding-right: 5vw;
}

#mNav .menu-list:hover {
  color: #ede2bb;
}

.overlay-content hr {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    opacity: 0.4;
    position: initial;
    display: inline-block;
}

#OpenNav {
    font-size: 25px;
    transform: translateY(-4%);
    display: block;
    text-align: center;
}

.menu-logo {
    width: 10%;
}

/* ----------------------------------------------------------------------
                            section1 - main banner/menu
---------------------------------------------------------------------- */
.section1-wrapper1 {
    width: 100%;
}

.section1 .title {
    padding-top: 10em;
}

.section1 .title img {
    width: 90%;
}

.section1 .subTitle img {
    width: 80%;
}
/* wave */
.section1 .back-wave{
    height: 35%;
}

/* boat */
.boat {
    position: absolute; 
    left: 0; 
    top: 65%; 
    width: 100%;
    z-index: 666;
}

/* garbage */
.garbage-m {
    /* position: absolute;  */
    width: 100%; 
    bottom: 0;
}

.wine {
    width: 30%;
    left: 2em; 
    bottom: 8em;
}

.wine img {
    width: 100%;
}

.can {
    width: 20%;
    left: 4em; 
    bottom:4em;
}

.can img {
    width: 100%;
}

.bottle {
    width: 20%;
    left: 60%; 
    bottom: 3em;
}

.bottle img {
    width: 100%;
}

.milk {
    width: 22%;
    left: 70%; 
    bottom: 10em;
}

.milk img {
    width: 100%;
}

/* ----------------------------------------------------------------------
                            m-content-bg
---------------------------------------------------------------------- */
.content-bg {
    background-position: bottom;
    background-image: url(/lazyweb/project/WorldOceansDay/img/m-content-bg.jpg); 
    background-size: cover; 
    width: 100vw; 
    height: 100vh; 
    left: 0; 
    top: 0; 
    position: fixed; 
    z-index: -10;
  }

/* ----------------------------------------------------------------------
                            section2
---------------------------------------------------------------------- */
.section2-wrapper1 {
    width: 100%;
}

.section2-wrapper2 {
    width: 95%;
}

.section2 .text {
    width: 100%;
    line-height: 1.5em;
    font-size: 1em;
}

/* ----------------------------------------------------------------------
                            ad1
---------------------------------------------------------------------- */
.section2 .ad-wrapper {
    width: 80%;
}

.ad-wrapper .ad-m {
    margin-top: 4em;
}

/* ----------------------------------------------------------------------
                            video slider
---------------------------------------------------------------------- */
/* video slider */
.section2 .video-slider  .slick-next {
    right: 0;
}
  
.section2 .video-slider  .slick-prev {
    left: 0;
}

.video-slider .slick-next:before {
    font-size: 30px;
    content: '>';
    color: #fff;
    font-weight: 900;
    background: #000;
    padding-bottom: 10px;
}

.video-slider .slick-prev:before {
    font-size: 30px;
    content: '<';
    color: #fff;
    font-weight: 900;
    background: #000;
    padding-bottom: 10px;
}

/* ----------------------------------------------------------------------
                            cards block
---------------------------------------------------------------------- */
.card-wrapper {
    display: block;
}

.card-container {
    width: 95%;
    display: flex;
    margin: 0 auto;
    margin-bottom: 2em;
}

/* overlay */
.card-container .overlay-m {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
}

.card-container .overlay-m .title {
    text-align: center;
    font-size: 1.8em;
    padding-top: 1em;
    padding-bottom: 1em;
    color: #fff;
}

.card-container .overlay-m .text {
    line-height: 1.5em;
    font-size: 1em;
    width: 85%;
    color: #fff;
}


/* ----------------------------------------------------------------------
                            wave slider
---------------------------------------------------------------------- */
.wave-slider-container .slick-prev:before {
    font-size: 10vw;
    color: #000;
}

.wave-slider-container .slick-next {
    right: 5%;
}

.wave-slider-container .slick-next:before {
    font-size: 10vw;
    color: #000;
}

.wave-slider-container .slidertext .slick-prev {
    width: auto;
    height: auto;
    left: 20%;
    top: -30%;
}

.wave-slider-container .slidertext .slick-next {
    width: auto;
    height: auto;
    right: 20%;
    top: -30%;
}

.section2 .slick-prev {
    left: 5%;
}

.wave-slider-container .slick-list p {
    margin-top: 2em;
  }

.wave-slider-container .slidertext h3 {
    font-size: 1.2em;
}

.wave-slider-container .slick-list p {
    font-size: 1em;
}


/* ----------------------------------------------------------------------
                            carousal
---------------------------------------------------------------------- */
#carousel-m a {
    text-decoration: none;
    color: #000;
}

.carousel-m a:hover {
    color: #353535;
}

#carousel-m .slick-prev {
    left: 6vw;
    top: 30vw;
    z-index: 99;
    width: auto;
    height: auto;
}
  
#carousel-m .slick-next {
    position: absolute;
    top: 30vw;
    right: 6vw;
    width: auto;
    height: auto;
}

#carousel-m .slick-prev:before {
    font-size: 10vw;
    color: #000;
}
  
#carousel-m .slick-next:before {
    font-size: 10vw;
    color: #000;
}

/* slider article */
.section2 .article-title {
    font-size: 1em;
}
  

/* ----------------------------------------------------------------------
                            partner
---------------------------------------------------------------------- */
.section2 .logo-wrapper img  {
    width: 60%;
}

/* ----------------------------------------------------------------------
                            sea fixed obj animation
---------------------------------------------------------------------- */
.yellow-fish {
    bottom: 8em; 
    left: 1em; 
    width: 10%;
}

.jelly-fish {
    bottom: 10em; 
    right: 1em;  
    width: 12%;
}

/* ----------------------------------------------------------------------
                            footer
---------------------------------------------------------------------- */
.footer-style {
    font-size: 0.8em;
    padding: 1em 0.5em;
    height: auto;
}

/* ----------------------------------------------------------------------
                            logo
---------------------------------------------------------------------- */
.logo img {
    height: 12vw;
}