.inner{width:100%; max-width:var(--container); margin: auto;}
.sub_menu{border-bottom: 1px solid #ccc; text-align: center;}
.sub_menu ul { }
.sub_menu ul li {display:inline-block; position: relative;}
.sub_menu ul li a { display: block; text-align: center; line-height: 7rem; padding:0 5rem ;  transition: all 0.5s; position: relative; }
.sub_menu ul li a::before{content: ''; width: .7rem; height: .7rem; border-radius: 1rem; background:var(--main_color); opacity: 0; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);transition: .5s;}
.sub_menu ul li a:hover,
.sub_menu ul li a.active {font-weight: bold;}

.sub_menu ul li a:hover::before,
.sub_menu ul li a.active::before{opacity: 1;}

.sub_menu.drop { position: fixed !important; top:10rem; width: 100%; z-index: 8; background:var(--main_color); border: none; }
.sub_menu.drop ul li a{line-height: 5rem; color:#fff}
.sub_menu.drop ul li a::before{top:0; background: #fff;}


.sub_top_con { overflow:hidden; }
.sub_top{display:flex; align-items: center; justify-content: center; text-align: center; width:100%;  height: 35rem; overflow: hidden; background-size: cover; position:relative;}
.sub_top::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: absolute; top:0; left: 0;}
.sub_top h2{font-size:5rem; color:#fff; font-weight: bold;}
.sub_top h2 span{display: block; font-size: 2rem; font-weight: bold; font-family: var(--font_eng); font-weight: 800;}
.sub_title{padding:5rem 0;}
.sub_con{min-height: 50rem; position: relative; }

/* title */
.h3{padding:2rem 0 0 0; font-weight:bold; font-size: 5rem; text-align: center; position:relative}
.h4{font-weight: bold; font-size: 3.4rem; text-align: center; position: relative; padding:1rem 0 3rem 0}
.h4::before{content: ''; width:1rem; height: 1rem; background: var(--main_color); position: absolute; top: 0; left:calc(50% - 1rem);  border-radius: 10rem;}
.h4::after{content: ''; width:1rem; height: 1rem; background: var(--sub_color); position: absolute; top: 0; left: 50%; border-radius: 10rem;}
.h5{font-weight:bold; font-size: 2.4rem; text-align: left; padding-bottom: 2rem;}
.h6{font-weight: bold;padding-bottom: 1rem; }
.s_tit{font-weight: 300; font-size: 3rem; text-align: center;}
.s_tit span{font-weight: bold; color:var(--main_color)}

/* align */
.left{text-align:left;}
.right{text-align: right;}
.center{text-align: center;}

/* padding */
.pb1{padding-bottom: 1rem;}
.pb2{padding-bottom: 2rem;}
.pb3{padding-bottom: 3rem;}
.pb4{padding-bottom: 4rem;}
.pb5{padding-bottom: 5rem;}
.pb6{padding-bottom: 6rem;}
.pb7{padding-bottom: 7rem;}
.pb8{padding-bottom: 8rem;}
.pb9{padding-bottom: 9rem;}
.pb10{padding-bottom: 10rem;}

.pt1{padding-top: 1rem;}
.pt2{padding-top: 2rem;}
.pt3{padding-top: 3rem;}
.pt4{padding-top: 4rem;}
.pt5{padding-top: 5rem;}
.pt6{padding-top: 6rem;}
.pt7{padding-top: 7rem;}
.pt8{padding-top: 8rem;}
.pt9{padding-top: 9rem;}
.pt10{padding-top: 10rem;}

/* margin */
.mb1{margin-bottom: 1rem;}
.mb2{margin-bottom: 2rem;}
.mb3{margin-bottom: 3rem;}
.mb4{margin-bottom: 4rem;}
.mb5{margin-bottom: 5rem;}
.mb6{margin-bottom: 6rem;}
.mb7{margin-bottom: 7rem;}
.mb8{margin-bottom: 8rem;}
.mb9{margin-bottom: 9rem;}
.mb10{margin-bottom: 10rem;}

/* sub path */
.sub_path{text-align: center; color:#666; font-size: 1.4rem; display: none; }
.sub_path a{display:inline-block; color:#666; font-size: 1.4rem; padding:0 .5rem }


/* scroll up */
.scrollup {width: 5rem;height: 5rem;position: fixed;bottom: 2rem;right: 2rem;background-color:var(--main_color);text-align: center; padding: 1rem;color: #fff;z-index: 100;    display: none;    border-radius: 50%; transition: all 0.5s;}
.scrollup:hover{background-color: var(--sub_color);}
.scrollup img{width: 50%;}

/* tabmenu */
.tabmenu { text-align: center; }
.tabmenu ul { display: flex; margin: 0 0 3rem 0; justify-content: center; }
.tabmenu li { display: inline-block; }
.tabmenu li a { display: block; background: #fff; border: 1px solid #ccc; height: 5rem; line-height: 5rem; padding:0 5rem }
.tabmenu li a:hover { background: var(--main_color); color: #fff; }
.tabmenu ul li.tab_select a { background:var(--main_color); font-weight: bold; color: #fff; }



/* table */
.table{width:100%; }
.table th{padding:2rem; font-weight: bold; background:#91a5b1; color:#fff; position: relative; border-bottom: 1px solid #fff; border-right: 1px solid #fff;}
.table th:last-child{border:none}
/*.table th::before{content: ''; width: 0; height: 0; background: transparent; border-right:15px solid #fff; border-bottom: 15px solid transparent; position: absolute; right: 0; top: 0; z-index: 9;}
.table th::after{content: ''; width: 1px; height: 100%; background: rgba(255,255,255,0.5); position: absolute; top: 0; right: 0;}*/

.table tr:hover{background: #fafafa;}
.table td{padding:2rem; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; text-align:center; position: relative;}
.table td:last-child{border-right:none}

.table .left{text-align: left;}
.table .table_bg{background: #fafafa; font-weight: bold;}

/* list */
.comm_list li{position:relative; padding:0 0 .5rem 1.5rem; display: block !important;}
.comm_list li::before{content: ''; width:0.5rem; height:0.5rem; border-radius: 1rem; background:var(--main_color); position: absolute; left: 0; top:1rem}

/* box */
.comm_box{padding:3rem; border:1px solid #ccc; position: relative;}
.comm_box::before{content: ""; width: 100%; height: 0.5rem; background: repeating-linear-gradient( 45deg, #ccc, #ccc 5px, #fff 0, #fff 10px ); position: absolute;  top: -0.25rem; left: 0;}

/* strong */
.strong{display:inline-block; padding:0 1rem; background:var(--main_color); color:#fff;}
.red{color:#b30000; font-weight: bold;}

/* button */
.comm_btn a{display:inline-block; background:var(--main_color);  color:#fff; text-align: center; padding: 1rem 3rem; transition: all .5s;}
.comm_btn a:hover{background:var(--point_color)}

/* main_scroll animation */
.mouse {position:absolute; top:80rem; left:50%; transform: translateX(-50%); z-index: 9; margin:auto; }
/*.mouse:after {content:"";position:absolute;width:4px;height:4px;border-radius:2px;background:var(--sub_color);display:block;left:50%;transform:translateX(-50%);top:5px;animation: control 1.5s infinite;  }*/
  @keyframes control {
    0% {
      opacity:1;
      top:5px;
    }
    60% {
      opacity:1;
    }
    90%{
      top:20px;
    }
    100%{
      opacity:0
    }
  }
  
  .scrollBox {position:fixed;width:4px;height:50px;overflow:hidden;bottom:50px;left:50px;z-index: 9;}
  .scrollBox:after {content:""; position:absolute; top:-50px; height:50px; width:4px; background: crimson; animation:scrollDrive 2s ease infinite; }
  
  @keyframes scrollDrive {
    0% {
      top:-50px;
    }

    50% {
      top:50px;
    }
    100% {
      top:50px;
    }
  }
  
  .vertical-text {margin: 0 auto 2em;width: 0;word-wrap: break-word;position:fixed;left:46px;bottom:90px;font-size:1rem;text-transform:uppercase; z-index: 9}


  .progress-container {width: 100%;height: 0.5rem;background:transparent; position: fixed; top:0; z-index: 10;}
  .progress-bar {height: 0.5rem;background:var(--sub_color);width: 0%; position:relative; z-index: 10; }
  

footer{ padding:5rem 0 0 0; background: #515563; color:rgba(255,255,255,0.5)}
footer .inner{display: flex; gap:10rem; position: relative;}
.foot_half{display: flex; gap:2rem; margin-top: 2rem;}
footer dl dt{font-weight: bold;}
footer .inner p{position: absolute; top: 0; right: 0;}

.foot_line{border-top:1px solid rgba(255,255,255,0.5); padding:1rem 0; font-size: 1.6rem; margin-top: 3rem;}
.foot_inner{gap:2rem !important}