@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { width: 100%; padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #2F43F2; display: block; overflow-x: hidden; position: relative;}
img { border:0; display: block;}

html { overflow-x: hidden;}

/*html, body { height: 100%;}*/

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}

span.red { color: #ff0000;}
span.red { color: #ff0000;}
span.winner-style { font-size: 1.3em; font-weight: 600;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


ul.rewards-num-1 { padding: 0 0 0 34px; margin: 0; list-style: decimal; display: block;}
ul.rewards-num-1 li { padding: 0; margin: 0;}

.column-full .content .history-list-content a { color: #414141; font-size: 1rem; text-decoration: none;}
.column-full .content .history-list-content a:hover { border-bottom: 1px #666 dashed;}


@media screen and (min-width: 1600px) {

  img.body-bg-top { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}
  img.body-bg-bottom { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: 1;}


  /************ go top button ************/

  #gotop-bt { width: 70px; height: 70px; color: #004978; font-size: 3em; border-radius: 16px; background-color: #00DBEF; display: flex; justify-content: center; align-items: center; cursor: pointer; position: fixed; bottom: 20px; right: 10px; z-index: 1000;}
  #gotop-bt img.icon { width: 40px; height: auto;}


  /************ header + nav ************/

  header { width: 100%; position: relative; z-index: 999;}

  .header-logo { width: 100%; padding: 50px calc(50% - 650px); box-sizing: border-box;}
  .header-logo a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-logo a .header-title { width: 40%;}
  .header-logo a .header-title img { width: 85%; height: auto; margin: 0 auto;}
  .header-logo a .main-vision { width: 60%;}
  .header-logo a .main-vision img { width: 85%; height: auto; margin: 0 auto;}

  nav#mo { display: none;}

  nav#pc { clear: both; width: 1300px; margin: 0 auto; position: relative; z-index: 999;}
  nav#pc ul.menu { width: 100%; padding: 0; margin: 0; border-radius: 40px; background-color: #00DBEF; list-style: none; display: flex; justify-content: center;}
  nav#pc ul.menu li { padding: 0; margin: 0; position: relative;}
  nav#pc ul.menu li a { padding: 15px 40px; color: #004978; font-size: 2em; font-weight: 500; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.menu li a:hover { background-color: rgba(255, 255, 255, 0.3);}
  nav#pc ul.menu li a.sel { background-color: rgba(255, 255, 255, 0.3);}
  nav#pc ul.menu li .popup-top { width: 100%; height: 20px; background-color: #FF00F4; position: absolute; top: -20px; left: 0; z-index: 1; display: none;}
  nav#pc ul.menu li .popup { width: 100%; padding: 20px 0 20px 0; box-sizing: border-box; background-color: #FF00F4; position: absolute; top: 75px; left: 0; z-index: 1; display: none;}
  nav#pc ul.menu li .popup .menu { width: 100%; padding: 15px 40px; color: #fff; font-size: 2rem; font-weight: 500; background-color: #77FFEA; box-sizing: border-box;}
  nav#pc ul.menu li .popup ul { width:100%; padding: 0; margin: 0; list-style: none; display: block;}
  nav#pc ul.menu li .popup ul li { padding: 0; margin: 0;}
  nav#pc ul.menu li .popup ul li a { width: 100%; padding: 20px; color: #fff; font-size: 1.6rem; font-weight: 400; line-height: 1.2em; text-align: center; text-decoration: none; background-color: transparent; box-sizing: border-box; display: block; cursor: pointer;}
  nav#pc ul.menu li .popup ul li a:hover { background-color: rgba(0, 0, 0, 0.2);}
  nav#pc ul.menu li .popup ul li ul.popup-2 { width: 100%; padding: 0; margin: 0; list-style: none; background-color: rgba(255,255,255,0.6); display: none;}
  nav#pc ul.menu li .popup ul li ul.popup-2 li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.menu li .popup ul li ul.popup-2 li a { color: #FF00F4; text-decoration: none;}
  nav#pc ul.menu li .popup ul li ul.popup-2 li a:hover { background-color: rgba(255,255,255,0.8);}


  /************ section #hp-content ************/

  section#hp-content { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box; position: relative; z-index: 2;}

  .column-half { width: calc(50% - 20px); margin: 0 10px 30px 10px; float: left;}
  .column-half .top { width: 100%;}
  .column-half .bottom { width: 100%;}
  img.col-hf-top-mo, img.col-hf-bottom-mo { display: none;}
  img.col-hf-top, img.col-hf-bottom { width: 100%; height: auto;}
  .column-half .content { width: 100%; min-height: 400px; padding: 0 0 0 0; box-sizing: border-box; background-image: url('../images/column_half_bg.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-half .content .title { width: 100%; padding: 0 35px 40px 65px; box-sizing: border-box;}
  .column-half .content .title img { margin: 0 auto;}
  .column-half .content .text { width: 100%; padding: 0 35px 0 65px; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .column-half .content .news-list { width: calc(100% - 100px); padding: 10px 0; margin: 0 35px 0 65px; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .column-half .content .news-list .news-title { width: calc(100% - 120px); font-size: 1.1em; line-height: 1.4em;}
  .column-half .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-half .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-half .content .news-list .news-date { width: 120px; font-size: 1.1em; line-height: 1.4em; text-align: right;}
  
  .hp-more-bt { clear: both; width: 80px; margin: 30px 80px 0 0; float: right;}
  .hp-more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 0.9em; line-height: 1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .hp-more-bt a:hover { color: #00DBEF;}

  .column-full { clear: both; width: 100%;}
  .column-full .top { width: 100%;}
  .column-full .bottom { width: 100%;}
  img.col-fl-top-mo, img.col-fl-bottom-mo { display: none;}
  img.col-fl-top, img.col-fl-bottom { width: 100%; height: auto;}
  .column-full .content { width: 100%; padding: 0 0 0 45px; box-sizing: border-box; background-image: url('../images/column_full_bg.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-full .content .title { width: 100%; padding: 0 35px 40px 35px; box-sizing: border-box;}
  .column-full .content .title img { margin: 0 auto;}
  .column-full .content .title-s { clear: both; width: 100%; padding: 0 35px 40px 35px; box-sizing: border-box; color: #FF00F4; font-size: 2em; font-weight: 600; text-align: center;}
  .column-full .content .videos-list { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .column-full .content .videos-list .videos-box { width: calc(100% / 3 - 40px); margin: 0 20px;}
  .column-full .content .videos-list .videos-box img { width: 100%; height: auto;}
  .column-full .content .videos-list .videos-box .v-title { clear: both; width: 100%; padding: 5px 0 0 0; font-size: 1rem;}


  /************ section #news ************/

  section#news { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box;}

  .column-full .content .news-list { width: 80%; padding: 10px 0; margin: 0 auto; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}
  .column-full .content .news-list .news-title { width: calc(100% - 120px); font-size: 1.1em; line-height: 1.4em;}
  .column-full .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-full .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-full .content .news-list .news-date { width: 120px; font-size: 1em; line-height: 1.4em; text-align: right;}

  .column-full .content .news-con-title { width: 80%; padding: 0 0 10px 0; margin: 0 auto; font-size: 1.4em; line-height: 1.2em; font-weight: 600;}
  .column-full .content .news-con-date { clear: both; width: 80%; margin: 0 auto; font-size: 0.9em; text-align: right;}
  .column-full .content .news-content { clear: both; width: 80%; margin: 40px auto 0 auto; font-size: 1.1em; line-height: 1.8em;}
  .column-full .content .news-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .column-full .content .news-content a:hover { color: #FF00F4; border-bottom: 1px #FF00F4 dashed;}

  .column-full .content .news-content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .goback-bt a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .goback-bt a:hover { color: #00DBEF;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box;}

  .column-full .content .about-text-context { clear: both; width: 84%; margin: 0 auto; font-size: 1.1em; line-height: 1.8em;}

  .column-full .content ul.history-list-nav { clear: both; width: 90%; padding: 0; margin: 0 auto 30px auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .column-full .content ul.history-list-nav li { width: 100px; padding: 0; margin: 0 5px 10px 5px;}
  .column-full .content ul.history-list-nav li a { width: 100%; padding: 5px 0; color: #004978; font-size: 1.2em; text-align: center; text-decoration: none; background-color: #00DBEF; display: block;}
  .column-full .content ul.history-list-nav li a:hover { color: #00DBEF; background-color: #004978;}
  .column-full .content ul.history-list-nav li a.sel { color: #fff; background-color: #FF00F4;}

  .column-full .content .history-list-content { clear: both; width: 80%; margin: 0 auto; font-size: 1.2rem; line-height: 1.8em;}
  .column-full .content .history-list-content div { width: 100%;}
  .column-full .content .history-list-content div .title-year { width: 100%; margin: 0 0 20px 0; color: #FF00F4; font-size: 1.4rem; font-weight: 600;}


  /************ section #awards ************/

  section#awards { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box;}

  .column-full .content .awards-text-context { clear: both; width: 80%; padding: 0 0 40px 0; margin: 0 auto; box-sizing: border-box; font-size: 1.4em; line-height: 1.6em; font-weight: 600;}

  .column-full .content .apply-list-table { clear: both; width: 60%; padding: 40px; margin: 0 auto; font-size: 1.6rem; line-height: 1.8em; box-sizing: border-box;}
  .column-full .content .apply-list-table ul.num { padding: 0 0 0 90px; margin: 0; list-style: decimal; display: block;}
  .column-full .content .apply-list-table ul.num li { padding: 0; margin: 0;}

  .column-full .content .apply-list-table table.apply-table { width: 100%; border: 1px #00DBEF solid; border-collapse: collapse; border-spacing:0; background-color: #fff;}
  .column-full .content .apply-list-table table.apply-table thead { color: #fff; font-size: 1.2em; font-weight: 600; line-height: 1.2em; text-align: center; background-color: #00DBEF;}
  .column-full .content .apply-list-table table.apply-table tbody { font-size: 1.1em;}

  .column-full .content .apply-list-table .caption-full { width: 100%; color: #fff; font-size: 1.2em; font-weight: 600; background-color: #00DBEF; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .caption-full .caption-1 { width: 8%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .column-full .content .apply-list-table .caption-full .caption-2 { width: 28%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .column-full .content .apply-list-table .caption-full .caption-3 { width: 8%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .column-full .content .apply-list-table .caption-full .caption-4 { width: 28%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .column-full .content .apply-list-table .caption-full .caption-5 { width: 28%; text-align: center; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .column-full .content .apply-list-table .caption-full .caption-5-1 { width: 100%; padding: 5px; border-bottom: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-5-2 { width: calc(100% / 3); padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-5-3 { width: calc(100% / 3); padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-5-4 { width: calc(100% / 3); padding: 5px; box-sizing: border-box;}
  
  .column-full .content .apply-list-table .column-full { clear: both; width: 100%; font-size: 1.2em; border-bottom: 1px #00DBEF solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .column-full .column-1 { width: 8%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-2 { width: 28%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-3 { width: 8%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-4 { width: 28%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-5 { width: 28%; padding: 5px; text-align: center; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .column-full .content .apply-list-table .column-full .column-5-2 { width: calc(100% / 3); padding: 5px; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-5-3 { width: calc(100% / 3); padding: 5px; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-5-4 { width: calc(100% / 3); padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}

  .column-full .content .apply-notice { clear: both; width: 80%; margin: 30px auto 0 auto; line-height: 1.6em;}


  /************ section #videos ************/

  section#videos { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box;}

  .column-full .content .videos-list-context { clear: both; width: 80%; padding: 0 0 40px 0; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .column-full .content .videos-list-context .video-list { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}
  .column-full .content .videos-list-context .video-list .pic { width: 100%; height: 200px; display: flex; align-items: center; overflow: hidden;}
  .column-full .content .videos-list-context .video-list .pic img { width: 100%; height: auto;}
  .column-full .content .videos-list-context .video-list .title { width: 100%; padding: 10px 0 0 0; font-size: 1.2em; font-weight: 600; line-height: 1.2em;}
  .column-full .content .videos-list-context .video-list .title font.date { color: #666; font-size: 0.8rem; font-weight: normal;}
  .column-full .content .videos-list-context .video-list .title span.date { color: #666; font-size: 0.8rem; font-weight: normal;}


  /************ section #development ************/

  section#development { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box;}

  .deve-stitle { width: 100%; font-size: 1.2em; font-weight: 600; text-align: center;}

  .column-full .content .title img.deve-title { margin: 0 auto;}
  .column-full .content .title img.deve-title-mo { display: none;}

  .column-full .content .memo-table-full { clear: both; width: 90%; margin: 0 auto;}
  .column-full .content .memo-table-full .list { width: 100%; padding: 15px 0; display: flex; justify-content: flex-start; align-items: stretch; background-image: url("../images/memo_list_line.png"); background-repeat: repeat-y; background-position: 10px top;}
  .column-full .content .memo-table-full .list .year { width: 90px; height: 40px; padding: 7px 0 0 0; color: #fff; font-size: 1.1em; text-align: center; background-color: #FF00F4; box-sizing: border-box;}
  .column-full .content .memo-table-full .list .triangle { width: 0; height: 0; border: 20px solid; border-color: transparent transparent transparent #FF00F4;}
  .column-full .content .memo-table-full .list .memo { width: calc(100% - 110px); padding: 5px 0 0 0;}

  ul.deve-dot { width: 100%; padding: 0; margin: 0; list-style: disc; display: block;}
  ul.deve-dot li { padding: 0; margin: 0 0 0 26px; font-size: 1.1em; line-height: 1.8em;}


  /************ section #operators ************/

  .operators-table-full { clear: both; width: 100%;}
  .operators-table-full .caption-full { width: 100%; color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.2em; text-align: center; background-color: #666; display: flex; justify-content: flex-start; align-items: stretch;}
  .operators-table-full .caption-full .caption-1 { width: 10%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-2 { width: 10%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-3 { width: 20%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-4 { width: 35%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-5 { width: 15%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-6 { width: 10%; padding: 5px; box-sizing: border-box;}
  .operators-table-full .column-full { width: 100%; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .operators-table-full .column-full .column-1 { width: 10%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-2 { width: 10%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-3 { width: 20%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-4 { width: 35%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-5 { width: 15%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 { width: 10%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 a { color: #FF00F4; text-decoration: none;}
  .operators-table-full .column-full .column-6 a:hover { text-decoration: underline;}


  /************ section #sitemap ************/

  section#sitemap { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box;}

  .column-full .content ul.sitemap-content { clear: both; width: 96%; padding: 0; margin: 30px auto 0 auto; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .column-full .content ul.sitemap-content li { padding: 0; margin: 0 30px 40px 30px;}
  .column-full .content ul.sitemap-content li a { padding: 0 0 3px 0; color: #FF00F4; font-size: 1.4em; font-weight: 600; text-decoration: none; border-bottom: 3px #FF00F4 solid;}
  .column-full .content ul.sitemap-content li ul.sm-popup { padding: 30px 0 0 0; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 { padding: 10px 0 10px 15px; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}


  /************ section #error404 ************/

  section#error404 { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box;}

  .column-full .content .error-title { clear: both; width: 100%; padding: 60px 0; color: #004978; font-size: 4em; font-weight: 600; text-align: center;}
  .column-full .content .error-text { clear: both; width: 100%; padding: 0 0 100px 0; color: #004978; font-size: 1.8em; text-align: center;}
  .column-full .content .error-goback { clear: both; width: 160px; margin: 0 auto;}
  .column-full .content .error-goback a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 14px; background-color: #FF00F4; display: block;}
  .column-full .content .error-goback a:hover { background-color: #ef95b3;}

  
  /************ footer ************/

  footer { clear: both; width: 100%; padding: 20px calc(50% - 650px) 60px calc(50% - 650px); box-sizing: border-box; position: relative; z-index: 2;}

  .footer-nav { width: 100%; margin: 0 0 20px 0;}
  .footer-nav ul.ft-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .footer-nav ul.ft-nav li { padding: 0; margin: 0 20px 30px 20px;}
  .footer-nav ul.ft-nav li a { padding: 3px 0; color: #fff; font-size: 1.2em; font-weight: 600; border-bottom: 2px #fff solid; text-decoration: none;}
  .footer-nav ul.ft-nav li a:hover { color: #fff; border-bottom: 2px #fff solid;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup { padding: 20px 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li { padding: 0; margin: 0 0 10px 0; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a { color: #fff; font-size: 1.1em; line-height: 1.2em; font-weight: normal; text-decoration: none; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a:hover { color: #fff;}

  .org-list-full { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
  .org-list-full .org-list { display: flex; justify-content: flex-start; align-items: center;}
  .org-list-full .org-list .caption { margin: 0 15px 0 0; color: #fff; line-height: 1em;}
  .org-list-full .org-list .column { margin: 0 60px 0 0;}
  .org-list-full .org-list .column img.ft-org-logo-1 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-1-1 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-2 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-3 { width: 90px; height: auto;}

  .social-icon-list { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
  .social-icon-list a { margin: 40px 10px 10px 10px; text-decoration: none; display: block;}
  .social-icon-list span.icon { color: #fff; font-size: 2em;}
  .social-icon-list img.ft-facebook { width: 134px; height: auto;}


}

@media screen and (min-width: 1280px) and (max-width: 1599px) {

  img.body-bg-top { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}
  img.body-bg-bottom { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: 1;}


  /************ go top button ************/

  #gotop-bt { width: 70px; height: 70px; color: #004978; font-size: 3em; border-radius: 16px; background-color: #00DBEF; display: flex; justify-content: center; align-items: center; cursor: pointer; position: fixed; bottom: 20px; right: 10px; z-index: 1000;}
  #gotop-bt img.icon { width: 40px; height: auto;}


  /************ header + nav ************/

  header { width: 100%; position: relative; z-index: 999;}

  .header-logo { width: 100%; padding: 50px calc(50% - 600px); box-sizing: border-box;}
  .header-logo a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-logo a .header-title { width: 40%;}
  .header-logo a .header-title img { width: 80%; height: auto; margin: 0 auto;}
  .header-logo a .main-vision { width: 60%;}
  .header-logo a .main-vision img { width: 80%; height: auto; margin: 0 auto;}

  nav#mo { display: none;}

  nav#pc { clear: both; width: 1200px; margin: 0 auto; position: relative; z-index: 999;}
  nav#pc ul.menu { width: 100%; padding: 0; margin: 0; border-radius: 40px; background-color: #00DBEF; list-style: none; display: flex; justify-content: center;}
  nav#pc ul.menu li { padding: 0; margin: 0; position: relative;}
  nav#pc ul.menu li a { padding: 15px 30px; color: #004978; font-size: 2em; font-weight: 500; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.menu li a:hover { background-color: rgba(255, 255, 255, 0.3);}
  nav#pc ul.menu li a.sel { background-color: rgba(255, 255, 255, 0.3);}
  nav#pc ul.menu li .popup-top { width: 100%; height: 20px; background-color: #FF00F4; position: absolute; top: -20px; left: 0; z-index: 1; display: none;}
  nav#pc ul.menu li .popup { width: 100%; padding: 20px 0 20px 0; box-sizing: border-box; background-color: #FF00F4; position: absolute; top: 75px; left: 0; z-index: 1; display: none;}
  nav#pc ul.menu li .popup .menu { width: 100%; padding: 15px 40px; color: #fff; font-size: 2rem; font-weight: 500; background-color: #77FFEA; box-sizing: border-box;}
  nav#pc ul.menu li .popup ul { width:100%; padding: 0; margin: 0; list-style: none; display: block;}
  nav#pc ul.menu li .popup ul li { padding: 0; margin: 0;}
  nav#pc ul.menu li .popup ul li a { width: 100%; padding: 20px; color: #fff; font-size: 1.6rem; font-weight: 400; line-height: 1.2em; text-align: center; text-decoration: none; background-color: transparent; box-sizing: border-box; display: block; cursor: pointer;}
  nav#pc ul.menu li .popup ul li a:hover { background-color: rgba(0, 0, 0, 0.2);}
  nav#pc ul.menu li .popup ul li ul.popup-2 { width: 100%; padding: 0; margin: 0; list-style: none; background-color: rgba(255,255,255,0.6); display: none;}
  nav#pc ul.menu li .popup ul li ul.popup-2 li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.menu li .popup ul li ul.popup-2 li a { color: #FF00F4; text-decoration: none;}
  nav#pc ul.menu li .popup ul li ul.popup-2 li a:hover { background-color: rgba(255,255,255,0.8);}


  /************ section #hp-content ************/

  section#hp-content { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box; position: relative; z-index: 2;}

  .column-half { width: calc(50% - 20px); margin: 0 10px 30px 10px; float: left;}
  .column-half .top { width: 100%;}
  .column-half .bottom { width: 100%;}
  img.col-hf-top-mo, img.col-hf-bottom-mo { display: none;}
  img.col-hf-top, img.col-hf-bottom { width: 100%; height: auto;}
  .column-half .content { width: 100%; min-height: 450px; background-image: url('../images/column_half_bg.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-half .content .title { width: 100%; padding: 0 35px 40px 65px; box-sizing: border-box;}
  .column-half .content .title img { margin: 0 auto;}
  .column-half .content .text { width: 100%; padding: 0 35px 0 65px; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .column-half .content .news-list { width: calc(100% - 100px); padding: 10px 0; margin: 0 35px 0 65px; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .column-half .content .news-list .news-title { width: calc(100% - 120px); font-size: 1.1em; line-height: 1.4em;}
  .column-half .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-half .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-half .content .news-list .news-date { width: 120px; font-size: 1.1em; line-height: 1.4em; text-align: right;}
  
  .hp-more-bt { clear: both; width: 80px; margin: 30px 70px 0 0; float: right;}
  .hp-more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 0.9em; line-height: 1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .hp-more-bt a:hover { color: #00DBEF;}

  .column-full { clear: both; width: 100%;}
  .column-full .top { width: 100%;}
  .column-full .bottom { width: 100%;}
  img.col-fl-top-mo, img.col-fl-bottom-mo { display: none;}
  img.col-fl-top, img.col-fl-bottom { width: 100%; height: auto;}
  .column-full .content { width: 100%; padding: 0 0 0 45px; box-sizing: border-box; background-image: url('../images/column_full_bg.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-full .content .title { width: 100%; padding: 0 35px 40px 35px; box-sizing: border-box;}
  .column-full .content .title img { margin: 0 auto;}
  .column-full .content .title-s { clear: both; width: 100%; padding: 0 35px 40px 35px; color: #FF00F4; font-size: 2em; font-weight: 600; text-align: center; box-sizing: border-box;}
  .column-full .content .videos-list { width: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .column-full .content .videos-list .videos-box { width: calc(100% / 3 - 40px); margin: 0 20px;}
  .column-full .content .videos-list .videos-box img { width: 100%; height: auto;}
  .column-full .content .videos-list .videos-box .v-title { clear: both; width: 100%; padding: 5px 0 0 0; font-size: 1rem;}


  /************ section #news ************/

  section#news { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box;}

  .column-full .content .news-list { clear: both; width: 80%; padding: 10px 0; margin: 0 auto; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .column-full .content .news-list .news-title { width: calc(100% - 120px); font-size: 1.1em; line-height: 1.4em;}
  .column-full .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-full .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-full .content .news-list .news-date { width: 120px; font-size: 1em; line-height: 1.4em; text-align: right;}

  .column-full .content .news-con-title { width: 80%; padding: 0 0 10px 0; margin: 0 auto; font-size: 1.4em; line-height: 1.2em; font-weight: 600;}
  .column-full .content .news-con-date { clear: both; width: 80%; margin: 0 auto; font-size: 0.9em; text-align: right;}
  .column-full .content .news-content { clear: both; width: 80%; margin: 40px auto 0 auto; font-size: 1.1em; line-height: 1.8em;}
  .column-full .content .news-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .column-full .content .news-content a:hover { color: #FF00F4; border-bottom: 1px #FF00F4 dashed;}

  .column-full .content .news-content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .goback-bt a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .goback-bt a:hover { color: #00DBEF;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box;}

  .column-full .content .about-text-context { clear: both; width: 84%; margin: 0 auto; font-size: 1.1em; line-height: 1.8em;}

  .column-full .content ul.history-list-nav { clear: both; width: 90%; padding: 0; margin: 0 auto 30px auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .column-full .content ul.history-list-nav li { width: 100px; padding: 0; margin: 0 5px 10px 5px;}
  .column-full .content ul.history-list-nav li a { width: 100%; padding: 5px 0; color: #004978; font-size: 1.2em; text-align: center; text-decoration: none; background-color: #00DBEF; display: block;}
  .column-full .content ul.history-list-nav li a:hover { color: #00DBEF; background-color: #004978;}
  .column-full .content ul.history-list-nav li a.sel { color: #fff; background-color: #FF00F4;}

  .column-full .content .history-list-content { clear: both; width: 80%; margin: 0 auto; font-size: 1.2rem; line-height: 1.8em;}
  .column-full .content .history-list-content div { width: 100%;}
  .column-full .content .history-list-content div .title-year { width: 100%; margin: 0 0 20px 0; color: #FF00F4; font-size: 1.4rem; font-weight: 600;}


  /************ section #awards ************/

  section#awards { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box;}

  .column-full .content .awards-text-context { clear: both; width: 80%; margin: 0 auto; font-size: 1.4em; line-height: 1.6em; font-weight: 600;}

  .column-full .content .apply-list-table { clear: both; width: 60%; padding: 40px; margin: 0 auto; font-size: 1.6rem; line-height: 1.8em; box-sizing: border-box;}
  .column-full .content .apply-list-table ul.num { padding: 0 0 0 90px; margin: 0; list-style: decimal; display: block;}
  .column-full .content .apply-list-table ul.num li { padding: 0; margin: 0;}

  .column-full .content .apply-list-table table.apply-table { width: 100%; border: 1px #00DBEF solid; border-collapse: collapse; border-spacing:0; background-color: #fff;}
  .column-full .content .apply-list-table table.apply-table thead { color: #fff; font-size: 1.2em; font-weight: 600; line-height: 1.2em; text-align: center; background-color: #00DBEF;}
  .column-full .content .apply-list-table table.apply-table tbody { font-size: 1.1em;}

  .column-full .content .apply-list-table .caption-full { width: 100%; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00DBEF; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .caption-full .caption-1 { width: 25%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-2 { width: 30%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-3 { width: 15%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-4 { width: 15%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-5 { width: 15%; padding: 5px; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full { clear: both; width: 100%; font-size: 1.2em; border-bottom: 1px #00DBEF solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .column-full .column-1 { width: 25%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-2 { width: 30%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-3 { width: 15%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-4 { width: 15%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-5 { width: 15%; padding: 5px; text-align: center; box-sizing: border-box;}

  .column-full .content .apply-notice { clear: both; width: 80%; margin: 30px auto 0 auto; line-height: 1.6em;}


  /************ section #videos ************/

  section#videos { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box;}

  .column-full .content .videos-list-context { clear: both; width: 90%; padding: 0 0 40px 0; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .column-full .content .videos-list-context .video-list { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}
  .column-full .content .videos-list-context .video-list .pic { width: 100%; height: 190px; display: flex; align-items: center; overflow: hidden;}
  .column-full .content .videos-list-context .video-list .pic img { width: 100%; height: auto;}
  .column-full .content .videos-list-context .video-list .title { width: 100%; padding: 10px 0 0 0; font-size: 1.2em; font-weight: 600; line-height: 1.2em;}
  .column-full .content .videos-list-context .video-list .title font.date { color: #666; font-size: 0.8rem; font-weight: normal;}
  .column-full .content .videos-list-context .video-list .title span.date { color: #666; font-size: 0.8rem; font-weight: normal;}


  /************ section #development ************/

  section#development { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box;}

  .deve-stitle { width: 100%; font-size: 1.2em; font-weight: 600; text-align: center;}

  .column-full .content .title img.deve-title { margin: 0 auto;}
  .column-full .content .title img.deve-title-mo { display: none;}

  .column-full .content .memo-table-full { clear: both; width: 90%; margin: 0 auto;}
  .column-full .content .memo-table-full .list { width: 100%; padding: 15px 0; display: flex; justify-content: flex-start; align-items: stretch; background-image: url("../images/memo_list_line.png"); background-repeat: repeat-y; background-position: 10px top;}
  .column-full .content .memo-table-full .list .year { width: 90px; height: 40px; padding: 7px 0 0 0; color: #fff; font-size: 1.1em; text-align: center; background-color: #FF00F4; box-sizing: border-box;}
  .column-full .content .memo-table-full .list .triangle { width: 0; height: 0; border: 20px solid; border-color: transparent transparent transparent #FF00F4;}
  .column-full .content .memo-table-full .list .memo { width: calc(100% - 110px); padding: 5px 0 0 0;}

  ul.deve-dot { width: 100%; padding: 0; margin: 0; list-style: disc; display: block;}
  ul.deve-dot li { padding: 0; margin: 0 0 0 26px; font-size: 1.1em; line-height: 1.8em;}


  /************ section #operators ************/

  .operators-table-full { clear: both; width: 100%;}
  .operators-table-full .caption-full { width: 100%; color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.2em; text-align: center; background-color: #666; display: flex; justify-content: flex-start; align-items: stretch;}
  .operators-table-full .caption-full .caption-1 { width: 10%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-2 { width: 10%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-3 { width: 20%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-4 { width: 35%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-5 { width: 15%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-6 { width: 10%; padding: 5px; box-sizing: border-box;}
  .operators-table-full .column-full { width: 100%; font-size: 0.9rem; line-height: 1.2em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .operators-table-full .column-full .column-1 { width: 10%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-2 { width: 10%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-3 { width: 20%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-4 { width: 35%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-5 { width: 15%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 { width: 10%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 a { color: #FF00F4; text-decoration: none;}
  .operators-table-full .column-full .column-6 a:hover { text-decoration: underline;}


  /************ section #sitemap ************/

  section#sitemap { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box;}

  .column-full .content ul.sitemap-content { clear: both; width: 96%; padding: 0; margin: 30px auto 0 auto; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .column-full .content ul.sitemap-content li { padding: 0; margin: 0 30px 40px 30px;}
  .column-full .content ul.sitemap-content li a { padding: 0 0 3px 0; color: #FF00F4; font-size: 1.4em; font-weight: 600; text-decoration: none; border-bottom: 3px #FF00F4 solid;}
  .column-full .content ul.sitemap-content li ul.sm-popup { padding: 30px 0 0 0; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 { padding: 10px 0 10px 15px; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}


  /************ section #error404 ************/

  section#error404 { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box;}

  .column-full .content .error-title { clear: both; width: 100%; padding: 60px 0; color: #004978; font-size: 4em; font-weight: 600; text-align: center;}
  .column-full .content .error-text { clear: both; width: 100%; padding: 0 0 100px 0; color: #004978; font-size: 1.8em; text-align: center;}
  .column-full .content .error-goback { clear: both; width: 160px; margin: 0 auto;}
  .column-full .content .error-goback a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 14px; background-color: #FF00F4; display: block;}
  .column-full .content .error-goback a:hover { background-color: #FF00F4;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 20px calc(50% - 600px) 60px calc(50% - 600px); box-sizing: border-box; position: relative; z-index: 2;}

  .footer-nav { width: 100%; margin: 0 0 20px 0;}
  .footer-nav ul.ft-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .footer-nav ul.ft-nav li { padding: 0; margin: 0 20px 30px 20px;}
  .footer-nav ul.ft-nav li a { padding: 3px 0; color: #fff; font-size: 1.2em; font-weight: 600; border-bottom: 2px #fff solid; text-decoration: none;}
  .footer-nav ul.ft-nav li a:hover { color: #fff; border-bottom: 2px #fff solid;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup { padding: 20px 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li { padding: 0; margin: 0 0 10px 0; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a { color: #fff; font-size: 1.1em; line-height: 1.2em; font-weight: normal; text-decoration: none; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a:hover { color: #fff;}

  .org-list-full { width: 100%; display: flex; justify-content: center; align-items: center;}
  .org-list-full .org-list { display: flex; justify-content: flex-start; align-items: center;}
  .org-list-full .org-list .caption { margin: 0 15px 0 0; color: #fff; line-height: 1em;}
  .org-list-full .org-list .column { margin: 0 60px 0 0;}
  .org-list-full .org-list .column img.ft-org-logo-1 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-1-1 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-2 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-3 { width: 90px; height: auto;}

  .social-icon-list { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
  .social-icon-list a { margin: 40px 10px 10px 10px; text-decoration: none; display: block;}
  .social-icon-list span.icon { color: #fff; font-size: 2em;}
  .social-icon-list img.ft-facebook { width: 134px; height: auto;}

  
}

@media screen and (min-width: 767px) and (max-width: 1279px) {

  img.body-bg-top { width: 140%; height: auto; position: absolute; top: 0; left: -20%; z-index: 1;}
  img.body-bg-bottom { width: 140%; height: auto; position: absolute; bottom: 0; left: -20%; z-index: 1;}


  /************ go top button ************/

  #gotop-bt { width: 70px; height: 70px; color: #004978; font-size: 3em; border-radius: 16px; background-color: #00DBEF; display: flex; justify-content: center; align-items: center; cursor: pointer; position: fixed; bottom: 20px; right: 10px; z-index: 1000;}
  #gotop-bt img.icon { width: 40px; height: auto;}

    
  /************ header + nav ************/

  header { width: 100%; position: relative; z-index: 999;}

  .header-logo { width: 100%; padding: 20px 40px; box-sizing: border-box;}
  .header-logo a { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-logo a .header-title { width: 40%;}
  .header-logo a .header-title img { width: 95%; height: auto; margin: 0 auto;}
  .header-logo a .main-vision { width: 60%;}
  .header-logo a .main-vision img { width: 95%; height: auto; margin: 0 auto;}

  nav#pc { display: none;}

  nav#mo { clear: both; width: 96%; margin: 0 auto; border-radius: 40px; background-color: #00DBEF; position: relative; z-index: 999;}
  nav#mo .nav-icon { width: 80%; margin: 0 auto; color: #004978; font-size: 2.5em; text-align: center; cursor: pointer;}
  nav#mo .nav-icon img.icon { width: 36px; height: auto; padding: 14px 0; margin: 0 auto;}
  nav#mo ul.menu { clear: both; width: 80%; padding: 40px 0; margin: 0; background-color: #FF00F4; list-style: none; display: none; position: absolute; top: 58px; left: 10%;}
  nav#mo ul.menu li { width: 100%; padding: 0; margin: 0; position: relative;}
  nav#mo ul.menu li a#nav-link { width: 100%; padding: 15px 30px; color: #fff; font-size: 1.8rem; font-weight: 500; text-decoration: none; box-sizing: border-box; cursor: pointer; display: flex; justify-content: center; align-items: center;}
  nav#mo ul.menu li a#nav-link img.icon { width: 22px; height: auto;}
  nav#mo ul.menu li a#nav-link.sel { background-color: rgba(255, 255, 255, 0.3);}
  nav#mo ul.menu li .popup { width: 100%; padding: 20px 0 20px 0; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.3); display: none;}
  nav#mo ul.menu li .popup ul.menu-pop { width:100%; padding: 0 60px; margin: 0; box-sizing: border-box; list-style: none; display: block;}
  nav#mo ul.menu li .popup ul.menu-pop li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo ul.menu li .popup ul.menu-pop li:last-child { border: 0;}
  nav#mo ul.menu li .popup ul.menu-pop li a#pop-link { width: 100%; padding: 20px 0; color: #fff; font-size: 1.6rem; font-weight: 400; line-height: 1.2em; text-align: center; text-decoration: none; background-color: transparent; display: block;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 { width: 100%; padding: 0; margin: 0; list-style: none; display: none;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 li:last-child { border: 0;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 li a#pop-link-2 { width: 100%; padding: 20px 0; color: #ff0000; font-size: 1.6rem; font-weight: 400; line-height: 1.2em; text-align: center; text-decoration: none; display: block;}


  /************ section #hp-content ************/

  section#hp-content { clear: both; width: 100%; padding: 40px 40px 60px 40px; box-sizing: border-box;}

  .column-half { width: 100%; margin: 0 0 30px 0;}
  .column-half .top { width: 100%;}
  .column-half .bottom { width: 100%;}
  img.col-hf-top-mo, img.col-hf-bottom-mo { display: none;}
  img.col-hf-top, img.col-hf-bottom { width: 100%; height: auto;}
  .column-half .content { width: 100%; background-image: url('../images/column_half_bg.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-half .content .title { width: 100%; padding: 0 5vw 40px 10vw; box-sizing: border-box;}
  .column-half .content .title img { margin: 0 auto;}
  .column-half .content .text { width: 100%; padding: 0 5vw 0 10vw; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .column-half .content .news-list { width: calc(100% - 15vw); padding: 10px 0; margin: 0 5vw 0 10vw; border-bottom: 1px #ccc solid;}
  .column-half .content .news-list .news-title { width: 100%; font-size: 1.1em; line-height: 1.4em;}
  .column-half .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-half .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-half .content .news-list .news-date { clear: both; width: 100%; font-size: 0.9em; line-height: 1.4em; text-align: right;}
  
  .hp-more-bt { clear: both; width: 80px; margin: 30px 10vw 0 0; float: right;}
  .hp-more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 0.9em; line-height: 1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .hp-more-bt a:hover { color: #00DBEF;}

  .column-full { clear: both; width: 100%;}
  .column-full .top { width: 100%;}
  .column-full .bottom { width: 100%;}
  img.col-fl-top-mo, img.col-fl-bottom-mo { display: none;}
  img.col-fl-top, img.col-fl-bottom { width: 100%; height: auto;}
  .column-full .content { width: 100%; padding: 0 0 0 3.5vw; box-sizing: border-box; background-image: url('../images/column_full_bg.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-full .content .title { width: 100%; padding: 0 5vw 40px 5vw; box-sizing: border-box;}
  .column-full .content .title img { width: auto; height: 65px; margin: 0 auto;}
  .column-full .content .title-s { clear: both; width: 100%; padding: 0 5vw 40px 5vw; box-sizing: border-box; color: #FF00F4; font-size: 2em; font-weight: 600; text-align: center;}
  .column-full .content .videos-list { width: 100%; padding: 0 10vw; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .column-full .content .videos-list .videos-box { width: calc(100% / 3 - 20px); margin: 0 10px;}
  .column-full .content .videos-list .videos-box img { width: 100%; height: auto;}
  .column-full .content .videos-list .videos-box .v-title { clear: both; width: 100%; padding: 5px 0 0 0; font-size: 1rem;}


  /************ section #news ************/

  section#news { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}

  .column-full .content .news-list { width: 90%; padding: 10px 0; margin: 0 auto; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .column-full .content .news-list .news-title { width: calc(100% - 120px); font-size: 1.1em; line-height: 1.4em;}
  .column-full .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-full .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-full .content .news-list .news-date { width: 120px; font-size: 1em; line-height: 1.4em; text-align: right;}

  .column-full .content .news-con-title { width: 90%; padding: 0 0 10px 0; margin: 0 auto; font-size: 1.4em; line-height: 1.2em; font-weight: 600;}
  .column-full .content .news-con-date { clear: both; width: 90%; margin: 0 auto; font-size: 0.9em; text-align: right;}
  .column-full .content .news-content { clear: both; width: 90%; margin: 40px auto 0 auto; font-size: 1.1em; line-height: 1.8em;}
  .column-full .content .news-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .column-full .content .news-content a:hover { color: #FF00F4; border-bottom: 1px #FF00F4 dashed;}

  .column-full .content .news-content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .goback-bt a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .goback-bt a:hover { color: #00DBEF;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}

  .column-full .content .about-text-context { clear: both; width: 90%; margin: 0 auto; font-size: 1.1em; line-height: 1.8em;}

  .column-full .content ul.history-list-nav { clear: both; width: 90%; padding: 0; margin: 0 auto 30px auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .column-full .content ul.history-list-nav li { width: 100px; padding: 0; margin: 0 5px 10px 5px;}
  .column-full .content ul.history-list-nav li a { width: 100%; padding: 5px 0; color: #004978; font-size: 1.2em; text-align: center; text-decoration: none; background-color: #00DBEF; display: block;}
  .column-full .content ul.history-list-nav li a:hover { color: #00DBEF; background-color: #004978;}
  .column-full .content ul.history-list-nav li a.sel { color: #fff; background-color: #FF00F4;}

  .column-full .content .history-list-content { clear: both; width: 90%; margin: 0 auto; font-size: 1.2rem; line-height: 1.8em;}
  .column-full .content .history-list-content div { width: 100%;}
  .column-full .content .history-list-content div .title-year { width: 100%; margin: 0 0 20px 0; color: #FF00F4; font-size: 1.4rem; font-weight: 600;}


  /************ section #awards ************/

  section#awards { clear: both; width: 100%; padding: 40px 40px 60px 40px; box-sizing: border-box;}

  .column-full .content .awards-text-context { clear: both; width: 90%; margin: 0 auto; font-size: 1.4em; line-height: 1.6em; font-weight: 600; box-sizing: border-box;}

  .column-full .content .apply-list-table { clear: both; width: 90%; padding: 40px; margin: 0 auto; font-size: 1.6rem; line-height: 1.8em; box-sizing: border-box;}
  .column-full .content .apply-list-table ul.num { padding: 0 0 0 90px; margin: 0; list-style: decimal; display: block;}
  .column-full .content .apply-list-table ul.num li { padding: 0; margin: 0;}

  .column-full .content .apply-list-table table.apply-table { width: 100%; border: 1px #00DBEF solid; border-collapse: collapse; border-spacing:0; background-color: #fff;}
  .column-full .content .apply-list-table table.apply-table thead { color: #fff; font-size: 1.2em; font-weight: 600; line-height: 1.2em; text-align: center; background-color: #00DBEF;}
  .column-full .content .apply-list-table table.apply-table tbody { font-size: 1.1em;}

  .column-full .content .apply-list-table .caption-full { width: 100%; color: #fff; font-size: 1.2em; font-weight: 600; text-align: center; background-color: #00DBEF; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .caption-full .caption-1 { width: 22%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-2 { width: 39%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-3 { width: 13%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-4 { width: 13%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-5 { width: 13%; padding: 5px; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full { clear: both; width: 100%; font-size: 1.2em; border-bottom: 1px #00DBEF solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .column-full .column-1 { width: 22%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-2 { width: 39%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-3 { width: 13%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-4 { width: 13%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-5 { width: 13%; padding: 5px; text-align: center; box-sizing: border-box;}

  .column-full .content .apply-notice { clear: both; width: 90%; margin: 30px auto 0 auto; line-height: 1.6em;}


  /************ section #videos ************/

  section#videos { clear: both; width: 100%; padding: 40px 40px 60px 40px; box-sizing: border-box;}

  .column-full .content .videos-list-context { clear: both; width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .column-full .content .videos-list-context .video-list { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}
  .column-full .content .videos-list-context .video-list .pic { width: 100%; height: 21vw; display: flex; align-items: center; overflow: hidden;}
  .column-full .content .videos-list-context .video-list .pic img { width: 100%; height: auto;}
  .column-full .content .videos-list-context .video-list .title { width: 100%; padding: 10px 0 0 0; font-size: 1.2em; font-weight: 600; line-height: 1.2em;}
  .column-full .content .videos-list-context .video-list .title font.date { color: #666; font-size: 0.8rem; font-weight: normal;}
  .column-full .content .videos-list-context .video-list .title span.date { color: #666; font-size: 0.8rem; font-weight: normal;}

  
  /************ section #development ************/

  section#development { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}

  .deve-stitle { width: 100%; font-size: 1.2em; font-weight: 600; text-align: center;}

  .column-full .content .title img.deve-title { width: auto; height: 65px; margin: 0 auto;}
  .column-full .content .title img.deve-title-mo { display: none;}

  .column-full .content .memo-table-full { clear: both; width: 90%; margin: 0 auto;}
  .column-full .content .memo-table-full .list { width: 100%; padding: 15px 0; display: flex; justify-content: flex-start; align-items: stretch; background-image: url("../images/memo_list_line.png"); background-repeat: repeat-y; background-position: 10px top;}
  .column-full .content .memo-table-full .list .year { width: 90px; height: 40px; padding: 7px 0 0 0; color: #fff; font-size: 1.1em; text-align: center; background-color: #FF00F4; box-sizing: border-box;}
  .column-full .content .memo-table-full .list .triangle { width: 0; height: 0; border: 20px solid; border-color: transparent transparent transparent #FF00F4;}
  .column-full .content .memo-table-full .list .memo { width: calc(100% - 110px); padding: 5px 0 0 0;}

  ul.deve-dot { width: 100%; padding: 0; margin: 0; list-style: disc; display: block;}
  ul.deve-dot li { padding: 0; margin: 0 0 0 26px; font-size: 1.1em; line-height: 1.8em;}


  /************ section #operators ************/

  .operators-table-full { clear: both; width: 100%;}
  .operators-table-full .caption-full { width: 100%; color: #fff; font-size: 0.9rem; font-weight: 500; line-height: 1.2em; text-align: center; background-color: #666; display: flex; justify-content: flex-start; align-items: stretch;}
  .operators-table-full .caption-full .caption-1 { width: 10%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-2 { width: 10%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-3 { width: 20%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-4 { width: 35%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-5 { width: 15%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-6 { width: 10%; padding: 5px; box-sizing: border-box;}
  .operators-table-full .column-full { width: 100%; font-size: 0.8rem; line-height: 1.2em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .operators-table-full .column-full .column-1 { width: 10%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-2 { width: 10%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-3 { width: 20%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-4 { width: 35%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-5 { width: 15%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 { width: 10%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 a { color: #FF00F4; text-decoration: none;}
  .operators-table-full .column-full .column-6 a:hover { text-decoration: underline;}


  /************ section #sitemap ************/

  section#sitemap { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}

  .column-full .content ul.sitemap-content { clear: both; width: 96%; padding: 0; margin: 30px auto 0 auto; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .column-full .content ul.sitemap-content li { padding: 0; margin: 0 30px 40px 30px;}
  .column-full .content ul.sitemap-content li a { padding: 0 0 3px 0; color: #FF00F4; font-size: 1.4em; font-weight: 600; text-decoration: none; border-bottom: 3px #FF00F4 solid;}
  .column-full .content ul.sitemap-content li ul.sm-popup { padding: 30px 0 0 0; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 { padding: 10px 0 10px 15px; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}


  /************ section #error404 ************/

  section#error404 { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}

  .column-full .content .error-title { clear: both; width: 100%; padding: 60px 0; color: #004978; font-size: 4em; font-weight: 600; text-align: center;}
  .column-full .content .error-text { clear: both; width: 100%; padding: 0 0 100px 0; color: #004978; font-size: 1.8em; text-align: center;}
  .column-full .content .error-goback { clear: both; width: 160px; margin: 0 auto;}
  .column-full .content .error-goback a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 14px; background-color: #FF00F4; display: block;}
  .column-full .content .error-goback a:hover { background-color: #ef95b3;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 20px 20px 60px 20px; box-sizing: border-box; position: relative; z-index: 2;}

  .footer-nav { width: 100%; margin: 0 0 20px 0;}
  .footer-nav ul.ft-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .footer-nav ul.ft-nav li { padding: 0; margin: 0 20px 30px 20px;}
  .footer-nav ul.ft-nav li a { padding: 3px 0; color: #fff; font-size: 1.2em; font-weight: 600; border-bottom: 2px #fff solid; text-decoration: none;}
  .footer-nav ul.ft-nav li a:hover { color: #fff; border-bottom: 2px #fff solid;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup { padding: 20px 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li { padding: 0; margin: 0 0 10px 0; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a { color: #fff; font-size: 1.1em; line-height: 1.2em; font-weight: normal; text-decoration: none; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a:hover { color: #fff;}

  .org-list-full { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .org-list-full .org-list { margin: 0 0 20px 0; display: flex; justify-content: flex-start; align-items: center;}
  .org-list-full .org-list .caption { margin: 0 15px 0 0; color: #fff; line-height: 1em;}
  .org-list-full .org-list .column { margin: 0 60px 0 0;}
  .org-list-full .org-list .column img.ft-org-logo-1 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-1-1 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-2 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-3 { width: 90px; height: auto;}

  .social-icon-list { clear: both; width: 100%; display: flex; justify-content: center; align-items: center;}
  .social-icon-list a { margin: 40px 10px 10px 10px; text-decoration: none; display: block;}
  .social-icon-list span.icon { color: #fff; font-size: 2em;}
  .social-icon-list img.ft-facebook { width: 134px; height: auto;}


}

@media screen and (max-width: 768px) {

  img.body-bg-top { width: 200%; height: auto; position: absolute; top: 0; left: -50%; z-index: 1;}
  img.body-bg-bottom { width: 200%; height: auto; position: absolute; bottom: 0; left: -50%; z-index: 1;}


  /************ go top button ************/

  #gotop-bt { width: 50px; height: 50px; color: #004978; font-size: 2.2em; border-radius: 16px; background-color: #00DBEF; display: flex; justify-content: center; align-items: center; cursor: pointer; position: fixed; bottom: 20px; right: 10px; z-index: 1000;}
  #gotop-bt img.icon { width: 30px; height: auto;}


  /************ header + nav ************/

  header { width: 100%; position: relative; z-index: 999;}

  .header-logo { width: 100%; padding: 20px 40px; box-sizing: border-box;}
  .header-logo a { width: 100%; display: block;}
  .header-logo a .header-title { width: 100%; margin: 0 0 30px 0;}
  .header-logo a .header-title img { width: 60%; height: auto; margin: 0 auto;}
  .header-logo a .main-vision { width: 100%;}
  .header-logo a .main-vision img { width: 100%; height: auto;}

  nav#pc { display: none;}

  nav#mo { clear: both; width: 96%; margin: 0 auto; border-radius: 40px; background-color: #00DBEF; position: relative; z-index: 999;}
  nav#mo .nav-icon { width: 80%; margin: 0 auto; color: #004978; font-size: 2.5em; text-align: center; cursor: pointer;}
  nav#mo .nav-icon img.icon { width: 36px; height: auto; padding: 14px 0; margin: 0 auto;}
  nav#mo ul.menu { clear: both; width: 90%; padding: 40px 0; margin: 0; background-color: #FF00F4; list-style: none; display: none; position: absolute; top: 58px; left: 5%;}
  nav#mo ul.menu li { width: 100%; padding: 0; margin: 0; position: relative;}
  nav#mo ul.menu li a#nav-link { width: 100%; padding: 15px 20px; color: #fff; font-size: 1.6rem; font-weight: 500; text-decoration: none; box-sizing: border-box; cursor: pointer; display: flex; justify-content: center; align-items: center;}
  nav#mo ul.menu li a#nav-link img.icon { width: 22px; height: auto;}
  nav#mo ul.menu li .popup { width: 100%; padding: 20px 0 20px 0; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.2); display: none;}
  nav#mo ul.menu li .popup ul.menu-pop { width:100%; padding: 0 60px; margin: 0; box-sizing: border-box; list-style: none; display: block;}
  nav#mo ul.menu li .popup ul.menu-pop li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo ul.menu li .popup ul.menu-pop li:last-child { border: 0;}
  nav#mo ul.menu li .popup ul.menu-pop li a#pop-link { width: 100%; padding: 20px 0; color: #fff; font-size: 1.4rem; font-weight: 400; line-height: 1.2em; text-align: center; text-decoration: none; background-color: transparent; display: block;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 { width: 100%; padding: 0; margin: 0; list-style: none; display: none;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 li:last-child { border: 0;}
  nav#mo ul.menu li .popup ul.menu-pop li ul.menu-pop-2 li a#pop-link-2 { width: 100%; padding: 20px 0; color: #ff0000; font-size: 1.6rem; font-weight: 400; line-height: 1.2em; text-align: center; text-decoration: none; display: block;}


  /************ section #hp-content ************/

  section#hp-content { clear: both; width: 100%; padding: 40px 10px 60px 10px; box-sizing: border-box;}

  .column-half { width: 100%; margin: 0 0 30px 0;}
  .column-half .top { width: 100%;}
  .column-half .bottom { width: 100%;}
  img.col-hf-top, img.col-hf-bottom { display: none;}
  img.col-hf-top-mo, img.col-hf-bottom-mo { width: 100%; height: auto;}
  .column-half .content { width: 100%; background-image: url('../images/column_half_bg_mo.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-half .content .title { width: 100%; padding: 0 5vw 40px 10vw; box-sizing: border-box;}
  .column-half .content .title img { width: auto; height: 60px; margin: 0 auto;}
  .column-half .content .title img.page-title-mo { width: 250px; height: auto; margin: 0 auto;}
  .column-half .content .title img.page-title { display: none;}
  .column-half .content .text { width: 100%; padding: 0 5vw 0 10vw; font-size: 1.1em; line-height: 2em; box-sizing: border-box;}
  .column-half .content .news-list { width: calc(100% - 15vw); padding: 10px 0; margin: 0 5vw 0 10vw; border-bottom: 1px #ccc solid;}
  .column-half .content .news-list .news-title { width: 100%; margin: 0 0 10px 0; font-size: 1.1em; line-height: 1.4em;}
  .column-half .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-half .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-half .content .news-list .news-date { width: 100%; font-size: 0.9em; line-height: 1.4em; text-align: right;}
  
  .hp-more-bt { clear: both; width: 80px; margin: 30px 10vw 0 0; float: right;}
  .hp-more-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 0.9em; line-height: 1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .hp-more-bt a:hover { color: #00DBEF;}

  .column-full { clear: both; width: 100%;}
  .column-full .top { width: 100%;}
  .column-full .bottom { width: 100%;}
  img.col-fl-top, img.col-fl-bottom { display: none;}
  img.col-fl-top-mo, img.col-fl-bottom-mo { width: 100%; height: auto;}
  .column-full .content { width: 100%; padding: 0 0 0 5vw; box-sizing: border-box; background-image: url('../images/column_full_bg_mo.png'); background-repeat: repeat-y; background-size: 100%;}
  .column-full .content .title { width: 100%; padding: 0 3vw 40px 3vw; box-sizing: border-box;}
  .column-full .content .title img { width: auto; height: 60px; margin: 0 auto;}
  .column-full .content .title-s { clear: both; width: 100%; padding: 0 3vw 40px 3vw; box-sizing: border-box; color: #FF00F4; font-size: 1.6em; font-weight: 600; text-align: center;}
  .column-full .content .videos-list { width: 100%; padding: 0 40px; box-sizing: border-box;}
  .column-full .content .videos-list .videos-box { width: 100%; margin: 0 0 20px 0;}
  .column-full .content .videos-list .videos-box img { width: 100%; height: auto;}
  .column-full .content .videos-list .videos-box .v-title { clear: both; width: 100%; padding: 5px 0 0 0; font-size: 1rem;}


  /************ section #news ************/

  section#news { clear: both; width: 100%; padding: 60px 10px; box-sizing: border-box;}

  .column-full .content .news-list { width: 90%; padding: 10px 0; margin: 0 auto; border-bottom: 1px #ccc solid;}
  .column-full .content .news-list .news-title { width: 100%; font-size: 1.1em; line-height: 1.4em;}
  .column-full .content .news-list .news-title a { color: #414141; text-decoration: none;}
  .column-full .content .news-list .news-title a:hover { color: #FF00F4;}
  .column-full .content .news-list .news-date { clear: both; width: 100%; margin: 10px 0 0 0; font-size: 1em; line-height: 1.2em; text-align: right;}

  .column-full .content .news-con-title { width: 90%; padding: 0 0 10px 0; margin: 0 auto; font-size: 1.4em; line-height: 1.2em; font-weight: 600;}
  .column-full .content .news-con-date { clear: both; width: 90%; margin: 0 auto; font-size: 0.9em; text-align: right;}
  .column-full .content .news-content { clear: both; width: 90%; margin: 40px auto 0 auto; font-size: 1.1em; line-height: 1.8em;}
  .column-full .content .news-content a { color: #414141; border-bottom: 1px #414141 dashed; text-decoration: none;}
  .column-full .content .news-content a:hover { color: #FF00F4; border-bottom: 1px #FF00F4 dashed;}

  .column-full .content .news-content img { max-width: 100%; height: auto;}

  .goback-bt { clear: both; width: 100px; margin: 40px auto 0 auto;}
  .goback-bt a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 12px; background-color: #004978; display: block;}
  .goback-bt a:hover { color: #00DBEF;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 60px 10px; box-sizing: border-box;}

  .column-full .content .about-text-context { clear: both; width: 94%; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}

  .column-full .content ul.history-list-nav { clear: both; width: 94%; padding: 0; margin: 0 auto 30px auto; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .column-full .content ul.history-list-nav li { width: 90px; padding: 0; margin: 0 5px 10px 5px;}
  .column-full .content ul.history-list-nav li a { width: 100%; padding: 5px 0; color: #004978; font-size: 1.2em; text-align: center; text-decoration: none; background-color: #00DBEF; display: block;}
  .column-full .content ul.history-list-nav li a:hover { color: #00DBEF; background-color: #004978;}
  .column-full .content ul.history-list-nav li a.sel { color: #fff; background-color: #FF00F4;}

  .column-full .content .history-list-content { clear: both; width: 94%; margin: 0 auto; font-size: 1rem; line-height: 1.8em;}
  .column-full .content .history-list-content div { width: 100%;}
  .column-full .content .history-list-content div .title-year { width: 100%; margin: 0 0 20px 0; color: #FF00F4; font-size: 1.2rem; font-weight: 600;}


  /************ section #awards ************/

  section#awards { clear: both; width: 100%; padding: 40px 10px 60px 10px; box-sizing: border-box;}

  .column-full .content .awards-text-context { clear: both; width: 90%; margin: 0 auto; font-size: 1.2em; line-height: 1.6em; font-weight: 600;}

  .column-full .content .apply-list-table { clear: both; width: 80%; padding: 0 0 40px 0; margin: 0 auto; font-size: 1.1rem; line-height: 1.8em;}
  .column-full .content .apply-list-table ul.num { padding: 0 0 0 60px; margin: 0; list-style: decimal; display: block;}
  .column-full .content .apply-list-table ul.num li { padding: 0; margin: 0;}

  .column-full .content .apply-list-table table.apply-table { width: 100%; border: 1px #00DBEF solid; border-collapse: collapse; border-spacing:0; background-color: #fff;}
  .column-full .content .apply-list-table table.apply-table thead { color: #fff; font-size: 1em; font-weight: 600; line-height: 1.2em; text-align: center; background-color: #00DBEF;}
  .column-full .content .apply-list-table table.apply-table tbody { font-size: 0.8em;}

  .column-full .content .apply-list-table .caption-full { width: 100%; color: #fff; font-size: 0.8em; font-weight: 600; text-align: center; background-color: #00DBEF; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .caption-full .caption-1 { width: 20%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-2 { width: 44%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-3 { width: 12%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-4 { width: 12%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .caption-full .caption-5 { width: 12%; padding: 5px; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full { clear: both; width: 100%; font-size: 0.8em; border-bottom: 1px #00DBEF solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .column-full .content .apply-list-table .column-full .column-1 { width: 20%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-2 { width: 44%; padding: 5px; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-3 { width: 12%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-4 { width: 12%; padding: 5px; text-align: center; border-right: 1px #00DBEF solid; box-sizing: border-box;}
  .column-full .content .apply-list-table .column-full .column-5 { width: 12%; padding: 5px; text-align: center; box-sizing: border-box;}

  .column-full .content .apply-notice { clear: both; width: 94%; margin: 30px auto 0 auto; font-size: 0.8em; line-height: 1.4em;}


  /************ section #videos ************/

  section#videos { clear: both; width: 100%; padding: 40px 10px 60px 10px; box-sizing: border-box;}

  .column-full .content .videos-list-context { clear: both; width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .column-full .content .videos-list-context .video-list { width: 100%; margin: 0 0 20px 0;}
  .column-full .content .videos-list-context .video-list .pic { width: 100%; height: 40vw; display: flex; align-items: center; overflow: hidden;}
  .column-full .content .videos-list-context .video-list .pic img { width: 100%; height: auto;}
  .column-full .content .videos-list-context .video-list .title { width: 100%; padding: 10px 0 0 0; font-size: 1.2em; font-weight: 600; line-height: 1.2em;}
  .column-full .content .videos-list-context .video-list .title font.date { color: #666; font-size: 0.8rem; font-weight: normal;}
  .column-full .content .videos-list-context .video-list .title span.date { color: #666; font-size: 0.8rem; font-weight: normal;}


  /************ section #development ************/

  section#development { clear: both; width: 100%; padding: 60px 10px; box-sizing: border-box;}

  .deve-stitle { width: 100%; font-size: 1.2em; font-weight: 600; text-align: center;}

  .column-full .content .title img.deve-title { display: none;}
  .column-full .content .title img.deve-title-mo { width: 250px; height: auto;}

  .column-full .content .memo-table-full { clear: both; width: 94%; margin: 0 auto;}
  .column-full .content .memo-table-full .list { width: 100%; padding: 15px 0; background-image: url("../images/memo_list_line.png"); background-repeat: repeat-y; background-position: -70px top; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .column-full .content .memo-table-full .list .year { width: 90px; height: 40px; padding: 7px 0 0 0; color: #fff; font-size: 1rem; text-align: center; background-color: #FF00F4; box-sizing: border-box;}
  .column-full .content .memo-table-full .list .triangle { width: 0; height: 0; border: 20px solid; border-color: transparent transparent transparent #FF00F4;}
  .column-full .content .memo-table-full .list .memo { clear: both; width: 100%; padding: 10px 0 0 0;}

  ul.deve-dot { width: 100%; padding: 0; margin: 0; list-style: disc; display: block;}
  ul.deve-dot li { padding: 0; margin: 0 0 0 22px; font-size: 1rem; line-height: 1.8em;}


  /************ section #operators ************/

  .operators-table-full { clear: both; width: 100%;}
  .operators-table-full .caption-full { width: 100%; color: #fff; font-size: 0.9rem; font-weight: 500; line-height: 1.2em; text-align: center; background-color: #666; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .operators-table-full .caption-full .caption-1 { width: 25%; padding: 5px; border-right: 1px #fff solid; border-bottom: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-2 { width: 25%; padding: 5px; border-right: 1px #fff solid; border-bottom: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-3 { width: 50%; padding: 5px; border-bottom: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-4 { width: 100%; padding: 5px; border-bottom: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-5 { width: 80%; padding: 5px; border-right: 1px #fff solid; box-sizing: border-box;}
  .operators-table-full .caption-full .caption-6 { width: 20%; padding: 5px; box-sizing: border-box;}
  .operators-table-full .column-full { width: 100%; font-size: 0.8rem; line-height: 1.2em; border-bottom: 2px #666 solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .operators-table-full .column-full .column-1 { width: 25%; padding: 5px; text-align: center; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-2 { width: 25%; padding: 5px; text-align: center; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-3 { width: 50%; padding: 5px; text-align: center; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-4 { width: 100%; padding: 5px; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-5 { width: 80%; padding: 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 { width: 20%; padding: 5px; text-align: center; box-sizing: border-box;}
  .operators-table-full .column-full .column-6 a { color: #FF00F4; text-decoration: none;}
  .operators-table-full .column-full .column-6 a:hover { text-decoration: underline;}


  /************ section #sitemap ************/

  section#sitemap { clear: both; width: 100%; padding: 60px 10px; box-sizing: border-box;}

  .column-full .content ul.sitemap-content { clear: both; width: 80%; padding: 0; margin: 30px auto 0 auto; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li { padding: 0; margin: 0 0 30px 0;}
  .column-full .content ul.sitemap-content li a { padding: 0 0 3px 0; color: #FF00F4; font-size: 1.4em; font-weight: 600; text-decoration: none; border-bottom: 3px #FF00F4 solid;}
  .column-full .content ul.sitemap-content li ul.sm-popup { padding: 30px 0 0 0; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 { padding: 10px 0 10px 15px; margin: 0; list-style: none; display: block;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li { padding: 0; margin: 0 0 15px 0;}
  .column-full .content ul.sitemap-content li ul.sm-popup-2 li a { color: #414141; font-size: 1.2rem; font-weight: normal; border: 0; text-decoration: none;}


  /************ section #error404 ************/

  section#error404 { clear: both; width: 100%; padding: 60px 10px; box-sizing: border-box;}

  .column-full .content .error-title { clear: both; width: 80%; padding: 60px 0; margin: 0 auto; color: #004978; font-size: 4em; font-weight: 600; text-align: center;}
  .column-full .content .error-text { clear: both; width: 80%; padding: 0 0 100px 0; margin: 0 auto; color: #004978; font-size: 1.8em; text-align: center;}
  .column-full .content .error-goback { clear: both; width: 160px; margin: 0 auto;}
  .column-full .content .error-goback a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 14px; background-color: #FF00F4; display: block;}
  .column-full .content .error-goback a:hover { background-color: #ef95b3;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 20px 20px 40px 20px; box-sizing: border-box; position: relative; z-index: 2;}

  .footer-nav { width: 100%; margin: 0 0 20px 0;}
  .footer-nav ul.ft-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .footer-nav ul.ft-nav li { padding: 0; margin: 0 15px 30px 15px;}
  .footer-nav ul.ft-nav li a { padding: 3px 0; color: #fff; font-size: 1.2em; font-weight: 600; border-bottom: 2px #fff solid; text-decoration: none;}
  .footer-nav ul.ft-nav li a:hover { color: #fff; border-bottom: 2px #fff solid;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup { padding: 20px 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li { padding: 0; margin: 0 0 10px 0; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a { color: #fff; font-size: 1.1em; line-height: 1.2em; font-weight: normal; text-decoration: none; border: 0;}
  .footer-nav ul.ft-nav li ul.ft-nav-popup li a:hover { color: #fff;}

  .org-list-full { width: 100%;}
  .org-list-full .org-list { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
  .org-list-full .org-list .caption { width: 80px; color: #fff; line-height: 1em;}
  .org-list-full .org-list .column { width: calc(100% - 80px);}
  .org-list-full .org-list .column img.ft-org-logo-1 { width: auto; height: 30px;}
  .org-list-full .org-list .column img.ft-org-logo-1-1 { width: auto; height: 20px;}
  .org-list-full .org-list .column img.ft-org-logo-2 { width: auto; height: 20px;}
  .org-list-full .org-list .column img.ft-org-logo-3 { width: 90px; height: auto;}

  .social-icon-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .social-icon-list a { margin: 40px 10px 10px 10px; text-decoration: none; display: block;}
  .social-icon-list span.icon { color: #fff; font-size: 2em;}
  .social-icon-list img.ft-facebook { width: 134px; height: auto;}


}