/* BASIC css start */
/* 공통 */
#contentWrapper > div {margin-bottom:120px; letter-spacing:-0.3px;}
#contentWrapper > div .tit {font-size:32px; font-weight:700; margin-bottom:35px;}

/* sec01 */
.sec01{background:url(/design/whatson/img/brand/pc/sec01_bg.jpg); background-size:cover; padding:160px 0;}
.sec01 .wd_1330{display:flex; justify-content:space-between;}
.sec01 .txt_box h1{ font-size:64px; font-weight:700; color:#fff;}
.sec01 .txt_box h2{font-size:40px; font-weight:700; color:#FFCC33; line-height:48px;}
.sec01 .txt_box p{font-size:24px; font-weight:400; color:#fff; padding-top:12px;}
.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; color:#fff; line-height:63px;}

/* sec02 */
.sec02{padding:165px 0 197px; text-align:center; }
.sec02 h2{font-size:60px; font-weight:400; line-height:72px; color:#3B0073;}
.sec02 h2 strong{font-weight:700;}
.sec02 .img_box{margin:75px 0 81px;}
.sec02 .txt_box .title_t{font-size:48px; font-weight:700; color:#111; line-height:58px;}
.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:24px; font-weight:400; color:#5F5B5B; padding-top:15px; }


/* sec03 */
.sec03{background:url(/design/whatson/img/brand/pc/sec03_bg.jpg); background-size:cover; padding:239px 0 222px;}
.sec03 .wd_1330{position:relative;}
.sec03 .mark{position:absolute; top:-120px; left:-130px;}
.sec03 h1{font-size:55px; font-weight:700; color:#FFA435; line-height:66px;}
.sec03 h2{font-size:36px; font-weight:700; color:#fff; line-height:43px; padding:100px 0 50px;}
.sec03 p{font-size:24px; font-weight:400; color:#fff; line-height:43px; line-height:35px;}
.sec03 p span{font-weight:700; background:#FFA435; color:#fff; padding:0 2px;}

/* sec04 */
.sec04 {text-align:center; padding:40px 0;}

/* sec05 */
.sec05 {width:100%; background:#E7E6FF; padding:175px 0;}
.sec05 .wd_1330{position:relative; display:flex; justify-content:space-between;}
.sec05 .txt_box h2{font-size:50px; font-weight:700; color:#3B0073; padding-bottom:50px;}
.sec05 .txt_box p{font-size:24px; line-height:32px; color:#111;} 
.sec05 .txt_box span{position:relative; display:block; font-size:20px; font-weight:400; color:#5F5B5B; line-height:30px; padding:0 0 0 10px; margin-top:40px;}
.sec05 .txt_box span:before{content:'*'; font-size:20px;font-weight:400; color:#5F5B5B; position:absolute; top:2px; left:0;}

/* sec06 */
.sec06 {width:100%;  padding:175px 0;}
.sec06 .wd_1330{position:relative; display:flex; justify-content:space-between;}
.sec06 .txt_box{order:1;}
.sec06 .txt_box h2{font-size:50px; font-weight:700; color:#3B0073; padding-bottom:50px;}
.sec06 .txt_box p{font-size:24px; line-height:32px; color:#111;} 
.sec06 .img_box{order:2;}

/* sec07 */
.sec07 {width:100%; background:#E7E6FF; padding:175px 0;}
.sec07 .wd_1330{position:relative; display:flex; justify-content:space-between;}
.sec07 .txt_box h2{font-size:50px; font-weight:700; color:#3B0073; padding-bottom:50px;}
.sec07 .txt_box p{font-size:24px; line-height:32px; color:#111;} 

/* sec08 */
.sec08{padding:161px 0 66px; text-align:center;}
.sec08 h2{font-size:55px; font-weight:700; color:#3B0073; padding-bottom:18px;}
.sec08 p{font-size:24px; font-weight:300; color:#111; padding-bottom:60px;}
.sec08 ul{display:flex; flex-wrap:wrap; gap:37px;}
.sec08 li{width: calc(33.33% - 37px); border-radius:16px; 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; padding-top:132px; background: linear-gradient(180deg, #FFFFFF 0%, #FFE5FF 72.12%); min-height:1000px;}
.sec09_1 .title_box{text-align:center;}
.sec09_1 .title_box h2{font-size:36px; font-weight:700; color:#FFA435; line-height:43px; padding-bottom:14px;}
.sec09_1 .title_box h1{font-size:55px; font-weight:700; color:#3B0073; line-height:66px;}
.sec09_1 .cari_box{ margin-top:204px;}
.sec09_1 .cari_box .box01{display:flex; justify-content:space-between; align-items:center;}
.sec09_1 .cari_box .box01 .txt_box{width:915px;}
.sec09_1 .cari_box .box01 .txt_box ul{text-align:right;}
.sec09_1 .cari_box .box01 .txt_box li{display:inline-block;}
.sec09_1 .cari_box .box01 .txt_box li.y_bg{position:relative; font-size:19px; font-weight:600; color:#111; line-height:40px; background:#FFCC33; padding:0 16px 0 16px; border-radius:3px; margin-bottom:10px;}
.sec09_1 .cari_box .box01 .txt_box li.y_bg:after{
    position: absolute;
    top: 4px;
    right: -15px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid #FFCC33;
    content: "";
    transform: rotate(170deg);
}
.sec09_1 .cari_box .box01 .txt_box li.w_bg{position:relative; font-size:18px; font-weight:400; color:#3B0073; line-height:26px; background:#fff; padding:12px 16px 11px 16px; border-radius:3px; box-shadow: 1.5px 3px 5.92px 0px rgba(0,0,0,0.25); margin-bottom:22px; text-align:left;
    display:flex; justify-content:space-between;
} 
.sec09_1 .cari_box .box01 .txt_box li.w_bg .a_title{width:2%;}
.sec09_1 .cari_box .box01 .txt_box li.w_bg .a_ans{width:98%;}
.sec09_1 .cari_box .box01 .img_box{order:1; text-align:center;}
.sec09_1 .cari_box .box01 .img_box span{display:inline-block; font-size:24px; font-weight:700; line-height:47px; border-radius:75px; background:#3B0073; padding:0 33px; color:#fff;}
.sec09_1 .cari_box .box01 .img_box p{font-size:28px; font-weight:700; color:#111; padding-top:24px;}




.sec09_1 .cari_box .box02{display:flex; justify-content:space-between; align-items:center; margin-top:130px;}
.sec09_1 .cari_box .box02 .txt_box{width:915px; order:2;}
.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; font-size:19px; font-weight:600; color:#111; line-height:40px; background:#FFA435; padding:0 16px 0 16px; border-radius:3px; margin-bottom:10px; 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: -15px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-bottom: 20px solid #FFA435;
    content: "";
    transform: rotate(272deg);
}
.sec09_1 .cari_box .box02 .txt_box li.w_bg{position:relative; font-size:18px; font-weight:400; color:#3B0073; line-height:26px; background:#fff; padding:12px 16px 11px 16px; border-radius:3px; box-shadow: 1.5px 3px 5.92px 0px rgba(0,0,0,0.25); margin-bottom:22px;
    display:flex; justify-content:space-between;
} 

.sec09_1 .cari_box .box02 .img_box{ text-align:center;}
.sec09_1 .cari_box .box02 .img_box span{display:inline-block; font-size:24px; font-weight:700; line-height:47px; border-radius:75px; background:#3B0073; padding:0 33px; color:#fff; }
.sec09_1 .cari_box .box02 .img_box p{font-size:28px; font-weight:700; color:#111; padding-top:24px;}
.sec09_1 .cari_box .box02 .txt_box li.w_bg .a_title{width:2%;}
.sec09_1 .cari_box .box02 .txt_box li.w_bg .a_ans{width:98%;}



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

.sec09_2 .bubble_msg{margin-top:109px;}
.sec09_2 .bubble_msg ul{display:flex; flex-direction:column; align-items:center;}
.sec09_2 .bubble_msg li{position:relative; padding:40px; text-align:left; width:890px;  border-radius:18px; box-shadow:1.5px 3px 20px 0px rgba(0, 0, 0, 0.25);}
.sec09_2 .bubble_msg li.left_b{margin-left:-165px;}
.sec09_2 .bubble_msg li.right_b{margin-right:-165px;}
.sec09_2 .bubble_msg li h2{font-size:30px; font-weight:700; color:#111;}
.sec09_2 .bubble_msg li p{font-size:22px; font-weight:400; line-height:32px; 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:24px; font-weight:500; color:#898989; text-align:right; }
.sec09_2 .bubble_msg li:after{
    position: absolute;
    top: 16px;
    left: -85px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-right: 95px solid transparent;
    
    content: "";
    transform: rotate(185deg);
}



.sec09_2 .bubble_msg li:first-child{background:#E3D3FF;}
.sec09_2 .bubble_msg li:first-child:after{border-bottom: 95px solid #E3D3FF;}
.sec09_2 .bubble_msg li:first-child .mark{position:absolute; top:-50px; left:26px;}

.sec09_2 .bubble_msg li:nth-child(2){background:#FFEE98; margin-top:-20px;}
.sec09_2 .bubble_msg li:nth-child(2):after{border-bottom: 95px solid #FFEE98; right: -85px; left: auto; transform: rotate(82deg);}
.sec09_2 .bubble_msg li:nth-child(2) .mark{position:absolute; top:-45px; right:26px;}

.sec09_2 .bubble_msg li:nth-child(3){background:#D3E7FF; margin-top:-20px; margin-left:-300px;}
.sec09_2 .bubble_msg li:nth-child(3):after{border-bottom: 95px solid #D3E7FF;}
.sec09_2 .bubble_msg li:nth-child(3) .mark{position:absolute; top:-50px; left:26px;}

.sec09_2 .bubble_msg li:nth-child(4){background:#FFD3D3; margin-top:-20px; margin-left: -160px;}
.sec09_2 .bubble_msg li:nth-child(4):after{border-bottom: 95px solid #FFD3D3; right: -85px; left: auto; transform: rotate(82deg);}
.sec09_2 .bubble_msg li:nth-child(4) .mark{position:absolute; top:-40px; right:26px;}

.sec09_2 .bubble_msg li:last-child{background:#E1FFD3; margin-top:-20px; margin-left:-180px;}
.sec09_2 .bubble_msg li:last-child:after{border-bottom: 95px solid #E1FFD3;}
.sec09_2 .bubble_msg li:last-child .mark{position:absolute; top:-50px; left:26px;}


/* BASIC css end */