/*
.svg_cnt svg {
  max-width: 100%;
  height: auto;
}
*/

   header {
        position: relative;
        z-index: 9999;
    }
    
    #menu {
        position: fixed;
        width: 100%;
        transition: 0.3s;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    #menu * {
        transition: all 0.3s ease-in-out;
    }
    
    #menu .logo {
        width: 730px;
        height: 241px;/*
        width: 268px;
        height: 134px;*/
        position:  absolute; left:25px; top:44px;
    }
    
    #menu .logo img {
      /*  max-width: 268px;*/
        max-width: 730px;
        width: 100%;
        transition-duration: 0.2s;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #menu.sticky .logo {
        width: 380px;
        height: 82px;
       left:15px; top:20px;
    }
    
    #menu.sticky .logo img {
        max-width: 460px;
    }
    
    #menu.sticky {
        background: #fff;
        z-index: 99999;
        padding-top: 20px;
        padding-bottom: 20px;
        top: 0;
    }
    
    #menu .logo .logo-dark {
        opacity: 0;
    }
    
    #menu .logo .logo-white {
        opacity: 1;
    }
    
    #menu.sticky .logo .logo-white {
        opacity: 0;
    }
    
    #menu.sticky .logo .logo-dark {
        opacity: 1;
    }
    
    #menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
		list-style:none;
    }
    
    #menu ul li {
        padding-right: 0.75rem;
		list-style:none;
    }
    
    #menu ul li:nth-of-type(7),
    #menu ul li:last-of-type {
        padding-right: 0;
    }
    
    #menu ul li img {
        max-height: 2rem;
        max-width: 2rem;
        width: 100%;
        height: 100%;
    }
    
    #menu ul li.lang a {
        color: #0056B3;
        font-size: 1.125rem;
        transition: all 0.3s ease-in-out;
        /* text-shadow: 0px 0px 5px black; */
    }
    
    #menu ul li.lang {
        position: relative;
        padding: 0 0.8rem 0 2rem;
    }
    
    #menu ul li.lang.last {
        padding: 0 2rem 0 0.8rem;
    }
    
    #menu ul li.lang::after {
        position: absolute;
        background: #0056b3;
        content: '';
        height: 100%;
        width: 1px;
        top: 0;
        left: 100%;
        transition: all 0.3s ease-in-out;
    }
    
    #menu .nav-menu {
        height: 100%;
        display: block;
        width: 100%;
    }
    
    #menu ul li.lang.last::after {
        display: none;
    }
    
    #menu ul {
        margin-top: 11px;
    }
    
    #menu .hamburger {
        padding: 0;
        display: flex;
    }
    
    #menu .hamburger-box {
        width: 38px;
        height: 38px;
    }
    
    #menu .hamburger-inner,
    #menu .hamburger-inner:after,
    #menu .hamburger-inner:before,
    #menu .hamburger.is-active .hamburger-inner,
    #menu .hamburger.is-active .hamburger-inner:after,
    #menu .hamburger.is-active .hamburger-inner:before {
        background-color: #0056b3;
        transition: all 0.3s ease-in-out;
    }
    
    #menu .hamburger--squeeze.is-active .hamburger-inner:before {
        top: 0;
        transition: top 75ms ease, opacity 75ms ease .12s;
        opacity: 0;
    }
    
    #menu .hamburger--squeeze.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
        transform: rotate( -90deg);
    }
    
    #menu .hamburger-inner,
    #menu .hamburger-inner:after,
    #menu .hamburger-inner:before {
        width: 38px;
        height: 3px;
    }
    
    #menu .hamburger-inner:before {
        top: -11px;
    }
    
    #menu .hamburger-inner:after {
        bottom: -11px;
    }
    
    #menu .header {
        z-index: 9999;
        position: relative;
    }
    #select {
	  z-index: 99;
	  position: relative;
	}
	#public.opp #select {  z-index:12000; }
		#public.opp #select  .wrapper{ visibility:hidden}
	  #public .top {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
    
    #public .top::before {
        position: absolute;
        content: '';
        width: 100vw;
        height: calc(100% + 3rem);
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
		z-index:1;
    }
    
	 #public  .pub_obox_content{ position: relative; z-index:10}
    #public #orange-box .top::before {
        border-top: 3px solid #fcd259;
    }
    
    #public #blue-box .top::before {
        border-top: 3px solid #21A9DD;
    }
    
    #public #green-box .top::before {
        border-top: 3px solid #5cc4b7;
    }
    
    #public #purple-box .top::before {
        border-top: 3px solid #8765A9;
    }
    
    #public .data.border-bottom {
        margin-top: -2rem;
    }
	
	
	    #orange-box .data.border-bottom,
    #public #orange-box .top::before,
    #public #orange-box .more p {
        background-color: #fff8eb;
    }
    
    #blue-box .data.border-bottom,
    #public #blue-box .top::before,
    #public #blue-box .more p {
        background-color: #EBFBFF;
    }
    
    #green-box .data.border-bottom,
    #public #green-box .top::before,
    #public #green-box .more p {
        background-color: #dffcf9;
    }
    
    #public #purple-box .top::before,
    #public #purple-box .more p {
        background-color: #EBEFF8;
    }
	
	
	#public .container {
	  position: relative;
	  z-index: 2;
	}
	#public, #public .top {
	position: relative;
	}
    
    #public .top p.desc {
        font-size: 1.25rem;
        font-weight: 500;
        max-width: 1010px;
        width: 100%;
        margin: 0 auto;
        margin: 1rem auto 3rem;
    }
	
	
    #public #select .sticky-btn {
        opacity: 1;
        position: fixed;
      /*  top: 122px;*/
        top: 0;
        width: 100%;
        transition: transform 0.3s ease-in-out;
        z-index: 2;
        transform: translateY(-350%);
		background:rgba(255,255,255,0.7)
    }
    
    #public #select .sticky-btn.show {
        transition: transform 0.3s ease-in-out;
        transform: translateY(0%);
    }
    
    #public #select .sticky-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: #fff;
        height: 55%;
    }
    
    #public #select .sticky-btn .list .box-wrapper .box {
        padding: 0.5rem;
        min-height: 85px;
        transition: all 0.5s ease-in-out;
      /*  font-size: 1.25rem;*/
    }
	#public .pub_obox{ background:#f0f; min-height:50vh}
	
	#public #orange-box.pub_obox{ background:#fedbb4;}
	#public #green-box.pub_obox{ background:#edfffd;}
	#public #blue-box.pub_obox{ background:#d7cae3;}
	#public #purple-box.pub_obox{ background:#b2d998;}
	
	#public #green-box, #public #blue-box, #public #purple-box {
		display:none;		
	}
	
		#public .pub_obox_content img.photo{			
  border-radius: 0 30px  0 30px; 
		}
	
    header .menu-all {
        position: fixed;
        overflow: hidden;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
		 background: rgb(38,175,229);
background: linear-gradient(90deg, rgba(38,175,229,1) 11%, rgba(175,225,249,1) 51%, rgba(38,175,229,1) 91%); 
        padding-top: 121px;
        transform: translateY(-100%);
        transition: transform 0.5s ease-in-out;
    }
    
    header .menu-all .container {
        height: 100%;
        overflow: auto;
    }
    
    header.open .menu-all {
        transform: translateY(0);
    }
    
    header .menu-all ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-top: 7vh;
        padding-left: 0;
    }
    
    header .menu-all ul.share {
        padding-top: 0;
        flex-direction: row;
    }
    
    header .menu-all ul.share li {
        width: auto;
        padding-right: 0.5rem;
    }
    
    header .menu-all ul.share li .share_btn {
        width: 1.5rem;
        height: 1.5rem;
        cursor: pointer;
    }
    
    header .menu-all ul.share li a:after,
    header .menu-all ul.share li a:before {
        display: none;
    }
    
    header .menu-all .colorbar-short {
        left: 0;
        top: 1rem;
    }
    
    header .menu-all .colorbar-long {
        right: 0;
        bottom: 0;
    }
    
    header .menu-all ul li {
        margin-bottom: 1rem;
        width: 100%;
		list-style:none;
    }
    
    header .menu-all ul li a {
        display: block;
        width: 100%;
        max-width: 500px;
        position: relative;
        font-size: 1.45rem;
        color: #222;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
    }
    
    header .menu-all ul li a {
        text-decoration: none!important;
    }
    
    header .menu-all ul li a:hover,
    header .menu-all ul li a.active {
        font-size: 1.45rem;
    }
    
    header .menu-all ul li a:after {
        background: #005baa;
        width: 0;
        height: 3px;
        bottom: 2px;
        left: 0;
        content: "";
        display: block;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
    }
    
    header .menu-all ul li a.active:after,
    header .menu-all ul li a:hover:after {
        width: 100%;
    }
    
    header .menu-all ul li a:before {
		/*
        content: '';
        position: absolute;
        left: calc(100% - 53px);
        top: 50%;
        transform: translateY(-50%);
        background-image: url(../images/arrow_menu_dot.svg);
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
        width: 53px;
        height: 25px;
        opacity: 0;
        transition: all 0.2s ease-in-out;*/
    }
    
    header .menu-all ul li a.active::before,
    header .menu-all ul li a:hover::before {
        opacity: 1;
    }
    
    header .share_btn {
        width: 2rem;
        height: 2rem;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        transition: all 0.3s ease-in-out;
    }
    
    header .share_btn.facebook {
        background-image: url(../images/facebook.svg);
    }
    
    header .share_btn.xicon {
        background-image: url(../images/x.svg);
    }
    header .share_btn.youtube {
        background-image: url(../images/youtube.svg);
    }
    
    header .share_btn.linkedin {
        background-image: url(../images/linkedin.svg);
    }
    
    header .share_btn.instagram {
        background-image: url(../images/ig.svg);
    }
    
    header .share_btn.wechat {
        background-image: url(../images/wechat.svg);
    }
    
    header .share_btn.download {
        background-image: url(../images/download.svg);
    }
	#mb_smenu{ display:none;}
	
    .wechatqrcode {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
    }
    
    .wechatqrcode .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        cursor: pointer;
    }
    
    .wechatqrcode .img-wrapper {
        max-width: 90vw;
        width: auto;
        height: auto;
        position: relative;
        padding: 1rem;
        background: #fff;
        border-radius: 2rem;
    }
    
    .wechatqrcode .img-wrapper img {
        max-width: 100%;
        width: auto;
        height: auto;
    }
    
    .wechatqrcode .img-wrapper .close {
        position: absolute;
        width: 30px;
        height: 30px;
        bottom: 102%;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotateZ( 45deg);
        cursor: pointer;
    }
    
    .wechatqrcode .img-wrapper .close::before,
    .wechatqrcode .img-wrapper .close::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #fff;
    }
    
    .wechatqrcode .img-wrapper .close::before {
        width: 2px;
        height: 100%;
    }
	
	    #banner {/*
        padding-top: 40px;
        padding-bottom: 40px;*/
		/*
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 14%, #71bfc6   60%, #3a9aa2 95%);*/
		/*
	background-image: url(../images/homepart_bg.png);
    background-size: contain;
background-position: 50% 0%;
background-repeat: no-repeat;
*/background:#71bfe6;
        min-height: 800px;
        height: 100vh;
     /*   height: auto;*/
		margin-bottom:4rem;
		position: relative;
    }
	
	
 /*
	#banner .br,
	#banner .bl{    background-size: contain;

background-repeat: no-repeat;  bottom:0; position: absolute; width:35vw;   height: 100vh; display:block; z-index:2; }
 
	#banner .br{ right:0; background-position: 100% 100%;
		background-image: url(../images/banner_right.png);
	}
	#banner .bl{ left:0; background-position: 0% 100%;
		background-image: url(../images/banner_left.png);
	}*/
    
    #banner .bg-image {
        height: 100%;
        width: 100%;
        margin-top: -2rem;
		margin:0 auto;
		 text-align:center;
        /* background-image: url(../images/topbanner.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat; */
    }
    #banner .bar { height:140px; width:100%; display:block;
