@charset "utf-8";

.main-container {color:#fff; text-align:center;}
.main-container a {color:#fff;}
.main-container .section {background-repeat:no-repeat; background-position:center center; background-size:cover;}
.main-container .explain {margin:22px 0 30px; font-size:1.375em; font-weight:300; letter-spacing:-0.025em; line-height:1.455em;}
.main-container .business {display:block; font-size:1.125em; font-weight:300; letter-spacing:0.05em; line-height:1; text-shadow:1px 1px 5px rgba(0,0,0,0.2);}
.main-container .sec-tit {display:block; margin:35px 0 0; font-size:3.750em; font-weight:700; letter-spacing:-0.025em; line-height:1; text-shadow:1px 1px 5px rgba(0,0,0,0.2);}
.main-container p {word-break:keep-all; text-shadow:1px 1px 5px rgba(0,0,0,0.3);}
.main-container .fp-tableCell {padding:5vh 0;}
.p-view {display:block;}
.m-view {display:none;}

.btn-more {display:inline-block; position:relative; min-width:118px; height:40px; padding:0 13px; color:#fff; line-height:38px; background-color:transparent;}
.btn-more i {display:block; width:100%; height:100%; font-style:normal;}
.btn-more:before,
.btn-more:after,
.btn-more i:before,
.btn-more i:after {content:""; position:absolute; background-color:#fff;
	-webkit-transition:300ms;
	-moz-transition:300ms;
	-o-transition:300ms;
	transition:300ms;
}
.btn-more:before {left:0; top:0; width:100%; height:1px;}
.btn-more:after {right:0; top:0; width:1px; height:100%;}
.btn-more i:before {right:0; bottom:0; width:100%; height:1px;}
.btn-more i:after {left:0; bottom:0; width:1px; height:100%;}
.btn-more span {display:inline-block; position:relative; padding-right:36px; text-align:center; letter-spacing:-0.02em; font-weight:300;}
.btn-more span:after {content:""; position:absolute; right:0; top:50%; width:8px; height:8px; margin-top:-4px; background:url("../img/common/icon_more_arrow.png") no-repeat right center; background-size:auto 100%;}
.btn-more {
	-webkit-transition:color 300ms, background-color 300ms;
	-moz-transition:color 300ms, background-color 300ms;
	-o-transition:color 300ms, background-color 300ms;
	transition:color 300ms, background-color 300ms;
}
.btn-more span:after {
	-webkit-transition:right 300ms cubic-bezier(0, 0, 0, 2);
	-moz-transition:right 300ms cubic-bezier(0, 0, 0, 2);
	-o-transition:right 300ms cubic-bezier(0, 0, 0, 2);
	transition:right 300ms cubic-bezier(0, 0, 0, 2);
}
.btn-more:hover {background-color:#e60012;}
.btn-more:hover:before,
.btn-more:hover i:before {width:0;}
.btn-more:hover:after,
.btn-more:hover i:after {height:0;}
.btn-more:hover span:after {right:-4px;}
.btn-more.small {font-size:0.750em;}

.icon-view {margin:80px 0 0;}
.icon-view > li {display:inline-block; width:200px; vertical-align:top;}
.icon-view > li:last-child {margin-right:0;}
.icon-view b {display:block; margin:16px 0 0; font-weight:500; letter-spacing:-0.025em; line-height:1;}
.icon-view span {display:block; margin:7px 0 0; font-size:0.875em; font-weight:100; letter-spacing:-0.05em; line-height:1.286em;}
.icon-view a {display:inline-block; vertical-align:top;}
.icon-view a img {position:relative; top:0;
	-webkit-transition:top 200ms;
	-moz-transition:top 200ms;
	-o-transition:top 200ms;
	transition:top 200ms;
}
.icon-view a:hover img {top:-5px;}

.main-sec1 {background-image:url("../img/main/sec1_bg.jpg");}
.main-sec1 .logo {padding-top:25px;}
.main-sec1 .grow {display:block; margin:15px 0 0; font-family:"Arial Nova",sans-serif; font-size:2.750em; font-weight:300; letter-spacing:-0.025em; line-height:1;}
.main-sec1 .icon-view {margin-top:57px;}
.main-sec1 .icon-view > li {width:128px;}

.main-sec2 {background-image:url("../img/main/sec2_bg.jpg");}
.main-sec2 p + p {margin-top:32px;}
.value-wrap {position:relative; margin:180px 0 0; overflow:hidden;}
.value-wrap .value-list {display:inline-block; position:relative; font-size:0; z-index:1;}
.value-wrap .value-list:before,
.value-wrap .value-list:after {content:""; position:absolute; top:50%; width:0; border-top:1px solid rgba(255,255,255,0.5);}
.value-wrap .value-list:before {right:100%;}
.value-wrap .value-list:after {left:100%;}
.value-wrap li {display:inline-block; position:relative; margin-right:65px; cursor:pointer;}
.value-wrap li:after {content:""; display:block; position:absolute; left:100%; top:50%; width:0; border-top:1px solid rgba(255,255,255,0.5);}
.value-wrap li.value07 {margin-right:0;}
.value-wrap li.value07:after {display:none;}
.value-wrap li span {display:block; width:128px; height:128px; margin:0 auto; padding-top:60%; font-size:16px; letter-spacing:-0.025em; line-height:1; background:url("../img/main/value_bg.png") no-repeat center center; background-size:cover;}
.value-wrap .value-list:before,
.value-wrap .value-list:after {
	-webkit-transition:width 100ms;
	-moz-transition:width 100ms;
	-o-transition:width 100ms;
	transition:width 100ms;
}
.value-wrap li:after {
	-webkit-transition:width 20ms;
	-moz-transition:width 20ms;
	-o-transition:width 20ms;
	transition:width 20ms;
}
.value-wrap .value-list:before {
	-webkit-transition-delay:900ms;
	-moz-transition-delay:900ms;
	-o-transition-delay:900ms;
	transition-delay:900ms;
}
.value-wrap .value-list:after {
	-webkit-transition-delay:1000ms;
	-moz-transition-delay:1000ms;
	-o-transition-delay:1000ms;
	transition-delay:1000ms;
}
.value-wrap li.value01:after {
	-webkit-transition-delay:910ms;
	-moz-transition-delay:910ms;
	-o-transition-delay:910ms;
	transition-delay:910ms;
}
.value-wrap li.value02:after {
	-webkit-transition-delay:920ms;
	-moz-transition-delay:920ms;
	-o-transition-delay:920ms;
	transition-delay:920ms;
}
.value-wrap li.value03:after {
	-webkit-transition-delay:930ms;
	-moz-transition-delay:930ms;
	-o-transition-delay:930ms;
	transition-delay:930ms;
}
.value-wrap li.value04:after {
	-webkit-transition-delay:940ms;
	-moz-transition-delay:940ms;
	-o-transition-delay:940ms;
	transition-delay:940ms;
}
.value-wrap li.value05:after {
	-webkit-transition-delay:950ms;
	-moz-transition-delay:950ms;
	-o-transition-delay:950ms;
	transition-delay:950ms;
}
.value-wrap li.value06:after {
	-webkit-transition-delay:960ms;
	-moz-transition-delay:960ms;
	-o-transition-delay:960ms;
	transition-delay:960ms;
}
.value-wrap li.value07:after {
	-webkit-transition-delay:970ms;
	-moz-transition-delay:970ms;
	-o-transition-delay:970ms;
	transition-delay:970ms;
}
.main-sec2.animated .value-wrap .value-list:before,
.main-sec2.animated .value-wrap .value-list:after {width:100%;}
.main-sec2.animated .value-wrap li:after {width:65px;}

.main-sec3 {background-image:url("../img/main/sec3_bg.jpg");}
.main-sec3 .icon-view {margin-bottom:16vh;}

.main-sec4 {background-image:url("../img/main/sec4_bg.jpg");}
.main-sec4 p {margin-bottom:50px;}
.main-sec4 .icon-view {margin-bottom:8vh;}

.main-sec5 {background-image:url("../img/main/sec5_bg.jpg");}
.main-sec5 .sec-tit i {font-size:0.917em; font-style:normal; letter-spacing:-0.04em; vertical-align:top;}
.more-ex {position:relative; margin:0 0 35px;}
.more-ex:before {content:""; display:block; width:44px; height:1px; margin:0 auto 35px; background-color:#fff;}
.more-ex b {display:inline-block; position:relative; padding:0 30px; height:1.250em; font-size:1.250em; font-weight:500; letter-spacing:-0.025em; line-height:1;}
.more-ex b:before,
.more-ex b:after {content:""; display:inline-block; position:absolute; top:0; width:26px; height:21px; background-repeat:no-repeat; background-position:center top; background-size:auto 100%;}
.more-ex b:before {left:0; background-image:url("../img/main/qout_prev.png");}
.more-ex b:after {right:0; background-image:url("../img/main/qout_next.png");}
.more-ex p {margin:8px 0 0; font-size:0.875em; font-weight:300; letter-spacing:-0.025em; line-height:1.429em;}
.main-sec5 .icon-view {margin-top:40px;}

.scroll-down {position:fixed; left:50%; bottom:30px; width:60px; margin-left:-30px; text-align:center; line-height:1;}
.scroll-down span {display:block; position:relative; top:0; padding-top:24px; color:#fff; font-family:"Arial Nova",sans-serif; font-size:0.875em; letter-spacing:0.05em; background:url("../img/main/scroll_down.png") no-repeat center top;
	animation:scrollDown 1.5s cubic-bezier(0.52, 0.01, 0.36, 1) infinite;
}
@-webkit-keyframes scrollDown{
	50% {top:5px;}
	70% {top:0;}
}
@-moz-keyframes scrollDown{
	50% {top:5px;}
	70% {top:0;}
}
@-o-keyframes scrollDown{
	50% {top:5px;}
	70% {top:0;}
}
@keyframes scrollDown{
	50% {top:5px;}
	70% {top:0;}
}


@media screen and (max-width:1600px){
.value-wrap {margin:100px auto 0;}
}


@media screen and (max-width:1023px){
.main-sec1 .logo img {width:320px;}

.main-sec2 .logo img {width:210px;}
.value-wrap {width:550px; margin:80px auto 0;}
.value-wrap .value-list:before,
.value-wrap .value-list:after {display:none;}
.value-wrap li {margin:0 20px 24px;}
.value-wrap li:after {display:none;}
.value-wrap li span {width:110px; height:110px;}
.value-wrap li.value07 {margin-right: 20px;}
.more-ex b:before,
.more-ex b:after {height:18px;}
}


@media screen and (max-width:767px){
.main-container .explain {margin:15px 0 25px; /*font-size:1em;*/ font-size:1.167em;}
.main-container .business {/*font-size:0.833em;*/ font-size:1em;}
.main-container .sec-tit {margin:15px 0 0; font-size:2.708em;}
.p-view {display:none;}
.m-view {display:block;}

.btn-more {min-width:59px; height:24px; padding:0 8px; line-height:24px; font-size:0.833em;}
.btn-more span {padding-right:15px;}
.btn-more span:after {width:4px; height:4px; margin-top:-2px;}

.icon-view {margin:45px 0 0;}
.icon-view > li {width:110px;}
.icon-view img {width:40px;}
.icon-view b {margin:8px 0 0; /*font-size:1.250em;*/ font-size:0.917em;}
.icon-view span {margin:5px 0 0; font-size:0.833em;}

.main-sec1 {background-image:url("../img/main/m_sec1_bg.jpg");}
.main-sec1 .logo img {width:138px;}
.main-sec1 .grow {margin:5px 0 0; font-size:1.5em;}
.main-sec1 .icon-view {margin-top:34px;}
.main-sec1 .icon-view > li {width:59px;}

.main-sec2 {background-image:url("../img/main/m_sec2_bg.jpg");}
.main-sec2 .logo img {width:102px;}
.main-sec2 p + p {margin-top:22px;}
.value-wrap {width:280px; margin:35px auto 0;}
.value-wrap li {margin:0 10px 14px;}
.value-wrap li span {width:64px; height:64px; font-size:10px;}
.value-wrap li.value07 {margin-right: 10px;}

.main-sec3 {background-image:url("../img/main/m_sec3_bg.jpg");}

.main-sec4 {background-image:url("../img/main/m_sec4_bg.jpg");}

.main-sec5 {background-image:url("../img/main/m_sec5_bg.jpg");}
.more-ex b {padding:0 15px; /*font-size:1em;*/ font-size:1.167em;}
.more-ex b:before,
.more-ex b:after {width:14px; height:12px;}
.more-ex p {display:none;}

.scroll-down {bottom:15px; width:50px; margin-left:-25px; padding-top:12px; background-size:14px auto;}
}


@media screen and (max-width:359px){
.main-container .explain {font-size:1em;}
.main-container .business {font-size:0.833em;}

.main-sec1 .grow {font-size:1.250em;}

.more-ex b {font-size:1em;}
}



/* ����ٿ�޴� */



.dropdown {
  position: absolute;
  top: 50px;
  right: 90px;
  height: 34px;
  border-radius: 3px;
  display: inline-block;
  vertical-align: baseline;
  z-index: 10;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  
}
.dropdown a {
  font-size: 15px;
  text-decoration: none;
  text-shadow: 0 1px black;
}
.dropdown > a {
  float: left;
  position: relative;
  height: 27px;
  line-height: 26px;
  padding: 0 12px;
  color: #fff;
  border-radius: 2px 0 0 2px;
}
.dropdown > a:before {
  content: '';
  display: inline-block;
  vertical-align: -2px;
  width: 10px;
  height: 11px;
  margin-right: 10px;
  background: url("../img/settings.png") 0 0 no-repeat;
}
.dropdown > a:hover {
  background: #3f4753;
  background: rgba(255, 255, 255, 0.04);
}
.dropdown > a:active {
  background: #343b44;
}
.dropdown div {
  text-align:center;
  color:#fff;
  height: 32px;
  width: 38px;
  padding:3px 0 0 0;
  border-bottom :1px solid #fff;
}

.dropdown div a {color:#fff; padding:3px 0 0 0;}


.dropdown div:hover ul {
  display: block;
}
.dropdown ul {
  display: none;
  position: absolute;
  top: 32px;
  left: -1px;
  right: -1px;
  background: #272c33;
  border-radius: 0 0 3px 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.dropdown ul li {
  display: block;
}
.dropdown ul li:last-child a {
  border-radius: 0 0 3px 3px;
}
.dropdown ul a {
  display: block;
  line-height: 28px;
  color: #fff;
  border-top: 1px solid transparent;
}

@media screen and (max-width:767px){


.dropdown {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 27px;
  border-radius: 3px;
  display: inline-block;
  vertical-align: baseline;
  z-index: 10;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  
}
.dropdown a {
  font-size: 13px;
  text-decoration: none;
  text-shadow: 0 1px black;
}
.dropdown > a {
  float: left;
  position: relative;
  height: 27px;
  line-height: 26px;
  padding: 0 12px;
  color: #fff;
  border-radius: 2px 0 0 2px;
}
.dropdown > a:before {
  content: '';
  display: inline-block;
  vertical-align: -2px;
  width: 10px;
  height: 11px;
  margin-right: 10px;
  background: url("../img/settings.png") 0 0 no-repeat;
}
.dropdown > a:hover {
  background: #3f4753;
  background: rgba(255, 255, 255, 0.04);
}
.dropdown > a:active {
  background: #343b44;
}
.dropdown div {
  text-align:center;
  color:#fff;
  height: 27px;
  width: 38px;
  padding:3px 0 0 0;
  border-bottom :1px solid #fff;
}

.dropdown div a {color:#fff; padding:3px 0 0 0;}


.dropdown div:hover ul {
  display: block;
}
.dropdown ul {
  display: none;
  position: absolute;
  top: 27px;
  left: -1px;
  right: -1px;
  background: #272c33;
  border-radius: 0 0 3px 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.dropdown ul li {
  display: block;
}
.dropdown ul li:last-child a {
  border-radius: 0 0 3px 3px;
}
.dropdown ul a {
  display: block;
  line-height: 28px;
  color: #fff;
  border-top: 1px solid transparent;
}
}