a, p, span, body ,h1, h2, h3 ,h4, h5, footer, header, button{

 font-family: "Roboto", "Arial","微軟正黑體", sans-serif;

  }


   .textTitle {
        text-align: center;
        width: 750px;
        display: block;
        margin: 0 auto;
       position: relative;
        top: 150px;
    }
.top_img{ z-index: 999;}
.BOX{
    margin: 0 30px;
    background-color: #ffffff;
    border-radius: 0 0 20px 20px;
    position: relative;
    top:-50px;
}
  body {

      overflow-x: hidden;
	  background-color:#ece8e3;

  }

  a:hover{

      text-decoration-line: none;

  }
.linebox{ text-align:center; padding:20px 0;}
  p{
margin:0!important;
      font-size: 18px;

  }

h6{   color: #111111; font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -1px;
}
  .viewPc {
    display: inline;
}
.viewPhone {
    display: none;
}
	
  @media (max-width: 767px){
      h6 {
    font-size: 1.3rem!important;
    letter-spacing: -1px!important;
}
      .BOX {
  
    top: -20px!important;margin: 0 15px!important;
}
      .item-wrapper img {
    width: 100%!important;
}
	  #pic01 {
	top: 20px!important;
  
}
	  .viewPc {
    display: none;
}
	  .viewPhone {
    display: inline;
}
.admenu {
  width: 100%!important;
    left: 0;
  bottom:0!important;
}}
img {
    max-width: 100%;
}
.admenu {
    position: fixed;
    width: 200px;
    z-index: 100;
    right: 2%;
    bottom: 3%;
}
  /* ******SCROLL BAR***********/ 

/* width */

::-webkit-scrollbar {

  width: 10px;

  /* @media screen and(max-width: 768px){

  	  width: 0px;

  } */

}

/* Track */

::-webkit-scrollbar-track {

  background: #f1f1f1; 

}

 /* Handle */

::-webkit-scrollbar-button {

  background:#ffffff;

}

/* Handle */

::-webkit-scrollbar-thumb {

  background: #e2cfad;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #68688e;

}

/******SCROLL BAR***********/

/**BURGER***/

header {

    width: 100%;

    background: #111111;

    height: 60px;

  /*   position: relative; */

    position: fixed;

    z-index: 1000;

  }

  header h1 {

    font-family: 'Raleway', sans-serif;

    font-size: 30px;

    line-height: 40px;

    font-weight: 600;

  }

  header h1 :hover {

    color: yellow;

  }

  header h1 a {

    text-decoration: none;

    color: #f52c72;

  }

  a.underline-a {

      text-decoration-color: #982133;

  }

  .logo .hbr-logo{

    width: 100%;

    height: auto;

  }

  

  .logo {

      float: left;

      width: 25%;

      margin-left: 0px;

      margin-top: 5px;

  }

  

  .menu {

    color: #e5405e;

    width: 75%;

    float: right;

    display: block;

    text-align: right;

    margin-top: 20px;

    font-family: 'Raleway', sans-serif;

    font-weight: 300;

    text-transform: uppercase;

    letter-spacing: 3px;

  }

  .menu li {

    display: inline-block;

    padding: 0 1%;

    /* border-right: thin solid #9e1326; */

  }

  .menu li:last-child {

    border: none;

  }

  /* .menu li :hover {

    color: yellow;

  } */

  .menu li a {

    color: #FFFFFF;

    text-decoration: none;

    font-size: 17px;

    padding: 0;

  }

  

  .clearfix:after {

    content: " ";

    visibility: hidden;

    display: block;

    height: 0;

    clear: both;

  }

  .ctrl-width .menu li p {

    display: inline-block;

    margin-left: 20px;

  }

  .mainSection{

    width: 100%;

    height: 898px;

    background: url("../img/pic1.jpg")center center no-repeat;

    background-size: cover;  

    position: relative;

  }
