@charset "utf-8";

/**
 * Filename: content_web.css
 * Description: layout, popup, payment, Iot
 **/

/* ==========================================================================
   layout styles
   ========================================================================== */

#web-content {position:relative;}

/* header */
#header {position:absolute; top:0; left:0; z-index:9999; box-sizing:border-box; padding:30px 23px 0; width:100%; min-width:1280px;}
	#header .logo {float:left; width:95px; height:16px; background:url("../img/web/common/logo.png") no-repeat; background-position:0 0; text-indent:-9999px;}
	#header .logo.purple {background-position:0 -25px;}
	#header .nav {float:right; font-size:14px; font-family:'robotolight';}
	#header .nav a {position:relative; margin-right:30px; color:#fff;}
	#header .nav a.payment {margin-right:48px;}
	#header .nav a:before {content:""; position:absolute; top:3px; left:-21px; width:13px; height:14px; background:url("../img/web/common/ico_nav.png") no-repeat;}
	#header .nav a.payment:before {background-position:0 0;}
	#header .nav a.iot:before {background-position:-14px 0;}
	#header .nav a.payment.gray,
	#header .nav a.iot.gray {color:#666;}
	#header .nav a.payment.gray:before {background-position:0 -46px;}
	#header .nav a.iot.gray:before {background-position:-14px -46px;}
	#header .nav a.payment:hover,
	#header .nav a.payment.active,
	#header .nav a.iot:hover, 
	#header .nav a.iot.active {color:#ff6600;}
	#header .nav a.payment:hover:before,
	#header .nav a.payment.active:before {background-position:0 -23px;}
	#header .nav a.iot:hover:before,
	#header .nav a.iot.active:before {background-position:-14px -23px;}
	#header .nav a.about-view {display:inline-block; margin-right:0; width:30px; height:14px; background:url("../img/web/common/ico_nav.png") no-repeat; background-position:-42px 0; text-indent:-9999px;}  
	#header .nav a.about-view:before {width:0;}
	#header .nav a.about-view.gray {background-position:-42px -46px;}
	#header .nav a.about-view:hover,
	#header .nav a.about-view:active {background-position:-42px -23px;}