background:#6bc3ef;
 	/*background: rgb(13,58,45);
background: linear-gradient(0deg, rgba(13,58,45,1) 4%, rgba(0,159,223,1) 13%); */
	}
    #banner .container_2{width:100%;
		
    height: calc(100vh - 140px);
	min-height:700px;
	}
    #banner .homepart_full {
    
    width: auto;
    height: calc(100vh - 140px);
	min-height:700px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
	}
	/*
    #banner .bg-image .banner_base,
    #banner .bg-image .banner_base object,
    #banner .bg-image .banner_base svg,*/
	
	/*
    #banner .bg-image .banner_base { 
        height: 100%;
        max-height: 75vh;
        min-height: 75vh;
		 text-align:center;
		margin:0 auto; position:relative;
display:block;		 
    }  
    #banner .bg-image .banner_base_ah { 
	width:auto; height: 75vh;
	
	}
	#banner .container{       display: flex;
        justify-content: center ;
        align-items: flex-end;
		}
	#banner .homepart_main{ z-index:10; position: static; width:auto; margin: 0 auto 0 auto; height:100%; max-height:80vh;  }
	*/
	
	.svg_cnt{		
  max-width: 100%;
  height: auto;
	}
	
 
	/*
    #banner .bg-image object,  
    #banner .bg-image svg {
        height:100%;
    }*/
	
    
    #banner .container {
        position: relative;
       /* padding-top: 6.8rem;*/
    }
    
    #banner .bg-element {
        top: 0;
        right: 105%;
        position: absolute;
        width: 8px;
        height: 241px;
    }
    
    #banner h1 {
        margin-top: -10%;
        color: #FFF;
    }
    
    #banner h1 span {
        display: block;
    }
	
	
	
    #swiper {
        padding-top: 0;
        /* padding-bottom: 10rem; */
    }
    #swiper span{ display: inline}
    
	/*
    #swiper.box-1 {
        background: rgb(82,191,101);
background: linear-gradient(0deg, rgba(82,191,101,1) 11%, rgba(190,218,82,1) 51%, rgba(82,191,101,1) 91%); 
    }
    
    #swiper.box-2 {
         background: rgb(243,119,67);
background: linear-gradient(0deg, rgba(243,119,67,1) 11%, rgba(255,227,80,1) 51%, rgba(243,119,67,1) 91%); 
    }
    
    #swiper.box-3 {
        background: rgb(141,118,181);
background: linear-gradient(0deg, rgba(141,118,181,1) 11%, rgba(243,162,199,1) 51%, rgba(141,118,181,1) 91%); 
    }
    
    #swiper.box-4 {
         background: rgb(38,175,229);
background: linear-gradient(195deg, rgba(38,175,229,1) 11%, rgba(175,225,249,1) 51%, rgba(38,175,229,1) 91%); 
    }
    */
	  #swiper .smm_box .box-1 .smm_bg,
	  #swiper .smm_box .box-1 {
       background: rgb(82,191,101);
		background: linear-gradient(0deg, rgba(82,191,101,1) 11%, rgba(190,218,82,1) 51%, rgba(82,191,101,1) 91%); 
    }
	  #swiper .smm_box .box-2 .smm_bg,
	  #swiper .smm_box .box-2 {
         background: rgb(243,119,67);
		background: linear-gradient(0deg, rgba(243,119,67,1) 11%, rgba(255,227,80,1) 51%, rgba(243,119,67,1) 91%); 
    }
	  #swiper .smm_box .box-3 .smm_bg,
	  #swiper .smm_box .box-3 {
        background: rgb(141,118,181);
		background: linear-gradient(0deg, rgba(141,118,181,1) 11%, rgba(243,162,199,1) 51%, rgba(141,118,181,1) 91%); 
    }
	  #swiper .smm_box .box-4 .smm_bg,
	  #swiper .smm_box .box-4 {
         background: rgb(38,175,229);
		background: linear-gradient(0deg, rgba(38,175,229,1) 11%, rgba(175,225,249,1) 41%, rgba(38,175,229,1) 71%);  
    }
	
	
	
	  #swiper .smm_box .box-container{ border-radius:  0 180px 0 0 ; }
	  #swiper .smm_box .smm_bg{
		  width:100vw;
		  height:100%;
		  position:absolute;
		  left:-100vw;
		  display:block;		   
		  z-index:1;  		 
	  }  
	  #swiper .smm_box .smm_bg .smm_bg_inner{
		   position: relative;
	  }	  
	  #swiper .smm_box .rd{/*
		  position:absolute; top:0; right:0;
        background: url(../images/rd.png) no-repeat 0 0; width:300px; height:300px; display:block;	*/	
		}
	  #swiper .smm_box  .pt_bg{
		  position:absolute; top:0; right:50%;  z-index:2;
        background-image: url(../images/smm_b1.png) ; width:700px; height:100%; display:block;		
		}
	  #swiper .smm_box .box-2 .pt_bg{ 
        background-image: url(../images/smm_b2.png) ; 
		}
		
	  #swiper .smm_box .box-3 .pt_bg{  
        background-image: url(../images/smm_b3.png) ; 
		}
	  #swiper .smm_box .box-4 .pt_bg{  
        background-image: url(../images/smm_b4.png) ; 
		}
		
		
		
		
		
		
		
	  #swiper .smm_box .smm_bg .smm_bg_inner .rd{
		  top: auto; bottom:0; right:auto; left:0;
	  }
	  #swiper .smm_box .box_tt{   
		  z-index:100; position: relative;
	}
	  
	  #swiper .smm_box  .box_tt{
		color:#fff;		  
	 font-size:2.5em;padding:50px 0 0 20px;
	  }
	  #swiper .smm_box .box-1 .box_tt{    text-shadow: -1px 0 #bcd952, 0 2px #bcd952, 2px 0 #bcd952, 0 -1px #bcd952;	}
	  #swiper .smm_box .box-2 .box_tt{color:#fff; text-shadow: -1px 0 #ffdf50, 0 2px #ffdf50, 2px 0 #ffdf50, 0 -1px #ffdf50;
 
	}
	  #swiper .smm_box .box-3 .box_tt{    text-shadow: -1px 0 #f4a2c6, 0 2px #f4a2c6, 2px 0 #f4a2c6, 0 -1px #f4a2c6;	}
	  #swiper .smm_box .box-4 .box_tt{    text-shadow: -1px 0 #a9dff8, 0 2px #a9dff8, 2px 0 #a9dff8, 0 -1px #a9dff8;	}
	  
	  
	 #swiper .smm_box  .smm_text{ z-index:110; position: relative ; padding: 0 0 0 1rem; height:460px; padding-bottom:70px;
	  display: flex; 
        align-items: center; position: relative;
		}
	  #swiper .smm_box  .ps_txt{ position: absolute; bottom:20px; left:1rem;}
	 #swiper   .smm_text p,
	 #swiper  .smm_text span{   font-size:1.2em; font-weight:bold;}
	 #swiper  .smm_text p span,
	 #swiper  .smm_text span span{   font-size: inherit; font-weight:bold;}
	 
  html:lang(zh-Hant) body 	 #swiper  .smm_text p span,
	  html:lang(zh-Hant) body   #swiper  .smm_text span span{
  font-family: 'Ropa Sans', ' Noto Sans Tc ',sans-serif;
}
  html:lang(zh-Hans) body 	 #swiper  .smm_text p span,
	  html:lang(zh-Hans) body   #swiper  .smm_text span span{
  font-family: 'Ropa Sans', ' Noto Sans Sc ',sans-serif;
}
 
    

	 #swiper .box-1 .smm_text p,
	 #swiper .box-1 .smm_text span{ color:#00568e;}
	 
	 #swiper .box-2 .smm_text p,
	 #swiper .box-2 .smm_text span{ color:#087e36;}
	 
	 #swiper .box-3 .smm_text p,
	 #swiper .box-3 .smm_text span{ color:#fff200;}
	 
	 #swiper .box-4 .smm_text p,
	 #swiper .box-4 .smm_text span{ color:#81257d;}
	 
 
	 
	 #swiper .smm_text p.num2,
	 #swiper .smm_text span.num2{font-size:2em; }
	 #swiper .smm_text p.big-num2,
	 #swiper .smm_text span.big-num2{font-size:2em; color:#fff !important;}
	 #swiper .smm_text p.big-num,
	 #swiper .smm_text span.big-num{font-size:3.5em; color:#fff !important;}
	 #swiper 	.df_middle{ 
        display: flex;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap;}
		
    #swiper .arrow-prev,
    #swiper .arrow-next {
        position: absolute;
        width: 42px;
        height: 42px;
        transition: all 0.3s ease-in-out;
        z-index: 999;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
        top: 50%;
    }
    
    #swiper .arrow-prev {
        right: 103%;
		/*
        transform: translateY(-50%);
        background-image: url(../images/arrow_green.svg);*/

  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  
  border-right:30px solid blue; 
    animation: arrowright forwards 1s infinite;
    animation-timing-function: linear;
    }
    
    #swiper .arrow-next {
        left: 103%;
		/*
        transform: translateY(-50%);
        background-image: url(../images/arrow_green_next.svg);
		*/
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;  
  border-left: 30px solid green;		
   
    animation: arrowleft forwards 1s infinite;
    animation-timing-function: linear;
    }
	
