@charset "UTF-8";
@import "base.css";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700,900&display=swap&subset=latin-ext,vietnamese');

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,code,kbd,samp{ font-family:monospace; font-size: 100%; *font-size:108%; line-height: 1.4; color: #333; }

/* Font-size fixed */
li li,li dt,li dd,li input,li select,li button,li textarea,li p,li th,li td,
dt li,dt dt,dt dd,dt input,dt select,dt button,dt textarea,dt p,dt th,dt td,
dd li,dd dt,dd dd,dd input,dd select,dd button,dd textarea,dd p,dd th,dd td,
th li,th dt,th dd,th input,th select,th button,th textarea,th p,th th,th td,
td li,td dt,td dd,td input,td select,td button,td textarea,td p,td th,td td,
p input{ font-size: 100%; }
/*==========================================================================*/
/*                           Common-Setting                                 */
/*==========================================================================*/

h1, h2, h3, h4, h5, h6, input, button, textarea, select, p, blockquote, th, td, pre, address, li, dt, dd {
	font-size: 140%;
	-webkit-text-size-adjust: none;
	font-weight: 400;
}
*,::after,::before{box-sizing: border-box;outline: none;} 
img {vertical-align: middle;max-width: 100%;}
table {width: 100%;font-size:inherit; font: 100%; color: #333; line-height: 1.4; }
p {margin: 0 0 1.5em;}
div > p:last-child{margin-bottom: 0}
input,
select{height: 35px;border:1px solid #999;padding: 5px;font-size: 14px;background: #fff;border-radius: 5px;max-width: 100%}
/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/
html {background: none;}
body {color: #333;font-family: 'Roboto Condensed', sans-serif;font-size: 14px;}
body.active{overflow: hidden}
#wrapper{min-width:1260px;overflow: hidden}
.inner {width:1200px;margin: 0 auto;}
a{text-decoration: none;color: #3c3c3c;}
a:hover{color: #3c3c3c;}

p,
dd,
dt,
li,
th,
td{line-height: 1.5em;font-size: 14px;}

.bold{font-weight: bold}
.red{color: red;}

/*==========================================================================*/
/*                               Header                                     */
/*==========================================================================*/
header{position: fixed;top: 0;left: 0;width: 100%;z-index: 9;background: #fff;}
header.active{background: rgba(0,0,0,0.1);}
nav{z-index: 6;}
nav.active ul{border-bottom: none;}
nav .inner{display: flex;align-items: center;justify-content: space-between;}
nav #logo{width: 100%;}
nav #logo a{width: 300px;display: block}
nav ul{display: flex;justify-content: flex-end;align-items: center;border-bottom: 1px solid #ededed;flex-shrink: 0}
nav ul li{margin: 0 0 0 100px;}
nav ul li:first-child{margin: 0}
nav ul li a{text-transform: uppercase;padding: 20px 0;font-weight: 300;display: block;position: relative;}
nav ul li a::before{position: absolute;bottom: -2px;left: 0;background: #000;height: 3px;width: 100%;content: '';opacity: 0;transition: all ease 0.3s;}


.btn_open{width: 60px;height:60px;margin: 0;position: fixed;top: 0px;right: 0;z-index: 9;}
.btn_side{display:block;cursor:pointer;width:100%;height:100%;text-align:center;z-index:9999;position:relative;margin:0 auto;position:absolute;border-radius:0}
.btn_side span{display:block;position:absolute;height: 2px;width:15px;background:#000;opacity:1;transform:rotate(0deg);transition:.3s ease-in-out}
.btn_side span:nth-child(even){left:calc(50% + 1px);}
.btn_side span:nth-child(odd){left:calc(50% - 14px);}
.btn_side span:nth-child(1),.btn_side span:nth-child(2){top:21px}
.btn_side span:nth-child(3),.btn_side span:nth-child(4){top:30px}
.btn_side span:nth-child(5),.btn_side span:nth-child(6){top:39px}

.btn_side.open span:nth-child(1),.btn_side.open span:nth-child(6){transform:rotate(45deg)}
.btn_side.open span:nth-child(2),.btn_side.open span:nth-child(5){transform:rotate(-45deg)}
.btn_side.open span:nth-child(1){left:calc(50% - 12px);top:25px}
.btn_side.open span:nth-child(2){left:calc(50% - 2px);top:25px}
.btn_side.open span:nth-child(3){left:-50%;opacity:0}
.btn_side.open span:nth-child(4){left:100%;opacity:0}
.btn_side.open span:nth-child(5){left:calc(50% - 12px);top:36px}
.btn_side.open span:nth-child(6){left:calc(50% - 2px);top:36px}

#btn_top{position:fixed;right: 15px;bottom: 30px;z-index: 9;cursor: pointer;box-sizing: border-box;margin-bottom: 0;display: none;width: 60px;height: 60px;border:1px solid #000;border-radius: 50%;display: flex;justify-content: center;align-items: center;text-align: center;padding-left: 5px;}

/*==========================================================================*/
/*                               ALL                                        */
/*==========================================================================*/
/* FIX FONT + PADDING */
.pdb30{padding: 0 0 30px}
.pdb50{padding: 0 0 50px;}
.mgb0{margin-bottom: 0;}
.mgb30{margin-bottom: 30px;}
.mgb50{margin-bottom: 50px;}
.fs12{font-size: 12px;}
.fs16{font-size: 16px;}

.btn{position: relative;display: block;width: 290px;height: 60px}
.btn::before{width: 25px;height: 22px;background: url('../images/btn_arr.png') center no-repeat;background-size: cover;content: '';position: absolute;top: calc(50% - 11px);right: -12px;transition-delay: 0.3s;transition: all ease 0.5s;z-index: 2;}
.btn a{width: 100%;height: 100%;border:1px solid #fed518;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: 300;transition: background 0.5s ease;border:1px solid #ccc;position: relative;background: #fff;transition-delay: 0.3s;font-weight: bold;}
.btn a::before{border-top: 1px solid #ffd200;border-left: 1px solid #ffd200;left: -1px;top: -1px;}
.btn a::after{border-bottom: 1px solid #ffd200;border-right: 1px solid #ffd200;right: -1px;bottom: -1px;}
.btn a::before,
.btn a::after{position: absolute;transition: width .25s, height .25s;content: '';width: 10%;height: 33%;transition-delay: 0s , 0s;background: transparent}

/* SLICK ARROW */
.slick-arrow{width: 60px;height: 60px;position: absolute;bottom: -100px;left: calc(50% - 160px);z-index: 1;background: none;border: none;transition: all ease-in-out 0.4s;cursor: pointer;}
.slick-arrow::before{width: 25px;height: 22px;background:url('../images/arrow-left.png') center no-repeat;background-size: cover;z-index: 1;content: '';display: block;left: 18px;top: calc(50% - 9px)}
.slick-next::before{background: url('../images/arrow-right.png') center no-repeat;background-size: cover;left: inherit;right: 18px;}
.slick-next{left: inherit;right: calc(50% - 160px)}
.slick-prev::after{background: #ccc;width: 160px;height: 1px;position: absolute;top: 50%;right: -180px;content: ''}
.slick-prev:hover::before{left: -18px}
.slick-next:hover::before{right: -18px;}
/*==========================================================================*/
/*                               Main                                       */
/*==========================================================================*/
#main{position: relative;z-index: 2;margin-top: 62px;}
.ttl{position: relative;padding-left: 20px;}
.ttl::before{background: #fed518;width: 10px;height: 18px;position: absolute;top: -2px;left: -1px;content: '';z-index: -1;}
.ttl::after{background: #000;width: 55px;height: 3px;position: absolute;bottom: -2px;left: 0;content: ''}
.ttl h3{line-height: 1.4em;font-size: 84px;color:#f4f4f4;text-transform: capitalize;font-weight: 900;position: absolute;top: -60px;left: -15px;z-index: -1;letter-spacing: 0.05em}
.ttl p{font-size: 24px;}

.ttl.center{padding-top: 10%;}
.ttl.center h3{width: 100%;left: 0; padding-top: 5%;}
.ttl.center::before{left: calc(50% - 5px)}
.ttl.center::after{left: calc(50% - 28px)}

.box01{background-image: url('../images/box01_bg.png'), url('../images/box01_rectangel_bg.png');background-position: 70% -10%,calc(50% + 480px) 75%;background-repeat: no-repeat, no-repeat;background-size: 1345px 695px, 809px 841px;margin-bottom: 170px;min-height: 755px;}

.box01 .box01_ct{display: flex;justify-content: space-between;position: relative;padding-top: 180px;}
.box01 .box01_txt{width: 800px;padding: 0 15px;}
.box01 .box01_txt h2{font-size: 60px;font-weight: bold;letter-spacing: 0.05em;margin-bottom: 10px;}
.box01 .box01_txt h1{font-size: 60px;font-weight: bold;margin-bottom: 10px;}
.box01 .box01_txt p{font-size: 24px;line-height: 1.3em;color: #8a8989}
.box01 .box01_img{width: 450px;position: absolute;top: 15px;right: -26px;}
.box01 .box01_img img{position: relative;z-index: 3;}
.box01 .box01_img video{position: absolute;z-index: 2;top: 57px;left: 136px;width: 275px;}

.box02{margin-bottom: 150px;}
.box02 .box02_ct{}
.box02 .box02_ct p{text-align: center;font-size: 18px;font-weight: 300}
.box02 .box02_list{margin-top: 60px;}
.box02 .box02_list ul{}
.box02 .box02_list ul li{position: relative;display: flex;align-items: center;width: 50%;justify-content: space-between;min-height: 567px;padding-top: 20px;}
.box02 .box02_list ul li .box02_txt{padding-left: 70px;transition: all ease 0.5s;}
.box02 .box02_list ul li .box02_txt h4{text-shadow: 0px 8px 21px rgba(6,6,6,0.26);font-size: 54px;font-weight: bold;position: relative;margin-bottom: 70px;letter-spacing: 0.1em;}
.box02 .box02_list ul li .box02_txt .btn{width: 210px}
.box02 .box02_list ul li .box02_img{transform: translateX(20px);width: 295px;transition: all ease 0.5s;flex-shrink: 0}

.box02 .box02_list ul li::before{z-index: -1;background: #b0b2b7;width: 490px;height: 320px;position: absolute;top: calc(50% - 160px);right: calc(50% - 245px);content: ''}
.box02 .box02_list ul li.org::before{background: #ffdd3e}
.box02 .box02_list ul li.brown::before{background: #da6c00}
.box02 .box02_list ul li.green::before{background: #1ab501}
.box02 .box02_list ul li.blue::before{background: #25758e}
.box02 .box02_list ul li.no_bg::before{display: none;}
.box02 .box02_list ul li.ocean::before{background: #225fb3}
.box02 .box02_list ul li.ocean .box02_img{position: absolute;width: 640px;bottom: 0;right: -30%;}

.box03{}
.box03 .box03_ct{}
.box03 .box03_ct p{text-align: center;font-size: 18px;font-weight: 300}
.box03 .box03_list{margin-top: 50px;}
.box03 .box03_list ul{display: flex;flex-direction: column;justify-content: center;align-items: center;}
.box03 .box03_list ul li{width: 240px;height: 140px;border:1px solid #ececec;transition: all ease 0.5s;filter: grayscale(1);margin: 0 0 35px 0;display: flex;align-items: center;justify-content: center;}

.box04{margin: 250px 0 300px;background: url('../images/box04_bg.png') center no-repeat;background-size: 1345px 279px;}
.box04 .ttl{text-align: center;}
.box04 .ttl::before,
.box04 .ttl::after{display: none;}
.box04 .box04_img{text-align: center;}
.box04 .box04_img ul{}
.box04 .box04_img ul li{overflow: hidden;filter: grayscale(1);transform: scale(0.6);margin:0 15px;display: flex;justify-content: center;align-items: center;height: 95px}
.box04 .box04_img ul li img{max-width: 100%;max-height: 100%;border-radius: 50%;}
.box04 .box04_img ul li.slick-current{filter: grayscale(0);transform: scale(1)}
.box04 .box04_img ul li.slick-current img{box-shadow: 0px 7px 18px 7px rgba(0,0,0,0.03);}

.box04 .box04_txt{margin-top: 50px;position: relative;}
.box04 .box04_txt ul{}
.box04 .box04_txt ul li{display: flex;flex-direction: column;}
.box04 .box04_txt ul li p{}
.box04 .box04_txt ul li .big{font-size: 24px;text-align: center;position: relative;}
.box04 .box04_txt::before{position: absolute;top:-30px;width:30px;height:3px;background:#000;left:calc(50% - 15px);content: ''}
.box04 .box04_txt ul li .comment{font-size: 20px;color: #8a8989;text-align: center;width: 800px;margin: 0 auto}

.box05{background: url('../images/box05_bg.png'), url('../images/box05_gif.gif');background-position: center, center 61px;background-repeat: no-repeat;background-size: 1971px 609px, 1920px 400px;min-height: 566px;}
.box05 .box05_ct{box-shadow: rgba(6, 6, 6, 0.05) 0px 8px 24px 8px;width: 275px;position: relative;margin: 50px auto 0;padding: 280px 0 30px}
.box05 .box05_ct .btn{width: 215px;margin: 0 auto}
.box05 .box05_chat{background-color: #fed518;border-radius: 20px 0 20px 20px;box-shadow: 0px 7px 21px 5px rgba(6,6,6,0.09);padding: 20px 20px 10px;text-align: right;color: #fff;width: 180px;position: absolute;top: 30px;right: -50px}
.box05 .box05_chat p{font-size: 18px;margin-bottom: 0}
.box05 .box05_chat .icon{position: absolute;top: 0;right: -50px;}

.box05 .box05_accept{background-color: #000;border-radius: 0 20px 20px 20px;box-shadow: 0px 7px 21px 5px rgba(6,6,6,0.09);left: -30px;padding: 20px 20px 10px;position: absolute;top: 150px;color: #fff;width: 160px}
.box05 .box05_accept .icon{position: absolute;top: 0;left: -50px;width: 40px}
.box05 .box05_accept p{font-size: 18px;margin-bottom: 0}
.box05 .box05_accept span,
.box05 .box05_chat span{display: block;font-size: 24px;}
.box05 .btn a{background: transparent; margin-top: 30px}

/*==========================================================================*/
/*                              footer                                      */
/*==========================================================================*/
footer{position: relative; z-index: 4;}
footer .inner{border-top: 1px solid #ccc;display: flex;padding: 100px 0 100px;display: flex;justify-content: space-between;align-items: flex-start}
footer .foot_link{}
footer .foot_link ul{display: flex;margin-bottom: 30px}
footer .foot_link ul li{margin: 0 50px 0 0;}
footer .foot_link ul li:last-child{margin: 0}
footer .foot_link ul li a{color: #8a8989;text-transform: uppercase;padding: 0;font-weight: 300;display: block;position: relative;}

footer .foot_link p{}
footer .foot_link p a{color: #8a8989}
footer .foot_link p a img{filter: grayscale(1);margin-right: 10px}
footer .foot_link p a:hover img{filter: grayscale(0)}

footer .foot_contact{align-items: flex-end; display: flex;}
footer .foot_contact ul{ margin: 0 0 0 20px}
footer .foot_contact ul li{ font-size: 16px;}
footer .foot_contact ul li a{color: #0000EE; }

footer .foot_info{width: 160px;display: flex;justify-content: flex-end;flex-direction: column;align-items: flex-end;flex-shrink: 0	}
footer .foot_info p{width: 150px;margin-bottom: 10px}
footer .foot_info address{font-size: 14px;text-align: right;line-height: 1.5em}


/*==========================================================================*/
/*                              CHILD PAGE                                  */
/*==========================================================================*/
.under{}
.under .title{margin-bottom: 50px;}
.under .title h3{font-size: 42px;text-align: center;letter-spacing: 0.05em;font-weight: bold;line-height: 1.5em;}
.under .title h1{font-size: 42px;text-align: center;letter-spacing: 0.05em;font-weight: bold;line-height: 1.5em;}
.under #main{margin-top: 0;}
.under .box04{margin: 150px auto 200px;}

/* TOP INFO */
#top_info{text-align: center;color: #000;background: url('../images/top_info_bg2.png') top center no-repeat;padding: 200px 0 50px;margin-bottom: 50px}
#top_info h2{font-size: 52px;font-weight: bold;position: relative;padding-top: 15px;margin: 30px auto 15px;text-transform: capitalize;}
#top_info h3{font-size: 52px;font-weight: bold;position: relative;padding-top: 15px;margin: 30px auto 15px;text-transform: capitalize;}
#top_info h1{font-size: 52px;font-weight: bold;position: relative;padding-top: 15px;margin: 30px auto 15px;text-transform: capitalize;}
#top_info h2::before{width: 50px;height: 4px;background: #000;position: absolute;top: 0;left: calc(50% - 25px);content: '';}
#top_info p{font-size: 20px;margin:0 auto;width: 800px;}
#top_info p a{font-size: 20px;margin:0 auto;width: 800px; color:#0000EE; text-decoration: underline;}

/* SERVICES PAGE */
.service_link{}
.service_link ul{display: flex;justify-content: space-between;padding-bottom: 30px;margin-bottom: 50px;border-bottom: 1px solid  #ededed;}
.service_link ul li{width: 180px;position: relative;text-align: center;padding-bottom: 10px;cursor: pointer;}
.service_link ul li::before{width: 60px;height: 3px;position: absolute;bottom: -32px;left: calc(50% - 30px);content: '';opacity: 0;background: #000}
.service_link ul li img{filter: grayscale(1);transition: all ease 0.3s;}
.service_link ul li span{font-size: 18px;display: block;text-align: center;font-weight: 300;color: #8a8989;transition: all ease 0.3s;position: absolute;bottom: 0;left: 0;width: 100%;min-height: 42px;letter-spacing: 0.05em}
.service_link ul li.current::before{opacity: 1;}
.service_link ul li.current img{filter: grayscale(0)}
.service_link ul li.current span{color: #000}

.service_tab{overflow: hidden;position: relative;margin-bottom: 100px;}
.service_tab .tab-content{height: 0;opacity: 0;visibility: hidden;position: absolute;top: 0;left: calc(50% - 400px);transition: all ease 0.5s;padding-top: 40px;width: 800px;margin: 0 auto;}
.service_tab .tab-content p{font-size: 18px;}
.service_tab .tab-content.current::before{background: url('../images/service_txt_ic.png') center no-repeat;background-size: cover;width: 115px;height: 12px;position: absolute;top: 0;left: 0;content: '';}
.service_tab .tab-content.current{height: auto;opacity: 1;visibility: visible;position: relative;top: inherit;left: inherit;}

/* ABOUT PAGE */
#about #top_info{background: url('../images/top_info_bg.png') top center no-repeat;}
.about_value{}
.about_value ul{display: flex;justify-content: space-between;align-items: flex-start}
.about_value ul li{width: 240px;padding: 160px 15px 30px;position: relative;text-align: justify;}
.about_value ul li::before{background: #f9f9f9;height: calc(100% - 140px);width: 100%;position: absolute;bottom: 0;left: 0;content: '';z-index: -1;}
.about_value ul li.ic1{background: url('../images/about_ic_1.png') top center no-repeat;}
.about_value ul li.ic2{background: url('../images/about_ic_2.png') top center no-repeat;}
.about_value ul li.ic3{background: url('../images/about_ic_3.png') top center no-repeat;}
.about_value ul li.ic4{background: url('../images/about_ic_4.png') top center no-repeat;background-position: 0px -27px;}
.about_value ul li p{margin-bottom: 0;color: #8a8989;font-size: 16px;}
.about_value ul li .big{color: #000; font-size: 20px; margin-bottom: 15px;text-align: center;text-transform: capitalize}
.about_value ul li p a{color: #1F77B4;font-size: 16px;text-decoration: underline;}

.about_team{margin: 100px auto 0;}
.about_team ul{display: flex;flex-wrap: wrap}
.about_team ul li{background: url('../images/about_team_bg.png') center no-repeat;background-position: 0 0;width: 25%;position: relative;transition: all ease 0.3s;margin-bottom: 30px;}
.about_team ul li::before{width: 25px;height: 25px;background: #000;box-shadow: 0px -10px 22px 0px rgba(0,0,0,0.15);transition: all ease 0.75s;position: absolute;top: calc(50% - 12px);left: calc(50% - 12px);content: '';border-radius: 50%;}
.about_team ul li .about_img{filter: grayscale(1);transition: all ease 0.3s;margin-bottom: 15px;text-align: center;}
.about_team ul li .about_txt{}
.about_team ul li .about_txt p{text-align: center;}
.about_team ul li .about_txt .name{font-size: 22px;text-transform: capitalize;margin-bottom: 5px}
.about_team ul li .about_txt .office{font-size: 18px;color: #8a8989;display: flex;align-items: center;justify-content: center}
.about_team ul li .about_txt .office span{margin-right: 10px;padding:0 10px 0 0;border-right: 1px solid #ededed;}
.about_team ul li .about_txt .office a{color: #8a8989}

.about_mail{background: url('../images/about_mail_bg.png') 50% 30% no-repeat;text-align: center;}
.about_mail .inner{padding: 250px 0 100px;margin: 100px auto 150px;border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;}
.about_mail .title h3{font-size: 54px;}
.about_mail .btn{margin: 0 auto;}

/* JOIN US PAGE */
#joinus{background: url('../images/join_bg.png') top center no-repeat;}
#joinus .about_mail .inner{margin-bottom: 100px;padding-bottom: 0;border-bottom: none;}
#joinus #top_info{background: none;}
#joinus #top_info a{color: #fed518}

.join_ct{margin-top: 200px;}
.join_ct .inner{margin-bottom: 100px;padding-bottom: 100px;border-bottom: 1px solid #ececec;}
.join_ct .title h3{font-size: 54px;}
.join_ct .join_list{}
.join_ct .join_list ul{display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.join_ct .join_list ul li{width: 40%;padding: 50px 30px;background: #fff;box-shadow: 0px 16px 30px 8px rgba(0,0,0,0.03);margin-top: 100px;position: relative;min-height: 250px;}
.join_ct .join_list ul li p{margin-bottom: 0;text-align: center;font-size: 20px;color: #8a8989;position: relative;z-index: 1;margin-bottom: 15px}
.join_ct .join_list ul li p:last-child{margin-bottom: 0}
.join_ct .join_list ul li .icon{text-align: center;}
.join_ct .join_list ul li .big{font-size: 24px;color: #000;line-height: 1.5em}
.join_ct .join_list ul li::before{width: 200px;height: 320px;position: absolute;top: -70px;left: calc(50% - 100px);content: '';}
.join_ct .join_list ul li.ic1::before{background: url('../images/join_ic_1.png') top center no-repeat;}
.join_ct .join_list ul li.ic2::before{background: url('../images/join_ic_2.png') top center no-repeat;}
.join_ct .join_list ul li.ic3::before{background: url('../images/join_ic_3.png') top center no-repeat;}
.join_ct .join_list ul li.ic4::before{background: url('../images/join_ic_4.png') top center no-repeat;}
.join_ct .join_list ul li.ic5::before{background: url('../images/join_ic_5.png') top center no-repeat;}
.join_ct .join_list ul li.ic6::before{background: url('../images/join_ic_6.png') top center no-repeat;}
.join_ct .join_list ul li.ic7::before{background: url('../images/join_ic_7.png') top center no-repeat;}
.join_ct .join_list ul li.ic8::before{background: url('../images/join_ic_8.png') top center no-repeat;}
.join_ct .join_list ul li.ic9::before{background: url('../images/join_ic_9.png') top center no-repeat;}

.join_ct .join_list ul li.ic2{margin-top: 200px;}
.join_ct .join_list ul li.ic3{margin-top: 0;}
.join_ct .join_list ul li.ic4{margin-top: 300px;}
.join_ct .join_list ul li.ic5{margin-top: 0;}
.join_ct .join_list ul li.ic6{margin-top: 200px;}
.join_ct .join_list ul li.ic7{margin-top: 0;}
.join_ct .join_list ul li.ic8{margin-top: 200px;}
.join_ct .join_list ul li.ic9{margin-top: 0;}

.join_recruit{}
.join_recruit .title h3{font-size: 54px;}
.join_recruit ul{display: flex;justify-content: space-between;}
.join_recruit ul li{width: 25%;display: flex;justify-content: center;align-items: center;text-align: center;flex-direction: column;position: relative;}
.join_recruit ul li span{font-size: 18px;position: absolute;bottom: 30px;left: 0;width: 100%;color: #8a8989;}

/* CONTACT PAGE */
.contact_form{margin: 0 auto 100px;width: 400px;}
.contact_form p{display: flex;align-items: center;width: 100%;}
.contact_form p img{width: 40px;margin-right: 15px}
.contact_form p input,
.contact_form p select,
.contact_form textarea{background: #fff;border: 1px solid #ececec;border-radius: 0px;display: inline-block;height: 54px;width: 100%;padding: 10px 20px;}
.contact_form p select{padding: 10px 20px;}
.contact_form p input:focus,
.contact_form .contact_area textarea:focus{border-color: #fed518;box-shadow: none;}
.contact_form .contact_area{width: 100%;font-size: 100%;margin-bottom: 15px;}
.contact_form .contact_area textarea{font-size: 14px;width: 100%;max-width: 100%;max-height: 120px;height: 120px;}
.contact_form .contact_file{display: flex;justify-content: space-between;align-items: center;width: 100%;}
.contact_form .contact_file p{width: 40%;margin-bottom: 0}
.contact_form .contact_file p input{border:none;background: none;padding: 0;height: 100%;}

.contact_info{text-align: center;margin-bottom: 100px;}
.contact_info .title h3{font-size: 54px}
.contact_info .title p{font-size: 24px;}
.contact_info p{font-size: 20px}

/* WORK PAGE */
.work_temp{overflow: hidden}
.work_temp.bg1{background: #b0b2b7}
.work_temp.bg2{background: #da6c00;
background: -moz-linear-gradient(45deg, #da6c00 1%, #ffbc1b 100%);
background: -webkit-linear-gradient(45deg, #da6c00 1%,#ffbc1b 100%);
background: linear-gradient(45deg, #ffbc1b 1%,#ffdd3e 100%);}

.work_temp.bg3{background: #da6c00;
background: -moz-linear-gradient(45deg, #da6c00 1%, #ffbc1b 100%);
background: -webkit-linear-gradient(45deg, #da6c00 1%,#ffbc1b 100%);
background: linear-gradient(45deg, #da6c00 1%,#ffbc1b 100%);}

.work_temp.bg4{background: #25758e;
background: -moz-linear-gradient(45deg, #25758e 1%, #63d7e0 100%);
background: -webkit-linear-gradient(45deg, #25758e 1%,#63d7e0 100%);
background: linear-gradient(45deg, #25758e 1%,#63d7e0 100%);}
.work_temp.bg5{background: #225fb3;
background: -moz-linear-gradient(45deg, #225fb3 1%, #1e95f3 100%);
background: -webkit-linear-gradient(45deg, #225fb3 1%,#1e95f3 100%);
background: linear-gradient(45deg, #225fb3 1%,#1e95f3 100%);}
.work_temp.bg6{background: #1ab501;
background: -moz-linear-gradient(45deg, #1ab501 1%, #1edd00 100%);
background: -webkit-linear-gradient(45deg, #1ab501 1%,#1edd00 100%);
background: linear-gradient(45deg, #1ab501 1%,#1edd00 100%);}

.work_temp .inner{display: flex;padding: 100px 0;position: relative;align-items: center;justify-content: space-between;}
.work_temp .work_temp_txt{width: 500px}
.work_temp .work_temp_txt p{font-size: 24px;margin-bottom: 20px;color: #000}
.work_temp .work_temp_txt .ic{}
.work_temp .work_temp_txt .big{font-size: 54px;font-weight: bold;line-height: 1em;margin-bottom: 0;text-shadow: 0px 8px 21px rgba(6,6,6,0.26);margin-bottom: 15px;letter-spacing: 0.05em}
.work_temp .work_temp_txt .btn a{background: transparent;color: #000}
.work_temp .work_temp_img{}

.work_temp .inner{justify-content: space-between;}
.work_temp.work_temp_r .inner{flex-direction: row-reverse}

.work_other{margin-top: 150px;}
.work_other .title h3{font-size: 54px}
.work_other .title p{font-size: 24px;text-align: center;}
.work_other_list{margin-top: 50px;}
.work_other_list ul{display: flex;flex-wrap: wrap;}
.work_other_list ul li{width: calc(100% / 6);}

/* WORK CHILD PAGE */
.ttl_center{position: absolute;top: calc(50% - 165px);left: 0;width: 100%;text-align: center;z-index: -1;}
.ttl_center h3{color: #f4f4f4;font-size: 165px;font-weight: bold;letter-spacing: 0.05em}

.work_col{padding-top: 100px}
.work_col .inner{display: flex;justify-content: space-between;align-items: center;position: relative;}
.work_col .work_col_txt{width: 500px}
.work_col .work_col_txt p{font-size: 20px; text-align: justify;margin-bottom: 20px;color: #8a8989}
.work_col .work_col_txt p:last-child{margin-right: 0}
.work_col .work_col_txt .ic{}
.work_col .work_col_txt .big{font-size: 54px;font-weight: bold;line-height: 1.1em;margin-bottom: 0;text-shadow: 0px 8px 21px rgba(0,0,0,0.4);margin-bottom: 15px;color: #000;position: relative;letter-spacing: 0.05em;text-align: left;}
/* .work_col .work_col_txt .big::before{background: #000;width: 50px;height: 4px;position: absolute;top: -20px;left: -15px;content: ''} */

#work_post .work_col .inner{align-items: flex-start;}

.work_col .work_content{margin-bottom: 30px;}
.work_col .work_content li{list-style: initial}
.work_col .work_col_txt .btn a{background: transparent;color: #000}
.work_col .work_col_img{transform: translateX(15px);}
.work_col .app_download{display: flex;}
.work_col .app_download p{margin-bottom: 0;margin-right: 30px;}

.work_intro{background: url('../images/work_staff_bg1.png') top center no-repeat;position: relative;z-index: 2;}
.work_client{background: url('../images/work_staff_bg2.png') top left no-repeat;background-position: -240px -190px;padding: 205px 0 0px;transform: translateY(-140px);position: relative;z-index: 1;}
.work_client .inner{flex-direction: row-reverse}
.work_client .work_col_txt{padding-top: 150px}
.work_client .work_col_img{transform: translateX(-65px)}

.work_service{background: url('../images/work_service_bg.png') top center no-repeat;padding: 100px 0 150px 0;margin-top: 150px}
.work_service .ttl_center{top: -120px}
.work_service .inner{position: relative;}
.work_service ul{display: flex;justify-content: center;flex-wrap: wrap}
.work_service ul li{width: 232px;margin-right: 90px;margin-bottom: 30px}
.work_service ul li:nth-child(4n + 4),
.work_service ul li:last-child{margin-right: 0}

.work_img_app{margin: 0px auto 150px;position: relative;}
.work_img_app .ttl_center{top: 20px}
.work_img_app ul{margin-top: 80px}
.work_img_app ul li{margin: 0 20px;}

.work_challenge{padding: 150px 0;background: url('../images/work_challenge_bg.png') top center no-repeat;position: relative;}
.work_challenge .ttl_center{top: 0}
.work_challenge .inner{padding: 80px 30px;background: #fff;box-shadow: 0px 8px 21px 8px rgba(0,0,0,0.10);position: relative;width: 950px}
.work_challenge .inner::before{width: 158px;height: 158px;position: absolute;top: -70px;left: 150px;content: '';background: url('../images/work_challenge_ic.png') center no-repeat;}
.work_challenge p{margin-bottom: 0;color: #8a8989;font-size: 18px;text-align: center;}
.work_challenge .avatar{position: absolute;top: -65px;left: 0;width: 100%;text-align: center;}
.work_challenge .name{font-size: 20px;font-weight: bold;color: #000;margin-bottom: 15px;}

.work_challenge.fish_ic .inner::before{background: url('../images/work_challenge_fish_ic.png') center no-repeat;}
.work_challenge.appoint_ic .inner::before{background: url('../images/work_challenge_appoint_ic.png') center no-repeat;}

.work_comment{padding: 150px 0 100px;background: url('../images/work_challenge_bg.png') top center no-repeat;position: relative;}
.work_comment .ttl_center{top: 50px}
.work_comment .inner{width: 950px;position: relative;}
.work_comment .inner::before{width: 175px;height: 150px;position: absolute;top: 0;left: 150px;content: '';background: url('../images/work_staff_ic.png') center no-repeat;}
.work_comment p{margin-bottom: 0;color: #8a8989;font-size: 18px;text-align: center;}
.work_comment .avatar{position: relative;margin-bottom: 20px}
.work_comment .avatar::before{width: 30px;height: 3px;position: absolute;bottom: 10px;left: calc(50% - 15px);content: '';background: #000;}
.work_comment .name{font-size: 20px;font-weight: bold;color: #000;margin-bottom: 15px;}

.work_comment.premise_ic .inner::before{background: url('../images/work_premise_ic.png') center no-repeat;}
.work_comment.pinthub_ic .inner::before{background: url('../images/work_pinthub_ic.png') center no-repeat;}
.work_comment.fish_ic .inner::before{background: url('../images/work_fish_ic.png') center no-repeat;}


/* WORK PAGE BACKGROUND */
#premise .work_intro{background: url('../images/work_premise_bg1.png') top center no-repeat;}
#premise .work_client{background: url('../images/work_premise_bg2.png') top left no-repeat;background-position: -240px -190px;}
#pinthub .work_intro{background: url('../images/work_pinthub_bg1.png') top center no-repeat;}
#pinthub .work_client{background: url('../images/work_pinthub_bg2.png') top left no-repeat;background-position: -240px -190px;}
#fishpointer .work_intro{background: url('../images/work_fish_bg1.png') top center no-repeat;}
#fishpointer .work_client{background: url('../images/work_fish_bg2.png') top left no-repeat;background-position:-240px -190px;}
#space .work_intro{background: url('../images/work_space_bg1.png') top center no-repeat;}
#space .work_client{background: url('../images/work_space_bg2.png') top left no-repeat;background-position: -240px -190px;}
#appoint .work_intro{background: url('../images/work_appoint_bg1.png') top center no-repeat;}
#appoint .work_client{background: url('../images/work_appoint_bg2.png') top left no-repeat;background-position: -240px -190px;}

/* APPS DEMO PAGE */
.app_demo_list{padding:50px 0 100px;border-top: 1px dashed #ccc}
.app_demo_item{margin-bottom: 50px}
.app_demo_item .app_demo_title{}
.app_demo_item .app_demo_title dl{display: flex;justify-content: space-between;margin-bottom: 50px;}
.app_demo_item .app_demo_title dt{width: 130px;height: 130px;}
.app_demo_item .app_demo_title dt a{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;text-align: center;border-radius: 15px;overflow: hidden;}
.app_demo_item .app_demo_title dt a img{max-width: 100%;max-height: 100%;width: auto;height: auto;}
.app_demo_item .app_demo_title dd{width: calc(100% - 160px);}
.app_demo_item .app_demo_title dd p{margin-bottom: 10px}
.app_demo_item .app_demo_title dd .name{font-size: 24px;line-height: 1.2em;}
.app_demo_item .app_demo_title dd .des{font-size: 16px}
.app_demo_item .app_demo_title dd .company{font-size: 12px}
.app_demo_item .app_demo_title dd .cate{border-radius: 30px;background: #1f1f1f;padding: 5px 15px;display: inline-block;text-align: center;margin-bottom: 0}
.app_demo_item .app_demo_title dd .cate span{display: inline-block;color: #fff;position: relative;margin-right: 10px;padding-right: 10px;}
.app_demo_item .app_demo_title dd .cate span::before{width: 1px;height: 100%;background: #fff;position: absolute;top: 0;right: 0;content: '';}
.app_demo_item .app_demo_title dd .cate span:last-child{padding-right: 0;margin-right: 0;}
.app_demo_item .app_demo_title dd .cate span:last-child::before{display: none}
.app_demo_item .app_demo_title .ver{display: flex;flex-wrap: wrap;margin: 0 0 40px}
.app_demo_item .app_demo_title .ver a{border-radius: 50px;border:1px solid #ccc;display: inline-block;padding: 5px 15px;text-align: center;margin-right: 20px;transition: all ease 0.2s;margin-bottom: 10px}

.app_demo_item .app_demo_img{}
.app_demo_item .app_demo_img ul{display: flex;flex-wrap: wrap;}
.app_demo_item .app_demo_img ul li{width: calc((100% - 60px) / 5);margin:0 15px 15px 0;}
.app_demo_item .app_demo_img ul li:nth-child(5n + 5){margin-right: 0}
.app_demo_item .app_demo_img ul li a{display: flex;align-items: center;justify-content: center;text-align: center;width: 100%;height: 100%;border-radius: 15px;overflow: hidden;box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px -2px, rgba(0, 0, 0, 0.15) 0px 5px 7px -5px;}

.app_other{padding-top: 100px}
.app_other .ttl{margin-bottom: 50px;}
.app_other .app_demo_title dl{margin-bottom: 30px}
.app_other .app_demo_title dt{width: 60px;height: 60px;}
.app_other .app_demo_title dd{width: calc(100% - 90px)}
.app_other .app_demo_img{}
.app_other .app_demo_img ul li:nth-child(n + 6){display: none;}

/* BLOG PAGE */
.news_page{}
.news_page .news_list{display: flex;flex-wrap: wrap;}
.news_page .news_list dl{background: #f6f6f6;border-radius: 15px;width: 360px;margin: 0 60px 40px 0;overflow: hidden;}
.news_page .news_list dt{width: 100%;height: 270px;}
.news_page .news_list dt a{display: block;height: 100%;}
.news_page .news_list dd{padding: 15px;}
.news_page .news_list dd span{}
.news_page .news_list dd a{display: block;color: #000;font-size: 20px;margin: 10px 0}
.news_page .news_list dd div{font-size: 16px;}

/* BLOG DETAIL */
#news_post{margin-top: 150px;}
.news_detail{background: #f6f6f6;padding: 30px;border:1px solid #ededed;margin-bottom: 100px;}
.news_detail h3{font-size: 36px;margin-bottom: 30px;}
.news_detail + h3{text-align: center;font-size: 36px;margin-bottom: 30px;}
.news_detail p{font-size: 16px;}
.news_detail .date{font-size: 14px;color: #999;}
.news_detail img{height: auto;max-height: auto}

.news_detail .news_quote{width: 100%;margin: 50px auto 0;padding: 30px;background: #fff}
.news_detail .news_quote a{color: #F08D39}

.news_page .news_related{margin-bottom: 60px}


/* PAGINATION */
.wp-pagenavi{display: flex;justify-content: center;margin-bottom: 50px}
.wp-pagenavi .pages{display: none;}
.wp-pagenavi .current{background: #000;color: #fff;}
.wp-pagenavi .current,
.wp-pagenavi a{width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;padding: 0;margin: 0 5px;font-size: 16px;border-radius: 5px;}


/* ALL LAST CHILD */
.app_demo_item:last-child,
.app_demo_item .app_demo_title dd p:last-child,
#top_info p:last-child{margin-bottom: 0}


/* FIREFOX CSS */
@supports (-moz-appearance:none) and (-webkit-appearance:none)
{
  
}

/* IE STUPID CSS */
@media screen\0 {
	
}

/* EDGE 12+ CSS */
@supports (-ms-ime-align:auto) {
	
}

.zalo-chat-widget{right:8px !important;top: inherit !important; bottom: 160px !important;z-index: 90 !important}
.fb_dialog_content iframe{bottom: 105px !important;right:15px !important;margin: 0 !important}

.item4{position: fixed;bottom: 240px;right: 15px;width: 50px;z-index: 90}