/* footer */
.footer {position:absolute; bottom:0; left:0; box-sizing:border-box; padding:0 10px 0 23px; width:100%; height:41px; background-color:rgba(0,0,0,0.5); transform:translate3d(0, 0, 0);}
.footer:after {content:""; display:block; clear:both;}
	.footer .logo {float:left; margin:16px 13px 0 0; width:57px; height:9px; background:url("../img/web/common/logo.png") no-repeat 0 -50px; text-indent:-9999px;}
	.footer .copyright {float:left; margin-top:16px;}
	.footer .family-site {position:relative; float:right; width:150px; font-size:11px; font-family:'robotolight';}
	.footer .family-site .btn-family {display:block; position:relative; margin:8px 0 0; padding-left:7px; width:150px; height:24px; color:#999; text-align:left;}
	.footer .family-site .btn-family:after {content:""; position:absolute; top:0; right:0; width:24px; height:24px; background:url("../img/web/common/ico_arr.png") no-repeat; background-position:-13px 0;}
	.footer .family-site .btn-family:hover:after {background-position:-13px -24px;}
	.footer .family-site ul {display:none; position:absolute; top:-94px; left:0; box-sizing:border-box; padding:2px 0 0 7px; width:150px; height:87px; border-radius:6px; background-color:#1d1d21;}
	.footer .family-site ul:after {content:""; position:absolute; bottom:-6px; left:50%; margin-left:-7px; width:14px; height:7px; background:url("../img/web/common/ico_arr.png") no-repeat; background-position:0 -58px;}
	.footer .family-site li a {color:#ccc; line-height:1.9;}
	.footer .family-site li a:hover,
	.footer .family-site li a:active {color:#ff6600;}

/* nav */
#nav {position:fixed; top:50%; right:25px; z-index:9999; transform: translateY(-50%);}
#nav li {margin-bottom:5px; font-size:0; line-height:0; cursor:pointer;}
#nav li a {position:relative; display:block; width:16px; height:16px;}
#nav li a span {display:block; position:absolute; top:6px; left:5px; border-radius:100%; border:solid #767676; border-width:2.5px;}
#nav li.over a span {border:solid #b34800; border-width:2.5px;}
#nav li.active a span {top:0; left:0; width:12px; height:12px; border:solid #ff6633; border-width:2px;}

/* about nbreds */
.about {display:block; position:fixed; top:0; right:-227px; z-index:9999; padding:34px 0 0 30px; box-sizing:border-box; width:227px; height:100%; background-color:rgba(0,0,0,0.9);}
	.about .about-title:before {content:""; position:absolute; top:1px; left:0; width:13px; height:13px; background:url("../img/web/common/ico_nav.png") no-repeat; background-position:-28px 0;}
	.about dl {position:relative; margin-top:30px; width:175px;}
	.about dl:after {content:""; display:inline-block; margin-top:26px; width:86px; border-bottom:1px solid #9d9d9d;}
	.about dt {margin-bottom:14px; color:#fff; font-size:13px; font-family:'robotolight';}
	.about dd {color:#999; line-height:1.4;}
	.about dd.not{display:none;}
	.about dd a {display:block; position:relative; color:#fff; font-size:11px;}
	.about dd a:after {content:""; position:absolute; top:0; right:0; width:13px; height:13px; background:url("../img/web/common/ico_arr.png") no-repeat; background-position:0 0;}
	.about dd a:hover,
	.about dd a:active {color:#ff6600;}
	.about dd a:hover:after,
	.about dd a:active:after {background-position:0 -13px;}
	.about dl.contact:after {border:0;}
	.about dl.contact dt {font-family:'Godo';}
	.about dl.contact dd {position:relative; margin-bottom:3px; padding-left:20px; color:#999; line-height:1.4;}
	.about dl.contact dd:before {content:""; position:absolute; top:1px; left:0; width:13px; height:13px; background:url("../img/web/common/ico_contact.png") no-repeat;}
	.about dl.contact dd.address {margin-bottom:10px; padding-left:0;}
	.about dl.contact dd.address:before {background:none;}
	.about dl.contact dd.phone:before {background-position:-1px 0;}
	.about dl.contact dd.fax:before {background-position:-1px -23px;}
	.about dl.contact dd.email a {color:#999; text-decoration:underline;}
	.about dl.contact dd.email:before {top:2px; height:10px; background-position:-1px -46px;}
	.about dl.contact dd.email a:after {background:none;}
	.about dd.mar-b20 {margin-bottom:16px;}
	.about dd.mar-b2 {margin-bottom:2px;}
	.about .about-close {display:block; position:absolute; top:28px; right:21px; width:24px; height:24px; background:url("../img/web/common/btn_close.png") no-repeat; background-position:0 0; text-indent:-9999px; transform:translate3d(0, 0, 0);}
	.about .about-close:hover {background-position:0 -24px;}

/* section */
.section,
.slide {position:relative; height:100%; min-width:1280px; min-height:800px;}

/* ==========================================================================
   popup styles
   ========================================================================== */

.popup {padding:20px;}
	.popup .popup-title {margin-bottom:20px; color:#666; font-size:16px;}
	.popup .personal {margin-bottom:26px; color:#999; line-height:1.4;}
	.popup .personal:last-child {margin-bottom:0;}
	.popup .personal dt {margin-bottom:3px; color:#666;}
	.popup .personal dd {padding-left:20px; text-indent:-11px; color:#999; line-height:1.8;}

/* ==========================================================================
   content common styles
   ========================================================================== */

/* text */
.stitle {margin-top:50px; color:#ff6600; font-size:14px; opacity:0;}
.remark {position:absolute; top:14%; left:19%; z-index:10; transform:translate3d(0, 0, 0);}
	.remark dt {margin-top:50px; font-size:40px; line-height:1.25; letter-spacing:-1px; opacity:0;}
	.remark dd {margin-top:50px; color:#999; font-size:16px; line-height:1.4; opacity:0;}
	.remark.white dt {color:#ccc;}
	.remark.gray dt {color:#999;}

/* contactus */
.contactus {min-height:471px; background-color:#3b363b;}
.contactus .footer {background-color:rgba(0,0,0,1);}

.contactus .content {margin:-28px auto 0; width:940px;}
.contactus .content:after {content:""; display:block; clear:both;}
	.contactus .content .contact {float:left; width:240px;}
	.contactus .content .contact dt {margin-bottom:17px; color:#fff; font-size:16px;}
	.contactus .content .contact dd {position:relative; margin-bottom:3px; padding-left:20px; color:#999; line-height:1.4;}
	.contactus .content .contact dd:before {content:""; position:absolute; top:1px; left:0; width:13px; height:13px; background:url("../img/web/common/ico_contact.png") no-repeat;}
	.contactus .content .contact dd.address:before {background:none;}
	.contactus .content .contact dd.phone:before {background-position:-1px -66px;}
	.contactus .content .contact dd.fax:before {background-position:-1px -89px;}
	.contactus .content .contact dd.email a {color:#999; text-decoration:underline;}
	.contactus .content .contact dd.email:before {top:2px; height:10px; background-position:-1px -112px;}

	.contactus .content .project {float:right; width:700px;}
	.contactus .content .project .project-title {margin-bottom:17px; color:#fff; font-size:16px;}
	.contactus .content .project .project-text {overflow:hidden; margin-bottom:19px; padding-right:4px;}
	.contactus .content .project .project-text span {float:left; color:#999; line-height:1.4;}
	.contactus .content .project .project-text a {display:none; position:relative; float:right; margin-top:14px; padding:0 12px 0 20px; color:#999; line-height:1.6; text-decoration:underline;}
	.contactus .content .project .project-text a:before {content:""; position:absolute; top:0; left:0; width:15px; height:16px; background:url("../img/web/common/ico_contact.png") no-repeat; background-position:0 -132px;}
	.contactus .content .project .project-text a:after {content:""; position:absolute; top:6px; right:0; width:4px; height:7px;  background:url("../img/web/common/ico_arr.png") no-repeat; background-position:-3px -75px;}

	.contactus .content .project .project-form .form-top {margin-bottom:10px; width:100%;}
	.contactus .content .project .project-form .form-top:after {content:""; display:block; clear:both;}
	.contactus .content .project .project-form .sbHolder {position:relative; float:left; box-sizing:border-box; width:225px; height:34px; border-radius:2px; border:1px solid #e7e7e1; background-color:#fff; font-weight:normal; text-align:left;}
	.contactus .content .project .project-form .sbHolder .sbSelector {display:block; overflow:hidden; padding:11px 10px 10px; height:32px; color:#666; line-height:1;}
	.contactus .content .project .project-form .sbHolder .sbToggle{position:absolute; top:12px; right:10px; width:16px; height:8px; background:url("../img/web/common/ico_arr.png") no-repeat; background-position:-20px -75px;}
	.contactus .content .project .project-form .sbHolder .sbOptions {position: absolute; left:-1px; z-index:10; overflow-y: auto; width:100%; border:1px solid #e1e1e1; border-top:0 none; background-color:#fff;}
	.contactus .content .project .project-form .sbHolder .sbOptions a {display:block; padding:0 9px; color:#666; font-weight:normal; text-align:left; line-height:1.8;}
	.contactus .content .project .project-form .sbHolder .sbOptions a:hover,
	.contactus .content .project .project-form .sbHolder .sbOptions a:active,
	.contactus .content .project .project-form .sbHolder .sbOptions a.sbFocus {color:#ff6600;}
	.contactus .content .project .project-form .form-top input {float:left; margin-left:10px; padding:0 10px; box-sizing:border-box; height:34px; border-radius:2px; border:1px solid #e7e7e1; background-color:#fff;}
	.contactus .content .project .project-form .comment {display:block; box-sizing:border-box; padding:10px; width:100%; height:182px; border-radius:2px; border:1px solid #e7e7e1; background-color:#fff; line-height:1.4;}

	.contactus .content .project .btn-area {margin-top:10px; text-align:right;}
	.contactus .content .project .btn-area .check {display:inline-block; margin-top:5px;}
	.contactus .content .project .btn-area .check a {color:#999; text-decoration:underline;}
	.contactus .content .project .btn-area input[type="checkbox"] {display: none;}
	.contactus .content .project .btn-area input[type="checkbox"] + span {display:inline-block; position:relative; width:21px; height:22px; line-height:2;}
	.contactus .content .project .btn-area input[type="checkbox"] + span:before {content:""; position:absolute; top:0; left:0; width:21px; height:22px; border-radius:2px; background-color:#fff;}
	.contactus .content .project .btn-area input[type="checkbox"]:checked + span:before {content:"\2714"; font-size:20px; line-height:1.2;}
	.contactus .content .project .btn-area input[type="checkbox"] + span + small {margin:5px 0 0 10px; color:#999;}

	.contactus .content .project .btn-area .btn-submit {display:inline-block; box-sizing:border-box; margin-left:16px; padding:0 10px; min-width:140px; height:34px; border-radius:2px; background-color:#ff6600; text-align:center; color:#fff; font-size:16px; vertical-align:top; line-height:1;}
	.contactus .content .project .btn-area .btn-submit span {display:block; position:relative;}

/* ==========================================================================
   initial content common styles
   ========================================================================== */

/* text */
.initial .stitle {margin-top:0; opacity:1;}
.initial .remark dt {margin-top:6px; opacity:1;}
.initial .remark dd {margin-top:12px; opacity:1;}

/* ==========================================================================
   payment styles
   ========================================================================== */

/* main section */
.main .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:url("../img/web/main/bg_video.png") repeat; opacity:0.6; transform:translate3d(0, 0, 0);}
.main .video {position:absolute; top:0; left:0; z-index:-1; width:100%;}
.main .content {position:absolute; top:50%; left:50%; margin:-87px 0 0 -309px; width:619px; height:175px; text-align:center; transform:translate3d(0, 0, 0);}
	.main .content .main-remark {position:absolute; top:173px; width:100%; color:#ccc; font-size:36px; line-height:1.2; opacity:0; transform:translate3d(0, 0, 0);}
	.main .content .main-remark .top {padding-top:13px;}
	.main .content .main-remark .top .point {display:inline-block; position:relative; color:#ff6600;}
	.main .content .main-remark .top .point:before {content:""; position:absolute; top:-8px; left:40%; width:5px; height:5px; border-radius:100%; background-color:#ff6600;}
	.main .content .bg-line {position:absolute; top:117px; width:100%; height:13px; background:url("../img/web/main/bg_main_line.png") no-repeat; opacity:0; transform:translate3d(0, 0, 0);}
	.main .content .company {position:absolute; top:173px; width:100%; overflow:hidden; opacity:0; transform:translate3d(0, 0, 0);}
	.main .content .company li {float:left; margin-right:15px;}
	.main .content .company li:last-child {margin-right:0;}
.main .scroll {position:absolute; bottom:74px; left:0; width:100%; text-align:center; transform:translate3d(0, 0, 0);} 

/* payment1 section */
.payment1 {background:url("../img/web/payment/bg_pattern_black.png") repeat;}
.payment1 .visual {position:absolute; bottom:0; left:50%; margin:0 0 0 -640px; width:1280px; height:100%; transform:translate3d(0, 0, 0);}
	.payment1 .visual .visual-img1 {position:absolute; bottom:0; left:0; opacity:0; transform:translate3d(0, 0, 0);}
	.payment1 .visual .visual-img2 {position:absolute; bottom:0; left:0; width:1280px; opacity:0; transform:translate3d(0, 0, 0);}

/* payment2 section */
.payment2 {background:url("../img/web/payment/bg_pattern_black.png") repeat;}
.payment2 .visual {position:absolute; top:50%; left:50%; margin:0 0 0 -501px; width:1002px; height:334px; transform:translate3d(0, 0, 0);}
	.payment2 .visual .visual-img1 {position:absolute; top:0; left:0; transform:translate3d(0, 0, 0); opacity:0;}
	.payment2 .visual .visual-img2 {position:absolute; top:35px; left:31px; transform:translate3d(0, 0, 0); opacity:0;}
	.payment2 .visual .visual-img3 {position:absolute; top:35px; left:262px; transform:translate3d(0, 0, 0); opacity:0;}
	.payment2 .visual .visual-img4 {position:absolute; top:35px; left:493px; transform:translate3d(0, 0, 0); opacity:0;}
	.payment2 .visual .visual-img5 {position:absolute; top:35px; left:721px; transform:translate3d(0, 0, 0); opacity:0;}

/* payment3 slide section */
.payment3 {background:url("../img/web/payment/bg_scbs.png") no-repeat; background-size:100% 100%;}

.payment3 .counting {position:absolute; top:50%; left:50%; overflow:hidden; box-sizing:border-box; margin-left:-450px; width:900px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment3 .counting dl {float:left; margin-right:10px; width:210px;}
	.payment3 .counting dl:last-child {margin-right:0;}
	.payment3 .counting dt {margin-bottom:19px; height:51px;}
	.payment3 .counting dd {color:#ccc; font-size:14px; line-height:1.4;}

	.payment3 .counting .num {display:block; overflow:hidden; float:left; width:42px; height:51px;}
	.payment3 .counting .num.one {margin-left:-11px;}
	.payment3 .counting .num.zero {margin:0 2px;}
	.payment3 .counting .num .digit {display:block; position:relative; top:50px; height:1410px; background:url("../img/web/payment/counting_num.png") no-repeat;}

	.payment3 .counting .text {float:left; margin-top:33px; height:18px; background:url("../img/web/payment/counting_text.png") no-repeat; text-indent:-9999px;}
	.payment3 .counting .text.st {width:30px; background-position:0 0;}
	.payment3 .counting .text.no {width:39px; background-position:0 -28px;}
	.payment3 .counting .text.percent {width:18px; background-position:0 -56px;}
	.payment3 .counting .text.million {margin:27px 0 0 2px; width:19px; height:23px; background-position:0 -84px;}
	.payment3 .counting .text.comma {margin-top:36px; width:8px; height:15px; background-position:0 -117px; opacity:0;}

	.payment3 .counting .counting-motion1 .num.one .digit,
	.payment3 .counting .counting-motion2 .num.one .digit {top:-76px;}

.payment3 .year {position:absolute; bottom:0; left:0; width:100%; height:153px; opacity:0;}
	.payment3 .year:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:86px; background-color:#221a27;}
	.payment3 .year .year2013 {display:block; position:relative; z-index:10; float:left; margin-top:58px; padding-right:13px; box-sizing:border-box;  width:214px; background:url("../img/web/payment/bg_scbs_2013.png") no-repeat 0 5px; text-align:right; color:#fff; font-size:17px; font-family:'Varela Round', sans-serif; transform:translate3d(0, 0, 0);}
	.payment3 .year .year2017 {display:block; position:relative; z-index:10; float:right; margin-top:58px; padding-left:13px; box-sizing:border-box; width:214px; background:url("../img/web/payment/bg_scbs_2017.png") no-repeat 100% 5px; color:#fff; font-size:17px; font-family:'Varela Round', sans-serif; transform:translate3d(0, 0, 0);}
	.payment3 .year .inner {position:relative; z-index:10; float:left; box-sizing:border-box; height:153px; background:url("../img/web/payment/bg_scbs_repeat.png") repeat-x 0 63px;}
	.payment3 .year .inner span {display:block; position:absolute; background:url("../img/web/payment/company_logo.png") no-repeat; text-indent:-9999px; transform:translate3d(0, 0, 0);}
	.payment3 .year .inner span:after {content:""; position:absolute; width:19px; height:40px; background:url("../img/web/payment/ico_scbs_etc.png") no-repeat;}
	.payment3 .year .inner .logo-sk {top:0; left:15%; width:71px; height:27px; background-position:0 -52px;}
	.payment3 .year .inner .logo-sk:after {top:35px; left:-7px; background-position:0 0;}
	.payment3 .year .inner .logo-samsung {bottom:34px; left:23%; width:115px; height:13px; background-position:-347px -52px;}
	.payment3 .year .inner .logo-samsung:after {top:-49px; left:-6px; background-position:-54px -21px;}
	.payment3 .year .inner .logo-melon {top:14px; left:44%; width:45px; height:15px; background-position:-91px -52px;}
	.payment3 .year .inner .logo-melon:after {top:22px; left:-6px; background-position:0 0;}
	.payment3 .year .inner .logo-soribada {bottom:37px; left:53%; width:56px; height:13px; background-position:-270px -52px;}
	.payment3 .year .inner .logo-soribada:after {top:-45px; left:-6px; background-position:-54px -21px;}
	.payment3 .year .inner .logo-tpay {top:11px; left:76%; width:38px; height:19px; background-position:-155px -52px;}
	.payment3 .year .inner .logo-tpay:after {top:25px; left:-8px; background-position:0 0;}
	.payment3 .year .inner .logo-bugs {bottom:33px; left:87%; width:39px; height:16px; background-position:-212px -52px;}
	.payment3 .year .inner .logo-bugs:after {top:-45px; left:-6px; background-position:-54px -21px;}
	.payment3 .year .inner .visual-img1 {position:absolute; top:-49px; left:-6px; z-index:10; opacity:0; transform:translate3d(0, 0, 0);}
	.payment3 .year .inner .visual-img2 {position:absolute; top:-52px; left:-9px; z-index:10; opacity:0; transform:translate3d(0, 0, 0);}
	.payment3 .year .inner .visual-img3 {position:absolute; top:-56px; left:-13px; z-index:10; opacity:0; transform:translate3d(0, 0, 0);}

/* payment4 slide section */
.payment4 {background:url("../img/web/payment/bg_scas.png") no-repeat; background-size:100% 100%;}
	.payment4 .remark dd {color:#ccc;}
	.payment4 .crumb-text {margin-top:50px; color:#ccc; font-size:11px; line-height:1.5; opacity:0;}

.payment4 .visual {position:absolute; bottom:0; left:50%; margin:0 0 0 -640px; width:1280px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment4 .visual img {position:absolute; bottom:0; right:138px; transform:translate3d(0, 0, 0);}

/* payment5 slide section */
.payment5 {background:url("../img/web/payment/bg_ssps.png") repeat; background-size:100% 100%;}
	.payment5 .visual {position:absolute; top:21%; left:0; right:0; margin:auto; width:786px; opacity:0; transform:translate3d(0, 0, 0);}

/* payment6 slide section */
.payment6 {background:url("../img/web/payment/bg_dcs.png") no-repeat; background-size:100% 100%;}

.payment6 .visual {position:absolute; top:50%; left:50%; margin-left:-409px; width:819px; transform:translate3d(0, 0, 0);}
	.payment6 .visual dl {position:absolute; top:0; text-align:center; transform:translate3d(0, 0, 0);}
	.payment6 .visual dt {position:relative; margin-bottom:33px; padding-top:134px; color:#fff; font-size:18px;}
	.payment6 .visual dt:before {content:""; position:absolute; top:0; left:0; background:url("../img/web/payment/ico_dcs.png") no-repeat;}
	.payment6 .visual dd {position:relative; color:#fff; font-size:14px; line-height:1.6;}
	.payment6 .visual dl.customer {left:263px; width:210px; opacity:0;}
	.payment6 .visual dl.customer dt:before {left:73px; width:68px; height:101px; background-position:-148px 0;}
	.payment6 .visual dl.customer dd {padding-left:35px; height:25px; line-height:25px;}
	.payment6 .visual dl.customer dd:before {content:""; position:absolute; top:0; left:18px; width:25px; height:25px; background:url("../img/web/payment/ico_dcs.png") no-repeat; background-position:-240px -75px;}
	.payment6 .visual dl.content {right:250px; width:210px; opacity:0;}
	.payment6 .visual dl.content dt:before {left:45px; width:116px; height:101px; background-position:0 0;}
	.payment6 .visual .line {position:absolute; top:167px; left:400px; width:1px; height:1px; background-color:#fff; transform:translate3d(0, 0, 0); opacity:0;}
	.payment6 .visual .visual-img1 {position:absolute; top:36px; left:277px; z-index:10; transform:translate3d(0, 0, 0); opacity:0;}

/* payment7 section */
.payment7 {background-color:#fbfbf3;}
.payment7 .visual {position:absolute; top:72%; left:40%; margin:-290px 0 0 -640px; width:1280px; height:580px; transform:translate3d(0, 0, 0);}
	.payment7 .visual-left {position:absolute; top:0; left:0; height:580px; transform:translate3d(0, 0, 0);}
	.payment7 .visual-left .text-area {position:absolute; top:38px;  left:740px; width:306px; transform:translate3d(0, 0, 0);}
	.payment7 .visual-left .visual-img1 {position:absolute; bottom:0;  left:0; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-left .visual-img2 {position:absolute; bottom:-46px;  left:0; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-left .visual-img3 {position:absolute; bottom:-74px;  left:0; opacity:0; transform:translate3d(0, 0, 0);}
	
	.payment7 .visual-right {position:absolute; top:225px; right:0; width:555px; height:279px; transform:translate3d(0, 0, 0);}
	.payment7 .visual-right .text-area {margin-top:90px; width:306px;}
	.payment7 .visual-right .text-area dt {float:right;}
	.payment7 .visual-right .text-area dd {float:right; text-align:right;} 
	.payment7 .visual-right .visual-img4 {position:absolute; bottom:39px; left:302px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-right .visual-img5 {position:absolute; bottom:45px; left:331px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-right  .visual-img6 {position:absolute; bottom:52px; left:364px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-right .visual-img7 {position:absolute; top:0; right:-15px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-right .visual-img8 {position:absolute; top:31px; right:22px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-right .visual-img9 {position:absolute; top:31px; right:22px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment7 .visual-right .visual-img10 {position:absolute; top:31px; right:22px; opacity:0; transform:translate3d(0, 0, 0);}

	.payment7 .text-area {opacity:0;}
	.payment7 .text-area .logo-paty {width:55px; height:15px; background:url("../img/web/payment/company_logo.png") no-repeat -79px -99px; text-indent:-9999px;}
	.payment7 .text-area .logo-sk {display:none; margin-left:64px; width:60px; height:24px; background:url("../img/web/payment/company_logo.png") no-repeat 0 -99px; text-indent:-9999px;}
	.payment7 .text-area .ico-multiplication {display:inline-block; width:19px; height:19px; background:url("../img/web/payment/ico_plus.png") no-repeat -38px 0; text-indent:-9999px;}
	.payment7 .text-area .ico-plus {display:inline-block; width:19px; height:19px; background:url("../img/web/payment/ico_plus.png") no-repeat 0 0; text-indent:-9999px;}
	.payment7 .text-area dt {overflow:hidden; margin-top:5px; font-size:24px; font-family:Godo; font-weight:700;}
	.payment7 .text-area dt span, 
	.payment7 .text-area dt i {float:left;}
	.payment7 .text-area dt i {margin:1px 9px 0;}
	.payment7 .text-area dd {margin-top:11px; color:#999; font-size:12px; line-height:1.4;}
	.payment7 .text-area .btn-movie {display:inline-block; position:relative; margin-top:12px; color:#ff6600; font-size:12px; line-height:1.7;}
	.payment7 .text-area .btn-movie span {font-family:Godo; font-weight:700;}
	.payment7 .text-area .btn-movie:after {content:""; position:absolute; top:0; right:-26px; width:20px; height:20px; background:url("../img/web/common/btn_controller.png") no-repeat 0 -282px;}

.payment7 .controller {display:none; position:absolute; top:27%; left:27%; z-index:200; width:50%; height:50%; background:transparent; cursor:pointer; transform:translate3d(0, 0, 0);}
	.payment7 .controller .btn-stop {display:none; position:absolute; top:50%; left:50%; margin:-64px 0 0 -64px; width:128px; height:128px; background:url("../img/web/common/btn_controller.png") no-repeat; background-position:-128px 0; text-indent:-9999px; transform:translate3d(0, 0, 0);}
	.payment7 .controller .btn-stop.active {background-position:-128px -133px;}

.payment7 .video {opacity:0;}
.payment7.video-show {background:none;}

/* payment8 section */
.payment8 {background-color:#fbfbf3;}
.payment8 .visual {position:absolute; top:77%; left:38%; margin:-337px 0 0 -640px; width:1280px; height:675px; transform:translate3d(0, 0, 0);}
	.payment8 .visual-left {position:absolute; top:0; left:0; height:675px; transform:translate3d(0, 0, 0);}
	.payment8 .visual-left .text-area {position:absolute; top:62px; left:870px; width:306px; transform:translate3d(0, 0, 0);}
	.payment8 .visual-left .visual-img1 {position:absolute; top:0; left:0; opacity:0; transform:translate3d(0, 0, 0);}
	.payment8 .visual-left .visual-img2 {position:absolute; top:300px; left:-300px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment8 .visual-left .visual-img3 {position:absolute; top:7px; left:704px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment8 .visual-left .visual-img4 {position:absolute; top:14px; left:718px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment8 .visual-left .visual-img5 {position:absolute; top:21px; left:732px; opacity:0; transform:translate3d(0, 0, 0);}

	.payment8 .visual-right {position:absolute; top:207px; right:0; width:771px; height:300px; transform:translate3d(0, 0, 0);}
	.payment8 .visual-right .text-area {position:absolute; top:140px; right:226px; width:306px; transform:translate3d(0, 0, 0);}
	.payment8 .visual-right .text-area dt {float:right; letter-spacing:-1px;}
	.payment8 .visual-right .text-area dd {float:right; text-align:right;} 
	.payment8 .visual-right .visual-img6 {position:absolute; top:0; right:-140px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment8 .visual-right .visual-img7 {position:absolute; top:0; left:509px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment8 .visual-right .visual-img8 {position:absolute; top:13px; left:522px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment8 .visual-right .visual-img9 {position:absolute; top:27px; left:536px; opacity:0; transform:translate3d(0, 0, 0);}

	.payment8 .text-area {opacity:0;}
	.payment8 .text-area .ico-plus {display:inline-block; width:19px; height:19px; background:url("../img/web/payment/ico_plus.png") no-repeat 0 0; text-indent:-9999px;}
	.payment8 .text-area dt {overflow:hidden; margin-top:5px; font-size:24px; font-family:Godo; font-weight:700;}
	.payment8 .text-area dt span, 
	.payment8 .text-area dt i {float:left;}
	.payment8 .text-area dt i {margin:1px 9px 0;}
	.payment8 .text-area dd {margin-top:11px; color:#999; font-size:12px; line-height:1.4;}

/* payment9 section */
.payment9 {background-color:#fbfbf3;}

.payment9 .visual {position:absolute; bottom:0; left:50%; overflow:hidden; margin:-322px 0 0 -640px; width:1280px; height:550px; transform:translate3d(0, 0, 0);}
	.payment9 .visual-left {position:absolute; top:0; left:100px; transform:translate3d(0, 0, 0);}
	.payment9 .visual-left .text-area {position:absolute; top:55px; left:452px; width:306px; transform:translate3d(0, 0, 0);}
	.payment9 .visual-left .visual-img1 {position:absolute; top:0; left:0; opacity:0; transform:translate3d(0, 0, 0);}

	.payment9 .visual-right {position:absolute; top:259px; right:0; width:610px; height:240px; transform:translate3d(0, 0, 0);}
	.payment9 .visual-right .text-area {margin-top:59px; width:306px; overflow:hidden;}
	.payment9 .visual-right .text-area dt {float:right;}
	.payment9 .visual-right .text-area dd {float:right; text-align:right;} 
	.payment9 .visual-right .text-area dd.logo-fido {margin-top:4px;}
	.payment9 .visual-right .visual-img2 {position:absolute; top:0; left:325px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment9 .visual-right .visual-img3 {position:absolute; top:0; left:325px; opacity:0; transform:translate3d(0, 0, 0);}

	.payment9 .text-area {opacity:0;}
	.payment9 .text-area .ico-plus {display:inline-block; width:19px; height:19px; background:url("../img/web/payment/ico_plus.png") no-repeat 0 0; text-indent:-9999px;}
	.payment9 .text-area dt {overflow:hidden; margin-top:5px; font-size:24px; font-family:Godo; font-weight:700;}
	.payment9 .text-area dt span, 
	.payment9 .text-area dt i {float:left;}
	.payment9 .text-area dt i {margin:1px 9px 0;}
	.payment9 .text-area dd {margin-top:11px; color:#999; font-size:12px; line-height:1.4;}

/* payment10 section */
.payment10 {background-color:#fbfbf3;} 
.payment10 .visual {position:absolute; top:65%; left:50%; margin:-215px 0 0 -426px; width:853px; height:430px; transform:translate3d(0, 0, 0);}
	.payment10 .visual-img1 {opacity:0;}
	.payment10 .visual-img2 {position:absolute; top:129px; left:288px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment10 .visual-img3 {position:absolute; top:136px; left:295px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment10 .visual-img4 {position:absolute; top:143px; left:302px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment10 .visual-img5 {position:absolute; top:155px; left:314px; opacity:0; transform:translate3d(0, 0, 0);}
	.payment10 .visual-img6 {position:absolute; top:161px; left:320px; opacity:0; transform:translate3d(0, 0, 0);}

/* ==========================================================================
   initial payment styles
   ========================================================================== */

/* main */
.main.initial .video {position:static;}
.main.initial .content .main-remark {position:static; margin-bottom:18px; opacity:1;}
.main.initial .content .bg-line {position:static; margin-bottom:8px; opacity:1;}
.main.initial .company {position:static; opacity:1;} 

/* payment1 initial */
.payment1.initial .visual .visual-img1 {opacity:1;}
.payment1.initial .visual .visual-img2 {bottom:0; left:0; opacity:1; width:1280px;}

/* payment2 initial */
.payment2.initial .visual .visual-img1,
.payment2.initial .visual .visual-img2,
.payment2.initial .visual .visual-img3,
.payment2.initial .visual .visual-img4,
.payment2.initial .visual .visual-img5 {opacity:1;}

/* payment3 initial */
.payment3.initial .counting {opacity:1;}
.payment3.initial .counting .num.zero .digit {top:-715px;}
.payment3.initial .counting .num.one .digit {top:-76px;}
.payment3.initial .counting .num.five .digit {top:-361px;}
.payment3.initial .counting .num.six .digit {top:-431px;}
.payment3.initial .counting .text.comma {opacity:1;}
.payment3.initial .year,
.payment3.initial .year .inner .visual-img1,
.payment3.initial .year .inner .visual-img2,
.payment3.initial .year .inner .visual-img3 {opacity:1;}

/* payment4 initial */
.payment4.initial .crumb .logo-sk {margin-top:0; opacity:1;}
.payment4.initial .crumb .text {margin-top:5px; opacity:1;}

.payment4.initial .visual {opacity:1;}

/* payment5 initial */
.payment5.initial .video {position:static;}
.payment5.initial .crumb .logo-sk {margin-top:0; opacity:1;}
.payment5.initial .crumb .text {margin-top:5px; opacity:1;}

/* payment6 initial */
.payment6.initial .visual dl.customer {left:0; opacity:1;}
.payment6.initial .visual dl.content {right:0; opacity:1;}
.payment6.initial .visual .line {left:0; width:100%; opacity:1;}
.payment6.initial .visual .visual-img1 {opacity:1;}

/* payment7 initial */
.payment7.initial .visual-img1 {opacity:1;}
.payment7.initial .visual-img2 {bottom:0; opacity:1;}
.payment7.initial .visual-img3 {bottom:0; opacity:1;}
.payment7.initial .visual-img4 {opacity:1;}
.payment7.initial .visual-img5 {opacity:1;}
.payment7.initial .visual-img6 {opacity:1;}
.payment7.initial .visual-img7 {top:0; opacity:1;}
.payment7.initial .visual-img8 {opacity:1;}
.payment7.initial .visual-img9 {opacity:1;}
.payment7.initial .visual-img10 {opacity:1;}

.payment7.initial .text-area {opacity:1;}

/* payment8 initial */
.payment8.initial .visual-img1 {opacity:1;}
.payment8.initial .visual-img2 {top:0; left:0; opacity:1;}
.payment8.initial .visual-img3 {opacity:1;}
.payment8.initial .visual-img4 {opacity:1;}
.payment8.initial .visual-img5 {opacity:1;}
.payment8.initial .visual-img6 {opacity:1;}
.payment8.initial .visual-img7 {opacity:1;}
.payment8.initial .visual-img8 {opacity:1;}
.payment8.initial .visual-img9 {opacity:1;}

.payment8.initial .text-area {opacity:1;}

/* payment9 initial */
.payment9.initial .visual-img1,
.payment9.initial .visual-img2,
.payment9.initial .visual-img3,
.payment9.initial .text-area {opacity:1;}

/* payment10 initial */
.payment10.initial .visual-img1,
.payment10.initial .visual-img2, 
.payment10.initial .visual-img3, 
.payment10.initial .visual-img4, 
.payment10.initial .visual-img5, 
.payment10.initial .visual-img6 {opacity:1;}

/* ==========================================================================
   IOT styles
   ========================================================================== */

/* iot1 section */
.iot1 {background:url("../img/web/payment/bg_pattern_black.png") repeat;}
.iot1 .visual {position:absolute; top:51%; left:50%; overflow:hidden; margin-left:-405px; width:810px; transform: translate3d(0, 0, 0);}
	.iot1 .visual li {float:left; margin-right:18.5%;}
	.iot1 .visual li:last-child {margin-right:0;}
	.iot1 .visual .visual-img1,
	.iot1 .visual .visual-img2,
	.iot1 .visual .visual-img3 {opacity:0;}
	.iot1 .visual .visual-img4 {position:absolute; top:60px; left:231px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot1 .visual .visual-img5 {position:absolute; top:84px; left:192px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot1 .visual .visual-img6 {position:absolute; top:84px; left:512px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot1 .visual .visual-img7 {position:absolute; top:60px; left:552px; opacity:0; transform: translate3d(0, 0, 0);}
	
/* iot2 section */
.iot2 {background:url("../img/web/payment/bg_pattern_black.png") repeat;}
.iot2 .visual {position:absolute; top:40%; left:50%; margin-left:-450px; width:901px; transform: translate3d(0, 0, 0);}
	.iot2 .visual .visual-img1 {opacity:0;}
	.iot2 .visual .visual-img2 {position:absolute; top:29px; left:0; opacity:0; transform: translate3d(0, 0, 0);}
	.iot2 .visual .visual-img3 {position:absolute; top:62px; left:0; opacity:0; transform: translate3d(0, 0, 0);}
	.iot2 .visual .visual-img4 {position:absolute; top:-45px; left:0; opacity:0; transform: translate3d(0, 0, 0);}
	.iot2 .visual .visual-img5 {position:absolute; top:47px; left:95px; opacity:0; transform: translate3d(0, 0, 0);}

	.iot2 .visual .infra {position:absolute; top:119px; left:95px; width:138px; text-align:center; transform: translate3d(0, 0, 0);}
	.iot2 .visual .sales {position:absolute; top:226px; left:589px; width:138px; text-align:center; transform: translate3d(0, 0, 0);}
	.iot2 .visual .idea {position:absolute; top:101px; left:589px; width:138px; text-align:center; transform: translate3d(0, 0, 0);}

	.iot2 .visual .infra span,
	.iot2 .visual .sales span,
	.iot2 .visual .idea span {display:block; font-size:13px; line-height:1.4; opacity:0;}

/* iot3 slide section */
.iot3 {background:url("../img/web/payment/bg_pattern_black.png") repeat;}
	.iot3 .remark .link-hompage {position:relative; display:inline-block; margin-top:50px; color:#ff6600; font-size:14px; opacity:0;}
	.iot3 .remark .link-hompage:after {content:""; position:absolute; top:0; right:-14px; width:8px; height:14px; background:url("../img/web/common/ico_arr.png") no-repeat -3px -92px;}

.iot3 .visual {position:absolute; top:50%; left:55%; margin-left:-595px; width:1190px; transform: translate3d(0, 0, 0);}
	.iot3 .visual li {position:relative; float:left; margin-right:20px;}
	.iot3 .visual li:last-child {margin-right:0;}
	.iot3 .visual .visual-img1 {position:relative; z-index:1; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img1-01 {position:absolute; top:169px; left:140px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img1-02 {position:absolute; top:164px; left:116px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img1-03 {position:absolute; top:157px; left:94px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img2 {position:relative; z-index:1; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img2-01 {position:absolute; top:189px; left:88px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img2-02 {position:absolute; top:183px; left:64px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img2-03 {position:absolute; top:178px; left:42px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img3 {position:relative; z-index:1; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img3-01 {position:absolute; top:169px; left:198px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img3-02 {position:absolute; top:164px; left:173px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot3 .visual .visual-img3-03 {position:absolute; top:157px; left:152px; opacity:0; transform: translate3d(0, 0, 0);}

/* iot4 slide section */
.iot4 {background:url("../img/web/payment/bg_pattern_black.png") repeat;}
	.iot4 .remark .link-hompage {position:relative; display:inline-block; margin-top:50px; color:#ff6600; font-size:14px; opacity:0;}
	.iot4 .remark .link-hompage:after {content:""; position:absolute; top:0; right:-14px; width:8px; height:14px; background:url("../img/web/common/ico_arr.png") no-repeat -3px -92px;}

.iot4 .nsf-1100 {position:absolute; bottom:0; left:0; overflow:hidden; width:100%; height:440px; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-1100 dl {position:absolute; top:0; left:19%; overflow:hidden; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-1100 dt {float:left; margin-right:7px;}
	.iot4 .nsf-1100 dd {float:left; color:#999; line-height:1.4;}
	.iot4 .nsf-1100 .visual-img1 {position:absolute; bottom:0; left:200px; z-index:10; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-1100 .visual-img1-01 {position:absolute; top:28px; left:905px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-1100 .visual-img1-02 {position:absolute; top:13px; left:891px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-1100 .visual-img1-03 {position:absolute; top:0; left:878px; opacity:0; transform: translate3d(0, 0, 0);}

.iot4 .nsf-590i {position:absolute; bottom:0; left:45%; width:660px; height:385px; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-590i dl {position:absolute; top:162px; left:4px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-590i dt {margin-bottom:6px;}
	.iot4 .nsf-590i dd {color:#999; line-height:1.4;}
	.iot4 .nsf-590i .visual-img2 {position:absolute; top:0; left:0; z-index:10; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-590i .visual-img2-01 {position:absolute; top:148px; left:241px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-590i .visual-img2-02 {position:absolute; top:143px; left:217px; opacity:0; transform: translate3d(0, 0, 0);}
	.iot4 .nsf-590i .visual-img2-03 {position:absolute; top:137px; left:195px; opacity:0; transform: translate3d(0, 0, 0);}

/* iot5 section */
.iot5 {background-color:#fbfbf3;} 
.iot5 .visual {position:absolute; top:45%; left:50%; margin-left:-470px; width:940px; transform: translate3d(0, 0, 0);}
	.iot5 .visual .visual-img1,
	.iot5 .visual .visual-img2 {opacity:0;}

/* iot7 section */
.iot7 {background-color:#fbfbf3;}
	.iot7 .remark dt {white-space:nowrap;}
	.iot7 .remark .link-hompage {position:relative; display:inline-block; margin-top:50px; color:#ff6600; font-size:14px; opacity:0;}
	.iot7 .remark .link-hompage:after {content:""; position:absolute; top:0; right:-14px; width:8px; height:14px; background:url("../img/web/common/ico_arr.png") no-repeat -3px -92px;}

.iot7 .visual {position:absolute; top:47.5%; left:0; padding-right: 20px; width: 100%; font-size: 0; text-align: center; transform: translate3d(0, 0, 0); box-sizing: border-box;}
	.iot7 .visual li {position:relative; display: inline-block; margin-right:4.6875%;}
	.iot7 .visual li:last-child {margin-right:0;}
	.iot7 .visual .visual-img1 {position:relative; z-index:1; opacity:0; transform: translate3d(0, 0, 0);}
	.iot7 .visual .visual-img2 {position:relative; z-index:1; opacity:0; transform: translate3d(0, 0, 0);}
	.iot7 .visual .visual-img3 {position:relative; z-index:1; opacity:0; transform: translate3d(0, 0, 0);}

/* iot6 section */
.iot6 {background-color:#fbfbf3;} 
.iot6 .visual {position:absolute; top:65%; left:50%; margin:-215px 0 0 -426px; width:853px; height:430px; transform:translate3d(0, 0, 0);}
	.iot6 .visual .visual-img1 {opacity:0;}
	.iot6 .visual .visual-img2 {position:absolute; top:129px; left:288px; opacity:0; transform:translate3d(0, 0, 0);}
	.iot6 .visual .visual-img3 {position:absolute; top:136px; left:295px; opacity:0; transform:translate3d(0, 0, 0);}
	.iot6 .visual .visual-img4 {position:absolute; top:143px; left:302px; opacity:0; transform:translate3d(0, 0, 0);}
	.iot6 .visual .visual-img5 {position:absolute; top:155px; left:314px; opacity:0; transform:translate3d(0, 0, 0);}
	.iot6 .visual .visual-img6 {position:absolute; top:161px; left:320px; opacity:0; transform:translate3d(0, 0, 0);}

/* ==========================================================================
   initial IOT styles
   ========================================================================== */

/* iot1 initial */
.iot1.initial .visual .visual-img1,
.iot1.initial .visual .visual-img2,
.iot1.initial .visual .visual-img3 {opacity:1;}
.iot1.initial .visual .visual-img4 {left:212px; opacity:1;}
.iot1.initial .visual .visual-img5 {left:212px; opacity:1;}
.iot1.initial .visual .visual-img6 {left:532px; opacity:1;}
.iot1.initial .visual .visual-img7 {left:532px; opacity:1;}

/* iot2 initial */
.iot2.initial .visual .visual-img1 {opacity:1;}
.iot2.initial .visual .visual-img2,
.iot2.initial .visual .visual-img3, 
.iot2.initial .visual .visual-img4,
.iot2.initial .visual .visual-img5 {left:20px; opacity:1;}

.iot2.initial .visual .infra span,
.iot2.initial .visual .idea span,
.iot2.initial .visual .sales span {opacity:1;}

/* iot3 initial */
.iot3.initial .remark .link-hompage {margin-top:14px; opacity:1;}
.iot3.initial .visual .visual-img1,
.iot3.initial .visual .visual-img2,
.iot3.initial .visual .visual-img3,
.iot3.initial .visual .visual-img1-01,
.iot3.initial .visual .visual-img1-02,
.iot3.initial .visual .visual-img1-03,
.iot3.initial .visual .visual-img2-01,
.iot3.initial .visual .visual-img2-02,
.iot3.initial .visual .visual-img2-03,
.iot3.initial .visual .visual-img3-01,
.iot3.initial .visual .visual-img3-02,
.iot3.initial .visual .visual-img3-03 {opacity:1;}

/* iot4 initial */
.iot4.initial .remark .link-hompage {margin-top:14px; opacity:1;}
.iot4.initial .nsf-1100 dl {opacity:1;}
.iot4.initial .nsf-1100 .visual-img1 {left:-450px; opacity:1;}
.iot4.initial .nsf-1100 .visual-img1-01,
.iot4.initial .nsf-1100 .visual-img1-02,
.iot4.initial .nsf-1100 .visual-img1-03 {opacity:1;}
.iot4.initial .nsf-590i dl {opacity:1;}
.iot4.initial .nsf-590i .visual-img2 {opacity:1;}
.iot4.initial .nsf-590i .visual-img2-01,
.iot4.initial .nsf-590i .visual-img2-02,
.iot4.initial .nsf-590i .visual-img2-03 {opacity:1;}

/* iot5 initial */
.iot5.initial .visual .visual-img1,
.iot5.initial .visual .visual-img2 {opacity:1;}

/* iot7 initial */
.iot7.initial .remark .link-hompage {margin-top:14px; opacity:1;}
.iot7.initial .visual .visual-img1,
.iot7.initial .visual .visual-img2,
.iot7.initial .visual .visual-img3 {opacity:1;}

/* iot6 initial */
.iot6.initial .visual .visual-img1,
.iot6.initial .visual .visual-img2,
.iot6.initial .visual .visual-img3,
.iot6.initial .visual .visual-img4,
.iot6.initial .visual .visual-img5,
.iot6.initial .visual .visual-img6 {opacity:1;}

/* ==========================================================================
   common styles
   ========================================================================== */

/* hidden */
.hide {display:none;}

/* color */
.cfff {color:#fff !important;}
.cff6600 {color:#ff6600 !important;}
.c666 {color:#666 !important;}

/* ==========================================================================
   initial common styles
   ========================================================================== */

/* hidden */
.initial .hide {display:block;}


/* 161205 Payment English page edit- S */
.about .about-title {position:relative; margin-bottom:28px; padding-left:21px; color:#fff; font-size:14px; font-family:'robotolight';}
#header .nav a.kor_main:before{left:-16px;width:1px;height:13px;background:#fff;}
#header .nav a.kor_main:hover{color:#ff6600;}
#header .nav a.kor_main.gray{color:#666;}
#header .nav a.kor_main.gray:hover{color:#ff6600;}
#header .nav a.kor_main.gray:before{background:#666;}
.about dl.eng{width:185px;}
.about dl.eng + .contact .address{word-break:break-all;}
.main .content .main-remark .point2{color:#ff6600;}
.main .content .main-remark.eng{font-size:65px}
.payment3 .counting.eng{margin-left:-463px;width:925px;}
.payment3 .counting.eng .counting-motion4{width:265px;}
.payment3 .counting.eng .text.million{width:60px;background-position:0 -142px;}

.payment6 .visual.eng{margin-left:-439px;width:878px;}
.payment6 .visual.eng dl{width:auto;}
.payment6 .visual.eng dt{padding-top:0;}
.payment6 .visual.eng dt:before{display:block;position:static;margin:0 auto 30px auto;}
.payment6 .visual.eng dl.content dd{color:#ccc;}
.payment6 .visual.eng dl.customer dd{padding-left:53px;color:#ccc;}
.payment6 .visual.eng dl.customer dd:before{left:41px;background-position:-240px 0px;}

.payment7 .visual-left .text-area.eng{width:380px;}
.payment7 .text-area.eng .logo-paty{background-position:-157px -99px;}

.payment8 .visual-left .text-area.eng{width:435px;}
.payment9 .visual.eng .visual-left .text-area{width:400px;}
.payment9 .visual.eng .visual-right{width:650px;}
.payment9 .visual.eng .visual-right .text-area{margin-top:31px;width:435px;}
.payment9 .visual.eng .visual-right .visual-img2,
.payment9 .visual.eng .visual-right .visual-img3{left:455px;}

*[data-box="banner"]{width:166px;}
*[data-box="banner"] ul{margin:0 0 11px 0;height:109px;overflow:hidden;}
*[data-box="banner"] ul li{}
*[data-box="banner"] .btn_box{line-height:0;text-align:center;}
*[data-box="banner"] .btn_box button{padding:0;width:16px;height:4px;border:none;background:#615d61;text-indent:-9999px;border-radius:2px;}
*[data-box="banner"] .btn_box button.on{background:#ff6600;}
/* 161205 Payment English page edit- E */
/* 161206 IoT English page edit- S */
.eng_letter dl,
.eng_letter dl dt{letter-spacing:0.5px;}
.iot1 .visual.eng{margin-left:-445px;width:890px;}
.iot1 .visual.eng li{height:198px;position:relative;}
.iot1 .visual.eng li:nth-child(1){width:201px;}
.iot1 .visual.eng li:nth-child(2){width:170px;}
.iot1 .visual.eng li:nth-child(3){width:185px;height:202px;}
.iot1 .visual.eng li img{position:absolute;bottom:0;}


.iot2 .visual.eng .infra{left:143px;top:100px;}
.iot2 .visual.eng .visual-img2{top:50px;}
.iot2 .visual.eng .visual-img3{top:85px;}
.iot2 .visual.eng .sales{top:250px;left:615px;width:205px;}
.iot2 .visual.eng .sales .visual-img4{top:-65px;}
.iot2 .visual.eng .idea{top:80px;left:625px;}
.iot2 .visual.eng .idea .visual-img5{top:70px;}

.iot3 .visual.eng .visual-img1-01{top:128px;left:150px;}
.iot3 .visual.eng .visual-img1-02{top:123px;left:125px;}
.iot3 .visual.eng .visual-img1-03{top:117px;left:107px;}
.iot3 .visual.eng .visual-img2-01{top:145px;left:95px;}
.iot3 .visual.eng .visual-img2-02{top:140px;left:70px;}
.iot3 .visual.eng .visual-img2-03{top:135px;left:47px;}
.iot3 .visual.eng .visual-img3-01{top:133px;left:175px;}
.iot3 .visual.eng .visual-img3-02{top:128px;left:148px;}
.iot3 .visual.eng .visual-img3-03{top:122px;left:125px;}
.iot3 .visual.eng li:nth-child(1){width:350px;height:340px;}
.iot3 .visual.eng li:nth-child(2){width:350px;height:340px;}
.iot3 .visual.eng li:nth-child(3){width:450px;height:311px;}
.iot3 .visual.eng .visual-img2{position:absolute;left:25px;top:-42px;}
.iot3 .visual.eng .visual-img3{position:absolute;left:0;top:5px;}

.iot4 .visual-img1_1{position:absolute;top:26px;left:905px;opacity:0;}
.iot4 .visual-img1_2{position:absolute;top:11px;left:890px;opacity:0;}
.iot4 .visual-img1_3{position:absolute;top:0;left:875px;opacity:0;}
.iot4 .visual-img2_1{position:absolute;top:152px;left:242px;opacity:0;}
.iot4 .visual-img2_2{position:absolute;top:146px;left:220px;opacity:0;}
.iot4 .visual-img2_3{position:absolute;top:140px;left:195px;opacity:0;}
/* 161206 IoT English page edit- E */
/* 161212 page edit- S */
.about dl.contact dd.map {margin-bottom:20px; padding-left:0;}
.about dl.contact dd.map:before{display:none;}
.contactus .content .contact dd.address{margin-bottom:5px;padding-left:0;}
.contactus .content .contact dd.map{margin-bottom:20px;padding-left:0;}
.contactus .content .contact dd.map a{display:inline-block;color:#999;position:relative;}
.contactus .content .contact dd.map:before{display:none}
/*.nav.on .about-view{display:none !important;}
.about{display:block !important;}  주윤욱 임시*/
/* 161212 page edit- E */



/*2017.02.23 수정*/
.ir_pop{max-width:540px;width:100%;position:fixed;right:15%;top:100px;border:1px solid #333333;background:#fff;word-break:keep-all;z-index:9999;}
.ir_pop .title{height:78px;padding:12px 0 0 24px;font-size:24px;line-height:28px;font-weight:normal;color:#fff;position:relative;background:url('../img/web/main/popimg.png') no-repeat;background-size:cover;box-sizing:border-box;}
.ir_pop .title button{position:absolute;top:0;right:0;margin:10px;width:24px;height:23px;background:url('../img/web/main/close.png') no-repeat;background-size:cover;}
.ir_pop .content{padding:34px 30px 0 30px;font-size:14px;line-height:20px;color:#666666;background:#f5f1f6;position:relative;}
.ir_pop .content .section01{padding-right:50px;font-size:14px;}
.ir_pop .content .section01 .bottom{padding-top:42px;margin-bottom:24px;text-align:center;color:#1b1b1b;}
.ir_pop .content .section02{font-size:14px;line-height:1.8;}
.ir_pop .content .section02 dt{float:left;}
.ir_pop .content .section02 > dl > dt{color:#1b1a1a;min-width:80px;}
.ir_pop .content .section02 > dl > dd{padding-left:90px;padding-bottom:4px;}
.ir_pop .content .section02 .nonfloat{float:none;}
.ir_pop .content .section02 > dl > dd > dl{padding-left:20px;}
.ir_pop .content .section02 > dl > dd > dl > dt{padding-right:5px;}
.ir_pop .content .section02 > dl > dd > dl > dd{padding-left:70px;word-wrap:break-word;}
.ir_pop .content .section03{line-height:20px;margin-top:26px;padding:24px 0 30px 0;text-align:center;border-top:1px solid #d5d5d5;}
.ir_pop .content .section03 p{padding-bottom:35px;font-size:12px;}
.ir_pop .content .section03 p span{display:block;font-size:16px;color:#666666;padding-bottom:10px;}
.ir_pop .section04{position:absolute;bottom:0;left:0;right:0;background:#333333;color:#fff;font-size:11px;font-weight:100;padding:10px;}

/*@media screen and (max-width:660px){
	.ir_pop{max-width:100%;width:96%;top:60px;right:50%;margin:2% -48% 0 0;}
	.ir_pop .content{height:400px;overflow-y:scroll;}
	.ir_pop .content .section03 p span{margin-bottom:3px;}
}
@media screen and (max-width:550px){
	.ir_pop .content .section01{padding-right:0;}
	.ir_pop .content .section02{padding-right:50px;}
}
@media screen and (max-width:400px){
	.ir_pop .title{padding-left:15px;font-size:20px;line-height:70px;}
	.ir_pop .content{padding:10px 15px;}
	.ir_pop .content .section02{padding-right:20px;}
}*/
/*2017.02.23 수정*/

/*20170412*/
.ir_pop{left:10px;top:50%;margin-top:-300px;}
.content > .text{ padding-bottom:30px;}
.content > .text > .strong{text-decoration:underline;color:#212121;}
@media screen and (max-width:550px){
	.ir_pop{width:auto;left:10px;margin-left:0;right:auto;right:10px;}

}