@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
  font-family: 'Noto Sans KR', sans-serif !important; 
  box-sizing: border-box;
}
a{
  text-decoration: none !important;
}


.swiper-wrapper{
    flex-direction: column;
}

.swiper-container-home {
    height: 100vh;
    overflow-y: hidden;
    overflow-x:hidden;
  }
  .swiper-container-home .swiper-slide-home {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .swiper-container-home .swiper-slide-home .slider-inner {
    z-index: 1000;
  }
  .swiper-container-home .swiper-slide-home .slider-inner p {
    color: #fff;
    line-height: 26px;
    margin-bottom: 35px;
  }
  .swiper-container-home .swiper-slide-home .slider-inner h2 {
    color: #fff;
    margin-bottom: 40px;
    font-size: 40px;
    line-height: 50px;
  }
  .swiper-container-home .swiper-slide-home .slider-inner .gold {
    position: relative;
    top: -27px;
    width: 40px;
    height: 5px;
    background: transparent linear-gradient(90deg, #FDEC9E 0%, #CA9133 100%) 0% 0% no-repeat padding-box;
  }

  /*LOGO*/
  .home-logo {
    position: absolute;
    top: 0;
    transform: translateY(0);
    left: 20px;
    z-index: 100;
    display: flex;
    flex-direction: row;
  }
  
  /*LOGO */


  /*MENU*/
 
#nav {
  position: fixed;
  width: 100%;
  height: 70px;
  line-height: 70px;
  background-color: rgba(255,255,255,.6);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}
#nav a.logo{
  position:absolute;
  left:50px;
  text-decoration: none;
} 
#nav a.logo.active{
  top: 10px;
  font-size: 16px;
  color: #000;
  border-bottom:none
}
#nav a.logo img{
  min-width: 70px;
  width: 100%;
} 
#nav a{
  font-size: 16px;
  line-height: 16px;
  color:#000;
  
}
#nav a:hover{
  color:#e91c44;
}
#nav a.active {
  top: 0;
  font-size: 16px;
  color: #000;
  border-bottom:2px solid #af1f24;
  padding-bottom: 5px;
}

nav ul {
  list-style: none;
  text-align: center;
  position:absolute;
  right:320px;
  margin-bottom: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 54px;
}

nav ul li:last-child {
  margin-right: 0;
}

#back-to-tutorial {
  margin-left: 100px;
}

 /*MENU*/

.start_btn.on{
  background:url(../img/btn_play.png)no-repeat;
}
.start_btn{
  width: 24px;
  height:24px;
  background:url(../img/btn_pause.png)no-repeat;
  z-index: 100000;
  position: absolute;
  bottom:4.7%;
  left:200px;
}


/**slide_main_00**/
  #slide_main_00{
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
  }


.slide_main_00_l{
    width: 40%;
    max-width: 50%;
    z-index:1;
    position:absolute;
    left:0;
    height: 100%;
}
.slide_main_00_r {
    width: 60%;
    height: 100%;
    overflow: hidden;
    background:url(../img/about_main_bg.png)no-repeat;
    position:absolute;
    right:0;
    z-index:100;
}

.slide_main_00_l h4{
  font-size: 52px;
  color:#000;
  position:relative;
  display: block;
  margin-left: 90px;
  margin-top: 270px;
  margin-bottom: 0;
  width: 337px;
  font-weight: bold;
  text-align: left;
  z-index: -1;
  font-family: 'Roboto', sans-serif !important;
}
.slide_main_00_l h4::before{
  width: 10px;
  height: 10px;
  display: block;
  background-color: #af1f24;
  position:absolute;
  top: 8px;
  right: 104px;
  z-index: 10;
  content: '';
  border-radius: 50%;
}
.slide_main_00_l h4::after{
  width: 10px;
  height: 10px;
  display: block;
  background-color: #af1f24;
  position:absolute;
  top: 8px;
  right: 61px;
  z-index: 10;
  content: '';
  border-radius: 50%;
}
.slide_main_00_l p{
  text-align: left;
  margin-left: 90px;
  margin-top: 20px;
  margin-bottom: 0;
  display: block;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 300;
  color:#000;
}
.slide_main_00_l .sm_link{
  display: inline-block;
  margin-top: 120px;
}
.slide_main_00_l .sm_link > img{
  width: 154px;
  height: 50px;
  display: block;
  text-align: left;
  position: absolute;
  left:90px;
}
.detail_btn{
  transition:  250ms ease-in-out;
}
.detail_btn:hover{
  transition:  250ms ease-in-out;
}
.slide_main_00_l .sm_line{
  margin-top: 120px;
  margin-left: 90px;
  display: block;
}



#listBox { 
  width:1240px;  
  height:100% ;
  overflow-x:hidden;
  box-sizing: border-box;
  margin-right: 30px;
  position: relative;
}
#listBox .list { 
  position:absolute; 
  top:380px;
  overflow: hidden;
  right:30px;
  z-index: 10000;
  box-sizing:border-box;
  margin-bottom: 0;
   height:400px ;
}
#listBox .list li { 
  width:400px; 
  height:400px ;
  box-sizing:border-box; 
  display: block;
  text-align:center; 
  float:left;
  margin-right: 20px;
}
#listBox .list li img{
  display: block;
  width: 100%;
  max-width: 400px;
  height:400px ;
  position:absolute;
  z-index:99;
}
#listBox .list li::marker{
  display: none;
}
.btnPrev {  display: none;}
.btnNext {  display: none;}



/**slide_main_01**/
#slide_main_01{
  display: flex;
  justify-content:space-between;
  height: 100%;
  flex-direction: column;

}

#slide_main_01 .slide_main_01_l{
  color:#000;
  height: 100%;
  width: 100%;
 
}
#slide_main_01 .slide_main_01_l h4{
  margin-top: 223px;
  font-size: 52px;
  color:#000;
  font-weight: bold;
  margin-bottom: 15px;
}
#slide_main_01 .slide_main_01_l p{
  font-size: 16px;
  color:#000;
  font-weight: 300;
  margin:0;
  line-height: 1.5em;
}
#slide_main_01 .slide_main_01_l img{
  margin-top: 90px;
  margin-bottom: 48px;
}
#slide_main_01 .slide_main_01_r{
  width: 100%;
  height: 100%;
  position: relative;
}
#slide_main_01 .slide_main_01_r .sm_line{
  position: absolute;
  width: 1px;
  height: 40px;
  z-index: 1000;
  top: 42px;
  left: 50%;
}
#slide_main_01 .slide_main_01_r .sm_bg{
  width: 100%;
  height: 100%;
  position: relative;
  z-index:-1;
}
/***MAIN SECTION***/
#slide-0 {
    width: 100%;
    height: 100%;
}

