@charset "UTF-8";
/* CSS Document */


* {margin:0px; padding:0px;}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap');


body, html {position:relative; font-size:16px; line-height:24px; font-family:'微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:normal; letter-spacing:1px; color:white; overflow-x:hidden; background:url(../images/main_bg.jpg) top center repeat-y; background-size:100% auto;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

.cen1000 {display:block; width:90%; max-width:1100px; margin:auto; position:relative;}

#kv {display:block; width:100%; position:relative; background:url(../images/kv_bg_pic_1.png) bottom center no-repeat; background-size:100% auto; padding:50px 0px 15% 0px; overflow:hidden;}
#kv .cen1000 {display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; z-index:3;}
#kv .kv_left {width:49%; margin-right:1%;}
#kv .kv_right {width:49%; margin-left:1%; position:relative;}
#kv .kv_right img {width:100%; height:auto; position:relative; z-index:1;}
#kv #kv_vdo {width:32.36%; max-width:178px; height:auto; position:absolute; top:40.5%; left:20.4%; z-index:0;}

#kv .kv_left img {display:block; margin:40px 0px;}
#kv .kv_title {font-size:40px; line-height:40px; color:white; font-weight:bold; letter-spacing:3px; position:relative;}
#kv .kv_title::after {display:block; content:''; width:60px; height:6px; background:#ff8f47; position:absolute; bottom:-13px; left:0px;}
#kv .kv_sub {font-size:30px; line-height:42px; color:#ff8f47; font-weight:bold; margin:60px 0px 50px 0px;}
#kv .kv_left p {text-align:justify;}

#kv .gowebsite span {display:table; padding:12px 20px; font-size:20px; font-weight:bold; color:white; background:black; margin-top:100px; clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%); -webkit-clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);}
#kv .gowebsite {display:block; width:166px;
    filter: drop-shadow(-1px 3px 3px rgba(255,143,71,0.6))
    drop-shadow(-3px 1px 3px rgba(255,143,71,0.6))
    drop-shadow(1px -3px 3px rgba(255,143,71,0.6))
    drop-shadow(3px -1px 3px rgba(255,143,71,0.6));
}

#kv .kv_mb {display:none;}

#kv .cloud img {width:60%; height:auto; position:absolute; z-index:0;}
#kv .cloud img.cloud_a {position:absolute; bottom:0px; left:-50%;}
#kv .cloud img.cloud_b {position:absolute; bottom:0px; right:-50%;}

#level_1 {display:block; width:100%; position:relative; background:url(../images/kv_bg_pic_2.png) top center no-repeat; background-size:100% auto; padding:30px 0px;}

.level_con {display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; z-index:3; margin-bottom:20px;}

.lvl_mb {display:none;}
.lvl_info {width:50%; position:relative; box-sizing:border-box; padding:0px 20px;}
.lvl_img {width:50%; position:relative;}
.lvl_img img {display:block; width:100%;}

.lvl_1_anim {position:absolute; top:0; left:0; z-index:1; opacity:0;}

