body{width: 100%; height: 100%; margin: 0px; padding: 0px; }
        .middle{ width: 100%; height: 100%;}
        .main_box{background-color: #ffffff; width: 88%; height: fit-content; margin: 0 auto; border-radius: 10px; box-shadow: 0px 7px 5px 3px rgba(0, 0, 0, 0.1) ; display: flex; flex-wrap: wrap; padding: 35px 0 35px 0; align-content: flex-start; margin-top: 100px;}        
        .space{width: 100%; height: 50px;}
        .space_1{width: 100%; height: 170px; }
        .space_2{width: 100%; height: 170px; }

        .top_bar{width: 100%; height: 200px; }
        .top_bar3{width: 100%; height: 200px; position: fixed; top: 0; display: flex; z-index: 32;}
        .top_bar2{width: 100%; height: 155px; position: fixed; top: 0; display: flex; z-index: 31;}
                
        .logo{background-image:url("/images/sh_logo_2.png"); width: auto; height: 160px; background-size: auto 100%; background-position: center; background-repeat: no-repeat; }
        .logo_1{background:url("/images/sh_logo_2.png");  height: 160px; width: 100%; position: fixed; top: 50px ; z-index:33; background-size: auto 100%; background-position: center; background-repeat: no-repeat;}
        .logo_3{background:url("/images/sh_logo.png");  height: 130px; width: 100%; position: fixed; top: 0 ; z-index:33; background-size: auto 100%; background-position: center; background-repeat: no-repeat;}

        .bg{position: fixed; width: 100%; height: 100%; background-color: #3a54ef; z-index: -20}
        .bg_2{background-color: #3a54ef; height: 285px; width: 100%; position: fixed; z-index: 31; border-radius: 0 0 20px 20px; box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.1) ;}
        .bg_3{background-color: #3a54ef; height: 155px; width: 100%; position: fixed; z-index: 30; border-radius: 0 0 20px 20px; box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.1) ;}
        
        .font_1{font-size: 1.2rem; font-weight:700; color: #3a3849;}
        .main_box_con1{display: flex; width: 100%; height: 50px; justify-content: center; }
        .main_box_con2{display: flex; width: 100%; height: 50px; justify-content: center;  }
        .main_box_con2>input{background: transparent;border:0;  border-style:none; border-bottom:solid 1px #cacaca; border-collapse:collapse; font-size: 1.2rem; width: 150px; ;}
        
        .check{width: 100% ; display: flex; align-content: center; padding-left: 70px; margin-top: 20px; width: 100%; flex-wrap: wrap; }
        .ch_b>input{width: 17px; height: 17px; margin-right: 5px;}
        .ch_t{width:calc(100% - 70px); padding-right: 42px; text-align: justify; font-size: 0.77rem; color:#3a3849; }
        
        .ar{ width: 100%;  padding-left: 28px; font-size: 0.7rem; color: red; margin-top:5px}
        
        .ag_bt{width: 100%; display: flex; background-color: #ff179c; color: #ffffff; font-weight: 700; font-size: 1rem; justify-content: center; padding: 15px 20px; margin: 70px 30px 0 30px; border-radius: 5px;}
        .b_bu{color: #ffffff; font-size: 3rem;}
        .arrow01 { display: inline-block; width: 10px;height: 10px;border-left: 6px solid #ffffff; border-bottom: 6px solid #ffffff; transform: rotate(45deg); margin: 20px 20px;}
        .sub_box{width: 88%; display: flex; flex-wrap: wrap; margin: 0 auto; }
        .c_box{width: 100%; display: flex; justify-content: center;   margin-top: 130px; flex-direction: column;}
        .c_t1{font-size: 1.5rem; font-weight:700; color:#3a3849;}
        .c_t2{font-size: 1.2rem; font-weight:600; margin-top: 20px; color: #3a3849; }
        .c_t2 > span:last-child{font-size: 0.8rem; margin-top: 5px; color: #3a3849; }
        .c_t3{display: flex; justify-content: center; margin-top: 50px; font-size: 1rem; color: #3a3849;}
        
        .ag_bt2{width: 100%; display: flex; background-color: #ff179c; color: #ffffff; font-weight: 700; font-size: 1rem; justify-content: center; padding: 15px 20px; margin: 10px 30px 0 30px; border-radius: 5px;}

        .body_bg1{background-color: #ebeff8;}
        .main_box2{background-color: #ffffff; width: 88%; height:90px ; margin: 0 auto; border-radius: 7px; box-shadow: 0px 4px 5px 3px rgba(0, 0, 0, 0.07) ; display: flex; flex-wrap: wrap;  align-content: flex-start; margin-bottom: 15px;}        
        .m_b_photo{height: 100%;display: flex; vertical-align: middle;}
        .m_b_photo>img{height: 70px; width: 70px; border-radius: 50%; margin:10px 0 0 14px;border: 3px solid  #ffffff; box-shadow: 0px 2px 5px 3px rgba(0, 0, 0, 0.07) ;}
        .m_text_box1{display: flex; flex-direction: column; justify-content: center;  margin-left: 10px;  flex:1;  min-width: 0; overflow: hidden;}
        .m_b_name{font-size: 1rem; color: #3a3849; font-weight: 500;}
        .m_b_content{font-size: 1.2rem; color: #3a3849; font-weight: 700; overflow:ellipsis; width: 100%; min-width: 0; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; }
        
        .m_b_button{height: 100%; justify-content: center; display: flex; flex-direction: column; padding-right: 10px;}
        .flex_space3{flex: 1; height: 100%; }
        
        .r_b{ width: 42px; height: 42px ; background-color: #3a3849; border-radius: 50%; margin: 0 auto; display: flex; justify-content: center;}
        .view_text{font-size: 0.9rem; color: #20e1b3; font-weight: 700;line-height: 30px;}
        .main_box3{background-color: #ffffff; width: 88%; height:fit-content ; margin: 0 auto; padding-bottom: 40px; border-radius: 7px; box-shadow: 0px 4px 5px 3px rgba(0, 0, 0, 0.07) ; display: flex; flex-wrap: wrap;  align-content: flex-start; margin-bottom: 15px;}        
        .y_box{width: 100%; height: fit-content;}
        .y_box>iframe{width: 100%; height: auto; aspect-ratio: 16 / 9; vertical-align: middle;}

        .ag_bt3{width: 70%; height: 50px; display: flex; margin: 20px 15%; background-color: #ffffff; color: #000000; border: 1px solid #3a3849; font-size: 1rem; justify-content: center; border-radius: 5px; align-items: center;}
        .su_1{color: #ff179c; font-size: 1.2rem;}
        /*#3a3849*/
        .su_2{margin: 0 10px; color: #3a3849; font-weight: bold; font-size: 1.2rem;}
        .su_3{color: #3a3849; font-size: 0.9rem;}
        .ag_text1{font-size: 1.2rem; margin: 15px 10px 10px 10px; font-weight: bold; color: #3a3849;}
        .ag_text2{font-size: 0.9rem; margin: 0 10px; color: #3a3849;}
        .arrow01 {display: inline-block; width: 10px;height: 10px;border-left: 4px solid #ffffff; border-bottom: 4px solid #ffffff; transform: rotate(45deg); margin: 20px 20px; z-index: 100;}
        .arrow02 {display: inline-block; width: 10px;height: 10px;border-left: 4px solid #ffffff; border-bottom: 4px solid #ffffff; transform: rotate(45deg); margin: 20px 20px; position: fixed; z-index: 100;}
        .arrow03 {display: inline-block; position: absolute; width: 10px;height: 10px;border-left: 4px solid #ffffff; border-bottom: 4px solid #ffffff; transform: rotate(45deg); margin: 20px 20px; position: fixed; z-index: 100;}
        
        .m_box_number{width: 30px; height:30px; line-height: 28px; background-color: #ff179c; color: #ffffff; font-size: 1rem; font-weight: 700; border-radius: 50%;  display: flex; position:absolute; z-index: 29; margin: 5px 0 0 5px; display: flex; justify-content: center;}
        .main_text{width: 100%; height: fit-content; display: flex; }
        .main_text>div{margin: 0 auto; font-size:1.2rem; font-weight:700; color:white}
        .play_button{ margin: 6px 0 0 6px; --stretch-ratio: 1.2; width: calc(30px * var(--stretch-ratio)); height: 32px; background: #20e1b3; clip-path: path('M8,5 Q8,0 13,3 L25,12 Q28,15 25,18 L13,27 Q8,30 8,25 Z'); transform: scaleX(var(--stretch-ratio));}