/* header */
.header.elypecsSummit{top:0px; left: 0; width: 100%; height: 60px; text-align:center; color: #f2f2f2; background-color: rgba(0, 0, 0, 0.5)}
.header.elypecsSummit .inner{display:flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 auto; max-width: 1024px; height: 100%; }
.header.elypecsSummit .logo{display: block; width: 98px; height: 40px; text-indent: -9999px; background: url("../../../static/images/elypecsSummit/webinar/logo_elypecsSummit.svg") no-repeat left top / cover; }
.elypecsSummit .hd_nav{display: flex; flex-direction: row; list-style: none; justify-content: center; align-items: center; height: 100%; }
.hd_nav li{display: flex; justify-content: center; align-items: center; position: relative; height: 100%; }
.hd_nav li+li{margin-left: 60px;}
.hd_nav li:after{content: ""; position: absolute; bottom: 0; left: -2px; width: 0; height: 3px; background: #fff; transition: width 0.35s}
.hd_nav li a{color: #fff; font-size: 16px; font-weight: 700;}

.modal .modal_inner .modal_help-innav .help-innav:before,
.modal .modal_inner .modal_help-innav .help-innav{border-color: #ff3232;}
.modal .modal_inner .ico_tutorial-btn::before{border-color: #ff3232}

b.only_pc{display: inline-block; font-weight: 400;}
b.only_mo{display: none; font-weight: 400;}

.summit_lnb{overflow: hidden; display: none; position: absolute; top: 100%; left: 20px; margin-top: 10px; width: 160px; border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.6);}
.summit_lnb .tit{position: relative; padding: 10px; color: #fff; font-size: 14px; line-height: normal; text-align: left; cursor: pointer;}
.summit_lnb .tit span{position: absolute; top: 50%; right: 10px; font-size: 0; border-width: 8px 4px 0 4px; border-color: #fff transparent transparent transparent; border-style: solid; transform: translateY(-50%); transition: transform 0.3s}
.summit_lnb .tit.active span{transform: translateY(-50%) rotate(180deg);}
.summit_lnb ul{height: 0; transition: height 0.3s;}
.summit_lnb ul.active{margin-bottom: 14px; height: 80px;}
.summit_lnb li{text-align: left;}
.summit_lnb li+li{margin-top: 12px;}
.summit_lnb li a{display: block; opacity: .6; position: relative; padding: 0 20px 0 20px; color: #fff; font-size: 14px; font-weight: 400;}
.summit_lnb li.active a{opacity: 1;}
.summit_lnb li.active a:before{content: ""; position: absolute; top: 50%; left: 8px; margin-top: -2px; width: 0; height: 0; border-width: 4px 0px 4px 8px; border-color: transparent transparent transparent #fff; border-style: solid;}

@media screen and (min-width: 1024px){
    .hd_nav li.active:after,
    .hd_nav li:hover:after{width: calc(100% + 4px);}
    .btn_outlink:hover{background: #d32727}
  }
  
  /* mobile */
  @media screen and (max-width: 1024px) {
  
    /* common style code */
    .title_box{margin-bottom: 3vw;}
    #fp-nav{display: none !important;}

    /* header */
    .header.elypecsSummit{height: 8vw;}
    .header.elypecsSummit .inner{display:flex; flex-direction: row; padding: 0 2.6vw; margin: 0; max-width: initial;}
    .header.elypecsSummit .logo{margin: 1.39vw 0; width: 10vw; background: url("../../../static/images/elypecsSummit/webinar/logo_elypecsSummit.svg") no-repeat center center / contain;}
  
    .hd_nav li+li{margin-left: 2.78vw;}
    .hd_nav li.active:after,
    .hd_nav li:hover:after{width: calc(100% + 4px); height: 0.42vw}
    .hd_nav li a{font-size: 2vw;}

    .btn_menu{width: 3rem; height: 3rem;}
    .global{top: calc(8vw + 20px);}
    .modal .modal_inner .modal_help-tutorial{top: calc(8vw + 10px);}
  
  }
  
  /* fold */
  @media screen and (min-width: 480px) and (max-width: 690px){
    /* common style code */
    .title_box{margin-bottom: 3.2vh;}
    b.only_pc{display: none;}
    b.only_mo{display: inline-block}
    .global {top: calc(2.4vw + 20px)}
  
    /* header */
    .header.elypecsSummit .inner{padding: 0 11vw 0 2.6vw;}
    .header.elypecsSummit{height: 11.63vh;}
    .header.elypecsSummit .logo{margin: 1.12vh 0; width: 8.6vh; height: 4.5vh;}
    .hd_nav li+li{margin-left: 2.78vw;}
    .hd_nav li.active:after,
    .hd_nav li:hover:after{width: calc(100% + 4px);}
    .hd_nav li a{font-size: 1.4vh;}
  
    
  }
  /* mobile */
  @media screen and (max-width: 480px) {

    /* common style code */
		.title_box{margin-bottom: 5vw;}
    b.only_pc{display: none;}
    b.only_mo{display: inline-block}
		.header.elypecsSummit{height: 13.83vw;}
		.header.elypecsSummit .inner{flex-direction: column; padding: 0;}
		.header.elypecsSummit .logo{width: 13.61vw; height: 5.56vw; }
    
    .global{position: fixed; top: initial; bottom: calc(3vw + 56px); right: 4vw}

    .modal .modal_inner .modal_help-tutorial{top: initial; bottom: calc(2.3vw + 56px); right: 0vw; transform: rotate(90deg);}
    .modal .modal_inner .modal_help-tutorial .tutorial_desc{margin-top: -10vw; margin-right: 5vw; transform: rotate(270deg)}
    .modal .modal_inner .modal_help-center-desc{max-height: 60vh}

    .summit_lnb{position: absolute; left: 0; margin-top: 0; padding-bottom: 0; width: 100%; }
    .summit_lnb ul{margin-top: 1.4vw;}
    .summit_lnb ul.active{margin-bottom: 1.4vw; height: 18.06vw}
    .summit_lnb .tit{padding: 1.4vw 3vw 0; font-size: 3.2vw;}
    .summit_lnb li a{font-size: 3vw;}
  }