.lvl_title {font-size:36px; line-height:36px; color:white; font-weight:bold; letter-spacing:3px; position:relative; font-family:'Montserrat', sans-serif;}
.lvl_title::after {display:block; content:''; width:60px; height:6px; background:#ff8f47; position:absolute; bottom:-13px; left:0px;}
.lvl_sub {font-size:30px; line-height:42px; color:#ff8f47; font-weight:bold; margin:60px 0px 50px 0px;}
.lvl_p {text-align:justify;}
.lvl_p .hlt {color:#ff8f47; font-weight:bold;}

.level_con_b {margin-bottom:50px;}
.level_con_b .lvl_info {width:100%;}

.lvl_2_logo {position:absolute; top:0px; left:0px; z-index:1; opacity:0;}

.lvl_3_img {display:flex; flex-wrap:nowrap; justify-content:space-between; position:relative;}
.lvl_3_img .frame {width:30%; max-width:300px; margin:50px 1%; position:relative;}
.lvl_3_img .frame img {width:100%; height:auto; position:relative; z-index:1;}

.level_3_vdo {width:80%; position:absolute; top:53%; left:50%; transform:translate(-50%,-50%); z-index:0;}

.lvl_4_cover {position:absolute; top:0px; left:0px; z-index:2;}
.lvl_4_anim {display:block; width:62%; height:50%; position:absolute; top:47%; left:50.3%; transform:translate(-50%,-50%); z-index:1; overflow:hidden;}
.lvl_4_anim img {width:40%; height:auto; position:absolute; top:17%; /*left:49%;*/ left:120%;}

#end {padding:80px 0px 120px 0px; position:relative;}

.tr_cloud {position:absolute; top:20px; right:-100px;}

.end_title {font-size:36px; line-height:36px; color:#ff8f47; font-weight:bold; letter-spacing:3px; font-style:italic; margin:10px 0px 30px 0px;}

.effect {display:flex; flex:1; flex-wrap:nowrap; justify-content:flex-start; align-items:center; position:relative;}
.mgn {margin-top:60px;}

.circle {position:relative; width:160px; height:160px; background:#362e2b; border-radius:100%; margin:15px;}
.circle p {font-size:24px; line-height:30px; font-weight:bold; text-align:center; color:white;}
.circle p.big {font-size:40px; margin-top:10px;}
.circle p.big small {font-size:20px;}
.circle span {display:table; width:130px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.circle::after {display:block; content:''; width:100%; height:100%; border:4px solid #ff8f47; position:absolute; top:-4px; left:-4px; border-radius:100%;}

.caption {margin-left:20px;}
.caption p {font-size:20px; line-height:34px; color:#c4b497;}
.caption p font {border-bottom:1px solid #c4b497;}

.end_wel {font-size:24px; line-height:36px;}

.end_pd {position:absolute; right:0; bottom:0;}


.coffee_anim_1 {position:absolute; right:-100px; top:-150px; z-index:0;}
.coffee_anim_2 {position:absolute; left:-100px; bottom:-50px; z-index:0;}
.coffee_anim_3 {position:absolute; right:-30px; bottom:-150px; z-index:0;}
.coffee_anim_4 {position:absolute; left:-100px; top:300px; z-index:1;}
.coffee_anim_5 {position:absolute; left:-170px; bottom:70px; z-index:0;}
.coffee_anim_6 {position:absolute; right:-150px; top:70px; z-index:0;}
.coffee_anim_7 {position:absolute; left:-140px; bottom:-150px; z-index:0;}

.cloud_anim_1 {position:absolute; right:-170px; top:20px; z-index:0;}
.cloud_anim_2 {position:absolute; left:-270px; top:220px; z-index:0;}
.cloud_anim_3 {position:absolute; left:-160px; top:-50px; z-index:0;}




@media (max-width: 768px) {

    #kv {padding:30px 0px; background:url(../images/kv_mb_bg.png) bottom center no-repeat; background-size:cover;}
    #kv .cen1000 {flex-wrap:wrap;}
    #kv .kv_left {width:100%; margin-right:0;}
    #kv .kv_right {width:100%; margin-left:0;}
    #kv .kv_mb {display:flex; width:100%; margin-top:20px; flex-wrap:wrap;}
    #kv .kv_left p {display:none;}
    #kv .kv_left .gowebsite {display:none;}
    #kv #kv_vdo {max-width:32.36%;}

    #kv .kv_left img {margin:0px auto 20px auto;}
    #kv .kv_title {font-size:35px; line-height:50px; text-align:center;}
    #kv .kv_title::after {display:none;}
    #kv .kv_sub {font-size:24px; line-height:36px; text-align:center; margin:20px 0px;}

    #kv .kv_mb p {width:100%; font-size:15px; line-height:24px; text-align:justify;}
    #kv .gowebsite span {margin:0px;}
    #kv .gowebsite {margin:30px auto;}

    #level_1 {background:none;}

    .level_con {flex-wrap:wrap;}
    .lvl_mb {display:block;}
    .lvl_pc {display:none;}
    .lvl_info {width:100%; padding:0px; margin-bottom:15px;}
    .lvl_img {width:100%;}

    .lvl_title {font-size:30px; line-height:45px;}
    .lvl_title::after {bottom:-5px;}
    .lvl_sub {font-size:24px; line-height:36px; letter-spacing:0px; margin:20px 0px;}

    .lvl_3_img {flex-wrap:wrap; justify-content:center;}
    .lvl_3_img .frame {width:70%; margin:10px 0px;}

    #end {padding-bottom:0px; overflow:hidden;}

    .tr_cloud {display:none;}

    .end_title {font-size:30px; line-height:36px; text-align:center;}

    .effect {flex-wrap:wrap; justify-content:center; margin-bottom:15px;}
    .mgn {margin-top:30px;}

    .circle {width:130px; height:130px;}
    .circle p {font-size:18px; line-height:24px;}
    .circle p.big {font-size:30px;}
    .circle p.big small {font-size:16px;}

    .caption {margin-left:0px;}
    .caption p {font-size:16px; line-height:24px; text-align:center;}

    .end_wel {font-size:18px; line-height:24px; text-align:center;}

    .end_pd {position:relative; width:100%; height:auto; margin-top:20px; margin-bottom:-10px;}

    .coffee_anim_1 {width:20%; right:-15px; top:-50px;}
    .coffee_anim_3 {width:25%; bottom:-100px;}

}