#allBg {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:url('../images/smart/bg_allbg.png') left top repeat; overflow:hidden; z-index:80;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {font-family:'NanumSquareR'; }

.project .overview {padding:0;}
.projectFooter {border-top:1px #4d4b49 solid; z-index:70;}

#smartLoading {position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; background:url('../images/smart/bg_allbg.png') left top repeat; z-index:9999;}
#smartLoading img {position:absolute; left:50%; top:50%; width:50px; margin:-25px 0 0 -25px;}

#smartPorBox {position:relative; width:1700px; margin:0 auto; font-family:'Monda','NanumSquareR'; overflow:hidden;}
#smartPorBox .innerW {width:1400px; margin:0 auto;}
#smartPorBox .innerW:after {content:""; display:block; clear:both;}
#wsBox {position:relative; width:100%; background:#fff; overflow:hidden; z-index:10;}

/* smart sector 01 */
#smartSector01 {width:100%; overflow:hidden;}
#smartSector01 .smartFixdImg {position:relative; width:100%; height:960px; overflow:hidden; z-index:1;}
#smartSector01 .smartFixdImg .imgArea {position:fixed; left:50%; top:0; margin:0 0 0 -850px; z-index:1;}
#smartSector01 .smartFixdImg .imgArea.anim {animation:2s 1s alternate fixImg;}
#smartSector01 .smartFixdImg .imgArea.clip {-webkit-clip-path: circle(0 at 40px 0); clip-path: circle(0 at 40px 0);}
#smartSector01 .smartFixdImg .txtArea {position:absolute; left:50%; top:0; width:100%; z-index:4; margin:158px 0 0 -850px; word-break:keep-all;}

#smartSector01 .smartFixdImg .txtArea .htit {}
#smartSector01 .smartFixdImg .txtArea .htit:after {content:""; display:block; clear:both;}
#smartSector01 .smartFixdImg .txtArea .htit p {font-size:16px; color:#fff; font-weight:600; line-height:1.1; letter-spacing:6px; padding:0 0 25px 0;}
#smartSector01 .smartFixdImg .txtArea .htit .sbox {width:100%; padding:0 0 78px 0; background:url('../images/smart/bg_sector01_tit.png') left bottom no-repeat; overflow:hidden;}
#smartSector01 .smartFixdImg .txtArea .htit .sbox span {display:block; font-size:35px; color:#fff; line-height:1.2; padding:4px 0 0 0;}

#smartSector01 .smartFixdImg .txtArea .sbtit {padding:247px 0 0 0;}
#smartSector01 .smartFixdImg .txtArea .sbtit:after {content:""; display:block; clear:both;}
#smartSector01 .smartFixdImg .txtArea .sbtit p {font-size:16px; color:#fff; font-weight:600; line-height:1.2; letter-spacing:6px; padding:0 0 28px 0;}
#smartSector01 .smartFixdImg .txtArea .sbtit .sbox {width:100%; overflow:hidden;}
#smartSector01 .smartFixdImg .txtArea .sbtit .sbox span {display:block; font-size:18px; color:#fff; line-height:1.1; padding:14px 0 0 0;}
#smartSector01 .smartFixdImg .smartBackbg {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:#537bce; z-index:3; -khtml-opacity:0; -moz-opacity:0; opacity:0;}
#smartSector01 .smartFixdImg .imgbg {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url('../images/smart/bg_sector01.png') left top repeat; z-index:2;}

@keyframes fixImg {
  from {
    -webkit-clip-path: circle(0 at 40px 0);
    clip-path: circle(0 at 40px 0);
  }
  to {
    -webkit-clip-path: circle(150% at 0 0);
    clip-path: circle(150% at 0 0);
  }
}




/* smart sector 02 */
#smartSector02 {position:relative; width:100%; background:#fff; overflow:hidden; z-index:10; word-break:keep-all;}
#smartSector02 .htit {padding:158px 0 53px 0;}
#smartSector02 .htit:after {content:""; display:block; clear:both;}
#smartSector02 .htit p {font-size:16px; color:#333; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 28px 0;}
#smartSector02 .htit span {display:block; font-size:18px; color:#333; line-height:1.2; font-weight:600; padding:13px 0 0 0;}
#smartSector02 .htit span strong {font-size:18px; color:#537bce; font-weight:600;}

#smartSector02 .sbtit {}
#smartSector02 .sbtit:after {content:""; display:block; clear:both;}
#smartSector02 .sbtit .client {font-size:16px; color:#333; line-height:1.2; font-weight:600; letter-spacing:2px; padding:0 0 12px 0;}
#smartSector02 .sbtit .day {font-size:16px; color:#333; line-height:1.2; font-weight:600; letter-spacing:2px; padding:0 0 12px 0;}
#smartSector02 .sbtit .link {width:100%; padding:0 0 12px 0; overflow:hidden;}
#smartSector02 .sbtit .link a {font-size:17px; color:#ee6b23; line-height:1.2; font-weight:600; letter-spacing:2px;}
#smartSector02 .sbtit .inf {font-size:15px; color:#333; line-height:1.2; font-weight:600; padding:0 0 46px 0;}
#smartSector02 .sbtit .inf span {display:block; font-size:15px; padding:0 0 6px 0;}
#smartSector02 .sbtit .btn {width:100%; margin:0 0 20px 0; overflow:hidden;}
#smartSector02 .sbtit .btn a {display:inline-block; width:280px; height:80px; font-size:24px; color:#fefefe; font-weight:500; line-height:80px; background:#2d2d2d; text-align:center; transition:all ease 0.3s;}
#smartSector02 .sbtit .btn a:hover {background:#537bce;}

#smartSector02 .absection {position:absolute; right:8.8235%; top:190px; width:920px;}
#smartSector02 .absection .count {display:none; margin:186px 0 0 0; text-align:center;}
#smartSector02 .absection .count span {display:inline-block; font-family:'NanumSquareEB'; font-size:188px; font-weight:600; color:#537bce; letter-spacing:-10px;  
background: #fff;
background: -webkit-linear-gradient(left, #537bce, #b48dcd);
background:    -moz-linear-gradient(right, #537bce, #b48dcd);
background:      -o-linear-gradient(right, #537bce, #b48dcd);
background:         linear-gradient(transparent);
-webkit-background-clip: text;
		background-clip: text;
color: transparent;
font-weight: bold;}
#smartSector02 .absection .count p {display:none; font-size:50px; color:#999; font-weight:600; padding:20px 0 0 0;}
#smartSector02 .absection .count span {color:#537bce \0/IE8+9;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	#smartSector02 .absection .count span {color:#537bce;}
}
_:-ms-fullscreen, :root #smartSector02 .absection .count span {color:#537bce;}
#smartSector02 .absection .img {display:none; position:absolute; left:0; top:0; width:100%; text-align:center; opacity:0.2; overflow:hidden; z-index:-1;}

#smartSector02 .sns {width:100%; padding:30px 0 160px 0; overflow:hidden;}
#smartSector02 .sns ul:after {content:""; display:block; clear:both;}
#smartSector02 .sns ul li {float:left; padding:0 20px 0 0;}
#smartSector02 .sns ul li p {font-size:18px; color:#333; font-weight:600; line-height:1.5;}






/* smart sector 03 */
#smartSector03 {position:relative; width:100%; background:#547dd1; padding:0 0 160px 0; overflow:hidden; z-index:10; word-break:keep-all;}
#smartSector03 .htit {padding:158px 0 106px 0;}
#smartSector03 .htit:after {content:""; display:block; clear:both;}
#smartSector03 .htit p {font-size:16px; color:#fefefe; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 28px 0;}
#smartSector03 .htit span {display:block; font-size:18px; color:#fefefe; line-height:1.2; font-weight:500; padding:13px 0 0 0;}
#smartSector03 .motion {position:relative; width:100%; height:380px; overflow:hidden;}
#smartSector03 .motion .lsec {position:absolute; left:0; top:0; width:370px; height:370px; border:5px #fff solid; text-align:center; opacity:0; animation-duration:.5s; animation-fill-mode: both;}
#smartSector03 .motion .rsec {position:absolute; right:0; top:0; width:370px; height:370px; border:5px #fff solid; text-align:center; opacity:0; animation-duration:.5s; animation-fill-mode: both;}
#smartSector03 .motion .lsec p {font-family:'NanumSquareB'; font-size:24px; color:#ececec; letter-spacing:12px; padding:136px 0 33px 10px; margin:0 -4px 0 0;}
#smartSector03 .motion .lsec span {font-family:'NanumSquareB'; font-size:46px; color:#ececec; letter-spacing:3px;}
#smartSector03 .motion .rsec p {font-family:'NanumSquareB'; font-size:24px; color:#ececec; letter-spacing:20px; padding:136px 0 33px 18px; margin:0 -8px 0 0;}
#smartSector03 .motion .rsec span {font-family:'NanumSquareB'; font-size:46px; color:#ececec; letter-spacing:2px;}
#smartSector03 .motion .point {position:absolute; left:50%; top:0; width:42.2858%; margin:0 0 0 -21.1429%; opacity:0;}
#smartSector03 .motion .point .inner {width:245px; height:380px; margin:0 auto; overflow:hidden; opacity:0;}
#smartSector03 .motion .point .inner p {width:100%; font-family:'NanumSquareB'; font-size:16px; color:#ececec; padding:84px 0 18px 0; letter-spacing:5.9px;}
#smartSector03 .motion .point .inner span {display:block; width:100%; font-family:'NanumSquareB'; font-size:30px; color:#ececec; padding:22px 0 0 0;}
#smartSector03 .motion .point .inner span.s01 {letter-spacing:1.4px;}
#smartSector03 .motion .point .inner span.s02 {letter-spacing:0.5px;}
#smartSector03 .motion .point .inner span.s03 {letter-spacing:0.1px;}
#smartSector03 .motion .point .larrow {position:absolute; left:0; top:50%; width:80px; height:18px; margin:-9px 0 0 0; background:url('../images/smart/bg_arrow_left.png') left top no-repeat;}
#smartSector03 .motion .point .rarrow {position:absolute; right:0; top:50%; width:80px; height:18px; margin:-9px 0 0 0; background:url('../images/smart/bg_arrow_right.png') left top no-repeat;}







/* smart sector 04 */
#smartSector04 {position:relative; width:100%; background:#eee; overflow:hidden; z-index:10; word-break:keep-all;}
#smartSector04 .abBackbg {opacity:0; position:absolute; right:0; top:0; z-index:-1;}
#smartSector04 .htit {padding:153px 0 0 0;}
#smartSector04 .htit:after {content:""; display:block; clear:both;}
#smartSector04 .htit .divide {position:relative; width:100%; margin:0 0 38px 0; overflow:hidden;}
#smartSector04 .htit .divide span {font-family:'NanumSquareL'; font-size:45px; color:#999; line-height:1.2;}
#smartSector04 .htit .divide span strong {font-family:'NanumSquareL'; font-size:45px; color:#537bce; font-weight:300;}
#smartSector04 .sbtit {padding:256px 0 100px 0;}
#smartSector04 .sbtit:after {content:""; display:block; clear:both;}
#smartSector04 .sbtit p {font-size:16px; color:#333; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 24px 0;}
#smartSector04 .sbtit span {display:block; font-size:18px; color:#333; line-height:1.2; font-weight:600; padding:13px 0 0 0;}

#smartSector04 .contextbox {position:relative; width:100%; height:380px; margin:0 0 300px 0;}
#smartSector04 .contextbox:after {content:""; display:block; clear:both;}
#smartSector04 .contextbox p {font-size:16px; color:#ececec; line-height:1.2; font-weight:600; letter-spacing:8px; padding:104px 0 34px 0; margin:0 -8px 0 0;}
#smartSector04 .contextbox span {display:block; font-size:38px; color:#ececec; line-height:1.2; font-weight:600; padding:8px 0 0 0;}
#smartSector04 .contextbox .cbox01 {position:absolute; left:0; top:100%; width:380px; height:380px; text-align:center; background:#555; opacity:0;}
#smartSector04 .contextbox .cbox02 {position:absolute; left:50%; top:100%; width:380px; height:380px; text-align:center; background:#2b323c; margin:0 0 0 -190px; opacity:0;}
#smartSector04 .contextbox .cbox03 {position:absolute; right:0; top:100%; width:380px; height:380px; text-align:center; background:#547dd1; opacity:0;}
#smartSector04 .contextbox .cbox03 p {padding:104px 0 6px 0;}
#smartSector04 .contextbox .cbox03 span.space {letter-spacing:17px; padding:8px 0 0 17px;}
#smartSector04 .contextbox .plus {position:absolute; left:414px; top:100%; width:62px; height:62px; margin:160px 0 0 0; background:url('../images/smart/bg_plus.png') left top no-repeat; opacity:0;}
#smartSector04 .contextbox .arrow {position:absolute; right:404px; top:100%; width:80px; height:17px; margin:176px 0 0 0; background:url('../images/smart/bg_arrow_left_section4.png') left top no-repeat; opacity:0;}

#smartSector04 .btit {padding:0 0 100px 0;}
#smartSector04 .btit:after {content:""; display:block; clear:both;}
#smartSector04 .btit p {font-size:16px; color:#333; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 24px 0;}
#smartSector04 .btit span {display:block; font-size:18px; color:#333; line-height:1.2; font-weight:600; padding:13px 0 0 0;}

#smartSector04 .hotissue {position:relative; width:100%; height:460px; margin:0 0 200px 0; overflow:hidden;}
#smartSector04 .hotissue ul {height:200px; margin:0 -90px 0 0;}
#smartSector04 .hotissue ul:after {content:""; display:block; clear:both;}
#smartSector04 .hotissue ul li {position:relative; float:left; display:none; margin:0 90px 0 0; text-align:center; opacity:0.95;}
#smartSector04 .hotissue ul li .fbox {width:200px; height:200px; border:2px #547dd1 solid; background:#eee; box-sizing:border-box;}
#smartSector04 .hotissue ul li .fbox p {font-size:20px; color:#547dd1; font-weight:600; line-height:196px; letter-spacing:2px;}
#smartSector04 .hotissue ul li .rbox {display:none; width:100%; background:#547dd1;}
#smartSector04 .hotissue ul li .rbox p {font-size:20px; color:#fff; font-weight:600; line-height:196px; letter-spacing:2px;}
#smartSector04 .hotissue ul li .arrow {display:none; width:100%; height:24px; background:url('../images/smart/bg_smartsector04_arrow.png') center top no-repeat;}









/* smart sector 05 */
#smartSector05 {position:relative; width:100%; background:#2b323c; overflow:hidden; z-index:10; word-break:keep-all;}
#smartSector05 .htit {padding:158px 0 106px 0;}
#smartSector05 .htit:after {content:""; display:block; clear:both;}
#smartSector05 .htit p {font-size:16px; color:#fefefe; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 28px 0;}
#smartSector05 .htit span {display:block; font-size:18px; color:#fefefe; line-height:1.2; font-weight:500; padding:13px 0 0 0;}
#smartSector05 .aniBlock {width:100%; border-top:1px #5e636b solid; padding:0 0 176px 0; overflow:hidden;}
#smartSector05 .aniBlock .list {}
#smartSector05 .aniBlock .list {position:relative; height:120px; border-bottom:1px #5e636b solid;}
#smartSector05 .aniBlock .list p {font-size:16px; color:#5e636b; font-weight:600; line-height:120px; text-align:center;}
#smartSector05 .aniBlock .list p span {font-size:15px; color:#5e636b; font-weight:600; padding:0 30px 0 0; letter-spacing:6px;}
#smartSector05 .aniBlock .list > div {display:none;}
#smartSector05 .aniBlock .list .count01 {position:absolute; left:50%; top:0; width:436px; margin:0 0 0 -218px;}
#smartSector05 .aniBlock .list .count01 div {margin:0 auto;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(5), #smartSector05 .aniBlock .list .count01 div div:nth-child(10) {display:none;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(6) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(7) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(8) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(9) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(11) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(12) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count01 div div:nth-child(13) {margin:0 0 0 -40px;}

#smartSector05 .aniBlock .list .count02 {position:absolute; left:50%; top:0; width:400px; margin:0 0 0 -200px;}
#smartSector05 .aniBlock .list .count02 div {margin:0 auto;}
#smartSector05 .aniBlock .list .count02 div div:nth-child(6), #smartSector05 .aniBlock .list .count02 div div:nth-child(9) {display:none;}
#smartSector05 .aniBlock .list .count02 div div:nth-child(7) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count02 div div:nth-child(8) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count02 div div:nth-child(10) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count02 div div:nth-child(11) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count02 div div:nth-child(12) {margin:0 0 0 -40px;}

#smartSector05 .aniBlock .list .count03 {position:absolute; left:50%; top:0; width:436px; margin:0 0 0 -218px;}
#smartSector05 .aniBlock .list .count03 div {margin:0 auto;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(5), #smartSector05 .aniBlock .list .count03 div div:nth-child(10) {display:none;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(6) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(7) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(8) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(9) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(11) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(12) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count03 div div:nth-child(13) {margin:0 0 0 -40px;}

#smartSector05 .aniBlock .list .count04 {position:absolute; left:50%; top:0; width:490px; margin:0 0 0 -245px;}
#smartSector05 .aniBlock .list .count04 div {margin:0 auto;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(5), #smartSector05 .aniBlock .list .count04 div div:nth-child(8), #smartSector05 .aniBlock .list .count04 div div:nth-child(12) {display:none;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(6) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(7) {margin:0 0 0 -20px;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(9) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(10) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(11) {margin:0 0 0 -40px;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(13) {margin:0 0 0 -60px;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(14) {margin:0 0 0 -60px;}
#smartSector05 .aniBlock .list .count04 div div:nth-child(15) {margin:0 0 0 -60px;}

#smartSector05 .uxTitle {width:100%; margin:0 0 -13px 0; overflow:hidden;}
#smartSector05 .uxTitle p {font-family:'NanumSquareEB'; font-size:72px; color:#ccc6c8; font-weight:800; line-height:1;}



/* flip */
.bFlipText-wrapper {position:relative;-webkit-user-select: none;}
.bFlipText-wrapper *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}
.bFlipText-wrapper ul{position: relative;display:inline-block;padding:0;/*   margin: 5px; */list-style:none; /*   border-radius: 6px; */background: #2b323c;}
.bFlipText-wrapper ul li{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.bFlipText-wrapper ul li > div {display: block;height: 100%;overflow: visible;}
.bFlipText-wrapper ul li .up,.bFlipText-wrapper ul li .down{position: absolute;left: 0;width: 100%;height: 50%;overflow: hidden; }

.bFlipText-wrapper ul li .up {top: 0;/* this for below animation rotate transform */-webkit-transform-origin: 50% 100%;-moz-transform-origin: 50% 100%;-ms-transform-origin: 50% 100%;-o-transform-origin: 50% 100%;transform-origin: 50% 100%;}
.bFlipText-wrapper ul li .down {bottom: 0;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;-ms-transform-origin: 50% 0;-o-transform-origin: 50% 0;transform-origin: 50% 0;}
/*the line cut up & down part*/
.bFlipText-wrapper ul li .up:after {content: "";position: absolute;top: 100%;left: 0;z-index: 5;width: 100%;height: 0;margin-top:-1px;background-color: #2b323c;opacity:0.4;}
.bFlipText-wrapper ul li .shadow {position: absolute;width: 100%;height: 100%;z-index: 2;}
.bFlipText-wrapper ul li .inn {position: absolute;left: 0;width: 100%;height: 200%;text-shadow: 0 1px 2px #2b323c;text-align: center;border-radius: 6px;}
.bFlipText-wrapper ul li .up .inn {top: 0;}
.bFlipText-wrapper ul li .down .inn {bottom: 0; }


/* PLAY */
.bFlipText-wrapper ul.play li.bFlipText-before {z-index: 3;}
.bFlipText-wrapper ul{  /*  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);*/}
.bFlipText-wrapper ul.play li.bFlipText-active {-webkit-animation: chng_char 0.5s linear 0.5s both;-moz-animation: chng_char 0.5s linear 0.5s both;animation: chng_char 0.5s linear 0.5s both;z-index: 5;}
@-webkit-keyframes chng_char {0% {z-index: 2;}20% {z-index: 4;}100% {z-index: 4;}}
@-moz-keyframes chng_char {0% {z-index: 2;}20% {z-index: 4;}100% {z-index: 4;}}
@-o-keyframes chng_char {0% {z-index: 2;}20% {z-index: 4;}100% {z-index: 4;}}
@keyframes chng_char {0% {z-index: 2;}20% {z-index: 4;}100% {z-index: 4;}}

.bFlipText-wrapper ul.play li.bFlipText-before .up{z-index: 2;-webkit-animation: up_rotat 0.5s linear both;-moz-animation: up_rotat 0.5s linear both;animation: up_rotat 0.5s linear both;}
@-webkit-keyframes up_rotat {0% {-webkit-transform: rotateX(0deg);}100% {-webkit-transform: rotateX(-90deg);}}
@-moz-keyframes up_rotat {0% {-moz-transform: rotateX(0deg);}100% {-moz-transform: rotateX(-90deg);}}
@-o-keyframes up_rotat {0% {-o-transform: rotateX(0deg);}100% {-o-transform: rotateX(-90deg);}}
@keyframes up_rotat {0% {transform: rotateX(0deg);}100% {transform: rotateX(-90deg);}}

.bFlipText-wrapper ul.play li.bFlipText-active .down{z-index: 2;-webkit-animation: down_rotat 0.5s linear 0.5s  both;-moz-animation: down_rotat 0.5s linear 0.5s  both;animation: down_rotat 0.5s linear 0.5s  both;}
@-webkit-keyframes down_rotat {0% {-webkit-transform: rotateX(90deg);}100% {-webkit-transform: rotateX(0deg);}}
@-moz-keyframes down_rotat {0% {-moz-transform: rotateX(90deg);}100% {-moz-transform: rotateX(0deg);}}
@-o-keyframes down_rotat {0% {-o-transform: rotateX(90deg);}100% {-o-transform: rotateX(0deg);}}
@keyframes down_rotat {0% {transform: rotateX(90deg);}100% {transform: rotateX(0deg);}}

.bFlipText-wrapper ul li.bFlipText-active {z-index: 3; }

/* Shadow Before Hide*/
.bFlipText-wrapper ul.play li.bFlipText-before .up .shadow {background: -moz-linear-gradient(top, rgba(43, 50, 60, 1) 0%, black 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(43, 50, 60, 1)), color-stop(0%, rgba(43, 50, 60, 1)));background: linear, top, rgba(43, 50, 60, 1) 0%, black 100%;background: -o-linear-gradient(top, rgba(43, 50, 60, 1) 0%, black 100%);background: -ms-linear-gradient(top, rgba(43, 50, 60, 1) 0%, black 100%);background: linear, to bottom, rgba(43, 50, 60, 1) 0%, black 100%;-webkit-animation: shdow_show 0.5s linear both;-moz-animation: shdow_show 0.5s linear both;animation: shdow_show 0.5s linear both;}
.bFlipText-wrapper ul.play li.bFlipText-before .down .shadow {background: -moz-linear-gradient(top, black 0%, rgba(43, 50, 60, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(43, 50, 60, 1)));background: linear, top, black 0%, rgba(43, 50, 60, 1) 100%;background: -o-linear-gradient(top, black 0%, rgba(43, 50, 60, 1) 100%);background: -ms-linear-gradient(top, black 0%, rgba(43, 50, 60, 1) 100%);background: linear, to bottom, black 0%, rgba(43, 50, 60, 1) 100%;-webkit-animation: shdow_show 0.5s linear both;-moz-animation: shdow_show 0.5s linear both;animation: shdow_show 0.5s linear both;}

/* Shadow Active Show*/
.bFlipText-wrapper ul.play li.bFlipText-active .up .shadow {background: -moz-linear-gradient(top, rgba(43, 50, 60, 1) 0%, black 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(43, 50, 60, 1)), color-stop(0%, rgba(43, 50, 60, 1)));background: linear, top, rgba(43, 50, 60, 1) 0%, black 100%;background: -o-linear-gradient(top, rgba(43, 50, 60, 1) 0%, black 100%);background: -ms-linear-gradient(top, rgba(43, 50, 60, 1) 0%, black 100%);background: linear, to bottom, rgba(43, 50, 60, 1) 0%, black 100%;-webkit-animation: shdow_hide 0.5s linear 0.3s both;-moz-animation: shdow_hide 0.5s linear 0.3s both;animation: shdow_hide 0.5s linear 0.3s both;}
.bFlipText-wrapper ul.play li.bFlipText-active .down .shadow {background: -moz-linear-gradient(top, black 0%, rgba(43, 50, 60, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(43, 50, 60, 1)));background: linear, top, black 0%, rgba(43, 50, 60, 1) 100%;background: -o-linear-gradient(top, black 0%, rgba(43, 50, 60, 1) 100%);background: -ms-linear-gradient(top, black 0%, rgba(43, 50, 60, 1) 100%);background: linear, to bottom, black 0%, rgba(43, 50, 60, 1) 100%;-webkit-animation: shdow_hide 0.5s linear 0.3s both;-moz-animation: shdow_hide 0.5s linear 0.3s both;animation: shdow_hide 0.5s linear 0.3s both;}

@-webkit-keyframes shdow_show{0% {opacity: 0;}100% {opacity: 1;}}
@-moz-keyframes shdow_show{0% {opacity: 0;}100% {opacity: 1;}}
@-o-keyframes shdow_show{0% {opacity: 0;}100% {opacity: 1;}}
@keyframes shdow_show{0% {opacity: 0;}100% {opacity: 1;}}
@-webkit-keyframes shdow_hide{0% {opacity: 1;}100% {opacity: 0;}}
@-moz-keyframes shdow_hide{0% {opacity: 1;}100% {opacity: 0;}}
@-o-keyframes shdow_hide{0% {opacity: 1;}100% {opacity: 0;}}
@keyframes shdow_hide{0% {opacity: 1;}100% {opacity: 0;}}

/* uxui section */
#uxuiSection {position:relative; width:100%; overflow:hidden; z-index:10;}
#uxuiSection img {width:100%;}









/* smart sector 06 */
#smartSector06 {position:relative; width:100%; padding:0 0 32px 0; background:url('../images/smart/bg_section06.gif') left bottom #fff repeat-x; overflow:hidden; z-index:10;}
#smartSector06 .htit {padding:155px 0 52px 0;}
#smartSector06 .htit:after {content:""; display:block; clear:both;}
#smartSector06 .htit p {font-family:'NanumSquareEB'; font-size:24px; color:#333; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 30px 0;}
#smartSector06 .htit span {display:block; font-size:46px; color:#333; line-height:1.3; font-weight:600;}


.smartLogo {visibility:hidden; width:100%; background:#fff; text-align:center; overflow:hidden;}
.smartLogo .circle {animation:2s alternate h1circle;}
.smartLogo img {height:70px; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}

@keyframes h1circle {
  from {
    -webkit-clip-path: circle(0 at 40px 0);
    clip-path: circle(0 at 40px 0);
  }
  to {
    -webkit-clip-path: circle(180px at 40px 0);
    clip-path: circle(180px at 40px 0);
  }
}

/**** main gate ****/
#mainGate {position:relative; width:100%; height:880px; background:url('../images/smart/bg_maingate.jpg') 50% top no-repeat; overflow:hidden;}

#mainGate #count {display:none; position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; overflow:hidden; z-index:110;}
#mainGate #count .real {position:absolute; left:0; top:50%; width:100%; margin:-107px 0 0 0; z-index:2;}
#mainGate #count .real span {font-family:'NanumSquareEB'; font-size:128px; color:#fff; font-weight:600; letter-spacing:10px;}
#mainGate #count .real p {font-size:76px; color:#fff; font-weight:800; padding:10px 0 0 0;}
#mainGate #count .shadow {position:absolute; left:0; top:50%; width:100%; margin:-103px 0 0 0; z-index:1;}
#mainGate #count .shadow span {font-family:'NanumSquareEB'; font-size:128px; color:#ba8585; font-weight:600; letter-spacing:10px;}
#mainGate #count .shadow p {font-size:76px; color:#ba8585; font-weight:800; padding:10px 0 0 0;}

#mainGate #leftSector {display:none; position:absolute; left:0; top:0; width:100%; height:100%; background:url('../images/smart/bg_main_student.jpg') left top no-repeat; cursor:pointer; z-index:2;}
#mainGate #leftSector .bgArea {position:relative; width:100%; height:100%; overflow:hidden; z-index:10;}
#mainGate #leftSector .imgArea {position:relative; width:100%; height:100%; overflow:hidden; z-index:10;}
#mainGate #leftSector .imgArea img {display:none; width:763px;}
#mainGate #rightSector {display:none; position:absolute; right:0; top:0; width:100%; height:100%; background:url('../images/smart/bg_main_parents.jpg') left top no-repeat; cursor:pointer; z-index:2;}
#mainGate #rightSector .imgArea {position:relative; width:100%; height:100%; text-align:right; overflow:hidden; z-index:10;}
#mainGate #rightSector .imgArea img {display:none; width:763px;}

#mainGate .txtArea {display:none; position:absolute; left:50%; top:50%; width:243px; height:243px; margin:-121px 0 0 -121px; z-index:20;
	-ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
}

#mainGate .txtArea {animation:.2s alternate scalebanner;}
@keyframes scalebanner {
  from {
	-ms-transform: scale(2, 2); /* IE 9 */
	-webkit-transform: scale(2, 2); /* Safari */
	transform: scale(2, 2);
  }
  to {
    -ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
  }
}

#mainGate .txtArea p {margin:40px 0 0 0; text-align:center;}
#mainGate .txtArea p span {display:inline-block; font-size:34px; color:#fff; font-weight:600; line-height:1.1; padding:0 0 20px 0; margin:0 0 0 30px; letter-spacing:30px;}
#mainGate .txtArea p span.eng {position:absolute; left:22px; bottom:7px; width:100%; letter-spacing:45px; margin:0;}
#mainGate .txtArea.s {background:url('../images/smart/gate_main_txtbox_1.png') left top repeat; background-size:100%;}
#mainGate .txtArea.p {background:url('../images/smart/gate_main_txtbox_2.png') left top repeat; background-size:100%;}

#mainGate #styleTit {position:absolute; left:50%; top:50%; width:476px; margin-left:-232px; overflow:hidden; z-index:1;}
#mainGate #styleTit div.t01 {position:absolute; left:0; top:0; width:100%; overflow:hidden;}
#mainGate #styleTit div.t02 {position:absolute; left:0; bottom:0; width:100%; overflow:hidden;}
#mainGate #styleTit span {position:absolute; left:0; font-size:118px; color:#fff; font-weight:600; line-height:1.16; letter-spacing:10px;}




/* smart sector 07 */
#smartSector07 {position:relative; width:100%; background:#fff; z-index:10;}
#smartSector07 .htit {padding:155px 0 52px 0;}
#smartSector07 .htit:after {content:""; display:block; clear:both;}
#smartSector07 .htit p {font-family:'NanumSquareEB'; font-size:24px; color:#333; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 30px 0;}
#smartSector07 .htit span {display:block; font-size:46px; color:#333; line-height:1.3; font-weight:600;}

#smartSector07 .asis {width:100%; overflow:hidden;}
#smartSector07 .asis .tit {font-family:'NanumSquareEB'; font-size:24px; color:#666; font-weight:600; line-height:1.2; letter-spacing:3px; padding:0 0 18px 0;}
#smartSector07 .asis .asisSitemap {width:100%; background:#666; overflow:hidden;}
#smartSector07 .asis .asisSitemap .item {float:left; width:14.285%; height:340px; text-align:center; border-right:1px #777 solid; box-sizing:border-box;}
#smartSector07 .asis .asisSitemap .item p {font-size:16px; color:#fefefe; font-weight:600; line-height:1.2; padding:58px 0 28px 0;}
#smartSector07 .asis .asisSitemap .item ul:after {content:""; display:block; clear:both;}
#smartSector07 .asis .asisSitemap .item ul li {display:block; font-size:15px; color:#ccc; line-height:1.1; padding:0 0 16px 0;}
#smartSector07 .asis .asisSitemap .item:last-child {border:0;}

#smartSector07 .arrow {width:100%; margin:30px 0 0 0; text-align:center; overflow:hidden;}
#smartSector07 .tobeTit {width:100%; font-family:'NanumSquareEB'; font-size:24px; color:#666; font-weight:600; line-height:1.2; letter-spacing:3px; padding:0 0 18px 0; margin:-20px 0 0 0; overflow:hidden;}

#smartSector07 .tobe {position:relative; width:100%; padding:0 0 120px 0;}
#smartSector07 .tobe p {position:relative; font-size:25px; color:#fefefe; line-height:1.4; padding:75px 0 35px 0; margin:0 0 0 6.741%; background:url('../images/smart/bg_sector7_line.png') left bottom no-repeat; z-index:2;}
#smartSector07 .tobe ul {position:relative; margin:35px 0 0 6.741%; z-index:2;}
#smartSector07 .tobe ul:after {content:""; display:block; clear:both;}
#smartSector07 .tobe ul li {display:block; font-size:21px; color:#fefefe; line-height:1.2; padding:0 0 24px 0;}
#smartSector07 .tobe .sDiv {opacity:0; position:relative; width:63.57%; height:620px; margin:0 0 0 -200px; background:url('../images/smart/bg_sector7_sdiv.png') left top repeat; z-index:1;}
#smartSector07 .tobe .sDiv .img {position:absolute; left:14.6%; bottom:0; z-index:1;}
#smartSector07 .tobe .pDiv {opacity:0; position:absolute; right:-200px; top:120px; width:63.57%; height:620px; background:url('../images/smart/bg_sector7_pdiv.png') left top repeat; z-index:2;}
#smartSector07 .tobe .pDiv .img {position:absolute; left:29.5%; bottom:0; z-index:1;}
#smartSector07 .tobe .pDiv p {margin:0 6.741% 0 0; background-position:right bottom; text-align:right;}
#smartSector07 .tobe .pDiv ul {margin:35px 6.741% 0 0;}
#smartSector07 .tobe .pDiv ul li {text-align:right;}

#smartSector07 .tobe .cDiv {opacity:0; position:absolute; left:50%; top:162px; width:380px; margin:0 0 0 -190px; text-align:center; z-index:3;}
#smartSector07 .tobe .cDiv p {background-position:center bottom; margin:0; padding:16px 0 35px 0;}
#smartSector07 .tobe .cDiv ul {margin:35px 0 0 0;}




/* smart sector 08 */
#smartSector08 {position:relative; width:100%; height:1250px; background:#fff; overflow:hidden;}
#smartSector08 .hstit {padding:155px 0 40px 0;}
#smartSector08 .hstit:after {content:""; display:block; clear:both;}
#smartSector08 .hstit p {font-family:'NanumSquareEB'; font-size:24px; color:#333; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 30px 0;}
#smartSector08 .hstit span {display:block; font-size:46px; color:#333; line-height:1.3; font-weight:600;}


/* smart style */
.smartStyle {position:absolute; right:0; top:160px; width:1200px; word-break:keep-all; z-index:10;}
.smartStyle:after {content:""; display:block; clear:both;}
.smartStyle .innerWrap {position:relative;}
.smartStyle .innerWrap:after {content:""; display:block; clear:both;}

.smartStyle .information .openInfo {}
.smartStyle .information .openInfo span {display:inline-block; font-size:17px; color:#2d2d2d; font-weight:600; line-height:1.4; padding:64px 0 0;}

.smartStyle .information > div {z-index:2;}
.smartStyle .information > div .hideArea {display:none; position:relative; border:4px #2d2d2d solid; background:#fff;}
.smartStyle .information > div .hideArea:after {content:""; display:block; clear:both;} 
.smartStyle .information > div .hideArea .inner {position:relative; margin:38px 20px 40px 34px;}
.smartStyle .information > div .hideArea .inner:after {content:""; display:block; clear:both;} 
.smartStyle .information > div .hideArea .inner .ico {position:absolute; left:0; top:0;}
.smartStyle .information > div .hideArea .inner .txtArea {margin:0 0 0 75px;}
.smartStyle .information > div .hideArea .inner .txtArea:after {content:""; display:block; clear:both;} 
.smartStyle .information > div .hideArea .inner .txtArea .sbtit {width:100%; overflow:hidden;}
.smartStyle .information > div .hideArea .inner .txtArea .sbtit span {display:block; font-size:20px; color:#6d6d6d; line-height:1.5;}
.smartStyle .information > div .hideArea .inner .txtArea .htit {width:100%; padding:3px 0 0 0; overflow:hidden;}
.smartStyle .information > div .hideArea .inner .txtArea .htit span {display:block; font-size:36px; color:#f6544b; font-weight:800; line-height:1.2;}
.smartStyle .information > div .hideArea .inner .txtArea .txt {width:100%; padding:8px 0 0 0; overflow:hidden;}
.smartStyle .information > div .hideArea .inner .txtArea .txt span {display:block; font-size:17px; color:#6d6d6d; font-weight:600; line-height:1.4; letter-spacing:-0.5px;}
.smartStyle .information > div .hideArea .inner .txtArea .sample {width:100%; padding:15px 0 0 0; overflow:hidden;}
.smartStyle .information > div .hideArea .closedBtn {position:absolute; right:-18px; top:-18px;}

.smartStyle .img {position:relative; width:100%; text-align:center; overflow:hidden;}
.smartStyle .pos {position:absolute; left:50%; top:0; width:792px; margin:0 0 0 -386px;}
.smartStyle .pos:after {content:""; display:block; clear:both;}
.smartStyle .pos .element {display:inline-block; width:18px; height:18px; border-radius:100px; background:#2d2d2d;}

.allsmartBg {display:none; position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; background:url('../images/smart/bg_allbg.png') left top repeat; z-index:11;}

/* smart Boy quality */
.smartBoyQuality .pos .box01 {position:absolute; left:294px; top:376px;}
.smartBoyQuality .pos .box02 {position:absolute; left:459px; top:255px;}
.smartBoyQuality .pos .box03 {position:absolute; left:323px; top:486px;}
.smartBoyQuality .pos .box04 {position:absolute; left:394px; top:425px;}
.smartBoyQuality .pos .box05 {position:absolute; left:428px; top:548px;}

.smartBoyQuality .information {position:absolute; left:0; top:0; width:100%;}
.smartBoyQuality .information:after {content:""; display:block; clear:both;} 
.smartBoyQuality .information .info01 {position:absolute; left:90px; top:150px; width:390px;}
.smartBoyQuality .information .info01 a.openInfo {position:absolute; left:33px; top:42px; display:inline-block; width:62px; background:url('../images/smart/img_smartboyquality_info01.png') center top no-repeat;}
.smartBoyQuality .information .info02 {position:absolute; right:14px; top:80px; width:390px;}
.smartBoyQuality .information .info02 a.openInfo {position:absolute; left:33px; top:42px; display:inline-block; width:62px; background:url('../images/smart/img_smartboyquality_info02.png') center top no-repeat;}
.smartBoyQuality .information .info03 {position:absolute; left:110px; top:545px; width:390px;}
.smartBoyQuality .information .info03 a.openInfo {position:absolute; left:33px; top:42px; display:inline-block; width:62px; background:url('../images/smart/img_smartboyquality_info03.png') center top no-repeat;}
.smartBoyQuality .information .info04 {position:absolute; right:70px; top:340px; width:390px;}
.smartBoyQuality .information .info04 a.openInfo {position:absolute; left:33px; top:42px; display:inline-block; width:62px; background:url('../images/smart/img_smartboyquality_info04.png') center top no-repeat;}
.smartBoyQuality .information .info05 {position:absolute; right:14px; top:662px; width:390px;}
.smartBoyQuality .information .info05 a.openInfo {position:absolute; left:33px; top:42px; display:inline-block; width:62px; background:url('../images/smart/img_smartboyquality_info05.png') center top no-repeat;}

.smartBoyQuality .dragLine {position:absolute; left:0; top:0; border:1px #2d2d2d solid; z-index:1;}
.smartBoyQuality .dragLine.d01 {top: 303.335px; left: 140.754px; width: 394.686px; transform: rotate(24.5521deg);}
.smartBoyQuality .dragLine.d02 {top: 207.878px; left: 666.271px; width: 214.227px; transform: rotate(148.165deg);}
.smartBoyQuality .dragLine.d03 {top: 556.274px; left: 165.47px; width: 390.544px; transform: rotate(-18.203deg);}
.smartBoyQuality .dragLine.d04 {top: 422.621px; left: 616.433px; width: 192.38px; transform: rotate(173.134deg);}
.smartBoyQuality .dragLine.d05 {top: 645.414px; left: 619.768px; width: 276.306px; transform: rotate(-140.433deg);}




/* smart sector 09 */
#smartSector09 {position:relative; width:100%; height:1100px; background:#000; overflow:hidden; z-index:10;}
#smartSector09 .htit {position:relative; padding:155px 0 0 0; z-index:10;}
#smartSector09 .htit:after {content:""; display:block; clear:both;}
#smartSector09 .htit p {font-family:'NanumSquareEB'; font-size:24px; color:#fff; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 32px 0;}
#smartSector09 .htit span {display:block; font-size:46px; color:#fff; line-height:1.3; font-weight:600;}
#smartSector09 .phoneAni {position:absolute; right:0; top:0; width:1330px; height:100%;}
#smartSector09 .phoneAni .pre01 {position:absolute; left:57.894%; bottom:-64px;}
#smartSector09 .phoneAni .pre02 {position:absolute; left:35.345%; top:-244px;}
#smartSector09 .phoneAni .phoneAniStep {width:100%; overflow:hidden;}
#smartSector09 .phoneAni .phoneAniStep ul:after {content:""; display:block; clear:both;}
#smartSector09 .phoneAni .phoneAniStep ul li {position:absolute; display:none;}
#smartSector09 .phoneAni .phoneAniStep ul li.c001 {left:2.7%; bottom:-62px; z-index:2;}
#smartSector09 .phoneAni .phoneAniStep ul li.c002 {left:57.398%; bottom:-62px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c003 {left:43.6%; top:-76px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c004 {left:1%; bottom:152px; z-index:1;}
#smartSector09 .phoneAni .phoneAniStep ul li.c005 {right:-62px; top:120px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c006 {left:8%; top:-10px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c007 {left:21%; top:336px; z-index:3;}
#smartSector09 .phoneAni .phoneAniStep ul li.c008 {left:31.5%; bottom:-60px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c009 {left:24.86%; top:126px; z-index:4;}
#smartSector09 .phoneAni .phoneAniStep ul li img {position:relative; top:120px;}



/* smart sector 10 */
#smartSector10 {position:relative; width:100%; background:#eee; z-index:10;}
#smartSector10 .innerW {position:relative; height:1000px;}
#smartSector10 .htit {padding:155px 0 0 0;}
#smartSector10 .htit:after {content:""; display:block; clear:both;}
#smartSector10 .htit p {font-family:'NanumSquareEB'; font-size:24px; color:#333; line-height:1.2; letter-spacing:6px; font-weight:600; padding:0 0 32px 0;}
#smartSector10 .htit span {display:block; font-size:46px; color:#333; line-height:1.3; font-weight:600;}
#smartSector10 .equip {position:absolute; left:0; bottom:0; width:100%;}
#smartSector10 .equip .mac {opacity:0; position:absolute; left:6.57%; bottom:-153px;}
#smartSector10 .equip .ipad {opacity:0; position:absolute; right:15%; bottom:-153px;}
#smartSector10 .equip .iphone {opacity:0; position:absolute; left:54.07%; bottom:-153px;}


/* smart sector 11 */
#smartSector11 {position:relative; width:100%; z-index:10;}
#smartSector11 .concept {font-family:'NanumSquareEB'; font-size:68px; color:#aaa; font-weight:800; letter-spacing:6px; padding:388px 0 70px 0;}
#smartSector11 .htit {padding:0 0 95px 0;}
#smartSector11 .htit:after {content:""; display:block; clear:both;}
#smartSector11 .htit span {display:block; font-size:46px; color:#333; line-height:1.3; font-weight:600;}
#smartSector11 .colorList {width:100%; height:392px;}
#smartSector11 .colorList:after {content:""; display:block; clear:both;}
#smartSector11 .colorList ul {margin:0 0 0 -40px;}
#smartSector11 .colorList ul:after {content:""; display:block; clear:both;}
#smartSector11 .colorList ul li {float:left; display:none; margin:0 0 0 40px;  box-shadow:-3px 17px 40px #dedede;}
#smartSector11 .colorList ul li img {margin-top:50px;}



/* smart sector 12 */
#smartSector12 {position:relative; width:100%; z-index:10;}
#smartSector12 .concept {font-family:'NanumSquareEB'; font-size:68px; color:#aaa; font-weight:800; letter-spacing:6px; padding:265px 0 70px 0;}
#smartSector12 .htit {padding:0 0 95px 0;}
#smartSector12 .htit:after {content:""; display:block; clear:both;}
#smartSector12 .htit span {display:block; font-size:46px; color:#333; line-height:1.3; font-weight:600;}
#smartSector12 .model {width:100%; height:520px; background:#b5c3e7; overflow:hidden;}
#smartSector12 .model .swiper-slide .imgArea {position:relative; width:100%; height:100%; text-align:center;}
#smartSector12 .model .swiper-slide .imgArea img {position:absolute; left:50%; bottom:0; margin:0 0 0 -381px;}
#smartSector12 .conceptIcon {width:100%; height:360px; padding:68px 0; background:#b5c3e7; overflow:hidden;}
#smartSector12 .conceptIcon ul {width:970px; margin:0 auto; overflow:hidden;}
#smartSector12 .conceptIcon ul:after {content:""; display:block; clear:both;}
#smartSector12 .conceptIcon ul li {display:none; float:left; width:20%; text-align:center; padding:50px 0;}
#smartSector12 .conceptIcon ul li img {}


/* smart sector 13 */
#smartSector13 {position:relative; width:100%; padding:95px 0 0 0; z-index:10;}
#smartSector13 .htit {font-family:'NanumSquareEB'; font-size:46px; color:#333; line-height:1.1; padding:0 0 38px 0; text-align:center;}
#smartSector13 .htit:after {content:""; display:block; clear:both;}
#smartSector13 .sbtit {text-align:center; padding:0 0 78px 0;}
#smartSector13 .sbtit:after {content:""; display:block; clear:both;}
#smartSector13 .sbtit p {font-family:'NanumSquareEB'; font-size:12px; color:#888;}
#smartSector13 .sbtit span {display:block; font-family:'NanumSquareEB'; font-size:14px; color:#888; line-height:1.3; font-weight:600; padding:5px 0 0 0;}
#smartSector13 .sbtit span strong {font-family:'NanumSquareEB'; font-size:14px; color:#555; line-height:1.3;}
#smartSector13 .tf {width:730px; margin:0 auto 158px; overflow:hidden;}
#smartSector13 .tf .designTf {float:left; width:60.27%;}
#smartSector13 .tf .sfdTf {float:right; width:30.136%;}
#smartSector13 .tf .tfTit {font-family:'NanumSquareEB'; font-size:14px; color:#555; font-weight:600; border-bottom:1px #666 solid; padding:0 0 6px 0;}
#smartSector13 .tf ul:after {content:""; display:block; clear:both;}
#smartSector13 .tf ul li {float:left; width:50%; font-family:'NanumSquareEB'; font-size:14px; color:#555; line-height:1.2; margin:26px 0 0 0;}
#smartSector13 .tf ul li p {font-family:'NanumSquareEB'; font-size:12px; color:#888; line-height:1.2; padding:0 0 5px 0;}



/* smart sector 14 */
#smartSector14 {position:relative; width:100%; background:#2c2925; z-index:10; overflow:hidden; word-break:keep-all;}
#smartSector14 .innerW {position:relative;}
#smartSector14 .sfdLogo {position:absolute; left:3.57%; top:16px;}
#smartSector14 .footTxt {width:72%; margin:64px 0 95px 17.142%; padding:14px 0 0 72px; background:url('../images/smart/bg_sector14_quotation01.png') left top no-repeat;}
#smartSector14 .footTxt .insfoot {padding:0 60px 0 0; background:url('../images/smart/bg_sector14_quotation02.png') right bottom no-repeat;}
#smartSector14 .footTxt .insfoot p {font-size:14px; color:#999; line-height:2.4;}
#smartSector14 .footTxt .insfoot span {display:block; font-size:14px; color:#999; line-height:2.4; padding:12px 0 0 0;}













/************** media query 1800px *************/
@media all and (max-width: 1800px){

/**** main gate ****/
#mainGate #styleTit {width:338px; margin-left:-162px;}
#mainGate #styleTit span {font-size:80px;}


}





/************** media query 1700px *************/
@media all and (max-width: 1700px){

#smartPorBox {width:100%;}
#smartSector01 .smartFixdImg .txtArea {width:1400px; margin:158px 0 0 -700px;}


}





/************** media query 1500px *************/
@media all and (max-width: 1500px){

/**** main gate ****/
#mainGate {height:720px; background-size:auto 720px;}
#mainGate #styleTit {width:260px; margin-left:-122px;}
#mainGate #styleTit span {font-size:58px;}

#mainGate #leftSector .imgArea img {width:600px;}
#mainGate #rightSector .imgArea img {width:600px;}


}





/************** media query 1440px *************/
@media all and (max-width: 1440px){


#smartPorBox .innerW {width:auto; margin:0 40px;}

#smartSector01 .smartFixdImg .txtArea {left:0; width:auto; margin:158px 0 0 0;}
#smartSector02 .absection {right:0;}
#smartSector03 .motion .point .larrow {left:20px;}
#smartSector03 .motion .point .rarrow {right:20px;}

#smartSector04 .contextbox {width:1160px; height:320px;}
#smartSector04 .contextbox .cbox01 {width:320px; height:320px;}
#smartSector04 .contextbox .cbox02 {width:320px; height:320px; margin:0 0 0 -160px;}
#smartSector04 .contextbox .cbox03 {width:320px; height:320px;}

#smartSector04 .contextbox p {padding:80px 0 34px 0;}
#smartSector04 .contextbox span {padding:5px 0 0 0;}
#smartSector04 .contextbox .cbox03 p {padding:80px 0 10px 0;}
#smartSector04 .contextbox .cbox03 span.space {padding:5px 0 0 17px;}
#smartSector04 .contextbox .plus {left:339px; margin:128px 0 0 0;}
#smartSector04 .contextbox .arrow {right:330px; margin:144px 0 0 0;}

#smartSector04 .hotissue ul {margin:0 -65px 0 0;}
#smartSector04 .hotissue ul li {margin:0 65px 0 0;}
#smartSector04 .hotissue ul li .fbox {width:180px; height:180px;}
#smartSector04 .hotissue ul li .fbox p {line-height:178px;}
#smartSector04 .hotissue ul li .rbox p {line-height:178px;}

#smartSector07 .tobe .pDiv .img {left:23.5%;}

#smartSector09 .phoneAni {width:100%; margin:0 -15% 0 0;}

#smartSector10 .equip .mac {left:2%;}
#smartSector10 .equip .ipad {right:7%;}
#smartSector10 .equip .iphone {left:55.07%;}

#smartSector11 .colorList ul {margin:0 0 0 -20px;}
#smartSector11 .colorList ul li {margin:0 0 0 20px;}
#smartSector11 .colorList ul li img {width:215px;}


}






/************** media query 1360px *************/
@media all and (max-width: 1360px){

#smartSector02 .absection {width:800px; top:270px;}
#smartSector02 .absection .count span {font-size:160px;}

#smartSector03 .motion {height:330px;}
#smartSector03 .motion .lsec {width:320px; height:320px;}
#smartSector03 .motion .lsec p {padding:110px 0 33px 10px;}
#smartSector03 .motion .rsec {width:320px; height:320px;}
#smartSector03 .motion .rsec p {padding:110px 0 33px 10px;}
#smartSector03 .motion .point .inner {height:330px;}
#smartSector03 .motion .point .inner p {padding:62px 0 18px 0;}

#smartSector04 .abBackbg img {width:840px;}
#smartSector04 .htit .divide span {font-size:40px;}
#smartSector04 .htit .divide span strong {font-size:40px;}

/**** main gate ****/
#mainGate {height:720px; background-size:auto 720px;}

#mainGate #count .real {margin:-82px 0 0 0;}
#mainGate #count .real span {font-size:100px;}
#mainGate #count .real p {font-size:62px;}
#mainGate #count .shadow {margin:-78px 0 0 0;}
#mainGate #count .shadow span {font-size:100px;}
#mainGate #count .shadow p {font-size:62px;}

#mainGate #leftSector .imgArea img {width:555px;}
#mainGate #rightSector .imgArea img {width:555px;}

#mainGate #styleTit {width:268px; margin-left:-126px;}
#mainGate #styleTit span {font-size:60px;}

#mainGate .txtArea {width:180px; height:180px; margin:-90px 0 0 -90px;}
#mainGate .txtArea p {margin:30px 0 0 0;}
#mainGate .txtArea p span {font-size:28px; margin:0 0 0 20px; padding:0 0 15px 0; letter-spacing:22px;}
#mainGate .txtArea p span.eng {left:15px; bottom:13px; letter-spacing:33px;}


}




/************** media query 1240px *************/
@media all and (max-width: 1240px){


#smartSector01 .smartFixdImg {height:800px;}
#smartSector01 .smartFixdImg .imgArea {margin:0 0 0 -708px;}
#smartSector01 .smartFixdImg .imgArea img {height:800px;}
#smartSector01 .smartFixdImg .txtArea {margin:100px 0 0 0;}
#smartSector01 .smartFixdImg .txtArea .sbtit {padding:180px 0 0 0;}

#smartSector02 .htit span {font-size:16px;}
#smartSector02 .htit span strong {font-size:16px;}
#smartSector02 .absection {width:700px;}
#smartSector02 .absection .count span {font-size:140px;}
#smartSector02 .absection .count p {font-size:40px;}
#smartSector02 .absection .img img {width:380px;}


#smartSector03 .motion {height:290px;}
#smartSector03 .motion .lsec {width:280px; height:280px;}
#smartSector03 .motion .lsec p {font-size:19px; padding:95px 0 28px 10px; letter-spacing:10px; margin:0 2px 0 0;}
#smartSector03 .motion .lsec span {font-size:38px;}
#smartSector03 .motion .rsec {width:280px; height:280px;}
#smartSector03 .motion .rsec p {font-size:19px; padding:95px 0 28px 10px; letter-spacing:17px; margin:0 -2px 0 0;}
#smartSector03 .motion .rsec span {font-size:38px;}
#smartSector03 .motion .point .inner {width:212px; height:290px;}
#smartSector03 .motion .point .inner p {font-size:14px; padding:50px 0 18px 0; letter-spacing:5.2px;}
#smartSector03 .motion .point .inner span {font-size:26px; padding:18px 0 0 0;}
#smartSector03 .motion .point .larrow {width:60px; background-size:60px 14px; margin:-7px 0 0 0;}
#smartSector03 .motion .point .rarrow {width:60px; background-size:60px 14px; margin:-7px 0 0 0;}


#smartSector04 .abBackbg img {width:760px; margin:0 -60px 0 0;}
#smartSector04 .htit .divide {margin:0 0 30px 0;}
#smartSector04 .htit .divide span {font-size:36px;}
#smartSector04 .htit .divide span strong {font-size:36px;}

#smartSector04 .sbtit {padding:230px 0 80px 0;}

#smartSector04 .contextbox {width:auto; height:290px; margin:0 0 250px 0;}
#smartSector04 .contextbox .cbox01 {width:280px; height:280px;}
#smartSector04 .contextbox .cbox02 {width:280px; height:280px; margin:0 0 0 -140px;}
#smartSector04 .contextbox .cbox03 {width:280px; height:280px;}
#smartSector04 .contextbox p {font-size:14px; padding:70px 0 25px 0;}
#smartSector04 .contextbox span {font-size:34px;}

#smartSector04 .contextbox .cbox03 p {padding:65px 0 10px 0;}
#smartSector04 .contextbox .cbox03 span.space {padding:5px 0 0 17px; letter-spacing:15px;}
#smartSector04 .contextbox .plus {left:25%; width:13.8%; margin:112px 0 0 0; height:50px; background-size:50px; background-position:center top;}
#smartSector04 .contextbox .arrow {right:25%; width:13.8%; margin:132px 0 0 0; height:14px; background-size:60px 14px; background-position:center top;}

#smartSector04 .hotissue ul {margin:0 -3% 0 0;}
#smartSector04 .hotissue ul li {width:17%; margin:0 3% 0 0;}
#smartSector04 .hotissue ul li .fbox {width:100%; height:180px;}
#smartSector04 .hotissue ul li .fbox p {line-height:178px;}
#smartSector04 .hotissue ul li .rbox p {line-height:178px;}

#smartSector05 .uxTitle p {font-size:68px;}
#smartSector06 .htit span {font-size:42px;}
#smartSector07 .htit span {font-size:42px;}
#smartSector08 .hstit span {font-size:42px;}

#smartSector09 .htit span {font-size:42px;}
#smartSector09 .phoneAni {margin:0 -8% 0 0;}

#smartSector10 .equip .mac {left:1%; bottom:-120px;}
#smartSector10 .equip .mac img {width:100%;}
#smartSector10 .equip .ipad {right:0%; bottom:-120px; width:40%; text-align:right;}
#smartSector10 .equip .ipad img {width:80%;}
#smartSector10 .equip .iphone {left:60%; bottom:-120px; width:20%;}
#smartSector10 .equip .iphone img {width:80%;}
#smartSector10 .htit span {font-size:42px;}

#smartSector11 .colorList {height:auto;}
#smartSector11 .colorList ul {margin:0 0 0 -2%;}
#smartSector11 .colorList ul li {width:18%; margin:0 0 0 2%;}
#smartSector11 .colorList ul li img {width:100%;}
#smartSector11 .concept {font-size:64px; padding:360px 0 60px 0;}
#smartSector11 .htit span {font-size:42px;}

#smartSector12 .concept {font-size:64px; padding:235px 0 60px 0;}
#smartSector12 .htit span {font-size:42px;}
#smartSector12 .conceptIcon ul {width:700px;}

#smartSector13 .htit {font-size:42px;}

#smartSector14 .footTxt {margin:64px 0 95px 19%;}



.smartStyle {width:auto;}
.smartStyle .innerWrap {position:relative; width:900px; margin:0 auto;}
.smartStyle .information > div .hideArea .inner .ico {position:relative; left:0; top:0;}
.smartStyle .information > div .hideArea .inner .txtArea {margin:12px 0 0 0;}

/* smart Boy quality */
.smartBoyQuality .information .info01 {left:20px; top:160px; width:300px;}
.smartBoyQuality .information .info02 {right:20px; top:80px; width:300px;}
.smartBoyQuality .information .info03 {left:50px; top:550px; width:300px;}
.smartBoyQuality .information .info04 {right:0; top:300px; width:300px;}
.smartBoyQuality .information .info05 {right:20px; top:600px; width:300px;}

.smartBoyQuality .dragLine.d01 {top: 308.365px; left: 68.526px; width: 318.68px; transform: rotate(28.8974deg);}
.smartBoyQuality .dragLine.d02 {top: 207.923px; left: 509.45px; width: 161.941px; transform: rotate(135.751deg);}
.smartBoyQuality .dragLine.d03 {top: 558.331px; left: 104.671px; width: 305.221px; transform: rotate(-24.3818deg);}
.smartBoyQuality .dragLine.d04 {top: 402.767px; left: 462.447px; width: 210.642px; transform: rotate(162.597deg);}
.smartBoyQuality .dragLine.d05 {top: 614.401px; left: 481.897px; width: 186.024px; transform: rotate(-142.206deg);}

}






/************** media query 1140px *************/
@media all and (max-width: 1140px){

/**** main gate ****/
#mainGate {height:640px; background-size:auto 640px;}

#mainGate #count .real {margin:-61px 0 0 0;}
#mainGate #count .real span {font-size:80px; letter-spacing:6px;}
#mainGate #count .real p {font-size:42px; letter-spacing:6px;}
#mainGate #count .shadow {margin:-57px 0 0 0;}
#mainGate #count .shadow span {font-size:80px; letter-spacing:6px;}
#mainGate #count .shadow p {font-size:42px; letter-spacing:6px;}

#mainGate #leftSector .imgArea img {width:493px;}
#mainGate #rightSector .imgArea img {width:493px;}

#mainGate #styleTit {width:212px; margin-left:-98px;}
#mainGate #styleTit span {font-size:45px;}

#mainGate .txtArea {width:150px; height:150px; margin:-75px 0 0 -75px;}
#mainGate .txtArea p {margin:22px 0 0 0;}
#mainGate .txtArea p span {font-size:24px; margin:0 0 0 20px; padding:0 0 15px 0; letter-spacing:20px;}
#mainGate .txtArea p span.eng {bottom:6px; letter-spacing:30px;}


}








/************** media query 1080px *************/
@media all and (max-width: 1080px){

#smartSector01 .smartFixdImg .txtArea .htit p {font-size:15px;}
#smartSector01 .smartFixdImg .txtArea .sbtit p {font-size:15px;}
#smartSector01 .smartFixdImg .txtArea .sbtit .sbox span {font-size:16px;}

#smartSector02 .htit p {font-size:15px;}
#smartSector02 .sbtit .btn {margin:0 0 140px 0;}
#smartSector02 .sbtit .btn a {width:260px; height:70px; font-size:20px; line-height:70px;}
#smartSector02 .absection {width:572px; top:308px;}
#smartSector02 .absection .count span {font-size:116px; letter-spacing:-6px;}
#smartSector02 .absection .count p {font-size:36px;}
#smartSector02 .absection .img img {width:350px;}

#smartSector03 .htit p {font-size:15px;}
#smartSector03 .htit span {font-size:16px;}
#smartSector03 .motion {height:240px;}
#smartSector03 .motion .lsec {width:230px; height:230px;}
#smartSector03 .motion .lsec p {font-size:17px; padding:77px 0 28px 10px; letter-spacing:8px; margin:0 2px 0 0;}
#smartSector03 .motion .lsec span {font-size:32px;}
#smartSector03 .motion .rsec {width:230px; height:230px;}
#smartSector03 .motion .rsec p {font-size:17px; padding:77px 0 28px 10px; letter-spacing:14px; margin:0 -2px 0 0;}
#smartSector03 .motion .rsec span {font-size:32px;}
#smartSector03 .motion .point .inner {width:204px; height:240px;}
#smartSector03 .motion .point .inner p {font-size:13px; padding:40px 0 12px 0; letter-spacing:5.3px; margin:0 -4px 0 0;}
#smartSector03 .motion .point .inner span {font-size:25px; padding:16px 0 0 0;}
#smartSector03 .motion .point .larrow {left:12px; width:50px; background-size:50px 11px; margin:-5px 0 0 0;}
#smartSector03 .motion .point .rarrow {right:12px; width:50px; background-size:50px 11px; margin:-5px 0 0 0;}

#smartSector04 .abBackbg img {width:700px; margin:0 -80px 0 0;}
#smartSector04 .sbtit p {font-size:15px;}
#smartSector04 .sbtit span {font-size:16px;}
#smartSector04 .btit p {font-size:15px;}
#smartSector04 .btit span {font-size:16px;}
#smartSector04 .sbtit span {line-height:1.6;}

#smartSector04 .contextbox {width:auto; height:240px; margin:0 0 220px 0;}
#smartSector04 .contextbox .cbox01 {width:230px; height:230px;}
#smartSector04 .contextbox .cbox02 {width:230px; height:230px; margin:0 0 0 -115px;}
#smartSector04 .contextbox .cbox03 {width:230px; height:230px;}
#smartSector04 .contextbox p {font-size:13px; padding:55px 0 20px 0;}
#smartSector04 .contextbox span {font-size:30px;}
#smartSector04 .contextbox .cbox03 p {padding:45px 0 10px 0;}
#smartSector04 .contextbox .cbox03 span.space {padding:5px 0 0 17px; letter-spacing:14px;}
#smartSector04 .contextbox .plus {left:23%; width:15.5%; margin:90px 0 0 0;}
#smartSector04 .contextbox .arrow {right:23%; width:15.5%; margin:104px 0 0 0;}

#smartSector04 .hotissue {margin:0 0 170px 0;}
#smartSector04 .hotissue ul li .fbox p {font-size:18px;}
#smartSector04 .hotissue ul li .rbox p {font-size:18px;}

#smartSector05 .htit p {font-size:15px;}
#smartSector05 .htit span {font-size:16px; line-height:1.4;}
#smartSector05 .aniBlock .list {height:83px;}
#smartSector05 .aniBlock .list p {line-height:1.4; padding:20px 0 19px;}
#smartSector05 .aniBlock .list p span {padding:0 12px 0 0;}
#smartSector05 .aniBlock .list > div { top:-18px !important;
-ms-transform: scale(0.7, 0.7); /* IE 9 */
-webkit-transform: scale(0.7, 0.7); /* Safari */
transform: scale(0.7, 0.7);}

#smartSector05 .uxTitle p {font-size:60px;}

#smartSector06 .htit p {font-size:20px;}
#smartSector06 .htit span {font-size:38px;}

#smartSector07 .htit p {font-size:20px;}
#smartSector07 .htit span {font-size:38px;}
#smartSector07 .asis .tit {font-size:22px;}

#smartSector07 .asis .asisSitemap .item p {font-size:15px;}
#smartSector07 .asis .asisSitemap .item ul li {font-size:13px;}
#smartSector07 .arrow img {width:20px;}
#smartSector07 .tobeTit {font-size:20px;}
#smartSector07 .tobe p {padding:50px 0 20px 0; font-size:22px;}
#smartSector07 .tobe ul {margin:22px 0 0 6.741%;}
#smartSector07 .tobe ul li {font-size:18px; padding:0 0 18px 0;}
#smartSector07 .tobe .sDiv {height:500px;}
#smartSector07 .tobe .sDiv .img img {width:70%;}
#smartSector07 .tobe .pDiv ul {margin:22px 6.741% 0 0;}
#smartSector07 .tobe .pDiv {height:500px; top:100px;}
#smartSector07 .tobe .pDiv .img img {width:80%;}
#smartSector07 .tobe .cDiv {top:135px;}
#smartSector07 .tobe .cDiv ul {margin:22px 0 0 0;}
#smartSector07 .tobe .cDiv p {padding:16px 0 20px 0;}

#smartSector08 .hstit p {font-size:20px;}
#smartSector08 .hstit span {font-size:38px;}

#smartSector09 .htit p {font-size:20px;}
#smartSector09 .htit span {font-size:38px;}

#smartSector10 .htit {padding:120px 0 0 0;}
#smartSector10 .htit p {font-size:20px;}
#smartSector10 .htit span {font-size:38px;}
#smartSector10 .innerW {height:850px;}

#smartSector11 .concept {font-size:60px; padding:300px 0 45px 0;}
#smartSector11 .htit span {font-size:38px;}

#smartSector12 .concept {font-size:60px; padding:175px 0 45px 0;}
#smartSector12 .htit {padding:0 0 70px 0;}
#smartSector12 .htit span {font-size:38px;}
#smartSector12 .conceptIcon {height:auto; padding:34px 0;}
#smartSector12 .conceptIcon ul {width:600px;}
#smartSector12 .conceptIcon ul li {padding:32px 0 0 0;}
#smartSector12 .conceptIcon ul li img {width:60px;}

#smartSector12 .model {height:420px;}
#smartSector12 .model .swiper-slide .imgArea img {margin:0 0 0 -300px; width:600px;}

#smartSector14 .footTxt {margin:64px 0 95px 21%; padding:14px 0 0 55px;}
#smartSector14 .sfdLogo {left:2%;}



}












/************** media query 1000px *************/
@media all and (max-width: 1000px){

#smartSector04 .contextbox .plus {width:12.5%; left:25.5%;}
#smartSector04 .contextbox .arrow {width:12.5%; right:25.5%;}

}













/************** media query 900px *************/
@media all and (max-width: 900px){

#smartSector02 .htit span {display:inline; line-height:2;}
#smartSector02 .sbtit .inf span {display:inline;}
#smartSector02 .sbtit .btn {margin:0;}
#smartSector02 .absection {position:relative; left:0; top:0; right:auto; width:auto; margin:50px 0 0 0;}
#smartSector02 .absection .img {position:relative; left:0; top:0; margin:0 0 50px 0;}
#smartSector02 .absection .count {position:absolute; left:0; top:0; width:100%; text-align:center; margin:150px 0 0 0;}

#smartSector03 {padding:0 0 100px 0;}
#smartSector03 .htit span {display:inline; line-height:2;}
#smartSector03 .motion {height:auto;}
#smartSector03 .motion .lsec {position:relative; left:0; top:0; margin:0 auto;}
#smartSector03 .motion .point {position:relative; left:0; top:0; margin:0 auto;}
#smartSector03 .motion .point .inner {height:auto;}
#smartSector03 .motion .point .inner p {padding:0 0 12px 0;}
#smartSector03 .motion .point .larrow {position:relative; left:50%; top:0; width:17px; height:60px; margin:20px 0 40px; background:url('../images/smart/bg_arrow_down.png') left top no-repeat; background-size:13px 60px;}
#smartSector03 .motion .point .rarrow {position:relative; left:50%; top:0; width:17px; height:60px; margin:40px 0 20px; background:url('../images/smart/bg_arrow_up.png') left top no-repeat; background-size:13px 60px;}
#smartSector03 .motion .rsec {position:relative; left:0; top:0; margin:0 auto;}

#smartSector04 .contextbox {height:auto;}
#smartSector04 .contextbox .cbox01 {position:relative; left:0; top:0; margin:0 auto;}
#smartSector04 .contextbox .plus {position:relative; left:0; top:0; width:230px; margin:20px auto;}
#smartSector04 .contextbox .cbox02 {position:relative; left:0; top:0; margin:0 auto;}
#smartSector04 .contextbox .arrow {position:relative; left:0; top:0; width:230px; height:60px; margin:20px auto; background:url('../images/smart/bg_arrow_down_section4.png') center top no-repeat; background-size:13px 60px;}
#smartSector04 .contextbox .cbox03 {position:relative; left:0; top:0; margin:0 auto;}

#smartSector04 .hotissue {height:auto;}
#smartSector04 .hotissue ul {margin:0; height:auto;}
#smartSector04 .hotissue ul li {float:none; width:auto; margin:0 0 20px 0;}
#smartSector04 .hotissue ul li .fbox {width:230px; height:230px;}
#smartSector04 .hotissue ul li .fbox p {line-height:230px;}
#smartSector04 .hotissue ul li .rbox {position:absolute; right:0; top:0; width:230px; height:230px; margin-top:0 !important;}
#smartSector04 .hotissue ul li .rbox p {line-height:230px;}
#smartSector04 .hotissue ul li .arrow {position:absolute; left:50%; top:50%; width:24px; height:17px; margin:-8px 0 0 -12px !important;; background:url('../images/smart/bg_smartsector04_arrow_right.png') center top no-repeat;}

#uxuiSection {height:480px;}
#uxuiSection img {position:absolute; left:50%; top:0; width:auto; height:480px; margin:0 0 0 -443px;}

#smartSector07 .asis .asisSitemap .item {width:25%; height:260px;}
#smartSector07 .asis .asisSitemap .item:last-child {border-right:1px #777 solid;}
#smartSector07 .asis .asisSitemap .item p {padding:30px 0 28px 0;}

#smartSector09 {height:800px;}
#smartSector09 .phoneAni {margin:0 -12% 0 0;}
#smartSector09 .phoneAni .phoneAniStep ul li img {width:70%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c009 img {width:90%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c003 {left:52%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c007 {left:23%; top:300px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c009 {left:16%; top:100px;}
#smartSector09 .phoneAni .pre01 img {width:70%;}
#smartSector09 .phoneAni .pre02 img {width:70%;}

#smartSector10 .innerW {height:700px;}
#smartSector13 .tf {width:100%;}


/**** main gate ****/
#mainGate {height:450px; background-size:auto 540px;}

#mainGate #count .real {margin:-58px 0 0 0;}
#mainGate #count .real span {font-size:70px; letter-spacing:5px;}
#mainGate #count .real p {font-size:36px; letter-spacing:5px;}
#mainGate #count .shadow {margin:-54px 0 0 0;}
#mainGate #count .shadow span {font-size:70px; letter-spacing:5px;}
#mainGate #count .shadow p {font-size:36px; letter-spacing:5px;}

#mainGate #leftSector .imgArea img {width:347px;}
#mainGate #rightSector .imgArea img {width:347px;}

#mainGate #styleTit {width:212px; margin-left:-98px;}
#mainGate #styleTit span {font-size:45px;}

#mainGate .txtArea {width:120px; height:120px; margin:-60px 0 0 -60px;}
#mainGate .txtArea p {margin:18px 0 0 0;}
#mainGate .txtArea p span {font-size:20px; margin:0 0 0 16px; padding:0 0 10px 0; letter-spacing:15px;}
#mainGate .txtArea p span.eng {left:12px; bottom:6px; letter-spacing:23px;}


#smartSector08 {height:1130px;}
.smartStyle {right:120px; top:230px;}
.smartStyle .innerWrap {width:500px;}
.smartStyle .img {width:500px;}
.smartStyle .img img {width:100%;}
.smartStyle .pos {width:500px; margin:0 0 0 -250px;}

.smartStyle .information .openInfo {text-align:center;}
.smartStyle .information .openInfo span {font-size:15px; padding:52px 0 0 0;}
.smartStyle .information > div .hideArea .inner {margin:20px 26px 22px;}
.smartStyle .information > div .hideArea .inner .ico {position:relative; left:0; top:0;}
.smartStyle .information > div .hideArea .inner .ico img {width:45px;}
.smartStyle .information > div .hideArea .inner .txtArea {margin:12px 0 0 0;}
.smartStyle .information > div .hideArea .inner .txtArea .sbtit span {font-size:18px;}
.smartStyle .information > div .hideArea .inner .txtArea .htit span {font-size:32px;}
.smartStyle .information > div .hideArea .inner .txtArea .txt span {display:inline;}


/* smart Boy quality */
.smartBoyQuality .pos .box01 {left:188px; top:232px;}
.smartBoyQuality .pos .box02 {left:292px; top:157px;}
.smartBoyQuality .pos .box03 {left:208px; top:310px;}
.smartBoyQuality .pos .box04 {left:250px; top:260px;}
.smartBoyQuality .pos .box05 {left:274px; top:344px;}

.smartBoyQuality .information .info01 {left:0; top:86px; width:250px;}
.smartBoyQuality .information .info01 a.openInfo {left:21px; top:24px; background-size:45px;}
.smartBoyQuality .information .info02 {right:-70px; top:50px; width:250px;}
.smartBoyQuality .information .info02 a.openInfo {left:21px; top:24px; background-size:45px;}
.smartBoyQuality .information .info03 {left:20px; top:400px; width:250px;}
.smartBoyQuality .information .info03 a.openInfo {left:21px; top:24px; background-size:45px;}
.smartBoyQuality .information .info04 {right:-80px; top:220px; width:250px;}
.smartBoyQuality .information .info04 a.openInfo {left:21px; top:24px; background-size:45px;}
.smartBoyQuality .information .info05 {right:-50px; top:400px; width:250px;}
.smartBoyQuality .information .info05 a.openInfo {left:21px; top:24px; background-size:45px;}

.smartBoyQuality .dragLine.d01 {top: 186.9px; left: 34.2126px; width: 181.4px; transform: rotate(36.9331deg);}
.smartBoyQuality .dragLine.d02 {top: 131.422px; left: 287.074px; width: 99.7046px; transform: rotate(135.406deg);}
.smartBoyQuality .dragLine.d03 {top: 383.419px; left: 47.2105px; width: 194.165px; transform: rotate(-41.2414deg);}
.smartBoyQuality .dragLine.d04 {top: 267.535px; left: 259.008px; width: 123.037px; transform: rotate(178.603deg);}
.smartBoyQuality .dragLine.d05 {top: 399.902px; left: 260.006px; width: 115.802px; transform: rotate(-126.573deg);}



}








/************** media query 767px *************/
@media all and (max-width: 767px){

#smartSector04 .htit .divide {display:inline; margin:0;}
#smartSector04 .htit .divide:nth-child(1) {display:block;}
#smartSector04 .htit .divide:nth-child(2) {display:block;}
#smartSector04 .htit .divide:nth-child(3) {display:block;}
#smartSector04 .htit .divide span {line-height:2;}

#smartSector04 .hotissue ul li .fbox {width:200px; height:200px;}
#smartSector04 .hotissue ul li .fbox p {line-height:200px;}
#smartSector04 .hotissue ul li .rbox {width:200px; height:200px;}
#smartSector04 .hotissue ul li .rbox p {line-height:200px;}

#smartSector07 .tobe p {font-size:17px; padding:40px 0 20px 0;}
#smartSector07 .tobe ul li {font-size:14px; padding:0 0 14px 0;}
#smartSector07 .tobe .sDiv {height:400px;}
#smartSector07 .tobe .pDiv {height:400px;}
#smartSector07 .tobe .cDiv {height:400px;}
#smartSector07 .tobe .cDiv p {padding:6px 0 20px 0;}


#smartSector10 .equip .mac {bottom:-90px;}
#smartSector10 .equip .ipad {bottom:-90px;}
#smartSector10 .equip .iphone {bottom:-90px}

#smartSector11 .colorList ul li {width:31.33%; margin:0 0 20px 2%;}

#smartSector14 .sfdLogo {position:relative; left:0; top:0; margin:40px 0 0 0; text-align:center;}
#smartSector14 .footTxt {width:auto; margin:40px 0 50px 0;}

}







/************** media query 680px *************/
@media all and (max-width: 680px){

/**** main gate ****/
#mainGate #styleTit {width:162px; margin-left:-74px;}
#mainGate #styleTit span {font-size:36px; letter-spacing:4px;}

}







/************** media query 640px *************/
@media all and (max-width: 640px){

.smartStyle {right:0;}


#smartSector09 {height:700px;}
#smartSector09 .phoneAni {margin:0 -15% 0 0;}
#smartSector09 .phoneAni .phoneAniStep ul li img {width:60%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c001 {left:-2.3%; bottom:-85px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c008 {left:33.5%;}
#smartSector09 .phoneAni .pre01 img {width:60%;}
#smartSector09 .phoneAni .pre02 img {width:60%;}

#smartSector10 .innerW {height:600px;}

#smartSector12 .conceptIcon ul {width:540px;}

#smartSector13 .tf .designTf {float:none; width:100%;}
#smartSector13 .tf .sfdTf {float:none; width:100%; margin:100px 0 0 0;}


}







/************** media query 540px *************/
@media all and (max-width: 540px){

/* project content */
.project .closed img {width:38px;}
.project .closed ul li .listProject .txtArea {width:60px; height:38px; padding:0 7px 0 45px; font-size:10px;}
.project .closed ul li .listProject .imgArea img {width:38px;}

#smartPorBox .innerW {margin:0 20px;}

#smartSector01 .smartFixdImg {height:462px;}
#smartSector01 .smartFixdImg .imgArea {margin:0 0 0 -409px;}
#smartSector01 .smartFixdImg .imgArea img {height:462px;}
#smartSector01 .smartFixdImg .txtArea {margin:74px 0 0 0;}
#smartSector01 .smartFixdImg .txtArea .htit p {font-size:8px; padding:0 0 10px 0;}
#smartSector01 .smartFixdImg .txtArea .htit .sbox {padding:0 0 35px 0; background-size:34px auto;}
#smartSector01 .smartFixdImg .txtArea .htit .sbox span {font-size:16px; padding:2px 0 0 0;}
#smartSector01 .smartFixdImg .txtArea .sbtit {padding:90px 0 0 0;}
#smartSector01 .smartFixdImg .txtArea .sbtit p {font-size:8px; padding:0 0 10px 0;}
#smartSector01 .smartFixdImg .txtArea .sbtit .sbox span {font-size:11px; padding:8px 0 0 0;}

#smartSector02 .htit {padding:76px 0 26px 0;}
#smartSector02 .htit p {font-size:9px; letter-spacing:3px; padding:0 0 10px 0;}
#smartSector02 .htit span {font-size:11px;}
#smartSector02 .htit span strong {font-size:11px;}

#smartSector02 .sbtit .client {font-size:10px; padding:0 0 7px 0;}
#smartSector02 .sbtit .day {font-size:10px; padding:0 0 7px 0;}
#smartSector02 .sbtit .link {padding:0 0 5px 0;}
#smartSector02 .sbtit .link a {font-size:10px;}
#smartSector02 .sbtit .inf {padding:0 0 20px 0;}
#smartSector02 .sbtit .inf span {font-size:10px;}
#smartSector02 .sbtit .btn a {width:136px; height:38px; line-height:40px; font-size:12px;}

#smartSector02 .absection .count {margin:50px 0 0 0;}
#smartSector02 .absection .count span {font-size:67px;}
#smartSector02 .absection .count p {font-size:20px; padding:8px 0 0 0;}
#smartSector02 .absection .img {margin:0 0 80px 0;}
#smartSector02 .absection .img img {width:160px;}

#smartSector02 .sns {padding:20px 0 40px 0;}
#smartSector02 .sns ul li {padding:0 12px 0 0;}
#smartSector02 .sns ul li p {font-size:14px; line-height:1.3;}
#smartSector02 .sns ul li img {height:18px;}
#smartSector02 .sns ul li .linkIcon {height:18px;}



#smartSector03 {padding:0 0 78px 0;}
#smartSector03 .htit {padding:75px 0 32px 0;}
#smartSector03 .htit p {font-size:10px; padding:0 0 13px 0;}
#smartSector03 .htit span {font-size:11px; line-height:1.8;}
#smartSector03 .motion .lsec {width:178px; height:178px; border-width:2px;}
#smartSector03 .motion .lsec p {font-size:11px; letter-spacing:6px; margin:0 0 0 -7px; padding:66px 0 13px 10px;}
#smartSector03 .motion .lsec span {font-size:22px;}
#smartSector03 .motion .point {width:182px;}
#smartSector03 .motion .point .larrow {background-size:9px auto; margin:10px 0 0 0;}
#smartSector03 .motion .point .inner {width:118px;}
#smartSector03 .motion .point .inner p {font-size:9px; letter-spacing:1.5px; padding:0 0 8px 0; text-align:center;}
#smartSector03 .motion .point .inner span {font-size:14px; padding:10px 0 0 0; text-align:center;}
#smartSector03 .motion .point .inner span.s01 {letter-spacing:1px;}
#smartSector03 .motion .point .rarrow {height:52px; background-size:9px auto; margin:20px 0 0 0;}
#smartSector03 .motion .rsec {width:178px; height:178px; border-width:2px;}
#smartSector03 .motion .rsec p {font-size:11px; letter-spacing:9.2px; padding:66px 0 13px 8px;}
#smartSector03 .motion .rsec span {font-size:22px; padding:10px 0 0 0; letter-spacing:0.5px;}

#smartSector04 .htit {padding:67px 0 0 0;}
#smartSector04 .htit .divide span {font-size:21px;}
#smartSector04 .htit .divide span strong {font-size:21px;}

#smartSector04 .abBackbg {display:none;}
#smartSector04 .abBackbg img {width:426px;}

#smartSector04 .sbtit {padding:84px 0 45px 0;}
#smartSector04 .sbtit p {font-size:10px; letter-spacing:3px; padding:0 0 11px 0;}
#smartSector04 .sbtit span {display:inline; font-size:11px; line-height:2;}

#smartSector04 .contextbox {margin:0 0 100px 0;}
#smartSector04 .contextbox .cbox01 {width:180px; height:180px;}
#smartSector04 .contextbox .cbox02 {width:180px; height:180px;}
#smartSector04 .contextbox .cbox03 {width:180px; height:180px;}
#smartSector04 .contextbox .cbox03 span.space {padding:5px 0 0 7px; letter-spacing:8px;}
#smartSector04 .contextbox p {font-size:9px; letter-spacing:4px; padding:48px 0 13px 0;}
#smartSector04 .contextbox span {font-size:18px;}

#smartSector04 .contextbox .plus {width:180px; height:30px; margin:10px auto; background-size:30px;}
#smartSector04 .contextbox .arrow {width:180px; height:37px; margin:10px auto; background-size:auto 37px;}

#smartSector04 .btit {padding:0 0 40px 0;}
#smartSector04 .btit p {font-size:10px; letter-spacing:3px; padding:0 0 13px 0;}
#smartSector04 .btit span {display:inline; font-size:11px; line-height:2;}

#smartSector04 .hotissue {margin:0 0 66px 0;}
#smartSector04 .hotissue ul li {margin:0 0 12px 0;}
#smartSector04 .hotissue ul li .fbox {width:100px; height:100px;}
#smartSector04 .hotissue ul li .fbox p {font-size:9px; line-height:102px;}
#smartSector04 .hotissue ul li .rbox {width:100px; height:100px;}
#smartSector04 .hotissue ul li .rbox p {font-size:9px; line-height:102px;}

#smartSector05 .htit {padding:75px 0 47px 0;}
#smartSector05 .htit p {font-size:10px; letter-spacing:4px; padding:0 0 4px 0;}
#smartSector05 .htit span {font-size:11px;}

#smartSector05 .aniBlock {padding:0 0 88px 0;}
#smartSector05 .aniBlock .list {height:60px;}
#smartSector05 .aniBlock .list > div { top:-29px !important;
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */
transform: scale(0.5, 0.5);}
#smartSector05 .aniBlock .list p {font-size:9px; padding:18px 0;}
#smartSector05 .aniBlock .list p span {font-size:9px; padding:0 8px 0 0;}

#smartSector05 .uxTitle {margin:0 0 -6px 0;}
#smartSector05 .uxTitle p {font-size:35px;}

#uxuiSection {height:200px;}
#uxuiSection img {height:200px; margin:0 0 0 -185px;}

#smartSector06 .htit {padding:80px 0 24px 0;}
#smartSector06 .htit p {font-size:11px; letter-spacing:3px; padding:0 0 10px 0;}
#smartSector06 .htit span {font-size:22px;}

#smartSector07 .htit {padding:48px 0 22px 0;}
#smartSector07 .htit p {font-size:11px; letter-spacing:3px; padding:0 0 10px 0;}
#smartSector07 .htit span {font-size:22px;}

#smartSector07 .asis .tit {font-size:12px; padding:0 0 7px 0;}
#smartSector07 .asis .asisSitemap .item {width:50%; height:140px;}
#smartSector07 .asis .asisSitemap .item p {font-size:9px; padding:26px 0 17px 0;}
#smartSector07 .asis .asisSitemap .item ul li {font-size:8px; padding:0 0 7px 0;}

#smartSector07 .arrow {margin:14px 0 0 0;}
#smartSector07 .arrow img {width:14px;}

#smartSector07 .tobeTit {font-size:12px; padding:0 0 10px 0; margin:-10px 0 0 0;}
#smartSector07 .tobe .sDiv {width:64%; height:356px;}
#smartSector07 .tobe .sDiv .img {left:0;}
#smartSector07 .tobe .sDiv .img img {width:53%;}
#smartSector07 .tobe .pDiv {top:150px; width:64%; height:356px;}
#smartSector07 .tobe .pDiv .img {left:20%; text-align:right;}
#smartSector07 .tobe .cDiv p {padding:32px 0 20px 0;}
#smartSector07 .tobe p {font-size:12px; padding:16px 0; background-size:30px 1px; letter-spacing:-0.5px;}
#smartSector07 .tobe ul li {font-size:11px; padding:0 0 8px 0;}

#smartSector08 {height:700px;}
#smartSector08 .hstit {padding:110px 0 0 0;}
#smartSector08 .hstit p {font-size:11px; letter-spacing:3px; padding:0 0 10px 0;}
#smartSector08 .hstit span {font-size:22px;}

.smartStyle {position:relative; left:0; top:0; right:auto; margin:0 0 0 -10px;}

#smartSector09 {height:446px;}
#smartSector09 .htit {padding:50px 0 0 0;}
#smartSector09 .htit p {font-size:11px; letter-spacing:3px; padding:0 0 10px 0;}
#smartSector09 .htit span {font-size:22px;}
#smartSector09 .phoneAni .phoneAniStep ul li img {width:50%;}
#smartSector09 .phoneAni .pre01 {left:0; bottom:0;}
#smartSector09 .phoneAni .pre01 img {width:50%;}
#smartSector09 .phoneAni .pre02 {top:0; left:48.345%;}
#smartSector09 .phoneAni .pre02 img {width:50%;}

#smartSector09 .phoneAni .phoneAniStep ul li.c001 {bottom:-36px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c002 {left:100%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c003 {top:-100px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c004 {left:54%; bottom:265px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c004 img {width:80%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c005 {right:-56px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c006 {top:80px; left:10%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c007 {left:60%; top:210px;}
#smartSector09 .phoneAni .phoneAniStep ul li.c007 img {width:70%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c008 {left:40%;}
#smartSector09 .phoneAni .phoneAniStep ul li.c008 img {width:70%;}

#smartSector10 .innerW {height:372px;}
#smartSector10 .htit {padding:77px 0 0 0;}
#smartSector10 .htit p {font-size:11px; letter-spacing:3px; padding:0 0 10px 0;}
#smartSector10 .htit span {font-size:22px;}

#smartSector10 .equip .mac {bottom:-44px;}
#smartSector10 .equip .ipad {bottom:-44px;}
#smartSector10 .equip .iphone {bottom:-44px;}

#smartSector11 .concept {font-size:32px; padding:155px 0 30px 0; letter-spacing:3px;}
#smartSector11 .htit {padding:0 0 50px 0;}
#smartSector11 .htit span {font-size:22px;}

#smartSector12 .concept {font-size:32px; padding:85px 0 30px 0; letter-spacing:3px;}
#smartSector12 .htit {padding:0 0 50px 0;}
#smartSector12 .htit span {font-size:22px;}

#smartSector12 .conceptIcon {padding:12px 0 0 0;}
#smartSector12 .conceptIcon ul {width:auto;}
#smartSector12 .conceptIcon ul li {padding:20px 0 0 0;}
#smartSector12 .conceptIcon ul li img {width:30px;}

#smartSector12 .model .swiper-slide .imgArea img {width:300px; margin:0 0 0 -150px;}

#smartSector13 {padding:50px 0 0 0;}
#smartSector13 .htit {font-size:22px; padding:0 0 14px 0;}
#smartSector13 .sbtit {padding:0 0 22px 0;}	
#smartSector13 .sbtit p {font-size:9px;}
#smartSector13 .sbtit span {font-size:10px; padding:0;}
#smartSector13 .sbtit span strong {font-size:10px;}

#smartSector13 .tf {margin:0 auto 70px;}
#smartSector13 .tf .tfTit {font-size:10px;}
#smartSector13 .tf .sfdTf {margin:30px 0 0 0;}
#smartSector13 .tf ul li {font-size:10px; margin:10px 0 0 0;}
#smartSector13 .tf ul li p {font-size:9px; padding:0;}

#smartSector14 .sfdLogo {margin:30px 0 0 0;}
#smartSector14 .sfdLogo img {width:80px;}

#smartSector14 .footTxt {background-size:15px 12px; margin:14px 0 22px 0; padding:14px 0 0 22px;}
#smartSector14 .footTxt .insfoot {background-size:15px 12px; padding:0 18px 0 0;}
#smartSector14 .footTxt .insfoot p {font-size:10px; line-height:2;}
#smartSector14 .footTxt .insfoot span {font-size:10px; line-height:2;}




/**** main gate ****/
#mainGate {height:100%;}
#mainGate #styleTit {z-index:5;}

#mainGate #count .real {margin:-41px 0 0 0;}
#mainGate #count .real span {font-size:60px; letter-spacing:2px;}
#mainGate #count .real p {font-size:32px; letter-spacing:2px;}
#mainGate #count .shadow {margin:-38px 0 0 0;}
#mainGate #count .shadow span {font-size:60px; letter-spacing:2px;}
#mainGate #count .shadow p {font-size:32px; letter-spacing:2px;}

#mainGate #leftSector {overflow:hidden;}
#mainGate #leftSector .imgArea {position:absolute; left:0; bottom:-100%; width:100%; text-align:center;}
#mainGate #leftSector .imgArea img {display:inline-block; width:260px; margin:-20px 0 0 0;}
#mainGate #rightSector {overflow:hidden;}
#mainGate #rightSector .imgArea {position:absolute; left:0; bottom:-100%; width:100%; text-align:center;}
#mainGate #rightSector .imgArea img {display:inline-block; width:260px; margin:-20px 0 0 0;}

#mainGate .txtArea {width:100px; height:100px; margin:-50px 0 0 -50px;}
#mainGate .txtArea p {margin:16px 0 0 0;}
#mainGate .txtArea p span {font-size:16px; margin:0 0 0 14px; padding:0 0 10px 0; letter-spacing:13px;}
#mainGate .txtArea p span.eng {left:10px; bottom:6px; letter-spacing:19px;}


.smartStyle .innerWrap {width:320px;}
.smartStyle .img {width:320px;}
.smartStyle .pos {width:320px; margin:0 0 0 -160px;}
.smartStyle .pos .element {width:10px; height:10px;}

.smartStyle .information .openInfo span {font-size:13px; padding:40px 0 0 0;}
.smartStyle .information > div .hideArea {position:absolute; left:8%; top:110px;}
.smartStyle .information > div .hideArea .inner {margin:18px 20px;}
.smartStyle .information > div .hideArea .inner .ico img {width:32px;}
.smartStyle .information > div .hideArea .inner .txtArea {margin:8px 0 0 0;}
.smartStyle .information > div .hideArea .inner .txtArea .sbtit span {display:inline; font-size:15px;}
.smartStyle .information > div .hideArea .inner .txtArea .htit span {display:inline; font-size:22px;}
.smartStyle .information > div .hideArea .inner .txtArea .txt span {font-size:14px;}


/* smart Boy quality */
.smartBoyQuality .pos .box01 {left:122px; top:152px;}
.smartBoyQuality .pos .box02 {left:189px; top:103px;}
.smartBoyQuality .pos .box03 {left:138px; top:197px;}
.smartBoyQuality .pos .box04 {left:162px; top:170px;}
.smartBoyQuality .pos .box05 {left:174px; top:220px;}

.smartBoyQuality .information .info01 {position:relative; left:0; top:0; width:100%;}
.smartBoyQuality .information .info01 a.openInfo {left:20px; top:50px; background-size:32px;}
.smartBoyQuality .information .info02 {position:relative; left:0; top:0; right:auto; width:100%;}
.smartBoyQuality .information .info02 a.openInfo {left:220px; top:80px; background-size:32px;}
.smartBoyQuality .information .info03 {position:relative; left:0; top:0; right:auto; width:100%;}
.smartBoyQuality .information .info03 a.openInfo {left:0; top:220px; background-size:32px;}
.smartBoyQuality .information .info04 {position:relative; left:0; top:0; right:auto; width:100%;}
.smartBoyQuality .information .info04 a.openInfo {left:220px; top:200px; background-size:32px;}
.smartBoyQuality .information .info05 {position:relative; left:0; top:0; right:auto; width:100%;}
.smartBoyQuality .information .info05 a.openInfo {left:240px; top:300px; background-size:32px;}

.smartBoyQuality .dragLine.d01 {top: 112.596px; left: 32.6724px; width: 114.853px; transform: rotate(51.25584deg);}
.smartBoyQuality .dragLine.d02 {top: 101.886px; left: 193.379px; width: 50.004px; transform: rotate(167.665deg);}
.smartBoyQuality .dragLine.d03 {top: 217.307px; left: 35.702px; width: 109.2309px; transform: rotate(163.286deg);}
.smartBoyQuality .dragLine.d04 {top: 191.169px; left: 160.7094px; width: 84.935px; transform: rotate(26.5204deg);}
.smartBoyQuality .dragLine.d05 {top: 266.917px; left: 166.743px; width: 111.347px; transform: rotate(225.453deg);}

}





/************** media query 480px *************/
@media all and (max-width: 480px){

#mainGate #count .real {margin:-40px 0 0 0;}
#mainGate #count .real span {font-size:45px; letter-spacing:1px;}
#mainGate #count .real p {font-size:25px; letter-spacing:1px;}
#mainGate #count .shadow {margin:-38px 0 0 0;}
#mainGate #count .shadow span {font-size:45px; letter-spacing:1px;}
#mainGate #count .shadow p {font-size:25px; letter-spacing:1px;}

#mainGate .txtArea {width:74px; height:74px; margin:-37px 0 0 -37px;}
#mainGate .txtArea p {margin:11px 0 0 0;}
#mainGate .txtArea p span {font-size:14px; margin:0 0 0 8px; padding:0 0 5px 0; letter-spacing:8px;}
#mainGate .txtArea p span.eng {left:8px; bottom:3px; letter-spacing:14px;}

}