@charset "utf-8";

@media (max-width:1500px){
    /* header */
    .header-inner{
        width: 100%;
        padding: 30px;
    }
    /* hero */
    .hero-video{
        height: 80%;
    }
    .hero-inner{
        width: 100%;
        padding: 0 30px;
        gap: 60px;
    }
    .hero-inner .left .title{
        font-size: 36px;
    }
    .hero-inner h1{
        font-size: 72px;
    }
    .hero-inner .desc{
        font-size: 20px;
    }
    .hero-inner .buttons a{
        font-size: 20px;
        width: 200px;
    }
    .hero-inner .right .label{
        font-size: 20px;
    }
    .hero-inner .right .cont{
        font-size: 16px;
    }
    /* greeting */
    h3{
        font-size: 36px;
        margin-bottom: 48px;
    }
    h6{
        font-size: 20px;
        margin-bottom: 20px;
    }
    p.desc{
        font-size: 16px;
    }
    .greeting-inner .text-box p{
        font-size: 16px;
        margin-bottom: 20px;
    }
    /* why */
    .why-inner{
        width: 100%;
        padding: 120px 30px;
    }
    .why-inner h3{
        margin-bottom: 24px;
    }
    .why-inner .box-wrap li{
        padding: 30px 20px;
    }
    .why-inner .box-wrap li .title{
        font-size: 20px;
    }
    /* key topics */
    .topics-inner{
        width: 100%;
        padding: 120px 30px;
    }
    .topics-inner .box-wrap li{
        padding: 30px 20px 50px;
    }
    .topics-inner .title{
        font-size: 20px;
    }
    .topics-inner .subtitle{
        font-size: 16px;   
    }
    .topics-inner .category{
        left: 20px;
    }
    .topics-inner .category li{
        padding: 2px 4px;
        font-size: 15px;
    }
    /* agenda */
    .agenda-inner{
        width: 100%;
        padding: 120px 30px 0;
    }
    .agenda-wrap .time{
        width: 200px;
    }
    .session-wrap{
        width: calc(100% - 200px);
    }

    /* spaker */
    .speaker-inner h3{
        margin-bottom: 48px;
    }
    .speaker-inner{
        width: 100%;
        padding: 120px 30px;
    }
    .speaker-wrap{
        gap: 2%;
    }
    .speaker-wrap .name{
        font-size: 16px;
    }
    .speaker-wrap .company{
        font-size: 14px;
        margin-top: 6px;
    }
    .speaker-wrap .star{
        
    }
    /* solution */
    .solution-inner{
        padding: 80px 0 0;
    }
    .solution-inner h6 svg{
        width: 120px;
        height: 32px;
    }
    .solution-box{
        width: calc(100% - 60px);
    }
    .solution-box .title{
        font-size: 28px;
        margin-bottom: 20px;
    }
    .solution-box .cont{
        font-size: 16px;
    }
    /* agennt */
    .agent-box li{
        padding: 60px 20px;
    }
    .agent-wrap .title{
        font-size: 28px;
        margin-bottom: 32px;
    }
    .agent-box .title{
        font-size: 20px;
        margin-bottom: 20px;
    }
    /* hr-inner */

    .hr-inner .inner{
        width: 100%;
        padding: 0 30px;
    }
    .hr-inner .title h3{
        margin-bottom: 32px;
    }
    .hr-inner .title p{
        font-size: 16px;
    }
    .hr-list .hr-item{
        font-size: 24px;
    }
    /* banner */
    .banner-bg{
        top: -20%;
    }
    .banner-inner{
        padding: 60px 0;
    }
    .banner-inner .text-wrap{
        font-size: 24px;
    }
    .banner-inner .register-btn{
        font-size: 20px;
        width: 200px;
    }
    /* information */
    .info-inner{
        padding: 120px 30px;
        width: 100%;
    }
    .info-box .text{
        width: 45%;
        padding: 0 20px 0 0;
    }
    .info-box .text ul li{
        gap: 16px;
        margin-bottom: 16px;
    }
    .info-box .event-name{
        font-size: 20px;
        margin-bottom: 32px;
    }
    .info-box .label{
        font-size: 16px;
        padding: 6px 12px;
    }
    .info-box .cont{
        font-size: 16px;
    }
    .info-box .map{
        width: 55%;
    }
    .info-box .map iframe{
        width: 100%;
    }
    /* faq */
    .faq-inner{
        width: 100%;
        padding: 120px 30px;
    } 
    .faq-inner .a{
        font-size: 16px;
    }
    /* footer */
    .footer-inner{
        width: 100%;
        gap: 40px;
        padding: 50px 30px;
    }
    .footer-address{
        font-size: 15px;
    }
}