@keyframes arrowleft {
  0%   {left: 103%;} 
  50%  {left: 102.5%;} 
  100% {left: 103%;} 
}
@keyframes arrowleft_e {
  0%   {left: 103%;} 
}
    #swiper .arrow-next:hover{
    animation: arrowleft_e forwards 1s infinite;
    animation-timing-function: linear;
		
	}
 
@keyframes arrowright {
  0%   {right: 103%;} 
  50%  {right: 102.5%;} 
  100% {right: 103%;} 
}
@keyframes arrowright_e {
  0%   {right: 103%;} 
}
    #swiper .arrow-next:hover{
    animation: arrowleft_e forwards 1s infinite;
    animation-timing-function: linear;		
	}
    #swiper .arrow-prev:hover{
    animation: arrowright_e forwards 1s infinite;
    animation-timing-function: linear;		
	}
	
	
	
    #swiper .box-1 .arrow-prev  { border-right-color:#21ae54;}
    #swiper .box-1 .arrow-next { border-left-color:#21ae54;}
	
    #swiper .box-2 .arrow-prev  { border-right-color:#ec6b2a;}
    #swiper .box-2 .arrow-next { border-left-color:#ec6b2a;}
	
    #swiper .box-3 .arrow-prev  { border-right-color:#a97eb6;}
    #swiper .box-3 .arrow-next { border-left-color:#a97eb6;}
	
	
    #swiper .box-4 .arrow-prev  { border-right-color:#1994d4;}
    #swiper .box-4 .arrow-next { border-left-color:#1994d4;}
 

    /*
    #swiper.box-1 .arrow-prev {
        background-image: url(../images/arrow_green.svg);
    }
    
    #swiper.box-1 .arrow-next {
        background-image: url(../images/arrow_green_next.svg);
    }
    
    #swiper.box-2 .arrow-prev {
        background-image: url(../images/arrow_yellow.svg);
    }
    
    #swiper.box-2 .arrow-next {
        background-image: url(../images/arrow_yellow_next.svg);
    }
    
    #swiper.box-3 .arrow-prev {
        background-image: url(../images/arrow_blue.svg);
    }
    
    #swiper.box-3 .arrow-next {
        background-image: url(../images/arrow_blue_next.svg);
    }
    
    #swiper.box-4 .arrow-prev {
        background-image: url(../images/arrow_d_blue.svg);
    }
    
    #swiper.box-4 .arrow-next {
        background-image: url(../images/arrow_d_blue_next.svg);
    }
    */
    #swiper .box-wrapper {
        margin-left: 13px;
    }
    
    #swiper .text {
        padding-left: 1rem;
        padding-bottom: 2rem;
        padding-top: 5rem;
    }
    
    #swiper .box-container {
        display: none;
    }
    
    #swiper .box-container.active {
        display: block;
    }
    
    #swiper .box-container .image .sc_cover,
    #swiper .box-container .image img {
		max-width:500px;
        width: 100%;
        height: auto;
    }
    
    #swiper .box-container .bg-element {
        top: 0;
        left: 105%;
    }
    
    #swiper .box-container .image .bg-element {
        top: 0;
        left: auto;
        right: 0;
        width: 130px;
        height: 33px;
    }
    
    #swiper .box-container .text .bg-element {
        top: -15%;
        left: auto;
        right: 110%;
    }
	#swpager_cnt{
		display: flex;
        align-items: center;
        justify-content: center;
		height:40px;
	}
	#swpager_cnt 
		.swiper-pagination-bullet{
        transition: all 0.3s ease-in-out;
			width:20px; height:4px; margin:16px  1px 0 1px; overflow:hidden; display:inline-block; font-size:0; 
			border-radius: 0;
		  background: #72c5f1;
		  opacity: 1;
	}
	#swpager_cnt .swiper-pagination-bullet.swiper-pagination-bullet-active{
		margin:0 1px 0 1px; height:20px; 
		
	}
	#swpager_cnt .swiper-pagination-bullet:nth-child(1){background: #cdd846;  }
	#swpager_cnt .swiper-pagination-bullet:nth-child(16),
	#swpager_cnt .swiper-pagination-bullet:nth-child(17){background: #1b52a2;;  }
	
		
    #swiper  .summary_box{z-index:130;}
    #swiper .summary {
        position: relative;
        display: flex;
        /* bottom: calc(-0.75rem + 1px);
right: 0; */
/*
        padding-top: 4rem;*/
		z-index:330;
       /* margin-bottom: -0.842em; */
        margin-top: -0.842em; 
		height:0;
    }
	#members{z-index:20;}
    
    #swiper .summary .dot {
        width: 1.684em;
        height: 1.684em;
        box-shadow: 0 0 0 2px transparent;
        border-radius: 50%;
        cursor: pointer;
        margin-left: 2rem;
        transition: all 0.3s ease-in-out;
    }
    
    #swiper .summary .dot:first-of-type {
        margin-left: 0;
    }
    
    #swiper .summary .dot:hover {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
    }
   #swiper .summary .dot.green{ background:#21ae54 !important}
   #swiper .summary .dot.orange{ background:#ec6b2a !important}
   #swiper .summary .dot.blue{ background:#a97eb6 !important}
   #swiper .summary .dot.dblue{ background:#1994d4 !important}
   
   #swiper .summary .dot.active,
    #swiper.box-1 .dot.green,
    #swiper.box-2 .dot.orange,
    #swiper.box-3 .dot.blue,
    #swiper.box-4 .dot.dblue {
        box-shadow: 0 0 0 2px #000;
    }
    
    #swiper .image {
		position: relative;
		z-index:5;
		/*
        width: 105%;
        margin-top: -1rem;*/
    }
	/*
	    .box-wrapper .box {
        padding: 10px;
        border: 0; 
        min-height: 75px;
        display: flex;
        align-items: center;
		color:#fff;
		background:0;

    }
    */
	 #swiper .image  .sc_cover  { margin:0  0 0 0}

	 #swiper 	.sd_cover1_cnt{ padding:0; 
		 position:relative; }
		
	 #swiper 	.sd_cover1_cnt .sv_ccc{ width:auto; height:120%; bottom:0; right:-10%;  position: absolute; 
        display: flex;
        align-items: center;
        justify-content: flex-end;
		}
		
	.box-wrapper .box {
        padding: 10px;
        border: 0; 
        height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
		color:#fff; 
		cursor:pointer;

    }
	.box-wrapper .box h3{ font-size:1.6em; text-align:center; font-weight:bold;}
  #public #select .sticky-btn .list .box-wrapper .box{/*font-size:1.6em;*/}
  
  
  
	.box-wrapper.orange,
	.box-wrapper.blue,
	.box-wrapper.green,
	.box-wrapper.purple { background:0;  text-align:center;}
	.box-wrapper .box { position: relative; overflow: hidden; text-align:center;}
	
	.box-wrapper h3{ position:  static;  z-index:10;}
	.box-wrapper .bg{ width:100%; height:100%; position: absolute; display:block; z-index:1;}
	.box-wrapper.orange .bg{  
 background: rgb(255,242,199);
background: linear-gradient(0deg, rgba(255,242,199,1) 1%, rgba(255,254,253,1) 31%, rgba(255,255,255,1) 73%, rgba(255,243,204,1) 100%); 
	}
