@charset "euc-kr";

.mainCon {overflow:hidden; position:relative;}
.mainCon * {font-family:'Noto Sans KR', sans-serif;}

/* floating banner */
.mainCon .floating {position:absolute; z-index:70; right:73px; top:112px;}
.mainCon .floating > a {display:block;}
.mainCon .floating button {overflow:hidden; position:absolute; right:-11px; top:-11px; border:0; width:24px; height:24px; color:transparent; text-indent:-999px; background:url("/skin/skin224/images/btn_floating_close.png") no-repeat 0 0;}

/* bottome search */
.btmSearch {overflow:hidden; width:1180px; margin:0 auto 150px auto;}
.btmSearch h2 {margin-bottom:32px; font-size:34px; font-weight:500; color:#222; line-height:34px; text-align:center;}
.btmSearch .srch {position:relative;}
.btmSearch input {width:1050px; height:80px; padding:0 90px 0 40px; border:0; border-bottom:2px solid #4d4d4d; font-size:34px; line-height:80px; color:#222;}
.btmSearch input:-webkit-input-placeholder {color:#ccc;}
.btmSearch input:-ms-input-placeholder {color:#ccc;}
.btmSearch input::placeholder {color:#ccc;}
.btmSearch button {position:absolute; right:22px; bottom:3px; width:80px; height:78px; border:0; color:transparent; background:#fff url("/skin/skin224/images/btn_btmSrch.png") no-repeat 50% 50%;}

/* T biz service intro */
.mainTbizSv {position:relative; width:1180px; margin:70px auto 110px auto;}
.mainTbizSv h2 {margin-bottom:30px; font-size:30px; line-height:30px; color:#222; font-weight:500;}
.mainTbizSv .svCategory {position:absolute; right:0; top:10px;}
.mainTbizSv .svCategory li {float:left; position:relative; margin-left:20px;}
.mainTbizSv .svCategory li + li:before {content:""; position:absolute; top:3px; left:-10px; width:1px; height:12px; background-color:#e6e6e6;}
.mainTbizSv .svCategory a {font-size:15px; font-weight:300; color:#999;}
.mainTbizSv .svCategory li.ui-tabs-active a {color:#ef4b49; font-weight:400;}

.mainTbizSv .svList {display:none; overflow:hidden;}
.mainTbizSv .svList li {float:left; margin-right:-1px;}
.mainTbizSv .svList a {display:block; position:relative; width:273px; height:227px; padding:45px 10px; border:1px solid #e6e6e6; font-size:16px; color:#666; text-align:center; text-decoration:none;}
.mainTbizSv .svList em {display:inline-block; margin-bottom:15px; font-size:16px; font-weight:300; color:#111; font-style:normal;}
.mainTbizSv .svList strong {display:block; margin-bottom:35px; text-align:center; font-size:24px; line-height:30px; color:#222;}
.mainTbizSv .svList .txt {display:block; overflow:hidden; height:40px; margin:27px 0 20px 0; text-align:center; font-size:16px; font-weight:300; line-height:24px;}
.mainTbizSv .svList .txtL {display:none; overflow:hidden; padding:0 20px; text-align:center; font-size:16px; font-weight:300; line-height:24px; background-color:#fff; word-break:keep-all;}
.mainTbizSv .svList .goto {position:absolute; bottom:40px; left:50%; width:98px; height:36px; margin-left:-49px; border:1px solid #ccc; color:#777; font-size:16px; font-weight:300; line-height:35px;}
.mainTbizSv .svList a:before {content:""; position:absolute; left:-1px; top:-1px; width:0; height:0; border-top:4px solid transparent; border-right:4px solid transparent;}
.mainTbizSv .svList a:after {content:""; position:absolute; right:-1px; bottom:-1px; width:0; height:0; border-bottom:4px solid transparent; border-left:4px solid transparent;}
.mainTbizSv .svList a:hover,
.mainTbizSv .svList a:focus {z-index:1;}
.mainTbizSv .svList a:hover .goto,
.mainTbizSv .svList a:focus .goto {width:100px; height:38px; line-height:37px; color:#fff; border:0; background-color:#ef4b49;}
.mainTbizSv .svList a:hover img,
.mainTbizSv .svList a:focus img {display:none;}
.mainTbizSv .svList a:hover .txt,
.mainTbizSv .svList a:focus .txt {display:none;}
.mainTbizSv .svList a:hover .txtL,
.mainTbizSv .svList a:focus .txtL {display:block;}
.mainTbizSv .svList a:hover:before,
.mainTbizSv .svList a:focus:before {border-color:#ef4b49; width:291px; height:100%; transition:width .4s, height .4s .4s;}
.mainTbizSv .svList a:hover:after,
.mainTbizSv .svList a:focus:after {border-color:#ef4b49; width:291px; height:100%; transition:width .4s, height .4s .4s;}

/* recommend solution */
.mainRecoSol {position:relative; margin-bottom:120px;}
.mainRecoSol h2 {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0);}
.mainRecoSol .slider .item {float:left; height:640px; text-align:center; background:url("/skin/skin224/images/bg_smileSlider1.jpg") no-repeat 50% 0;}
.mainRecoSol .slider .item2 {background-image:url("/skin/skin224/images/bg_smileSlider2.jpg");}
.mainRecoSol .slider h3 {height:140px; padding-top:50px; color:#fff; font-size:24px; font-weight:300; line-height:52px;}
.mainRecoSol .slider h3 em {display:block; font-style:normal; font-size:38px; font-weight:500;}
.mainRecoSol .slider ul {width:1180px; margin:0 auto;}
.mainRecoSol .slider li {float:left; width:380px; margin-left:20px; text-align:left;}
.mainRecoSol .slider li:nth-child(odd) {margin-top:40px;}
.mainRecoSol .slider li:first-child {margin-left:0;}
.mainRecoSol .slider li a {display:block; text-decoration:none; transition:transform .2s;}
.mainRecoSol .slider li a:hover {transform:translateY(20px); transition:transform .4s;}
.mainRecoSol .slider li:nth-child(odd) a:hover {transform:translateY(-20px);}
.mainRecoSol .slider li strong {display:block; margin:10px 0 12px 0; padding-top:7px; border-top:2px solid #fff; color:#fff; font-size:18px; font-weight:500; line-height:20px;}
.mainRecoSol .slider li strong:after {content:""; display:inline-block; width:18px; height:18px; margin:2px 0 0 10px; vertical-align:top; background:url("/skin/skin224/images/bul_c.png") no-repeat 0 -20px; transition:all .4s;}
.mainRecoSol .slider li a:hover strong:after {margin-left:30px; transform:rotate(360deg);}
.mainRecoSol .slider li span {display:block; padding-right:20px; font-size:14px; line-height:22px; color:#f2f2f2; font-weight:100; letter-spacing:-0.5px; word-break:keep-all;}

.mainRecoSol .bx-pager {position:absolute; z-index:60; left:50%; top:30px; margin-left:530px; text-align:right;}
.mainRecoSol .bx-pager .bx-pager-item {display:inline; margin-left:10px;}
.mainRecoSol .bx-pager .bx-pager-item a {display:inline-block; width:10px; height:10px; font-size:0; line-height:0; color:transparent; vertical-align:top; background-color:#fff; border-radius:50%;}
.mainRecoSol .bx-pager .bx-pager-item a.active {background-color:#e22f26;}
.mainRecoSol .bx-auto {position:absolute; z-index:60; left:50%; top:30px; width:6px; height:10px; margin-left:580px;}
.mainRecoSol .bx-auto a {position:absolute; left:0; top:0; width:10px; height:10px; font-size:0; line-height:0; color:transparent; background:url("/skin/skin224/images/btn_pause_w.png") no-repeat 0 0;}
.mainRecoSol .bx-auto a.bx-start {background-position:-10px 0;}
.mainRecoSol .bx-dir a {display:block; overflow:hidden; position:absolute; z-index:60; left:50%; top:320px; width:37px; height:70px; margin-left:-660px; text-indent:-999px; background:url("/skin/skin224/images/arrow_smileSlider.png") no-repeat 0 0;}
.mainRecoSol .bx-dir a.bx-next {background-position:-37px 0; margin-left:623px;}

/* plus solution */
.mainPlusSol {position:relative;}
.mainPlusSol .wrapper {overflow:hidden; width:1180px; margin:0 auto;}
.mainPlusSol h2 {overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0);}
.mainPlusSol .slider {width:1180px; margin:0 auto;}
.mainPlusSol .slider .item {float:left;}
.mainPlusSol .slider h3 {margin-bottom:30px; color:#111; font-size:34px; font-weight:500; line-height:36px;}
.mainPlusSol .myPlusUse {float:left; width:360px; height:400px; padding:40px 50px; background:url("/skin/skin224/images/bg_plusSol1.jpg") no-repeat 0 0;}
.mainPlusSol .item2 .myPlusUse {background-image:url("/skin/skin224/images/bg_plusSol2.jpg");}
.mainPlusSol .myPlusUse strong {display:block; margin-bottom:25px; font-size:18px; color:#fff; font-weight:400;}
.mainPlusSol .myPlusUse span {display:block; font-size:24px; color:#fff; font-weight:100; line-height:34px;}
.mainPlusSol .slider ul {float:left; width:719px;}
.mainPlusSol .slider li {float:left; width:358px; height:238px; border:1px solid #e6e6e6; line-height:25px; }
.mainPlusSol .slider li.myPlus1 {width:717px; height:239px; margin-bottom:-1px;}
.mainPlusSol .slider li.myPlus2 {margin-right:-1px;}

.mainPlusSol .slider li a {display:block; width:100%; height:100%; padding:30px 40px; text-decoration:none; box-sizing:border-box; background:url("/skin/skin224/images/bg_plusSol1_1.png") no-repeat 465px 32px;}
.mainPlusSol .slider li.myPlus1 a {padding-top:40px;}
.mainPlusSol .slider .item1 .myPlus2 a {background:url("/skin/skin224/images/bg_plusSol1_2.png") no-repeat 274px 157px;}
.mainPlusSol .slider .item1 .myPlus3 a {background:url("/skin/skin224/images/bg_plusSol1_3.png") no-repeat 284px 158px;}
.mainPlusSol .slider .item2 .myPlus1 a {background:url("/skin/skin224/images/bg_plusSol2_1.png") no-repeat 440px 34px;}
.mainPlusSol .slider .item2 .myPlus2 a {background:url("/skin/skin224/images/bg_plusSol2_2.png") no-repeat 280px 158px;}
.mainPlusSol .slider .item2 .myPlus3 a {background:url("/skin/skin224/images/bg_plusSol2_3.png") no-repeat 253px 150px;}

.mainPlusSol .slider .active li.myPlus1 a {animation:conToLeft .7s .4s backwards;}
.mainPlusSol .slider .active li.myPlus2 a {animation:conToTop .7s .6s backwards;}
.mainPlusSol .slider .active li.myPlus3 a {animation:conToTop .7s .8s backwards;}

.mainPlusSol .slider li em {display:block; height:33px; font-size:26px; color:#2d74c1; font-style:normal;}
.mainPlusSol .slider li strong {display:inline-block; position:relative; margin-bottom:10px; font-size:26px; color:#111; line-height:32px;}
.mainPlusSol .slider li strong:after {content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:transparent; transition:all .5s;}
.mainPlusSol .slider li a:hover strong:after {width:100%; background-color:#111;}
.mainPlusSol .slider li span {display:block; font-size:16px; font-weight:300; color:#999;}

.mainPlusSol .bx-pager {position:absolute; z-index:60; left:50%; top:35px; margin-left:530px; text-align:right;}
.mainPlusSol .bx-pager .bx-pager-item {display:inline; margin-left:10px;}
.mainPlusSol .bx-pager .bx-pager-item a {display:inline-block; width:10px; height:10px; font-size:0; line-height:0; color:transparent; vertical-align:top; background-color:#b2b2b2; border-radius:50%;}
.mainPlusSol .bx-pager .bx-pager-item a.active {background-color:#e22f26;}
.mainPlusSol .bx-auto {position:absolute; z-index:60; left:50%; top:35px; width:6px; height:10px; margin-left:580px;}
.mainPlusSol .bx-auto a {position:absolute; left:0; top:0; width:10px; height:10px; font-size:0; line-height:0; color:transparent; background:url("/skin/skin224/images/btn_pause.png") no-repeat 0 0;}
.mainPlusSol .bx-auto a.bx-start {background-position:-10px 0;}
.mainPlusSol .bx-dir a {display:block; overflow:hidden; position:absolute; z-index:60; left:50%; top:320px; width:37px; height:70px; margin-left:-660px; text-indent:-999px; background:url("/skin/skin224/images/arrow_smileSlider.png") no-repeat 0 0;}
.mainPlusSol .bx-dir a.bx-next {background-position:-37px 0; margin-left:623px;}

/* T biz service manual */
.mainTbizManual {position:relative; height:530px; margin-top:180px; margin-bottom:120px; background:linear-gradient(to right, #fff 50%, #f7f7f7 50%);}
.mainTbizManual:after {content:""; position:absolute; z-index:-1; right:0; top:0; width:50%; height:100%; background-color:#f7f7f7;}
.mainTbizManual .wrapper {position:relative; width:1180px; margin:0 auto;}
.mainTbizManual h2 {position:absolute; left:0; top:-65px; color:#111; font-size:34px; font-weight:500; line-height:40px;}
.mainTbizManual dl {margin-left:-40px; padding-top:32px;}
.mainTbizManual dt {position:relative; z-index:10; width:550px;}
.mainTbizManual dt a {display:table-cell; width:340px; height:70px; padding:25px 100px 25px 110px; font-size:22px; font-weight:400; line-height:30px; text-decoration:none; vertical-align:middle; word-break:keep-all; *display:block;}
.mainTbizManual dt span {position:absolute; top:50%; left:42px; width:36px; height:52px; margin-top:-26px; font-size:70px; font-weight:300; color:transparent; vertical-align:top; background:url("/skin/skin224/images/num.png") no-repeat 0 -60px;}
.mainTbizManual dt .num2 {background-position:-40px -60px;}
.mainTbizManual dt .num3 {background-position:-80px -60px;}
.mainTbizManual dt .num4 {background-position:-120px -60px;}
.mainTbizManual dt .on span {background-position:0 0;}
.mainTbizManual dt .on .num2 {background-position:-40px 0;}
.mainTbizManual dt .on .num3 {background-position:-80px 0;}
.mainTbizManual dt .on .num4 {background-position:-120px 0;}
.mainTbizManual dt a.on {color:#fff; background-color:#ef4b49; box-shadow:7px 7px 15px #d7d7d7;}
.mainTbizManual dd {display:none; position:absolute; right:0; top:0; width:600px; min-height:460px; padding:70px 0 0 120px; background-color:#f7f7f7;}
.mainTbizManual dd.on {display:block;}
.mainTbizManual dd > a {display:block; position:relative; margin-left:50px; padding:36px 0 38px 78px; border-top:1px solid #e6e6e6; color:#666; font-size:16px; font-weight:300; text-decoration:none; white-space:nowrap;}
.mainTbizManual dd > a:first-child {border:0;}
.mainTbizManual dd img {position:absolute; top:30px; left:10px;}
.mainTbizManual dd strong {display:block; margin-bottom:20px; color:#222; font-size:20px; font-weight:500; line-height:24px; white-space:nowrap;}
.mainTbizManual dd strong:after {content:""; display:inline-block; width:18px; height:18px; margin:3px 0 0 10px; vertical-align:top; background:url("/skin/skin224/images/bul_c.png") no-repeat 0 0; transition:all .4s;}
.mainTbizManual dd a:hover strong:after {margin-left:30px; transform:rotate(360deg);}

.mainTbizManual dd.on > a {margin-left:0; animation:txtToLeft .5s backwards;}
.mainTbizManual dd.on > a:nth-of-type(1) {animation-delay:.2s;}
.mainTbizManual dd.on > a:nth-of-type(2) {animation-delay:.4s;}
.mainTbizManual dd.on > a:nth-of-type(3) {animation-delay:.6s;}

/* T biz studio */
.mainStudio {position:relative; width:1180px; margin:0 auto; margin-bottom:120px;}
.mainStudio h2 {margin-bottom:28px; font-size:34px; font-weight:500; line-height:36px; color:#111;}
.mainStudio .stdCategory {position:absolute; right:0; top:10px;}
.mainStudio .stdCategory li {float:left; margin-left:30px;}
.mainStudio .stdCategory li a {display:block; padding-left:35px; color:#999; line-height:24px; font-size:14px; font-weight:300; color:#999; text-decoration:none; background:url("/skin/skin224/images/check.png") no-repeat 0 50%;}
.mainStudio .stdCategory li a.on {color:#111; font-weight:400; background-image:url("/skin/skin224/images/check_on.png");}
.mainStudio .slider li {float:left; margin-right:5px; background-color:#f7f7f7;}
.mainStudio .slider a {display:block; position:relative; height:380px; color:#111; font-size:14px; line-height:20px; font-weight:100; text-decoration:none;}
.mainStudio .slider em {display:inline-block; margin:0 8px 0 20px; padding:0 6px; font-size:12px; line-height:20px; color:#fff; font-style:normal; vertical-align:middle; background-color:#614ec2; letter-spacing:0;}
.mainStudio .slider .stdVideo em {background-color:#ed6355;}
.mainStudio .slider .stdInsight em {background-color:#fda94f;}
.mainStudio .slider .img {display:block; overflow:hidden; width:390px; height:232px; margin-bottom:20px;}
.mainStudio .slider img {width:100%; height:100%; transition:transform .4s;}
.mainStudio .slider a:hover img {transform:scale(1.1);}
.mainStudio .slider strong {display:inline-block; overflow:hidden; width:265px; font-size:18px; line-height:22px; font-weight:500; color:#222; vertical-align:middle; white-space:nowrap; text-overflow:ellipsis;}
.mainStudio .slider span.txt {display:block; height:44px; margin:16px 20px 0 20px; color:#999; overflow:hidden; letter-spacing:-0.5px; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; *display:block;}
.mainStudio .slider span.more {position:absolute; bottom:15px; right:20px; font-size:14px; font-weight:300; color:#222; text-decoration:underline;}
.mainStudio .slider span.more:after {content:""; display:inline-block; width:5px; height:10px; margin-left:3px; vertical-align:middle; background:url("/cs/images/combine/main/arrow_more.png") no-repeat right 50%;}
.mainStudio .slider .stdVideo a:after {content:""; position:absolute; top:0; left:0; width:390px; height:232px; background:rgba(0,0,0,.6) url("/skin/skin224/images/icon_vod.png") no-repeat 50% 50%;}

.mainStudio .bx-wrapper {max-width:none !important; margin:0 !important;}
.mainStudio .bx-viewport {overflow:visible !important;}
.mainStudio .bx-controls-direction a {display:block; overflow:hidden; position:absolute; left:-55px; top:155px; width:50px; height:50px; text-indent:-999px; background:#fff url("/skin/skin224/images/arrow_trendSlider.png") no-repeat 19px 50%; opacity:0.9;}
.mainStudio .bx-controls-direction a.bx-next {left:auto; right:-55px; background-position:-55px 50%;}


/* visual common */
.mainCon .mainVisual {overflow:hidden; position:relative;}
.mainCon .mainVisual .bx-controls {position:absolute; z-index:60; bottom:24px; left:0; width:100%; text-align:center; vertical-align:middle;}
.mainCon .mainVisual .bx-pager {display:inline;}
.mainCon .mainVisual .bx-pager .bx-pager-item {display:inline; width:90px; margin-right:10px;}
.mainCon .mainVisual .bx-pager .bx-pager-item a {display:inline-block; position:relative; width:90px; height:3px; font-size:0; line-height:0; color:transparent; vertical-align:middle; background-color:#d9d9d9;}
.mainCon .mainVisual .bx-pager .bx-pager-item a:after {content:""; position:absolute; top:0; left:0; width:0; height:3px; background-color:transparent;}
.mainCon .mainVisual .bx-pager .bx-pager-item a.active:after {width:90px; background-color:#e22f26; animation:bxpager 6s linear;}
.mainCon .mainVisual .bx-controls-auto {display:inline;}
.mainCon .mainVisual .bx-controls-auto-item {display:inline;}
.mainCon .mainVisual .bx-controls-auto a {display:inline-block; width:30px; height:30px; font-size:0; line-height:0; color:transparent; vertical-align:middle; background:url("/skin/skin224/images/btn_visual_play.png") no-repeat 0 0;}
.mainCon .mainVisual .bx-controls-auto a.bx-start {background-position:-30px 0;}
.mainCon .mainVisual .bx-visual-dir {position:absolute; z-index:60; left:50%; bottom:0; width:141px; margin-left:448px; text-align:center; background-color:#fcfcfc;}
.mainCon .mainVisual .bx-visual-dir a {float:left; width:70px; height:35px; padding-top:35px; font-size:12px; color:#666; text-decoration:none; background:url("/skin/skin224/images/btn_visual_prev.png") no-repeat 50% 24px;}
.mainCon .mainVisual .bx-visual-dir a.bx-next {border-left:1px solid #f6f6f6; background:url("/skin/skin224/images/btn_visual_next.png") no-repeat 50% 24px;}
.mainCon .mainVisual .bx-visual-dir a:hover,
.mainCon .mainVisual .bx-visual-dir a:focus {color:#222; font-weight:bold; background-position:50% -35px;}

.mainVisual .item {height:520px;}
.mainVisual .item > div {overflow:hidden; position:relative; height:100%; width:100%; background:#f6f6f6;}
.mainVisual .bg {position:absolute; top:0; left:50%; width:1920px; height:520px; margin-left:-960px; background-repeat:no-repeat; background-position:50% 0;}
.mainVisual .word {position:relative; z-index:2; width:1180px; height:520px; margin:0 auto; animation:conOpacity 2s;}
.mainVisual .word a.link {display:inline-block; position:absolute; top:290px; left:0; height:35px; padding:0 20px; font-size:18px; line-height:33px; color:#222; border:1px solid #222; border-radius:20px; text-decoration:none;}
.mainVisual .active .word a.link {animation:blink 3s 3s;}
.mainVisual .word a.link:hover,
.mainVisual .word a.link:focus {color:#fff; border-color:#222; background-color:#222;}
.mainVisual .word > span {overflow:hidden; white-space:nowrap;}
.mainVisual .word .t1 {display:block; position:absolute; top:100px; left:0; font-size:20px; line-height:26px; color:#666;}
.mainVisual .word .t2 {display:block; position:absolute; top:147px; left:0; width:50%; height:56px; font-size:58px; line-height:60px; letter-spacing:0; color:transparent;}
.mainVisual .active .word .t2 {animation:txtToTop 1.3s .6s backwards;}
.mainVisual .word .t2_2 {display:inline-block; width:190px; vertical-align:top;}
.mainVisual .active .word .t2_2 {animation:txtSlideIn 3.5s;}
.mainVisual .word .t3 {display:block; position:absolute; top:230px; left:0; font-size:18px; line-height:22px; color:#666; font-weight:300;}
.mainVisual .active .word .t3 {animation:txtToTop 1.2s 2.8s backwards;}

/* visual shutter */
.mainVisual .shutter {display:block; position:absolute; top:-45%; left:0; width:100%; height:200%; opacity:0.8;}
.mainVisual .active .shutter {transform:rotate(45deg);}
.mainVisual .shutter:before,
.mainVisual .shutter:after {content:""; position:absolute; left:0; width:100%; height:100%; background-color:#fff;}
.mainVisual .shutter:before {bottom:150%; animation:shutterT 2s;}
.mainVisual .shutter:after {top:150%; animation:shutterB 2s;}
.mainVisual .item:nth-child(even).active .shutter {transform:rotate(-45deg);}

/* visual bg */
.mainVisual .mv_cloudNw .bg {background-image:url("/skin/skin224/images/bg_cloudNw.jpg");}
.mainVisual .mv_5gxPlat .bg {background-image:url("/skin/skin224/images/bg_5gxPlat.jpg");}
.mainVisual .mv_5gxCloud .bg {background-image:url("/skin/skin224/images/bg_5gxCloud.jpg");}
.mainVisual .mv_5gxPublic .bg {background-image:url("/skin/skin224/images/bg_5gxPublic.jpg");}
.mainVisual .mv_passDriver .bg {background-image:url("/skin/skin224/images/bg_passDriver.jpg");}
.mainVisual .mv_happyChg .bg {background-image:url("/skin/skin224/images/bg_happyChange.jpg");}

/* visual item */
/* visual cloud network */
.mainVisual .mv_cloudNw .word .t2 {width:415px; letter-spacing:1px; background:url("/skin/skin224/images/cloudNw_t2.png") no-repeat 0 0;}
.mainVisual .mv_cloudNw .objs {overflow:visible; position:absolute; bottom:0; left:590px; width:730px; height:502px; background:url("/skin/skin224/images/cloudNw_hand.png") no-repeat 0 bottom;}
.mainVisual .mv_cloudNw .objs .shadow {position:absolute; top:253px; left:134px; width:192px; height:111px; background:url("/skin/skin224/images/cloudNw_shadow.png") no-repeat 0 0;}
.mainVisual .mv_cloudNw .objs .cloud {position:absolute; top:5px; left:107px; width:272px; height:332px; background:url("/skin/skin224/images/cloudNw_cloud.png") no-repeat 0 0;}
.mainVisual .active .mv_cloudNw .word .t3 {animation-delay:1.5s;}
.mainVisual .active .mv_cloudNw .word a.link {animation-delay:1.5s;}
.mainVisual .active .mv_cloudNw .objs {animation:cloudNwHand 1s .5s linear backwards;}
.mainVisual .active .mv_cloudNw .objs .shadow {animation:cloudNwShadow 2s 1.7s backwards;}
.mainVisual .active .mv_cloudNw .objs .cloud {animation:cloudNw 2s 1.7s backwards;}
@keyframes cloudNwHand {0% {transform:translateX(365px) translateY(250px); opacity:0;} 100% {transform:translateX(0) translateY(0); opacity:1;}}
@keyframes cloudNwShadow {0% {transform:scale(1.3) rotate(0); opacity:0;} 50% {transform:scale(0.5) rotate(.001deg); opacity:1;} 100% {transform:scale(1) rotate(0);}}
@keyframes cloudNw {0% {transform:translateY(150px) scale(0) rotate(0); opacity:0;} 50% {transform:translateY(-100px) scale(1.5) rotate(.001deg); opacity:1;} 100% {transform:translateY(0) scale(1) rotate(0);}}

/* visual mv_5gxPlat */
.mainVisual .mv_5gxPlat .word .t2 {width:336px; letter-spacing:1px; background:url("/skin/skin224/images/5gxPlat_t2.png") no-repeat 0 0;}
.mainVisual .mv_5gxPlat .objs .person {position:absolute; bottom:128px; left:563px; width:179px; height:224px; background:url("/skin/skin224/images/5gxPlat_person.png") no-repeat 0 0;}
.mainVisual .mv_5gxPlat .objs .phone {position:absolute; bottom:69px; left:426px; width:445px; height:102px; background:url("/skin/skin224/images/5gxPlat_phone.png") no-repeat 0 0;}
.mainVisual .active .mv_5gxPlat .word .t3 {animation-delay:1.5s;}
.mainVisual .active .mv_5gxPlat .word a.link {animation-delay:1.5s;}
.mainVisual .active .mv_5gxPlat .objs .phone {animation:plat 1s .2s linear backwards;}
.mainVisual .active .mv_5gxPlat .objs .person {animation:platPer 1.7s 1.4s backwards;}

@keyframes plat {
	0% {transform:translateX(-150px) translateY(0); opacity:0;}
	100% {transform:translateX(0) translateY(0); opacity:1;}}

@keyframes platPer {
	0% {transform:translateX(-15px) translateY(30px); opacity:0;}
	50% {transform:translateX(0) translateY(-30px); opacity:1;}
	100% {transform:translateX(0) translateY(0); opacity:1;}}
	
@keyframes corporPhone {
	0% {transform:translateX(-150px) translateY(100px); opacity:0;}
	100% {transform:translateX(0) translateY(0); opacity:1;}}
	
@keyframes corporflower {
		0% {transform:translateY(20px) scale(0) rotate(0); opacity:0;} 
		50% {transform:translateY(-20px) scale(1.2) rotate(.001deg); opacity:1;} 
		100% {transform:translateY(0) scale(1) rotate(0);}}

/* visual 5gx cloud */
.mainVisual .mv_5gxCloud .word .t1 {color:#e5e5e5;}
.mainVisual .mv_5gxCloud .word .t2 {width:448px; letter-spacing:-3px; background:url("/skin/skin224/images/5gxCloud_t2.png") no-repeat 0 0;}
.mainVisual .mv_5gxCloud .word .t2 span {display:inline-block; width:119px; height:100%; margin-left:4px; background:url("/skin/skin224/images/5gxCloud_t2_2.png") no-repeat 0 1px;}
.mainVisual .mv_5gxCloud .word .t3 {color:#fff;}
.mainVisual .mv_5gxCloud .word a.link {top:312px; color:#fff; border-color:#fff;}
.mainVisual .mv_5gxCloud .word a.link:hover,
.mainVisual .mv_5gxCloud .word a.link:focus {color:#222; border-color:#fff; background-color:#fff;}
.mainVisual .mv_5gxCloud .objs {position:absolute; top:135px; left:50%; width:315px; height:168px; margin-left:256px; background:url("/skin/skin224/images/5gxCloud_cloud.png") no-repeat 0 0;}

.mainVisual .active .mv_5gxCloud .word .t3 {animation-delay:1.5s;}
.mainVisual .active .mv_5gxCloud .word a.link {animation-delay:1.5s;}
.mainVisual .active .mv_5gxCloud .word .t2 span {animation:rotateY 1.5s 1.7s linear;}
.mainVisual .active .mv_5gxCloud .objs {animation:bounce 3s infinite;}

/* visual 5gx public edge */
.mainVisual .mv_5gxPublic .word .t2 {width:454px; height:70px; letter-spacing:1px; background:url("/skin/skin224/images/5gxPublic_t2.png") no-repeat 0 0;}
.mainVisual .mv_5gxPublic .word .t2:before {content:""; overflow:hidden; position:absolute; left:0; top:0; width:0; height:100%; background:url("/skin/skin224/images/5gxPublic_t2_over.png") no-repeat 0 0;}
.mainVisual .mv_5gxPublic .objs .hand {position:absolute; top:96px; left:50%; width:654px; height:424px; margin-left:-12px; background:url("/skin/skin224/images/5gxPublic_hand.png") no-repeat 0 0;}
.mainVisual .mv_5gxPublic .objs .screen {position:absolute; top:114px; left:50%; width:389px; height:285px; margin-left:76px; background:url("/skin/skin224/images/5gxPublic_screen.png") no-repeat 0 0;}
.mainVisual .mv_5gxPublic .objs .live {position:absolute; top:136px; left:50%; width:102px; height:35px; margin-left:101px; background:url("/skin/skin224/images/5gxPublic_live.png") no-repeat 0 0;}

.mainVisual .active .mv_5gxPublic .word .t2:before {animation:txtImgFill 5s .5s infinite;}
.mainVisual .active .mv_5gxPublic .word .t3 {animation-delay:1.5s;}
.mainVisual .active .mv_5gxPublic .word a.link {animation-delay:1.5s;}
.mainVisual .active .mv_5gxPublic .objs .hand {animation:publicHand 1s .5s backwards;}
.mainVisual .active .mv_5gxPublic .objs .screen {animation:conOpacity 1.5s 1.7s backwards;}
.mainVisual .active .mv_5gxPublic .objs .live {animation:publicLive 1s 3s backwards;}
@keyframes publicHand {0% {transform:translateY(250px);} 100% {transform:translateY(0);}}
@keyframes publicLive { 0% {transform:translateX(-70px); opacity:0;} 100% {transform:translateX(0); opacity:1;} }

/* visual pass mobile driver license */
.mainVisual .mv_passDriver .word .t2 {width:730px; letter-spacing:-5px; background:url("/skin/skin224/images/passDriver_t2.png") no-repeat 0 0;}
.mainVisual .mv_passDriver .objs .hand {position:absolute; bottom:0; left:50%; margin-left:157px; width:323px; height:401px; background:url("/skin/skin224/images/passDriver_hand.png") no-repeat 0 0; opacity:1;}
.mainVisual .mv_passDriver .objs .page {position:absolute; top:60px; left:50%; margin-left:313px; width:218px; height:363px; background:url("/skin/skin224/images/passDriver_page.png") no-repeat 0 0;}
.mainVisual .active .mv_passDriver .word .t3 {animation-delay:1.5s;}
.mainVisual .active .mv_passDriver .word a.link {animation-delay:1.5s;}
.mainVisual .active .mv_passDriver .objs .ph2 {animation:passObjIn .5s 1.7s backwards;}
.mainVisual .active .mv_passDriver .objs .page {animation:conToLeft .5s 1.2s backwards;}

@keyframes passObjIn { 0% {opacity:0;}  100% {opacity:1;} }

/* visual mv_happyChg */
.mainVisual .mv_happyChg .word .t1,.mainVisual .mv_happyChg .word .t3 {color:#fff;}
.mainVisual .mv_happyChg .word .t2 {width:530px; height:60px; background:url("/cs/images/combine/main/visual/happyChange_t1.png") no-repeat 0 3px;}
.mainVisual .mv_happyChg .word .t2 span {display:inline-block; width:296px; height:57px; background:url("/cs/images/combine/main/visual/happyChange_t3.png") no-repeat 0 0px;}
.mainVisual .mv_happyChg .word a.link {top:312px; color:#fff; border-color:#fff;}
.mainVisual .mv_happyChg .word a.link:hover,
.mainVisual .mv_happyChg .word a.link:focus {color:#222; border-color:#fff; background-color:#fff;}
.mainVisual .mv_happyChg .person1 {position:absolute; bottom:0px; left:530px; width:270px; height:332px;z-index: 2;  background:url("/cs/images/combine/main/visual/happyChange_person1.png") no-repeat 0 0;}
.mainVisual .mv_happyChg .person2 {position:absolute; bottom:0px; left:670px; width:386px; height:334px; z-index: 3; background:url("/cs/images/combine/main/visual/happyChange_person2.png") no-repeat 0 0;}
.mainVisual .mv_happyChg .person3 {position:absolute; bottom:-100px; right:72px; width:212px; height:382px; z-index: 2; background:url("/cs/images/combine/main/visual/happyChange_person3.png") no-repeat 0 0;}
.mainVisual .mv_happyChg .hart {position:absolute; top:50px; right:61px; width:622px; height:734px;background:url("/cs/images/combine/main/visual/happyChange_hart1.png") no-repeat 0 0;}
.mainVisual .mv_happyChg .bilding{position:absolute; bottom:0; left:33px; width:1135px; height:115px;background:url("/cs/images/combine/main/visual//happyChange_bilding1.png") no-repeat 0 0;}
.mainVisual .mv_happyChg .challenge {position:absolute; top:83px; right:178px; width:210px; height:96px; background:url("/cs/images/combine/main/visual/happyChange_t2.png") no-repeat 0 0;}

.mainVisual .active .mv_happyChg .word .t3 {animation-delay:1.5s;}
.mainVisual .active .mv_happyChg .word a.link {animation-delay:1.5s;}
.mainVisual .active .mv_happyChg .word .t2 span {animation:happyScale 1.9s 2.6s linear;}
.mainVisual .active .mv_happyChg .bilding {animation:happyBilding 2s;}
.mainVisual .active .mv_happyChg .hart {animation:happyhart 3s;}
.mainVisual .active .mv_happyChg .person1 {animation:happyperson 2.3s 1.5s backwards;}
.mainVisual .active .mv_happyChg .person2 {animation:happyperson 2.3s 1.6s backwards;}
.mainVisual .active .mv_happyChg .person3 {animation:happyperson 2.3s 1.7s backwards;}
.mainVisual .active .mv_happyChg .challenge {animation:happyChlng 2s 1.5s backwards;}

@keyframes happyperson {0% { transform:translateY(80px) scale(.5); opacity: 0;}100% { transform:translateY(0) scale(1); opacity: 1;}}
@keyframes happyhart{0% {transform:translateY(0) scale(.9);opacity: 0;}  35% {transform:translateY(-25px) scale(1);opacity: 1;} 70% {transform:translateY(-25px) scale(.9.3);opacity: 0;}   100% {transform:translateY(0) scale(1);opacity: 1;} }
@keyframes happyChlng {0% {opacity: 0;}100% {transform:rotateX(-360deg); opacity: 1;} }
@keyframes happyBilding {0% {opacity:0;transform: scale(.5); } 100% {opacity:1;transform: scale(1);} }
@keyframes happyScale {0% {transform:rotateZ(0deg) scale(1) rotateX(0deg);} 25% {transform:rotateZ(.001deg) scale(.9) rotateX(-90deg);} 50% {transform:rotateZ(0deg) scale(1) rotateX(0deg);} 75% {transform:rotateZ(.001deg) scale(.9) rotateX(-90deg);}100% {transform:rotateZ(0deg) scale(1) rotateX(0deg);}}


/* keyframes */
@keyframes shutterT { 0% {bottom:50%;}  100% {bottom:150%;} }
@keyframes shutterB { 0% {top:50%;}  100% {top:150%;} }
@keyframes bxpager { 0% {width:0;} 100% {width:90px;} }
@keyframes conOpacity { 0% {opacity:0;} 20% {opacity:0;} 100% {opacity:1;} }
@keyframes txtToLeft { 0% {margin-left:50px; opacity:0;}  100% {margin-left:0; opacity:1;} }
@keyframes txtToTop { 0% {margin-top:20px; opacity:0;}  100% {margin-top:0; opacity:1;} }
@keyframes conToTop { 0% {transform:translateY(150px); opacity:0;}  100% {transform:translateY(0); opacity:1;} }
@keyframes conToBtm { 0% {transform:translateY(-150px); opacity:0;}  100% {transform:translateY(0); opacity:1;} }
@keyframes conToLeft { 0% {transform:translateX(200px); opacity:0;}  100% {transform:translateX(0); opacity:1;} }
@keyframes conToRight { 0% {transform:translateX(-200px); opacity:0;} 100% {transform:translateX(0); opacity:1;} }
@keyframes txtSlideIn { 0% {opacity:0; max-width:0px;}  55% {opacity:0; max-width:0px;}  100% {opacity:1; max-width:350px;} }
@keyframes txtImgFill { 0% {width:0;}  30% {width:100%; transform:rotate(.001deg);}  60% {width:0;} }
@keyframes blink { 0% {opacity:1;}  50% {opacity:1;}  60% {opacity:.2;}  70% {opacity:1;}  100% {opacity:1;} }
@keyframes wifiIn  { 0% {opacity:0;}  25% {opacity:1;}  50% {opacity:1;}  75% {opacity:1;}  100% {opacity:1;} }
@keyframes wifiMid { 0% {opacity:0;}  25% {opacity:0;}  50% {opacity:1;}  75% {opacity:1;}  100% {opacity:1;} }
@keyframes wifiOut { 0% {opacity:0;}  25% {opacity:0;}  50% {opacity:0;}  75% {opacity:1;}  100% {opacity:1;} }
@keyframes bounce { 0% {transform:translateY(0);}  50% {transform:translateY(-10px);}  100% {transform:translateY(0);} }
@keyframes heart { 0% {transform:scaleX(1) scaleY(1);}  50% {transform:scaleX(1.13) scaleY(1.13) rotate(.001deg);}  100% {transform:scaleX(1) scaleY(1) rotate(.001deg);} }
@keyframes zoomIn { 100% {transform: scale(1.1) rotate(.001deg);} }
@keyframes expand { 0% {transform:scale(0); opaicty:0;}  100% {transform: scale(1) rotate(.001deg); opaicty:1;} }
@keyframes rotateR { 100% {transform:rotateZ(.001deg) rotate(360deg);} }
@keyframes rotateL { 100% {transform:rotateZ(.001deg) rotate(-360deg);} }
@keyframes rotateY { 100% {transform:rotateZ(.001deg) rotateY(360deg);} }
@keyframes icoShow { 0% {opacity:0; top:50%; left:50%; margin:-41px 0 0 -41px;}  100% {opaicty:1;} }
@keyframes dropping { 0% {transform:translateY(-3000px);}  100% {transform:translateY(0);} }
@keyframes hang { 0% {transform:translateX(-30px) translateY(-3000px) rotate(-45deg);}  90% {transform:translateX(-30px) translateY(-50px) rotate(-45deg);}  100% {transform:translateX(0) translateY(0) rotate(0);} }