/*-------------------------------------------*\
	CSS data_safety
  - 01. conflict
  - 02. lineTitle
  - 03. background
  - 04. Button
  - 05. RWD
\*-------------------------------------------*/

/* 01. conflict */
.main_menu .container_menu a{
    color:#fff
}
.side_menu a.btn_side {
    box-shadow: 0px 5px 10px #00067844;
}
a{
    text-decoration:none;
}
img{
    display: block;
    width: auto;
    height: auto;
}
.project img{
    width: 100%;
}
.movie{
    width: 100%;
}
.d-inline-table{
    display: inline-table;
}
.kv_pc img {
    display: inline-flex;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
}
.section_movie,.section_project{
    padding: 20px 0;
}
.col-md-35{
    width: 29.166666%;
}

.side_menu a.btn_side img {
    width: 100%;
    height: auto;
}
.section_project .col-10,.project-green .col-10{
    display: flex;
    justify-content: center;
}
/* -----conflict end-------------------------------------- */
.purple-title{
    color: #ECB5FF;
}
/* lineTitle */
.lineTitle{
    margin-bottom: 0.455rem;
}

.lineTitle::before,.lineTitle::after{
    content:"";
    height: 0.14rem;
    width: 1.8rem;
    display: inline-block;
    background: #fff;
    border:1px;
    font-size: 0;
    vertical-align: middle;
}

.lineTitle::before{
    transform: rotate(-124deg);
    margin-right: 0.5rem;
}

.lineTitle::after{
    transform: rotate(124deg);
    margin-left: 0.5rem;
}
.essay p{
    color: #D9D9D9;
}
/* ------lineTitle  end------------------------------------- */

/* background page03*/
.purple-bg{
    background: radial-gradient(47.24% 100% at 47.24% 0%, #51026D 0%, #2A013E 100%);
}
.purple-blue-bg{
    background: rgb(81,2,109);
    background: linear-gradient(182deg, rgb(42 1 62) 0%, rgb(34 2 124) 50%);
}
.purple-bg2{
    background: rgb(81,2,109);
    background: linear-gradient(182deg, rgb(47 2 110) 0%, rgb(24 9 41) 50%);
}
.purple-f{
    background: url(../images/f-bg.png)100% no-repeat;
    background-position: bottom;
    padding: 0 0 20%;
}
.blue-bg{
    background: rgb(34,2,124);
    background: linear-gradient(184deg, rgba(34,2,124,1) 0%, rgba(49,2,109,1) 100%);
}

/* ------background  page03 end------------------------------------ */

/* background page04*/
.blue-green-bg{
    background: rgb(1,27,66);
    background: linear-gradient(184deg, rgb(1 27 66) 0%, rgba(0,124,141,1) 30%, rgb(0 18 37)60%, rgb(0 18 37) 100%);
}
.informationbg{
    background: url(../images/informationbg.png) center no-repeat;
    background-size: cover;
    background-position: 52% 0;
}
.f-bg{
    background: url(../images/f-bg2.png) center no-repeat;
    background-size: 100%;
    background-position: bottom;
    padding-bottom: 10%;
}
.blue-green-bg2{
    background:  rgb(0 82 112);
    background: linear-gradient(179deg, rgb(0 18 37) 3%, rgb(18 89 116) 20%, rgb(0 82 112) 100%);
}
.blue-green-bg3 {
    background: rgb(0 85 114) ;
    background: linear-gradient(184deg, rgb(0 85 114) 0%, rgb(3 13 43) 100%);
}

.intel{
    display: flex;
    justify-content: end;
    align-items: center;
}
.intel img{
    display: block;
    width: auto;
    height: auto;
}
/* ------background  page04 end------------------------------------ */

/*** Button ***/
.book_more-h{
    height: 160px;
}
.book_more{ position:relative;}
.book_more img{ 
    position:absolute;
  /* 淡出淡入效果1秒 */
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
 }
 .book_more img:last-child:hover{
   /* 滑入時第一張透明度設0 */
    opacity:0;
}

.button-hover img:hover{
    transform: scale(1.1);
    transition: 0.3s;
}

/* ------Button end------------------------------------ */

/* --------------RWD----------------------------- */

@media screen and (min-width: 768px){
    .kv_pc {
        display: block;
        width: 100%;
    }
    .py-md-10 {
        padding-top: 10rem!important;
    }
}
@media screen and (max-width: 767px){
    .kv_m {
        display: block;
        width: 100%;
    }
    .intel img{
        width: 45px;
    }
    .section_movie,.section_project{
        padding: 0;
    }
    .informationbg {
        background-position: 68% 0;
    }
}
@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 90%;
    }
}

@media screen and (min-width:768px) {    
    .col-md-35{
        width: 29.166666%;
    }
}