.box-wrapper.blue .bg{  
	 background: rgb(179,236,255);
background: linear-gradient(0deg, rgba(179,236,255,1) 1%, rgba(255,254,253,1) 31%, rgba(255,255,255,1) 73%, rgba(179,236,255,1) 99%); 
}
	
.box-wrapper.green .bg{  
	background: rgb(255,210,230);
background: linear-gradient(0deg, rgba(223,252,249,1) 1%, rgba(255,255,255,1) 31%, rgba(255,255,255,1) 73%, rgba(223,252,249,1) 99%);
	}
.box-wrapper.purple .bg{  
	background: rgb(255,210,230);
background: linear-gradient(0deg, rgba(255,210,230,1) 1%, rgba(255,254,253,1) 31%, rgba(255,255,255,1) 73%, rgba(255,210,230,1) 99%);
	}
 	.box-wrapper.orange .box{
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #f47320, #ffd33e) border-box;
  border-radius: 0 30px  0 30px; 
  border: 4px solid transparent;
  color:#f47320;
	}
	
	
	
  .box-wrapper.blue .box{
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #008dd0, #1bc1f9) border-box;
  border-radius: 0 30px  0 30px; 
  border: 4px solid transparent;
  color:#008dd0; 
	}
  
	  .box-wrapper.green .box{
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #5cc4b7, #b8f2eb) border-box;
  border-radius: 0 30px  0 30px; 
  border: 4px solid transparent;
  color:#5cc4b7; 
	}
 .box-wrapper.purple .box{
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #9d6cae, #f098c0) border-box;
  border-radius: 0 30px  0 30px; 
  border: 4px solid transparent;
  color:#9d6cae; 
	}
	
 	#orange-box .top b.tt{ color:#f47320;}
 	#blue-box .top b.tt{ color:#008dd0;}
 	#green-box .top b.tt{ color:#5cc4b7;}
 	#purple-box .top b.tt{ color:#9d6cae;}
	
   	.box-wrapper .box{
        transition: all 0.3s ease-in-out;}
		
   	.gaBtn.active .box-wrapper.orange .box,
    	.box-wrapper.orange .box:hover {
        box-shadow: -3px 9px 2px 3px rgb(255 211 62/ 40%), -9px 18px 5px 4px rgb(255 211 62 / 30%), -16px 27px 5px 5px rgb(255 211 62 / 20%);
    }
      	.gaBtn.active .box-wrapper.blue .box,
    	.box-wrapper.blue .box:hover {
        box-shadow: -3px 9px 2px 3px rgb(27 193 249/ 40%), -9px 18px 5px 4px rgb(27 193 249 / 30%), -16px 27px 5px 5px rgb(27 193 249 / 20%);
    }
	
   	   	.gaBtn.active .box-wrapper.green .box,
    	.box-wrapper.green .box:hover {
        box-shadow: -3px 9px 2px 3px rgb(92 196 183 / 40%), -9px 18px 5px 4px rgb(92 196 183 / 30%), -16px 27px 5px 5px rgb(92 196 183  / 20%);
    }


	
   	   	.gaBtn.active .box-wrapper.purple .box,
    	.box-wrapper.purple .box:hover {
        box-shadow: -3px 9px 2px 3px rgb(240 152 192 / 40%), -9px 18px 5px 4px rgb(240 152 192 / 30%), -16px 27px 5px 5px rgb(240 152 192  / 20%);
    }
	
	
	
  
  
  
  
    .big-num {
        font-size: 3.5rem;
        font-weight: 700;
        background: transparent !important;
        margin-bottom: 0;
        line-height: 0.5;
    }
    .big-num2 {
        font-size: 1.5rem;
        font-weight: 700;
        background: transparent !important;
        margin-bottom: 0;
        line-height: 0.5;
    }
    
	    .bg-element,
    .bg-color {
        position: absolute;
    }
    
    .slogan {
        max-width: 330px;
        width: auto;
        height: auto;
    }
    /*
	main section{ min-height:calc(100vh - 122px)}*/
	main section h2.underline{ padding:0 0 2rem 0;}
	
	.ms_inner{
		
		position: relative;
        flex-wrap: nowrap;
		 
        display: flex;
        justify-content: flex-start;
        align-items: center;
	}
	.ms_inner h2.underline{ margin:0; padding:0;}
	#road_cnt{ position: relative;
		
	}
	#road_cnt .bb{ border:0px solid #f0f; z-index:500; position: absolute; display:block; width:10vw;height:100%;}
	#road_cnt .bb.bl{left:0; top:0; background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 74%, rgba(255,255,255,0) 100%);}
	#road_cnt .bb.br{right:0; top:0; background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 4%, rgba(255,255,255,1) 27%);}
	#road_cnt .container{
		position: relative;
        flex-wrap: wrap;
		 
        display: flex;
        justify-content: center;
        align-items: center;z-index:300; 
	}
	
	#road_item_cnt_mb{ display:none;}
	#road_item_cnt{display:block; width:100%;height:100%;position: relative; left:0; top:0;}
	#road_item_inner{   margin:0 auto; width:100%;height:100%; position: relative;
	/*
        display: flex; 
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;*/
	}
	
	
	#road_item_inner .row{ width:100%;  position: relative; z-index:10;}
	#road_item_inner .ri_left,
	#road_item_inner .ri_center,
	#road_item_inner .ri_right{ padding:0;  }
	#road_item_inner .ri_right{ /*
        display: flex; 
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-start;
        align-content: flex-start;*/
	}
	
	  #road_img{margin:5px auto 0 auto;}
	
	#road_item_inner .ri_left{ width:28%}
	#road_item_inner .ri_center{ width:44%;
        display: flex; 
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
	}
	#road_item_inner .ri_right{ width:28%; position: relative;}
	
	#road_item_inner .readmore_btn{/* position: absolute; bottom:0; right:0; z-index:120;*/}
	#road_inn_mb .readmore_btn{ position: static; bottom:0; right:5%}
