*{margin:0; padding:0; box-sizing: border-box; font-family: 'S-CoreDream-4Regular'; list-style: none; text-decoration: none}

header h1.logo{display:none}
h1.logo{position:absolute; top:10px; left:10px; height:100px; width:auto}
h1.logo img{width:auto; height:100%}
h1.logo span{display:inline-block; vertical-align: top; text-align:left; padding-top:20px; line-height: 1.1; letter-spacing: -.5px; font-weight:600; font-size:25px; color:#54C200}

.header-menu{display: none;position:absolute; top:0; right:20px; z-index: 10; width:50px; height:50px;}
.header-menu-icon {
  height: 3px;
  width: 24px;
  background-color: #207500;
  position: absolute;
  top: 50%;
  right: 0;
  left:0; margin:auto;
}
.header-menu-icon::before,
.header-menu-icon::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  left: 0;
}
.header-menu-icon::before {
  top: -9px;
}
.header-menu-icon::after {
  bottom: -9px;
}
.sponsor-text{display:none}

/** sidemenu **/
#sidemenu{position:fixed; right:10px; top:50%; transform:translate(-50%, 0, 0); z-index: 10}
#sidemenu li{text-align:right; padding-right:10px; position:relative; margin-bottom:10px}
#sidemenu li:after{display:block; content:''; width:4px; height:4px; border-radius:4px; background-color:#000; position:absolute; right:0; top:0; bottom:0; margin:auto}
#sidemenu li a{color:#000; font-size:13px}
#sidemenu li.active a{color:#207500;}
#sidemenu li.active:after{background-color:#207500;}

.contents{}
.section_inner{width:100%; max-width:1200px; margin:0 auto; padding:80px 0}
.section_title{text-align:left; margin-bottom:50px}
.section_title h3{font-size:32px; font-family: 'S-CoreDream-5Medium';text-align:center; font-weight:normal; margin-bottom:18px}
.section_title p{font-size:17px; text-align:center}
.contents section.main_visual{; height:100vh; width:100%; background-image:url('../img/slide_bg.jpg'); background-size:cover;background-position:bottom; background-attachment: fixed; position:relative;}
.contents section.main_visual .section_inner{padding-top:200px; }
.inner{width:100%; height:100%; position:relative; text-align:center}
.inner h2{
  height: 150px;
  text-align: center;
  font-size: 80px;
  color: #207500;
  position: relative;
  z-index: 1;
  font-weight: 900;
  margin-bottom: 50px;
  padding-top: 15px;
  font-family: 'S-CoreDream-6Bold';
  }