#slide-0 .swiper-slide {
    width: 100%;
    text-align: center;
    font-size: 16px;
    
    padding:0;
}
#slide-0 .swiper-wrapper{
  display: flex;
  flex-direction: row;
  width: 100%;
}

#slide-0 .swiper-pagination{
    bottom:5%;
    left:90px;
}
#slide-0 .swiper-pagination-bullet{
    margin-right: 5px;
    width: 9px;
    height: 9px;
    margin-right: 12px;
    background: #fff;
    border:0.5px solid #000;
    opacity: 1;
}
#slide-0 .swiper-pagination-bullet-active{
  background: #af1f24;
  border:1px solid #af1f24;
  width: 24px;
  height: 9px;
  border-radius: 30px;
}


/**slide_main_02**/

#slide_main_02{
  display: flex;
  width: 100%;
  justify-content: space-between;
 
}
#slide_main_02 .sm02_1,#slide_main_02 .sm02_3{
  width: 33.3%;
  overflow: hidden;
}
#slide_main_02 .sm02_1:hover,#slide_main_02 .sm02_3:hover,
.sm02_2_img:hover{
  opacity: .6;
}
#slide_main_02 .sm02_2{
  width: 33.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  height: 100%;
}
#slide_main_02 .sm02_2 img{
  height: 50%;
  width: 100%;
}
#slide_main_02 .sm02_2 .slide_main_02_2{
  height: 50%;
}
#slide_main_02 .sm02_2 .slide_main_02_2 h4{
  font-size: 52px;
  color:#000;
  font-weight: bold;
  margin: 46px auto 15px;
}
#slide_main_02 .sm02_2 .slide_main_02_2 p{  
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5em;
  color:#000;
}
#slide_main_02 .sm02_2 .slide_main_02_2 .sm_link{
  display: inline-block;
  margin-top: 90px;
}
#slide_main_02 .sm02_2 .slide_main_02_2 .sm_link > img{
  width: 154px;
  height: 50px;
  display: block;
  text-align: center;
  margin-bottom: 90px;
}
#slide_main_02 .sm02_2 .slide_main_02_2 .sm_line{

  text-align: center;
  width: 100%;
  margin:0 auto;
  width: 1px;
  height: 40px;
  display: block;
}



/**slide_main_03**/
#slide_main_03{
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}


.slide_main_03_l{
  width: 40%;
  max-width: 50%;
  z-index:1;
  position:absolute;
  left:0;
  height: 100%;
}
.slide_main_03_r {
  width: 60%;
  height: 100%;
  overflow: hidden;
  background:url(../img/about_main_bg4.png)no-repeat;
  position:absolute;
  right:0;
  z-index:100;
}

.slide_main_03_l h4{
font-size: 52px;
color:#000;
position:relative;
display: block;
margin-left: 90px;
margin-top: 270px;
margin-bottom: 0;
width: 337px;
font-weight: bold;
text-align: left;
z-index: -1;
font-family: 'Roboto', sans-serif !important;
}

.slide_main_03_l p{
  text-align: left;
  margin-left: 90px;
  margin-top: 20px;
  margin-bottom: 0;
  display: block;
  font-size: 16px;
  font-weight: 300;
  color:#000;
  line-height: 1.5em;
}
.slide_main_03_l .sm_link{
display: inline-block;
margin-top: 120px;
}
.slide_main_03_l .sm_link > img{
width: 154px;
height: 50px;
display: block;
text-align: left;
position: absolute;
left:90px;
}
.slide_main_03_l .sm_line{
margin-top: 120px;
margin-left: 90px;
display: block;
}

/**company**/
#company{ 
  padding-top: 70px;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin:0 auto;
  text-align: center;
}


#company h3{
  margin: 90px 0 20px;
  text-align: left;
}
#company h3 b{
  color:#af1f24;
  font-size: 40px;
  font-weight: 500;
  font-family: 'Roboto' !important;
  margin-right: 5px;
}
#company h3 span{
  display: inline-block;
  color:#000;
  font-size: 16px;
  font-weight: 300;
}
#company .company_txt{
  text-align: left;
  font-size: 16px;
  color:#000;
  font-weight: 300;
  margin-bottom: 90px;
  line-height: 1.5em;
}


#company .company_conts{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.compnay_cont_l{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.compnay_cont_l img{
  width: 100%;
  max-width: 499px;
  margin-top: 18px;
}
.compnay_cont_l span{
  display: block;
  color:#000;
  font-size: 16px;
  font-weight: bold;
  margin-top:-36px;
}

.compnay_cont_r{
  width: 50%;
}
.compnay_cont_r ul{
  width: 100%;
  margin: 0;
  padding: 0;

}
.compnay_cont_r ul li{
  list-style: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  margin-bottom: 20px;
 
}
.compnay_cont_r ul li:last-child{
  margin-bottom: 0;
}
.compnay_cont_r ul li img{
  width: 50%;
  max-width:300px;

}
.compnay_cont_r ul li span{
  text-align: right;
  width: 50%;
  font-size: 16px;
  color:#000;
  font-weight: 300;
  line-height: 1.3em;
}
.compnay_cont_r ul li:nth-child(2){
  margin-left: 125px;
}
.compnay_cont_r ul li:nth-child(2) span{
  text-align: left;
}


/**company2**/
#company2{ 
  padding-top: 70px;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin:0 auto;
}
#company2 h3{
  color:#af1f24;
  font-size: 40px;
  text-align: left;
  font-weight: 500;
  margin: 90px auto 20px;
}
#company2 p{
  text-align: left;
  color:#000;
  font-size: 16px;
  line-height: 1.5em;
}
#company2 p.cp2_txt2{
  margin-bottom: 114px;
}
#company2 .cp2_conts{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1205px;
}
#company2 .cp2_conts .cp2_c_img1{
  width: 100%;
  max-width: 438px;
}
#company2 .cp2_conts .cp2_c_img2{
  width: 100%;
  max-width: 667px;
  margin-bottom: 60px;
}

#company2 .cp2_conts .cp2_cont{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}
#company2 .cp2_conts .cp2_cont p{
  font-size: 16px;
  line-height: 1.5em;
  color:#000;
  font-weight: 300;
  text-align: center;
  
}



