@charset "utf-8";

.eventName{max-width:2560px;margin:0 auto;text-align:center;letter-spacing:-0.5px;line-height:1.5; position:relative; font-family:'Noto Sans HK', 'Noto Sans TC', 'Noto Sans', 'Noto Sans TH', Arial !important}

.sideBanner{position:fixed; left:0; bottom:100px; z-index:10}
.sideBanner.fixed{position:absolute; bottom:50px}

.con .inner{max-width: 1000px;margin: 0 auto;}
.con1{position: relative;background:#9bd6f1 url(images_hk/bg_1.jpg) top center no-repeat;background-size:cover;}
.con1 .inner{padding:472px 0 580px;}
.con1 .inner p{font-size: 22px; color: #333;width: 80%;margin-top: 14px;margin: 14px auto 0 auto;}
.con1 h3{margin:0 5%}
.con1 h3 img:nth-child(1){margin-bottom: 40px;}
.con1 .logo{position: absolute; bottom: 4%; left: 0; right: 0;}
.con2 .inner{max-width: 1000px;margin:0 auto;}
.con2{padding:79px 0 60px 0;background:#fed5d5; }
.con2 p{width: 98%; margin:30px 0 0; text-align: center;color: #6d1e20;font-size:35px;font-weight: bold;line-height: 50px;}
.con2 ul{display:inline-flex;margin-left: 124px;}
.con2 ul li{color: #333;font-size: 20px; text-align: left;line-height: 32px;}
.con2 ul li:last-child{align-self: flex-end;margin-left:65px;flex:1 0 auto}
.con2 .you_wrap{ display:inline-block;width: 350px;padding:10px;background:#000;border-radius: 20px;overflow:hidden;}
.con2 .youtubeBox{width:100%; height:auto; padding-top:187%; box-sizing:border-box; color:#f1bed0; margin:0 auto; position:relative; }
.con2 .youtubeBox iframe{position:absolute; top:0 ;left:0; width:100%; height:100%;overflow: hidden;}
.con2 .logo{margin-top:60px}

.con3{padding:66px 0 52px;background:url(images_hk/con03_bg.jpg) center top / cover}
.con3 h3{margin-bottom: 12px;}
.con3 h3 + p{width: 100%;text-align: center;color: #333;line-height: 30px;font-size: 22px;margin-bottom: 46px;}
.con3 .inner > ul{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 31px;}
.con3 .inner > ul li{width: 32.3%;margin-bottom: 27px;font-size: 22px;}
.con3 .inner > ul li:nth-child(1){color: #28aabe;}
.con3 .inner > ul li:nth-child(2){color: #fe7b65;}
.con3 .inner > ul li:nth-child(3){color: #debd2e;}
.con3 .inner > ul li:nth-child(4){color: #9c468c;}
.con3 .inner > ul li:nth-child(5){color: #e45d71;}
.con3 .inner > ul li:nth-child(6){color: #2a9e39;}
.con3 .inner > ul li p {padding: 12px 0px 8px;}
.con3 a{
    width: 310px;
    height: 58px;
    background: #333;font-size: 24px;color: #fff;
    display: flex;
    margin: 0 auto 40px;
    justify-content: center;
    align-items: center;
}
.con3 a::after{
    content: '';
    width: 8px;
    height: 13px;
    margin-left: 10px;
	display:inline-block; vertical-align:middle;
	background:url(images_hk/guide_r.png) no-repeat
}

.con4{padding:100px 0 60px;background: #c8e8f8 url(images_hk/bg_bt.jpg) no-repeat;background-position: 48% -7%;}
.con4 .inner .bx{
    margin:40px 3.5% 0 3.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    padding: 40px 0 40px;
    background: #fff;
    border-radius: 17px;
    -webkit-box-shadow: 3px 3px 2px 1px rgba(175,202,214,1);
    box-shadow: 3px 3px 2px 1px rgba(175,202,214,1);
}
.con4 .bx .img_area{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.con4 .bx .img_area li:nth-child(2){width: 100%;color: #b94259;font-size: 22px;margin: 54px 0 33px;}
.con4 .bx h3{position: absolute;top:-30px;width: 100%;}
.con4 .bx h3 em{display: block; color: #0f0e9f;font-size: 25px;margin-top: 6px;}
.con4 .bx p{width: 100%;text-align: center;color: #0f0e9f;;line-height: 30px;font-size: 21px;font-weight: bold;}
.con4 .bx p em{display: block; color: #333;font-weight: normal;}
.con4 .inner .desc{font-size: 20px;color: #666;margin-top: 30px;width: 75%;margin: 30px auto 0 auto; text-align:left; line-height:1.4}
.con4 .inner .desc p{margin-bottom:10px; position:relative; padding-left:15px}
.con4 .inner .desc p:before{display:inline-block; width:4px; height:4px; background:#666; border-radius:50%; position:absolute; left:0; top:10px; content:''; display:inline-block}
.con4 .logo{margin-top:35px}
.mOnly{display: none;}
.pcOnly{display:block}

.logo{opacity:0.6}

.sel_tit{position:relative; font-size:55px; color:#329889}
.sel_dl{position:relative; margin:0 auto; margin-top:60px; text-align:center}
.sel_dl dt{position:relative}
.sel_dl dt p.txt{position:relative; margin-top:20px; font-size:30px; color:#333333; font-weight:bold}
.sel_dl dd{position:relative; margin-top:20px}
.sel_dl dd ul{position:relative;}
.sel_dl dd ul li{line-height:1.5; position:relative; margin-bottom:10px; font-size:19px; color:#666666}
.sel_dl dd ul li:nth-last-child(1){margin-bottom:0}
.card{position:relative; max-width:500px; margin:0 auto; padding-top:20px; font-size:0}
.card01{position:relative; width:48%; height:430px; background-color:#fafafc; background-image:url(images_hk/card01.jpg); background-position:right bottom; background-repeat:no-repeat; border-radius:10px; overflow:hidden; display:inline-block; vertical-align:top}
.card02{position:relative; width:48%; height:430px; background-color:#c8e8e7; background-image:url(images_hk/card02.jpg); background-position:right bottom; background-repeat:no-repeat; border-radius:10px; overflow:hidden; display:inline-block; vertical-align:top; margin-left:4%}
.card .tit{position:relative; text-align:center; padding:60px 0 0 0; font-size:30px; font-weight:bold; color:#333333}
.card .tail{position:relative; text-align:center; padding-top:20px; margin-top:20px; font-size:23px; color:#666}
.card .tail:after{width:100px; height:2px; background:#333; position:absolute; left:50%; margin-left:-50px; top:0; content:''; display:block}

.con6{padding:66px 0 52px;background:#cae9f8}
.con6 .tit{position:relative; font-size:55px; color:#944285; line-height:1.4}
.own_list{position:relative; font-size:0; text-align:center; max-width:1000px; margin:0 auto; padding:40px 0 0 0;}
.own_list li{display:inline-block; vertical-align:top; width:33%; text-align:center; margin-bottom:50px}
.own_list li .img{position:relative;}
.own_list li .tit{position:relative; padding:10px 0 0 0; font-size:30px; color:#333; font-weight:bold}
.own_list li .tail{position:relative; padding:10px 0 0 0; font-size:19px; color:#666666}

.con4 .tit{position:relative}
.con4 .tit .txt{position:relative; font-size:50px; color:#0f0e9f}
.con4 .tit .tail{position:relative; padding:10px 0 0 0; line-height:1.4; color:#333333; font-size:22px}

.con7{position:relative; padding:100px 0; background:url(images_hk/con07_bg.jpg) center top / cover}
.footer{z-index:100}

@media screen and (max-width:1280px) {
	.sideBanner img{width:40px}	
}

@media screen and (max-width: 1000px){
    .con .inner{margin: 0 5%;}
    .con1 .inner{padding: 65% 0 80%;}
    .con2 ul li:last-child{flex:1 1 auto}
    .con4 .bx .img_area{flex-direction: column;}
    .con4 .bx .img_area li:nth-child(2){margin:20px 0;font-size: 16px;}
	
	.own_list li .img img{max-width:80%}
	
	.con4 .inner .bx{padding:40px 20px 40px 20px}
	.con7{padding:50px 10px}
}

@media screen and (max-width: 768px){
    .mOnly{display: block;}
    .pcOnly{display:none}
    .con1 h3 img:nth-child(1){width: 100%;margin-bottom:5%}
    .con1 .inner p{font-size: 18px; }
    .con2 {padding: 7% 0 7% 0;}
    .con2 ul:after{position: relative;display: block;margin:0 auto;top:0;left: 4%;}
    .con2 ul{margin-top: 5%;margin-left: 0;}
    .con2 ul li{width: 100%;font-size: 16px;text-align: center;}
    .con2 .you_wrap{width:75%}
    .con2 p{font-size: 28px;line-height: 31px;}
    .con3{padding: 7% 0 7%;}
    .con3 h3{margin-bottom: 10px;}
    .con3 h3 + p{font-size: 16px; line-height:1.4}
    .con3 h3 + p br{display: none;}
    .con3 .inner > ul li{width: 48%;}
    .con3 .inner > ul{padding: 0;}
    .con3 a{
        width: 100%;
        height: 40px;
    }
    .con4{padding:50px 0 50px;}
    .con4 .inner > h3 { margin-bottom: 15px;}
    .con4 .inner > h3 img{width: 70%;}
    .con4 .bx p{width: 100%;font-size: 16px;line-height: 23px;}
    .con4 .inner .bx{padding: 6% 5%;}
    .con4 .inner .desc em{font-size: 14px;}
    .con4 .inner .desc em br{display: none;}
    .con4 .bx .img_area{width: 70%;}

    .con1 .logo{width: 110px;margin: 0 auto;}
    .con2 .logo{width: 110px;margin: 10% auto 0;}
    .con3 .logo{width: 110px;margin: 0 auto;}
    .con4 .logo{width: 110px;margin-right: auto;margin-left: auto;}

    .con2 .youtubeBox{padding-top: 160%;}
    .con2 .youtubeBox::before{
        content: '';
        z-index: 2;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        padding-top: 10%;
        border-radius: 10px 10px 0 0;
        box-shadow: -2px -6px 10px 3px rgb(0, 0, 0);
    }
    .con2 .youtubeBox::after{
        content: '';
        z-index: 2;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        padding-bottom: 3%;
        border-top: 0;
        border-radius: 0px 0px 10px 10px;
        box-shadow: 0px 3px 0px 3px rgb(0, 0, 0);
    }
	
	.sel_dl{margin-top:40px}
	.sel_dl dt p.txt{font-size:20px; margin-top:10px}
	.sel_dl dd ul li{font-size:14px}
	.sel_dl dd{margin-top:10px}
	
	.card01, .card02{height:250px; background-size:100% auto}
	.card .tit{font-size:17px; padding:40px 0 0 0}
	.card .tail{font-size:16px; margin-top:10px; padding-top:10px}
	
	.con6 .tit{font-size:30px}
	.own_list li{width:50%; margin-bottom:30px}
	.own_list li .tit{font-size:20px}
	.own_list li .tail{font-size:14px}
	
	.con4 .tit .txt{font-size:30px}
	.con4 .tit .tail{font-size:16px}
	.con4 .inner .bx{margin:30px 0 0 0 }
	.con4 .bx .img_area{width:auto}
	.con4 .inner .desc p{font-size:14px}
	.con4 .inner .desc{width:95%}
	
	.sel_tit{font-size:30px; padding:0 15px}
	
	.sideBanner{bottom:50px}
	.sideBanner img{width:40px;}
}

@media screen and (max-width: 480px){
    /* .con2 .youtubeBox{padding-top: 55%;} */
    .con2 ul{flex-direction: column;}
    .con2 ul li:last-child{width: 64%;margin: 5% auto 0;}
    
}