body{font-size:20px;color:#212529;font-family:Lora,'Times New Roman',serif}p{line-height:1.5;margin:30px 0}p a{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-weight:800;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif}a{color:#212529;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}a:focus,a:hover{color:#0085a1}blockquote{font-style:italic;color:#868e96}.section-heading{font-size:36px;font-weight:700;margin-top:60px}.caption{font-size:14px;font-style:italic;display:block;margin:0;padding:10px;text-align:center;border-bottom-right-radius:5px;border-bottom-left-radius:5px}::-moz-selection{color:#fff;background:#0085a1;text-shadow:none}::selection{color:#fff;background:#0085a1;text-shadow:none}img::selection{color:#fff;background:0 0}img::-moz-selection{color:#fff;background:0 0}#mainNav{position:absolute;border-bottom:1px solid #e9ecef;background-color:#fff;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif}#mainNav .navbar-brand{font-weight:800;color:#343a40}#mainNav .navbar-toggler{font-size:12px;font-weight:800;padding:13px;text-transform:uppercase;color:#343a40}#mainNav .navbar-nav>li.nav-item>a{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase}@media only screen and (min-width:992px){#mainNav{border-bottom:1px solid transparent;background:0 0}#mainNav .navbar-brand{padding:10px 20px;color:#fff}#mainNav .navbar-brand:focus,#mainNav .navbar-brand:hover{color:rgba(255,255,255,.8)}#mainNav .navbar-nav>li.nav-item>a{padding:10px 20px;color:#fff}#mainNav .navbar-nav>li.nav-item>a:focus,#mainNav .navbar-nav>li.nav-item>a:hover{color:rgba(255,255,255,.8)}}@media only screen and (min-width:992px){#mainNav{-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden}#mainNav.is-fixed{position:fixed;top:-67px;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;border-bottom:1px solid #fff;background-color:rgba(255,255,255,.9)}#mainNav.is-fixed .navbar-brand{color:#212529}#mainNav.is-fixed .navbar-brand:focus,#mainNav.is-fixed .navbar-brand:hover{color:#0085a1}#mainNav.is-fixed .navbar-nav>li.nav-item>a{color:#212529}#mainNav.is-fixed .navbar-nav>li.nav-item>a:focus,#mainNav.is-fixed .navbar-nav>li.nav-item>a:hover{color:#0085a1}#mainNav.is-visible{-webkit-transform:translate3d(0,100%,0);-moz-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);-o-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}header.masthead{margin-bottom:50px;background:no-repeat center center;background-color:#868e96;background-attachment:scroll;position:relative;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}header.masthead .overlay{position:absolute;top:0;left:0;height:100%;width:100%;background-color:#212529;opacity:.5}header.masthead .page-heading,header.masthead .post-heading,header.masthead .site-heading{padding:200px 0 150px;color:#fff}@media only screen and (min-width:768px){header.masthead .page-heading,header.masthead .post-heading,header.masthead .site-heading{padding:200px 0}}header.masthead .page-heading,header.masthead .site-heading{text-align:center}header.masthead .page-heading h1,header.masthead .site-heading h1{font-size:50px;margin-top:0}header.masthead .page-heading .subheading,header.masthead .site-heading .subheading{font-size:24px;font-weight:300;line-height:1.1;display:block;margin:10px 0 0;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif}@media only screen and (min-width:768px){header.masthead .page-heading h1,header.masthead .site-heading h1{font-size:80px}}header.masthead .post-heading h1{font-size:35px}header.masthead .post-heading .meta,header.masthead .post-heading .subheading{line-height:1.1;display:block}header.masthead .post-heading .subheading{font-size:24px;font-weight:600;margin:10px 0 30px;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif}header.masthead .post-heading .meta{font-size:20px;font-weight:300;font-style:italic;font-family:Lora,'Times New Roman',serif}header.masthead .post-heading .meta a{color:#fff}@media only screen and (min-width:768px){header.masthead .post-heading h1{font-size:55px}header.masthead .post-heading .subheading{font-size:30px}}.post-preview>a{color:#212529}.post-preview>a:focus,.post-preview>a:hover{text-decoration:none;color:#0085a1}.post-preview>a>.post-title{font-size:30px;margin-top:30px;margin-bottom:10px}.post-preview>a>.post-subtitle{font-weight:300;margin:0 0 10px}.post-preview>.post-meta{font-size:18px;font-style:italic;margin-top:0;color:#868e96}.post-preview>.post-meta>a{text-decoration:none;color:#212529}.post-preview>.post-meta>a:focus,.post-preview>.post-meta>a:hover{text-decoration:underline;color:#0085a1}@media only screen and (min-width:768px){.post-preview>a>.post-title{font-size:36px}}.floating-label-form-group{font-size:14px;position:relative;margin-bottom:0;padding-bottom:.5em;border-bottom:1px solid #dee2e6}.floating-label-form-group input,.floating-label-form-group textarea{font-size:1.5em;position:relative;z-index:1;padding:0;resize:none;border:none;border-radius:0;background:0 0;box-shadow:none!important;font-family:Lora,'Times New Roman',serif}.floating-label-form-group input::-webkit-input-placeholder,.floating-label-form-group textarea::-webkit-input-placeholder{color:#868e96;font-family:Lora,'Times New Roman',serif}.floating-label-form-group label{font-size:.85em;line-height:1.764705882em;position:relative;z-index:0;top:2em;display:block;margin:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease;vertical-align:middle;vertical-align:baseline;opacity:0}.floating-label-form-group .help-block{margin:15px 0}.floating-label-form-group-with-value label{top:0;opacity:1}.floating-label-form-group-with-focus label{color:#0085a1}form .form-group:first-child .floating-label-form-group{border-top:1px solid #dee2e6}footer{padding:50px 0 65px}footer .list-inline{margin:0;padding:0}footer .copyright{font-size:14px;margin-bottom:0;text-align:center}.btn{font-size:14px;font-weight:800;padding:15px 25px;letter-spacing:1px;text-transform:uppercase;border-radius:0;font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif}.btn-primary{background-color:#0085a1;border-color:#0085a1}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{color:#fff;background-color:#00657b!important;border-color:#00657b!important}.btn-lg{font-size:16px;padding:25px 35px}

/*

body {
  background-color: white;
  min-height: 100vh;
  margin: 0;
  font-family: 'Droid Sans', sans-serif;
}

body:before {
  content: '';
  position: fixed;
  top: 0px;
  left: 50%;
  bottom: 0px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 4px;
  background-color: gray;
}
*/
body .bentries {
  width: calc(100% - 80px);
  max-width: 800px;
  margin: auto;
  position: relative;
  left: -5px;
}
body .bentries .bentry {
  width: calc(50% - 80px);
  float: left;
  padding: 20px;
  clear: both;
  text-align: right;
}
body .bentries .bentry:not(:first-child) {
  margin-top: -60px;
}
body .bentries .bentry .title {
  font-size: 32px;
  margin-bottom: 12px;
  position: relative;
  color: black;
}
body .bentries .bentry .title:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 4px solid #ffffff;
  background-color: #1D1D1D;
  border-radius: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -73px;
  z-index: 1000;
}
body .bentries .bentry .title.big:before {
  width: 24px;
  height: 24px;
  -webkit-transform: translate(48px, -50%);
          transform: translate(48px, -50%);
}
body .bentries .bentry .body {
  color: #aaa;
}
body .bentries .bentry .body p {
  line-height: 1.4em;
}
body .bentries .bentry:nth-child(2n) {
  text-align: left;
  float: right;
}
body .bentries .bentry:nth-child(2n) .title:before {
  left: -100px;
}
body .bentries .bentry:nth-child(2n) .title.big:before {
  -webkit-transform: translate(-8px, -50%);
          transform: translate(-8px, -50%);
}