/**business**/
#business {
  padding-top: 70px;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin:0 auto;
}
#business h3{
  color:#af1f24;
  font-size: 24px;
  font-weight: 500;
  margin:60px auto 20px;
  text-align: left;
}
#business p{
  color:#000;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5em;
  margin-bottom: 100px;
  text-align: left;
}
#business .bs_conts{
  width: 100%;
  display: flex;
  justify-content: space-between;
  max-width: 747px;
  margin:0 auto 50px;
}
#business .bs_conts div img{
  height: 236px;
}
#business .bs_conts div span{
  margin-top: 5px;
  color:#8e8e8e;
  font-size: 15px;
  font-weight: normal;
}
#business .bs_conts div img:last-child{
  width: 368px;
}
#business img.bs_cont{
  width: 100%;
  margin:0 auto;
  display: block;
  max-width: 946px;
}
#business span{
  text-align: right;
  width: 100%;
  max-width: 946px;
  display: block;
  margin:0 auto;
  margin-top: 5px;
  color:#8e8e8e;
  font-size: 15px;
}


/**business2**/
#business2{
  padding-top: 70px;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin:0 auto;
}
#business2 h3{
  color:#af1f24;
  font-size: 24px;
  font-weight: 500;
  margin:60px auto ;
  text-align: left;
}

#business2 ul{
  width: 100%;
}
#business2 ul li{
  display: flex;
  justify-content: center;
  width: 100%;

}
#business2 ul li p{
  font-size:16px;
  line-height: 1.5em;
  color:#000;
  font-weight: 300;
  text-align: left;
}
#business2 ul li.b2_list01{
  align-items: center;
  max-width: 1046px;
  width: 100%;
  margin: 0 auto 70px;
}
#business2 ul li.b2_list01 div img{
  max-width: 555px;
  display: block;
  margin-right: 30px;
}
#business2 ul li.b2_list01 div span{
  text-align: right;
  display: block;
  color:#8e8e8e;
  font-size: 16px;
  width: 555px;
  margin-top: 5px;
}
#business2 ul li.b2_list01 p{
  line-height: 2.5em;
  margin-bottom: 0;
  min-width: 490px;
  font-size: 16px;
  color:#000;
  font-size: 14px;
}
#business2 ul li.b2_list02{
  max-width: 893px;
  margin:0 auto;
  width: 100%;
  margin-right: 260px;
}
#business2 ul li.b2_list02 img{
  margin-left: 30px;
}
#business2 ul li.b2_list02 p{
  min-width: 579px;
  text-align: right;
  line-height: 2.5em;
  margin:0;
  margin-top: -10px;
  font-size: 14px;
}


/**operating**/
#operating{
  padding-top: 70px;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin:0 auto;
}
#operating h3{
  color:#af1f24;
  font-size: 24px;
  margin:60px 0 70px;
  text-align: left;
}
#operating img{
  margin-bottom: 50px;
}
#operating .op_tit{
  background-color: #af1f24;
  color:#fff;
  border-radius: 50px;
  width: 120px;
  height: 45px;
  display: block;
  line-height: 45px;
  font-size: 20px;
  font-weight: 500;
  margin:0 auto;
}

#operating .operating_cont{
  margin-top: 25px;
  padding:0;
  z-index: -1;
  position: relative;
}
#operating .operating_cont img{
  width: 100%;
  display: block;
  max-width: 144px;
  margin-bottom: 0;
}
#operating .operating_cont ul{
  width: 100%;
  max-width: 970px;
  height: 172px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0 auto;
}
#operating .operating_cont ul li{
  width: 33.3%;
  max-width: 400px;
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  border-right:2px solid #af1f24;
}
#operating .operating_cont ul li table{
  width: 100%;
  height: 175px;
}
#operating .operating_cont ul li table tr td{
  padding: 0 15px;
  font-size: 16px;
  color:#000;
  letter-spacing: 0px;
}
#operating .operating_cont ul li table tr:last-child td{
  font-weight: bold;
  font-size: 20px;
  color:#af1f24 !important;
}
#operating .operating_cont ul li span{
  width: 100%;
  display: block;
  margin-top: 0px;
  font-weight: bold;
  font-size: 16px;
}
#operating .operating_cont ul li p{
  margin-bottom: 0
}
#operating .operating_cont ul li p:nth-child(2){
  margin-top: 80px;
}

#operating .operating_cont ul li:last-child{
  padding-left:20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border-right:none;
  font-size: 16px;
  font-weight: bold;
}


/**operating2**/
#operating2{
padding-top:70px;
  min-height: 1080px;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin:0 auto;
}
#operating2 h3{
  color:#af1f24;
  font-size: 24px;
  text-align: left;
  font-weight: 500;
  margin: 60px auto 70px;
}

#operating2 img{
  margin-bottom: 50px;
}
#operating2 p{
  text-align: center;
  max-width: 900px;
  width: 100%;
  margin:0 auto;
  display: block;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5em;
  color:#000;
}
#operating2 p b{
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  display: block;
}



/**operating3**/
#operating3{
  padding-top: 70px;
  width: 100%;
  max-width: 1280px;
  margin:0 auto;
}
#operating3 > .op3_conts{
  display: flex;
  justify-content: space-between;
}
#operating3 h3{
  color:#af1f24;
  font-size: 24px;
  text-align: left;
  font-weight: 500;
  margin: 60px auto 70px;
}
#operating3 .op_tit{
  background-color: #af1f24;
  color:#fff;
  border-radius: 12px;
  width: 120px;
  height: 45px;
  display: block;
  line-height: 45px;
  font-size: 20px;
  font-weight: 500;
  margin:30px auto;
  text-align: center;
}

#operating3 .operating_cont{
  padding:0;
  z-index: -1;
  position: relative;
  height: 100%;
  max-height: 273px;
}
#operating3 .operating_cont img{
  width: 100%;
  display: block;
  max-width: 144px;
  margin-bottom: 0;
}
#operating3 .operating_cont ul{
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding: 0;
  margin: 0 auto;
  height: 100%;
  max-height: 273px;
}
#operating3 .operating_cont ul li:first-child{
  width: 100%;
  max-width: 400px;
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom:2px solid #af1f24;
  height: 160px;
}
#operating3 .operating_cont ul li table{
  width: 100%;

}
#operating3 .operating_cont ul li table tr td{
  padding: 5px 0;
  font-size: 16px;
  color:#000;
  letter-spacing: 0px;
}
#operating3 .operating_cont ul li table tr:last-child td{
  font-weight: bold;
  font-size: 20px;
  color:#af1f24 !important;
}
#operating3 .operating_cont ul li span{
  width: 100%;
  display: block;
  margin-top: 0px;
  font-weight: bold;
  font-size: 16px;
}
#operating3 .operating_cont ul li p{
  margin-bottom: 0;
  text-align: center;
  font-weight: 400;
}