#road_inn_pc{ display:flex;}
#road_inn_mb{ display:none;} 
	
	
    #road_item_inner .road_ani {width:auto; height: 100%;}
    #road_item_inner .road_ani svg, 
    #road_item_inner .road_ani object { 
	width:auto; height: 100%;
	
	}
	
.road_inn_pc_bg{  
/*
	 z-index:1;
    width: auto;
    height: 100%; 
    position: absolute;
    left: 50%;
    transform: translateX(-50%); border:0px solid #f0f; text-align:center;*/
	 border:0px solid #f0f;
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
	top:0;
	display:block;
	width:100%;
	height:auto;
}
/*

.road_inn_pc_bg img{ width:auto; height:100%; border:0px solid #ff0;
}*/
 
.road_inn_pc_bg .road_ani{ 
position:re
}
#road_content{
	
	
}
	.mms_item{ width:100%; display:block; clear:both; padding:0 0 2rem 0;}
	
.mms_item.pc{ position: relative;}


.mms_item.pc .ms_year{ margin:0 auto;
	width:60px; 
height:60px;
	display: flex; 
	background-image:url(../images/ms_year.png);
background-position: 0% 50%;   z-index:100;
  position: absolute;z-index:100; top:0;
}


.mms_item.pc.m1  .ms_year span,
.mms_item.pc.m1  .ms_year{  
	width:70px; 
height:70px;
}
.mms_item.pc .ms_year span{ z-index:1;
	width:60px; 
height:60px;
	display: flex;
        align-items: center;
	justify-content: center;
	font-weight:bold; font-size:0.8em;
	flex-wrap:nowrap; 
 
}
.mms_item.pc.m1  .ms_year{ right:-45%;}
.mms_item.pc.m2  .ms_year{ right:-35%;}
.mms_item.pc.m3  .ms_year{ right:-30%;}

.mms_item.pc.m4  .ms_year{ left:-44%;}
.mms_item.pc.m5  .ms_year{ left:-25%;}
.mms_item.pc.m6  .ms_year{ left:-30%;}
.mms_item.pc.m7  .ms_year{ left:-30%;}

.mms_item.pc b.ms_line{display:inline-block; height:100px; border-left:3px dotted #f7941d; width:1px; overflow:hidden;
  position: absolute;z-index:20; top:0;
}
.mms_item.pc.m1   b.ms_line{ right:-35%; top:5%; height:130px;}
.mms_item.pc.m2   b.ms_line{ right:-27%; top:5%; height:130px;}
.mms_item.pc.m3   b.ms_line{ right:-22%; top:5%; height:280px;}

.mms_item.pc.m4   b.ms_line{ left:-36%; top:5%; height:180px;}
.mms_item.pc.m5   b.ms_line{ left:-34%; top:0%; height:70px; 
         transform: rotate(-75deg);}
.mms_item.pc.m6   b.ms_line{ visibility: hidden;}
		 
