/*-------------------------------------------*\
  - 01. intro
  - 02. product 豐富的產品系列
  - 03. steps 三大措施 TAB  ok
  - 04. online 端點設備 新上線即戰力
  - 05. service 工廠加值應用服務
  - 06. movie 
  - 07. media 媒體報導
  - 08. RWD
  - 09. HOVER
\*-------------------------------------------*/

.section{
    padding: 3.63rem 0;
}

.section .row_title{
    flex-direction: column;
    align-items: center;
    margin-bottom: 3.18rem;
    text-align: center;
}

.section .row_content{
    justify-content: center;
    text-align: center;
}


.section .pic_item{
    padding: 1rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
}

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


/*- 01. intel*/
.section_intro{
    padding-top: 4rem;
    text-align: center;
    background-image: url("../images/workspace_intro-bg.png") , radial-gradient(47.24% 100% at 47.24% 0%, #0339E4 0%, #001557 77.59%, #00104C 100%) ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 83.33% auto,100%;
}

.section_intro  .item_intel{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: flex-end;
    margin: 1.36rem 0;
}

.section_intro  .intel{
    width: 3.86rem;
    margin-left: 1.36rem;
}

.section_intro .container_intro .title{
    margin-bottom: 1.36rem;
}

.section_intro .container_feature{
    padding: 4rem 0 3.5rem 0;
}

.section_intro .container_feature .row_title{
    color: #4BA9FF;
}

.section_intro .container_feature  .row{
    justify-content: space-between;
}

.section_intro .container_feature  .icon{
    width: 4rem;
    margin: 0 auto 1rem auto;
}

.section_intro .container_feature .item_feature{
    padding: 0 0.5rem;
    margin: 0 auto;
    margin-bottom: 2rem;
    color: #D6D6D6;
}

/*- 02. product*/
.section_product{
    background-image: url("../images/workspace_product-bg.png") , linear-gradient(180deg, #00104C 0%, #002177 100%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto,100%;
}

.section_product .col_card{
    position: relative;
    margin: 3rem 0;
}

.section_product .col_card .item{
    margin:  0 0.5rem;
    padding: 0 0.5rem 2.5rem 0.5rem;
    border: 2px solid #fff;
    border-radius: 0.68rem;
}

.section_product .item_card .icon{
    width: 6.27rem;
    height: 6.27rem;
    margin: -3.135rem auto 0.8rem auto;
    background: #fff;
    border-radius: 100%;
}

.section_product .item_card .title{
    position: relative;
    display: inline-block;
    padding: 0 0.4545rem;
    margin-bottom: 0.68rem;
}

.section_product .item_card .title p{
    position: relative;
    z-index: 1;
}

.section_product .item_card .title::before{
    position: absolute;
    content:"";
    display: block;
    width: 100%;
    bottom: 0.25rem;
    left: 0;
    right: 0;
    height: 0.54rem;
    border-radius: 0.22rem;
    background: #4BA9FF;
    z-index: 0;
}

.section_product .item_card a.btn_card{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 0.22rem;
    margin: auto;
    width: 7.63rem;
    color: #000;
    border-radius: 0.22rem;
    background: #00B2FF;
    transform: translateY(50%);
    transition: all ease .3s;
}

.section_product .item_card a.btn_card::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    content:"";
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    transform: translateY(-1rem);
    border-radius: 3px;
    border-style: solid;
    border-width: 0.613rem 0.5rem;
    border-color: transparent transparent #00B2FF transparent;
}

/*- 03. steps*/
.section_steps{
    background-image: linear-gradient(180deg, #002177 0%, #00289A 57.58%, #003DFF 100%);
}

.section_steps .steps_btn{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
}

.section_steps .btn_tab{
    position: relative;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    border-radius: 0.9rem 0.9rem 0px 0px;
}


.section_steps .btn_tab img:nth-of-type(2){
    display: none;
}

.section_steps .btn_tab > *{
    flex: none;
}


.section_steps .btn_tab .num{
    font-size: 1.8rem;
    font-weight: 500;
    font-style: italic;
}

.section_steps .btn_tab.is-active{
    background: #fff;
    color: #005EFF;
}

.section_steps .btn_tab.is-active img:nth-of-type(1){
    display: none;
}

.section_steps .btn_tab.is-active img:nth-of-type(2){
    display: block;
}

.section_steps .btn_tab.is-active::after{
    content:"";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    height: 0;
    width: 0;
    border-color: #fff  transparent  transparent  transparent;
    border-style: solid;
    z-index: 2;
}


.section_steps .steps_content{
    padding: 0.9rem;
    border-radius: 0.9rem;
}

.section_steps .steps_content .tab_content{
    display: none;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.section_steps .steps_content .tab_content.is-active{
    display: block;
}

.section_steps .content_title{
    padding: 0.9rem 1.36rem;
    background: linear-gradient(90deg, rgba(0, 94, 255, 0.6) 3.25%, rgba(0, 87, 237, 0) 34.1%);
}

.section_steps .content_title h3.sub_title{
    display: inline-block;
    margin-top: 0.45rem;
    padding: 0.2rem 0.45rem;
    letter-spacing: 0;
    font-weight: 400;
    color: #CECECE;
    border: #CECECE solid 1px;
}


.section_steps .row_step2{
    justify-content: center;
    align-items: center;
}

.section_steps .content_text{
    padding: 1rem 0;
}

.section_steps .content_text p ~ p{
    margin-top: 1.25em;
}


/*- 04. online*/
.section_online{
    background-image: url("../images/workspace_online-bg.png") , linear-gradient(180deg, #003DFF 0%, #0011AD 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto,100%;
}

.section_online .item_online{
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    justify-content: space-between;
    align-items: stretch;
}

.section_online .item_online .online_arrow {
    width: 1rem;
    flex: none;
}

.section_online .item_online .arrow_side {
    width: 100%;
    height: 0.625rem;
}

.section_online .item_online .online_arrow .arrow_center{
    height: calc(100% - 1.25rem);
    background-image: linear-gradient(180deg, rgba(77, 115, 250, 1) 0%, rgba(0, 202, 178, 1) 100%);
}

.section_online .item_online .online_step{
    width: calc(100% - 3.2rem);
}

.section_online .item_online .step_item{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    padding: 0.5rem 0.5rem;
    box-sizing: border-box;
    width: 100%;
}

.section_online .item_online .step_item .step_number{
    flex: none;
    margin-right: 0.45rem;
    width: 4rem;
    height: 4rem;
    font-size:  3.66rem;
    line-height: 1.069;
    border-radius: 100%;
    background-image:  linear-gradient(90deg, rgba(217, 217, 217, 0.5) 0%, rgba(217, 217, 217, 0) 100%);
}

.section_online .item_online .step_item ~ .step_item{
    margin-top: 1rem;
}

.section_online .item_online .step_item:nth-of-type(1){
    background: #4D73FA;
}

.section_online .item_online .step_item:nth-of-type(2){
    background: #2480EC;
}

.section_online .item_online .step_item:nth-of-type(3){
    background: #24A9EC;
}

.section_online .item_online .step_item:nth-of-type(4){
    background: #00C2DC;
}

.section_online .item_online .step_item:nth-of-type(5){
    background: #00CAB2;
}


.section_online .item_online .step_content{
    width: calc(100% - 3.55rem);
    text-align: left;

}

.section_online .item_online .step_content .title{
    margin-bottom: 0.54rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #fff;
}

.section_online .item_online .step_content li{
    margin-left: 1.2em;
    margin-bottom: 0.3rem;
    line-height: 1.25;
    color:#000;
}

/*- 05. service*/
.section_service{
    background-image: url("../images/workspace_service-bg.png") ,linear-gradient(180deg, #0011AD 0%, #001EBC 100%);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto,100%;
}

.section_service .text_content{
    margin-bottom: 1.36rem;
}

.section_service .service_pic{
    width: 100%;
}

/*- 06. movie */

.section_movie{
    background-image: linear-gradient(180deg, #001EBC 0%, #003AFA 100%);
}

.section_movie .movie{
    margin-bottom: 3.18rem;
}


/*- 07. media*/
.section_media{
    background-image: url("../images/workspace_media-bg.png") , linear-gradient(180deg, #0039F9 0%, #000A65 100%);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto,100%;
}

.section_media .project .overlay{
    background: rgb(0,94,255);
    background: linear-gradient(180deg, rgba(4, 77, 187, 0) 34.04%, #0044F1 72.87%);
}


/*- 08. RWD*/

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

    .section_intro{
        background-size: 170%, 100%;
    }

    .section_intro .container_intro h3{
        line-height: 1.5;
    }

    .section_product{
        background-size: 200%, 100%;
        background-position: left top;
    }
    .section_steps .btn_tab{
        flex-direction: column;
        align-items: center;
        padding: 0.6rem 0.9rem;
    }


    .section_steps .btn_tab ~ .btn_tab{
        margin-left: 0.8rem;
    }

    .section_steps .btn_tab > * ~ *{
        margin-top: 0.2rem;
    }

    .section_steps .btn_tab img{
        width: 60%;
        margin: auto;
    }

    .section_steps .btn_tab.is-active::after{
        bottom: -17px;
        border-width: 8px 10px;
    }

    .section_steps .btn_tab,.section_steps .steps_content{
        margin-bottom: -1px;
        border: 1px solid #FFFFFF;
    }

    .section_steps .row{
        padding: 0.5rem;
    }

    .section_online{
        background-size: 200% ,100%;
    }

    .section_service{
        background-size: 300%,100%;
    }

    .section_service .service_pic ~ .service_pic{
        margin-top: 1rem;
    }

    .section_media{
        background-size: 200%,100%;
    }

    .section_online .item_online .step_item h3.title{
        font-size: 1rem;
        letter-spacing: 0.005em;
    }

    .section_online .item_online .step_content li{
        font-size: 0.75rem;
    }
    .lineTitle::before{
        margin-right: 0.2rem;
    }

    .lineTitle::after{
        margin-left: 0.2rem;
    }


}

@media screen and (min-width:768px) {

    .lineTitle::before{
        margin-right: 1.36rem;
    }

    .lineTitle::after{
        margin-left: 1.36rem;
    }

    .section_steps .btn_tab{
        padding: 0.9rem 1.6rem;
    }


    .section_steps .btn_tab ~ .btn_tab{
        margin-left: 1.5rem;
    }

    .section_steps .btn_tab > * ~ *{
        margin-left: 0.5rem;
    }


    .section_steps .btn_tab.is-active::after{
        bottom: -21px;
        border-width: 10px 14px;
    }

    .section_steps .content_step1 .content_pic{
        margin-top: -8%;
    }

    .section_steps .btn_tab,.section_steps .steps_content{
        margin-bottom: -2px;
        border: 2px solid #FFFFFF;
    }

    .section_steps .row{
        padding: 1.5rem;
    }

    .section_online .item_online .online_arrow {
        width: 2.4rem;
    }

    .section_online .item_online .arrow_side {
        height: 1.5rem;
    }

    .section_online .item_online .online_arrow .arrow_center{
        height: calc(100% - 3rem);
    }

    .section_online .item_online .step_item{
        padding: 0.4545rem 0.9rem;
    }

    .section_online .item_online .online_step{
        width: calc(100% - 7rem);
    }

    .section_online .item_online .step_item .step_number{
        width: 6.8rem;
        height: 6.8rem;
        font-size: 6.36rem;
        line-height: 1.069;
    }

    .section_online .item_online .step_content{
        width: calc(100% - 7.25rem);

    }

    .section_online .item_online .step_content li{
        font-size: 1rem;
    }


    .section_service .row_pic{
        justify-content: space-between;
    }

    .section_service .service_pic:nth-of-type(1){
        width: 59%;
    }

    .section_service .service_pic:nth-of-type(2){
        width: 35%;
    }

    .section_service .service_pic ~ .service_pic{
        margin-left: 1rem;
    }


}

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

}

@media screen and (min-width:1366px) {
    .steps_content .content_pic img{
        width: 94%;
        margin: auto;
    }

}

@media screen and (min-width:1600px) {

}

/*- 09. HOVER */

@media (hover: hover){
    .section_product .item_card a.btn_card:hover{
        color: #fff;
        filter: brightness(0.7) contrast(200%);;
    }
}