.mainSection3{

    width: 100%;

    height: auto;
	
	background-color: #ece8e3;

    background-size: cover;  

    position: relative;
	
	padding-top: 40px;
	
	padding-bottom: 40px;

  }
 .level07 {
    background: url(../img/background04.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 20px;
}
#pic01 {
    display: block;
	top: 50px;
    max-width: 100%;
}
.map {
	  max-width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
}
.map-info {
    margin: 0 auto;
    padding: 0 20px;
}
#level07 .map .map_ico, #sec_04 .img .map .map_sha {
    position: absolute;
    top: 20%;
    left: 11%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#level07 .map .map_ico img {
    width: 30px;
}
#level07 .map .map_ico {
    left: 49%;
    top: 0;
    -webkit-animation: float 1s linear infinite;
    animation: float 1s linear infinite;
    z-index: 1;
}
@media screen and (min-width: 1001px){
	#pic02 {
    display: none;
    /* display: inline-block; */
}
.level-column {
    padding-top: 0px;
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    display: flex;
}}
.mainSection2{
height: 152px;
	padding-top: 30px;
	width: 100%;

    background: url("../img/pic2.jpg")center center ;
	background-repeat:repeat-y;
    position: relative;

   

  }

.mainSection4{

    width: 100%;

    height: auto;
	
	background-color: #e2cfad;

    background-size: cover;  

    position: relative;
	
	padding-top: 0px;
	
	padding-bottom: 0px;

  }
  .section2{

      padding-top: 0px;

      padding-bottom: 0px;
	  
	  width: 100%;

    

    background: url("../img/pic2.png")center center no-repeat;
	
	

  }
  .section{
background-color: #ece8e3;
      padding-top: 80px;

      padding-bottom: 100px;

  }

  .titleBox {
	width: 464px;
	position: absolute;
	transform: translateY(-50%);
	top: 53%;
	left: 310px;
	right: 0;
	margin: 0 auto;

}

  .titleBox p{

    position: absolute;

    text-align: center;

    bottom: 75px;

    left: 0;

    right: 0;

    color: #fff;

  }

  

  .book{

      width: 200px;

      position: absolute;

      right: 18%;

      top: 40%;

  }

  .date{

      width: auto;

      position: absolute;

      right: 30%;

      top: 65%;

  }



.price{

    margin:0px;

    font-weight: 900;

    color: #cc0000;

    font-size: 40px !important;

}
.price2{

    margin:0px;

    font-weight: 900;

    color: #00b29f;

    font-size: 40px !important;

}
.myButton {
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
        margin: 0 auto 2rem;
    text-align: center;
	text-shadow:0px 1px 0px #ffee66;
}
.myButton a{
	
	color:#333333;
	
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}

        
.buyBtn{
    width:200px;
box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
	background-color:#fe1a00;
	border-radius:5px;
	border:1px solid #d83526;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:1.2rem;
	font-weight:bold;
	padding:10px 25px;
	text-decoration:none;
    text-align: center;
	text-shadow:0px 1px 0px #b23e35;
    margin: 1rem auto;
    display: block;
    
}
.text {
    font-size: 1.15em;
    font-weight: normal;
    line-height: 1.3;
    text-align: justify;
    width: 90%;
    margin: 0 auto;
}
.mbb-2{ margin-bottom:2rem;}

.buyBtn:hover {
	background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
	background-color:#ce0100;
}
.buyBtn:active {
	position:relative;
	top:1px;
}

   

.buyBtn2{
border-radius: 10px;
    width: 180px;

    margin: 20px auto 50px auto;

    padding: 10px ;

    border: 2px solid #00b29f;

    background: #00b29f;

    color: #fff;

    text-align: center;

    font-size: 18px;

    transition: .5s;

}

.buyBtn2:hover{
border-radius: 10px;
    background: #fff;

    border: 2px solid #00b29f;

    color: #00b29f;

}

.item-wrapper{ 
text-align: center;
margin: 0 auto;
    
}
.item-wrapper img{ 
width:80%;
    
}
.bg_yellow{ background-image: url("../img/BG3.jpg");
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 20px;
}

.bg_blue{ background-image: url("../img/BG1.jpg");
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 20px;
}

.bg_blue2{ background-image: url("../img/BG2.jpg");
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-bottom: 20px;
}

.whiteBtn{
border-radius: 10px;
    color: #fff;

    background: transparent;

    border: 1px solid #fff;

}



.title{
z-index: 999;
    display: flex;
    font-family: 'Noto Serif TC', serif;
    font-weight: 700;
    text-align: center;
    font-size: 50px;
    line-height: 50px;
}

