@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;
}


body {
  position: relative; 
}
#section0 {
  padding-top:0;
  height:100%;
  color: #fff; 
  background-color: #fff;
 
}
#section1 {
  padding-top:70px;
  height:100%;
  color: #000; 
  background-color: #fff;
}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section5 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}


.container-fluid{
  padding-right: 0 !important;
  padding-left: 0 !important;
}



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


/*MENU*/
#nav{
  height: 70px;
  background-color: rgba(255, 255, 255, .04);
 
}
.navbar-inverse{
  border-color: rgba(255, 255, 255, .04) !important;
}
#nav_header{

}
#nav_header .navbar-brand{
  height: 70px;
  margin-left: 65px;
  display: block;
}
#nav_header a img{

  margin-top: 10px;
}
.navbar>.container-fluid .navbar-brand{

  display: block;
  width: 75px;
  height: 50px;
  line-height: 70px;
}
.navbar-inverse .navbar-toggle .icon-bar{
  background-color: #000 !important;
}
#myNavbar .nav{
  margin: 9.5px 0px;
  float:right;
}


.navbar-inverse .navbar-brand{
  display: block;
  height: 70px;
  padding:0;
}
.navbar-inverse{
  height: 70px;
  background-color: rgba(255,255,255,.6);
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
  background-color: rgba(255,255,255,.6);
  border:none;
  
}
.navbar-inverse .navbar-nav>li>a{
  color:#000 !important;
}

.navbar-inverse .navbar-nav>.active>a{
  color:#fff !important;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
  background: none !important;
  color:#000 !important;
  border-bottom:1px solid red;
}

/*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***/
#section0 {
    width: 100%;
}

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

#section0 .swiper-pagination{
    bottom:5%;
    left:90px;
}
#section0 .swiper-pagination-bullet{
    margin-right: 5px;
    width: 9px;
    height: 9px;
    margin-right: 12px;
    background: #fff;
    border:0.5px solid #000;
    opacity: 1;
}
#section0 .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;
}


/**footer**/
#footer{
  position: absolute;
  bottom:0;
  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*/
.slide{
  height: 100%;
  /* min-height: 930px;
  max-height: 1080px; */
}
.slides-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  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;
}