.mms_item.pc.m7   b.ms_line{ left:-22%; top:5%; height:280px;}


	.mms_item img{
        border-radius:0 30px 0 30px;}
	.ms1 .mms_item.m1{padding:0 0 2rem 0}
	.ms1 .mms_item.m2{padding:0rem 0 3rem 0}
	
	.ms1  .mms_item.m4{margin:2rem 0 0 0}
	.ms1  .mms_item.m5{margin:2rem 0 0 0; padding:0 0 1rem 10px;}
	.ms1  .mms_item.m6{padding:0 0 1rem 20px;}
	.ms1  .mms_item.m7{margin:2rem 0 0 0; padding:0 0 0.5rem 20px;} 
 
  
.lg2 .ms1 .mms_item.m1,
.lg3 .ms1 .mms_item.m1{padding:2rem 0 3rem 0}
.lg2 .ms1 .mms_item.m2,
.lg3 .ms1 .mms_item.m2{padding:0rem 0 5rem 0}

.ms1 .mms_item.m3,
.lg2 .ms1 .mms_item.m3,
.lg3 .ms1 .mms_item.m3{margin:8rem 0 0 0}

 .mms_item.pc.m3   b.ms_line,
.lg2 .mms_item.pc.m3   b.ms_line,
.lg3 .mms_item.pc.m3   b.ms_line{  height:140px;}

  .mms_item.pc.m7  .ms_year,
.lg2 .mms_item.pc.m7  .ms_year,
.lg3 .mms_item.pc.m7  .ms_year{ top:80px;}

.mms_item.pc.m7   b.ms_line,
.lg2 .mms_item.pc.m7   b.ms_line,
.lg3 .mms_item.pc.m7   b.ms_line{ left:-20%; top:calc(5% + 80px); height:140px;}
.mms_item.pc.m7   b.ms_line{ height:190px;}

.lg2 .ms1 .mms_item.m4,
.lg3 .ms1 .mms_item.m4{padding:0 0 4rem 30px;}
.lg2 .ms1 .mms_item.m5,
.lg3 .ms1 .mms_item.m5{margin:0; padding:0 0 4rem 30px;}
.lg2 .ms1 .mms_item.m6,
.lg3 .ms1 .mms_item.m6{padding:0 0 4rem 30px;}
.lg2 .ms1 .mms_item.m7,
.lg3 .ms1 .mms_item.m7{padding:0 0 0.5rem 10px;} 

	.mms_item::after {
  content: "";
  clear: both;
  display: table;
}
/*
	.mms_item.m1{padding:10% 0 60% 0}
	.mms_item.m3{padding:0 0 0 0}
	.mms_item.m2{padding:20% 0 10% 0}
	.mms_item.m4{padding:0 0 30% 0}
	.mms_item.m5{padding:0 0 0% 0}
 
	.mms_item.m2,
	.mms_item.m4,
	.mms_item.m5{ clear:right}
	*/
	
	.mms_item h2{ font-size:15px; font-weight:bold; color:#f7941d}	
	.ms2 .mms_item h2{ color:#008dd0}	
	
	.lg3 .mms_item  p,
	.lg2 .mms_item  p{ text-align: justify}
	.mms_item p{ font-size:13px; line-height:16px; font-weight: normal; }
	 
	.mms_item p img{ max-width:160px; float:left; padding:0 10px 2px 0;}
	.mms_item div{align-items: center;}
	
	
	/*
	.lg2 .mms_item h2{ font-size:16px;  }		
	.lg2 .mms_item p{ font-size:14px; line-height:20px;   }
		
	.lg2 .mms_item.m1{padding:10% 0 70% 0}
	.lg2 .mms_item.m3{padding:0 0 0 0}
	.lg2 .mms_item.m2{padding:20% 0 20% 0}
	.lg2 .mms_item.m4{padding:0 0 40% 0}
	.lg2 .mms_item.m5{padding:0 0 0% 0}
		*/
	.readmore_btn{ cursor:pointer;position: relative;  }
	.readmore_btn  .svg{ position: static; z-index:1; }
	.readmore_btn  span{position: absolute; z-index:10; width:100%; height:100%; display:block; top:0;left:0; }
	
	.swiper-slide.ms_slide_item{ width:100%;position: relative; height:calc(100% + 4rem) !important; display:block;
		padding-bottom:4rem; }
 
	.swiper-slide.ms_slide_item.ms2{ height:calc(100% + 2rem) !important;}
	
 
	
	    #road_item_cnt .swiper-button-prev {
			left:-50px;
			z-index:1000;
        
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent; 
  
  border-right:30px solid #004ea1;  
	    animation: ms_arrowleft forwards 1s infinite;
		animation-timing-function: linear;
    }
	
     #road_item_cnt .swiper-button-prev.swiper-button-disabled:hover ,
    #road_item_cnt .swiper-button-prev.swiper-button-disabled,
    #road_item_cnt .swiper-button-prev:hover {
	    animation: ms_arrowleft_e forwards 0.3s infinite;
    animation-timing-function: linear;
	}
    #road_item_cnt .swiper-button-next {
			right:-50px;
			z-index:1000;
       
  width: 0; 
  height: 0; 
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;  
  border-left: 30px solid #004ea1;		
    
	    animation: ms_arrowright forwards 1s infinite;
		animation-timing-function: linear;
    }
     #road_item_cnt .swiper-button-next.swiper-button-disabled:hover ,
    #road_item_cnt .swiper-button-next.swiper-button-disabled,
    #road_item_cnt .swiper-button-next:hover {
	    animation: ms_arrowright_e forwards 0.3s infinite;
    animation-timing-function: linear;
	}
 
 
	
@keyframes ms_arrowright {
  0%   {right: -50px;} 
  50%  {right: -60px} 
  100% {right: -50px;} 
}
@keyframes ms_arrowright_e {
  0%   {right: -55px;} 
  100% {right: -55px;} 
}
@keyframes ms_arrowleft{
  0%   {left: -50px;} 
  50%  {left: -60px} 
  100% {left: -50px;} 
}
@keyframes ms_arrowleft_e {
  0%   {left: -55px;} 
  100% {left: -55px;} 
}



	    #road_item_cnt .swiper-button-prev::after,
	    #road_item_cnt .swiper-button-next::after{ content:""}
	
	#dn_full_cut{ position: relative;
			
		}
		#dn_full_cut a.readmore_btn{ position: relative; z-index:10;}
		#dn_full_cut .line{
			position: absolute;
			left:0;
			top:50%;
			height:4px; background:#00A1E0;
			width:50vw;
			display:block;
			z-index:1;
		}
		
	/*---------------------------------------------*/
	
	  #slogan {
        padding-top: 4rem;
        padding-bottom: 5rem;
    }
    
    #slogan .more p {
        width: 135px;
        margin-bottom: -4px;
        background-color: #fff;
    }
    
    #slogan .more p::before {
        bottom: 0;
        height: 56%;
    }
    
    #slogan .more:hover {
        text-decoration: none;
    }
    
    #slogan .more {
        width: 230px;
        height: 88px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #slogan .more::before {
        width: 100vw;
        right: 0;
        left: auto;
    }
    
    #slogan .download_btn {
        width: 88px;
        height: 88px;
        position: absolute;
        right: -80px;
        top: 0;
    }
    
    #slogan .colorbar {
        left: 100%;
        bottom: 20%;
        z-index: 1;
    }
    
    #slogan img {
        max-width: 100%;
        height: auto;
    }
    
  footer {
        font-size: 0.875rem;
    }
    
    footer .footer-list {
        border-bottom: 3px solid #fff;
    }
    
    footer .footer-list ul a {
        color: #fff;
    }
    
    footer .footer-list ul {
        display: flex;
        justify-content: center;
        margin-bottom: 0;
        padding: 1rem 0;
        flex-wrap: wrap;
    }
    
    footer .footer-list ul li {
        padding: 0.5rem 1rem;
		list-style:none;
    }
    
    footer .footer-bottom {
        padding: 1.5rem 1rem;
    }
    
    footer .footer-bottom p {
        margin-bottom: 0;
        white-space: nowrap;
    }
    
    footer .logo_footer {
        max-width: 120px;
        width: auto;
        height: auto;
    }
	
	/*---------------------------------------------*/