@media (max-width:1100px){
    header{
        height: 60px;
    }
    .header-inner{
        padding: 0 20px;
    }
    .hcg-logo{
        height: 22px;
    }
    nav{
        display: none;
    }
    .header-inner .register-btn{
        display: none;
    }
    /* mob-menu */
    .mob-nav{
        display: block;
        position: relative;
    }
    .mob-nav ul{
        position: fixed;
        background-color: rgba(255, 255, 255, 1);
        border-bottom: 1px solid #ddd;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 60px;
        right: 0;
        gap: 10%;
        padding: 16px 0;
        padding: 40px 15px;
        text-align: center;
    }
    .mob-nav ul li{
        text-align: center;
        padding: 30px 0;
    }
    .mob-nav .register-btn{
        border: 0;
        display: block;
        padding: 0;
    }
    .mob-nav .register-btn:hover{
        background: transparent;
        color: #0d80f2;
    }
    .menu-btn{
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
    }
    .menu-btn span{
        display: block;
        width: 22px;
        height: 2px;
        background-color: #333;
        transition: all .3s ease;
    }
    .menu-btn.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-btn.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    /* hero */
    .hero-inner .left .title{
        font-size: 30px;
    }
    .hero-inner h1{
        font-size: 64px;
    }
    .hero-inner .desc{
        font-size: 18px;
    }
    .hero-inner .buttons a{
        font-size: 18px;
        padding: 16px 0;
        width: 180px;
    }
    .hero-inner .right ul{
        padding: 20px;
    }
    .hero-inner .right .label{
        font-size: 18px;
        margin-bottom: 12px;
    }
    /* d_day */
    .d_day .row .text-center{
        width: 15%;
    }
    .d_day .row .box_c{
        font-size: 50px;
    }
    /* greeting */
    h3{
        font-size: 32px;
        margin-bottom: 40px;
    }
    h6{
        font-size: 18px;
    }
    /* why */
    .why-inner .box-wrap{
        margin-top: 64px;
        flex-wrap: wrap;
        gap: 20px;
    }
    .why-inner .box-wrap li{
        width: calc(50% - 10px);
        height: 148px;
    }
    .why-inner .box-wrap li .title{
        font-size: 18px;
    }
    /* topics */
    .topics-inner h3{
        margin-bottom: 0;
    }
    .topics-inner .box-wrap{
        margin-top: 64px;
    }
    .topics-inner .box-wrap li{
        padding: 30px 20px 64px;
    }
    .topics-inner .title{
        font-size: 18px;
    }
    .topics-inner .category{
        flex-wrap: wrap;
        gap: 8px;
        bottom: 16px;
    }
    .topics-inner .category li{
        font-size: 14px;
        padding: 2px 4px;   
    }
    /* agenda */
    .agenda-wrap .sort{
        font-size: 18px;
    }
    .session-wrap{
        padding: 16px 16px 16px 0;
    }
    .agenda-wrap .sort .speaker{
        width: auto;
        margin-top: 0;
        border-left: 1px solid #999;
        margin-left: 8px;
        padding-left: 8px;
    }
    .sort .session-wrap{
        display: flex;
        justify-content: left;
    }
    .agenda-wrap .time{
        width: 180px;
    }
    .session-wrap{
        width: calc(100% - 180px);
        display: block;
    }
    .session-wrap .speaker{
        text-align: left;
        width: 100%;
        font-size: 16px;
        margin-top: 8px;
    }
    .session-wrap .desc{
        margin-top: 12px;
        font-size: 15px;
    }
    /* speaker */
    .speaker-inner {
        overflow: hidden;
    }
    .speaker-slider {
        width: 100%;
        overflow: hidden;
    }
    .speaker-wrap {
        width: max-content;
        justify-content: flex-start;
        gap: 30px;
        animation: speakerSlide 25s linear infinite;
    }
    .speaker-wrap li {
        width: 140px;
        flex-shrink: 0;

    }
    @keyframes speakerSlide {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-50% - 18px));
        }
    }
    /* solution */
    .agent-wrap{
        margin-top: 64px;
    }
    .agent-wrap .title{
        font-size: 24px;
        margin-bottom: 20px;
    }
    .agent-box .title{
        font-size: 18px;
        margin-bottom: 12px;
    }
    .agent-box .cont{
        font-size: 15px;
    }
    /* hr */
    .hr-inner .title h3{
        margin-bottom: 20px;
    }
    .hr-list .hr-item{
        font-size: 20px;
        height: 64px;
    }
    /* banner */
    .banner-inner .text-wrap{
        margin-bottom: 20px;
        font-size: 20px;
    }
    .banner-inner .register-btn{
        padding: 16px 0;
        width: 180px;
        font-size: 18px;
    }
    /* information */
    .info-box .text{
        width: calc(100% - 320px);
    }
    .info-box .map{
        height: 240px;
        width: 320px;
    }
    /* faq */
    .faq-inner li{
        padding: 20px;
    }
    .faq-inner .q{
        margin-bottom: 12px;
    }
    .faq-inner .last{
        margin: 0;
    }
    /* footer */
    .footer-inner{
        display: block;
        padding: 72px 30px 64px 30px;
    }
    .footer-logo{
        margin-bottom: 28px;
        height: 22px;
    }
    .footer-top{
        font-size: 15px;
        margin-bottom: 30px;
    }
    .footer-address{
        font-size: 14px;
    }
    .footer-address div{
        margin-bottom: 16px;
    }
}