.line{
    width: 50px;
    height: 5px;
 background: #cfb68b;
    margin: 20px auto;
}

.line2{
    width: 50px;
    height: 5px;
 background: #cfb68b;
    margin: 20px auto;
}
.line3{
    width: 50px;
    height: 5px;
 background: #cfb68b;
    margin: 20px auto;
}
.line4{
    width: 100%;
    height: 0.5px;
    background: #cfb68b;
    margin: 20px auto;
}
.level-column{
    margin-top: 30px;
    justify-content: center;
}

.column3{

    border: 1px solid rgb(204, 204, 204);

    padding: 20px 0px 35px 0px;

    margin: 10px 10px;
	
	
}
.mt-4 {
  margin-top: 1rem !important;
	padding: 20px 0px 35px 0px;
}



.column3 h4{

font-size: 20px;

line-height: 36px;

text-align: center;

margin-top: 10px;
	

}

.column3 h6{

    font-weight: 700;

    text-align: center;

    font-size: 18px;

    line-height: 30px;

    font-weight: 200;

}

.column3 p{

    margin-top: 20px;

    text-align: center;

    line-height: 25px;

    width: auto;

    display: block;

    padding: 0 25px;

  }



.yellowBox{

    transform: scale(1.1);

    text-align: center;

    border: 10px solid #ffae22;

}

.roundBox{

  text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 0 0;

}

.column3 img{

    width: auto;

    margin: 10px auto;

}

.yellowPic{

    margin-top: 15px !important; 

}

/* slider */

.book-slide{

    margin-top: 60px;

}

.trendBox{

    width: 100%;

    position: relative;

    height: auto;

}

.mbTrend{

    display: none;

}

.projBtn{

    text-align: center;

    margin: 0 auto;

    width: 220px;

    padding: 10px 15px;

    font-size: 20px;

    border: 1px solid #fff;

    color: #fff;

    background:transparent;

    position: absolute;

    bottom: 100px;

    left: 0;

    right: 0;

    transition: 0.5s;

}

.projBtn:hover{

    border: 1px solid #fff;

    color: #68688e;

    background:#fff;

}

.level02{

    width: 100%;

    height: auto;

    padding-top: 0px;

    

    background: url("../img/pic2.png")center center no-repeat;
	
	background-size: cover;  

    position: relative;

}

.column2{

    width: 100%;

    margin-top: 50px;

    background: #fff;

    padding: 30px;

    display: flex;

    justify-content:space-around;

    align-items: center;

}

.column2 h6{

    font-size: 24px;

    font-weight: 400;

}

.rect{

    border: 1px solid #000;

    padding: 2px 10px;

    text-align: center;

    color: #000;

    font-size: 15px;

    transition: 0.5s;
    letter-spacing: 0;

}

.rect:hover{

    border: 1px solid #cc0000;

    color: #cc0000;

}

.rect2{

    border: 1px solid #e5405e;

    padding: 2px 60px;

    text-align: center;

    color: #e5405e;

    font-size: 18px;

    transition: 0.5s;
	
	

}

.rect2:hover{

    border: 1px solid #e5405e;

    color: #e5405e;

}

.rect3{

    border: 1px solid #000;

    padding: 2px 10px;

    text-align: center;

    color: #000;

    font-size: 17px;

    transition: 0.5s;

}

.rect3:hover{

    border: 1px solid #46c8a0;

    color: #46c8a0;

}


.white{

    border: 1px solid #fff;

    color: #fff;

    margin-left: 2px;

}

.pink{

    border: 2px solid #f52c72;

    color: #f52c72;

    position: absolute;

    right: 15px;

}

.circle{
    line-height: 65px;
    padding: 5px 10px;
    background: #cc0000;
    color: #fff;
    border-radius: 50%;
    margin-right: 2px;
    width: 80px;
    height:80px;
    font-size: 15px;
  display: inline-grid;
}

.column1{

    /* margin-top: 100px; */

    max-width: 800px;

    border: 3px solid #fff;

    height: auto;

    text-align:center;

    margin: 100px auto 0 auto;

    position: relative;

    padding: 50px 20px;

}



.column1 img{

    max-width: 400px;

    margin: 40px auto 0 auto;

}