@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

* {
  pading: 0;
  margin: 0;
  font-family: "Lato", sans-serif;
  position: relative;
}

.timeline {
  padding: 40px 0px;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 40px;
}

.timeline:before {
  content: "";
  position: absolute;
  top: 40px;
  left: 65px;
  width: 3px;
  height: calc(100% - 80px);
  background: #c0392b;
}

.timeline .column {
  margin: 40px 40px 40px 120px;
}

.timeline .column .title h1 {
  font-size: 120px;
  color: rgba(0,0,0,0.1);
  font-family: serif;
  letter-spacing: 3px;
}

.timeline .column .title h1:before {
  content: "";
  position: absolute;
  left: -61px;
  top: 86px;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 3px solid #c0392b
}

.timeline .column .title h2 {
  margin-top: -60px;
  font-size: 33px;
}

.timeline .column .description p {
  font-size: 13px;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 10px;
  font-family: serif;
}

.timeline .column .description {
  border-left: 1px solid #000;
}

.main {
  width: 80%;
  margin-left: 10%;
  margin-top: 80px;
}

.main h1 {
  font-size: 80px;
  line-height: 60px;
}

.main p {
  font-size: 13px;
  line-height: 20px;
  font-family: serif;
  text-align: right;
}

/* Edit By Jin*/
.kbox {
  width : 25%;
  float : left;
  position: :relative;
  min-height: 1px;
  padding-right:15px;
  padding-left:15px;
  box-sizing: border-box;
  display : block;
  font-size: 14px;
  line-height: 1.42857143;
  /* color: #ffff;  */
  background-color : #fff;  
}