#report{ min-height:10px; background:#ffccff;}
		
	  
    #esg { padding:0 0 3px 0}
    
    #esg .bg {
		display:block;
        width: 100vw;
        height:100%;
        background-color: #ecfbff;
        top: 0;
        left: -80vw;
        position: absolute;
		z-index:1;
    }
	#esg_p2_ani_pc{}
	#esg_p2_ani_mb{ display:none;}
	
    #esg img { position: relative; z-index:10}
     #future{ background:#0E55AD; padding:4rem 0 4rem  0}
	    #future img.img-fluid{
        border-radius:0 30px 0 30px;}
	    #future .desc{
        border-radius:0 30px 0 30px;
		padding:40px;
		

  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #55ac43, #0e55ad) border-box;
  border-radius: 0 30px  0 30px; 
  border: 4px solid transparent;
  color:#0e55ad; 
  width:130%; height:auto;
  margin:4rem -30% 0 0;
		}
		
		#report{ padding:4rem 0 4rem 0;  background:#dcd588}
		
		#report .left{
        display: flex;
        justify-content: flex-start;
        align-items: center;}
		
		#report .box_content p,
		#report .box_content h2{ position: relative; z-index:10;}
		#report .box_content h2{ color:#f47320 }
		#report .box_content{background:#e7ab37; padding:40px; position: relative; width:120%; margin:0 -20% 0 0 ; border-radius: 0   0 80px 0 ;


  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #f47320, #ffd33e) border-box;
  border: 4px solid transparent;
  border-left:0;
		}
		#report .box_content .bg{background:#e7ab37;
			display:block;
        width: 80vw;
        height:calc(100% + 8px);
        background-color: #e7ab37;
        top: -4px;
        left: -80vw;
        position: absolute;
		z-index:1;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #ffd33e, #f47320) border-box;
  border: 4px solid transparent;
  border-right:0;
		}
		
		#report .box_content .ball{background:#e7ab37; border-radius:  50%;
			display:block;
        width: 30px;
        height:30px;
        background-color: #fff;
        bottom: -15px;
        right:   10%; 
        position: absolute;
		z-index:1;
	 
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #ffd33e, #f47320) border-box;
  border: 4px solid transparent; 
		}
		
    #report .desc{color: #f47320;}
		
		
		.tt_line{ clear:both; display:block; width:100%;   height:20px; margin:20px 0 0 0;
		
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #f47320, #ffd33e) border-box;
  border-top: 3px solid transparent;
  }
  
		.tt_line.esg{		
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #11af4c, #f9ef04) border-box;
  border-top: 3px solid transparent;
  }
		
		
				#report{ padding:4rem 0 4rem 0;  background:#dcd588}
		
		#esg .left{ position: relative; z-index:1;}
		#esg .right{position: relative; z-index:10;
        display: flex;
        justify-content: flex-start;
        align-items: center;  }
		
		#esg .box_content p,
		#esg .box_content h2{ position: relative; z-index:10;}
		#esg .box_content h2{ color:#11af4c }
		#esg .box_content{background:#e7ab37; padding:40px; position: relative; width:110%; margin:10%  0 0 -10%; border-radius:  0   0 0 80px;

  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #11af4c, #f9ef04) border-box;
  border: 4px solid transparent;
  border-right:0;
		}
		#esg .box_content .bg{background:#e7ab37;
			display:block;
        width: 80vw;
        height:calc(100% + 8px);
        background-color: #e7ab37;
        top: -4px;
        left:   auto;
		right:-80vw;
        position: absolute;
		z-index:1;
	 
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #f9ef04, #11af4c) border-box;
  border: 4px solid transparent;
  border-left:0; 
		}
		#esg .box_content .ball{background:#e7ab37; border-radius:  50%;
			display:block;
        width: 30px;
        height:30px;
        background-color: #fff;
        bottom: -15px;
        left:   10%; 
        position: absolute;
		z-index:1;
	 
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #f9ef04, #11af4c) border-box;
  border: 4px solid transparent; 
		}
	 #report #mb_cgr_ani,
	 #esg #mb_esg_ani{ display:none;}
    #esg .desc{color: #11af4c;}
		
		#future .row{ flex-direction: row-reverse}
		
	   /*
    #esg .container .row {
        padding-top: 4rem;
    }
    
    #esg .desc {
        position: relative;
        margin-bottom: 2rem;
    }
    
    #esg .bg-color {
        width: 100vw;
        height: calc(100% + 3rem);
        background-color: #ecfbff;
        top: -4rem;
        left: 0;
        position: absolute;
    }
    
    #esg .esg-img {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        top: 0;
        background: radial-gradient(circle, #FFFFFF 35%, #98DBF9 55%, #54C7F5 70%);
    }
    
    #esg h2 {
        display: block;
        margin-bottom: 2rem;
    }
    
    #esg .right {
        padding-left: 2rem;
        padding-top: 6rem;
        padding-bottom: 9rem;
    }
    
    @media (min-width: 768px) {
        #esg .col-md-7 {
            -ms-flex: 0 0 62%;
            flex: 0 0 62%;
            max-width: 62%;
        }
        #esg .offset-md-7 {
            margin-left: 62%;
        }
        #esg .col-md-5 {
            -ms-flex: 0 0 38%;
            flex: 0 0 38%;
            max-width: 38%;
        }
    }
    
    #esg .icon {
        padding-top: 2.5rem;
        padding-right: 3rem;
    }
    
    #esg .row-bottom h3 {
        font-weight: 500;
    }
    
    #esg .icon p {
        font-weight: 500;
    }
    
    #esg .icon img {
        width: 69px;
        height: 69px;
        margin-bottom: 1rem;
    }
    
    #esg .bg-color-1 {
        background-color: #31ABE5;
        transition: all 0.3s ease-in-out;
    }
    
    #esg .bg-color-1.active,
    #esg .bg-color-1:hover {
        box-shadow: -3px 9px 2px 3px rgb(49 172 229 / 40%), -9px 18px 5px 4px rgb(49 172 229 / 30%), -16px 27px 5px 5px rgb(49 172 229 / 20%);
    }
    
    #esg .bg-color-2 {
        background-color: #0E55AD;
        transition: all 0.3s ease-in-out;
    }
    
    #esg .bg-color-2.active,
    #esg .bg-color-2:hover {
        box-shadow: -3px 9px 2px 3px rgb(12 85 173 / 40%), -9px 18px 5px 4px rgb(12 85 173 / 30%), -16px 27px 5px 5px rgb(12 85 173 / 20%);
    }
    
    #esg .bg-color-1,
    #esg .bg-color-2 {
        display: flex;
        justify-content: center;
        padding: 2rem 1rem 3rem;
        height: 100%;
        cursor: pointer;
    }
    
    #esg .bottom-button .bg-color-1 .icon,
    #esg .bottom-button .bg-color-1 img {
        width: 70px;
        height: 100px;
    }
    
    #esg .bottom-button .bg-color-2 .icon,
    #esg .bottom-button .bg-color-2 img {
        width: 123px;
        height: 123px;
    }
    
    #esg .row-bottom .col-md-5 {
        padding-left: 2rem;
        padding-right: 2rem;
        margin-top: -3rem;
    }
    
    #esg .row-bottom,
    #esg .bottom-button {
        padding-top: 0!important;
    }
    
    #esg .colorbar {
        left: 120%;
        top: 9rem;
        z-index: 1;
    }
    
    #esg .bottom-box .bg-color {
        width: calc(100% + 6.25rem);
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }
    
    #esg .bottom-box #box-1 .bg-color {
        background-color: #F0F5FA;
        border-top: 3px solid #31ABE5;
    }
    
    #esg .bottom-box #box-2 .bg-color {
        background-color: #F0F5FA;
        border-top: 3px solid #0E55AD;
    }
    
    #esg .bottom-box {
        min-height: 600px;
        background: #fff;
    }
    
    #esg .bottom-box .box {
        width: 100%;
        padding-top: 2rem;
        padding-bottom: 2rem;
        position: relative;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease-in-out;
    }
    
    #esg .bottom-box .box.active {
        opacity: 1;
        z-index: 1;
    }
    
    #esg .img-bg {
        width: 100vw;
        height: calc(100% + 2rem);
        background-color: #54C7F5;
        top: 0;
        right: 15px;
        position: absolute;
        min-height: 750px;
    }
    
    #esg .left .img-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        position: relative;
        min-height: 750px;
    }
    
    #esg .left .img-wrapper svg {
        margin-bottom: 1rem!important;
    }
    
    #esg .bottom-box .num {
        display: flex;
        align-items: flex-end;
        position: relative;
        font-family: 'Ropa Sans', sans-serif;
        margin-bottom: 2rem;
    }
    
    #esg .bottom-box .num h4 {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 0.8;
        margin-bottom: 0;
    }
    
    #esg .bottom-box .num p {
        font-size: 2.5rem;
        font-weight: 700;
        line-height: 0.8;
        margin-bottom: 0;
    }
    
    #esg #box-1 .box-1,
    #esg #box-1 .box-2,
    #esg #box-1 .box-3 {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    #esg #box-1 .box-1::before,
    #esg #box-1 .box-2::before,
    #esg #box-2 .box-2::before {
        content: '';
        position: absolute;
        width: 44px;
        height: 28px;
        background-image: url(../images/equal.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        top: 50%;
        transform: translateY(-50%);
    }
    
    #esg #box-1 .box-1::before {
        right: -22px;
    }
    
    #esg #box-1 .box-2::before {
        right: -22px;
    }
    
    #esg #box-2 .box-2::before {
        left: -18px;
        width: 36px;
        height: 51px;
        background-image: url(../images/arrow-right.svg);
    }
    
    #esg .bottom-box .esg-icon {
        width: 80%;
        max-width: 250px;
        height: auto;
        margin: 0 auto;
    }
    
    #esg #box-2 .box-2 .text-wrapper {
        max-width: 250px;
        margin: 0 auto;
    }
	*/
	
	/*---------------------------------------------*/
	
	 #members{ min-height:10px; 	 
        background-image: url(../images/bod_bg.jpg);
		padding:4rem 0 4rem 0;
		}
	 #members ul.member-list {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
        position: relative;
		padding:0;
    }
    
    #members ul.member-list.second {
        margin-left: 0;
        justify-content: flex-end;
    }
    
    #members ul.member-list::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: #72c5f1;
        left: 0;
        bottom: 1.5rem;
    }
    
    #members .bg-element-1 {
        width: 100px;
        height: 75px;
        position: absolute;
        bottom: 1rem;
        right: 100%;
    }
    
    #members .bg-element-2 {
        width: 56px;
        height: 56px;
        position: absolute;
        bottom: 1rem;
        left: 100%;
    }
    
    #members ul.member-list li {
        width: calc(16% - 1rem);
        padding: 0 5px;
        position: relative;
		list-style:none;
    }
    
    #members ul.member-list li::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background-color: #72c5f1;
        left: 0;
        bottom: 1.5rem;
    }
    
    #members ul.member-list.third::before {
        background-color: #1b52a2;
    }
    
    #members ul.member-list li.ceo::before {
        background-color: #cbda43;
    }
     
    #members ul.member-list li.last::before {
        background-color: #1b52a2;
    }
    #members ul.member-list .photo{ position: relative}
    #members ul.member-list .last span.trr{
		bottom:2px; left:0;
		text-align:center; font-size:12px; 
		
		
        position: absolute; left:10%;
		width:80%; height:18px; font-size:12px; line-height:18px; background:rgba( 160,160,160,0.8); color:#fff; border-radius:6px;
		display:block;
	}
	
	    #members .swiper-slide   .last .photo{ position: relative}
	    #members .swiper-slide   .last span.trr{
		bottom:4px; left:0;
		text-align:center;  
		
		
        position: absolute; left:10%;
		width:80%; height:24px; font-size:14px; line-height:24px; background:rgba( 160,160,160,0.8); color:#fff; border-radius:6px;
		display:block;
	}
	
    
    #members ul.member-list li .member img {
        width: 100%;
        height: auto;
    }
    
    #members ul.member-list li .member {
        position: relative;
        padding: 0 0.5rem;
    }
    
    #members ul.member-list li .member p {
        text-align: center;
        position: absolute;
        font-size: 14px; letter-spacing:-0.5px ;line-height:16px;
        top: 90%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: auto;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    #members ul.member-list li .member:hover p {
        top: 102%;
        opacity: 1;
    }

	#ceo_msg,
	#chairman_msg{ padding:4rem 0 3px 0;}
	#message{ padding: 0 0 4rem 0;}
		#public{}
	#message .cmsg_box{ max-width:700px; margin:0 auto}
	#message .cb_photo{ position: relative; z-index:10}
	#message	.cb_msg{ background:#d7effd; padding:2rem 3rem 2rem 3rem; position: relative;
	  border-radius:0  0 0 80px;
	  }
	 #message .sky{display:block;  background:#d7effd; width:100%; height:400px; position: absolute; top:-400px; right:0; z-index:5;
	 
        border-radius:0 80px 0 0;
		background:url(../images/sky.jpg) no-repeat 100% 0;
		}
 
	#message	.readmore_btn{ position: absolute; bottom:0; right:0;}
	.msgbox_cnt{        position: relative; padding:0 0 0 0; border:0px solid #f00; }
	.msgbox_cnt .round_cnt{ width:60px; height:20px; display:block;  border:0px solid #f00; position: relative;  }
 	.msgbox_cnt .round_cnt.bottom{width:100%;} 
 	.msgbox_cnt .round_cnt .ball{ position: absolute; top:20px; left:-25px; display:block;   
	z-index:10; background:#fff;
	border: 3px solid #00a1e0;
        width: 16px;
        height: 16px; 
        border-radius: 50%;  
	}
 	.msgbox_cnt .round_cnt.bottom .ball{left:auto; top:auto;  bottom:20px; right:-25px;  
 
	}
 	.msgbox_cnt .round_cnt.top .round{ z-index:1; position: absolute; top:0; left:-20px; width:50px;display:block;  height:50px;
			 	
  border-radius: 20px 0 0   0  ; 
  border-top: 5px solid #00a1e0;
  border-left: 5px solid #00a1e0;
   
}
 	.msgbox_cnt .round_cnt.bottom .round{ z-index:1; position: absolute; bottom:0; right:-20px; width:50px;display:block;  height:50px;
			 	
  border-radius: 0 0 20px   0  ; 
  border-bottom: 5px solid #00a1e0;
  border-right: 5px solid #00a1e0;
   
}