@media (max-width:880px){
    .header-inner{
        padding: 0 15px ;
    }
    .mob-nav ul{
        display: block;
    }
    .mob-nav ul li{
        font-size: 15px;
    }
    /* hero */
    #hero{
        min-height: fit-content;
        height: 100vh;
    }
    .hero-bg .noise{
        height: 100%;
    }
    .hero-inner{
        padding: 0 15px;
        gap: 80px;
        height: auto;
    }
    .hero-inner .content{
        display: block;
        padding-top: 20vh;
        height: auto;
    }
    .hero-inner .left .title{
        font-size: 24px;
        text-align: center;
    }
    .hero-inner h1{
        font-size: 50px;
        text-align: center;
        margin-bottom: 24px;
    }
    .hero-inner .desc{
        font-size: 16px;
        text-align: center;
        margin-bottom: 36px;
    }
    .hero-inner .buttons{
        justify-content: center;
        gap: 12px;
    }
    .hero-inner .buttons a{
        font-size: 16px;
        width: 160px;
    }
    .hero-inner .right ul{
        width: 100%;
        border: none;
        background-color: transparent;
        padding: 0;
        justify-content: center;
        flex-wrap: nowrap;
        margin-top: 80px;
        gap: 0;
        box-shadow: none;
    }
    .hero-inner .right ul:hover{
        border: none;
        transform: translate(0);
        box-shadow: none;
        background-color: transparent;
    }
    .hero-inner .right li{
        width: 30%;
        border-right: 1px solid #555;
    }
    .hero-inner .right li:last-child{
        border: none;
    }
    .hero-inner .right .label{
        font-size: 16px;
    }
    .hero-inner .right .cont{
        font-size: 15px;
    }
    /* d_day*/
    .d_day .row .box_c{
        font-size: 36px;
    }
    .d_day .row .label{
        font-size: 14px;
    }
    /* greeting */
    h3{
        font-size: 24px;
        line-height: 130%;
        margin-bottom: 40px;
    }
    h6{
        font-size: 16px;
        margin-bottom: 12px;
    }
    p.desc{
        font-size: 15px;
    }
    .greeting-inner{
        padding: 120px 30px;
    }
    /*why */
    .why-inner{
        padding: 120px 15px;
    }
    .why-inner .box-wrap{
        gap: 12px;
    }
    .why-inner .box-wrap li{
        width: calc(50% - 6px);
    }
    .why-inner .box-wrap li .title{
        font-size: 17px;
        margin-bottom: 16px;
    }
    /* agenda */
    .agenda-inner{
        padding: 120px 15px 0;
    }
    .agenda-inner h3{
        margin-bottom: 40px;
    }
    .agenda-wrap .sort{
        font-size: 16px;
    }
    .agenda-wrap .sort .time{
        font-size: 16px;
    }
    .agenda-wrap .sort .session{
        font-size: 16px;
    }
    .agenda-wrap .sort .speaker{
        font-size: 16px;
    }
    .agenda-wrap .time{
        width: 120px;
        font-size: 15px;
    }
    .session-wrap{
        width: calc(100% - 120px);
    }
    .session-wrap .session{
        font-size: 16px;
    }
    .session-wrap .speaker{
        margin-top: 4px;
        font-size: 15px;
    }
    /* spaker */
    .speaker-inner {
        padding: 120px 15px;
    }
    .speaker-inner h3 {
        margin-bottom: 40px;
    }
    .speaker-slider {
        width: 100%;
        overflow: hidden;
    }
    .speaker-wrap .name{
        font-size: 15px;
    }
    /* solution */
    .solution-inner{
        padding-top: 100px;
    }
    .solution-inner h6 svg{
        width: 88px;
        height: 23px;
    }
    .agent-wrap{
        margin-top: 40px;
        padding: 0 15px 100px;
    }
    .agent-wrap .title{
        margin-bottom: 28px;
    }
    .agent-wrap .text-wrap .title{
        font-size: 17px;
    }
    .agent-box{
        flex-wrap: wrap;
        justify-content: left;
        gap: 12px;
    }
    .agent-box li{
        width: calc(50% - 6px);
        border-radius: 10px;
        padding: 30px 20px;
    }
    .agent-box li .bg{
        background-color: rgba(0, 0, 0, 0.8);
    }
    .agent-box li:nth-child(even) .bg{
        background-color: rgba(10, 15, 38, 0.8);
    }
    /* hr */
    .hr-inner .title{
        padding: 100px 0;
    }
    /* banner */
    .banner-inner .register-btn{
        width: 160px;
        font-size: 16px;
    }
    /* information */
    .info-inner{
        padding: 120px 15px;
    }
    .info-box{
        display: block;
    }
    .info-box .event-name{
        font-size: 20px;
        margin-bottom: 20px;
    }
    .info-box .text{
        width: 100%;
        padding: 0;
    }
    .info-box .text ul li{
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 8px;
    }
    .info-box .label{
        padding: 4px 12px;
        font-size: 14px;
    }
    .info-box .cont{
        font-size: 15px;
    }
    .info-box .map{
        height: 200px;
        width: 100%;
    }
    /* faq */
    .faq-inner{
        padding: 120px 15px;
    }
    .faq-inner .q{
        font-size: 18px;
    }
    .faq-inner .last{
        margin-bottom: 0;
    }
    .faq-inner .a{
        font-size: 15px;
    }
    /* footer */
    .footer-inner{
        padding: 40px 15px ;
    }
    .footer-top{
        flex-wrap: wrap;
    }
    .footer-top .company{
        width: 100%;
        margin-bottom: 16px;
    }
    .footer-address .biz{
        display: block;
    }
    .footer-address .biz span{
        display: block;
        margin-bottom: 8px;
        border: 0;
    }
    .footer-address .text{
        display: block;
    }
    .footer-address .text span{
        display: block;
    }
}
@media (max-width:580px){
    /* nav */
    header{
        height: 54px;
    }
    .mob-nav ul{
        font-size: 14px;
        top: 54px;
    }
    .mob-nav ul li{
        width: 100%;
        padding: 20px 0;
    }
    .mob-nav ul
    .hcg-logo{
        height: 20px;
    }
    /* hero */
    #hero{
        height: 820px;
    }
    .hero-video{
        height: auto;
        width: 120%;
    }
    .hero-inner{
        gap: 60px;
    }
    .hero-inner .left .title{
        font-size: 20px;
        margin-bottom: 12px;
    }
    .hero-inner h1{
        font-size: 44px;
    }
    .hero-inner .desc{
        font-size: 15px;
    }
    .hero-inner .buttons a{
        padding: 14px 0;
        width: 140px;
    }
    .hero-inner .right li{
        font-size: 15px;
        width: 33.33%;
    }
    .hero-inner .right .label{
        font-size: 15px;
    }
    .hero-inner .right .cont{
        padding: 0 10px;
    }
    /* d_day */
    .d_day .row .text-center{
        width: 20%;
    }
    .d_day .row span{
        font-size: 24px;
    }
    .d_day .row .label{
        font-size: 13px;
        margin-top: 8px;
    }
    .d_day .row .box_c{
        font-size: 28px;
    }
    /* greeting */
    .greeting-inner{
        padding: 100px 15px;
    }
    .greeting-inner .text-box p{
        font-size: 15px;
    }
    /* why */
    .why-inner{
        padding: 100px 15px;
    }
    .why-inner h3{
        margin-bottom: 24px;
    }
    .why-inner .box-wrap li .bg{
        width: 500%;
    }
    .why-inner .box-wrap li{
        height: 200px;
        padding: 20px;
    }
    .why-inner .box-wrap li .title{
        color: #538cec;
    }
    /* agenda */
    .agenda-inner{
        padding: 100px 15px 0;
    }
    .agenda-wrap .cont{
        display: block;
        padding: 14px;
    }
    .agenda-wrap .cont .time{
        width: auto;
        text-align: left;
        color: #ddd;
    }
    .sort .session-wrap{
        padding: 12px 0;
    }
    .session-wrap{
        padding: 0;
        width: 100%;
    }
    .agenda-wrap .cont .time{
        margin-bottom: 12px;
    }
    .session-wrap .desc{
        padding: 14px;
    }
    /* spaeker */
    .speaker-inner{
        padding: 100px 15px;
    }
    .speaker-wrap li{
        width: 140px;
    }
    /* solution */
    .solution-inner{
        padding: 100px 0 0;
    }
    .agent-wrap .title{
        font-size: 20px;
    }
    .agent-box{
        gap: 12px;
    }
    .agent-box li{
        width: 100%;
    }
    .agent-wrap .text-wrap .title{
        margin-bottom: 16px;
    }
    /* hr */
    .hr-inner .inner{
        padding: 100px 15px;
        display: block;
    }
    .hr-inner .title{
        width: 100%;
        padding: 0;
    }
    .hr-inner .title h3{
        text-align: center;
    }
    .hr-inner .title p{
        text-align: center;
    }
    .hr-list{
        width: 100%;
        margin-top: 40px;
    }
    /* banner */
    .banner-inner{
        padding: 100px 15px;
    }
    .banner-inner .text-wrap{
        font-size: 18px;
        margin-bottom: 30px;
    }
    .banner-inner .register-btn{
        padding: 14px 0;
        width: 140px;
    }
    /* information */
    .info-inner{
        padding: 100px 15px;
    }
    .info-box{
        padding: 14px;
    }
    .info-box .event-name{
        text-align: center;
    }
    .info-box .text ul{
        margin-bottom: 16px;
    }
    .info-box .text ul li{
        gap: 8px;
        justify-content: center;
    }
    .info-box .label{
        padding: 0;
        border: 0;
        background-color: transparent;
        font-size: 15px;
    }
    /* faq */
    .faq-inner{
        padding: 100px 15px;
    }
    .faq-inner li{
        margin-bottom: 12px;
        padding: 14px;
    }
    .faq-inner .q{
        font-size: 17px;
    }
    .faq-inner .last{
        margin-bottom: 0;
    }
    /* footer */
    .footer-top{
        flex-wrap: wrap;
    }
    .footer-top .company{
        margin-bottom: 12px;
    }
}
@media (max-width:440px){
    .info-box .event-name{
        width: 320px;
        margin: auto;
        margin-bottom: 20px;
    }
    .info-box .text ul li{
        gap: 4px;
    }
    .info-box .cont{
        font-size: 14px;
    }
}