.inner h2:after{display:block; content:''; width:150px; height:150px; background-image:url('../img/earth.svg'); background-size:cover;z-index: -1; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
h3{font-size:40px; color:#207500}
h3 br{display:none}
h4{font-size:30px; color:#39B54A; font-weight:bold; margin-bottom:80px}
.main_txt ul{height:100px; overflow:hidden}
.main_txt ul li{height:100px;}
.main_txt .slick-arrow{display:none !important}
.app_download{text-align:center}
.app_download p{font-size:20px; font-weight:bolder; margin-bottom:20px}
.app_download ul{text-align:center; display:inline-block}
.app_download ul:after{display:block; content:''; clear:both}
.app_download ul li{float:left; margin-right:10px}
.app_download ul li:last-child{margin-right:0}

section.esg{background-color:#F8F9F8}
.esg_list:after{display:block; content:''; clear:both}
.esg_list li{width:32%; margin-right:2%; float:left; position:relative;}
.esg_list li .li_wrap{width:90%; height:220px; background-color:#fff; position:relative; margin:0 auto; padding:20px; text-align:center; margin-top:90px;  box-sizing: border-box;
  overflow: hidden;}
.esg_list li:last-child{margin-right:0;}
.esg_list li:before{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  display:block; content:''; width:100%; height:170px; background-repeat:no-repeat; background-size:cover; background-position:center;}
.esg_list li:nth-child(1):before{background-image:url('../img/esg01.jpg')}
.esg_list li:nth-child(2):before{background-image:url('../img/esg02.jpg')}
.esg_list li:nth-child(3):before{background-image:url('../img/esg03.jpg')}
.esg_list li .li_wrap dd:last-child{padding-top:15px; margin-top:15px; position:relative; font-size:17px; border-top:1px dashed #e5e5e5}

.esg_list li:last-child{margin-right:0;}
.esg_list li strong{display:inline-block; padding:15px 0 0;font-size:18px; font-weight:normal;}
.esg_list li dt{font-size:20px;}
.esg_list li dt b{font-size:30px; color:#207500}
.esg_list li dd.dd_txt{opacity:0; display:inline-block; padding-top:10px; font-size:18px;}
.esg_list li:hover > .li_wrap dl{ transform: translate3d(0px, -95px, 0px); transition: transform 1s }
.esg_list li:hover > .li_wrap dl dd.dd_txt{opacity:1; transition: opacity 1s}
.esg_list li:hover > .li_wrap dl dd.dd_img{opacity:0; transition: opacity 1s}
.esg_list li:hover > .li_wrap dl dt:before{opacity:0; transition: opacity 1s}

.dd_img{width:70px; height:70px; display:block; margin:10px auto; padding-top:18px; border-radius:150px; background-color:rgba(32, 117, 0, .1); margin-bottom:10px}
.esg_list li .li_wrap dl dt{padding-top:20px; position:relative;}
.esg_list li .li_wrap dl dt:before{display:block; content:''; width:20px; height:2px; background-color:#A8AAAE; position:absolute; top:12px; left:0; right:0; margin:auto;}

.dd_img img{display:inline-block; vertical-align: middle}
.dd_txt{text-align:left}


.services{background-image:url('../img/svc_bg.jpg'); background-size:cover;background-position:bottom; background-attachment: fixed; position:relative;}
.svc_list li{margin-bottom:20px}
.svc_list .img_wrap{display:inline-block; width:100px; height:100px; position: relative;}
.svc_list .img_wrap img{width:100%}
.svc_list li dl{width:calc(100% - 135px); display:inline-block; text-align:left; margin-left: 25px;}
dl dt,
dl dd h6{font-family: 'S-CoreDream-6Bold'; font-size:20px; margin-bottom:8px}
dl dd{font-family: 'S-CoreDream-4Regular'; font-size:16px}

.product ul:after{display:block; content:''; clear:both}
.product ul li{width:calc(33.333% - 14px); float:left; margin-right:21px;
box-shadow:2px 2px rgba(0, 0, 0, .2); border-radius:10px;
border:1px solid #e5e5e5; overflow:hidden;
}
.product ul li:last-child{margin-right:0}
.product ul li dl dt{
  width: 100%;
  height: 320px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s;
  background-color:#f8f8f8;
  margin-bottom:0
}
.product ul li:hover dl dt{    background-size: 120%;}
.product ul li dl dt img{max-width:100%}

.product ul li dl dd{text-align:left;; padding:15px; height:145px; position:relative; }
.product ul li dl dd h6{padding-bottom:30px; position:relative;}
.product ul li dl dd h6:before{display:block; content:''; width:15px; height:2px; background-color:#e5e5e5; position:absolute; bottom:15px; left:0}

section.news {
    background-color: #F8F9F8;
}
.news_slider .slick-arrow{position:absolute; top:50%; border:0; background-color:transparent; font-size:0; text-indent:-9999px; width:15px; height:30px;
  background-image:url('../img/arrow.svg');
  background-repeat: no-repeat;
  background-size: 15px 30px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 50%;
  background-position: center;
  cursor:pointer;
  transition:all 500ms
}
.news_slider .slick-arrow:hover{background-color:rgba(0, 0, 0, .2)}
.news_slider .slick-arrow.slick-next{right:-50px; transform:rotate(180deg)}
.news_slider .slick-arrow.slick-prev{left:-70px}
section.news .slick-slide{margin-right:20px;height:280px;   background-repeat: no-repeat;
background-position: center top; position: relative;}
section.news .slick-slide dl {
  position:absolute;
  left:0; bottom:-80px; padding:10px; background-color:rgba(0, 0, 0, .5);
  width:100%; text-align:left;
  transition:all 500ms
  }
section.news .slick-slide:hover dl{bottom:0}
section.news .slick-slide dl dt{color:#fff; text-align:left; font-size:18px;
  width:98%; display:inline-block; white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;}
section.news .slick-slide dl dd{color:#fff; text-align:left;width: 100%;}
section.news .slick-slide dl dd.dd_txt{
  min-height:38px;
  font-size:14px;
 text-overflow: ellipsis;
 overflow: hidden;
 word-break: break-word;

 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical}

 dd.btn_wrap{margin-top:10px}
 dd.btn_wrap a{display:inline-block; color:#fff; border-bottom:1px solid #fff; font-size:12px}

@media (max-width:1280px) {
  header {
      height: 90px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      background-color: rgba(255, 255, 255, .8);
      border-bottom: 1px solid #e5e5e5;
  }
  h1.logo{height:60px; display:none;left:30px}
  header h1.logo{display:inline-block}
  .header-menu{display:block; transition:all 500ms; margin-top:13px}
  .header-menu.close{right: 200px; }
  .header-menu.close .header-menu-icon{background-color:transparent;}
  .header-menu .header-menu-icon::before,
  .header-menu .header-menu-icon::after{transform:rotate(0)}
  .header-menu.close .header-menu-icon::before{transform:rotate(-45deg); background-color:#fff;top:0}
  .header-menu.close .header-menu-icon::after{transform:rotate(45deg); background-color:#fff;top:0}
  h1.logo span{font-size:20px; padding-top:14px}
  .inner h2 {height: 80px;font-size: 60px; margin-bottom:40px}
  .inner h2:after{width:80px; height:80px}
  .sponsor-text{display:block}

  #sidemenu{    top: 0;
    right: -200px;
    width: 200px;
    background-color: #fff;
    height: 100vh;
    transition:all 500ms; z-index: 10}

  #sidemenu ul li{
    text-align: left;
    padding: 10px;
    border-bottom: 1px dashed #e5e5e5;
    margin: 0;
  }
  #sidemenu li:after{display:none}

  #sidemenu.open{right:0}
  #sidemenu .sponsor-text{position:absolute; left:0; bottom:0; font-size:11px; width:100%; line-height:1.5; background-color:#f8f8f8; padding:10px}

  .news_slider{width:90%; margin:0 auto; margin-left: 6%;}
  .sidemenu_wrap{display:none; width:100vw; height:100vh; background-color:rgba(0, 0, 0, .3); position:fixed; top:0; left:0; z-index: 9}

}
@media(max-width:1150px){
  .section_inner{width:1000px}
  dl dt, dl dd h6{font-size:18px}
  dl dd{font-size:13px}
  .product ul li dl dt{height:210px}
}
@media(max-width:1024px){
  .section_inner{width:90%;margin:0 auto}
  .inner h2 {
    height: 75px;
    font-size: 50px;
    margin-bottom: 40px;
    padding-top: 2px;
  }
  .section_title h3{font-size:25px}
  .section_title p,
  .esg_list li dt{font-size:15px}
  h3{font-size:30px}
  h4 {font-size: 20px; margin-bottom: 50px}
  .esg_list li dt b {
    font-size: 22px;
  }
  .esg_list li .li_wrap dd:last-child{font-size:13px}
  .esg_list li .li_wrap{height:180px; padding:10px}
  .svc_list li dl {vertical-align: top; padding-top: 10px}

}
@media (max-width:768px) {
  .product ul li{width:100%; margin-right:0; margin-bottom:10px}
  .product ul li dl dt {
    height: 200px;
    width: 320px;
    display:inline-block; float:left;
  }
  .product ul li dl dd{width:calc(100% - 320px); display:inline-block}
}
@media (max-width:640px) {
  .section_inner{padding:40px 0}
  .inner h2 {margin-bottom:30px}
  .section_title h3 {
    font-size: 22px; margin-bottom:10px
  }
  .section_title p, .esg_list li dt {
      font-size: 13px;
  }
  .esg_list li .li_wrap {
    height: 170px;
    padding: 8px;
  }
  .esg_list li .li_wrap dd:last-child {
    font-size: 12px;
  }
  .product ul li dl dt {
    height: 145px;
    width: 200px;
  }
  .product ul li dl dd {
    width: calc(100% - 200px)
  }
  dl dt, dl dd h6, section.news .slick-slide dl dt{font-size:16px}
  section.news .slick-slide dl dd.dd_txt{font-size:13px}
}

@media (max-width:414px) {
  header{height:60px}
  header h1.logo{left:15px}
  h1.logo{height:40px}
  h1.logo span {
    font-size: 14px;
    padding-top: 9px;
    font-weight: normal;
  }
  .header-menu{margin-top:10px; right:5px}
  header h1 span{padding-top:12px}
  h3 {font-size: 24px}
  h4 {font-size: 18px}
  .app_download p{font-size:16px}

  .section_title {
    margin-bottom: 30px;
  }

  .esg_list li{width:100%; margin-right:0; margin-bottom:20px}
  .product ul li dl dt {
    height: 200px;
    width: 100%;
  }
  .product ul li dl dd {
    width: 100%;
  }
  .news_slider{width:100%; margin:0 auto; margin-left:0; margin-right:0}
  .news .news_slider .slick-arrow{display:none !important}
  section.news .slick-slide{margin-right:0}
  dl dd{font-size:12px}
}

@media (max-width:390px) {
  .app_download ul li{float:none; margin:0}

}

@media (max-width:340px) {
  h4 {font-size: 16px}
  .app_download ul li{margin:0; float:none; margin-bottom:8px}
  .svc_list .img_wrap{display:block; margin:0 auto}
  .svc_list li dl{display:block; padding:0; margin:0; width:100%}
  .svc_list li dl dt{text-align:center}
}