#operating3 .operating_cont ul li:last-child{
  padding-left:0;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-right:none;
  font-size: 16px;
  font-weight: bold;
  border-bottom:none;
  width: 100%;
}
#operating3 .operating_cont ul li:last-child p b{
  font-size: 16px;
  display: block;
}


/**revenue**/
#revenue{
    padding-top: 70px;
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 1280px;
}

#revenue h3{
  margin: 60px 0 80px;
  color:#af1f24;
  font-size: 24px;
  text-align: left;
}
#revenue h4{
  color:#545454;
  font-size: 16px;
  text-align: left;
  font-weight: normal;
  margin:0 auto 50px;

}
.content {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1280px;
}

.heading {
  width: 100%;
  margin-left: 1rem;
  font-weight: 900;
  font-size: 1.618rem;
  text-transform: uppercase;
  letter-spacing: 0.1ch;
  line-height: 1;
  padding-bottom: 0.5em;
  margin-bottom: 1rem;
  position: relative;
}
.heading:after {
  display: block;
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #1a9be6, #1a57e6);
  bottom: 0;
}

.description {
  width: 100%;
  margin-top: 0;
  margin-left: 1rem;
  margin-bottom: 3rem;
}

.card {
  cursor: pointer;
  width:400px;
  height: 260px;
  perspective: 1000px;
  margin: 0 40px 40px 0;
  position: relative;
  box-sizing: border-box;
}

.card:nth-child(3){
  margin-right: 0;
}

.front,
.back {
  display: flex;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: ease-in-out 600ms;
  object-fit: cover;
}

.front {
  background-size: cover;
  overflow: hidden;
}
.front:before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 
  opacity: 0.25;
  z-index: -1;
}
.card:hover .front {
  transform: rotateY(180deg);
}
.card:nth-child(even):hover .front {
  transform: rotateY(-180deg);
}

.back {


  transform: rotateY(-180deg);
  padding: 0 2em;
}
.back .button {
  background: linear-gradient(135deg, #1a9be6, #1a57e6);
}
.back .button:before {
  box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
  background-color: rgba(26, 87, 230, 0.25);
}
.card:hover .back {
  transform: rotateY(0deg);
}
.card:nth-child(even) .back {
  transform: rotateY(180deg);
}
.card:nth-child(even) .back .button {
  background: linear-gradient(135deg, #e61a80, #e61a3c);
}
.card:nth-child(even) .back .button:before {
  box-shadow: 0 0 10px 10px rgba(230, 26, 60, 0.25);
  background-color: rgba(230, 26, 60, 0.25);
}
.card:nth-child(even):hover .back {
  transform: rotateY(0deg);
}

.button {
  transform: translateZ(40px);
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-weight: bold;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 100px;
  font: inherit;
  border: none;
  position: relative;
  transform-style: preserve-3d;
  transition: 300ms ease;
}
.button:before {
  transition: 300ms ease;
  position: absolute;
  display: block;
  content: "";
  transform: translateZ(-40px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  border-radius: 100px;
  left: 10px;
  top: 16px;
}
.button:hover {
  transform: translateZ(55px);
}
.button:hover:before {
  transform: translateZ(-55px);
}
.button:active {
  transform: translateZ(20px);
}
.button:active:before {
  transform: translateZ(-20px);
  top: 12px;
}


/**revenue**/
.widget {
  margin: 0 auto;
  width: 1000px;
  border-radius: 5px;

}

.widget_header {
  height: 40px;
  color: #545454;
  text-align: center;
  line-height: 40px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-weight: 400;
  font-size: 22px;
 text-decoration: underline;
}

.chart-container {
  margin-top: 50px;
}

/**revenue2**/
#revenue2{
  padding-top: 70px;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin:0 auto;
}
#revenue2 h3{
  font-size: 24px;
  margin:60px auto 70px;
  color:#af1f24;
}
#revenue2 h4{
  margin:0 auto;
  text-decoration: underline;
  color:#545454;
  font-size: 18px;
  font-weight: 500;
  
}
.r2_alert_icon{
  margin: 30px auto;
}
.r2_alert_icon ul{
  width: 100%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  max-width: 311px;
  padding: 0;
}
.r2_alert_icon ul li{
  width: 65px;
  list-style: none;
  position: relative;
  z-index: -1;
text-align: center;
font-size: 15px;
color:#545454;
}
.r2_alert_icon ul li:last-child{
  margin:0 0 0 0;
}
.r2_alert_icon ul .li1::before{
  display: block;
  content:'';
  width: 16px;
  height: 16px;
  background-color:#bfbfbf;
  position: absolute;
  left: -8px;
  top: 2px;
  z-index: 10;
  color:#545454;
  font-size: 15px;
}
.r2_alert_icon ul .li2::before{
  display: block;
  content:'';
  width: 16px;
  height: 16px;
  background-color:#ff8731;
  position: absolute;
  left: -8px;
  top: 2px;
  z-index: 10;
  color:#545454;
  font-size: 15px;
}
.r2_alert_icon ul .li3::before{
  display: block;
  content:'';
  width: 16px;
  height: 16px;
  background-color:#1766ff;
  position: absolute;
  left: -8px;
  top: 2px;
  z-index: 10;
  color:#545454;
  font-size: 15px;
}

/* Bar Graph Horizontal */

.bar-graph-horizontal {
  max-width: 1074px;
  width: 100%;
  margin: 0 auto;
  display: block;
  height: 380px;
  border:1px solid #eee;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.bar-graph-horizontal > div {
  float: left;
  margin-bottom: 20px;
  width: 100%;
}
.bar-graph-horizontal .bar-one,
.bar-graph-horizontal .bar-two,
.bar-graph-horizontal .bar-three,
.bar-graph-horizontal .bar-four{
  display: flex;
}
.bar-graph-horizontal > div:last-child{
  margin-bottom: 0;
}
.bar-graph-horizontal .year {
  float: left;
  margin-top: 10px;
  margin-right: 20px;
  width: 80px;
  color:#000;
  font-size: 16px;
  font-weight: 500;
  text-align: right;
  margin-left: 20px;
}
.bar-graph-horizontal .year2{
  float: left;
  margin-top: 18px;
  margin-right: 20px;
  width: 80px;
  color:#000;
  font-size: 16px;
  font-weight: 500;
  text-align: right;
  margin-left: 20px;
}
.bar-graph-horizontal .bar {
  border-radius: 3px;
  height: 18px;
  float: left;
  
  position: relative;
  width: 0;
  margin-bottom: 5px;
}
.bar-graph-horizontal .bar2 {
  border-radius: 3px;
  height: 18px;
  float: left;

  position: relative;
  width: 0;
  margin-bottom: 5px;
}
.bar-graph-horizontal .bar3 {
  border-radius: 3px;
  height: 18px;
  float: left;

  position: relative;
  width: 0;
 
}