.column1 h4{

    color: #fff;

    margin-top: 20px;

}

.level03{

    width: 100%;

    background: #68688e;

    height: auto;  

}

.level02 h2{

    font-family: 'Noto Serif TC', serif;

    color: #fff;

    font-size: 50px;

    font-weight: 700;

    text-align:center;

}

.projBox{

 max-width: 100%;
  height: auto;


}
.projBox img{

 max-width: 100%;
  height: auto;


}
.projBox:hover{
    transform: scale(1);

}

.projBox2{

    width: 100%;

    height: auto;

    position: relative;

    transition: 0.5s;
	
	

}

.projBox:hover{

    transform: scale(1);

}


.search{

    position: absolute;

    bottom: 0px;

    right: 0px;

    padding: 10px;

    background: #cc0000;

    color: #fff;

    text-align: center;

    line-height: 20px;

    font-size: 18px;

}

.projContent{

    position: relative;

    height: 150px;

    margin-top: 20px;

}



.leaf-l{

    position: absolute;

    left: 0;

}

.leaf-r{

    position: absolute;

    right: 0;

}

.projAward{

    font-size: 32px !important;

   color: #cc0000 !important;

}

.projTitle{

    text-align: center;

    color: #fff;

    font-size: 18px;

}

.level03 p{

    max-width: 800px;

    margin: 0 auto;

    font-weight: 300;

    text-align: center;

}

.articleBox{

   
    justify-content: center;
	
	

}

.articleBox2{

    padding-top: 50px;
	
	padding-bottom: 30px;

    justify-content: center;
	
	

}

.articleBox3{

    padding-top: 10px;
	
	padding-bottom: 30px;

    justify-content: center;
	
	

}

/* .articleBox img{

    width: 100%;

} */

.articleBox p{

    text-align: justify;

    margin:10px auto; 

    height: 85px;

}

.more{

    text-align: right !important;

    margin-top: 100px;

    color: #e5405e;

    font-size: 18px;

}

.add{

    /* width: 20px;

    height: 20px; */

    background: #e5405e;

    color: #fff;

    padding: 0px 5px;

    margin-left: 5px;

}



footer{

    padding: 20px 0;

    background-color: #000;

  }

  footer p{



    text-align: left;

    color: #fff;

    line-height: 1.8;

    font-size: 0.9em;

    font-weight: 400;

  }

  footer span{

    text-align: center;
	padding-top:15px;

    display: block;

    color: #b2b2b2;

    line-height: 20px;

    font-size: 0.9em;

    font-weight: 100;

  }

  /***TOP BUTTON**/

/***MODAL***/

/* The Modal (background) */

button.button-or{

    border: none !important;

    background: none !important;

    color: black !important;

    padding: 0 !important;

    font-size: 1em !important;

    font-weight: bold !important;

}

button.button-or:hover{

    border: none !important;

    background: none !important;

    color: #982133 !important;

    padding: 0 !important;

    font-size: 1em !important;

    font-weight: bold !important;

}


button.modal-button {

    border-radius: 100px;

    display: inline-block;

    color: #fff;

    background: #717171;

    padding: 2px 15px;

    border: none;

    font-weight: 100;

    font-size: 0.6em;

    cursor: pointer;

}

button.modal-button:hover {

    border-radius: 100px;

    display: inline-block;

    color: #fff;

    background: #982133;

    padding: 2px 15px;

    border: none;

    font-weight: 100;

    font-size: 0.6em;

    cursor: pointer;

}


