@charset "utf-8";
        /* CSS Document */
        
        .p2-0,
        .p2-1,
        .p2-2,
        .p2-3,
        .p2-4,
        .p2-5,
        .p2-6,
        .p2-7 {
            height: 30rem;
            background-size: cover;
            background-position: center;
        }
        
        .p2-0 {
            background-image: url(../images/p2-0-hbg.jpg);
        }
        
        .p2-1 {
            background-image: url(../images/p2-1-hbg.jpg);
        }
        
        .p2-2 {
            background-image: url(../images/p2-2-hbg.jpg);
        }
        
        .p2-3 {
            background-image: url(../images/p2-3-hbg.jpg);
        }
        
        .p2-4 {
            background-image: url(../images/p2-4-hbg.jpg);
        }
        
        .p2-5 {
            background-image: url(../images/p2-5-hbg.jpg);
        }
        
        .p2-6 {
            background-image: url(../images/p2-6-hbg.jpg);
        }
        
        .p2-7 {
            background-image: url(../images/p2-7-hbg.jpg);
        }
        
        .p_content {
            text-align: center;
        }
        
        .p_content-img {
            width: 100%;
        }
        
        .img01,
        .img02,
        .img03,
        .img04 {
            height: 25rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .img01 {
            background-image: url(../images/p2-3-img01.jpg);
        }
        
        .img02 {
            background-image: url(../images/p2-4-img01.jpg);
            background-size: contain;
        }
        
        .img03 {
            background-image: url(../images/p2-4-img02.jpg);
            background-size: contain;
        }
        
        .img04 {
            background-image: url(../images/p2-5-img01.jpg);
        }
        
        .img05 {
            background-image: url(../images/p2-6-img01-01.svg);
            background-position: center top;
            background-size: cover;
            width: 50%;
        }
        
        .p_content-txt {
            width: calc( 100% - 2rem);
            font-family: 'Noto Sans TC', '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;
            padding: 0 1rem;
            margin-top: 2rem;
        }
        
        .p_content-txt h3 {
            font-size: 4rem;
            color: #552e31;
            margin: 0;
        }
        
        .p_content-txt h3 a {
            color: #552e31;
            text-decoration: none;
        }
        
        .p_content-txt p {
            font-size: 2.3rem;
            margin: 0 0 1em 0;
            text-align: left;
            color: #595758;
        }
        
        .p2-navbox {
            max-width: 120rem;
            margin: 0 auto;
            position: relative;
            bottom: 10rem;
            margin-bottom: -10rem;
        }
        
        .navbox-g {
            display: flex;
            justify-content: space-around;
            list-style-type: none;
            flex-wrap: wrap;
        }
        
        .navbox-g a {
            text-decoration: none;
            font-size: 2.4rem;
            font-family: 'Noto Serif TC', serif
        }
        
        .navbox-g li {
            width: calc(25% - 5.2rem);
            padding: 0 1rem 2rem;
            border: 0.1rem solid;
            border-radius: 1rem;
            text-align: center;
            margin: 1rem;
            background-color: white;
            transition: .8s;
            order: 5;
        }
        
        .navbox-g li:hover {
            transform: scale(.95);
        }
        
        .navbox-g li .navbox-content {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
        }
        
        .navbox-g li .navbox-content:before {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        
        .navbox-g li:nth-child(1):hover {
            transform: none;
        }
        
        .navbox-g li a {
            display: block
        }
        
        .navbox-g li a p {
            letter-spacing: .3rem;
            line-height: 1.2;
        }
        
        .navbox-g li.orange {
            border-color: #e84709;
        }
        
        .navbox-g li.orange p span {
            display: inline-block
        }
        
        .navbox-g li.orange a {
            color: #e84709;
        }
        
        .navbox-g li.gold {
            border-color: #d2ac6f;
        }
        
        .navbox-g li.gold a {
            color: #d2ac6f;
        }
        
        .navbox-g li.brown {
            background: #a09685;
            border-color: #a09685;
            color: #f6f2ec;
            display: flex;
        }
        
        .navbox-g li:nth-of-type(1) {
            order: 1
        }
        
        .navbox-g li:nth-of-type(2) {
            order: 2
        }
        
        .navbox-g li:nth-of-type(7) {
            align-items: flex-end;
            justify-content: flex-end;
        }
        
        .navbox-g li.brown h4 {
            margin: 0;
            font-size: 4rem;
            font-family: 'Noto Serif TC', serif;
            padding: 2rem 2rem 0;
            line-height: 7rem;
            letter-spacing: .3rem;
            text-align: left;
        }
        
        .navbox-g li.brown h4 span {
            display: inline-block
        }
        
        .navbox-icon {
            position: relative
        }
        
        .navbox-icon:after {
            content: "";
            width: 3rem;
            height: 3rem;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        
        li.orange .navbox-icon:after {
            background: url(../images/p2-0-pic/navbox-arrow-orange.svg)center no-repeat;
        }
        
        li.gold .navbox-icon:after {
            background: url(../images/p2-0-pic/navbox-arrow-gold.svg)center no-repeat;
        }
        
        .navbox-g li img {
            max-height: 8rem;
            max-width: 18rem;
        }
        
        .p_content-txt {
            width: calc( 100% - 2rem);
            font-family: 'Noto Sans TC', '微軟正黑體', Verdana, Arial, Helvetica, sans-serif;
            padding: 0 1rem;
            margin-top: 2rem;
        }
        
        .p_content-txt h3 {
            font-size: 4rem;
            color: #552e31;
            margin: 0;
            /*	text-align: left;*/
        }
        
        .p_content-txt p {
            font-size: 2.3rem;
            margin: 0 0 1em 0;
            text-align: left;
        }
        
        .p1-6-title {
            color: #cc3a12;
            font-size: 2.4rem;
            font-weight: bold;
            text-align: left;
        }
        
        .p1-6-title:before {
            content: "▋"
        }
        /*多元服務首頁*/
        
        .content_box {
            text-align: center;
        }
        
        .content_box h3 {
            font-family: 'Noto Serif TC', serif;
            font-size: 4.8rem;
            color: #5b5350;
            position: relative;
            letter-spacing: .4rem;
            font-weight: 900;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .content_box h3:after {
            content: "Language‧Education‧Service";
            font-size: 5.8rem;
            color: #f6f2ec;
            position: absolute;
            top: -4.8rem;
            left: 0;
            right: 0;
            z-index: -999;
        }
        
        .content_box h3 span {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .content_box h3 span:nth-of-type(2) {
            padding-left: 1rem
        }
        
        .content_box h3 span span {
            font-size: 3.6rem;
        }
        
        .content_box p {
            font-size: 2.4rem;
            text-align: left;
        }
        
        .content_box_item_group {
            display: flex;
            justify-content: space-between;
            padding: 3rem 0;
        }
        
        .content_box_item {
            margin-right: 10rem;
        }
        
        .content_box_item:nth-last-child(1) {
            margin: 0
        }
        
        .content_box_item h4 {
            display: inline-block;
            font-size: 3.2rem;
            color: #d39b50;
            border: 1px solid;
            padding: 3.2rem 5.5rem;
            margin: 0;
        }
        
        .content_box_item p {
            font-size: 1.8rem;
        }
        
        .content_box_item_line {
            width: 100%;
            height: 0.1rem;
            display: block;
            background-color: #d39b50;
            margin-top: 3.2rem;
        }
        
        .content_box_item_line:before {
            content: "";
            width: 0.1rem;
            height: 3.2rem;
            background-color: #d39b50;
            display: block;
            margin: 0 auto;
            position: relative;
            top: -3.2rem;
        }
        
        .project_box_item_group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .project_box_item {
            width: calc(50% - 11rem);
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            flex-wrap: wrap;
            border: 1px solid #e0d0ac;
            flex-shrink: 0;
            border-radius: 2rem 0 0;
            padding: 3rem;
            margin-bottom: 10rem;
            position: relative;
        }
        
        .project_box_item:after {
            content: "";
            display: block;
            width: 100%;
            padding-bottom: calc(100% - 12.5rem);
            background: #f6f2ec;
            position: absolute;
            z-index: -9;
            top: 3rem;
            right: -3rem;
        }
        
        .project_box_item.right:after {
            right: 0;
            left: -3rem;
        }
        
        .project_box_item_pic {
            width: calc(50% - 1rem);
        }
        
        .project_box_item_pic {
            margin-top: 2rem;
            order: 3
        }
        
        #project_box_item_pic_mobile {
            display: none
        }
        
        .project_box_item_pic:nth-child(2) {
            margin-top: 0
        }
        
        .project_box_item_pic img {
            width: 100%;
        }
        
        .project_box_item_content {
            width: calc(50% - 5rem);
            text-align: left;
            background: white;
            padding: 0 2rem;
        }
        
        .project_box_item_content:before {
            content: "";
            display: block;
            width: 20%;
            height: .4rem;
            background: #cc3a12
        }
        
        .project_box_item_content h4 {
            font-size: 3rem;
            color: #cc3a12;
            font-weight: bold;
            margin: 0;
            padding: 3rem 1rem 1rem 0;
        }
        
        .project_box_item_content h4 span {
            display: inline-block;
        }
        
        .project_box_item_content p {
            font-size: 1.5rem;
            margin: 0;
            font-weight: bold;
        }
        
        .project_box_item.right .project_box_item_content {
            order: 2
        }
        
        .project_box_item.right .project_box_item_pic.first {
            order: 1
        }
        
        .more_box {
            border: 0.2rem solid;
            width: 60%;
            margin: 0 auto;
            display: inline-block;
            padding: 1rem;
            font-size: 4.5rem;
            font-family: 'Noto Serif TC';
            border-radius: 10rem;
            margin: 5rem 0;
            color: #cc3a12;
            transition: 0.5s;
        }
        
        .more_box a {
            color: #cc3a12;
            text-decoration: none;
        }
        
        .more_box:hover {
            transform: scale(1.05);
        }
        
        .more_box_arrow {
            display: inline-block;
        }
        
        .more_box_arrow span {
            display: none;
        }
        
        .more_box_arrow img {
            height: 2.5rem
        }
        /*多元服務首頁*/
        
        @media screen and (min-width:768px) {
            .p2-3 {
                background-position: center;
            }
            .p_section {
                text-align: left;
            }
            .p2-1,
            .p2-2,
            .p2-3,
            .p2-4,
            .p2-5,
            .p2-6,
            .p2-7 {
                height: 41.4rem;
            }
            .p_section h1 {
                margin: 0;
            }
            .img01,
            .img02,
            .img03,
            .img04 {
                width: 70rem;
                height: 40rem;
            }
            .img02 {
                position: relative;
            }
            .img04 {
                height: 40rem;
            }
            .img02:after,
            .img04:after {
                position: absolute;
                content: "";
                background-image: url(../images/p2-4-pic01-bg.png);
                width: 9.1rem;
                height: 12rem;
                background-position: center;
                background-repeat: no-repeat;
                right: -8rem;
                top: 5rem;
                z-index: -89;
            }
            .p_content {
                position: relative;
                text-align: center;
                z-index: -90;
                padding: 5rem 0;
            }
            .p_content-txt {
                margin: 0;
                position: absolute;
                background-color: #fff;
                z-index: 9;
                padding: 3rem 6rem;
                box-shadow: 0.3rem 0.3rem 0.9rem #00000047;
                line-height: 2;
                text-align: left;
            }
            .p_content-txt h3 {
                position: relative;
                padding-left: 1rem;
                font-size: 2rem;
            }
            .p_content-txt h3:before {
                content: "";
                width: .3rem;
                height: 60%;
                background-color: #552e31;
                position: absolute;
                left: 0;
                top: 20%;
            }
            .p_content-txt p {
                font-size: 1.6rem;
                line-height: 3rem;
            }
            .right-img {
                float: right;
                order: 1;
            }
            .left-img {
                float: left;
            }
            .left-txt {
                right: 0;
                left: 5rem;
            }
        }
        
        @media screen and (max-width:850px) {
            .navbox-g li {
                width: calc(50% - 5.2rem);
            }
            .navbox-g li:nth-of-type(6) {
                order: 4
            }
            .navbox-g li:nth-of-type(7) {
                order: 3
            }
            .content_box h3 span:nth-last-of-type(2) {
                width: 100%
            }
            .project_box_item {
                width: calc(50% - 6rem);
                border: none;
                margin-bottom: 0;
                align-self: flex-start;
            }
            #project_box_item_pic_mobile,
            .project_box_item_content {
                width: 100%
            }
            #project_box_item_pic_mobile {
                padding: 3rem 1rem;
                background: #f6f2ec;
            }
            .project_box_item_pic {
                display: none
            }
            #project_box_item_pic_mobile {
                display: block;
                margin-top: 2rem;
            }
            #project_box_item_pic_mobile img {
                width: 90%
            }
            .project_box_item:after {
                display: none
            }
            .project_box_item.right .project_box_item_content {
                order: unset;
            }
            .project_box_item_content h4 span {
                display: inline;
            }
        }
        
        @media screen and (max-width:767px) {
            .img01,
            .img04 {
                background-size: contain;
            }
        }
        
        @media screen and (max-width:630px) {
            .more_box {
                width: 80%;
                border: none
            }
            .more_box_arrow {
                width: 50%;
                border: 0.2rem solid;
                font-size: 3rem;
                border-radius: 10rem;
                color: #cc3a12;
                margin: auto;
                padding: 2rem;
                margin-top: 2rem;
            }
            .more_box_arrow span {
                display: inline-block;
            }
            .more_box_arrow img {
                max-height: 2rem;
                padding-left: 1rem
            }
        }
        
        @media screen and (max-width:425px) {
            .project_box_item {
                width: calc(100% - 6rem)
            }
        }