.bar-graph-one .bar::after {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  color: #bfbfbf;
  content: attr(data-percentage);
  font-weight: 700;
  position: absolute;
  right: -60px;

}

.bar-graph-one .bar2::after {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  color: #ff8731;
  content: attr(data-percentage);
  font-weight: 700;
  position: absolute;
  right: -60px;


}
.bar-graph-one .bar3::after {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  color: #1766ff;
  content: attr(data-percentage);
  font-weight: 700;
  position: absolute;
  right: -60px;

}



.bar-graph-one .bar-two .bar {
  background-color: #bfbfbf;
  animation: show-bar31 20s 0.2s forwards;
}

.bar-graph-one .bar-three .bar {
  background-color: #bfbfbf;
  animation: show-bar8 20s 0.3s forwards;
}

.bar-graph-one .bar-four .bar {
  background-color: #bfbfbf;
  animation: show-bar25 20s 0.4s forwards;
}

.bar-graph-one .bar-one > .bar-one_cont,
.bar-graph-one .bar-two > .bar-two_cont,
.bar-graph-one .bar-three > .bar-three_cont,
.bar-graph-one .bar-four > .bar-four_cont{
  width: 100%;
  display: flex;
  flex-direction: column; 
}

.bar-graph-one .bar-one .bar2 {
  background-color: #ff8731;
  animation: show-bar22 20s 0.1s forwards;
}
.bar-graph-one .bar-two .bar2 {
  background-color: #ff8731;
  animation: show-bar61 20s 0.2s forwards;
}

.bar-graph-one .bar-three .bar2 {
  background-color: #ff8731;
  animation: show-bar18 20s 0.3s forwards;
}

.bar-graph-one .bar-four .bar2 {
  background-color: #ff8731;
  animation: show-bar52 20s 0.4s forwards;
}

.bar-graph-one .bar-one .bar3 {
  background-color: #1766ff;
  animation: show-bar22 20s 0.1s forwards;
}
.bar-graph-one .bar-two .bar3 {
  background-color: #1766ff;
  animation: show-bar92 20s 0.2s forwards;
}

.bar-graph-one .bar-three .bar3 {
  background-color: #1766ff;
  animation: show-bar28 20s 0.3s forwards;
}

.bar-graph-one .bar-four .bar3 {
  background-color: #1766ff;
  animation: show-bar78 20s 0.4s forwards;
}

/* Bar Graph Horizontal Animations */

@-webkit-keyframes show-bar8 {
  0% {
    width: 0;
  }
  100% {
    width: 8%;
  }
}
@-webkit-keyframes show-bar18 {
  0% {
    width: 0;
  }
  100% {
    width: 18%;
  }
}
@-webkit-keyframes show-bar22 {
  0% {
    width: 0;
  }
  100% {
    width: 22%;
  }
}
@-webkit-keyframes show-bar25 {
  0% {
    width: 0;
  }
  100% {
    width: 25%;
  }
}
@-webkit-keyframes show-bar28 {
  0% {
    width: 0;
  }
  100% {
    width: 28%;
  }
}

@-webkit-keyframes show-bar31 {
  0% {
    width: 0;
  }
  100% {
    width: 31%;
  }
}
@-webkit-keyframes show-bar52 {
  0% {
    width: 0;
  }
  100% {
    width: 52%;
  }
}
@-webkit-keyframes show-bar61{
  0% {
    width: 0;
  }
  100% {
    width: 61%;
  }
}
@-webkit-keyframes show-bar78{
  0% {
    width: 0;
  }
  100% {
    width: 78%;
  }
}
@-webkit-keyframes show-bar92 {
  0% {
    width: 0;
  }
  100% {
    width: 92%;
  }
}

@-webkit-keyframes fade-in-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.revenue2_txt{
  text-align: left;
  width: 100%;
  margin:50px auto 0;
  max-width: 1000px;
  display: flex;
  justify-content: center;
}
.revenue2_txt p{
  color:#8c8c8c;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}


/**invest2**/
#invest2{
  padding-top: 70px;
   text-align: center;
   position: relative;
   width: 100%;
   height: 100%;
   margin:0 auto;
 }
 
 #invest2 h3{
   font-size: 24px;
   font-weight: 500;
   color:#af1f24;
   max-width: 1280px;
   width: 100%;
   display: block;
   text-align:left;
   padding: 0;
   margin: 60px auto;
 }
 #invest2 h4{
  color:#545454;
  text-decoration: underline;
  font-size: 20px;
  font-weight: 500;
  margin: 0 auto 20px;
}
#invest2 ul{
  width: 100%;
  margin:0 auto 50px;
  display: flex;
  justify-content: space-between;
  max-width: 1066px;
  padding: 0;
}
#invest2 ul li{
  list-style: none;
  height: 60px;
  line-height: 60px;
  padding:0 35px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 500;
  color:#ebebeb;
}

#invest2 ul li.s5_li1{
  background-color: #af1f24;
  border-radius: 30px;
  min-width: 300px;
}
#invest2 ul li.s5_li2{
  background-color: #252525;
  border-radius: 30px;
  min-width: 380px;
}
#invest2 ul li.s5_li3{
  background-color: #4d1faf;
  border-radius: 30px;
  min-width: 350px;
}

#invest2 .s5_dao_payment{
  width: 100%;
  background-color: #f8f8f8;
  height: 203px;
  padding:10px 0;
  box-sizing: border-box;
  margin-bottom: 50px;
}
#invest2 .dao_buy_img{
  margin:0 auto;
  width: 100%;
  max-width: 1280px;
  display: block;
}
#invest2 .dao_buy_txt{
  width: 100%;
  max-width: 1280px;
  display: block;
  text-align:right;
  margin:10px auto 0;
  font-weight: normal;
  color:#8e8e8e;
  font-size: 15px;
}
#invest2 .dao_buy_btn_cont{
  width: 100%;
  max-width: 1280px;
  display: block;
  position: relative;
  height: 38px;
  margin:0 auto;
}
#invest2 .dao_buy_btn_cont .dao_buy_btn{
  width: 140px;
  height: 38px;
  background-image: linear-gradient(to bottom, #fff 0%, #e1e1e1 100%);
  color:#6a6a6a;
  border: solid 0.5px #000;
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
  right:0;
  position: absolute;
  display: block;
}
/*invest2_modal*/
#exampleModal{
  overflow-y:hidden;
}
#exampleModal .modal-content{
  border-radius: 36px;
  height: 546px;
}
#exampleModal .modal-dialog{
  width: 1100px;
  padding-top: 217px;

  margin:0 auto;
}
#exampleModal .modal-header{
  border-bottom: none;
  padding :45px 0 0;
}
#exampleModal .modal-header .close{
  margin-top:-95px;
  margin-right: 30px;
  width: 28px;
  height: 28px;
  opacity: 1;
}