.modal {

    display: none; 

    position: fixed; /* Stay in place */

    z-index: 1000; /* Sit on top */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

.modal-header .close {

    padding: 10px;

    margin: 0rem 0rem -1rem auto;

}

.modal-header{

    border-bottom: none;

}

/* Modal Content */

.modal-content .column3-box {

    min-height: 450px;

    height: auto;

    padding: 10px 0px 0px 0px;

}

.modal-content .column3 {

    height: auto;

    padding: 10px 0px 10px 0px;

}

.modal-body {

    padding: 2px 16px 50px 16px;

}

.modal-content {

    position: relative;

    background-color: #fefefe;

    margin: auto;

    padding: 0;

    border: 1px solid #888;

    max-width: 960px;

    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

    -webkit-animation-name: animatetop;

    -webkit-animation-duration: 0.4s;

    animation-name: animatetop;

    animation-duration: 0.4s;

    margin-bottom: 80px;

}

.modal-picture01{

    display: block;

    margin: 0 auto;

    width: 100%;

    max-width: 800px;

}

.modal-picture01 img{

  width: 100%;

}

.modal-content p {

    line-height: 25px;

    text-align: justify;

}

.modal-content ul {

    display: table-cell;

    width: 300px;

    list-style: unset;

    padding-top: 20px;

}

.modal-content li{

    margin: 5px 30px;

}


.column3-box{

    text-align: center;

}

.column3-box h2{

    width: 100%;

    padding: 0px 25px 0px 25px;

    color: #000;

    display: block;

    font-size: 1.4em;

    margin-top: 15px;

    text-align: center;

}

.modal-content .column3-box img

{

    width: 100%;

}

.modal-content .column3-box p {
padding-bottom: 10px;
    margin-top: 0px;

    margin-bottom: 0px;

    text-align: justify;

    font-size: 16px;

    line-height: 22px;

    width: auto;

    display: block;

    padding: 0 20px 20px 20px;

    /* font-weight: bold; */

}

.b-line{

    width: 30px;

    height: 3px;

    background: #000;

    margin: 10px 0;

    margin-left: 25px;

}





/* Add Animation */

@-webkit-keyframes animatetop {

    from {top:-300px; opacity:0}

    to {top:0; opacity:1}

}



@keyframes animatetop {

    from {top:-300px; opacity:0}

    to {top:0; opacity:1}

}



/* The Close Button */

.close {

    border-radius: 50%;

    color: #f9cf56;

    float: right;

    font-size: 36px;

    font-weight: bold;


    opacity: 1;

}



.close:hover,

.close:focus {

      color: #f9cf56;
    text-decoration: none;

    cursor: pointer;

}



.modal-header {

    color: white;

}



.modal-footer {

    padding: 2px 16px;

    background-color: #5cb85c;

    color: white;

}

.top-modal-content{

    padding: 30px 10px 20px 10px;

}

/***MODAL***/

.btn_book{ display: inline-block; border:1px solid #111111; padding:2px 10px;border-radius: 100px;}
@media screen and (max-width:1680px){



    .book {

        right: 12%;

    }

    .date {

        right: 28%;

    }

}

@media screen and (max-width:1440px){
    .book {

        width: 145px;

        position: absolute;

        right: 16%;

        top: 40%;

    }

    .titleBox {
	max-width: 455px;
	top: 279px;

    }

    .titleBox p {

        bottom: 42px;

        font-size: 16px;

    }

    .date {

        right: 28%;

    }

    .trendBox {

        height: 350px;

    }

    .projBtn {

        bottom: 30px;

    }

    .level02 {

        background: #69698d;

        width: 100%;

        height: auto;

        padding-top: 50px;

    }

}

@media screen and (max-width:992px){

    .logo {

        width: 60px;

      }

      .logo .hbr-logo{

        width: 100%;

        height: auto;

      }

      header {

 height: auto;

    }

      .menu {

        width: 100%;

        background: #fdd35b;

        position: absolute;

        left: 0;

        top: 30px;

        z-index: 100;

        padding-left: 0px;

      }

      .menu li {

        display: none;

        width: 100%;

        padding: 0;

        margin: 0;

      }

      .menu li :hover {

        background: #fdd35b;

        -moz-transition-duration: 0.5s;

        -o-transition-duration: 0.5s;

        -webkit-transition-duration: 0.5s;

        transition-duration: 0.5s;

      }

      .menu li a {

        display: block;

        width: 100%;

        color: #111;

        text-decoration: none;

        font-size: 20px;

        padding: 15px 0;

        /* overflow: hidden; */

        text-align: center;

        border-bottom: thin solid #fff;

      }

    

      .burger {

        width: 55px;

        height: 35px;

        display: block;

        background: transparent;

        -moz-transition: all 0.6s ease-in-out;

        -o-transition: all 0.6s ease-in-out;

        -webkit-transition: all 0.6s ease-in-out;

        transition: all 0.6s ease-in-out;

        position: absolute;

        top: 10px;

        right: -20px;

        -moz-transform: translate(-50%, 0);

        -ms-transform: translate(-50%, 0);

        -webkit-transform: translate(-50%, 0);

        transform: translate(-50%, 0);

      }

      .burger i {

        display: block;

        width: 35px;

        height: 2px;

        background: #fdd35b;

        position: absolute;

        top: 50%;

        left: 50%;

        -moz-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

        -webkit-transform: translate(-50%, -50%);

        transform: translate(-50%, -50%);

        -moz-transition: all 0.2s ease-in-out;

        -o-transition: all 0.2s ease-in-out;

        -webkit-transition: all 0.2s ease-in-out;

        transition: all 0.2s ease-in-out;

      }

      .burger i:before, .burger i:after {

        content: '';

        position: absolute;

        height: 2px;

        background: #fdd35b;

        width: 35px;

        top: 50%;

        left: 50%;

        -moz-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

        -webkit-transform: translate(-50%, -50%);

        transform: translate(-50%, -50%);

        -moz-transition: all 0.2s ease-in-out;

        -o-transition: all 0.2s ease-in-out;

        -webkit-transition: all 0.2s ease-in-out;

        transition: all 0.2s ease-in-out;

      }

      .burger i:before {

        margin-top: -12px;

      }

      .burger i:after {

        margin-top: 12px;

      }

      .burger:hover i:before {

        margin-top: -14px;

      }

      .burger:hover i:after {

        margin-top: 14px;

      }

      .burger.active i {

        background: transparent;

      }

      .burger.active i:before, .burger.active i:after {

        left: 0px;

        width: 35px;

      }

      .burger.active i:before {

        -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

        -webkit-transform: rotate(45deg);

        transform: rotate(45deg);

        top: 12px;

      }

      .burger.active i:after {

        -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

        -webkit-transform: rotate(-45deg);

        transform: rotate(-45deg);

        top: -12px;

      }

      .burger.active:hover {

        /* background: #750e1c; */

      }

      .burger.active:hover i:before, .burger.active:hover i:after {

        width: 35px;

        margin: 0;

        left: 0px;

        top: 0;

      }

    

    .level{

      overflow: hidden;

    }

    /**BURGER END***/

}
 .pc_none{ display: none;}
@media screen and (max-width:480px){
   .m_none{ display: none;}
    .pc_none{ display: block;}
    .bg_yellow {padding-bottom: 80px!important;}
	.roundBox{
    width: 85%!important;

}
	.mainSection2 {
    width: 100%;
    background: url(../img/gvm_mbbg_02.jpg)center center repeat;
	padding-top:30px;
    position: relative;
}

    /* slider */

    .slick-next {

        right: -5px;

    }

    .slick-prev {

        left: -5px;

    }

    .book-slide {

        margin-top: 50px;

    }

        /* slider  end*/

    .section{

        padding-top: 50px;

        padding-bottom: 50px; 

    }

    /* modal */

    .modal-content {

        max-width: 95%;

    }

    .modal-content .column3-box img {

        width: 90%;

    }

    .modal-content .column3-box {

        margin-top: 20px;

    }



    .column3-box h2 {

        margin-top: 10px;

    }

    .mainSection{

        width: 100%;

        height: 693px;

        background: url("../img/gvm_mbbg.jpg")center center no-repeat;

        background-size: cover;  

        position: relative;

      }

      .titleBox {

        max-width: 375px;

        top: 45%;

    }

    .titleBox p {

        display: none;

    }

    .date {

        right: 0;

        left: 15px;

        margin: 0 auto;

        top: 73%;

    }

    .book {

        width: 100px;

        position: absolute;

        right: 30px;

        top: 68%;

    }

    .textTitle {
		display:none;
        left: 3%;

        width: 80px;

        top: 500px;

    }

    .level-column {

        margin-top: 20px;

    }

    .level01 h2 {

        margin-top: 0px;

    }

    .level03 h2 {

        font-size: 28px;

    }

    .title {

        font-size: 28px;

        line-height: 36px;

    }

    .level02 {

        background: #68688e;

        width: 100%;

        height: auto;

    }

    .column2 {

        padding: 15px;

    }

    .column2 h4 {

        font-size: 20px;

        margin-top: 0px;

        line-height: 36px;

        text-align: center;

    }

    .column2 h6 {

        text-align: center;

        margin-top: 10px;

    }

    

    .circle {

        padding: 5px 10px;

    }

    .buyBtn {

        margin: 10px auto !important;

    }

    .price {

        text-align: center;

        font-size: 50px !important;

    }

    .column1 h2 {

        font-size: 28px;

        padding: 10px 0px;

        width: 250px;

    }

    .column1 h4 {

        font-size: 20px;

        line-height: 40px;

    }

    .trendBox {

        width: 100%;

        position: relative;

        height: auto;

        background: #68688e;

    }

    .pcTrend{

        display: none;

    }

    .mbTrend{

        display: block;

        width: 100%;

    }

    .projBtn {

        bottom: 30px;

    }

    .column3{

        margin-bottom: 50px;

    }

    .column3 p {

        margin-top: 15px;

        text-align:center;

        padding: 0px 0px;

    }

    .articleBox p {

        height: auto;

    }

    .moreBtn {

        margin: 0px auto 0 auto;

    }

    .more {

        text-align: center !important;

        margin-top: 30px;

        color: #f52c72;

        font-size: 18px;

    }

    .column1 {

        padding: 50px 20px 10px 20px;

    }

    .column1 img {

        max-width: 100%;

        margin: 0px auto 0 auto;

    }

    .column2 {

        display: flex;

        flex-wrap: wrap !important;

    }

    .level03 p {

        text-align: justify;

    }

    .mb-justify-content-center{

        justify-content: center !important;

    }

    iframe{

        height: 300px;

    }

    footer {

        padding: 20px 10px;

    }

    .level02 h2 {

        font-size: 28px;

    }

}

@media screen and (max-width:375px){

    .titleBox {

        max-width: 365px;

        top: 40%;

    }

    .date {

        top: 70%;

    }

    .book {

        width: 100px;

        position: absolute;

        right: 10px;

        top: 64%;

    }

    .textTitle {
		display:none;
        left: 3%;

        width: 70px;

        top: 70%;

    }

}

@media screen and (max-width:320px){

    .titleBox {

        max-width: 315px;

    }

    .textTitle {

        width: 55px;

    }

    .book {

        width: 85px;

    }

    .slick-dots li {

        margin: 0;

    }

    .projAward {

        font-size: 26px !important;

    }
}

.cid-t6tSgKEJmy {
  padding-top: 80px;
  padding-bottom: 3rem;
  background-color: #f3f1ef;
}
.cid-t6tSgKEJmy img,
.cid-t6tSgKEJmy .item-img {
  width: 100%;
}
.cid-t6tSgKEJmy .item:focus,
.cid-t6tSgKEJmy span:focus {
  outline: none;
}
.cid-t6tSgKEJmy .item {
  cursor: pointer;
  margin-bottom: 2rem;
}
.cid-t6tSgKEJmy .item-wrapper {
  position: relative;
  border-radius: 4px;
  background: #ffffff;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
	text-align: center;
	 
	margin:10px 0 30px ;
}
@media (min-width: 992px) {
  .cid-t6tSgKEJmy .item-wrapper .item-content {
    padding: 2rem 2rem 0;
  }
  .cid-t6tSgKEJmy .item-wrapper .item-footer {
    padding: 0 2rem 2rem;
  }
}
@media (max-width: 991px) {
  .cid-t6tSgKEJmy .item-wrapper .item-content {
    padding: 1rem 1rem 0;
  }
  .cid-t6tSgKEJmy .item-wrapper .item-footer {
    padding: 0 1rem 1rem;
  }
}
.cid-t6tSgKEJmy .mbr-section-btn {
  margin-top: auto !important;
}
.cid-t6tSgKEJmy .mbr-section-title {
  color: #232323;
}
.cid-t6tSgKEJmy .mbr-text,
.cid-t6tSgKEJmy .mbr-section-btn {
  text-align: center;
}
.cid-t6tSgKEJmy .item-title {
  text-align: center;
  color: #cc0000;
}
.cid-t6tSgKEJmy .item-subtitle {
  text-align: center;
  color: #bbbbbb;
}