/* BASIC css start */
.sec01{position:relative; background:url(/design/whatson/img/kit/pc/sec01_bg.png); background-size:cover; }
.sec01 .wd_1330{position:relative; padding:170px 0;}
.sec01 .txt_box h2{font-size:40px; font-weight:700; color:#FFCC33; line-height:48px;}
.sec01 .txt_box h1{font-size:64px; font-weight:700; color:#fff; line-height:70px; padding:24px 0 12px; }
.sec01 .txt_box p{font-size:22px; font-weight:400; color:#fff; }
.sec01 .txt_box span{display:inline-block; padding:0 72px; border:1px solid #fff; border-radius:46px; margin-top:120px;}
.sec01 .txt_box span a{display:block; font-size:26px; font-weight:500; line-height:66px; color:#fff; }
.sec01 .img_box{position:absolute; right:0; bottom:-120px;}

.sec02{position:relative; padding:267px 0 0; text-align:center;}
.sec02 .title_box h2{font-size:55px; font-weight:700; line-height:66px; color:#3B0073;}
.sec02 .title_box p{font-size:24px; font-weight:300; color:#111; padding-top:12px; margin-bottom:60px; line-height:29px;}
.sec02 .cont_bg{background:url(/design/whatson/img/kit/pc/sec02_bg_1.png); background-size:cover; position:absolute; height:180%; left:0; width:100%; bottom:0; z-index:-1;}
.sec02 .cont_box{position:relative; padding-bottom: 116px; margin-top:47px; }
.sec02 .cont_box ul{display:flex;  gap:25px; }
.sec02 .cont_box li{width: calc(25% - 12.5px); padding:28px; background:#fff; border-radius:16px;}
.sec02 .cont_box li:hover{background:#E7E6FF;}
.sec02 .cont_box li .txt_box{margin-top:20px; text-align:left;}
.sec02 .cont_box li .txt_box h2{font-size:23px; font-weight:700; color:#3B0073; padding-bottom:10px; }
.sec02 .cont_box li .txt_box p{font-size:13px; font-weight:400; line-height:19px; color:#111;}
.sec02 .plus_btn{position:absolute; bottom:-50px; left:50%; transform: translateX(-50%); width:246px; height:246px; background:#3B0073; border-radius:100%; display: flex; align-items: center; justify-content: center; padding-top: 67px; z-index: -1; }

.sec03{position:relative; background:url(/design/whatson/img/kit/pc/sec03_bg.png); background-size:cover; padding:220px 0 123px; z-index:-2; text-align:center;}
.sec03 .video_wrap{width:1058px; margin:0 auto; background:#B36AF8; border-radius:20px; padding:20px; }
.sec03 .video{padding:56.25% 0 0 0;position:relative; border-radius:20px; overflow:hidden;}
.sec03 .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.sec03 .txt_box{margin-top:83px;}
.sec03 .txt_box h2{font-size:40px; font-weight:800; line-height:48px; color:#3B0073;}
.sec03 .txt_box p{font-size:26px; font-weight:500; color:#3B0073; padding-top:20px;}

.sec04{padding:123px 0 140px; background:#E7E6FF;}
.sec04 .title_box{text-align:center;}
.sec04 .title_box h2{font-size:55px; font-weight:700; line-height:66px; color:#3B0073;}
.sec04 .title_box p{font-size:24px; font-weight:300;  color:#111; padding-top:12px; margin-bottom:60px; line-height:29px;}
.sec04 .cont_box li{position:relative; margin-bottom:46px; }
.sec04 .cont_box li .bubble_box{position:absolute; top:48px; right:0; display:flex; align-items:center; flex-direction: column; justify-content:center; width:648px; height:300px; background:#3B0073; border-radius:17px; text-align:center; box-shadow: 1.5px 3px 20px 0px rgba(0, 0, 0, 0.25); }
.sec04 .cont_box li .bubble_box:after{
    position: absolute;
    top: 16px;
    left: -85px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-right: 95px solid transparent;
    border-bottom: 74px solid #3B0073;
    content: "";
    transform: rotate(185deg);
}



.sec04 .cont_box li .bubble_box h1{font-size:28px; font-weight:700; width:272px; line-height:71px; background:#FFA435; border-radius:100px; color:#fff; position:absolute; top:-36px; right:36px; text-align:center;}
.sec04 .cont_box li .bubble_box h2{font-size:36px; font-weight:700; line-height:43px; color:#fff; padding-bottom:20px;}
.sec04 .cont_box li .bubble_box p{font-size:24px; font-weight:400; color:#fff; line-height:34px; }
.sec04 .cont_box li .bubble_box p strong{font-weight:700; background:rgba(255, 164, 53, 0.7)}
.sec04 .cont_box .left_box{text-align:left;}
.sec04 .cont_box .right_box{text-align:right;}
.sec04 .cont_box .right_box .bubble_box {left:0;}
.sec04 .cont_box .right_box .bubble_box h1{left:36px;}
.sec04 .cont_box .right_box .bubble_box:after{border-bottom: 95px solid #3B0073;
    right: -85px;
    left: auto;
    transform: rotate(82deg);}
    
.sec05{position:relative; padding:123px 0; text-align:left;}
.sec05 .title_box h2{font-size:55px; font-weight:700; line-height:66px; color:#3B0073;}
.sec05 .title_box p{font-size:24px; font-weight:300; color:#111; padding-top:12px; margin-bottom:60px; line-height:29px;}    
.sec05 .cont_box{display:flex;}
.sec05 .cont_box .title{display:inline-block; font-size:18px; font-weight:700; color:#fff; padding:0 25px; line-height:37px; border-radius:28px;}    
.sec05 .cont_box .sub_title{padding-top:15px; padding-left:14px;}
.sec05 .cont_box .sub_title h2{font-size:25px; font-weight:700; color:#3B0073; padding-bottom:5px; line-height:30px;}
.sec05 .cont_box .sub_title p{font-size:15px; font-weight:400; line-height:20px; color:#3B0073;}
.sec05 .cont_box .stand{position:relative; width:652px; background:#E3D3FF; border-radius:16px 0 0 16px; padding:33px 30px 46px 25px; box-sizing:border-box;}
.sec05 .cont_box .stand .title{background:#3B0073;}
.sec05 .cont_box .stand .big_img{position:absolute; right:0; bottom:0;}
.sec05 .cont_box .x2box{padding:21px 10px 21px 10px; background:rgba(255, 255, 255, 0.8); border-radius:19px; box-sizing:border-box; margin-top:10px; margin-left:14px;}
.sec05 .cont_box .x2box ul{display:flex; flex-wrap:wrap;}
.sec05 .cont_box .x2box li{position:relative; width:50%; border-right:1px solid #D9D9D9; border-bottom:1px solid #D9D9D9; padding:20px 0 13px 20px; box-sizing:border-box;}
.sec05 .cont_box .x2box li:nth-child(2n){border-right:0;}
.sec05 .cont_box .x2box li:nth-child(3){border-bottom:0;}
.sec05 .cont_box .x2box li:nth-child(4){border-bottom:0;}
.sec05 .cont_box .x2box h2{font-size:16px; font-weight:700; line-height:20px; color:#3B0073; padding-bottom:3px;}
.sec05 .cont_box .x2box p{font-size:11px; line-height:15px; font-weight:500; color:#5F5B5B;}
.sec05 .cont_box .x2box li img{position:absolute; top:50%; right:0; transform: translateY(-50%);}
.sec05 .cont_box .x2box li:nth-child(2) img{padding-left:15px;}
.sec05 .cont_box .x2box li:nth-child(4) img{padding-left:15px;}
.sec05 .cont_box .stand .subscribe_btn{padding-top:145px; margin-left:14px;}
.sec05 .cont_box .subscribe_btn{text-align:center;}
.sec05 .cont_box .subscribe_btn a{display:block; font-size:15px; font-weight:700; color:#3B0073; line-height:43px; width:103px; background:#fff; border-radius:100px;  }


.sec05 .cont_box .premium{position:relative; width:338px; background:#B93CF2; border-radius:0; padding:33px 30px 46px 25px; box-sizing:border-box;}
.sec05 .cont_box .premium .title{background:#FFA435;}
.sec05 .cont_box .premium .big_img{position:absolute; left:0; bottom:0;}
.sec05 .cont_box .premium .sub_title h2{font-size:25px; font-weight:700; color:#fff; padding-bottom:5px; line-height:30px;}
.sec05 .cont_box .premium .sub_title p{font-size:15px; font-weight:400; line-height:20px; color:#fff;}
.sec05 .cont_box .premium .subscribe_btn{position:absolute; bottom:46px; right:24px;}

.sec05 .cont_box .sp_premium{position:relative; width:338px; background:#3B0073; border-radius:0 16px 16px 0; padding:33px 30px 46px 25px; box-sizing:border-box; }
.sec05 .cont_box .sp_premium .title{background:#FF3535;}
.sec05 .cont_box .sp_premium .big_img{position:absolute; left:0; bottom:0;}
.sec05 .cont_box .sp_premium .sub_title h2{font-size:25px; font-weight:700; color:#fff; padding-bottom:5px; line-height:30px;}
.sec05 .cont_box .sp_premium .sub_title p{font-size:15px; font-weight:400; line-height:20px; color:#fff;}
.sec05 .cont_box .sp_premium .subscribe_btn{position:absolute; bottom:46px; right:24px;}



.sec06{position:relative; padding:86px 0 113px; text-align:left; background:#FFE5FF;}
.sec06 .title_box h2{font-size:55px; font-weight:700; line-height:66px; color:#3B0073;}
.sec06 .title_box p{font-size:24px; font-weight:300; color:#111; padding-top:12px; margin-bottom:60px; line-height:29px;}
.sec06 .cont_box ul{display:flex; gap:27px}
.sec06 .cont_box li{width: calc(50% - 27px); background:#fff; border-radius:16px; padding:36px 42px; box-sizing:border-box; box-shadow: 6.4px 6.4px 10.08px 0px rgba(0, 0, 0, 0.25);}
.sec06 .cont_box li .title h2{display:inline-block; color:#fff; font-size:20px; font-weight:600; line-height:30px; padding:0 14px; border-radius:16px; background:#2CAD35; margin-bottom:15px; }
.sec06 .cont_box li .title p{font-size:15px; line-height:26px; color:#000; }
.sec06 .cont_box li .sub_txt{padding-top:90px;}
.sec06 .cont_box li .sub_txt h2{font-size:16px; font-weight:700; line-height:30px; color:#2CAD35;}
.sec06 .cont_box li .sub_txt p{font-size:14px; font-weight:400; line-height:26px; color:#000;}

.sec06 .cont_box li .sub_txt2{padding-top:22px;}
.sec06 .cont_box li .sub_txt2 h2{font-size:16px; font-weight:700; line-height:30px; color:#2CAD35;}
.sec06 .cont_box li .sub_txt2 p{font-size:13px; font-weight:400; line-height:20 px; color:#000;}

.sec06 .cont_box li:nth-child(2) .title h2{background:#FFA435;}
.sec06 .cont_box li:nth-child(2) .sub_txt h2{color:#FFA435}
.sec06 .cont_box li:nth-child(2) .sub_txt2 h2{color:#FFA435}

.sec06 .cont_box li:last-child .title h2{background:#FF3535;}
.sec06 .cont_box li:last-child .sub_txt h2{color:#FF3535}
.sec06 .cont_box li:last-child .sub_txt2 h2{color:#FF3535}


.sec07{position:relative; padding:86px 0 169px; text-align:left; }
.sec07 .title_box h2{font-size:55px; font-weight:700; line-height:66px; color:#3B0073;}
.sec07 .title_box p{font-size:24px; font-weight:300; color:#111; padding-top:12px; margin-bottom:60px; line-height:29px; margin-bottom:36px;}
.sec07 .title_box span a{display:inline-block; font-size:22px; font-weight:700; color:#fff; padding:0 25px; line-height:50px; border-radius:45px; background:#FFA435;}    
.sec07 .cont_box{margin-top:84px;}
.sec07 .cont_box ul{display:flex; gap:24px;}
.sec07 .cont_box li{position:relative; width: calc(50% - 24px);  padding:32px; border-radius:16px;}
.sec07 .cont_box li .subscribe{position:absolute; top:46px; right:36px; font-size:16px; font-weight:600; line-height:20px; color:#000;  }
.sec07 .cont_box li.month{background:#E3D3FF; }
.sec07 .cont_box .r_title{display:inline-block; font-size:26px; font-weight:700;  padding:0 37px; line-height:48px; border-radius:24px; }
.sec07 .cont_box .prce_t{padding:38px 0 75px;}
.sec07 .cont_box .prce_t p{font-size:21px; font-weight:700; line-height:26px; color:#FF3535;}
.sec07 .cont_box .prce_t h2{display:flex; font-size:37px; font-weight:700; align-items: baseline; line-height:60px;}
.sec07 .cont_box .prce_t h2 b{font-size:33px; font-weight:700; padding-right:5px;}
.sec07 .cont_box .prce_t h3{font-size:29px; font-weight:300; color:#A6A6A6;  text-decoration: line-through;}
.sec07 .cont_box .grade{position:absolute; bottom:32px; left:32px; width:100%;}
.sec07 .cont_box .grade ul{gap:3px;}
.sec07 .cont_box .grade li{ display:inline-block; width:auto; font-size:13px; font-weight:700; color:#3B0073; padding:0 18px; line-height:27px; border-radius:21px; background:#fff;}
.sec07 .cont_box .sub_msg{position:absolute; bottom:70px; color:#DFDFDF; font-size:11px; font-weight:400;}
.sec07 .cont_box li.month .r_title{background:#3B0073; color:#fff;}
.sec07 .cont_box li.month .prce_t p{}
.sec07 .cont_box li.month .prce_t h2{color:#3B0073;}
.sec07 .cont_box li.year{background:#3B0073;}
.sec07 .cont_box li.year .r_title{background:#fff; color:#3B0073;}
.sec07 .cont_box li.year .prce_t h2{color:#fff;}
.sec07 .cont_box li.year .grade li:nth-child(2){background:#FFA435}
.sec07 .cont_box li.year .grade li:last-child{background:#FF3535}
.sec07 .cont_box li.year .subscribe{color:#fff;}

.sec08{position:relative; padding:0 0 113px; text-align:left; }
.sec08 .title_box h2{font-size:55px; font-weight:700; line-height:66px; color:#3B0073;}
.sec08 .title_box p{font-size:24px; font-weight:300; color:#111; padding-top:12px; margin-bottom:60px; line-height:29px; margin-bottom:47px;}
.sec08 .cont_box{background:#FFFFCE; width:1056px; margin:0 auto; padding:60px 95px 68px 107px; display:flex; justify-content:space-between; border-radius:20px;}
.sec08 .cont_box .txt_box h2{font-size:40px; font-weight:700; line-height:48px; color:#000;}
.sec08 .cont_box .txt_box p{padding-top:12px; font-size:20px; font-weight:400; color:#000;}
.sec08 .cont_box .txt_box span a{display:inline-block; font-size:22px; font-weight:700; color:#fff; padding:0 32px; line-height:50px; border-radius:45px; background:#FFA435; margin-top:64px;}
.sec08 .cont_box .img_box p{font-size:14px; font-weight:400; line-height:17px; color:#999; text-align:right; padding-top:7px; }

/* BASIC css end */