#exampleModal .modal-header .close span{
  font-size: 28px;
  color:#333;
  font-weight: 300;
}
#exampleModal .modal-title{
  font-size: 22px;
  text-align: center;
  color: #000;
  font-weight: 500;
  display: block;
  margin-bottom: 50px;
  font-family: 'Noto Sans KR', sans-serif;
}

#exampleModal .modal-body{
  font-size: 20px;
  color:#767676;
  line-height: 2.2em;
  padding:0 82px 66px;
}
#exampleModal .modal-body ul{
  margin-bottom: 0;
}
#exampleModal .modal-body ul li{
  font-size: 16px;
  font-weight: normal;
  letter-spacing: -0.9px;
}

.fade.in{
  background-color: rgba(0,0,0,0.3);
}


/**invest3**/
#invest3{
 padding-top: 70px;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin:0 auto;
}

#invest3 h3{
  font-size: 24px;
  font-weight: 500;
  color:#af1f24;
  margin: 60px auto;
}
#invest3 h4{
  color:#545454;
  text-decoration: underline;
  font-size: 20px;
  font-weight: 500;
  margin:0 auto 20PX;
}

#invest3 .r2_alert_icon{
  margin: 30px 0;
}
#invest3 .r2_alert_icon ul{
  width: 100%;
  margin:0 auto;
  display: flex;
  justify-content: center;
  max-width: 1000px;
}
#invest3 .r2_alert_icon ul li{
  margin:0 10px 0 0;
  list-style: none;
  position: relative;
  z-index: -1;
  font-size: 15px;
  color:#545454;
  font-weight: normal;
  width: 120px;
}
#invest3 .r2_alert_icon ul li:last-child{
  margin-right: 0;
}
#invest3 .r2_alert_icon ul .li1::before{
  display: block;
  content:'';
  width: 16px;
  height: 16px;
  background-color:#af1f24;
  position: absolute;
  left: 0px;
  top: 2px;
  z-index: 10;
  line-height: 16px;
}
#invest3 .r2_alert_icon ul .li2::before{
  display: block;
  content:'';
  width: 16px;
  height: 16px;
  background-color:#dddddd;
  border-bottom:1px solid #000;
  position: absolute;
  left: 10px;
  top: 2px;
  z-index: 10;
}
#invest3 .r2_alert_icon ul .li3::before{
  display: block;
  content:'';
  width: 16px;
  height: 16px;
  background-color:#000000;
  position: absolute;
  left: -8px;
  top: 2px;
  z-index: 10;
}
#invest3 .invest_cont_img{
  width: 100%;
  margin:0 auto;
  display: block;
  max-width: 1062px;

}
#invest3 .invest_cont_img_txt{
  text-align: right;
  display: block;
  max-width: 1062px;
  width: 100%;
  font-size: 15px;
  color:#8e8e8e;
  font-weight: normal;
  margin:10px auto 0;

}
.invest_cont_cont2{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  max-width: 1062px;
  margin:32px auto 0;
}
.invest_cont_cont2 img{
  max-width: 298px;
  width: 100%;
  margin-left: 30px;
}
.icc2_txt{
  display: block;
  width: 100%;
  text-align:right;
  max-width: 840px;
  margin:12px auto 0;
}


/**invest4**/
#invest4{
  padding-top: 70px;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  margin:0 auto;

}
#invest4 div {
  margin:0 auto 0;
  max-width:1280px;

}
#invest4 div h3{
  font-size: 24px;
  color:#af1f24;
  font-weight: 500;
  margin: 60px auto 130px;
  text-align: left;
}
#invest4 .invest4_cont{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#invest4 .invest4_cont img{
  max-width: 300px;
  width: 100%;
  margin:0 auto;
}

/**footer**/
#footer{
  position: absolute;
  margin-top: 110px;
  width: 100%;
  height: 140px;
  border-top:1px solid #e8e8e8;
}
#footer .footer_conts{
  max-width: 1280px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#footer .footer_conts .footer_cont1 p {
  margin:7px 0 0;
  color:#000;
  font-size: 15px;
  font-weight: 300;
}
#footer .footer_conts .footer_cont1 p:first-child{
  margin:0;
}
#footer .footer_cont2 a{
  width: 150px;
  height: 30px;
  line-height: 30px;
  display: block;
  color:#fff;
  background-color: #af1f24;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 10px;
}
#footer .footer_cont2 a:last-child{
  margin-bottom: 0;
}
#footer .footer_cont2{
  display: flex;
  flex-direction:column;
  margin:0 ;

}








/*test*/

.slides-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
}




/**scroll button**/
#topbutton {
  display: inline-block;
  background-color: #fff;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  border:1px solid #000;
  position: fixed;
  bottom: 30px;
  right: 50px;
  opacity: 1;
  z-index: 10000;
}
#topbutton::after {
  content: "TOP";
  font-weight: bold;
  font-style: normal;
  font-size: 13px;
  line-height: 50px;
  color: #280606;
}

#topbutton:hover::after{
  color:#fff;

}
#topbutton:hover {
  cursor: pointer;
  border:1px solid #af1f24;
  background-color: #af1f24;
}
#topbutton:active {
  background-color: #555;
}
#topbutton.show {
  opacity: 1;
  visibility: visible;
}

/* Styles for the content section */

.content {
  width: 100%;
  max-width: 1280px;
  margin: 50px auto;
  font-family: 'Merriweather', serif;
  font-size: 17px;
  color: #6c767a;
  line-height: 1.9;
}

.drop-down, .menu {
  display: none;
}

.mm, #mm{
  display: none !important;
}
.pp{
  display: block !important;
}

