/* BASIC css start */
#footer_top{margin-top:0!important;}

/* sec01 */
.sec01{position:relative; background:url(/design/whatson/mo_img/brand/sec01_bg_3.png); background-size:cover; padding:77px 20px; height:487px;}
.sec01 .txt_box h1{font-size:28px; font-weight:700; color:#fff;  padding-top:5px; line-height:35px;}
.sec01 .txt_box h2{font-size:20px; font-weight:700; color:#FFCC33; line-height:24px; }
.sec01 .txt_box p{font-size:14px; font-weight:400; color:#fff; padding-top:5px;}
.sec01 .txt_box span{display:inline-block; padding:0 57px;  border:1px solid #fff; border-radius:22px; margin-top:30px;}
.sec01 .txt_box span a{display:block; font-size:17px; font-weight:500; color:#fff; line-height:47px;}
.sec01 .img_box{position:absolute; width:100%; left:0; bottom:0;}
.sec01 .img_box img{width:100%;}


/* sec02 */
.sec02{padding:50px 20px 62px; text-align:center; }
.sec02 h2{font-size:28px; font-weight:400; line-height:35px; color:#3B0073;}
.sec02 h2 strong{font-weight:700;}
.sec02 .img_box{margin:20px 0 20px;}
.sec02 .img_box img{width:100%;}
.sec02 .txt_box .title_t{font-size:22px; font-weight:700; color:#111; line-height:26px;}
.sec02 .txt_box .title_t span:first-child{color:#FF3535}
.sec02 .txt_box .title_t span:nth-child(2){color:#FFA435}
.sec02 .txt_box .title_t span:nth-child(3){color:#6DD130}
.sec02 .txt_box .title_t span:nth-child(4){color:#35B2FF}
.sec02 .txt_box .title_t span:last-child{color:#B93CF2}
.sec02 .txt_box p{font-size:14px; font-weight:400; color:#5F5B5B; padding-top:12px; line-height:18px; }


/* sec03 */
.sec03{background:url(/design/whatson/img/brand/pc/sec03_bg.jpg); background-size:cover; background-position: 80% 70%; padding:70px 20px 50px;}
.sec03 .wd_1330{position:relative;}
.sec03 .mark{position:absolute; top:-55px; left:0;}
.sec03 .mark img{height:43px;}
.sec03 h1{font-size:28px; font-weight:700; color:#FFA435; line-height:35px;}
.sec03 h2{font-size:16px; font-weight:700; color:#fff; line-height:19px; padding:20px 0 20px;}
.sec03 .box_txt .box{background:rgba(183, 151, 255, 0.2); padding:22px 28px; margin-bottom:12px; border-radius:10px; }
.sec03 .box_txt .box:last-child{margin-bottom:0;}
.sec03 .box_txt .box h3{font-size:16px; font-weight:700; line-height:20px; color:#fff;}
.sec03 .box_txt .box h3 span{font-weight:700; background:#FFA435; color:#fff; padding:0 2px;}
.sec03 .box_txt .box p{font-size:14px; color:#fff; font-weight:300; line-height:16px; padding-top:10px;}
.sec03 .box_txt .box p span{font-weight:700; background:#FFA435; color:#fff; padding:0 2px;}

/* sec04 */
.sec04 {text-align:center; padding:0;}
.sec04 img{width:100%;}

/* sec05 */
.sec05 {width:100%;  padding:0 20px;}
.sec05 .wd_1330{position:relative;}
.sec05 .img_box{height:200px; background:url(/design/whatson/mo_img/brand/sec05_img.png); background-size:cover; background-position: center; border-radius:10px; overflow:hidden;}
.sec05 .img_box img{width:100%;}
.sec05 .txt_box{background:#F2F1FF; padding:15px 19px 19px; margin-top:15px; border-radius:5px;}
.sec05 .txt_box h2{display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:700; color:#3B0073; }
.sec05 .txt_box h2 span{display:flex; align-items:center; justify-content:center;}
.sec05 .txt_box.on h2 span{transform: rotate(180deg);}
.sec05 .txt_box.on p{display:block;}
.sec05 .txt_box p{display:none; font-size:14px; line-height:20px; color:#111; font-weight:400; background:#fff; padding:15px 17px; margin-top:15px;} 


/* sec06 */
.sec06 {width:100%;  padding:0 20px; margin-top:30px;}
.sec06 .wd_1330{position:relative;} 
.sec06 .img_box{height:200px; background:url(/design/whatson/mo_img/brand/sec06_img.png); background-size:cover; background-position: center; border-radius:5px; overflow:hidden;}
.sec06 .img_box img{width:100%;}
.sec06 .txt_box{background:#F2F1FF; padding:15px 19px 19px; margin-top:15px; border-radius:5px;}
.sec06 .txt_box h2{display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:700; color:#3B0073; }
.sec06 .txt_box h2 span{display:flex; align-items:center; justify-content:center;}
.sec06 .txt_box.on h2 span{transform: rotate(180deg);}
.sec06 .txt_box.on p{display:block;}
.sec06 .txt_box p{display:none; font-size:14px; line-height:20px; color:#111; font-weight:400; background:#fff; padding:15px 17px; margin-top:15px;} 

/* sec07 */
.sec07 {width:100%;  padding:0 20px; margin-top:30px;}
.sec07 .wd_1330{position:relative;}
.sec07 .img_box{height:200px; background:url(/design/whatson/mo_img/brand/sec07_img.png); background-size:cover; background-position: center; border-radius:5px; overflow:hidden;}
.sec07 .img_box img{width:100%;}
.sec07 .txt_box{background:#F2F1FF; padding:15px 19px 19px; margin-top:15px; border-radius:5px;}
.sec07 .txt_box h2{display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:700; color:#3B0073; }
.sec07 .txt_box h2 span{display:flex; align-items:center; justify-content:center;}
.sec07 .txt_box.on h2 span{transform: rotate(180deg);}
.sec07 .txt_box.on p{display:block;}
.sec07 .txt_box p{display:none; font-size:14px; line-height:20px; color:#111; font-weight:400; background:#fff; padding:15px 17px; margin-top:15px;} 

/* sec08 */
.sec08{padding:50px 20px 50px;}
.sec08 h2{font-size:28px; font-weight:700; color:#3B0073; line-height:32px; padding-bottom:20px;}
.sec08 p{font-size:12px; font-weight:300; color:#111; padding-bottom:15px;}
/*.sec08 ul{display:flex; flex-wrap:wrap; gap:37px;}*/
.sec08 li{width: 100%; border-radius:10px; overflow:hidden;}
.sec08 li img{width:100%;}
.sec08 .video{padding:56.25% 0 0 0;position:relative;}
.sec08 .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

/* sec09 */
.sec09_1{position:relative; background: /*linear-gradient(180deg, #FFFFFF 0%, #FFE5FF 72.12%)*/ url(/design/whatson/mo_img/brand/sec09_bg2.png);  background-size: 100% 100%; padding-bottom:130px;}
.sec09_1 .title_box{text-align:center;}
.sec09_1 .title_box h2{font-size:16px; font-weight:700; color:#FFA435; line-height:19px; padding-bottom:5px;}
.sec09_1 .title_box h1{font-size:28px; font-weight:700; color:#3B0073; line-height:32px;}
.sec09_1 .cari_box{ margin-top:27px;}
.sec09_1 .cari_box .box01{/*display:flex; justify-content:space-between; align-items:center;*/}
.sec09_1 .cari_box .box01 .txt_box{/*width:915px;*/ padding:0 20px;}
.sec09_1 .cari_box .box01 .txt_box ul{text-align:left;}
.sec09_1 .cari_box .box01 .txt_box li{display:inline-block;}
.sec09_1 .cari_box .box01 .txt_box li.y_bg{position:relative; width:100%; font-size:14px; font-weight:600; color:#111; line-height:26px; background:#FFCC33; padding:0 7px; border-radius:1px; margin-bottom:5px; /*box-shadow: 1.5px 3px 5.92px 0px rgba(0,0,0,0.25);*/}
.sec09_1 .cari_box .box01 .txt_box li.y_bg:after{
    position: absolute;
    top: 4px;
    right: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #FFCC33;
    content: "";
    transform: rotate(170deg);
}
.sec09_1 .cari_box .box01 .txt_box li.w_bg{display:flex; position:relative; font-size:14px; font-weight:400; color:#3B0073; line-height:20px; background:#fff; padding:12px 7px; border-radius:3px; box-shadow: 1.5px 3px 5.92px 0px rgba(0,0,0,0.25); margin-bottom:12px; word-break: keep-all;} 
.sec09_1 .cari_box .box01 .txt_box li.w_bg p b{background:rgba(246, 44, 118, 0.26);}


.sec09_1 .cari_box .box01 .img_box{order:1; text-align:center;}
.sec09_1 .cari_box .box01 .img_box .cari{width:40%; margin:0 auto;}
.sec09_1 .cari_box .box01 .img_box .cari img{width:100%;}
.sec09_1 .cari_box .box01 .img_box span{display:inline-block; font-size:14px; font-weight:700; line-height:24px; border-radius:30px; background:#3B0073; padding:0 11px; color:#fff;}
.sec09_1 .cari_box .box01 .img_box p{font-size:14px; font-weight:700; color:#111; padding:6px 0 20px; line-height:18px;}




.sec09_1 .cari_box .box02{/*display:flex; justify-content:space-between; align-items:center; margin-top:130px;*/ margin-top:30px;}
.sec09_1 .cari_box .box02 .txt_box{padding:0 20px 100px;}
.sec09_1 .cari_box .box02 .txt_box ul{text-align:left;}
.sec09_1 .cari_box .box02 .txt_box li{display:inline-block;}
.sec09_1 .cari_box .box02 .txt_box li.y_bg{position:relative; width:100%; font-size:14px; font-weight:600; color:#111; line-height:26px; background:#FFA435; padding:0 7px; border-radius:1px; margin-bottom:5px; /*box-shadow: 1.5px 3px 5.92px 0px rgba(0,0,0,0.25);*/}
.sec09_1 .cari_box .box02 .txt_box li.y_bg:after{
    position: absolute;
    top: 4px;
    left: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #FFA435;
    content: "";
    transform: rotate(267deg);
}
.sec09_1 .cari_box .box02 .txt_box li.w_bg{display:flex; position:relative; font-size:14px; font-weight:400; color:#3B0073; line-height:20px; background:#fff; padding:12px 7px; border-radius:3px; box-shadow: 1.5px 3px 5.92px 0px rgba(0,0,0,0.25); margin-bottom:12px; word-break: keep-all;} 
.sec09_1 .cari_box .box02 .txt_box li.w_bg p b{background:rgba(246, 44, 118, 0.26);}

.sec09_1 .cari_box .box02 .img_box{ text-align:center;}
.sec09_1 .cari_box .box02 .img_box .cari{width:40%; margin:0 auto;}
.sec09_1 .cari_box .box02 .img_box .cari img{width:100%;}
.sec09_1 .cari_box .box02 .img_box span{display:inline-block; font-size:14px; font-weight:700; line-height:24px; border-radius:30px; background:#3B0073; padding:0 11px; color:#fff; }
.sec09_1 .cari_box .box02 .img_box p{font-size:14px; font-weight:700; color:#111; padding:6px 0 20px; line-height:18px;}

.sec09_2{position:relative; padding-bottom:50px; text-align:center;  margin-top:-180px;}
.sec09_2 .cir_bg{display:none; background:url(/design/whatson/img/brand/pc/sec09_round_bg.png); background-size:cover; height:200px; width:100%; position:absolute; top:-15%; left:0; z-index:-1; }
.sec09_2 .video_box{margin:0 auto 0; width:100%;  padding:0 20px;}
.sec09_2 .video{padding:56.25% 0 0 0;position:relative; border-radius:10px; overflow:hidden;}
.sec09_2 .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

.sec09_2 .bubble_msg{margin-top:40px;}
.sec09_2 .bubble_msg ul{display:flex; flex-direction:column; align-items:center;}
.sec09_2 .bubble_msg li{position:relative; padding:20px; text-align:left; width:60%;  border-radius:5px; box-shadow:1.5px 3px 20px 0px rgba(0, 0, 0, 0.25);}
.sec09_2 .bubble_msg li.left_b{}
.sec09_2 .bubble_msg li.right_b{}
.sec09_2 .bubble_msg li h2{font-size:14px; font-weight:600; color:#111;}
.sec09_2 .bubble_msg li p{font-size:11px; font-weight:400; padding-top:20px;}
.sec09_2 .bubble_msg li p strong{font-size:24px; font-weight:700;}
.sec09_2 .bubble_msg li span{display:block; font-size:11px; font-weight:500; color:#898989; text-align:left;   padding-top:10px;}
.sec09_2 .bubble_msg li:after{
    position: absolute;
    top: 10px;
    left: -20px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-right: 24px solid transparent;
    
    content: "";
    transform: rotate(185deg);
}

.sec09_2 .bubble_msg li .mark img{height:25px;}

.sec09_2 .bubble_msg li:first-child{background:#E3D3FF;}
.sec09_2 .bubble_msg li:first-child:after{border-bottom: 24px solid #E3D3FF;}
.sec09_2 .bubble_msg li:first-child .mark{position:absolute; top:-13px; right:8px;}

.sec09_2 .bubble_msg li:nth-child(2){background:#FFEE98; margin-top:-10px; margin-right:-60px;}
.sec09_2 .bubble_msg li:nth-child(2):after{border-bottom: 24px solid #FFEE98; right: -20px; left: auto; transform: rotate(82deg);}
.sec09_2 .bubble_msg li:nth-child(2) .mark{position:absolute; top:-13px; right:8px;}

.sec09_2 .bubble_msg li:nth-child(3){background:#D3E7FF; margin-top:-10px; /*margin-left:-300px;*/}
.sec09_2 .bubble_msg li:nth-child(3):after{border-bottom: 24px solid #D3E7FF;}
.sec09_2 .bubble_msg li:nth-child(3) .mark{position:absolute; top:-13px; left:8px;}

.sec09_2 .bubble_msg li:nth-child(4){background:#FFD3D3; margin-top:-10px; margin-right:-60px;}
.sec09_2 .bubble_msg li:nth-child(4):after{border-bottom: 24px solid #FFD3D3; right: -20px; left: auto; transform: rotate(82deg);}
.sec09_2 .bubble_msg li:nth-child(4) .mark{position:absolute; top:-13px; right:8px;}

.sec09_2 .bubble_msg li:last-child{background:#E1FFD3; margin-top:-10px; }
.sec09_2 .bubble_msg li:last-child:after{border-bottom: 24px solid #E1FFD3;}
.sec09_2 .bubble_msg li:last-child .mark{position:absolute; top:-13px; left:26px;}

#footer{margin: 0 auto 0!important;}
/* BASIC css end */