.kbox_box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  
  /* background-color: #dd4b39 !important; */
  min-height:100px;
  min-width:130px;
  width:40%;
  float:left;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  text-align:center;

}

/* data */
.area-con{display:none;}

.con-title{margin-bottom:10px;font-size:20px;}

.con-wrap{line-height:1.25em;max-height:500px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;}
.con-wrap th,
.con-wrap td{white-space:nowrap;}

.con-wrap .data-table2 tr:first-child td{font-weight:bold;}
.con-wrap .data-table2 th,
.con-wrap .data-table2 td{text-align:left;padding:0 5px;background-color:#f4f4f4;border-bottom:1px solid #fff;}
.con-wrap .data-table2 tr.grade1 th,
.con-wrap .data-table2 tr.grade1 td{background-color:#ffec00;}
.con-wrap .data-table2 tr.grade2 th,
.con-wrap .data-table2 tr.grade2 td{background-color:#ffb832;}
.con-wrap .data-table2 tr.grade3 th,
.con-wrap .data-table2 tr.grade3 td{background-color:#fb4b2f;color:#fff;}
.con-wrap .data-table2 tr.grade4 th,
.con-wrap .data-table2 tr.grade4 td{background-color:#a00b00;color:#fff;}
.con-wrap .data-table2 tr.grade5 th,
.con-wrap .data-table2 tr.grade5 td{background-color:#5a0026;color:#fff;}

.con-wrap .data-table{table-layout:fixed;width:680px;}
.con-wrap .data-table thead th{border:1px solid #fff;text-align:center;padding:5px;background-color:#666;color:#fff;}
.con-wrap .data-table tbody tr td:nth-child(1){border:1px solid #fff;padding:5px 10px;text-align:center;font-weight:bold;}
.con-wrap .data-table tbody tr td:nth-child(1) + td{font-weight:bold;}
.con-wrap .data-table tbody td{border:1px solid #fff;padding:5px 10px;text-align:center;background-color:#f9f9f9;}
.con-wrap .data-table .grade1 td:nth-child(1){background-color:#ffec00;}
.con-wrap .data-table .grade1 td:nth-child(2){background-color:#ffec00;}
.con-wrap .data-table .grade2 td:nth-child(1){background-color:#ffb832;}
.con-wrap .data-table .grade2 td:nth-child(2){background-color:#ffb832;}
.con-wrap .data-table .grade3 td:nth-child(1){background-color:#fb4b2f;color:#fff;}
.con-wrap .data-table .grade3 td:nth-child(2){background-color:#fb4b2f;color:#fff;}
.con-wrap .data-table .grade4 td:nth-child(1){background-color:#a00b00;color:#fff;}
.con-wrap .data-table .grade4 td:nth-child(2){background-color:#a00b00;color:#fff;}
.con-wrap .data-table .grade5 td:nth-child(1){background-color:#5a0026;color:#fff;}
.con-wrap .data-table .grade5 td:nth-child(2){background-color:#5a0026;color:#fff;}
.con-wrap .data-table .grade- td:nth-child(1){background-color:#d1d1d1;}
.con-wrap .data-table .grade- td:nth-child(2){background-color:#d1d1d1;}





/* Test */
.white_content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.white_content:target {
    opacity:1;
    pointer-events: auto;
}
.white_content > div {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  overflow: auto; 
}

.jin_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.jin_modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 2px;
    border: 1px solid #888;
    width: 40%; /* Could be more or less, depending on screen size */                          
}