/************반응형************/
@media screen and (max-width: 480px) {
    .pc_menu{
      display: none;
    }
    #nav {
      background-color: #fff;
    }
    #nav a.logo{
      left:20px;
    }
    #nav a.logo img{
      max-width: 50px;
      left:0;
    }
    .menu{
      display: block;
    }
    a.trigger{
      font-size: 2em;
      z-index: 10001;
      float:right;
    }
    .drop-down {
      padding:  0;
      position: absolute;
      width: 100%;
      background: #fff;
      top: -100%;
      transition: top 0.4s ease-in-out;
      box-shadow: 0 4px 4px 0 rgb(0 0 0 / 5%);
      display: block;
      height: 30%;
      z-index: 999;
    }
   
    .drop-down nav ul {
      right:0;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    
    .drop-down li {
      line-height: 50px;
      text-align: center;
      margin-right: 0;
    }

    .drop-down li a {
      color:#000;
      font-size: 16px;
      
    }
    .drop-down li a.active{
      color:#fff;
      background: #af1f24;
    }
    .drop-down li:nth-child(1) {
      border-top: 0;
    }
    .drop-down li:nth-child(4) {
      border-bottom: 0;
    }
    
    .drop-down a {
      display: block;
      font-size: 18pt;
      color: #fff;
      text-decoration: none;
    }
    .down {
      top: 70px;
      transition: top 0.4s ease-in-out;
    }
    
    .menu {
      box-sizing: content-box !important;
      position: fixed;
      top: 25px;
      right: 25px;
      width: 50px;
      height: 50px;
      text-align: center;     
      z-index: 999;
      color: #fff;
    }
    
    .menu a {
      display: block;
      text-decoration: none;
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      margin: 0 auto;
    }
    .menu .close {
      display: none;
      opacity: 1;
      float:right;
      line-height: .5;
      font-size: 30px;
      color:#000;
      text-shadow: none;
    }
    

   

    /*메인슬라이드*/
    #main_conts{
      height: 100%;
    }
    .slides-container{
      height: 100%;
      overflow-y: auto;
    }

    #slide-0 .swiper-slide{
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    #slide_main_00 {
      display: flex;
      flex-direction: column-reverse;
      height: 100%;
    }
    .slide_main_00_l{
      width: 100%;
      max-width: 100%;
      height: 50%;
      top:0;
    }
    .slide_main_00_l h4{
      margin:120px auto 0;
    }
    .slide_main_00_l p{
      margin:20px auto 0;
      padding:0 20px;
      text-align: center;
    }
    .slide_main_00_l .sm_link{
      margin-top: 0;
    }
    .slide_main_00_l .sm_link > img{
      left:50%;
      transform: translateX(-50%);
      margin-top: 0px;
      display: block;
    }


    .slide_main_00_r{
      width: 100%;
      height: 45%;
    }
    #listBox{
      margin-right: 20px;
      overflow-y: hidden;
      box-sizing: border-box;

    }
    #listBox .list{
      top: 20px;
      height: 200px;
    }
    #listBox .list li{
      width: 200px;
      height: 200px;
      margin-right: 20px;
    }   
    #listBox .list li img{
      width: 200px;
      height: 200px;
    }
    #slide-0 .swiper-pagination{
      bottom: 3%;
      left:10%;
    }

    
    .start_btn{
      left:150px;
      bottom: 3%;
    }

    /*메인 슬라이드 -2번째 */
    #slide_main_01 .slide_main_01_l,
    #slide_main_01 .slide_main_01_r{
      height: 50%;
    }
    #slide_main_01 .slide_main_01_l h4{
      margin-top: 120px;
     
    }
    #slide_main_01 .slide_main_01_l img{
      margin-top: 20px;
      margin-bottom: 48px;
    }

    /*메인 슬라이드 -3번째 */
    #slide_main_02{
      flex-direction: column;
    }
    #slide_main_02 .sm02_1, #slide_main_02 .sm02_3{
      width: 100%;
      height: 0%;
    }
    #slide_main_02 .sm02_2{
      width: 100%;
      height: 100%;
    }

    #slide_main_02 .sm02_2 .slide_main_02_2 .sm_link{
      display: inline-block;
      margin-top: 20px;
    }
    /*메인 슬라이드 -4번째 */
    #slide_main_03{
      flex-direction: column-reverse;
      display: flex;
    }
    .slide_main_03_l{
      width: 100%;
      height: 50%;
      max-width: 100%;
      top: 0;
    }
    .slide_main_03_l h4{
      margin: 120px auto 15px;
      text-align: center;
    }
    .slide_main_03_l p{
      left:0;
      text-align: center;
      margin:0 auto;
    }
    .slide_main_03_l .sm_link{

      margin:0 auto;
    }
    .slide_main_03_l .sm_link > img{
      left: 50%;
      transform: translateX(-50%);
      margin-top: 0px;
    }
    .slide_main_03_r{
      width: 100%;
      height: 50%;
    }

    #company{
      padding: 70px 20px 0 ;
    }
    #company h3{
      margin: 20px auto;
    }
    #company h3 span{
      display: block;
      margin:auto;
    }
    #company .company_txt{
      margin-bottom: 20px;
    }
    .compnay_cont_l{
      margin-bottom: 20px;
    }
    .compnay_cont_l img{
      max-width: 200px;
      margin-top: 0;
    }
    .compnay_cont_l span{
      margin-top: -15px;
    }

    .compnay_cont_r{
      width: 100%;
    }
    .compnay_cont_r ul li{
      margin-bottom: 10px;
    }
    .compnay_cont_r ul li:nth-child(2){
      margin-left: 0;
    }
    
    #company .company_conts{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .compnay_cont_l{
      width: 100%;
    }
    .compnay_cont_r ul li img{
      display: none;
    }
    .compnay_cont_r ul li span,
    .compnay_cont_r ul li:nth-child(2) span,
    .compnay_cont_r ul li:nth-child(3) span{
      width: 100%;
      text-align: center;
    }

    #company2{
      padding:70px 20px 0;
    }
    #company2 h3{
      margin:20px auto;
      font-size: 20px;
    }
    #company2 p.cp2_txt2{
      margin-bottom: 20px;
    }
    #company2 .cp2_conts{
      flex-direction: column;
    }
    #company2 .cp2_conts .cp2_c_img1{
      display: none;
    }
    #company2 .cp2_conts .cp2_c_img2{
      margin-bottom: 30px;
    }
    #company2 .cp2_conts .cp2_cont{
      margin-top: 20px;
    }
    #company2 .cp2_conts .cp2_cont p{
      text-align: left;
    }


    /*card*/
    .content{
      margin:0 auto;
    }
    .card{
      max-width: 300px;
      margin:0 auto 20px;
    }
    .card:nth-child(3){
      margin:0 auto 20px;
    }
    /*graph*/
    #revenue h3{
      font-size: 20px;
      text-align: center;
    }
    #revenue h4{
      text-align: center;
    }
    .widget{
      max-width: 300px;
    }
    .widget img{
      max-width: 300px;
    }
    .widget img:last-child{
      margin-top: 30px;
      max-width: 320px;
    }
    /**revenue**/
    #revenue{
      padding-top: 0px;
     
    }
    #revenue2 h3{
      font-size: 20px;
      text-align: center;
    }
    .revenue2_txt p{
      padding:0 20px;
    }



    .bar-graph-horizontal .year,
    .bar-graph-horizontal .year2{
      margin-left: 5px;
      font-size: 14px;
    }
    .bar-graph-horizontal{
      max-width: 300px;
    }
    /***business**/
    #business, #business2{
      padding:70px 20px 0;
    }
    #business h3,
    #business2 h3{
      font-size: 20px;
      margin:20px auto;
    }
    #business p{
      margin-bottom: 20px !important;
    }
    #business .bs_conts{
      display: flex;
      flex-direction: column;
      margin:0 auto ;
    }

    #business .bs_conts div img{
      display: none;
    }
    #business .bs_conts div span{
      display: none;
    }

    #business2 ul li{
      flex-direction: column;
      max-width: 280px;
    }
    #business2 ul li.b2_list01 {
      margin-bottom: 20px;
    }
    #business2 ul li.b2_list01 div img{
      max-width: 280px;
      margin-right: 0;
      margin:0 auto;
    }
    #business2 ul li.b2_list01 div span{
      max-width: 280px;
      font-size: 12px;
    }
    #business2 ul li.b2_list01 p{
      min-width:100%;
      width: 100%;
      margin:0 auto;
      display: block;
      line-height:1.8em;
      margin-top: 20px;
    }
    #business2 ul li.b2_list02{
      display: flex;
      flex-direction: column-reverse;
    }
    #business2 ul li.b2_list02 img{
      display: none;
    }

    #business2 ul li.b2_list02 p{
      line-height: 1.8em;
      text-align: left;
      margin-top: 0;
      display: block;
      min-width: 100%;
    }

    /*operationg2*/
    #operating2{
      min-height: 100%;
    }
    #operating2 img{
      margin:0 auto;
    }
    #operating2 h3{
      font-size: 20px;
      text-align: center;
      line-height: 1.2em;
      margin:0 auto 60px;
    }
    #operating2 p{
      font-size: 14px;
    }
    #operating2 p b {
      margin: 30px auto;
    }


    /**operating***/
    #operating3{
      padding: 70px 20px 0;
      min-height: 100%;
    
    }
    #operating3 h3{
      font-size: 20px;
      margin:20px auto;
      line-height: 1.4em;
    }
    #operating3 > .op3_conts{
      width: 100%;
      margin:0 auto;
      display: flex;
      flex-direction: column;
    }
    #operating3 > .op3_conts div img{
      display: none;
    }
    #operating3 .op_tit{
      margin:0px auto;
      width:80px;
      height: 25px;
      line-height: 25px;
      font-size: 1em;
    }
    #operating3 .operating_cont{
      max-height: 180px;
      font-size: .8em;
      margin-bottom: 30px;
    }
    #operating3 .operating_cont ul li table tr td{
      font-size: 1em;
      padding:0;
    }
    #operating3 .operating_cont ul{
      max-height: 180px;
    }
    #operating3 .operating_cont ul li:last-child p b{
    margin-top: 20px;
    }

    
    /*invest2*/
    #invest2{
      padding-top: 0;
    }
    #invest2 h3{
      font-size: 20px;
      margin-bottom: 60px;
      text-align: center;
    }
    #invest2 h4{
      font-size: 16px;
      margin:30px auto !important;
      display: block;
    }
    #invest2 .dao_buy_img{
      max-width: 320px;
    }
    #invest2 ul{
      flex-direction: column;
      margin:0 auto 30px;
    }
    #invest2 ul li{
      width: 300px;
      margin: 0 auto 10px;
      font-size: 14px;
    }
    #invest2 .dao_buy_txt{
      text-align: center;
      font-size: 14px;
    }
    #invest2 ul li.s5_li2,#invest2 ul li.s5_li3{
      min-width: 300px;
    }
    #invest2 .s5_dao_payment{
      height: 465px;
  
      margin:0 auto;
      width: 100%;

    }
  #invest2 .s5_dao_payment img{
    margin:0 auto;
  }

  #invest2 .dao_buy_btn_cont{
    width: 100%;
    display: block;

    height: 38px;
    margin:30px auto;
    text-align: center;
  }
  #invest2 .dao_buy_btn_cont .dao_buy_btn{
    margin:0 auto;
    width: 100%;
    max-width: 140px;
    text-align: center;
    display: block;
    position: inherit;
  }
  
  /*modal*/
  #exampleModal .modal-dialog{
    max-width: 310px;
    padding-top: 100px;
  }
  #exampleModal .modal-content{
    overflow-y: scroll;
    height: 500px;
  }
  #exampleModal .modal-body{
    padding:0 5px 0 25px;
  }
  #exampleModal .modal-body ul li{
    font-size: 14px;
    line-height: 1.8em;
  }
  #exampleModal .modal-title{
    margin-bottom: 20px;
  }
  #exampleModal .modal-header .close{
    margin-top: -70px;
    margin-right: 20px;
  }

    /*invest3*/
    #invest3{
      padding-top: 0;
    }
    #invest3 .invest_cont_img{
      width: 100%;
      margin:0 auto;
      display: block;
      max-width: 294px;
    }
    #invest3 .invest_cont_img_txt{
      max-width: 294px;
      margin:0 auto;
    }
    #invest3 h3{
      font-size: 20px;
      margin:0 0 60px;
      text-align: center !important;
      width: 100%;
      display: block;
    }
    #invest3 h4{
      font-size: 16px;
      margin-bottom: 32px;
    }
    .invest_cont_cont2{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .invest_cont_cont2 img{
      margin-left: 0;
      margin-bottom: 10px;
    }
    .invest_cont_cont2 img:last-child{
      margin-bottom: 0;
    }

    /*invest4*/
    #invest4 div h3{
      font-size: 18px;
      margin:20px auto;
      text-align: center;
    }
    #invest4{
      padding-top: 0;
    }
    #invest4 .invest4_cont{
      display: flex;
      flex-direction: column;
    }
   
    #invest4 .invest4_cont span{
      margin:25px auto 60px;
      font-size: 16px;
      display: block;
    }
    #invest4 .invest4_cont span b{
      margin-bottom: 10px;
      display: block;
    }
    /****footer***/
    #topbutton{
      right:20px;
      bottom:20px;
    }
    

    .mm, #mm{
      display: block !important;
    }
    .pp{
      display: none !important;
    }
   
   #footer{
    height: 247px;
    margin-top: 0;
   
   }
    #footer .footer_conts{
      display: flex;
      flex-direction: column;
    }
    #footer .footer_cont2{
      margin: 20px auto;
    }
}