/* 
Main Stylesheet
Created By: Andamant Works

Main Color Used: 
1. General: #222222
2. Blue (secondary): #282e68
3. Red (ternary) : #d32326
*/
	
/* INITIAL CSS */
html {font-size: 30px;}

@media only screen and (min-width: 1500px) {
	html {font-size: 33px;}
}
@media only screen and (min-width: 1900px) {
	html {font-size: 42px;}
}
@media only screen and (min-width: 2400px) {
	html {font-size: 54px;}
}
@media only screen and (max-width: 768px) {
	html {font-size: 28px;}
}
@media only screen and (max-width: 500px) {
	html {font-size: 27px;}
}


body {color: #222222; font-family: 'GeneralFont', Arial, Verdana; font-size: 0.5rem; line-height: 0.8rem; position: relative;}

b, strong {font-family: 'BoldFont', Arial, Verdana; font-weight: normal;}
i, em {font-family: 'ItalicFont', Arial, Verdana; font-weight: normal;}
b i, i b, b em, em b, strong i, i strong, strong em, em strong {font-family: 'BoldItalicFont', Arial, Verdana;}

h1, h2, h3, h4, h5 {font-family: 'TitleFont', Arial, Verdana; color: #222222; font-weight: normal;}
h1 b, h2 b, h3 b, h4 b, h5 b, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong {font-family: 'TitleBoldFont', Arial, Verdana; font-weight: normal;}
h1 i, h2 i, h3 i, h4 i, h5 i, h1 em, h2 em, h3 em, h4 em, h5 em{font-family: 'TitleItalicFont', Arial, Verdana; font-weight: normal;}
h1 b i, h2 b i, h3 b i, h4 b i, h5 b i,
h1 i b, h2 i b, h3 i b, h4 i b, h5 i b,
h1 b em, h2 b em, h3 b em, h4 b em, h5 b em,
h1 em b, h2 em b, h3 em b, h4 em b, h5 em b,
h1 strong i, h2 strong i, h3 strong i, h4 strong i, h5 strong i,
h1 i strong, h2 i strong, h3 i strong, h4 i strong, h5 i strong,
h1 strong em, h2 strong em, h3 strong em, h4 strong em, h5 strong em,
h1 em strong, h2 em strong, h3 em strong, h4 em strong, h5 em strong {font-family: 'TitleBoldItalicFont', Arial, Verdana; font-weight: normal;}

h1 {font-size: 1.45rem; line-height: 1.75rem; margin-bottom: 0.5rem;}
h2 {font-size: 1.3rem; line-height: 1.6rem; margin-bottom: 0.5rem;}
h3 {font-size: 1.15rem; line-height: 1.45rem; margin-bottom: 0.5rem;}
h4 {font-size: 1.0rem; line-height: 1.3rem; margin-bottom: 0.5rem;}
h5 {font-size: 0.85rem; line-height: 1.15rem; margin-bottom: 0.5rem;}
h1.no-mb, h2.no-mb, h3.no-mb, h4.no-mb, h5.no-mb {margin-bottom: 0;}

p, p a {font-size: 0.5rem; color: #222222; line-height: 0.8rem;}
p.big, .big {font-size: 0.7rem; line-height: 1.0rem;}
p a:hover {text-decoration: underline; color: #222222;}
a {color: #d32326; font-size: 15px; line-height: 24px; text-decoration: none;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
a:hover {color: #d32326; text-decoration: underline;}

.cl-secondary {color: #282e68;}
.cl-ternary {color: #d32326;}
.cl-white {color: #fff;}
.cl-gray {color: #999999;}
.cl-dark-gray {color: #696969;}
p a.cl-secondary:hover {color: #d32326;}

img {
backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden;}
img.full-width {width: 100%; display: block;}
img.round-border {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}

.gen-img-wrap {margin-bottom: 30px; position: relative;}
.gen-img-wrap.no-mb {margin-bottom: 0;}
.gen-img-wrap img {max-width: 100%; display: block;}
.gen-img-wrap img.centered {margin-left: auto; margin-right: auto;}

.full-img-wrap {position: relative;}
.full-img-wrap img {width: 100%; display: block;}

.dmb-img-wrap {position: relative; width: 100%; height: 100%; background: transparent;}
.dmb-img-wrap img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

.ta-center {text-align: center;}
.ta-left {text-align: left;}
.ta-right {text-align: right;}
.ta-justify {text-align: justify;}

.fl-left {float: left;}
.fl-right {float: right;}
.fl-clear {clear: both;}

.sfw {float: left; width: 100%; position: relative;}
.mt-10 {margin-top: 10px;}
.mt-80 {margin-top: 80px;}
.mb-30 {margin-bottom: 30px;}
/* /INITIAL CSS */


/* GENERAL LAYOUT CSS */
.sfw {float: left; width: 100%; position: relative;}
.wrap {width: 90%; margin: 0 auto; position: relative;}
.wrap-2 {width: 70%; margin: 0 auto; position: relative;}

@media only screen and (min-width: 1500px) {
	.wrap {width: 85%;}
	.wrap-2 {width: 65%;}
}

@media only screen and (min-width: 1900px) {
	.wrap {width: 80%;}
	.wrap-2 {width: 60%;}
}

@media only screen and (max-width: 1024px) {
	.wrap-2 {width: 80%;}
}

@media only screen and (max-width: 768px) {
	.wrap {width: 80%;}
}
@media only screen and (max-width: 500px) {
	.wrap {width: 90%;}
	.wrap-2 {width: 90%;}
}
/* /GENERAL LAYOUT CSS */


/* WYSIWYG CONTENT */
.wysiwyg-content, .wysiwyg-content p, .wysiwyg-content a, .wysiwyg-content ul li, .wysiwyg-content ol li {font-size: 0.5rem; color: #222222; line-height: 0.8rem; font-family: 'GeneralFont', Arial, Verdana;}
.wysiwyg-content p a, .wysiwyg-content p strong a {color: #d32326;}
.wysiwyg-content p strong, .wysiwyg-content p strong a {font-family: 'BoldFont', Arial, Verdana;}
.wysiwyg-content h3 {font-size: 1rem; line-height: 1.2rem;}
.wysiwyg-content.big, .wysiwyg-content.big p, .wysiwyg-content.big a, .wysiwyg-content.big ul li, .wysiwyg-content.big ol li {font-size: 0.7rem; line-height: 1.0rem; font-family: 'GeneralFont', Arial, Verdana;}
.wysiwyg-content.white, .wysiwyg-content.white p, .wysiwyg-content.white a, .wysiwyg-content.white ul li, .wysiwyg-content.white ol li {color: #fff;}
.wysiwyg-content img {}
.wysiwyg-content img.fr-dib {display: block; margin: 0 auto;}
.wysiwyg-content img.fr-dib.fr-fil {text-align: left;}
.wysiwyg-content img.fr-dib.fr-fir {text-align: right;}
.wysiwyg-content img.fr-dii {}
.wysiwyg-content img.fr-dii.fr-fil {float: left; margin-right: 30px;}
.wysiwyg-content img.fr-dii.fr-fir {float: right; margin-left: 30px;}

.wysiwyg-content a {color: #282e68;}
.wysiwyg-content a:hover {color: #282e68; text-decoration: underline;}
.wysiwyg-content p a {color: #222222;}
.wysiwyg-content p a:hover {color: #282e68;}
.wysiwyg-content.white a {color: #fff;}
.wysiwyg-content.white a:hover {color: #fff; text-decoration: underline}
.wysiwyg-content.white h1, .wysiwyg-content.white h2, .wysiwyg-content.white h3, .wysiwyg-content.white h4, .wysiwyg-content.white h5 {color: #fff;}
.wysiwyg-content ul li {padding-left: 0px; list-style-type: disc; padding-bottom: 3px; margin-left: 55px;}
.wysiwyg-content ol li {list-style-type: decimal; margin-left: 55px;}
.wysiwyg-content.list-flat ol li {margin-left: 15px;}

.wysiwyg-content img.feat-img {float: left; max-width: 50%; margin-right: 20px; margin-bottom: 20px;}
.wysiwyg-content img {max-width: 100% !important;}

.wysiwyg-content table {width: 100%;}
.wysiwyg-content table tbody tr {border-top: 1px solid #eaeaea;}
.wysiwyg-content table tbody tr:last-child {border-bottom: 1px solid #eaeaea;}
.wysiwyg-content table tbody tr td {padding: 15px 20px; font-size: 15px; line-height: 23px; border-left: 1px solid #eaeaea; vertical-align: middle;} 
.wysiwyg-content table tbody tr td:last-child {border-right: 1px solid #eaeaea;}
.wysiwyg-content table.fr-alternate-rows tr:nth-child(odd) td {background: #fff;}
.wysiwyg-content table.fr-alternate-rows tr:nth-child(even) td {background: #f5f5f5;}
/* /WYSIWYG CONTENT */


/* TABLE */
table {width: 100%;}
table thead {}
table thead th {border: 1px solid #dfdfdf; background: #ffff00; padding: 8px; font-size: 0.5rem; line-height: 0.8rem; text-align: left; vertical-align: middle;}
table tbody {}
table tbody tr {}
table tbody tr td {border-top: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; padding: 8px 12px; vertical-align: middle; font-size: 0.5rem; line-height: 0.8rem;}
table tbody tr:last-child td {border-bottom: 1px solid #dfdfdf;}
table tbody tr td:last-child {border-right: 1px solid #dfdfdf;}
table tfoot td {border: 1px solid #dfdfdf; background: #00ffff; padding: 8px; font-size: 0.5rem; line-height: 0.8rem; text-align: left; vertical-align: middle;}
/* /TABLE */


/* FORM */
input[type=text], input[type=email], input[type=password], textarea {font-family: 'GeneralFont', Arial, Verdana; border: 1px solid #cfcfcf; box-sizing: border-box; height: 1.7rem; padding: 0 0.6rem; font-size: 0.5rem; line-height: 0.7rem; color: #222222; width: 100%;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
input[type=text]:hover, input[type=text]:focus, input[type=email]:hover, input[type=email]:focus, input[type=password]:hover, input[type=password]:focus, textarea:hover, textarea:focus {outline: 0;
box-shadow: 0px 0px 5px #d32326; -webkit-box-shadow: 0px 0px 5px #d32326; -moz-box-shadow: 0px 0px 5px #d32326; -o-box-shadow: 0px 0px 5px #d32326;}
textarea {padding: 0.6rem; min-height: 6.4rem;}
textarea.no-resize {resize: none;}
input[type=text].datepicker {padding-right: 1.7rem; background: url(../images/icon/calendar.svg) no-repeat right 15px center; background-size: auto 20px;}

select {font-family: 'GeneralFont', Arial, Verdana; font-size: 0.5rem; line-height: 0.7rem; padding: 0 0.6rem; color: #222222; box-sizing: border-box;}
select:hover, select:focus {outline: 0;}
.styled-select-wrapper {width: 100%; box-sizing: border-box; overflow: hidden; border: 1px solid #cfcfcf; height: 1.7rem; background: url(../images/icon/arrow-down.svg) no-repeat right 0.6rem center #fff; background-size: 0.6rem auto;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
.styled-select-wrapper select {display: block; width: 120%; border: none; background: transparent; height: 1.7rem; padding: 0 1.2rem 0 0.4rem;}
.styled-select-wrapper select option {background: none;}

input[type="checkbox"] {font-family: 'GeneralFont', Arial, Verdana; font-size: 15px; line-height: 24px;;}
.styled-checkbox-wrapper {margin-bottom: 10px;}
.styled-checkbox-wrapper input[type="checkbox"] {display: none;}
.styled-checkbox-wrapper label {font-family: 'GeneralFont'; font-size: 15px; line-height: 23px; padding-top: 3px; color: #222222; display: inline-block; padding-left: 35px; background: url(../images/icon/checkbox.png) no-repeat left top; background-size: 25px auto;}
.styled-checkbox-wrapper label:hover {cursor: pointer;}
.styled-checkbox-wrapper label a {color: #ff0017;}
.styled-checkbox-wrapper input[type="checkbox"]:checked + label {background: url(../images/icon/checkbox-checked.png) no-repeat left top; background-size: 25px auto;}

input[type="radio"] {font-family: 'GeneralFont', Arial, Verdana;font-size: 15px; line-height: 24px;}
.styled-radio-wrapper{position: relative;}
.styled-radio-wrapper input[type="radio"] {display:none;}
.styled-radio-wrapper label {display:inline-block; padding: 1px 0px 0px 31px; font-size: 15px; line-height: 24px; font-family: 'GeneralFont', Arial, Verdana; background: url(../images/icon/radio-off.png) no-repeat left top 3px; cursor: pointer; background-size: 20px auto;}
.styled-radio-wrapper input[type="radio"]:checked + label {background: url(../images/icon/radio-on.png) no-repeat left top 3px; background-size: 20px auto;}

input[type="file"] {font-family: 'GeneralFont', Arial, Verdana;}
.styled-input-file-wrapper {cursor: pointer; font-size: 0.5rem; line-height: 0.7rem; color: #222222; background: #dbdbdb; border: 1px solid #dbdbdb; font-family: 'GeneralFont', Arial, Verdana; box-sizing: border-box; padding: 0.5rem; height: 50px; text-align: center;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
.styled-input-file-wrapper:hover {background: #282e68; color: #fff;}
.styled-input-file-wrapper input[type="file"] {display: none;}
.styled-input-file-wrapper label {}
label.upload-file-info {}
label.upload-file-info.warning {display: block; margin-top: 0.5rem; font-size: 0.4rem; line-height: 0.6rem;}

input[type="submit"], button, a.btn {display: inline-block; background: #ff0017; border: 1px solid #ff0017; outline: 0; box-sizing: border-box; cursor: pointer; color: #fff;
font-family: 'TitleBoldFont', Arial, Verdana; font-size: 15px; line-height: 15px; height: 45px; padding: 10px 20px; color: #fff;
border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:focus, a.btn:hover, a.btn:focus {color: #fff; background: #f25f70;}

input[type="submit"], button, a.btn  {border: none; background: none; display: inline-block; color: #fff; font-size: 0.55rem; font-family: 'BoldFont', Arial, Verdana; background: #282e68; padding: 0.45rem 0.8em; min-width: 4.5rem; text-align: center;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:focus, a.btn:hover, a.btn:focus  {background: #d32326; text-decoration: none;}

.gen-form-wrapper {margin-bottom: 20px;}
.gen-form-wrapper.no-mb {margin-bottom: 0;}
.gen-form-wrapper.inline {}
.gen-form-wrapper.inline .gfw-title {float: left; width: 22%; margin-right: 3%; box-sizing: border-box;}
.gen-form-wrapper.inline .gfw-sep {float: left; width: 3%; margin-right: 3%; box-sizing: border-box;}
.gen-form-wrapper.inline .gfw-input {float: left; width: 69%; box-sizing: border-box;}
.gen-form-wrapper.inline label {font-size: 15px; line-height: 45px;}

::placeholder {color: #afafaf;}

@media only screen and (min-width: 1900px) {
	.styled-input-file-wrapper {line-height: 0.2rem;}
	input[type="submit"] {height: 65px;}
}
/* /FORM */


/* HEADER */
#header-nav-sfw {padding: 0.7rem 0; position: fixed; top: 0; z-index: 1000; background: #fff;
box-shadow: 0px 5px 5px #eaeaea; -webkit-box-shadow: 0px 5px 5px #eaeaea; -moz-box-shadow: 0px 5px 5px #eaeaea; -o-box-shadow: 0px 5px 5px #eaeaea;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
#header-nav-sfw.sticky {padding: 0.5rem 0;}
#header-logo-ct {float: left;}
img#logo {height: 1rem;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
img#logo.sticky {height: 0.75rem;}
#header-nav-ct {float: right;}
ul#header-nav-list {margin-top: 0.1rem;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#header-nav-list.sticky {margin-top: 0;}
ul#header-nav-list > li {float: left; margin-right: 40px;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#header-nav-list > li.sticky {margin-right: 35px;}
ul#header-nav-list > li:last-child, ul#header-nav-list > li.sticky:last-child {margin-right: 0;}
ul#header-nav-list > li a {font-size: 0.55rem; line-height: 0.8rem; font-family: 'BoldFont', Arial, Verdana; color: #282e68; display: inline-block; padding-bottom: 0.2rem; border-bottom: 0.1rem solid transparent; cursor: pointer;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#header-nav-list > li a:hover {color: #d32326; text-decoration: none;}
ul#header-nav-list > li a.active {color: #d32326; border-bottom: 0.1rem solid #d32326;}
ul#header-nav-list > li a.sticky {font-size: 0.5rem; line-height: 0.8rem; padding-bottom: 0.15rem;}
a.lang-nav {padding-left: 1.8rem; cursor: pointer;}
a.lang-nav.ina {padding-right: 0.5rem; background: url(../images/icon/ina-flag.png) no-repeat left 0.5rem top 0.05rem; background-size: 0.8rem auto;}
a.lang-nav.has-sub.ina {padding-right: 1.0rem; background: url(../images/icon/ina-flag.png) no-repeat left 0.5rem top 0.05rem, url(../images/icon/arrow-down.png) no-repeat right 0.4rem center; background-size: 0.8rem auto, 0.3rem auto;}
a.lang-nav.eng {padding-right: 0.5rem; background: url(../images/icon/eng-flag.png) no-repeat left 0.5rem top 0.05rem; background-size: 0.8rem auto;}
a.lang-nav.has-sub.eng {padding-right: 1.0rem; background: url(../images/icon/eng-flag.png) no-repeat left 0.5rem top 0.05rem, url(../images/icon/arrow-down.png) no-repeat right 0.4rem center; background-size: 0.8rem auto, 0.3rem auto;}
.header-subnav-container {display: none; position: absolute; background: #fff;
box-shadow: 0px 5px 5px #eaeaea; -webkit-box-shadow: 0px 5px 5px #eaeaea; -moz-box-shadow: 0px 5px 5px #eaeaea; -o-box-shadow: 0px 5px 5px #eaeaea;}

#hnav-icon {display: none;}
#header-nav-resp {display: none;}

@media only screen and (min-width: 1500px) {
	ul#header-nav-list {margin-top: 0.3rem;}
	ul#header-nav-list.sticky {margin-top: 0.1rem;}
	ul#header-nav-list > li {margin-right: 50px;}
	ul#header-nav-list > li.sticky {margin-right: 40px;}
	ul#header-nav-list > li a {padding-bottom: 0.1rem;}
	ul#header-nav-list > li a.sticky {padding-bottom: 0.1rem;}
}

@media only screen and (min-width: 1900px) {	
	ul#header-nav-list {margin-top: 0.2rem;}
	ul#header-nav-list.sticky {margin-top: 0rem;}
	ul#header-nav-list > li {margin-right: 50px;}
	ul#header-nav-list > li.sticky {margin-right: 40px;}
	ul#header-nav-list > li a {font-size: 0.53rem;}
}

@media only screen and (max-width: 1200px) {
	#header-nav-sfw {padding: 0.5rem 0;}
	img#logo {height: 0.75rem;}
	ul#header-nav-list {margin-top: 0;}
	ul#header-nav-list > li {margin-right: 40px;}
	ul#header-nav-list > li a {font-size: 0.55rem; line-height: 0.8rem; padding-bottom: 0.15rem;}
}

@media only screen and (max-width: 1100px) {
	ul#header-nav-list {display: none;}
	#hnav-icon {display: block; width: 1.2rem; height: 1.2rem; background: url(../images/icon/nav.png) no-repeat center; background-size: 0.8rem auto; margin-top: -0.2rem; cursor: pointer;
	transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
	
	#header-nav-resp {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 5000;}
	
	#hnav-resp-close {width: 0.7rem; height: 0.7rem; background: url(../images/icon/close.png) no-repeat center; background-size: 0.7rem 0.7rem; position: absolute; top: 0.7rem; right: 5%; z-index: 5100; cursor: pointer;
	transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
	#hnav-resp-close:hover {background: url(../images/icon/close-hover.png) no-repeat center; background-size: 0.7rem 0.7rem;}
	
	#hnav-resp-lang-ct {position: absolute; top: 0.7rem; left: 4%; z-index: 5100;}
	#hnav-resp-lang-ct a.lang-nav {display: inline-block; font-size: 0.6rem; line-height: 0.8rem; font-family: 'BoldFont', Arial, Verdana; color: #282e68; padding-bottom: 0.2rem; border-bottom: 0.1rem solid transparent; cursor: pointer;}
	#hnav-resp-lang-ct a.lang-nav:hover {text-decoration: none;}
	#hnav-resp-lang-ct div {display: none;}
	
	#hnav-resp-nav-ct {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%;}
	ul#hnav-resp-list {}
	ul#hnav-resp-list > li {text-align: center; margin-bottom: 0.5rem;}
	ul#hnav-resp-list > li:last-child {margin-bottom: 0;}
	ul#hnav-resp-list > li a {font-size: 0.6rem; line-height: 0.8rem; font-family: 'BoldFont', Arial, Verdana; color: #282e68; display: inline-block; padding-bottom: 0.2rem; border-bottom: 0.1rem solid transparent; cursor: pointer;
	transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
	ul#hnav-resp-list > li a:hover {color: #d32326; text-decoration: none;}
	ul#hnav-resp-list > li a.active {color: #d32326; border-bottom: 0.1rem solid #d32326;}
}

@media only screen and (max-width: 768px) {
	#hnav-resp-lang-ct {left: 9%;}
	#hnav-resp-close {right: 10%;}
}

@media only screen and (max-width: 500px) {
	#hnav-resp-lang-ct {left: 4%;}
	#hnav-resp-close {right: 5%;}
	
	img#logo, img#logo.sticky {height: 0.9rem;}
	#hnav-icon  {background-size: 0.9rem auto; margin-top: 0;}
}
/* /HEADER */


/* HOME */
#content-mt-sfw {margin-top: 2.6rem;}
.amt-gen-fi-efc {opacity: 0; padding-top: 50px;
transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear;}
.amt-gen-fi-efc.type-2 {padding-top: 0; margin-top: 50px;}
.amt-gen-fi-efc.displayed {opacity: 1.0; padding-top: 0;}

#content {min-height: 17rem;}

#home-slideshow-sfw {margin-bottom: 3rem; z-index: 750;}
.slideshow-item {position: relative;}
.slideshow-item img {}
.slideshow-item img.featured {display: block; width: 100%;}
.slideshow-item img.thumb {display: none;}
.slideshow-item a, .slideshow-item a:hover {text-decoration: none;}
.slideshow-caption {position: absolute; top: 50%; left: 5%; transform: translateY(-50%); width: 40%;}
.slideshow-caption h5 {display: inline-block; color: #fff; font-family: 'TitleBoldFont', Arial, Verdana; background: #282e68; margin-bottom: 1rem; padding: 0.4rem 0.6rem; font-size: 0.5rem; line-height: 0.5rem;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
.slideshow-caption h2 {color: #d32326; font-family: 'TitleBoldFont', Arial, Verdana; font-size: 1.4rem; line-height: 1.7rem;}

#home-point-sfw {margin-bottom: 3rem; margin-top: -5rem; z-index: 800;}
ul#home-point-list {}
ul#home-point-list > li {float: left; width: 24%; margin-right: 1.333%; box-sizing: border-box; padding: 0.8rem 1.2rem; position: relative; background: #fff;
border-top-left-radius: 30px; -webkit-border-top-left-radius: 30px; -moz-border-top-left-radius: 30px; -o-border-top-left-radius: 30px;
border-bottom-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-bottom-right-radius: 30px; -o-border-bottom-right-radius: 30px;
box-shadow: 0px 5px 10px #dfdfdf; -webkit-box-shadow: 0px 5px 10px #dfdfdf; -moz-box-shadow: 0px 5px 10px #dfdfdf; -o-box-shadow: 0px 5px 10px #dfdfdf;}
ul#home-point-list > li:nth-child(4n) {margin-right: 0;}
ul#home-point-list > li:nth-child(4n + 1) {clear: both;}
ul#home-point-list > li .num-wrap {float: left; width: 38%; text-align: center; border: 2px solid #d32326; position: relative;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;}
ul#home-point-list > li .num-wrap .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'BoldFont', Arial, Verdana; color: #d32326; font-size: 0.75rem; line-height: 1.0rem;}
ul#home-point-list > li .desc-wrap {float: right; width: 55%; text-align: center; font-family: 'BoldFont', Arial, Verdana; color: #282e68; margin-top: 0.6rem; font-size: 0.6rem; line-height: 0.8rem;}

#home-about-sfw {margin-bottom: 3rem;}
#home-about-img-ct {float: right; width: 35%;}
#home-about-img-ct img {max-width: 100%; display: block;
border-top-left-radius: 50px; -webkit-border-top-left-radius: 50px; -moz-border-top-left-radius: 50px; -o-border-top-left-radius: 50px;
border-bottom-right-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-bottom-right-radius: 50px; -o-border-bottom-right-radius: 50px;}
#home-about-desc-ct {float: left; width: 55%;}
#home-about-desc-ct.full-width {float: none; width: 100%; margin: 0;}
h2.gen-ct-title {font-family: 'TitleBoldFont', Arial, Verdana; color: #d32326; margin-bottom: 1rem; font-size: 1.2rem; line-height: 1.5rem;}
h2.gen-ct-title.cl-secondary {color: #282e68;}
h2.gen-ct-title.cl-default {color: #222222;}
a.gen-btn {display: inline-block; color: #fff; font-size: 0.55rem; font-family: 'BoldFont', Arial, Verdana; background: #282e68; padding: 0.45rem 1rem; min-width: 4.5rem; text-align: center;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
a.gen-btn:hover {background: #d32326; text-decoration: none;}
#home-about-desc-ct a.gen-btn {margin-top: 1rem;}

#home-portfolio-sfw {margin-bottom: 3rem;}
#home-portfolio-sfw h2.gen-ct-title {text-align: center;}
ul.portfolio-list {}
#home-portfolio-sfw ul.portfolio-list {margin-top: 1rem; margin-bottom: 1rem;}
ul.portfolio-list > li {float: left; width: 25%; position: relative;}
.portfolio-item {}
.portfolio-item .img-wrap {position: relative; width: 100%; height: 100%; overflow: hidden;}
.portfolio-item .img-wrap img {object-fit: cover; width: 100%; height: 100%; z-index: 90;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
.portfolio-item .img-wrap img.hvr {transform: scale(1.1);}
.portfolio-item .img-wrap .cover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.33); z-index: 100;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
.portfolio-item .img-wrap .cover.hvr {background: rgba(0, 0, 0, 0);}
.portfolio-item .img-wrap .title {position: absolute; top: 50%; left: 50%; width: 70%; transform: translate(-50%, -50%); background: transparent; text-align: center; box-sizing: border-box; padding: 0.7rem; z-index: 110;
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
.portfolio-item .img-wrap .title.hvr {background: rgba(211, 35, 38, 0.6);}
.portfolio-item .img-wrap .title h3 {font-family: 'TitleBoldFont', Arial, Verdana; color: #d32326; font-size: 0.9rem; line-height: 1.1rem; margin-bottom: 0.2rem;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
.portfolio-item .img-wrap .title h3.hvr {color: #282e68;}
.portfolio-item .img-wrap .title h5 {font-family: 'TitleFont', Arial, Verdana; color: #fff; font-size: 0.6rem; line-height: 0.8rem; margin-bottom: 0;}
#home-portfolio-sfw a.gen-btn {}

#home-testimonial-sfw {margin-bottom: 3rem;}
#home-testimonial-sfw h2.gen-ct-title {text-align: center;}
#testimonial-list-ct {margin-top: 1rem;}
.testimonial-item {padding: 0 0.5rem;}
.testimonial-item .inner {background: #f0f0f0; box-sizing: border-box; padding: 1.3rem; text-align: center; min-height: 13rem;
border-top-left-radius: 30px; -webkit-border-top-left-radius: 30px; -moz-border-top-left-radius: 30px; -o-border-top-left-radius: 30px;
border-bottom-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-bottom-right-radius: 30px; -o-border-bottom-right-radius: 30px;}
.testimonial-item .caption-wrap {margin-bottom: 1rem;}
.testimonial-item .name-wrap {}
.testimonial-item .name-wrap .img-wrap {width: 4rem; height: 4rem; overflow: hidden; margin: 0 auto; margin-bottom: 0.7rem;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;}
.testimonial-item .name-wrap .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.testimonial-item .name-wrap p {font-size: 0.6rem;}
.testimonial-item .name-wrap p span {font-size: 0.5rem; color: #9a9a9a;}

#home-client-sfw {margin-bottom: 3rem;}
#home-client-sfw h2.gen-ct-title {text-align: center;}
#client-list-ct {margin-top: 1rem;}
.client-item {position: relative;}
.client-item .img-wrap {width: 100%; height: 5rem;}
.client-item img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 100%; max-width: 70%; 
filter: grayscale(100%); -webkit-filter: grayscale(100%);
transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear;}
.client-item img:hover {
filter: grayscale(0); -webkit-filter: grayscale(0);}

#home-blog-sfw {margin-bottom: 2.5rem;}
#home-blog-sfw h2.gen-ct-title {text-align: center;}
ul.blog-list {}
ul.blog-list > li {float: left; width: 32%; margin-right: 2%; margin-bottom: 1.5rem;}
ul.blog-list > li:nth-child(3n) {margin-right: 0;}
ul.blog-list > li:nth-child(3n + 1) {clear: both;}
ul.blog-list > li .outer-wrap {
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px;
box-shadow: 0px 5px 5px #dfdfdf; -webkit-box-shadow: 0px 5px 5px #dfdfdf; -moz-box-shadow: 0px 5px 5px #dfdfdf; -o-box-shadow: 0px 5px 5px #dfdfdf;}
ul.blog-list > li .img-wrap {position: relative;}
ul.blog-list > li .img-wrap img {display: block; width: 100%;
border-top-left-radius: 20px; -webkit-border-top-left-radius: 20px; -moz-border-top-left-radius: 20px; -o-border-top-left-radius: 20px;
border-top-right-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-top-right-radius: 20px; -o-border-top-right-radius: 20px;}
ul.blog-list > li .desc-wrap {padding: 0.85rem; min-height: 8.5rem;}
a.blog-cat-ribbon {font-size: 0.4rem; line-height: 0.6rem; font-family: 'BoldFont', Arial, Verdana; color: #fff; display: inline-block; background: #282e68; padding: 0.15rem 0.4rem; margin-bottom: 0.5rem;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
a.blog-cat-ribbon:hover {background: #d32326; text-decoration: none;}
.blog-item h3, .blog-item h3 a {font-size: 0.7rem; line-height: 0.9rem; color: #222222; font-family: 'TitleBoldFont', Arial, Verdana;}
.blog-item h3:hover, .blog-item h3 a:hover {color: #d32326; text-decoration: none;}
.blog-item p.blog-date {margin-top: 0.75rem; font-family: 'BoldFont', Arial, Verdana; color: #282e68;}
#home-blog-sfw ul.blog-list > li:nth-child(4) {display: none;}

@media only screen and (min-width: 1500px) {
	.slideshow-caption {left: 10%; width: 50%;}
	.slideshow-caption h5 {font-size: 0.5rem; line-height: 0.8rem; padding: 0.4rem 0.8rem;}
	.slideshow-caption h2 {font-size: 1.3rem; line-height: 1.6rem;}
	
	ul#home-point-list > li .desc-wrap {margin-top: 0.6rem;}
}

@media only screen and (min-width: 1900px) {
}

@media only screen and (max-width: 1200px) {
	#content-mt-sfw {margin-top: 2rem;}
	
	.slideshow-caption {width: 60%;}
	
	ul#home-point-list > li .desc-wrap {margin-top: 0.3rem;}
	ul#home-point-list > li .desc-wrap {font-size: 0.5rem; line-height: 0.7rem;}
}

@media only screen and (max-width: 1024px) {
	.slideshow-caption h5 {font-size: 0.4rem; line-height: 0.6rem;}
	.slideshow-caption h2  {font-size: 1.1rem; line-height: 1.3rem;}
	
	ul#home-point-list > li .num-wrap, ul#home-point-list > li .desc-wrap {float: none; width: 100%; text-align: center;}
	ul#home-point-list > li .num-wrap {border: none;}
	ul#home-point-list > li .desc-wrap {margin-top: 0.7rem; min-height: 1.5rem; font-size: 0.6rem; line-height: 0.8rem;}
	
	#home-portfolio-sfw ul.portfolio-list {margin-top: 0;}
	ul.portfolio-list > li {width: 33.333%;}
	ul.portfolio-list > li:nth-child(3n) {width: 33.334%;}
	ul.portfolio-list > li:nth-child(3n + 1) {clear: both;}	
	
	.client-item .img-wrap {height: 4rem;}
	
	#home-blog-sfw ul.blog-list > li {width: 48%; margin-right: 4%;}
	#home-blog-sfw ul.blog-list > li:nth-child(3n) {margin-right: 4%;}
	#home-blog-sfw ul.blog-list > li:nth-child(3n + 1) {clear: none;}
	#home-blog-sfw ul.blog-list > li:nth-child(2n) {margin-right: 0;}
	#home-blog-sfw ul.blog-list > li:nth-child(2n + 1) {clear: both;}
	#home-blog-sfw ul.blog-list > li:nth-child(4) {display: block;}
}

/*
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#home-blog-sfw {}
	#home-blog-sfw ul.blog-list {}
	#home-blog-sfw ul.blog-list > li {float: none; width: 100%; margin-bottom: 0.75rem;}
	#home-blog-sfw ul.blog-list > li:last-child {margin-bottom: 0;}
	#home-blog-sfw ul.blog-list .img-wrap {float: left; width: 40%; box-sizing: border-box; height: 10rem; overflow: hidden;}
	#home-blog-sfw ul.blog-list .img-wrap img {object-fit: cover; width: 100%; height: 100%;
	border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-top-right-radius: 0; -o-border-top-right-radius: 0;
	border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0;
	border-bottom-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-bottom-left-radius: 20px; -o-border-bottom-left-radius: 20px;}
	#home-blog-sfw ul.blog-list .desc-wrap {float: right; width: 60%; box-sizing: border-box;}
} */

@media only screen and (max-width: 768px) {	
	#home-slideshow-sfw {margin-bottom: 2rem;}
	.slideshow-item img.featured {display: none;}
	.slideshow-item img.thumb {display: block; width: 100%;}
	.slideshow-caption {width: 80%; left: 10%;}
	
	#home-point-sfw {margin-bottom: 2rem; margin-top: -3.5rem;}
	ul#home-point-list > li {float: none; width: 100%; margin-bottom: 0;
	border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-top-left-radius: 0; -o-border-top-left-radius: 0;
	border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0;}
	ul#home-point-list > li .desc-wrap {min-height: 0;}
	ul#home-point-list > li:first-child {
	border-top-left-radius: 30px; -webkit-border-top-left-radius: 30px; -moz-border-top-left-radius: 30px; -o-border-top-left-radius: 30px;}
	ul#home-point-list > li:last-child {
	border-bottom-right-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-bottom-right-radius: 30px; -o-border-bottom-right-radius: 30px;}
	
	h2.gen-ct-title {font-size: 1rem; line-height: 1.2rem;}
	#home-about-img-ct {width: 100%; margin-bottom: 1rem;}
	#home-about-desc-ct {width: 100%;}
	
	a.gen-btn {font-size: 0.5rem; padding: 0.4rem 0.7rem; min-width: 4rem;}
	
	ul.portfolio-list > li {width: 50%;}
	ul.portfolio-list > li:nth-child(3n) {width: 50%;}
	ul.portfolio-list > li:nth-child(3n + 1) {clear: none;}
	ul.portfolio-list > li:nth-child(2n + 1) {clear: both;}
	
	#home-blog-sfw {margin-bottom: 2rem;}
	#home-blog-sfw ul.blog-list > li {float: none; width: 100%; margin-bottom: 1.25rem;}
	#home-blog-sfw ul.blog-list > li:nth-child(4) {display: none;}
	#home-blog-sfw ul.blog-list > li:last-child {margin-bottom: 0;}
	#home-blog-sfw ul.blog-list .desc-wrap {min-height: 0;}
}

@media only screen and (max-width: 500px) {	
	.slideshow-caption {width: 90%; left: 5%;}
	.slideshow-caption h5 {margin-bottom: 0.5rem; padding: 0.3rem 0.5rem; font-size: 0.35rem; line-height: 0.55rem;}
	.slideshow-caption h2 {font-size: 0.9rem; line-height: 1.1rem;}
	
	ul.portfolio-list > li {width: 100% !important;}
	
	#home-about-sfw {text-align: center;}
}
/* /HOME */


/* ABOUT */
#pages-top-sfw {position: relative; height: 8rem; overflow: hidden;}
#pages-top-sfw img {object-fit: cover; width: 100%; height: 100%;}
#pages-top-cover-ct {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 750;}
#pages-top-caption-ct {position: absolute; top: 50%; transform: translateY(-50%); width: 50%; left: 5%; z-index: 800;}
#pages-top-caption-ct h2, #pages-top-caption-ct h5, #pages-top-caption-ct h6 {font-family: 'TitleBoldFont', Arial, Verdana; color: #fff; margin-bottom: 0.2rem;}
#pages-top-caption-ct h5.cl-secondary {color: #282e68;}

#breadcrumb-sfw {padding: 0.5rem 0 0.4rem 0; background: #282e68; margin-bottom: 3rem;}
#breadcrumb-sfw.no-mb {margin-bottom: 0;}
ul.breadcrumb-list {}
ul.breadcrumb-list > li {float: left; margin-right: 20px;}
ul.breadcrumb-list > li:last-child {margin-right: 0;}
ul.breadcrumb-list > li > a {font-size: 0.5rem; line-height: 0.7rem; color: #fff; display: inline-block;}
ul.breadcrumb-list > li > a:hover {text-decoration: none; color: #d32326;}
ul.breadcrumb-list > li > a.sep, ul.breadcrumb-list > li > a.sep:hover {width: 0.7rem; height: 0.7rem; background: url(../images/icon/arrow-right-white.png) no-repeat center; background-size: auto 0.35rem;}
ul.breadcrumb-list > li > a.active, ul.breadcrumb-list > li > a.active:hover {color: #fff; font-family: 'BoldFont', Arial, Verdana;}

#about-story-sfw {margin-bottom: 3rem;}
img.gen-img-rounded {display: block; max-width: 100%;
border-top-left-radius: 50px; -webkit-border-top-left-radius: 50px; -moz-border-top-left-radius: 50px; -o-border-top-left-radius: 50px;
border-bottom-right-radius: 50px; -webkit-border-bottom-right-radius: 50px; -moz-border-bottom-right-radius: 50px; -o-border-bottom-right-radius: 50px;}
#about-story-img-ct {float: right; width: 28%;}
#about-story-desc-ct {float: left; width: 67%;}
#about-story-desc-ct.full-width {float: none; width: 100%;}

#about-vision-sfw {margin-bottom: 3rem;}
#about-vision-img-ct {float: left; width: 28%;}
#about-vision-desc-ct {float: right; width: 67%;}
#about-vision-desc-ct.full-width {float: none; width: 100%;}

#about-mission-sfw {margin-bottom: 2rem;}
#about-mission-sfw h2.gen-ct-title {text-align: center;}
ul.three-gen-cols {margin-top: 1rem;}
ul.three-gen-cols > li {float: left; width: 30%; margin-right: 5%; margin-bottom: 1rem;}
ul.three-gen-cols > li:nth-child(3n) {margin-right: 0;}
ul.three-gen-cols > li:nth-child(3n + 1) {clear: both;}
ul.three-gen-cols > li h3 {font-size: 0.8rem; line-height: 1rem; color: #d32326; font-family: 'TitleBoldFont', Arial, Verdana;}
ul.three-gen-cols > li h3.plain {color: #222222;}
ul.three-gen-cols > li h4 {font-size: 0.6rem; line-height: 0.8rem; color: #282e68; font-family: 'TitleBoldFont', Arial, Verdana;}
ul.three-gen-cols > li .img-wrap {position: relative; margin-bottom: 0.7rem;}
ul.three-gen-cols > li .img-wrap img {display: block; max-width: 100%;}
ul.three-gen-cols > li .desc-wrap {}
ul#about-mission-list > li {text-align: center;}

#about-value-sfw {margin-bottom: 1rem;}
#about-value-sfw h2.gen-ct-title {text-align: center;}
ul#about-value-list > li {text-align: center; margin-bottom: 2rem;}
ul#about-value-list > li .img-wrap img {max-width: 4rem; margin: 0 auto;}

#about-point-sfw {margin-bottom: 2rem;}
ul.gen-four-cols {}
ul.gen-four-cols > li {float: left; width: 22%; margin-right: 4%; margin-bottom: 1rem;}
ul.gen-four-cols > li:nth-child(4n) {margin-right: 0;}
ul.gen-four-cols > li:nth-child(4n + 1) {clear: both;}
ul.gen-four-cols > li h3 {font-size: 0.8rem; line-height: 1rem; color: #d32326; font-family: 'TitleBoldFont', Arial, Verdana;}
ul.gen-four-cols > li h3.plain {color: #222222;}
ul.gen-four-cols > li .img-wrap {margin-bottom: 0.7rem;}
ul.gen-four-cols > li .img-wrap img {max-width: 100%; display: block;}
ul.gen-four-cols > li .desc-wrap {}
ul#about-point-list > li {text-align: center;}
ul#about-point-list > li h3 {font-size: 1.5rem; line-height: 1.7rem; margin-bottom: 0.3rem;}
ul#about-point-list > li p {font-family: 'BoldFont', Arial, Verdana; font-size: 0.7rem; line-height: 0.9rem;}

#about-team-sfw {margin-bottom: 1rem;}
#about-team-sfw h2.gen-ct-title {text-align: center;}
ul#about-team-list > li {margin-bottom: 2rem; text-align: center;}
ul#about-team-list > li .img-wrap .inner {margin: 0 auto; width: 6.5rem; height: 6.5rem; box-sizing: border-box; padding: 0.35rem; border: 2px solid #282e68; position: relative;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;}
ul#about-team-list > li .img-wrap .inner img {object-fit: cover; width: 100%; height: 100%;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;}
ul#about-team-list > li h3 {margin-bottom: 0.1rem;}

@media only screen and (min-width: 1500px) {
	#pages-top-sfw {height: 10rem;}
	#pages-top-caption-ct {width: 40%; left: 7.5%;}
}

@media only screen and (max-width: 1024px) {
	#about-story-img-ct {width: 32%;}
	#about-story-desc-ct {width: 63%;}
	#about-story-desc-ct.full-width {float: none; width: 100%;}
	#about-vision-img-ct {width: 32%;}
	#about-vision-desc-ct {width: 63%;}
	#about-vision-desc-ct.full-width {float: none; width: 100%;}
	
	ul.three-gen-cols > li {float: left; width: 45%; margin-right: 10%;}
	ul.three-gen-cols > li:nth-child(3n) {margin-right: 10%;}
	ul.three-gen-cols > li:nth-child(3n + 1) {clear: none;}	
	ul.three-gen-cols > li:nth-child(2n) {margin-right: 0;}
	ul.three-gen-cols > li:nth-child(2n + 1) {clear: both;}	
}

@media only screen and (max-width: 768px) {
	#breadcrumb-sfw {margin-bottom: 2rem;}
	#breadcrumb-sfw.no-mb {margin-bottom: 0;}
	
	#pages-top-caption-ct  {left: 10%; width: 70%;}
	
	#about-story-sfw {margin-bottom: 2rem;}
	#about-story-img-ct {width: 100%;}
	#about-story-img-ct img {margin: 0 auto; max-width: 100%;}
	#about-story-desc-ct {width: 100%; margin-top: 1rem;}
	#about-story-desc-ct.full-width {margin-top: 0;}
	
	#about-vision-img-ct {width: 100%;}
	#about-vision-img-ct img {margin: 0 auto; max-width: 100%;}
	#about-vision-desc-ct {width: 100%; margin-top: 1rem;}
	#about-vision-desc-ct.full-width {float: none; width: 100%; margin-top: 0;}
	
	#about-mission-sfw ul.three-gen-cols {margin-top: 0.4rem;}
	#about-value-sfw ul.three-gen-cols {margin-top: 0.4rem;}
	#about-team-sfw ul.three-gen-cols {margin-top: 0.4rem;}
	ul.three-gen-cols > li h3  {font-size: 0.7rem; line-height: 0.9rem;}	
	
	ul.gen-four-cols > li {float: left; width: 45%; margin-right: 10%;}
	ul.gen-four-cols > li:nth-child(4n) {margin-right: 10%;}
	ul.gen-four-cols > li:nth-child(4n + 1) {clear: both;}
	ul.gen-four-cols > li:nth-child(2n) {margin-right: 0;}
	ul.gen-four-cols > li:nth-child(2n + 1) {clear: none;}
	ul.gen-four-cols > li h3 {font-size: 0.7rem; line-height: 0.9rem;}
}

@media only screen and (max-width: 500px) {
	#pages-top-caption-ct  {left: 5%; width: 90%;}
	#pages-top-caption-ct h2 {font-size: 1rem; line-height: 1.2rem;}
	#pages-top-caption-ct h5 {font-size: 0.75rem; line-height: 0.95rem;}
	
	ul.breadcrumb-list > li  {margin-right: 0; float: none; width: 100%; display: none;}
	ul.breadcrumb-list > li:last-child {margin-right: 0; display: block; text-align: center;}
	ul.breadcrumb-list > li > a.sep, ul.breadcrumb-list > li > a.sep:hover {background-size: auto 0.3rem; background-position: bottom 3px center;}
	
	ul.three-gen-cols > li {width: 100%; margin-right: 0;}
	
	ul#about-team-list > li .img-wrap .inner {width: 6rem; height: 6rem;}
}
/* /ABOUT */


/* SERVICE */
#service-top-sfw {padding: 1.5rem 0; background: #f0f0f0; text-align: center; margin-bottom: 3rem;}
#service-top-sfw .inner {margin: 0 auto; width: 70%;}
#service-top-sfw h2.gen-ct-title {margin-bottom: 0.5rem;}

#service-list-sfw {margin-bottom: 3rem;}
ul#service-list {}
ul#service-list > li {margin-bottom: 3rem; position: relative;}
ul#service-list > li:last-child {margin-bottom: 0;}
ul#service-list > li .img-wrap {float: left; width: 47.5%;}
ul#service-list > li .desc-wrap {position: absolute; width: 47.5%; right: 0; top: 50%; transform: translateY(-50%);}
ul#service-list > li:nth-child(even) .img-wrap {float: right;}
ul#service-list > li:nth-child(even) .desc-wrap {right: auto; left: 0;}
ul#service-list > li .desc-wrap h3 {font-family: 'TitleBoldFont', Arial, Verdana; color: #d32326}
ul#service-list > li .desc-wrap a.gen-btn {margin-top: 1rem;}

#service-detail-sfw {margin-bottom: 3rem;}
#sdet-img-ct {float: left; width: 47.5%;}
#sdet-det-ct {float: right; width: 47.5%;}

#service-expertise-sfw {margin-bottom: 1rem;}
#service-expertise-sfw h2.gen-ct-title {text-align: center;}
ul#service-expertise-list {margin-top: 1rem;}
ul#service-expertise-list > li {text-align: center; margin-bottom: 2rem;}
ul#service-expertise-list > li .img-wrap img {margin: 0 auto; max-width: 5rem;}
ul#service-expertise-list > li .desc-wrap h3 {font-size: 0.6rem; line-height: 0.8rem;}

#other-portfolio-sfw {margin-bottom: 3rem;}
#other-portfolio-sfw h2.gen-ct-title {text-align: center;}

#other-service-sfw {margin-bottom: 1rem;}
#other-service-sfw h2.gen-ct-title {text-align: center;}
ul#other-service-list {margin-top: 1rem;}
ul#other-service-list > li {float: left; width: 30%; margin-right: 5%; margin-bottom: 2rem;}
ul#other-service-list > li:nth-child(3n) {margin-right: 0;}
ul#other-service-list > li:nth-child(3n + 1) {clear: both;}
ul#other-service-list > li .img-wrap {float: left; width: 22%;}
ul#other-service-list > li .img-wrap .inner {position: relative; border: 1px solid #bfbfbf;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;}
ul#other-service-list > li .img-wrap img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 50%; max-height: 50%;}
ul#other-service-list > li .desc-wrap {float: right; width: 73%;}
ul#other-service-list > li .desc-wrap h3, ul#other-service-list > li .desc-wrap h3 a {font-size: 0.75rem; line-height: 1.0rem; font-family: 'TitleBoldFont', Arial, Verdana; margin-bottom: 0.3rem; color: #222222;}
ul#other-service-list > li .desc-wrap h3 a:hover {color: #d32326; text-decoration: none;}
ul#other-service-list > li .desc-wrap p {}

@media only screen and (min-width: 1500px) {	
	#service-top-sfw .inner {margin: 0 auto; width: 75%;}
}
@media only screen and (min-width: 1900px) {	
	#service-top-sfw .inner {margin: 0 auto; width: 80%;}
}

@media only screen and (max-width: 1024px) {
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {	
	ul#other-service-list > li .img-wrap, ul#other-service-list > li .desc-wrap {float: none; width: 100%;}
	ul#other-service-list > li .img-wrap .inner {width: 2.5rem; height: 2.5rem; margin: 0 auto;}
	ul#other-service-list > li .desc-wrap {margin-top: 0.7rem; text-align: center;}
}

@media only screen and (max-width: 768px) {
	#service-top-sfw {margin-bottom: 2rem;}
	#service-top-sfw .inner  {width: 100%;}
	
	ul#service-list > li:last-child {margin-bottom: 0;}
	ul#service-list > li .img-wrap, ul#service-list > li:nth-child(even) .img-wrap {float: none; width: 100%; margin: 0;}
	ul#service-list > li .img-wrap img {margin: 0 auto; max-width: 100%;}
	ul#service-list > li .desc-wrap, ul#service-list > li:nth-child(even) .desc-wrap {position: relative; width: 100%; margin: 0; margin-top: 1rem; top: auto; transform: none;}
	
	#sdet-img-ct, #sdet-det-ct {float: none; width: 100%; margin: 0;}
	#sdet-det-ct {margin-top: 1rem;}
	
	ul#service-expertise-list {margin-top: 0.5rem;}
	
	ul#other-service-list {margin-top: 0.5rem;}
	ul#other-service-list > li {width: 100%;}
}

@media only screen and (max-width: 500px) {
	ul#other-service-list > li .img-wrap, ul#other-service-list > li .desc-wrap {float: none; width: 100%;}
	ul#other-service-list > li .img-wrap .inner {width: 3.5rem; height: 3.5rem; margin: 0 auto;}
	ul#other-service-list > li .desc-wrap {margin-top: 0.7rem; text-align: center;}
}
/* /SERVICE */


/* PORTFOLIO */
#portfolio-cat-sfw {padding: 0.5rem 0; background: #d32326;}
ul#portfolio-cat-list {}
ul#portfolio-cat-list > li {float: left; margin-right: 40px;}
ul#portfolio-cat-list > li:last-child {margin-right: 0;}
ul#portfolio-cat-list > li > a {color: #fff; display: inline-block; padding-bottom: 0.1rem; border-bottom: 2px solid transparent; cursor: pointer;}
ul#portfolio-cat-list > li > a:hover {color: #dfdfdf; text-decoration: none;}
ul#portfolio-cat-list > li > a.active, ul#portfolio-cat-list > li > a.active:hover {color: #fff; border-bottom: 2px solid #fff; font-family: 'BoldFont', Arial, Verdana; cursor: text;}
#portfolio-cat-form {display: none;}

#portfolio-list-sfw {margin-bottom: 3rem;}
#portfolio-list-sfw ul.portfolio-list {margin-bottom: 1rem;}
#portfolio-not-found-sfw {margin-top: 1.5rem; margin-bottom: 3rem;}

#portfolio-more-sfw {margin-bottom: 3rem;}
a.load-next-portfolio {cursor: pointer;}

#pordetail-list-sfw {margin-bottom: 3rem;}
ul#pordetail-list {}
ul#pordetail-list > li {margin-bottom: 3rem; position: relative;}
ul#pordetail-list > li:last-child {margin-bottom: 0;}
ul#pordetail-list > li .img-wrap {float: left; width: 47.5%;}
ul#pordetail-list > li .img-wrap img {display: block; max-width: 100%;}
ul#pordetail-list > li .desc-wrap {position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 47.5%;}
ul#pordetail-list > li:nth-child(even) .img-wrap {float: right;}
ul#pordetail-list > li:nth-child(even) .desc-wrap {right: auto; left: 0;}
ul#pordetail-list > li .desc-wrap .pordetail-title-ct {margin-bottom: 1rem;}
ul#pordetail-list > li .desc-wrap .pordetail-title-ct h2 {font-family: 'TitleBoldFont', Arial, Verdana; color: #d32326; font-size: 1.2rem; line-height: 1.4rem; margin-bottom: 0.3rem;}
ul#pordetail-list > li .desc-wrap .pordetail-title-ct h5, ul#pordetail-list > li .desc-wrap .pordetail-title-ct h5 a {font-size: 0.7rem; line-height: 0.9rem; color: #282e68; font-family: 'TitleBoldFont', Arial, Verdana;}
ul#pordetail-list > li .desc-wrap .pordetail-title-ct h5 a:hover {text-decoration: underline;}

#pordetail-pic-sfw {}
ul#pordetail-pic-list {}
ul#pordetail-pic-list > li {float: left; width: 33.333%;}
ul#pordetail-pic-list > li:nth-child(3n) {width: 33.334%;}
ul#pordetail-pic-list > li:nth-child(3n + 1) {clear: both;}
ul#pordetail-pic-list > li .img-wrap {width: 100%; height: 100%; overflow: hidden; position: relative;}
ul#pordetail-pic-list > li .img-wrap img {object-fit: cover; width: 100%; height: 100%; z-index: 100;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#pordetail-pic-list > li .img-wrap img.hvr {transform: scale(1.1);}
ul#pordetail-pic-list > li .img-wrap .cover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 110; background: rgba(0, 0, 0, 0.25);
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#pordetail-pic-list > li .img-wrap .cover.hvr {background: rgba(0, 0, 0, 0);}
ul#pordetail-pic-list > li .pic-title {display: none;}
.fancybox-title.fancybox-title-outside-wrap {text-align: center; font-family: 'BoldFont', Arial, Verdana; font-size: 0.7rem;}

#pordetail-link-sfw {text-align: center; margin-top: 1rem;}

#pordetail-other-sfw {margin-bottom: 2rem;}
#pordetail-other-sfw .wrap {padding-top: 2rem; margin-top: 2rem; border-top: 0.05rem dotted #9f9f9f;}
#pordetail-other-sfw h2.gen-ct-title {text-align: center;}
ul.portfolio-other-list {margin-top: 1rem;}
ul.portfolio-other-list > li {float: left; width: 32%; margin-right: 2%; margin-bottom: 1rem;}
ul.portfolio-other-list > li:nth-child(3n) {margin-right: 0;}
ul.portfolio-other-list > li:nth-child(3n + 1) {clear: both;}

@media only screen and (min-width: 1500px) {
	ul#portfolio-cat-list > li > a  {font-size: 0.5rem;}
}

@media only screen and (max-width: 1024px) {
	ul#portfolio-cat-list > li  {margin-right: 30px;}
	
	ul.portfolio-other-list > li {width: 48%; margin-right: 4%;}
	ul.portfolio-other-list > li:nth-child(3n) {margin-right: 4%;}
	ul.portfolio-other-list > li:nth-child(3n + 1) {clear: none;}
	ul.portfolio-other-list > li:nth-child(2n) {margin-right: 0;}
	ul.portfolio-other-list > li:nth-child(2n + 1) {clear: both;}	
}

@media only screen and (max-width: 768px) {
	ul#portfolio-cat-list {display: none;}
	#portfolio-cat-form {display: block;}
	#portfolio-cat-form  .styled-select-wrapper {background: url(../images/icon/arrow-down-white.png) no-repeat right center; background-size: 0.3rem auto; border: none; border-bottom: 1px solid #fff; color: #fff; padding-left: 0; width: 50%;
	border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0;}
	#portfolio-cat-form  .styled-select-wrapper select {color: #fff; padding-left: 0;}
	#portfolio-cat-form  .styled-select-wrapper select option {color: #222;}
	
	#pordetail-list-sfw {margin-bottom: 2rem;}
	ul#pordetail-list > li {margin-bottom: 2rem;}
	ul#pordetail-list > li:last-child {margin-bottom: 0;}
	ul#pordetail-list > li .img-wrap, ul#pordetail-list > li:nth-child(even) .img-wrap {float: none; width: 100%; margin: 0;}
	ul#pordetail-list > li .img-wrap img {margin: 0 auto; max-width: 100%;}
	ul#pordetail-list > li .desc-wrap, ul#pordetail-list > li:nth-child(even) .desc-wrap {top: auto; transform: none; position: relative; width: 100%; margin: 0; margin-top: 1rem;}
		
	ul#pordetail-pic-list > li {width: 50%;}
	ul#pordetail-pic-list > li:nth-child(3n) {width: 50%;}
	ul#pordetail-pic-list > li:nth-child(3n + 1) {clear: none;}
	ul#pordetail-pic-list > li:nth-child(2n) {width: 50%;}
	ul#pordetail-pic-list > li:nth-child(2n + 1) {clear: both;}	
	
	ul.portfolio-other-list {margin-top: 0.5rem;}
	ul.portfolio-other-list > li {width: 100%; margin-right: 0; margin-bottom: 0.5rem;}
	ul.portfolio-other-list > li:last-child {margin-bottom: 0;}
}

@media only screen and (max-width: 500px) {
	#portfolio-cat-form  .styled-select-wrapper {width: 80%;}
	
	ul#pordetail-pic-list > li, ul#pordetail-pic-list > li:nth-child(3n), ul#pordetail-pic-list > li:nth-child(2n) {width: 100%;}
}
/* /PORTFOLIO */


/* BLOG */
#blog-cat-sfw {margin-bottom: 3rem; text-align: center;}
ul#blog-cat-list {display: inline-block;}
ul#blog-cat-list > li {float: left; margin-right: 10px; margin-bottom: 10px;}
ul#blog-cat-list > li:last-child {margin-right: 0;}
ul#blog-cat-list > li > a {display: inline-block; font-size: 0.5rem; line-height: 0.7rem; padding: 0.3rem 0.7rem; background: #dbdbdb; color: #222222;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
ul#blog-cat-list > li > a:hover {background: #d32326; color: #fff; text-decoration: none;}
ul#blog-cat-list > li > a.active, ul#blog-cat-list > li > a.active:hover {text-transform: uppercase; font-family: 'BoldFont', Arial, Verdana; color: #fff; background: #d32326;}

#blog-featured-sfw {margin-bottom: 3rem;}
#blog-featured-sfw .inner {position: relative;}
#blfeatured-img-ct {float: left; width: 68%;}
#blfeatured-img-ct img {display: block; width: 100%; z-index: 100;
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px;}
#blfeatured-desc-ct {position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 40%; box-sizing: border-box; padding: 1rem; background: #fff; z-index: 110;
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px;
box-shadow: 0px 5px 5px #dfdfdf; -webkit-box-shadow: 0px 5px 5px #dfdfdf; -moz-box-shadow: 0px 5px 5px #dfdfdf; -o-box-shadow: 0px 5px 5px #dfdfdf;}
#blfeatured-desc-ct .blog-item h3, #blfeatured-desc-ct .blog-item h3 a {font-size: 0.9rem; line-height: 1.1rem;}

#blog-list-sfw {margin-bottom: 2.5rem;}

#blog-detail-sfw {margin-bottom: 3rem;}
#bldet-desc-ct {float: right; width: 82%;}
#bldet-desc-ct .img-wrap {margin-bottom: 0.75rem;}
#bldet-desc-ct .img-wrap img {display: block; max-width: 100%; margin: 0 auto;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
#bldet-desc-ct .blog-date-resp {display: none;}
#bldet-info-ct {position: absolute; width: 15%; top: 29%; text-align: center;}
#bldet-info-ct p.blog-date {color: #a5a5a5; font-family: 'BoldFont', Arial, Verdana; font-size: 1.1rem; line-height: 1.3rem;}
#bldet-info-ct p.blog-date span {display: block;}
ul.blshare-socmed-list {margin-top: 1.2rem;}
ul.blshare-socmed-list > li {margin-bottom: 7px;}
ul.blshare-socmed-list > li:last-child {margin-bottom: 0;}
ul.blshare-socmed-list > li img {margin: 0 auto; width: 1.5rem; height: 1.5rem; cursor: pointer;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul.blshare-socmed-list > li img:hover {opacity: 0.75;}

#blog-other-sfw {margin-bottom: 2.5rem;}
#blog-other-sfw h2.gen-ct-title {text-align: center;}
#blog-other-sfw .inner {border-top: 1px dotted #bfbfbf; padding-top: 3rem;}
#blog-other-sfw ul.blog-list > li:nth-child(4)  {display: none;}

@media only screen and (max-width: 1024px) {
	#blog-featured-sfw .inner {background: #fff;
	border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px;
	box-shadow: 0px 5px 5px #dfdfdf; -webkit-box-shadow: 0px 5px 5px #dfdfdf; -moz-box-shadow: 0px 5px 5px #dfdfdf; -o-box-shadow: 0px 5px 5px #dfdfdf;}
	#blfeatured-img-ct {width: 55%; height: 13rem; overflow: hidden;}
	#blfeatured-img-ct img {object-fit: cover; width: 100%; height: 100%;
	border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-top-right-radius: 0; -o-border-top-right-radius: 0;
	border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; -o-border-bottom-right-radius: 0;}
	#blfeatured-desc-ct {position: relative; width: 45%; top: auto; transform: none; float: right; background: none;
	border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0;
	box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none;}
	
	#blog-list-sfw ul.blog-list {}
	#blog-list-sfw ul.blog-list > li {width: 48%; margin-right: 4%;}
	#blog-list-sfw ul.blog-list > li:nth-child(3n) {margin-right: 4%;}
	#blog-list-sfw ul.blog-list > li:nth-child(3n + 1) {clear: none;}
	#blog-list-sfw ul.blog-list > li:nth-child(2n) {margin-right: 0;}
	#blog-list-sfw ul.blog-list > li:nth-child(2n + 1) {clear: both;}
	
	#bldet-desc-ct {width: 75%;}
	#bldet-info-ct {width: 22%; top: 21%;}	
	
	#blog-other-sfw ul.blog-list {}
	#blog-other-sfw ul.blog-list > li {width: 48%; margin-right: 4%;}
	#blog-other-sfw ul.blog-list > li:nth-child(3n) {margin-right: 4%;}
	#blog-other-sfw ul.blog-list > li:nth-child(3n + 1) {clear: none;}
	#blog-other-sfw ul.blog-list > li:nth-child(2n) {margin-right: 0;}
	#blog-other-sfw ul.blog-list > li:nth-child(2n + 1) {clear: both;}	
	#blog-other-sfw ul.blog-list > li:nth-child(4)  {display: block;}
}

@media only screen and (max-width: 768px) {
	#blog-cat-sfw {margin-bottom: 1.5rem;}
	
	#blfeatured-img-ct, #blfeatured-desc-ct {float: none; width: 100%; margin: 0;}
	#blfeatured-img-ct {height: auto;}
	#blfeatured-img-ct img {width: 100%; height: auto;	
	border-top-right-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-top-right-radius: 20px; -o-border-top-right-radius: 20px;
	border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-bottom-left-radius: 0; -o-border-bottom-left-radius: 0;}
	
	#blog-featured-sfw {margin-bottom: 1.25rem;}
	#blog-list-sfw {margin-bottom: 2rem;}
	#blog-list-sfw ul.blog-list > li {width: 100%; margin-right: 0; margin-bottom: 1.25rem;}
	#blog-list-sfw ul.blog-list > li:last-child {margin-bottom: 0;}
	#blog-list-sfw ul.blog-list > li .desc-wrap {min-height: 0;}
	
	#blog-detail-sfw {margin-bottom: 2rem;}
	#bldet-desc-ct {width: 100%;}
	#bldet-info-ct {display: none;}
	#bldet-desc-ct .blog-date-resp {display: block; margin-top: 0.3rem; font-size: 0.6rem; line-height: 0.8rem; color: #a5a5a5;}
	
	#blog-other-sfw {margin-bottom: 2rem;}
	#blog-other-sfw .inner {padding-top: 2rem;}
	#blog-other-sfw ul.blog-list > li {width: 100%; margin-right: 0;}
	#blog-other-sfw ul.blog-list > li .desc-wrap {min-height: 0;}
}
/* /BLOG */


/* CAREER */
#career-list-sfw {margin-bottom: 3rem; text-align: center;}

ul#career-list {margin-top: 2rem;}
ul#career-list > li {padding: 1rem 1.25rem; border-bottom: 1px solid #dfdfdf; background: #fff;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#career-list > li.hvr {background: #282e68;}
ul#career-list > li:last-child {border-bottom: 1px solid transparent;}
ul#career-list > li .career-title-ct {float: left; width: 70%;}
ul#career-list > li .career-title-ct h3 {font-size: 0.6rem; line-height: 0.9rem; font-family: 'BoldFont', Arial, Verdana; margin-bottom: 0; text-align: left;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#career-list > li .career-title-ct h3.hvr {color: #fff;}
ul#career-list > li .career-apply-ct {float: right; margin-top: -0.25rem;}
ul#career-list > li .career-apply-ct a {display: inline-block; font-size: 0.5rem; line-height: 0.8rem; padding: 0.25rem 0.5rem; border: 1px solid #dfdfdf; color: #222222;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
ul#career-list > li .career-apply-ct a:hover {text-decoration: none; background: #282e68; color: #fff; border: 1px solid #282e68;}
ul#career-list > li .career-apply-ct a.hvr {border: 1px solid #fff; color: #fff;}
ul#career-list > li .career-apply-ct a.hvr:hover {color: #282e68; background: #fff; border: 1px solid #fff;}

.gen-popup-ct {background: #fff; width: 700px; box-sizing: border-box; padding: 1rem;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
.gen-popup-section {margin-bottom: 1rem;}
.gen-popup-ct .gen-popup-section:last-child {margin-bottom: 0;}
.gen-popup-section h2 {font-size: 1.0rem; line-height: 1.3rem; margin-bottom: 0.3rem;}
.gen-popup-section h3 {font-size: 0.8rem; line-height: 1.1rem; margin-bottom: 0.3rem;}
.gen-popup-ct a.gen-btn {font-size: 0.5rem; line-height: 0.5rem; padding: 0.5rem 0.8rem; min-width: 3rem;}

#career-apply-sfw {margin-bottom: 3rem;}
#career-apply-sfw h2.gen-ct-title, #career-apply-sfw .wysiwyg-content {text-align: center;}
#career-apply-form {margin-top: 1.5rem;}
.gen-form-row {float: left; width: 100%; position: relative; margin-bottom: 0.7rem;}
.gen-form-row .gfr-full {float: left; width: 100%; position: relative;}
.gen-form-row .gfr-half {float: left; width: 48%; margin-right: 4%; position: relative;}
.gen-form-row .gfr-half:nth-child(2n) {margin-right: 0;}
#career-apply-form .gen-form-row .gfr-half {width: 49%; margin-right: 2%;}
#career-apply-form .gen-form-row .gfr-half:nth-child(2n) {margin-right: 0;}
#career-apply-form label.form-label {margin-bottom: 0.3rem; display: block; font-family: 'BoldFont', Arial, Verdana;}
#career-apply-form .styled-input-file-wrapper {width: 7rem; display: inline-block; margin-right: 0.5rem;}
#career-gfr-submit-ct {text-align: center;}

#career-captcha-box div {margin: 0 auto;}

@media only screen and (min-width: 1500px) {
	.gen-popup-ct {width: 1024px;}
}

@media only screen and (max-width: 768px) {
	ul#career-list > li {padding: 0.7rem;}
	.gen-popup-ct {width: 500px;}
}

@media only screen and (max-width: 600px) {
	ul#career-list > li .career-title-ct, ul#career-list > li .career-apply-ct {float: none; width: 100%; margin: 0;}
	ul#career-list > li .career-apply-ct {margin-top: 0.3rem; margin-bottom: 0.3rem;}
	ul#career-list > li .career-title-ct h3 {text-align: center;}
	
	.gen-popup-ct {width: 400px;}
}

@media only screen and (max-width: 500px) {
	.gen-popup-ct {width: 320px;}
	
	#career-apply-form .gen-form-row .gfr-half {width: 100%; margin-right: 0; margin-bottom: 0.7rem;}
	#career-apply-form .gen-form-row .gfr-half:nth-child(2n) {margin-bottom: 0;}
	#career-apply-form .styled-input-file-wrapper {width: 5.5rem;}
}
/* /CAREER */


/* CONTACT */
#contact-form-sfw {margin-bottom: 3rem;}

#contact-form-ct {float: left; width: 55%;}
#contact-form .gen-form-row .gfr-half {width: 48.5%; margin-right: 3%;}
#contact-form .gen-form-row .gfr-half:nth-child(2n) {margin-right: 0;}

#contact-info-ct {float: right; width: 40%;}
.ct-info {margin-top: 0.7rem;}
p.ct-icon, p.ct-icon a {color: #282e68; font-family: 'BoldFont', Arial, Verdana;}
p.ct-icon a:hover {text-decoration: underline}
p.ct-icon.location {padding-left: 1.2rem; background: url(../images/icon/ct-location.png) no-repeat left top 0.05rem; background-size: auto 0.8rem;}
p.ct-icon.ohour {padding-left: 1.2rem; background: url(../images/icon/ct-ohour.png) no-repeat left top 0.05rem; background-size: auto 0.8rem;}
p.ct-icon.phone {padding-left: 1.2rem; background: url(../images/icon/ct-phone.png) no-repeat left top 0.05rem; background-size: auto 0.7rem;}
p.ct-icon.email {padding-left: 1.2rem; background: url(../images/icon/ct-email.png) no-repeat left top 0.1rem; background-size: auto 0.7rem;}
ul#ct-socmed-list {}
ul#ct-socmed-list > li {float: left; margin-right: 7px;}
ul#ct-socmed-list > li:last-child {margin-right: 0;}
ul#ct-socmed-list > li img {width: 1.4rem; height: 1.4rem;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul#ct-socmed-list > li img:hover {opacity: 0.75;}

#contact-gmap-sfw {margin-bottom: -0.3rem;}
#contact-gmap-sfw iframe {width: 100% !important; height: 14rem !important;}

@media only screen and (max-width: 1024px) {	
	#contact-form-ct {width: 48%;}
	#contact-form .gen-form-row .gfr-half {width: 100%; margin-right: 0; margin-bottom: 0.7rem;}
	#contact-form .gen-form-row .gfr-half:nth-child(2n) {margin-bottom: 0;}
	
	#contact-info-ct {width: 47%;}
}

@media only screen and (max-width: 768px) {
	#contact-form-ct, #contact-info-ct {width: 100%;}
	#contact-form .gen-form-row .gfr-half {width: 49%; margin-right: 2%; margin-bottom: 0;}
	#contact-form .gen-form-row .gfr-half:nth-child(2n) {margin-right: 0;}
	#contact-info-ct {margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dotted #bfbfbf;}
	
	#contact-gmap-sfw iframe {height: 12rem !important;}
}

@media only screen and (max-width: 500px) {
	#contact-form .gen-form-row .gfr-half {width: 100%; margin-right: 0; margin-bottom: 0.7rem;}
	#contact-form .gen-form-row .gfr-half:nth-child(2n) {margin-bottom: 0;}	
}
/* /CONTACT */


/* NOT FOUND */
#not-found-sfw {margin-top: 2rem; text-align: center;}
/* /NOT FOUND */


/* PAGINATION */
.pagination-sfw {margin-top: 1rem;}
.pagination-container {}
.pagination-list {}
.pagination-list.centered {display: inline-block; margin: 0 auto;}
.pagination-list li {float: left; margin-bottom: 0.3rem; margin-right: 7px;}
.pagination-list li:last-child {margin-right: 0px;}
.pagination-list li a {font-size: 0.5rem; line-height: 0.5rem; color: #222222; display: inline-block; padding: 0.5rem 0.6rem; border: 1px solid #dfdfdf; cursor: pointer;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
.pagination-list li a:hover {text-decoration: none; color: #fff; background: #282e68;}
.pagination-list li a.active, .pagination-list li a.active:hover {font-family: 'BoldFont', Arial, Verdana; color: #fff; background: #282e68; text-decoration: none; border: 1px solid #282e68;}

@media only screen and (max-width: 768px) {
	.pagination-sfw {margin-top: 1.5rem;}
	.pagination-list li {margin-right: 7px;}
	.pagination-list li a {font-size: 14px; line-height: 14px; padding: 9px 12px;}
}

@media only screen and (max-width: 500px) {
	.pagination-list li a.edge {display: none;}
	.pagination-container.fl-right, .pagination-container.fl-left {float: none !important;}
	.pagination-container {text-align: center;}
	.pagination-list {display: inline-block; margin: 0 auto;}
}
/* /PAGINATION */


/* FOOTER */
#footer {}

#footer-cta-sfw {margin-bottom: 3rem; padding: 1.5rem 0; background: url(../images/bg/cta-bg.jpg) no-repeat center; background-size: cover !important;}
#footer-cta-sfw .inner {width: 50%; margin: 0 auto; text-align: center;}
#footer-cta-sfw h2.gen-ct-title {color: #fff; font-size: 1.1rem; line-height: 1.3rem;}
#footer-cta-sfw p {color: #fff;}
#footer-cta-sfw a.gen-btn {margin-top: 1rem;}

#footer-top-sfw {padding: 1.3rem 0; background: #282e68;}
#footer-col-1-ct, #footer-col-2-ct {float: left; width: 25%; margin-right: 5%;}
#footer-col-3-ct {float: left; width: 40%;}
h2.footer-title {font-family: 'TitleBoldFont', Arial, Verdana; color: #fff; font-size: 0.65rem; line-height: 0.85rem;}
#footer-top-sfw p, #footer-top-sfw a, #footer-top-sfw p a {color: #fff; font-size: 0.45rem; line-height: 0.65rem;}
p.footer-icon {padding-left: 1rem; margin-bottom: 0.35rem;}
p.footer-icon.no-mb {margin-bottom: 0;}
p.footer-icon.phone {background: url(../images/icon/phone-white.png) no-repeat left top 0.1rem; background-size: 0.5rem auto;}
p.footer-icon.email {background: url(../images/icon/email-white.png) no-repeat left top 0.1rem; background-size: 0.5rem auto;}
#subscribe-form input[type="email"] {border: none; border-bottom: 1px solid #efefef; width: 60%; background: none; font-size: 0.45rem; line-height: 0.45rem; color: #fff; height: 35px; padding: 0.3rem 0; margin-top: 0.3rem;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0;}
#subscribe-form input[type="email"]:focus, #subscribe-form input[type="email"]:hover {outline: 0;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none;}
#subscribe-form input[type="email"]::placeholder {color: #afafaf;}

#footer-bottom-sfw {border-top: 1px dotted #9f9f9f; padding: 0.6rem 0 0.45rem 0; background: #282e68;}
#footer-bottom-sfw p {font-size: 0.4rem; line-height: 0.6rem; color: #fff;}
#footer-copyright-ct {float: left;}
ul.socmed-list {}
ul.socmed-list > li {float: left; margin-right: 10px;}
ul.socmed-list > li:last-child {margin-right: 0;}
ul.socmed-list > li img {height: 0.6rem;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
ul.socmed-list > li img:hover {opacity: 0.75;}
#footer-socmed-ct {float: right;}

@media only screen and (min-width: 1500px) {
	#footer-cta-sfw .inner {width: 60%;}
}

@media only screen and (max-width: 1024px) {
	#footer-col-1-ct {width: 45%; margin-right: 10%;}
	#footer-col-2-ct {width: 45%; margin-right: 0;}
	#footer-col-3-ct {width: 100%; margin-top: 1rem; padding-top: 1rem; border-top: 1px dotted #9f9f9f;}
	
	#footer-cta-sfw .inner {width: 80%;}
}

@media only screen and (max-width: 768px) {
	#footer-cta-sfw {margin-bottom: 2rem;}
	#footer-cta-sfw .inner  {width: 100%;}
}

@media only screen and (max-width: 600px) {
	#footer-col-1-ct, #footer-col-2-ct, #footer-col-2 {width: 100%; margin: 0;}
	#footer-col-2-ct {margin-top: 1rem; padding-top: 1rem; border-top: 1px dotted #9f9f9f;}
	#footer-copyright-ct, #footer-socmed-ct {float: none;}
	#footer-socmed-ct {margin-top: 0.3rem;}
	
	#subscribe-form input[type="email"] {width: 75%;}
	#footer-bottom-sfw {text-align: center;}
	#footer-socmed-ct  {float: none;}
	#footer-socmed-ct ul.socmed-list {display: inline-block;}
}
/* /FOOTER */


/* FLOATING WA */
.sticky-wa {position: fixed; right: 0; bottom: 1.5rem; z-index: 2000; height: 2.3rem; width: 100px;}
.sticky-wa img {width: 2.3rem; height: 2.3rem; position: absolute; right: 0.35rem; z-index: 2001;
transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear;}
.sticky-wa img.opened {right: 100px;}
.ste-text {position: absolute; right: 0; margin-top: 0.4rem; z-index: 1000;}
.ste-text a {font-family: 'BoldFont', Arial, Verdana; display: inline-block; color: #fff; width: 0; font-size: 0.45rem; line-height: 1.5rem; background: #1bd741; text-align: center; padding-left: 0; padding-right: 0;
transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear;}
.ste-text a:hover {text-decoration: underline;}
.ste-text a.opened {padding-left: 1.3rem; padding-right: 1rem; width: 2rem;}

@media only screen and (max-width: 500px) {
	.sticky-wa {bottom: 1.6rem;}
	.sticky-wa img {width: 50px; height: 50px;}
	.sticky-wa img.opened {right: 75px;}
	.ste-text {margin-top: 8px;}
	.ste-text a {font-size: 11px; line-height: 35px;}
	.ste-text a.opened  {width: 50px; padding-left: 20px; padding-right: 20px;}
}
/* /FLOATING WA */


/* OVERLAY NOTIFICATION */
.overlay-bg, .overlay-bg2  { width: 100%; height: 100%; background: #7f7f7f; opacity: 0.5; z-index: 9000; left: 0; top: 0; position: fixed;}
.notification-content, .notification-content2 {width: 40%; box-sizing: border-box; padding: 1.3rem; background: #ffffff; z-index: 10000; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.notification-content h3, .notification-content2 h3 {font-size: 1rem; line-height: 1.2rem; font-family: 'BoldFont', Arial, Verdana; color: #333333; margin-bottom: 0.7rem;}
.notification-content p, .notification-content2 p {font-size: 0.6rem; line-height: 0.9rem; margin-bottom: 0px; font-family: 'GeneralFont', Arial, Verdana; color: #333333;}
.notification-content small, .notification-content2 small {padding-left: 0.1rem; font-size: 0.5rem; color: #222; font-family: 'GeneralFont', Arial, Verdana;}

.notif-success h3, .notif-success2 h3 {padding-top: 3.4rem; background: url(../images/icon/success-notif.png) no-repeat top center; background-size: auto 2.4rem;}
a.notification-close-btn {margin-top: 0.7rem; cursor: pointer; display: inline-block;}
a.notification-close-btn.gen-btn {font-size: 0.5rem; line-height: 0.5rem; padding: 0.5rem 0.8rem; background: #282e68; border: none; color: #fff; border: 1px solid #282e68; font-family: 'BoldFont', Arial, Verdana; min-width: 3rem;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
a.notification-close-btn.gen-btn:hover {background: #d32326; border: 1px solid #d32326;}

.overlay-bg2, .notification-content2 {display: none;}
.form-control.type2 {display: inline; width: 60%;}

@media only screen and (max-width: 1024px) {
	.notification-content, .notification-content2 {width: 450px;}
	.notification-content h3, .notification-content2 h3 {font-size: 0.9rem;}
	.notification-content p, .notification-content2 p {font-size: 0.5rem; line-height: 0.8rem;}
}

@media only screen and (max-width: 500px) {
	.notification-content, .notification-content2 {width: 280px; padding: 1rem;}
	.notification-content h3, .notification-content2 h3 {font-size: 0.8rem; line-height: 1.0rem;}
	.notification-content p, .notification-content2 p {font-size: 0.5rem; line-height: 0.7rem;}
	a.notification-close-btn.gen-btn {font-size: 0.45rem ; line-height: 0.45rem;}
}
/* /OVERLAY NOTIFICATION */


/* ADDITIONAL */
#fp-waiting {background: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; z-index: 9000; display: none;}
#fp-waiting img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* /ADDITIONAL */