@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');

/* PC, 모바일 공통영역 */
* {box-sizing: border-box;} /*전체 요소의 상자 크기를 경계선을 기준으로 설정*/
html {scroll-behavior: smooth;} /* 화면의 스크롤 이동시 부드럽게 이동하기 */

::-webkit-scrollbar {width: 0;}
body, h1, h2, h3, h4, h5, p, div, a, span, header, footer, section, article, aside, audio, video, img, input, select, textarea, button, legend, form, fieldset, figure, iframe, hr {margin: 0;padding: 0;}
a:link, a:visited {color: inherit;text-decoration: none;}
nav ul {list-style: none;margin: 0;padding: 0;}

body {font-family: 'Noto Sans KR', sans-serif;font-weight: 300;color: #333;}

h1.bold {font-size: 3em;font-weight: 700;margin: 16px 0 ;}
h2.bold {font-size: 2em;font-weight: 700;margin: 10px 0;}
h3.bold {font-size: 1.5em;font-weight: 700;margin: 8px 0;}
h4.bold {font-size: 1.3em;font-weight: 700;margin: 5px 0;}
h5.bold {font-size: 1em;font-weight: 700;margin: 5px 0;}

h1 {font-size: 3em;font-weight: 500;margin: 16px 0;}
h2 {font-size: 2em;font-weight: 500;margin: 10px 0;}
h3 {font-size: 1.5em;font-weight: 500;margin: 8px 0;}
h4 {font-size: 1.3em;font-weight: 500;margin: 5px 0;}
h5 {font-size: 1em;font-weight: 500;margin: 5px 0;}

h1.thin {font-size: 3em;font-weight: 100;margin: 16px 0;}
h2.thin {font-size: 2em;font-weight: 100;margin: 10px 0;}
h3.thin {font-size: 1.5em;font-weight: 100;margin: 8px 0;}
h4.thin {font-size: 1.3em;font-weight: 100;margin: 5px 0;}
h5.thin {font-size: 1em;font-weight: 100;margin: 5px 0;}

.pull {float: left;padding-right: 8px;}
.push {float: right;padding-left: 8px;}
.full {width: 100%;display: block;}
.cover {background-position: center;background-size: cover;}
.filter_gray {filter: saturate(0);transition-duration: .4s;}
.filter_gray:hover {filter: saturate(1);}
.center {text-align: center;}


/* 말줄임 */
.ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

/* 맨위로 가기 버튼*/
.goTop {font-size: 2em;padding: 10px;border-radius: 50%;position: fixed;bottom: 30px;right: 5vw;box-shadow: 1px 1px 3px #999;z-index: 3;background-color: rgba(255, 255, 255, 0.6);display: none;}

.p5 {padding: 5px;}
.p8 {padding: 8px;}
.p10 {padding: 10px;}
.m10 {margin: 10px 0;}
.p20 {padding: 20px;}
.m20 {margin: 20px 0;}
.pt50 {padding-top: 50px;}
.mt50 {margin-top: 50px;}
.pb50 {padding-bottom: 50px;}
.mb50 {margin-bottom: 50px;}
.pt100 {padding-top: 100px;}
.mt100 {margin-top: 100px;}
.pb100 {padding-bottom: 100px;}
.mb100 {margin-bottom: 100px;}

.italic {color: #f06cff;}
.strong {font-weight: bold;}
.notosans {font-family: 'Noto Sans KR', sans-serif;}
.BARLOW {font-family: 'Barlow Condensed', sans-serif;}
.playBall {font-family: 'Playball', cursive;}

.btn_pure {border: none;padding: 5px 15px 6px;border-radius: 8px;font-size: 1.3em;font-weight: bold;}

/*Box color Set*/
.TURQUOISE {background-color: #1ABC9C;color: #FFFFFF;border: 1px solid #1ABC9C;}
.GREEN_SEA {background-color: #16A085;color: #FFFFFF;border: 1px solid #16A085;}
.EMERALD {background-color: #2ECC71;color: #FFFFFF;border: 1px solid #2ECC71;}
.NEPHRITIS {background-color: #27AE60;color: #FFFFFF;border: 1px solid #27AE60;}
.PETER_RIVER {background-color: #3498DB;color: #FFFFFF;border: 1px solid #3498DB;}
.BELIZE_HOLE {background-color: #2980B9;color: #FFFFFF;border: 1px solid #2980B9;}
.AMETHYST {background-color: #9B59B6;color: #FFFFFF;border: 1px solid #9B59B6;}
.WISTERIA {background-color: #8E44AD;color: #FFFFFF;border: 1px solid #8E44AD;}
.WET_ASPHALT {background-color: #34495E;color: #FFFFFF;border: 1px solid #34495E;}
.MIDNIGHT_BLUE {background-color: #2C3E50;color: #FFFFFF;border: 1px solid #2C3E50;}
.SUN_FLOWER {background-color: #F1C40F;color: #FFFFFF;border: 1px solid #F1C40F;}
.ORANGE {background-color: #F39C12;color: #FFFFFF;border: 1px solid #F39C12;}
.CARROT {background-color: #E67E22;color: #FFFFFF;border: 1px solid #E67E22;}
.PUMPKIN {background-color: #D35400;color: #FFFFFF;border: 1px solid #D35400;}
.ALIZARIN {background-color: #E74C3C;color: #FFFFFF;border: 1px solid #E74C3C;}
.POMEGRANATE {background-color: #C0392B;color: #FFFFFF;border: 1px solid #C0392B;}
.CLOUDS {background-color: #ECF0F1;color: #4d4d4d;border: 1px solid #ECF0F1;}
.SILVER {background-color: #BDC3C7;color: #FFFFFF;border: 1px solid #BDC3C7;}
.CONCRETE {background-color: #95A5A6;color: #FFFFFF;border: 1px solid #95A5A6;}
.ASBESTOS {background-color: #7F8C8D;color: #FFFFFF;border: 1px solid #7F8C8D;}

.TURQUOISE:hover {color: #1ABC9C;background-color: #FFFFFF;}
.GREEN_SEA:hover {color: #16A085;background-color: #FFFFFF;}
.EMERALD:hover {color: #2ECC71;background-color: #FFFFFF;}
.NEPHRITIS:hover {color: #27AE60;background-color: #FFFFFF;}
.PETER_RIVER:hover {color: #3498DB;background-color: #FFFFFF;}
.BELIZE_HOLE:hover {color: #2980B9;background-color: #FFFFFF;}
.AMETHYST:hover {color: #9B59B6;background-color: #FFFFFF;}
.WISTERIA:hover {color: #8E44AD;background-color: #FFFFFF;}
.WET_ASPHALT:hover {color: #34495E;background-color: #FFFFFF;}
.MIDNIGHT_BLUE:hover {color: #2C3E50;background-color: #FFFFFF;}
.SUN_FLOWER:hover {color: #F1C40F;background-color: #FFFFFF;}
.ORANGE:hover {color: #F39C12;background-color: #FFFFFF;}
.CARROT:hover {color: #E67E22;background-color: #FFFFFF;}
.PUMPKIN:hover {color: #D35400;background-color: #FFFFFF;}
.ALIZARIN:hover {color: #E74C3C;background-color: #FFFFFF;}
.POMEGRANATE:hover {color: #C0392B;background-color: #FFFFFF;}
.CLOUDS:hover {color: #ECF0F1;background-color: #BDC3C7;}
.SILVER:hover {color: #BDC3C7;background-color: #FFFFFF;}
.CONCRETE:hover {color: #95A5A6;background-color: #FFFFFF;}
.ASBESTOS:hover {color: #7F8C8D;background-color: #FFFFFF;}

header {width: 100%;position: relative;}
.submenu>li>a>span {font-size: 20px;}

#subTop {height: 400px;background-image: url(../img/subTopBack.jpg);background-position: center;background-size: cover;}

#logo {display: block;}

#navBox {transition-duration: .8s;width: 100%;position: fixed;top: 0;}
#navBox.navDark {background-color: rgba(0, 0, 0, 0.6);color: #fff;}
#navBoox.navDark hr {border-color: #fff;}
#navBox.navLight {background-color: rgba(255, 255, 255, 1);color: #34495E;border-bottom: 1px solid #999;}
#navBox.navLight hr {border-color: #34495E;}

.row [class*=span] h3 {text-align: center;}

#subTop>h1 {font-size: 3rem;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: #fff;font-weight: 500;padding: 10px 20px;text-shadow: 0 0 5px #000;border-radius: 10px;}

.sectionTop {margin: 60px auto 30px;padding-bottom: 30px;}
.sectionTitle {text-align: center;font-family: 'Barlow Condensed', 'Noto Sans KR', sans-serif;margin: 100px auto 30px;font-weight: 500px;}
.sectionTop>blockquote {margin: 0 auto;}

.erp {padding: 50px 0 0;text-align: center;margin: 100px 0;}
.row .erpTitle {margin: 100px 0 50px;font-size: 1.6rem;}
.erp>h3 {padding: 10px 0;margin: 50px 0 0;font-weight: 500;font-size: 1.3rem;}
.issue {padding: 10px;margin-bottom: 50px;}
.issue>h5 {text-align: center;padding: 10px 0;background-color: #34495E;color: #fff;}
.issue>p {padding: 8px 0 0 8px;border-left: 2px solid #34495E;}
.chance {font-size: 1.1rem;}
.chance>li {padding: 8px;font-weight: 500;border-bottom: 1px dotted #ccc;transition-duration: .4s;}
.chance>li:last-child {border: none;}

.productBox {border: 1px dotted #999;transition-duration: .4s;border-radius: 10px;overflow: hidden;}
.productBox:hover {color:#fff;}
.boxInner {margin: 0;padding: 0;width: 130px;height: 130px;border-radius: 50%;margin: 0 auto;position: relative;border: 2px solid #fff;}
.boxInner>h4 {position: absolute;width: 80%;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}
.boxInner>p {position: absolute;top: 50%;left: 50%;width: 80%;transform: translate(-50%, -50%);text-align: center;font-size: 1.1rem;font-weight: 500;}
.productBox>ul {margin: 0;padding: 30px 0;list-style: none;text-align: center;font-weight: 500;font-size: 1rem;}
.productBox:nth-of-type(1):hover {background-color: #2ECC71;}
.productBox:nth-of-type(2):hover {background-color: #2980B9;}
.productBox:nth-of-type(3):hover {background-color: #34495E;}
.productBox:nth-of-type(4):hover {background-color: #E67E22;}
.productBox:nth-of-type(5):hover {background-color: #E74C3C;}
.productBox:nth-of-type(6):hover {background-color: #8E44AD;}

.hoverBox {overflow: hidden;transition-duration: .4s;}
.hoverBox>.strongList {margin: 0;padding: 0;list-style-type: none;text-align: center;font-size: 1rem;}
.productIcon {border-radius: 50%;border: 5px solid #90d3ff;padding: 5px;margin: 30px auto;display: block;}

.directionBox>.leftBox {background-color: #2ECC71;color: #fff;}
.itemTitle {width: 120px;height: 120px;border-radius: 50%;position: relative;font-weight: 500;color: #fff;}
.itemTitle>span {position: absolute;top: 50%;left: 50%;width: 80%;transform: translate(-50%, -50%);text-align: center;}

.productUI {background-color: #2C3E50;color: #fff;padding: 0;}
.uiBox {position: relative;overflow: hidden;}
.uiBox>.listIcon {width: 100%;display: block;transition-duration: .4s;}
.productUI:hover .listIcon {transform: scale(1.4);}
.uiBox>.listTitle {position: absolute;bottom: 0;width: 100%;text-align: center;padding: 10px 0;margin: 0;background-color:rgba(0, 0, 0, 0.5);color: #fff;transition-duration: .4s;}
.productUI:hover .listTitle {padding: 30px 0;background-color: rgba(142, 68, 173, 0.8);}
.uiBox+ul {font-size: 1rem;list-style-type: none;line-height: 1.8;width: 100%;padding: 20px 0;margin: 0;text-align: center;}

.effectBox {padding-bottom: 50px;}
.positiveEffect {padding: 30px 0;border: 1px solid #16A085;}
.effectList {list-style-position: inside;font-weight: 500;}

.contact {font-size: 1.4rem;line-height: 2;}

#flogo>a>img {height: 40px;display: block;}

.selfClose {border-radius: 5px;padding: 2px 10px 3px;}

/* 모바일 화면 디자인 영역 */
@media screen and (max-width: 1024px) {
  .row h3 {font-size: 1.4rem;font-weight: 500;padding: 10px 0;}
  
  #subTop h1 {font-size: 2.6rem;width: 70%;padding: 10px 0;text-align: center;}

  #logo {position: absolute;;top:17px;right: 10px;height: 26px;}
  
  #navBox {height: 60px;z-index: 1;}
  #navBox>nav {position: fixed;top: 0;background-color: rgba(16, 26, 35, 0.8);color: #fff;width: 100%;height: 100%;overflow: auto;z-index: 9;left: -100%;transition-duration: .8s;opacity: 0}
  #navBox .close {font-size: 30px;padding: 8px;position: absolute;top: 0;right: 0;}
  
  .menu {position: fixed;z-index: 1;color: #fff;font-size: 30px;padding: 8px;top: 8px;transition-duration: .4s;}
  #navBox.navDark>.menu {color: #fff;}
  #navBox.navLight>.menu {color: #000;}

  #mobileTopMenu {font-size: 4.5vw;font-weight: bold;padding: 10px;background-color: rgba(0, 0, 0, 0.5);}
  #mobileTopMenu>a {display: inline-block;padding: 5px 10px;}

  .arrow {display: none;}
  .goTop {display: block;}

  #gnb {padding:20px;margin-top: 30px;}
  #gnb hr {display: none;}
  #gnb>li {font-size: 5vw;color: #fff;padding: 15px 10px;font-weight: bold;}
  .submenu {padding: 2vw 6vw 0 0;display: none;background-color: #2C3E50;margin-top: 5px;}
  .submenu>li>a {display: block;font-size: 4vw;padding: 8px 0 8px 10px;border-left: 2px solid #2ECC71;}

  #topMenu {display: none;}

  .sectionTop {padding: 0 8px;}
  .sectionTitle {font-size: 2rem;font-weight: 500;margin: 30px 0 10px;}
  .sectionTop>blockquote {background-color: #34495E;color: #fff;padding: 10px;margin: 8px;}

  .erp {margin: 0 8px 20px;}
  .chance {background-color: #2980B9;color: #fff;margin: 0;padding: 0;list-style-position: inside;}
  .chance>li {border: none;padding: 12px 8px;}

  .productBox {padding-top: 50px;border: none;}
  .productBox:nth-of-type(2n-1) {background-color: #eee;}
  .productBox>ul {padding-bottom: 50px;}
  
  .productIcon {width: 60%;}
  .strongList {font-size: 1.2rem;line-height: 1.8;padding: 0;margin: 0;list-style: none;}

  .hoverBox {padding-bottom: 20px;}
  .hoverBox:nth-of-type(2n-1) {background-color: #f9f9f9;}
  .hoverBox:nth-of-type(2n) {background-color: #eee;}

  .directionBox>.leftBox, .directionBox>.rightBox {padding: 0;margin: 0;}
  .directionBox>.leftBox>h3 {margin: 0;padding: 20px 0;background-color: #27AE60;}
  .directionBox>.leftBox .strongList {padding: 20px;width: 100%;font-size: 1rem;margin: 0;}
  .directionBox .strongList>li {padding-top: 8px;}
  .directionArrow {padding: 0;margin: 50px 0;}
  .directionArrow>p>i {padding: 10px;background-color: #16A085;border-radius: 10px;color: #fff;}

  .flexItem {margin: 0;padding: 30px 0;}
  .flexItem:nth-of-type(2n-1) {background-color: #eee;}
  .itemTitle {margin: 30px auto 50px;outline: 5px solid #ccc;outline-offset: 5px;}
  .flexItem>.strongList {margin: 0;padding: 10px 0;list-style: none;text-align: center;font-weight: 500;}

  .productUI {margin: 0;}
  .uiBox+ul {text-align: center;}

  .positiveEffect {border: none;}
  .positiveEffect:nth-of-type(2) {background-color: #eee;}

  footer {background-color: #333;color: #fff;}
  #flogo {padding: 20px 0;}
  #flogo>a>img {display: block;margin:0 auto 20px;}
  #copyright, #info {line-height: 1.8;padding: 0 8px;}  
  #bottomMenu {display: flex;list-style: none;margin: 0;padding: 0;justify-content: space-evenly;display: none;}
  #bottomMenu ul {list-style: none;margin: 0;padding: 0;}
}

/* 태블릿 및 중해상도 PC */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .row {display: flex;flex-wrap: wrap;justify-content: space-evenly;}
  .row [class*=span] h3 {font-size: 1.6rem;font-weight: 500;}

  .span1 {width: 6.5%;}
  .span2 {width: 15%;}
  .span3 {width: 23.5%;}
  .span4 {width: 32%;}
  .span5 {width: 40.5%;}
  .span6 {width: 49%;}
  .span7 {width: 57.5%;}
  .span8 {width: 66%;}
  .span9 {width: 74.5%;}
  .span10 {width: 83%;}
  .span11 {width: 91.5%;}
  .span12 {width: 100%;}

  .menu {display: none;}
  #mobileTopMenu {display: none;}

  #navBox {display: flex;justify-content: space-around;z-index: 5;}
  #navBox .close {display: none;}
  #navBox.subNav {position: absolute;top: 0;}

  #logo {margin: 0 10px;display: block;padding: 25px 15px 0;height: 50px;}

  header>nav {padding-left: 100px;}
  #gnb {text-align: center;display: flex;}  
  #gnb>li {transition-duration: .4s;position: relative;width: 160px;}
  #gnb>li>p {padding: 30px 0;font-size: 20px;font-weight: 500;}
  #gnb>li:hover {background-color: rgba(0, 0, 0, 0.1);}
  #gnb>li>hr {width: 0;border-color: #fff;transition-duration: .6s;transform-origin: center;position: absolute;left: 50%;transform-origin: center;opacity: 0;}
  #gnb>li:hover>hr {width: 80%;left: 10%;opacity: 1;}
  
  .submenu {display: none;}
  .submenuItem {display: none;}
  .submenu a {display: block;padding: 12px 0;font-size: 16px;transition-duration: .4s;}
  .submenu a:hover {background-color: #2C3E50;font-weight: 500;color: #fff;}
  
  #topMenu {font-size: 14px;height: 60px;align-items: center;display: flex;padding: 15px 10px 0;}
  #topMenu>span {display: inline-block;padding: 8px 12px;cursor: pointer;transition-duration: .4s;}
  #topMenu>span>i {font-size: 14px;}
  #topMenu>span:hover {background-color: #000;color: #ffff;border-radius: 10px;}
  #dial {font-size: 20px;font-weight: 500;}

  .sectionTitle {font-size: 2rem;font-weight: 500;margin: 30px 0 10px;}
  .sectionTop blockquote {font-size: 1.2rem;width: 100%;}

  .chance {margin-bottom: 50px;}
  .chance>li:hover {background-color: #34495E;color: #FFFFFF;}

  .productBox {padding-top: 30px;}
  
  .hoverBox {padding: 20px 0;border: 3px solid #eee;border-radius: 10px;margin-bottom: 30px;}
  .hoverBox:hover {border-color: #ccccdd;background-color: #f9f9ee;}
  .productIcon {width: 50%;}
  
  .grayBack {background-color: #f3f3f3;padding: 10px 0 20px;}
  .directionBox {align-items: center;}
  .directionBox>.leftBox {outline: 1px solid #999;border: 3px solid #fff;}
  .directionBox>.leftBox, .directionBox>.rightBox {padding: 0;margin: 0;}
  .directionBox>.leftBox>h3 {margin: 0;padding: 20px 0;background-color: #27AE60;}
  .directionBox .strongList {line-height: 2;font-size: 1.2rem;list-style-position: inside;}

  .flexItem {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
  .itemTitle {width: 120px;height: 120px;border-radius: 50%;position: relative;font-weight: 500;color: #fff;}
  .itemTitle>span {position: absolute;top: 50%;left: 50%;width: 80%;transform: translate(-50%, -50%);text-align: center;}
  .flexItem>.strongList {border: 5px solid #90d3ff;width: 65%;background-color: #fcfcfc;padding: 10px 20px;border-radius: 20px;line-height: 1.4;list-style-type: disc;}

  .productUI {margin-bottom: 100px;}

  footer {background-color: #333;color: #fff;width: 100%;padding: 30px 0;}
  .innerFooter {margin: 0 auto;display: flex;justify-content: center;flex-wrap: wrap;}
  #flogo {padding: 20px 0;width: 30%;}
  #flogo>a {display: block;margin: 0 auto 15px;}
  #flogo>a>img {display: block;height: 40px;}
  #copyright, #info {line-height: 1.8;}

  #bottomMenu {display: flex;width: 70%;list-style: none;text-align: center;margin: 0;padding: 0;justify-content: space-evenly;}
  #bottomMenu>li {padding: 0 20px;width: 20%;}
  #bottomMenu>li>a {font-size: 16px;font-weight: 500;display: block;padding: 20px 0 10px;border-bottom: 1px solid #fff;}
  #bottomMenu>li>ul {list-style: none;margin: 0;padding: 0;}
  #bottomMenu>li>ul>li {padding: 5px;}
  #bottomMenu a:hover {font-weight: 500;}

}

/* PC 화면 디자인 영역 */
@media screen and (min-width: 1281px) {

  .row {display: flex;flex-wrap: wrap;justify-content: space-between;width: 1280px;margin: 0 auto;}
  .row [class*=span] h3 {font-size: 1.6rem;font-weight: 500;}

  .span1 {width: 6.5%;}
  .span2 {width: 15%;}
  .span3 {width: 23.5%;}
  .span4 {width: 32%;}
  .span5 {width: 40.5%;}
  .span6 {width: 49%;}
  .span7 {width: 57.5%;}
  .span8 {width: 66%;}
  .span9 {width: 74.5%;}
  .span10 {width: 83%;}
  .span11 {width: 91.5%;}
  .span12 {width: 100%;}

  header {min-width: 1280px;}

  .menu {display: none;}
  #mobileTopMenu {display: none;}

  #subTop {height: 330px;background-image: url(../img/subTopBack.jpg);background-size: cover;min-width: 1280px;background-position: center;}

  #navBox {width: 100%;position: fixed;top: 0;transition-duration: .8s;display: flex;justify-content: space-around;z-index: 5;color: #fff;background-color: rgba(0, 0, 0, 0.5);}
  #navBox .close {display: none;}
  #navBox.subNav {position: absolute;top: 0;}

  #logo {margin: 10px;padding: 25px 15px 0;height: 50px;}

  header>nav {padding-left: 100px;}
  #gnb {text-align: center;display: flex;}  
  #gnb>li {transition-duration: .4s;position: relative;width: 160px;}
  #gnb>li>p {padding: 30px 0;font-size: 20px;font-weight: 500;}
  #gnb>li:hover {background-color: rgba(0, 0, 0, 0.1);}
  #gnb>li>hr {width: 0;border-color: #fff;transition-duration: .6s;transform-origin: center;position: absolute;left: 50%;transform-origin: center;opacity: 0;}
  #gnb>li:hover>hr {width: 80%;left: 10%;opacity: 1;}
  
  .submenu {display: none;}
  .submenuItem {display: none;}
  .submenu a {display: block;padding: 12px 0;font-size: 16px;transition-duration: .4s;}
  .submenu a:hover {background-color: #2C3E50;font-weight: 500;color: #fff;}

  #topMenu {font-size: 14px;height: 60px;align-items: center;display: flex;padding: 25px 10px 0;}
  #topMenu>span {display: inline-block;padding: 8px 12px;cursor: pointer;transition-duration: .4s;}
  #topMenu>span>i {font-size: 14px;}
  #topMenu>span:hover {background-color: #000;color: #ffff;border-radius: 10px;}
  #dial {font-size: 20px;font-weight: 500;}

  .sectionTop {width: 1280px;}
  .sectionTitle {font-size: 3em;font-weight: 500;}
  .sectionTop blockquote {font-size: 1.4rem;width: 1280px;}

  .chance {margin-bottom: 50px;}
  .chance>li:hover {background-color: #34495E;color: #FFFFFF;}

  .productBox {padding-top: 50px;}

  .hoverBox {padding: 20px 0;border: 3px solid #eee;border-radius: 10px;margin-bottom: 30px;}
  .hoverBox:hover {border-color: #ccccdd;background-color: #f9f9ee;}

  .productIcon {width: 50%;}

  .grayBack {background-color: #f3f3f3;padding: 10px 0 20px;}
  .directionBox {align-items: center;}
  .directionBox>.leftBox {outline: 1px solid #999;border: 3px solid #fff;}
  .directionBox>.leftBox, .directionBox>.rightBox {padding: 0;margin: 0;}
  .directionBox>.leftBox>h3 {margin: 0;padding: 20px 0;background-color: #27AE60;}
  .directionBox .strongList {line-height: 2;font-size: 1rem;list-style-position: inside;}

  .flexItem {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
  .itemTitle {width: 120px;height: 120px;border-radius: 50%;position: relative;font-weight: 500;color: #fff;}
  .itemTitle>span {position: absolute;top: 50%;left: 50%;width: 80%;transform: translate(-50%, -50%);text-align: center;}
  .flexItem>.strongList {border: 2px solid #90d3ff;width: 65%;background-color: #fcfcfc;padding: 10px 20px;border-radius: 20px;line-height: 1.8;list-style-type: disc;}

  .productUI {margin-bottom: 100px;}

  footer {background-color: #333;color: #fff;width: 100%;padding: 30px 0;}
  .innerFooter {width: 1280px;margin: 0 auto;display: flex;justify-content: center;flex-wrap: wrap;}
  #flogo {padding: 20px 10px;width: 30%;}
  #flogo>a {display: block;margin-bottom: 15px;}
  #flogo>a>img {display: block;height: 40px;}
  #copyright, #info {line-height: 1.8;}

  #bottomMenu {display: flex;width: 70%;list-style: none;text-align: center;margin: 0;padding: 0;justify-content: space-evenly;}
  #bottomMenu>li {padding: 0 20px;width: 20%;}
  #bottomMenu>li>a {font-size: 16px;font-weight: 500;display: block;padding: 20px 0 10px;border-bottom: 1px solid #fff;}
  #bottomMenu>li>ul {list-style: none;margin: 0;padding: 0;}
  #bottomMenu>li>ul>li {padding: 5px;}
  #bottomMenu a:hover {font-weight: 500;}

}