.fyf_box .web_wrap { padding: 0 60px; }
.fyf_hdr { background: url(../img/fyf/bg_hdr.jpg) no-repeat top; background-size: 94%; position: relative; background-color: #738de1; }
.fyf_box { overflow: hidden; position: relative; }
.bottom_project { margin-top: -21%; }
.fyf_img_detail { position: relative; z-index: 1; }
.circle_lg_yellow { position: relative; }
.circle_lg_yellow:before { position: absolute; content: ""; padding: 36%; background: #ffe400; border-radius: 50%; margin: auto; text-align: center; top: 20%; transform: translate(-50%, 0); z-index: -1; }
.fyf_img_detail.circle_lg_yellow:before { left: 60%; }
.circle_lg_blue { position: relative; }
.circle_lg_blue:before { position: absolute; content: ""; padding: 36%; background: #6e87d8; border-radius: 50%; margin: auto; text-align: center; top: 20%; transform: translate(-50%, 0); z-index: -1; }
.fyf-detail h2 { color: #fff; font-weight: 700; text-transform: capitalize; padding: 15px 0; font-size: 42px; }
.fyf_detail { padding-left: 300px; padding-top: 40px; }
.fyf_detail p { color: #fff; padding: 15px 0; }
.fyf_projects { position: relative; }
.fyf_logo:before { position: absolute; content: ""; left: -10%; padding: 15%; background: url(../img/fyf/header-bg.png) no-repeat left; background-size: contain; top: -5%; }
.fyf_img_detail figure { padding-top: 50px; position: relative; z-index: 1; }
.fyf_logo { padding-right: 15%; position: relative; padding-top: 70px; }
.fyf_logo h3 { text-align: left; }
.fyf_box .star-area { padding: 40px 0 60px; }
.fyf_graphic { padding-bottom: 40px;}
.fyf_graphic figure { margin: 0 auto}
@media (min-width:767.99px){
  .fyf_graphic {padding: 0 50px}
  .fyf_graphic figure { max-width:580px; margin: 0 auto}
}
@media (max-width:767px){
  .fyf_graphic {padding: 0 20px}
  .fyf_graphic figure { max-width:80%;}
}
.fyf_graphic img{ width:100%;}
.fyf_logo .logo_image { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32); border-radius: 8px; }
.fyf_proj { padding: 150px 0; }
.fyf_proj img { max-width: 60%; }
.fyf_proj:before { position: absolute; content: ""; background: url(../img/fyf/project_bg.png) no-repeat left; background-size: contain; padding: 85% 50%; top: -5%; z-index: -1; left: -10%; min-height: 1100px; }
.fyf_proj:after { position: absolute; content: ""; background: url(../img/fyf/blue-circle.png) no-repeat right; background-size: contain; padding: 6%; bottom: 0; z-index: 1; right: 0; }
.fyf_proj, .new-messages { position: relative; }
.new-messages:before { position: absolute; content: ""; left: 3%; padding: 3%; background: url(../img/fyf/blue-circle.png) no-repeat center; background-size: contain; top: 45%; border-radius: 50%; }
.new-messages:after { position: absolute; content: ""; right: 5%; padding: 2%; background: #ffe400; top: 40%; border-radius: 50%; }
.new-messages ul li:nth-child(1) { margin-top: -5%; }
.new-messages ul li:nth-child(2) { margin-top: 15%; }
.chat-section { padding-top: 20px; }
.chat-section p { color: #848484; font-size: 22px; }
.chat-section h2 { padding-bottom: 15px; }
.fyf_key_tech_list { padding-bottom: 50px; padding-top: 200px; }
.fyf_projects .fyf_img_detail:before { transform: rotate(180deg); left: -15%; min-height: 1050px; background-size: 97% 100%; top: -30%; }
.fyf_projects .fyf_img_detail img { z-index: 1; position: relative; max-width: 80%; margin-bottom: 20%; left: 0; }
.fyf-des h5 { color: #b5b5b5; font-size: 26px; font-weight: 400; }
.fyf-des { padding-right: 5%; }
.fyf-des h2 { font-size: 3.5rem; color: #272729; font-weight: 600; }
.fyf_logo ul { padding-top: 50px; }
.fyf_logo ul li:nth-child(1), .fyf_logo ul li:nth-child(3) { margin-right: 60px; }
.fyf_logo ul li:nth-child(2) { margin-left: 60px; }
.fyf_key_tech_list { color: #000; }
.tech_key_lest { padding-top: 80px; }
.fyf_key_tech_list img { max-width: 60%; }
.fyf_key_tech_list ul li { position: relative; padding-left: 30px; padding-bottom: 25px; color:#585858; }
.fyf_key_tech_list ul li:after { position: absolute; content: ""; left: 0; background: url(../img/fyf/li_before.png) no-repeat left; background-size: contain; width: 20px; height: 20px; top: 0; }
.fyf_title h4 { padding-bottom: 30px; font-size: 3rem; }
.fyf_key_tech_list .fyf_des img { margin-top: -30%; }
.fyf_do-foryou { position: relative; }
.fyf_do-foryou:before { position: absolute; content: ""; background: url(../img/fyf/before.png) no-repeat center; background-size: 38%; padding: 91%; min-height: 900px; top: -110%; z-index: -1; }
.fyf_yellow { padding: 10%; background: url(../img/fyf/yellow-circle.png) no-repeat bottom; background-size: contain; position: absolute; }

@media (max-width:1280px) { 
    .fyf_key_tech_list .fyf_des img { margin-top: 0; }
    .fyf_logo { padding-right: 5%; }
    .new-messages:before { padding: 2%; left: 2%; top: 65%; }
    .new-messages:after { padding: 2%; top: 20%; right: 3%; }
    .chat-section p { font-size: 20px; }
    .circle_lg_blue:before, .circle_lg_yellow:before { padding: 44%; }
}
@media (max-width:1024px) {
  .fyf_box .web_wrap { padding: 0 40px; }
  .circle_lg_blue:before, .circle_lg_yellow:before { padding: 42%; }
  .new-messages:before { left: 1%; top: 65%; padding: 2%; }
  .new-messages:after { right: 1%; }
  .chat-section p { font-size: 18px; }
  .fyf-des h2, .fyf_title h4 { font-size: 3rem; }
}

@media (max-width:991px) {
    .fyf_box .star-area { padding: 20px 0; }
    .fyf-des h2, .fyf_title h4 { font-size: 2.5rem; padding-bottom: 15px; }
    .fyf_yellow { padding: 5%; }
    .fyf_proj:before { min-height: auto; }
    .fyf_key_tech_list { padding-top: 30px; }
    .fyf-detail h2 { font-size: 36px; }
}

@media (max-width:767px) {
    .fyf_logo h3 { text-align: center; }
    .fyf-detail h2 { font-size: 30px; }
    .circle_lg_blue:before, .circle_lg_yellow:before { padding: 32%; }
    .fyf_box .star-area { padding: 0; }
    .fyf-detail h2 { padding-top: 0; }
    .new-messages ul li:nth-child(2) { margin: 0; }
    .fyf_proj:before { padding: 65% 50%; }
    .fyf_do-foryou:before, .fyf_proj:before { min-height: auto; }
    .fyf_key_tech_list { padding-top: 0; }
    .fyf_box .web_wrap { padding: 0 25px; }
    .fyf_yellow { position: absolute; right: 5%; }
    .fyf_proj { padding: 110px 0; }
    .fyf_key_tech_list ul li { padding-bottom: 15px; }
    .fyf_graphic, .fyf_key_tech_list { padding-bottom: 0; }
    .fyf_proj .text-left { text-align: center!important; }
}

@media (max-width:575px) {
    .circle_lg_blue:before, .circle_lg_yellow:before { padding: 40%; }
    .fyf-des h2, .fyf_title h4 { font-size: 2rem; padding-bottom: 10px; }
    .fyf_logo h3 { font-size: 22px; }
    .fyf_proj { padding: 40px 0; }
}