@charset "utf-8";

/* =========================================================
   1.  RESET / BASE
========================================================= */
html,
body {
  width: 100%;
  height: 100%;
  text-align: initial;
}

body {
  position: relative;
}

#wrap {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  word-break: keep-all;
}

/* animation override */
.animate {
  visibility: inherit !important;
}

/* hidden accessibility text */
.hidden_txt {
  position: absolute !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.sec_in {
    width: 100%; 
    max-width: 1600px; 
    padding: 0 5%; 
    margin: 0 auto;
}


/* =========================================================
   2. ELEMENT BASE STYLE
========================================================= */
a {
  text-decoration: none;
  transition: all 0.3s ease;
}

img {
  max-width: 100%;
}

/* =========================================================
   3. UTILITIES
========================================================= */

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

/* font weight */
.bold800 { font-weight: 800 !important; }
.bold700 { font-weight: 700 !important; }
.bold600 { font-weight: 600 !important; }
.bold500 { font-weight: 500 !important; }
.bold400 { font-weight: 400 !important; }
.bold300 { font-weight: 300 !important; }
.bold200 { font-weight: 200 !important; }

/* text color */
.txt_color_01 { color: #5aa4d1 !important; }
.txt_color_02 { color: #213061 !important; }
.txt_color_03 { color: #777 !important; }
.txt_wh       { color: #fff !important; }

/* =========================================================
   4. TYPOGRAPHY SYSTEM
========================================================= */

/* section titles */
.sec_tit   { font-size: 18px;  font-weight: 400; line-height: 1.4; color: #222; word-break: keep-all; }
.sec_tit2  { font-size: 20px;  font-weight: 400; line-height: 1.4; color: #222; word-break: keep-all; }
.sec_tit3  { font-size: 24px;  font-weight: 600; line-height: 1.4; color: #222; word-break: keep-all; }
.sec_tit4  { font-size: 30px;  font-weight: 400; line-height: 1.3; color: #222; word-break: keep-all; }
.sec_tit5  { font-size: 36px;  font-weight: 400; line-height: 1.3; color: #222; word-break: keep-all; }
.sec_tit6  { font-size: 42px;  font-weight: 400; line-height: 1.2; color: #222; word-break: keep-all; }
.sec_tit7  { font-size: 48px;  font-weight: 400; line-height: 1.4; color: #222; word-break: keep-all; }
.sec_tit8  { font-size: 60px;  font-weight: 200; line-height: 1.2; color: #222; word-break: keep-all; }
.sec_tit9  { font-size: 70px;  font-weight: 200; line-height: 1.2; color: #222; word-break: keep-all; }
.sec_tit10 { font-size: 90px;  font-weight: 200; line-height: 1;   color: #222; word-break: keep-all; }
.sec_tit11 { font-size: 120px; font-weight: 200; line-height: 1;   color: #222; word-break: keep-all; }

/* bold inside title */
.sec_tit b,
.sec_tit2 b,
.sec_tit3 b,
.sec_tit4 b,
.sec_tit5 b,
.sec_tit6 b,
.sec_tit7 b { font-weight: 600; }

.sec_tit8 b,
.sec_tit9 b,
.sec_tit10 b,
.sec_tit11 b { font-weight: 700; }

/* body text */
.sec_txt  { font-size: 16px; font-weight: 300; line-height: 1.6; color: #222; word-break: keep-all; }
.sec_txt2 { font-size: 18px; font-weight: 400; line-height: 1.6; color: #777; word-break: keep-all; }
.sec_txt3 { font-size: 24px; font-weight: 300; line-height: 1.6; color: #222; word-break: keep-all; }
.sec_txt4 { font-size: 15px; font-weight: 300; line-height: 1.6; color: #666; word-break: keep-all; }

.sec_txt b,
.sec_txt2 b,
.sec_txt3 b,
.sec_txt4 b { font-weight: 500; }

/* =========================================================
   5. SPACING SYSTEM
========================================================= */
.bbbgap   { height: 200px; }
.bbgap    { height: 150px; }
.bgap     { height: 100px; }
.gap      { height: 50px; }
.sgap     { height: 30px; }
.ssgap    { height: 20px; }
.sssgap   { height: 10px; }
.ssssgap  { height: 5px; }

/* =========================================================
   6. TO TOP BUTTON
========================================================= */
#toTop {
  display: none !important;
  position: fixed;
  right: 10px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  z-index: 99999;
  border: none;
  border-radius: 100px;
  background-color: #bf202f;
  background-image: url(../images/totop.png);
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
  text-indent: -999999px;
}

#toTop:hover {
  opacity: 1;
}