@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); /*light:100 regular:400 bold:700*/
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
html{margin:0; padding:0; zoom: 120%}
body{margin:0; padding:0; font-size:16px; font-family:malgun gothic,dotum,AppleGothic,arial,Helvetica, sans-serif; font-weight:400; color:#606f7d; overflow-x:hidden; word-break:keep-all;}
h1, h2, h3, h4, p, header, footer, div, section, article, aside, nav, ul, li{margin:0; padding:0; transition:all 0.1s ease-out; position:relative; box-sizing:border-box;}
dl, dt, dd{margin:0; padding:0; box-sizing:border-box;}
h1, h2, h3, h4{font-family:'Noto sans KR',sans-serif;}
h1, h2{letter-spacing:-0.1em;}
h1{font-weight:100; font-size:3.875em; color:#00284c; line-height:1em;}
h2{font-weight:400; font-size:2em; color:#105799; line-height:1em;}
h3{font-weight:400; font-size:1.5em; color:#00284c; line-height:1em;}
p{line-height:1.5em;}
a{margin:0; padding:0; color:inherit; font-size:inherit; text-decoration:none;}
.a-inline{display:inline-block;}

ul, li{list-style:none;}
img{display:block; border:0;}
input{margin:0; padding:0; border:0; box-sizing:border-box; background-color:#fff; border:solid 1px #fff; transition:all 0.1s ease-out;}
input:focus{border-color:#00a0e9;}
form input:focus{border-color:#00a0e9;}
textarea{margin:0; padding:0; border:0; box-sizing:border-box; background-color:#fff; border:solid 1px #fff; transition:all 0.1s ease-out;}
textarea:focus{border-color:#00a0e9;}
button{margin:0; padding:0; border:0; transition:all 0.1s ease-out; cursor:pointer; box-sizing:border-box; font-weight:bold; border-radius:4px;  border:solid 1px #004cff; background-color:#fff; color:#606f7d; font-size:1rem; line-height:100%;}
button:hover{background-color:#004cff; color:#FFFFFf;}
*:focus {outline:none;}

.contents{width:100%; max-width:1220px; margin:0 auto; padding:0 10px;}
.clear-div{clear:both;}

.btn-plus{
	display:inline-block; font-weight:550; font-size:1rem; color:#004cff; padding-right:40px; height:30px; line-height:30px; cursor:pointer;
	background-image:url('../image/icon-btn-plus.png'); background-repeat:no-repeat; background-size:25px 25px; background-position:100% center;
}
.btn-plus:hover{
	color:#104099; text-decoration:underline;
	background-image:url('../image/icon-btn-plus-hover.png');
}

.btn-gradient{
	background:linear-gradient(to right, #004cff); color:#fff; font-weight:500; border:0;
	background: -moz-linear-gradient(to right, #004cff);
	background: -ms-linear-gradient(to right, #105799, #29a1cc);
	background: -o-linear-gradient(to right, #105799, #29a1cc);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105799', endColorstr='#29a1cc',GradientType=1 );

}
.btn-gradient:hover{
	background:linear-gradient(to right, #003769, #003769); border:0; color:#fff;
	background: -moz-linear-gradient(to right, #29a1cc, #29a1cc);
	background: -ms-linear-gradient(to right, #29a1cc, #29a1cc);
	background: -o-linear-gradient(to right, #29a1cc, #29a1cc);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29a1cc', endColorstr='#29a1cc',GradientType=1 );
}

.btn-textonly{margin:40px auto; display:table;}
.btn-textonly .btn-textonly-text{text-align:right; font-weight: bold; color:#0054ea; font-size:18px; padding-right:5px; display:table-cell; vertical-align:middle; transition:all 0s linear;}
.btn-textonly .btn-textonly-icon{width:30px; height:30px; overflow:hidden; background-image:url('../image/btn_textonly_icon.svg'); background-repeat:no-repeat; background-size:30px 61px; background-position:center top; display:table-cell;vertical-align:middle; transition:all 0s linear;}
.btn-textonly:hover .btn-textonly-text{color:#105799; text-decoration:underline;}
.btn-textonly:hover .btn-textonly-icon{background-position:center bottom;}

.btn-to-top{display:none; position:fixed; width:50px; height:50px; bottom:25px; right:25px; z-index:70; transition:none; cursor:pointer;}
.btn-to-top img{width:100%;}


.btn-center-container{width:100%; text-align:center;}
.last-menu{margin-right:0 !important;}
.h10-div{height:10px;}
.h30-div{height:30px;}
.h60-div{height:60px;}
.mh180{min-height:180px;}
.mh120{min-height:120px;}
.mh300{min-height:300px;}
.h-line-60{width:100%; height:1px; background-color:#e5e5e5; margin:60px 0;}
.h-line{width:100%; height:1px; background-color:#e5e5e5;}
.bg-black{display:none; position:fixed; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.7); z-index:90;}
.modal{display:none; position:fixed; width:600px; height:600px; top:50%; left:50%; margin-top:-300px; margin-left:-300px; z-index:91; background-color:#fff; border-radius:4px; padding:20px; overflow-y:auto;}
.btn-modal-close{padding:10px 20px;}
.main-object-in{opacity:1 !important;}
.m-block{display:none;}

.trisection{float:left; width:31.33333333333333%; margin:0 1%; padding:20px;}
@media (max-width:820px){.trisection{width:48%;}}
@media (max-width:640px){.trisection{width:98%; height:auto; margin:20px 1%;}}

.quadrisection{float:left; width:23%; margin:0 1%; padding:20px;}
@media (max-width:820px){.quadrisection{width:48%;}}
@media (max-width:640px){.quadrisection{width:98%; height:auto; margin:20px 1%;}}

/*modal*/
.modal h1{font-weight:400; font-size:2em; color:#00a0e9; text-align:center;}
.modal span{display:block; padding:20px 0; font-size:1em; font-weight:bold; color:#333; margin-top:20px;}
.modal p{padding:0 10px; font-size:0.75em; line-height:1.5em;}
.modal p br{line-height:2em;}


/* header */
header.global-top{width:100%; position:fixed; border-bottom:solid 1px rgba(255,255,255,0.1); cursor:default; z-index:80; top:0; left:0; background-color:rgba(0,0,0,0.1);}
header.global-top button{color:#ddd; background:none; border-radius:4;}
header.global-top button:hover{color:#fff; background:none; border-radius:4;}

header.global-top.subtop{border-bottom:solid 1px #899eb1;}
header.global-top.subtop button{color:#606f7d; background:none; border-radius:4;}
header.global-top.subtop button:hover{color:#004cff; background-color:none; border-radius:4;}

header.global-top.subtop .top-info{border-bottom:solid 1px #ededed; background-color:#fafafa;}
header.global-top.subtop nav{background-color:#fff;}
header.global-top.subtop .menu-all-text{color:#105799;}

header.global-top.subtop .top-info button{border-right:solid 1px #ededed;}
header.global-top.subtop .top-info button:hover{background-color:#ededed; color:#606f7d;}
header.global-top.subtop .top-info .ti-call{color:#606f7d; border-left:solid 1px #ededed;}

header.global-top.subtop nav .navi ul li .navi-sub{background-color:#fff; border-color:#e5e5e5;}
header.global-top.subtop nav .navi ul li .navi-sub ul li{color:#606f7d; border-color:#e5e5e5;}
header.global-top.subtop nav .navi ul li .navi-sub ul li:hover{color:#00a0e9;}

.top-info{width:100%; height:44px; border-bottom:solid 1px rgba(255,255,255,0.1);}
.top-info-scroll{margin-top:-44px;}
nav{height:62px; width:100%; padding:0 15px;}
nav.scroll {background-color:#fff; box-shadow:0px 3px 3px rgba(0,0,0,0.1);}
nav.scroll .navi ul li button{color:#606f7d;}
nav.scroll .navi ul li button:hover{color:#004cff;}
nav.scroll .navi ul li .navi-sub{background-color:#fff; border-color:#e5e5e5;}
nav.scroll .navi ul li .navi-sub ul li{color:#606f7d; border-color:#e5e5e5;}
nav.scroll .navi ul li .navi-sub ul li:hover{color:#00a0e9;}

.logo{height:42px; float:left; margin-top:10px; z-index:2;}
.logo img{height:100%;}

.navi{position:absolute; width:50%; height:100%; top:0; left:25%; z-index:1; text-align:center;}
.navi ul {display:table; height:100%; margin:0 auto;}
.navi ul li{display:table-cell; width:auto; height:100%; vertical-align:middle;  cursor:pointer;}
.navi ul .current-pg .btn-navi{color:#000; font-weight:bold;}
.navi ul .current-pg:before{content:''; position:absolute; width:70%; height:4px; bottom:0; left:15%; background-color:#004cff;}
.navi ul li button{color:#fff;}

.free-link .btn-navi{color:#0054ea !important; font-weight:bold;}

.btn-navi{width:100%; height:100%; border:0; background:none; text-align:center; color:#606f7d; padding:0 20px; font-weight:normal; white-space:nowrap;}
.btn-navi:hover{background:none; border:0; color:#105799; font-weight:bold;}

.lang-wrap{display:none; position:absolute; top:44px; right:0; width:90px; height:80px; background-color:#fff; z-index:80; border-radius:0 0 4px 4px; border:solid 1px #e5e5e5; border-top:0; overflow:hidden;}
.btn-lang{width:100%; display:block; height:40px; line-height:40px; text-align:center; border:0; font-size:0.875em; font-weight:normal;}
.btn-lang:hover{border-radius:0;}
.lang-wrap:before{content:''; position:absolute; width:90%; height:1px; top:39px; left:5%; font-size:0; margin:0; padding:0; border-bottom:dashed 1px #e5e5e5; z-index:81;}

.navi-sub{display:none; position:absolute; width:150px; left:50%; margin-left:-75px; padding:10px; padding-top:0; top:62px; z-index:99; background-color:rgba(0,0,0,0.1); border-radius:0 0 6px 6px; transition:linear; border:solid 1px rgba(255,255,255,0.1); border-top:0;}
.navi-sub ul{width:100%;}
.navi-sub ul li{width:100%; height:35px; padding-top:7px; border-bottom:dashed 1px rgba(255,255,255,0.1); font-size:0.75em; display:block; text-align:center; font-weight:normal; color:#fff;}
.navi-sub ul li:hover{color:#00a0e9; font-weight:normal;}
.navi-sub ul li.navi-sub-last{border-bottom:0;}


.btn-top-info{height:44px; line-height:44px; text-align:center; padding:0 10px; font-size:0.750em; border:0; border-radius:0;}
.btn-top-info:hover{border-radius:0; color:#606f7d;}

.ti-download{font-weight:bold; float:left;}
.ti-download:hover{background:none;}

.ti-customer{float:left;}
.ti-customer:hover{background:none;}

.ti-language{color:#606f7d; border-left:solid 1px #ededed; border-right:solid 1px #ededed; float:right;}
.ti-language:hover{background-color:#ededed;}

.ti-call{float:right; color:#fff;}
.ti-call:hover{color:#fff;}

.ti-user{float:right;}
.ti-user span{font-weight:bold; color:#000;}

.btn-ti-user{border:0; background:none; margin-left:10px; font-size:1em; color:#00a0e9;}
.btn-ti-user:hover{text-decoration:underline; background:none;}

.menu-all-container{position:fixed; width:50%; height:100%; background-color:#fff; top:0; right:-50%; z-index:91; padding:60px; transition:all 0.3s ease-out;}
.menu-all-container-on{right:0;}
.menu-all{display:table; position:absolute; top:15px; right:10px; height:32px; cursor:pointer; font-size:0.875em; z-index:2;}
.menu-all-text{display:table-cell; vertical-align:middle; height:100%; text-align:right; padding-right:5px; font-weight:normal; color:#00a0e9;}
.menu-all-icon{display:table-cell; width:32px; vertical-align:middle;}
.menu-all-icon img{width:100%;}
.btn-menu-close{position:absolute; width:30px; height:30px; top:30px; right:30px; z-index:91; background-image:url('../image/btn_menu_close.svg'); background-repeat:no-repeat; background-size:100%; background-position:center; cursor:pointer;}

.menu-container{float:left; width:33.33333333333%; height:200px; max-width:200px; padding:20px 10px 20px 0; margin-top:60px;}
.menu-container:before{content:''; position:absolute; top:0; left:0; width:20px; height:4px; background-color:#00a0e9;}
.menu-cate{font-weight:bold; color:#333; display:block; font-size:1em; margin-bottom:10px;}
.menu-container a{line-height:1.5em; display:block; font-size:0.875em; color:#333;}
.menu-container a.mylocation{font-weight:bold; color:#00a0e9; cursor:default;}
.menu-container a:hover{color:#00a0e9;}

.menu-all-mobile{display:none;}


/*footer*/
footer{width:100%; cursor:default;}
.footer-info{width:100%; padding:5px 0; background-color:#00284c; z-index:81; color:#fff;}
.footer-info-left{float:left; height:40px;}
.footer-info-left ul li{display:inline; margin-right:35px; line-height:40px;}
.footer-info-left ul li a{font-size:0.750em;}
.footer-info-left ul li a:hover{text-decoration:underline; color:#00a0e9;}
.footer-info-right{float:right; height:40px;}
.btn-footer-fs{height:40px; padding:0 10px; font-weight:bold; font-size:0.75em; border:0; background-color:#fff; color:#00284c;}

.footer-copyright{width:100%;  padding:18px 0; background-color:#f2f7ff; z-index:81;}
.footer-copyright-left{float:left;}
.footer-copyright-left p{font-size:0.750em; line-height:1.2em; text-align:left;}
.footer-paragraph{margin-top:10px;}
.footer-paragraph span{color:#00a0e9;}
.footer-copyright-right{float:right; text-align:right; margin-top:10px;}

.footer-fs-container{display:none; position:absolute; width:100%; height:150px; bottom:100%; left:0; z-index:10; border-radius:4px 4px 0 0; background-color:#fff; border:solid 1px #e5e5e5; border-bottom:0;}
.footer-fs-container ul li {width:100%; height:50px; line-height:50px; text-align:center;}
.footer-fs-container ul li:hover{background-color:#fafcff;}
.footer-fs-container ul li:nth-child(2){border-top:dashed 1px #e5e5e5; border-bottom:dashed 1px #e5e5e5;}
.footer-fs-container ul li a{font-size:0.875em;}
.footer-fs-container ul li a:hover{color:#00a0e9; text-decoration:underline;}

.footer-fs-wrap{position:absolute; width:100%; height:70px; border-top:solid 1px #e5e5e5; background-color:#fff; z-index:80; top:0px; left:0;}
.footer-in{top:-70px;}
.fs-row{width:100%; display:table; padding:5px 0;}
.fs-col{width:25%; display:table-cell; text-align:center; padding:5px; font-size:0.75em;}
.fs-col span{display:block; font-weight:bold; font-size:1rem;}
.fs-col:hover{background-color:#e5f0ff;}
.fs-col:hover span{color:#00a0e9;}

/*footer update*/
.footer-new-wrap{width:100%; background-color:#fafcff; border-top:solid 1px #e5e5e5; margin-top:60px;}
.footer-new-copyright{width:100%; height:70px; line-height:70px; background-color:#0054ea; color:#fff; font-size:0.75em;}

.footer-new-container{float:left; width:23%; height:350px; margin:0 1%; padding-top:60px; font-size:0.75em;}
.footer-new-title{
	color:#606f7d; font-size:1rem; margin-bottom:20px; padding-left:30px; font-weight:500;
	background-repeat:no-repeat; background-size:30px 30px; background-position:0px center;
}
.f-sitemap{background-image:url('../image/icon-footer-new-title-sitemap.png');}
.f-free{background-image:url('../image/icon-footer-new-title-free.png');}
.f-customer{background-image:url('../image/icon-footer-new-title-customer.png');}
.f-download{background-image:url('../image/icon-footer-new-title-download.png');}

.footer-new-title.havelink a{display:inline-block;}
.footer-new-title.havelink a:hover{color:#606f7d; text-decoration:underline;}

.footer-new-container ul li{line-height:2em; text-indent:10px;}
.footer-new-container ul li a:hover{color:#00a0e9; text-decoration:underline;}

.btn-footer-new-free{width:120px; height:40px; line-height:40px; background-color:#0054ea; color:#fff; text-align:center; border-radius:4px; margin-top:20px;}
.btn-footer-new-free:hover{background-color:#0043e1;}

.btn-footer-new-customer{width:95%; height:40px; line-height:40px; margin:0 auto; border:solid 1px #e5e5e5; margin-top:5px; text-align:center;}
.btn-footer-new-customer:hover{border-color:#0054ea; color:#0054ea;}
.btn-footer-new-customer:hover::after{content:' →';}

.btn-footer-new-program{
	padding:10px 20px; margin:5px 0 20px 0; border-radius:4px; background-color:#606f7d; color:#fff; border:0; font-size:1em; font-weight:normal; cursor:pointer; display:block; text-indent:15px;
	background-image:url('../image/icon-footer-new-program.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:5px center;
}
.btn-footer-new-program:hover{background-color:##0054ea; color:#fff; border:0;}
.btn-footer-new-proposal{
	padding:10px 20px; margin:5px 0 10px 0; border-radius:4px; background-color:#606f7d; color:#fff; border:0; font-size:1em; font-weight:normal; cursor:pointer; display:block; text-indent:15px;
	background-image:url('../image/icon-footer-new-proposal.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:5px center;
}
.btn-footer-new-proposal:hover{background-color:#00a0e9; color:#fff; border:0;}

.footer-new-familysite{
	position:absolute; width:180px; height:30px; bottom:60px; left:0px; padding:0 10px; line-height:30px; color:#000; background-color:#fff; border:solid 1px #e5e5e5; border-radius:4px; cursor:pointer; z-index:3;
	background-image:url('../image/icon-footer-new-familysite.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:100% center;
}
.footer-new-familysite:hover{border-color:#00a0e9; color:#00a0e9;}
.fnf-off{background-image:url('../image/icon-footer-new-familysite-off.png');}
.footer-new-familysite-contents{display:none; position:absolute; width:180px; height:250px; bottom:86px; left:0; padding:10px; background-color:#fff; border:solid 1px #e5e5e5; border-radius:4px; z-index:2;}
.footer-new-familysite-contents dl{margin-bottom:10px;}
.footer-new-familysite-contents dt{font-size:0.875rem; font-weight:bold; color:#00a0e9;}
.footer-new-familysite-contents dt:hover{text-decoration:underline; color:#00284c;}


.footer-new-mark{position:absolute; width:126px; height:40px; top:15px; right:10px;}

@media (max-width:1024px){
	.footer-new-container{width:48%; padding-top:30px;}
}
@media (max-width:640px){
	.footer-new-container{width:100%; height:auto; padding:30px 0;}
	.footer-new-container.fnc-sitemap{height:300px;}
	.footer-new-familysite{bottom:0px; width:100%;}
	.footer-new-familysite-contents{bottom:26px; width:100%;}
	.footer-new-copyright{text-align:center;}
	.footer-new-mark{display:none;}
}

/*suv global*/
.sub-wrap{width:100%; margin-top:106px;}
.sub-contents{width:100%; max-width:1120px; padding:0 10px; margin:0 auto;}
.sub-banner{width:100%; height:260px;}
.sub-banner-title{padding-top:40px;}
.sub-banner-title p{margin-top:33px; font-size:1em; color:#ffffff; line-height:1.2em;}

.sub-navi{width:100%; height:50px; border-bottom:solid 1px #e5e5e5; cursor:default;}
.sub-navi-left{height:50px; float:left; line-height:50px; font-size:0.75em; color:#606f7d;}

.sub-navi-right{height:50px; float:right;}
.sub-navi-right ul li{display:inline; height:50px; line-height:50px; margin-right:30px; font-size:1em; color:#606f7d;}
.sub-navi-right ul li.sub-current button{font-weight:bold; color:#000; cursor:default; border-radius:0; border-bottom:solid 4px #004cff;}
.sub-navi-right ul li.sub-current button:hover{border:0; color:#000; border-radius:0; border-bottom:solid 4px ##004cff;}
.sub-navi-right ul li button{font-size:inherit; color:inherit; width:auto; height:46px; border:0; background:none; border-radius:0; font-weight:normal; transition:all 0s linear;}
.sub-navi-right ul li button:hover{border-bottom:solid 4px #014099; color:##004cff; border-radius:0;}

/*mobile login*/
.btn-g-login{display:none; width:60%; height:50px; background-color:#00284c; border-color:#00284c; color:#fff; margin:0 auto;}
.btn-g-login:hover{background-color:#104099; border-color:#104099;}
.g-login{margin-top:106px; padding:60px 0;}
.g-login-container{width:90%; max-width:350px; height:328px; margin:0 auto; border:solid 1px #e5e5e5; border-radius:4px; overflow:hidden;}
.g-login-logo{width:100%; height:60px; display:table; border-bottom:solid 1px #e5e5e5; background-color:#fafcff;}
.g-login-logo div{display:table-cell; height:60px; vertical-align:middle;}
.g-login-logo-img {padding-left:55px; width:188px;}
.g-login-logo-img img{height:30px;}
.g-login-logo-text {text-align:left; font-size:1em; font-weight:bold; color:#00a0e9; padding-left:5px;}
.g-login-row{width:100%; padding:10px; padding-bottom:0;}
.g-login-row input{width:100%; height:40px; background-color:#fff; border:solid 1px #e5e5e5; padding:10px; font-size:0.875em; border-radius:4px;}
.g-login-row input:focus{border-color:#00a0e9;}
.g-login-btn{width:100%; padding-top:20px; text-align:center;}
.g-login-btn input{width:150px; height:50px; font-size:1rem; border-radius:4px;}
.g-login-bottom{width:100%; margin-top:30px; padding:10px; text-align:center; border-top:solid 1px #e5e5e5;}
.btn-g-login-join{padding:10px 20px; font-size:0.875em; text-align:center;}
.g-login-find{font-size:0.75em;}
.g-login-find:hover{color:#00a0e9; text-decoration:underline;}
.g-login-after{width:100%; height:auto; display:none; text-align:center;}
.g-login-after span{font-size:0.75em; line-height:50px; color:#fff; font-weight:bold;}
.g-login-after .btn-login-after {padding:0 10px; height:40px; margin-top:0; line-height:40px; font-size:0.75rem;}

/*my menu*/
.my-wrap{width:100%; max-width:700px; margin:0 auto; padding:60px 0;}
.my-wrap h2{text-align:left; font-weight:400; color:#014099; font-size:1.5em; line-height:1.875em; text-indent:10px;}
.my-row{display:table; width:100%; border-bottom:solid 1px #e5e5e5;}
.my-col01{display:table-cell; width:25%; padding:0 10px; height:50px; line-height:50px; font-size:1em; background-color:#fafcff; font-weight:bold; color:#333; border-left:solid 1px #e5e5e5; border-right:solid 1px #e5e5e5;}
.my-col02{display:table-cell; width:80%; padding:0 10px; height:50px; line-height:50px; font-size:0.75em; border-right:solid 1px #e5e5e5;}
.my-col02 p{display:inline-block;}
.my-col02 input{width:100%; max-width:300px; height:30px; padding:5px; display:inline-block; background-color:#fff; border:solid 1px #e5e5e5; font-size:0.75rem;}
.btn-my-menu{padding:10px 20px; margin:10px 5px; font-size:0.875em;}

.lost-header{width:100%;}
.lost-header h2{text-align:left; font-weight:400; color:#014099; font-size:1.5em; line-height:1em; text-indent:0;}
.lost-container{width:100%; border:solid 1px #e5e5e5; margin-top:20px;}
.lost-row01{width:100%; padding:10px 20px; font-size:1em; font-weight:bold; color:#333; background-color:#fafcff; border-bottom:solid 1px #e5e5e5;}
.lost-row01 span{font-size:0.875em; color:#004cff;}
.lost-row02{width:100%; padding:20px 30px; font-size:0.75em;}
.lost-row02 br{line-height:2em;}


/*main banner*/
.main-banner{
	width:100%; height:609px; overflow:hidden; background-color: #000; margin-top:106px;
	background-image:url('../image/190508_bg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center; position:relative;
}

.main-banner-container{position:absolute; width:100%; height:100%; top:0; left:0;}
.main-banner-container .contents{z-index:2;}

.main-banner-transition{position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background-color:#fff; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.main-banner-transition-animation{animation-name:bntransition; animation-duration:1s;	animation-iteration-count:1;}
@keyframes bntransition{
0%{opacity:0;}
50%{opacity:0.5;}
100%{opacity:0;}
}

.banner-01 .contents h1{margin:0 auto; margin-top:0px; color:#ffffff; text-align:center; font-weight:500; line-height:1.6em; padding-top:12px;}
.banner-01 .contents h1 span{color:#00a0e9;}
.banner-01 .contents p{margin:0 auto; margin-top:120px; font-size:1.5em; color:#ffffff; text-align:center; line-height:1.6em;}
.banner-01 .contents p span{font-weight:bold;}

/*바우처배너*/
.banner01-contents{position:relative; text-align:center; overflow: visible !important;}
.banner01-contents .voucher_p{color:#1e5e77 !important; font-family: 'Black Han Sans', sans-serif;}
.banner01-contents .voucher_p img{margin:10px auto; width:25%;}
.banner01-contents .voucher_h1{position:relative; text-align:center; padding:20px 0;}
.banner01-contents .voucher_background{position:absolute; transform:translate(-50%,-50%); top:60%; left:50%; width:60%; z-index: -1;}
.banner01-contents .voucher_h1 .voucher_discount{position:absolute; top:-10px; left:-200px; width: 200px;}
.banner01-contents .voucher_h1 h1{text-align:left; display:inline-block; margin-left:180px; font-family: 'Black Han Sans', sans-serif; color:#0c3a68;}
.banner01-contents .voucher_h1 h1 b{font-weight:400; position:relative;}
.banner01-contents .voucher_h1 h1 b img{position:absolute; width:100%; bottom:0; left:0;}
.banner01-contents .voucher_small{position:relative; text-align:center; font-size:1em; font-weight:700; color:#333; background:linear-gradient(to top, #9ef6ee 50%, transparent 50%);}
.banner01-contents .voucher_small img{display:inline-block; width:30px; position:absolute; right:30%; bottom:-30px;}
.banner01-contents .voucher_link{display:block; width: 120px; margin:0 auto; margin-top:40px; padding:7px 0; color:#000; font-family: 'Black Han Sans', sans-serif; border:2px solid #777; border-radius:12px;}


.banner02-contents{display:none;}
.banner03-contents{display:none;}
.banner04-contents{display:none;}
.banner05-contents{display:none;}

.btn-main-banner{width:235px; height:60px; margin-top:36px; background:#ff8d00; color:#fff; border-radius:100PX; font-weight:bolder; border:0;}
.btn-main-banner:hover{background:#014099; color:#fff;}

.main-banner-navi{position:absolute; width:100%; height:10px; left:0; bottom:80px; text-align:center; z-index:3; cursor:default; font-size:0;}
.main-banner-novi-dot{width:10px; height:10px; border-radius:5px; background-color:#fff; margin:0 5px; display:inline-block; cursor:default;}
.mbn-current{width:30px; background-color:#00a0e9;}

.btn-left{position:absolute; width:60px; height:60px; top:50%; left: 60px; margin-top:-60px; border-radius:30px; overflow:hidden; background-color:rgba(0,0,0,0.1); z-index:3; cursor:pointer; }
.btn-right{position:absolute; width:60px; height:60px; top:50%; right: 60px; margin-top:-60px; border-radius:30px; overflow:hidden; background-color:rgba(0,0,0,0.1); z-index:3; cursor:pointer; }
.btn-left img, .btn-right img{width:100%;}
.btn-left:hover, .btn-right:hover{background-color:rgba(0,0,0,0.2);}

.progress-bar{position:absolute; width:0; height:4px; top:0; left:0; z-index:10; background-color:rgba(255,255,255,0.3);}
.progress-start{animation-name:progressstart; animation-duration:6s;	animation-iteration-count:1;}
@keyframes progressstart{
0%{width:0%}
100%{width:100%;}
}



/*out login*/
.login{text-align: center; position:absolute; width:1400px; height:70px; transform:translate(-50%,-50%); bottom:-35px; left:50%; background-color:rgb(1 92 255 / 70%); padding:10px 20px; z-index:3;}
.login-text{color:#fff; font-size:1.2em; height:50px; line-height:50px; float:left;}
.login-area{display:inline-block; height:50px; padding-top:5px;}
.login-area button{color:#fff; font-weight:normal;}
.login-area button:hover{color:#fff; border-color:#104099;}
.login-area input{width:160px; height:40px; border-radius:2px; color:#999; padding:0 10px; margin-right:10px; float:left;}
.btn-login{width:160px; height:40px; color:#fff; background-color:#00284c; border-color:#00284c; text-align:center; border-radius:4px; font-size:1.125em; margin-right:10px; float:left;}
.btn-login:hover{border-radius:2px; background-color:#014099;}
.btn-join{width:86px; height:40px; border-radius:4px; background:none; border:solid 1px #fff; font-size:0.875em; margin-right:10px; float:left;}
.btn-join:hover{border-radius:2px; border-color:#105799; background:none;}
.find-password{height:40px; line-height:40px; background:none; font-size:0.875em; border:0;}
.find-password:hover{text-decoration:underline; background:none;}
.btn-login-after{padding:10px 20px; font-weight:bold !important; border-radius:4px;  border:solid 1px #00a0e9; background-color:#fff !important; color:#606f7d !important; font-size:1rem; margin:0 5px;}
.btn-login-after:hover{background-color:#fafcff !important; color:#00a0e9 !important;}
.login-after-text{font-size:1em; color:#fff; margin:0 10px;}

/*main page*/
header.main-header{width:100%; text-align:center; margin-bottom:80px;}
.main-header h2{font-size:2.5em; font-weight:400; color:#002e81;}
.main-header p{font-size:1em; color:#606f7d; margin-top:18px; line-height:1.2em;}


/*main-product*/
.main-product{width:100%; padding:120px 0;}
.main-product-wrap{width:100%; transition:all 0.5s linear;}
.main-product-wrap > div{position:relative; height:430px;}
.main-product-wrap > div a{position:absolute; bottom:0; left:50%; transform:translate(-50%,-50%);}
.mp-desktop, .mp-mobile, .mp-video{width:33.33333333333%; padding:0 3.33333333333%; float:left; text-align:center;}
.mp-mobile:before{content:''; position:absolute; width:1px; height:100%; top:0; left:0; background:linear-gradient(to bottom, #fff, #e5e5e5, #e5e5e5, #fff);}
.mp-mobile:after{content:''; position:absolute; width:1px; height:100%; top:0; right:0; background:linear-gradient(to bottom, #fff, #e5e5e5, #e5e5e5, #fff);}
.mp-desktop img, .mp-mobile img, .mp-video img{width:100%;}
.mp-desktop h3, .mp-mobile h3, .mp-video h3 {margin-top:24px; font-size:1.125em; color:#105799;}
.mp-desktop h3 span, .mp-mobile h3 span, .mp-video h3 span {font-weight:bold;}
.mp-paragrap{width:100%; margin:0 auto; margin-top:10px;}
.mp-paragrap p{font-size:0.80em; line-height:1.4em;}
.btn-desktop, .btn-mobile, .btn-video{width:230px; height:40px; font-size:0.875em; margin-top:-30px;}

/*main-howto*/
.main-howto{width:100%;}
.mh-left, .mh-right{height:430px;}
.mh-left{width:50%; background-color:#0054ea; float:left; padding:60px 60px 40px 0;}
.mh-right{width:50%; float:right;}
.mh-right img{height:100%;}
.mh-right:before{content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:2;}
.main-howto-article{float:right; width:100%; max-width:540px;}
.main-howto-article h2{color:#fff; font-weight:400;}
.main-howto-article p{font-size:1em; line-height:1.5em; color:#fff;}
.mha-p01{margin-top:30px; margin-bottom:30px;}
.main-howto-article p span{font-weight:bold; color:#ffff00;}
.btn-howto{width:400px; height:50px; background:#ffffff08; border:solid 1px #ffffffa6; color:#fff; font-weight:normal; font-size:1em; margin-top:30px;}
.btn-howto:hover{border-color:#00a0e9; color:#fff; background:none;}

.mha-row{width:100%; max-width:450px; display:table; margin-top:10px;}
.mha-col{display:table-cell; width:33.33333333333%; text-align:center; color:#fff; font-size:0.75rem; padding:10px 5px;}
.mha-col img{width:60px; height:60px; display:block; margin:0 auto; margin-bottom:10px;}

/*main-stat*/
.main-stat{width:100%; padding:120px 0; border-bottom:solid 1px #e5e5e5;}
.ms-paragraph{max-width:900px; margin:0 auto; line-height:1.2em;}
.main-stat-wrap{width:100%;}
.ms-first, .ms-second, .ms-third{width:33.33333333333%; float:left; padding:0 5%;}
.ms-third{border-right:solid 1px #d9d9d9; border-left:solid 1px #d9d9d9;}
.ms-image{width:100%;}
.ms-image img{width:100%;}
.ms-image:after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background:rgba(36,43,51,0.7);}
.ms-first-data, .ms-second-data, .ms-third-data{position:absolute; top:50%; margin-top:-30px; left:0; width:100%; height:60px; font-size:60px; font-weight:700; line-height:60px; text-align:center; color:#fff; z-index:3;}
.ms-first-data{letter-spacing:-0.1em;}
.ms-first h3, .ms-second h3, .ms-third h3{text-align:center; font-weight:700; font-size:1.5em; color:#333; margin-top:20px;}
.ms-first-paragraph, .ms-second-paragraph, .ms-third-paragraph{text-align:center; font-size:1em; line-height:1.2em; margin-top:10px; letter-spacing:-0.1em;}

/*main-function*/
.main-function{width:100%; padding:120px 0; border-bottom:solid 1px #ccc; background-color:#fafcff;}
.main-function-wrap{width:100%;}
.mf-box{width:33.33333333333%; padding:4.16666666667% 3.33333333333%; float:left; text-align:center;}
.mf-box img{max-width:80px; display:block; margin:0 auto;}
.mf-box h3{color:#333; margin-top:40px;}
.mf-box p{font-size:0.875em; line-height:1.2em; margin-top:10px;}
.btn-main-function{width:180px; height:60px; font-size:1em; margin:0 auto;}

/*main-function update*/
.main-new-function{width:100%; padding:120px 0; background-color:#fafcff; border-bottom:solid 1px #e5e5e5;}
.main-new-function .contents .main-header{margin-bottom:40px;}
.main-new-function-container{width:100%;}
.ui-area-line{width:100%; height:1px; margin:0 auto; background-color:#e5e5e5;}
.ui-area{
	width:800px; height:476px; margin:0 auto; cursor:default;
	background-image:url('../image/bg-ui-area.png'); background-repeat:no-repeat; background-size:800px 476px; background-position:center bottom;
}
.ui-container{position:absolute; width:740px; height:416px; top:60px; left:30px; z-index:3;}
.ui-wrap{width:100%; height:100%;}

.ui-select-area{width:800px; height:100px; margin:0 auto; text-align:center; margin-top:30px; cursor:default;}
.ui-select{
	width:110px; padding:10px; padding-top:70px; border:0; font-weight:normal; font-size:0.75em; text-align:center; border-radius:0; margin:0 10px; background-color:transparent;
	background-repeat:no-repeat; background-size:40px 40px; background-position:center 10px;
}
.ui-select:hover{background-repeat:no-repeat; background-size:40px 40px; background-position:center 10px; background-color:transparent;}
.uis-current{font-weight:bold; color:#000; background-color:transparent;}
.uis-current-line{position:absolute; width:50px; height:3px; bottom:0; left:0; margin-left:-25px; background-color:#004cff; transition:left 0.1s ease-out;}

.uis-current-line.goto-pc{left:128px;}
.uis-current-line.goto-mobile{left:264px;}
.uis-current-line.goto-video{left:400px;}
.uis-current-line.goto-supporter{left:536px;}
.uis-current-line.goto-customer{left:672px;}

.uis-pc{background-image:url('../image/icon-uis-pc.png');}
.uis-mobile{background-image:url('../image/icon-uis-mobile.png');}
.uis-video{background-image:url('../image/icon-uis-video.png');}
.uis-supporter{background-image:url('../image/icon-uis-supporter.png');}
.uis-customer{background-image:url('../image/icon-uis-customer.png');}

.uis-pc:hover, .uis-pc.uis-current{color:black;background-image:url('../image/icon-uis-pc-current.png');}
.uis-mobile:hover, .uis-mobile.uis-current{color:black;background-image:url('../image/icon-uis-mobile-current.png');}
.uis-video:hover, .uis-video.uis-current{color:black;background-image:url('../image/icon-uis-video-current.png');}
.uis-supporter:hover, .uis-supporter.uis-current{color:black;background-image:url('../image/icon-uis-supporter-current.png');}
.uis-customer:hover, .uis-customer.uis-current{color:black;background-image:url('../image/icon-uis-customer-current.png');}

.ui-bg{
	width:100%; height:100%;
	background-repeat:no-repeat; background-size:100% 100%; background-position:center center;
}
.uibg-pc{background-image:url('../image/uibg-pc.png');}
.uibg-pc-detail{background-image:url('../image/uibg-pc-detail.png');}

.uibg-mobile{background-image:url('../image/uibg-mobile.png');}
.uibg-mobile-detail{background-image:url('../image/uibg-mobile-detail.png');}

.uibg-video{background-image:url('../image/uibg-video.png');}
.uibg-video-detail{background-image:url('../image/uibg-video-detail.png');}

.uibg-supporter{background-image:url('../image/uibg-supporter.png');}
.uibg-supporter-detail{background-image:url('../image/uibg-supporter-detail.png');}

.uibg-customer{background-image:url('../image/uibg-customer.png');}
.uibg-customer-detail{background-image:url('../image/uibg-customer-detail.png');}

.btn-ui-detail{
	position:absolute; width:36px; height:36px; border-radius:18px; overflow:hidden; border:solid 3px; border-color:#fff; cursor:pointer; box-shadow:0px 1px 0px #000; z-index:5;
	background-image:url('../image/icon-btn-ui-detail2.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:center center;
}
.btn-ui-detail:hover{border-color:#fa7272; background-image:url('../image/icon-btn-ui-detail2-hover.png');}

.btn-ui-detail-nonhover{
	position:absolute; width:36px; height:36px; border-radius:18px; overflow:hidden; border:solid 3px; border-color:#fff; cursor:pointer; box-shadow:0px 1px 0px #000; z-index:5;
	background-image:url('../image/icon-btn-ui-detail2.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:center center;
}
.btn-ui-detail-nonhover:hover{border-color:#fa7272; background-image:url('../image/icon-btn-ui-detail2-hover.png');}

.ui-detail-pc-01{top:-15px; left:687px;}
.ui-detail-pc-02{top:30px; left:464px;}
.ui-detail-pc-03{top:28px; left:66px;}

.ui-detail-mobile-01{top:268px; left:38px;}
.ui-detail-mobile-02{top:56px; left:464px;}
.ui-detail-mobile-03{top:68px; left:47px;}

.ui-detail-video-01{top:73px; left:107px;}
.ui-detail-video-02{top:369px; left:320px;}
.ui-detail-video-03{top:84px; left:575px;}

.ui-detail-supporter-01{top:47px; left:520px;}
.ui-detail-supporter-02{top:328px; left:58px;}
.ui-detail-supporter-03{top:46px; left:295px;}

.ui-detail-customer-01{top:31px; left:309px;}
.ui-detail-customer-02{top:361px; left:587px;}
.ui-detail-customer-03{top:31px; left:679px;}

.ui-detail-contents{position:absolute; margin-top:20px; opacity:0; z-index:4;}
.ui-detail-contents-view{margin-top:0; opacity:1;}
.udc-img{background:none;}
.udc-text{background-color:#fff; border-radius:4px; font-size:0.75em; text-align:left; line-height:1.5em; margin-left:5px; box-shadow:1px 1px 0px #666; overflow:hidden;}
.udc-text p{padding:20px; padding-top:10px;}
.ui-detail-contents img{width:100%;}
.ui-detail-contents .udc-text-title{font-weight:bold; font-size:1.2em; background-color:#00a0e9; color:#fff; padding:10px 20px; border-bottom:solid 1px #e5e5e5;}


.pc01-img{width:431px; height:315px; top:80px; left:30px;}
.pc01-text{width:238px; top:80px; left:461px;}
.pc02-img{width:524px; height:315px; top:80px; left:14px;}
.pc02-text{width:188px; top:80px; left:538px;}
.pc03-text{width:430px; top:150px; left:50%; margin-left:-215px;}
.pc03-text a{
	display:inline-block; padding-right:30px; color:#00a0e9; line-height:30px;
	background-image:url('../image/plus.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:100% center;
}
.pc03-text a:hover{text-decoration:underline;}

.mobile01-img{width:300px; height:250px; top:138px; left:80px;}
.mobile01-text{width:300px; top:138px; left:380px;}
.mobile02-img{width:300px; height:250px; top:110px; left:110px;}
.mobile02-text{width:300px; top:110px; left:410px;}
.mobile03-text{width:430px; top:150px; left:50%; margin-left:-215px;}
.mobile03-text a{
	display:inline-block; padding-right:30px; color:#00a0e9; line-height:30px;
	background-image:url('../image/plus.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:100% center;
}
.mobile03-text a:hover{text-decoration:underline;}

.video01-img{width:230px; height:230px; top:129px; left:122px;}
.video01-text{width:300px; top:129px; left:352px;}
.video02-img{width:210px; height:145px; top:162px; left:114px;}
.video02-text{width:300px; top:162px; left:324px;}
.video03-text{width:430px; top:150px; left:50%; margin-left:-215px;}
.video03-text a{
	display:inline-block; padding-right:30px; color:#00a0e9; line-height:30px;
	background-image:url('../image/plus.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:100% center;
}
.video03-text a:hover{text-decoration:underline;}

.supporter01-img{width:318px; height:230px; top:90px; left:77px;}
.supporter01-text{width:268px; top:90px; left:395px;}
.supporter02-img{width:318px; height:230px; top:93px; left:77px;}
.supporter02-text{width:268px; top:93px; left:395px;}
.supporter03-text{width:430px; top:150px; left:50%; margin-left:-215px;}
.supporter03-text a{
	display:inline-block; padding-right:30px; color:#00a0e9; line-height:30px;
	background-image:url('../image/plus.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:100% center;
}
.supporter03-text a:hover{text-decoration:underline;}

.customer01-img{width:318px; height:286px; top:90px; left:77px;}
.customer01-text{width:268px; top:90px; left:395px;}
.customer02-img{width:318px; height:286px; top:93px; left:77px;}
.customer02-text{width:268px; top:93px; left:395px;}
.customer03-text{width:430px; top:150px; left:50%; margin-left:-215px;}
.customer03-text a{
	display:inline-block; padding-right:30px; color:#00a0e9; line-height:30px;
	background-image:url('../image/plus.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:100% center;
}
.customer03-text a:hover{text-decoration:underline;}

@media (max-width:820px){
	.ui-area{width:600px; height:357px; background-size:600px 357px;}
	.ui-container{width:554px; height:311px; top:45px; left:23px;}
	.ui-select-area{width:100%;}
	.ui-select{width:18%; margin:0 1%; float:left;}
	.uis-current-line.goto-pc{left:10%}
	.uis-current-line.goto-mobile{left:30%;}
	.uis-current-line.goto-video{left:50%;}
	.uis-current-line.goto-supporter{left:70%;}
	.uis-current-line.goto-customer{left:90%;}
	.udc-img{display:none;}
	.udc-text{width:80%; top:100px; left:10%; margin:0;}

	.ui-detail-pc-01{top:-15px; left:535px;}
	.ui-detail-pc-02{top:24px; left:333px;}
	.ui-detail-pc-03{top:23px; left:25px;}

	.ui-detail-mobile-01{top:250px; left:12px;}
	.ui-detail-mobile-02{top:25px; left:460px;}
	.ui-detail-mobile-03{top:-5px; left:97px;}

	.ui-detail-video-01{top:32px; left:68px;}
	.ui-detail-video-02{top:270px; left:240px;}
	.ui-detail-video-03{top:40px; left:500px;}

	.ui-detail-supporter-01{top:30px; left:480px;}
	.ui-detail-supporter-02{top:240px; left:27px;}
	.ui-detail-supporter-03{top:15px; left:215px;}

	.ui-detail-customer-01{top:4px; left:302px;}
	.ui-detail-customer-02{top:260px; left:500px;}
	.ui-detail-customer-03{top:23px; left:511px;}

}

@media (max-width:640px){
	.main-new-function{padding:60px 0;}
	.ui-area{width:340px; height:202px;}
	.ui-container{width:314px; height:176px; top:26px; left:13px;}
	.btn-ui-detail{width:20px; height:20px; border-radius:10px; border:solid 2px; border-color:#fff; background-size:20px 20px;}
	.btn-ui-detail-nonhover{width:20px; height:20px; border-radius:10px; border:solid 2px; border-color:#fff; background-size:20px 20px;}
	.udc-text{width:90%; top:20px; left:5%;}
	.ui-detail-contents .udc-text-title{padding:5px 10px; font-size:0.75rem;}
	.udc-text p{padding:10px;}
	.ui-select-area{margin-top:10px; height:80px;}
	.ui-select{padding:0; padding-top:40px; background-size:20px 20px;}
	.ui-select:hover{background-size:20px 20px;}

	.ui-detail-pc-01{top:-15px; left:303px;}
	.ui-detail-pc-02{top:-19px; left:190px;}
	.ui-detail-pc-03{top:-17px; left:25px;}

	.ui-detail-mobile-01{top:140px; left:-18px;}
	.ui-detail-mobile-02{top:29px; left:317px;}
	.ui-detail-mobile-03{top:-5px; left:58px;}

	.ui-detail-video-01{top:31px; left:-10px;}
	.ui-detail-video-02{top:150px; left:304px;}
	.ui-detail-video-03{top:4px; left:257px;}

	.ui-detail-supporter-01{top:10px; left:304px;}
	.ui-detail-supporter-02{top:135px; left:-10px;}
	.ui-detail-supporter-03{top:-11px; left:119px;}

	.ui-detail-customer-01{top:-10px; left:164px;}
	.ui-detail-customer-02{top:144px; left:304px;}
	.ui-detail-customer-03{top:23px; left:304px;}



}







/*main-reference*/
.main-reference{width:100%; padding:120px 0 60px 0;}
.main-reference-img{width:100%; margin-top:60px;}
.main-reference-img img{width:100%;}
.btn-main-reference{width:180px; height:60px; font-size:1em; margin:0 auto; margin-top:60px;}

/*introduce*/
.introduce-solution{width:100%;}
.introduce-banner{padding-left:5%;width: 100vw;              /* 브라우저 전체 너비 */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 420px;             /* 기존 높이 유지 */
  z-index: 1;}
.introduce-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:url('../image/introduce_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-introduce h1{font-weight:400; font-size:2em; color:#ffffff; letter-spacing:-1.5px; line-height:1.2em;}
.introduce-solution-banner{width:100%; height:300px; margin-top:60px; background:url('../image/introduce-solution-banner.png'); background-repeat:no-repeat; background-position:100% 0; background-size:auto 100%;}
.introduce-solution-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-color:#fafbfc; z-index:-1;}
.introduce-solution-banner h2{padding-top:40px; margin-left:40px; font-weight:400; color:#000; font-size:1.5em; line-height:1.2em;}
.introduce-solution-banner p{margin-top:26px; margin-left:40px; font-size:1.125em; color:#014099; line-height:1.5em;}
.introduce-solution-summary{width:100%; margin-top:60px;}
.iss-row{width:100%; height:740px; overflow:hidden;}
.iss-contents{position:absolute; width:33.33333333333%; height:370px; top:0; padding:60px 30px 30px 30px; transition:all 0.5s ease-out; background-color:#fff;}
.iss-01, .iss-02, .iss-03{border-bottom:solid 1px #e5e5e5;}
.iss-01{left:0;}
.iss-02{left:33.33333333333%; border-left:solid 1px #e5e5e5; border-right:solid 1px #e5e5e5;}
.iss-03{left:66.66666666666%;}
.iss-04{left:0; top:370px;}
.iss-05{left:33.33333333333%; top:370px; border-left:solid 1px #e5e5e5; border-right:solid 1px #e5e5e5;}
.iss-06{left:66.66666666666%; top:370px;}
.iss-contents h3{width:100%; text-align:center; font-weight:400; color:#525866; line-height:1.2em; font-size:1.875em;}
.iss-contents p{width:100%; min-height:90px; text-align:left; font-size:0.75em; line-height:1.5em; color:#525866; margin:0 auto; margin-top:30px; word-break:keep-all;}
.btn-iss{width:60px; height:60px; border-radius:30px; background-color:#525866; margin:0 auto; margin-top:20px; cursor:pointer; transition:all 0.1s ease-out;}
.btn-iss:before{content:''; position:absolute; top:50%; left:50%; width:2px; height:30px; margin-top:-15px; margin-left:-1px; background-color:#fff; z-index:2;}
.btn-iss:after{content:''; position:absolute; top:50%; left:50%; width:30px; height:2px; margin-top:-1px; margin-left:-15px; background-color:#fff; z-index:2;}
.btn-iss:hover{background-color:#014099; transform:rotate(90deg);}
.btn-iss-close{width:60px; height:60px; border-radius:30px; background-color:#525866; margin:0 auto; margin-top:20px; cursor:pointer; transform:rotate(45deg); transition:all 0.2s ease-out; z-index:99;}
.btn-iss-close:before{content:''; position:absolute; top:50%; left:50%; width:2px; height:30px; margin-top:-15px; margin-left:-1px; background-color:#fff; z-index:2;}
.btn-iss-close:after{content:''; position:absolute; top:50%; left:50%; width:30px; height:2px; margin-top:-1px; margin-left:-15px; background-color:#fff; z-index:2;}
.btn-iss-close:hover{background-color:#014099;}
.iss-current{transform:rotate(45deg); background-color:#525866;}
.iss-current:hover{transform:rotate(45deg); background-color:#014099;}
.introduce-solution-end{width:100%; margin-bottom:60px; cursor:default;}
.introduce-solution-end h2{text-align:center; font-size:2em; color:#0f5d99; margin-bottom:30px;}
.btn-introduce-end{width:180px; height:60px; margin-right:10px;}
.btn-introduce-advice{width:180px; height:60px; margin-right:10px;}
.iss-detail{display:none; position:absolute; width:66.66666666666%; height:370px; top:0; left:33.33333333333%; background-color:#fff; z-index:-1; padding:30px; transition:linear; border-bottom:solid 1px #e5e5e5; background-color:#fcfcfc; border-left:solid 1px #fff;}
.iss-04-detail, .iss-05-detail, .iss-06-detail{top:370px; border-bottom:0;}
.iss-detail p{font-size:1em; line-height:1.5em; color:#525866; word-break:keep-all;}
.iss-detail-current{left:0; border-left:0; border-right:0; background-color:#f0f3f7;}
.iss-detail-current h3{color:#014099;}

.iss-detail-row{width:100%; display:table; margin:5px 0;}
.iss-detail-icon{display:table-cell; width:20%; text-align:center; font-size:0.75em; padding:10px; vertical-align:middle; background-color:#f0f3f7;}
.iss-detail-icon img{width:50px; height:50px; display:block; margin:0 auto; margin-bottom:10px;}
.iss-detail-text{display:table-cell; width:80%; text-align:left; font-size:0.75em; padding:10px; vertical-align:middle; background-color:#fff;}


.iss-hide-left{left:-33.33333333333%;}
.iss-hide-left-left{left:-66.66666666666%;}
.iss-hide-right{left:100%;}
.iss-hide-right-right{left:133.33333333333%;}

/*introduce mobile*/
.introduce-solution-summary-mobile{display:none; width:100%; padding:45px 0;}
.issm-container{width:100%; height:370px; max-width:370px; margin:0 auto; padding:10px;}
.issm-wrap{width:100%; height:100%; border:solid 1px #e5e5e5; border-radius:4px; overflow:hidden;}
.issm-summary{position:absolute; width:100%; height:100%; top:0; left:0; padding:30px; z-index:1;}
.issm-summary h3{font-size:1.5em; font-weight:400; color:#525866; text-align:center; line-height:1.2em;}
.issm-summary p{font-size:0.875em; color:#525866; line-height:1.5em; margin-top:10px; text-align:justify; word-break:break-all;}

.issm-detail{position:absolute; width:100%; height:100%; top:0; right:-100%; padding:10px 20px; background-color:#fafcff; z-index:2; transition:all 0.5s ease-out;}
.issm-detail-on{right:0;}
.issm-detail-row{width:100%; display:table; margin:5px 0;}
.issm-detail-icon{display:table-cell; width:15%; padding:5px; vertical-align:middle; background-color:#f0f3f7;}
.issm-detail-icon img{width:100%;}
.issm-detail-text{display:table-cell; width:85%; font-size:0.75rem; line-height:1.5em; padding:5px; vertical-align:middle; background-color:#fff;}
.issm-detail-text span{display:block; font-weight:bold; color:#333;}

.btn-issm{position:absolute; width:40px; height:40px; bottom:30px; left:50%; margin-left:-20px; border-radius:20px; background-color:#525866; background-image:url('../image/btn_issm.svg'); background-repeat:no-repeat; background-size:100%; background-position:center; cursor:pointer; z-index:3; transition:all 0.3s ease-out;}
.btn-issm-on{transform:rotate(45deg); background-color:#105799; bottom:10px;}

/*180514 update introduce*/
.introduce-title{
	width:100%; height:320px; padding:40px; margin-top:60px;
	background-image:url('../image/img-introduce-title.png');BORDER-RADIUS:10PX; background-repeat:no-repeat; background-size:1100px 320px; background-position:100% center;
}
.introduce-title h2{width:50%; margin-top:20px; font-weight:400; font-size:2em; letter-spacing:-1px; color:#000; line-height:1.2em;}
.introduce-title h2 span{color:#004cff;}
.introduce-title p{width:50%; margin-top:10px; font-size:0.875em; line-height:1.5em; color:#4f5b66;}
.introduce-title-button-area{position:absolute; bottom:40px; left:40px; width:100%; text-align:left;}
.introduce-title-button-area a{display:inline-block;}
.btn-introduce-title{display:inline-block; margin:0; padding:10px 20px; text-align:center; cursor:pointer; border-radius:4px; background-color:#4f5b66; color:#fff; font-size:0.875em;}
.btn-introduce-title:hover{background-color:#0054ea;}

@media (max-width:960px){
	.introduce-title{padding:20px;}
	.introduce-title h2{margin-top:0;}
	.introduce-title-button-area{bottom:20px; left:20px;}
}
@media (max-width:640px){
	.introduce-title{background-image:url('../image/img-introduce-title-mobile.png'); background-repeat:no-repeat; background-size:100% auto; background-position:center 0;}
	.introduce-title h2{width:100%; font-size:1.5em;}
	.introduce-title p{width:100%;}
}

.introduce-section{width:100%; margin-top:60px; border-top:solid 1px #e5e5e5; padding-top:60px;}
.introduce-section h3{font-weight:400; font-size:1.8em; letter-spacing:-1px; color:#00284c; text-align:center;}
.introduce-section h3 span{color:#004cff;}
.introduce-section p{width:60%; margin:0 auto; margin-top:10px; font-size:0.875em; line-height:1.5em; text-align:center;}
.introduce-section img{width:100%;border-radius:6px;}
.introduce-section-contents-wrap{width:100%; margin-top:30px;}
.isc-title{text-align:center; margin:0 auto; font-size:1em; color:#001d6b; font-weight:bold;margin-top:0px;padding-top:5px;}
.isc-p{font-size:0.75rem; line-height:1.5em;}
.isc-title-sub{text-align:center; margin:12px auto; font-size:15px; color:#004cff; font-weight:bold;}
.isc-img{width:100%; margin:0 auto;}
.isc-end-link{width:100%; text-align:center; margin-top:10px; padding:25px; background-color:#e5f0ff;border-radius:13PX; font-size:1.2em; color:#0351bb; font-weight:bold; letter-spacing:-1px;}
.btn-isc-end{display:inline-block; padding:5px 20px; background-color:#004cff; color:#fff; border-radius:4px; border-top:solid 1px rgba(255,255,255,0.2); font-weight:normal; margin-left:10px;}
.btn-isc-end:hover{background-color:#00284c; border-bottom:solid 1px #000;}

@media (max-width:640px){
	.introduce-section{margin-top:20px;}
	.introduce-section p{width:100%; font-size:0.75em;}
	.introduce-section-contents-wrap{margin-top:30px;}
}

.isc01{height:360px; text-align:center;}
.isc01 .isc-title{
	height:30px; line-height:30px; display:inline-block; padding-left:16px; text-align:left;
	background-image:url('../image/icon-isc-title.pn'); background-repeat:no-repeat; background-size:30px 30px; background-position:0 center;
}
.isc01 .isc-img{max-width:300px; margin-top:30px; margin-bottom:10px;}
.isc01 .isc-p{margin-bottom:15px;}

@media (max-width:640px){
	.isc01 .isc-p{margin-bottom:10px;}
}



.isc02{height:360px; text-align:center;}
.isc02 .isc-img{max-width:300px; margin:20px auto; margin-bottom:10px;}

.isc03-banner{
	width:640px; height:380px; margin:0 auto; margin-top:60px; padding-top:50px;
	background-image:url('../image/bg-isc03-banner.png'); background-repeat:no-repeat; background-size:100% 100%; background-position:center center;
}
.isc03-banner-wrap{width:592px; height:330px; margin:0 auto; overflow:hidden;}
.isc03-banner-container{position:absolute; top:0; left:0; width:1776px; height:330px; transition:none;}
.isc03-banner-contents{float:left; width:592px; height:330px;}

.isc03-navi-wrap{width:100%; text-align:center; padding:20px 0; cursor:default;}
.isc03-navi{display:inline-block; width:12px; height:12px; border-radius:6px; background-color:#4f5b66; cursor:pointer;}
.isc03-navi-current{background-color:#004cff;}

@media (max-width:640px){
	.isc03-banner{width:340px; height:202px; margin-top:30px; padding-top:27px;}
	.isc03-banner-wrap{width:314px; height:175px;}
	.isc03-banner-container{width:942px; height:175px;}
	.isc03-banner-contents{width:314px; height:175px;}
}

.isc04{height:380px; text-align:center;}
.isc04 .isc-title{margin-top:20px;}
.isc04 .isc-img{max-width:300px;}
.isc04 .isc-p{margin-top:10px;}

.isc05{height:280px; text-align:center;}
.isc05 .isc-img{max-width:350px;}
.isc05 .isc-title{margin-top:10px; font-weight:normal; color:#4f5b66; font-size:0.875rem;}

.isc06{height:300px; text-align:center;}
.isc06 .isc-img{max-width:100px;}
.isc06 .isc-title{margin-top:10px; font-size:0.875em; letter-spacing:-1px;}
.isc06 .isc-p{margin-top:10px;}

@media (max-width:640px){.quadrisection.isc06{width:48%; height:300px; margin:0;}}
@media (max-width:440px){.quadrisection.isc06{width:100%; height:auto; margin:0;}}

.isc07-contents{margin-bottom:30px;}
.isc07{height:auto; padding:0px;}
@media (max-width:820px){.quadrisection.isc07{margin:10px 1%;}}
@media (max-width:640px){.quadrisection.isc07{width:48%; margin:5px 1%;}}

.isc08-contents{height:207px; overflow:hidden; margin-bottom:20px;}
.isc08{width:25%; margin:0; padding:0;}
.isc08-end{
	position:absolute; width:100%; height:130px; bottom:0; left:0; z-index:2;
	background-image:url('../image/img-isc08-end.png'); background-repeat:repeat-x; background-size:auto 100%; background-position:0 0;
}
@media (max-width:820px){.quadrisection.isc08{width:50%;}}
@media (max-width:640px){.quadrisection.isc08{width:50%;}}

@media (max-width:640px){
	.trisection{margin:0; height:auto;}
}

.introduce-function{width:100%; padding:60px 0;}
.introduce-function h2{font-size:2em; font-weight:400; color:#105799; text-align:center;}

.function-contents-row{width:80%; margin:0 auto; display:table; border-bottom:solid 1px #e5e5e5; min-height:60px;}
.function-contents-col01, .function-contents-col02{display:table-cell; vertical-align:middle; padding:10px 20px; font-size:0.75rem; line-height:1.5em; word-break:keep-all;}
.function-contents-col01{width:33%; color:#003f91; font-weight:bold; font-size:0.875em; line-height:1.2em; padding-left:87px; background-repeat:no-repeat; background-size:40px 40px; background-position:10px center; background-color:#fafcff; min-height:60px;}
.function-contents-col01:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; z-index:-1; background-color:#fafcff; }
.function-contents-col02{width:75%;}
.function-sub01{width:100%;}
.function-sub02{width:100%; display:none;}
.function-sub03{width:100%; display:none;}
.function-sub04{width:100%; display:none;}
.btn-function-more{width:80%; height:50px; line-height:50px; text-align:center; font-size:1rem; font-weight:; cursor:pointer; border:solid 1px #606f7d4a; margin:0 auto; margin-top:0px;}
.btn-function-more:hover{color:#004cff; text-decoration:;}
.btn-function-more-on{background-color:#0037b7; border-color:#0037b7; border-radius:7px; color:#fff;}
.btn-function-more-on{background-color:#004cff; border-color:#004cff; color:#fff;}
.btn-function-more-on:hover{color:#ffffff;  font-weight: bold;}

.fci01{background-image:url('../image/icon-fci01.png');background-position:22px center;}
.fci02{background-image:url('../image/icon-fci02.png');background-position:22px center;}
.fci03{background-image:url('../image/icon-fci03.png');background-position:22px center;}
.fci04{background-image:url('../image/icon-fci04.png');background-position:22px center;}
.fci05{background-image:url('../image/icon-fci05.png');background-position:22px center;}
.fci06{background-image:url('../image/icon-fci06.png');background-position:22px center;}
.fci07{background-image:url('../image/icon-fci07.png');background-position:22px center;}
.fci08{background-image:url('../image/icon-fci08.png');background-position:22px center;}
.fci09{background-image:url('../image/icon-fci09.png');background-position:22px center;}
.fci10{background-image:url('../image/icon-fci10.png');background-position:22px center;}
.fci11{background-image:url('../image/icon-fci11.png');background-position:22px center;}
.fci12{background-image:url('../image/icon-fci12.png');background-position:22px center;}
.fci13{background-image:url('../image/icon-fci13.png');background-position:22px center;}
.fci14{background-image:url('../image/icon-fci14.png');background-position:22px center;}
.fci15{background-image:url('../image/icon-fci15.png');background-position:22px center;}
.fci16{background-image:url('../image/icon-fci16.png');background-position:22px center;}
.fci17{background-image:url('../image/icon-fci17.png');background-position:22px center;}
.fci18{background-image:url('../image/icon-fci18.png');background-position:22px center;}
.fci19{background-image:url('../image/icon-fci19.png');background-position:22px center;}
.fci20{background-image:url('../image/icon-fci20.png');background-position:22px center;}
.fci21{background-image:url('../image/icon-fci21.png');background-position:22px center;}
.fci22{background-image:url('../image/icon-fci22.png');background-position:22px center;}
.fci23{background-image:url('../image/icon-fci23.png');background-position:22px center;}
.fci24{background-image:url('../image/icon-fci24.png');background-position:22px center;}
.fci25{background-image:url('../image/icon-fci25.png');background-position:22px center;}
.fci26{background-image:url('../image/icon-fci26.png');background-position:22px center;}
.fci27{background-image:url('../image/icon-fci27.png');background-position:22px center;}
.fci28{background-image:url('../image/icon-fci28.png');background-position:22px center;}
.fci29{background-image:url('../image/icon-fci29.png');background-position:22px center;}
.fci30{background-image:url('../image/icon-fci30.png');background-position:22px center;}
.fci31{background-image:url('../image/icon-fci31.png');background-position:22px center;}
.fci32{background-image:url('../image/icon-fci32.png');background-position:22px center;}
.fci33{background-image:url('../image/icon-fci33.png');background-position:22px center;}
.fci34{background-image:url('../image/icon-fci34.png');background-position:22px center;}
.fci35{background-image:url('../image/icon-fci35.png');background-position:22px center;}
.fci36{background-image:url('../image/icon-fci36.png');background-position:22px center;}
.fci37{background-image:url('../image/icon-fci37.png');background-position:22px center;}
.fci38{background-image:url('../image/icon-fci38.png');background-position:22px center;}
.fci39{background-image:url('../image/icon-fci39.png');background-position:22px center;}
.fci40{background-image:url('../image/icon-fci40.png');background-position:22px center;}
.fci41{background-image:url('../image/icon-fci41.png');background-position:22px center;}
.fci42{background-image:url('../image/icon-fci42.png');background-position:22px center;}
.fci43{background-image:url('../image/icon-fci43.png');background-position:22px center;}
.fci44{background-image:url('../image/icon-fci44.png');background-position:22px center;}
.fci45{background-image:url('../image/icon-fci45.png');background-position:22px center;}
.fci46{background-image:url('../image/icon-fci46.png');background-position:22px center;}
.fci47{background-image:url('../image/icon-fci47.png');background-position:22px center;}
.fci48{background-image:url('../image/icon-fci48.png');background-position:22px center;}



.introduce-howto{width:100%; padding:60px 0;}
.introduce-howto h2{font-size:2em; font-weight:400; color:#105799; text-align:center;}
.introduce-howto p.howto-header{text-align:center; margin-top:18px;}
.howto-process-row{width:80%; margin:0 auto; margin-top:60px;}
.howto-process{float:left; width:10%; margin-right:8%; font-size:1em; font-weight:600; line-height:1.2em; word-break:keep-all; text-align:center; background-color:#fff;}
.howto-process img{width:100%; margin-bottom:10px;}
.howto-process-row .howto-process:nth-child(2){color:#606f7d;font-weight:600}
.howto-process-row .howto-process:nth-child(3){color:#606f7d;font-weight:600}
.howto-process-row .howto-process:nth-child(7){color:#606f7d;font-weight:600}

.howto-contents-row{width:100%; display:table; padding:5%;}
.howto-contents-row:nth-child(2n+2){background-color:#fafcff;}
.howto-contents{display:table-cell;}
.howto-image{width:40%; vertical-align:middle;}
.howto-image img{width:100%;border-radius:8px;}
.howto-text{width:60%; vertical-align:top;}
.howto-text p{font-size:0.875em; line-height:1.5em; word-break:keep-all; padding:20px;}
.howto-contents-header{width:100%; display:table; border-bottom:solid 1px #e5e5e5;}
.howto-num{display:table-cell; width:10%; text-align:center; vertical-align:top; font-size:4em; padding-left:10px;}
.hc-supporter .howto-num{color:#004cff;}
.howto-subject{display:table-cell; width:90%; vertical-align:middle; padding-left:10px;}
.howto-subject h3{font-weight:700; font-size:1.5em; margin-bottom:5px; text-align:left; word-break:keep-all;}
.howto-subject span{font-weight:bold; font-size:1em; color:#333; word-break:keep-all;}
.hc-supporter:before{content:'상담원'; position:absolute; top:10px; left:10px; z-index:2; padding:5px 10px; font-size:0.75rem; font-weight:normal; color:#fff; background-color:#004cff;}
.hc-customer:before{content:'고객'; position:absolute; top:10px; left:10px; z-index:2; padding:5px 10px; font-size:0.75rem; font-weight:normal; color:#fff; background-color:#606f7d;}

/*product*/
.product-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:url('../image/product_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-product{padding-left:5%;}
.sb-product h1{font-weight:300; font-size:1.875em; color:#ffffff; letter-spacing:-1px; line-height:1.2em;}
.product-desktop{width:100%; padding:60px 0;}
.product-mobile{width:100%; padding:60px 0;}
.product-video{width:100%; padding:60px 0; }

.product-header{width:100%; border-bottom:solid 1px #e5e5e5;}
.product-main-img{float:left; width:40%; padding:2%;}
.product-main-img img{width:100%;}
.product-main-text{float:left; width:60%; padding:3%;}
.product-main-text h2{font-weight:300; color:#105799;FONT-WEIGHT:400;}
.product-main-text h2 span{color:#004cff;}
.product-main-text p{font-size:0.75em; margin-top:20px; line-height:1.5em; word-break:keep-all;}
.product-main-text p span{font-weight:bold; font-size:1rem; display:block; margin-bottom:10px;}
.product-contents{width:100%; padding:60px 0;}
.product-contents h3{text-align:center; font-weight:400; color:#00284c;}
.product-contents p.product-contents-p{margin-top:10px; text-align:center; margin-bottom:30px;}

.btn-product-desktop{padding:10px 20px;  margin-top:30px;}
.btn-product-desktop-more{margin-top:60px;}

.desktop-function-wrap{width:100%; padding:60px 5% 0 5%;}
.df-box{float:left; width:33.33333333333%; text-align:center;}
.df-box h4{font-weight:400; font-size:1em; margin-top:20px; color:#105799;}
.df-box p{font-size:0.75em; word-break:keep-all; line-height:1.5em;}
.df-box img{width:60px; margin:0 auto;}

.prod-table-header{font-size:1em; font-weight:bold; color:#00a0e9; margin-top:60px; margin-bottom:10px; text-indent:10px;}
.product-table-row{width:100%;}
.prod-thead-01, .prod-thead-02, .prod-thead-03, .prod-tbody-01, .prod-tbody-02, .prod-tbody-03, .prod-tbody-colspan
{
	text-align:center;font-size:0.75rem;padding:10px;float:left;
	box-shadow: 
    1px 0 0 0 #e5e5e5, 
    0 1px 0 0 #e5e5e5, 
    1px 1px 0 0 #e5e5e5,
    1px 0 0 0 #e5e5e5 inset, 
    0 1px 0 0 #e5e5e5 inset;
}
.prod-thead-01, .prod-thead-02, .prod-thead-03{background-color:#fafcff; color:#333;}
.prod-thead-01{width:20%;}
.prod-thead-02{width:40%;}
.prod-thead-03{width:40%;}
.prod-tbody-01{width:20%; background-color:#fafafa; font-weight:bold; color:#333;}
.prod-tbody-02{width:40%;}
.prod-tbody-03{width:40%;}
.prod-tbody-colspan{width:80%;}

.product-mobile-icon{width:50%; margin:0 auto; margin-top:60px;}
.product-mobile-icon img{width:100%;}
.product-mobile-text{width:80%; margin:0 auto; margin-top:30px;}
.product-mobile-text p{font-size:1em; line-height:1.5em; word-break:keep-all; text-align:justify;}
.product-mobile-text p span{font-weight:bold; color:#004cff;}

.product-mobile-point{width:75%; height:200px; padding:3%;border-radius:12px; margin:0 auto; margin-top:30px;overflow:hidden;}
.product-mobile-point:before{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-color:#fafafa; z-index:-1;}
.product-mobile-point h4{font-weight:500px; font-size:1.2em; color:#272a31;}
.product-mobile-point p{width:95%; font-size:1em; line-height:1.5em; margin-top:5px; word-break:keep-all;}
.pic01{background:url('../image/product_mobile_pic01.'); background-repeat:no-repeat; background-size:auto 100%; background-position:right center;}
.pic02{background:url('../image/product_mobile_pic02.'); background-repeat:no-repeat; background-size:auto 100%; background-position:right center;}
.pic03{background:url('../image/product_mobile_pic03.'); background-repeat:no-repeat; background-size:auto 100%; background-position:right center;}

.vpic01{background:url('../image/product_video_pic01.'); background-repeat:no-repeat; background-size:auto 100%; background-position:right center;}
.vpic02{background:url('../image/product_video_pic02.'); background-repeat:no-repeat; background-size:auto 100%; background-position:right center;}
.vpic03{background:url('../image/product_video_pic03.'); background-repeat:no-repeat; background-size:auto 100%; background-position:right center;}

.mobile-function-row{width:80%; display:table; border-bottom:solid 1px #e5e5e5; margin:0 auto; font-size:0.75em; line-height:2em;}
.product-contents > .mobile-function-row:nth-child(2n+2){background-color:#fafcff;}
.mfr-first{border-top:solid 1px #e5e5e5;}
.mobile-function-col01{width:30%; display:table-cell; height:auto; padding:30px 2%; text-align:center; vertical-align:middle; font-weight:bold; color:#004cff;}
.mobile-function-col02{width:70%; display:table-cell; height:auto; padding:30px 2%; text-align:left; word-break:keep-all;}
.mobile-function-col02 span{font-weight:bold; color:#105799;}

/*180521 update*/
table.product-contents-table{width:100%; max-width:720px; margin:0 auto; box-sizing:border-box; border-collapse:collapse; border-top:solid 1px #e5e5e5; border-bottom:solid 1px #e5e5e5; margin-top:30px;}
td.pct-header{width:25%; text-align:center; vertical-align:middle; font-weight:bold; color:#00284c; font-size:0.875em; border-bottom:solid 1px #e5e5e5; padding:10px; background-color:#fafcff;}
td.pct-contents{width:75%; border-bottom:solid 1px #e5e5e5; text-align:left; font-weight:normal; font-size:0.75em; color:#4f5b66; padding:20px;}
td.pct-contents span{color:#004cff;}
.margin-top-0{margin-top:0;}


/*buy*/
.buy-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:url('../image/buy_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-buy{padding-left:5%;}
.sb-buy h1{font-weight:300; font-size:1.875em; color:#014099; letter-spacing:-1px; line-height:1.2em;}
.buy-price{width:100%; padding:60px 5% 120px 5%;}
.buy-price-tab-wrap{width:100%; border-bottom:solid 1px #e5e5e5;}
.btn-buy-price-tab{float:left; width:50%; height:60px; line-height:60px; text-align:center; color:#666; font-weight:normal; background:none; border-radius:0; border:0;}
.btn-buy-price-tab:hover{background:none; font-weight:bold; color:#105799;}
.bpt-current{color:#105799; font-weight:bold; cursor:default;}
.bpt-current:hover{color:#105799;}
.bpt-current-marker{position:absolute; bottom:-2px; width:100px; height:4px; margin-left:-50px; background-color:#105799; transition:all 0.2s ease-out;}
.bpt01-current{left:25%;}
.bpt02-current{left:50%;}
.bpt03-current{left:75%;}
.buy-price-contents{width:100%; margin-top:30px;}
.bpc-asp{width:100%;}
.bpc-rental{width:100%; display:none;}
.bpc-solution{width:100%; display:none;}
.buy-price-contents h3{font-weight:400; color:#00a0e9;}
.buy-price-contents p{font-size:0.875em; line-height:1.5em; margin-top:10px;}
.buy-price-contents h4{position:relative; font-size:1.2em; font-weight:400; color:#606f7d; margin-top:60px; margin-bottom:10px; text-indent:20px;}
.buy-price-contents h4 span{color:#00a0e9;}
.buy-price-contents h4:before{content:''; position:absolute; top:50%; left:10px; margin-top:-3px; width:6px; height:6px; border-radius:3px; background-color:#00a0e9; font-size:0;}
.buy-price-contents h4 span.bpc-add{color:#e54d00;}
.bpc-container{float:left; width:25%;}
.bpc-container div{
	box-shadow: 
    1px 0 0 0 #e5e5e5, 
    0 1px 0 0 #e5e5e5, 
    1px 1px 0 0 #e5e5e5,
    1px 0 0 0 #e5e5e5 inset, 
    0 1px 0 0 #e5e5e5 inset;
}
.bpc-container-colspan75{width:75%;}
.bpc-container-colspan375{width:37.5%;}
.bpc-thead{width:100%; padding:10px; text-align:center; background-color:#fafcff; font-size:1em; font-weight:400;}
.bpc-red{color:#333; background-color:#fff7f2;}
.bpc-tbody{width:100%; padding:10px; text-align:center; font-size:1em; font-weight:bold;}
.bpc-tbody span{font-size:0.8em; color:#ff6666; font-weight:normal; text-decoration:line-through;}
.bpc-tbody-rental{font-size:0.8em; font-weight:normal; text-align:left; line-height:1.5em; padding:20px;}
.bpc-colspan{width:100%; padding:10px; text-align:left; font-size:0.75em; background-color:#fcfdff;}
.bpc-colspan{
	box-shadow: 
    1px 0 0 0 #e5e5e5, 
    0 1px 0 0 #e5e5e5, 
    1px 1px 0 0 #e5e5e5,
    1px 0 0 0 #e5e5e5 inset, 
    0 1px 0 0 #e5e5e5 inset;
}
.bpc-end-text{width:100%; text-align:right; font-size:0.75em; margin-top:10px;}
.btn-bpc{width:180px; height:60px; margin:0 5px;}

.buy-buy{width:100%; padding:60px 5% 120px 5%;}
.buy-buy h2{font-weight:400; color:#00284c; font-size:1.5em; line-height:1.2em;}
.buy-step-wrap{width:100%; margin-top:60px; text-align:center;}
.buy-step-wrap:after{content:''; position:absolute; width:70%; height:40px; top:0; left:15%; font-size:0; z-index:-1; border-bottom:dashed 1px #ccc;}
.buy-step{float:left; width:33.33333333333%; padding:0 20px; text-align:center; font-weight:700; font-size:1.2em; color:#333;}
.step-num{width:100px; height:100px; border-radius:40px; border:solid 4px #e5f3ff; margin:0 auto; text-align:center; margin-bottom:10px; background-color:#fff;}
.step-num img{width:58px; margin:0 auto; margin-top:20px;}

.buy-buy h3{width:100%; font-weight:400; color:#00284c; font-size:1.2em; margin-top:60px; padding-bottom:20px; border-bottom:solid 1px #e5e5e5;}
.buy-buy h3 span{color:#105799;}
.buy-detail{width:100%; margin-top:30px;}
.step-img{float:left; width:25%; padding-left:2%;}
.step-img img{width:100%;}
.step-text{float:left; width:75%; word-break:keep-all; padding:0 3%;}
.step-text h4{font-weight:700; font-size:1.2em; color:#004cff;}
.step-text p{font-size:0.8em; line-height:1.5em;}
.step-text p span{font-weight:bold; color:#333; display:block; font-size:1rem; margin-bottom:5px;}
.btn-step{height:40px; margin-top:30px;padding:0 10px;}
.btn-step02{width:120px; height:30px;  border-radius:4px; background-color:#105799; color:#fff; text-align:center; font-size:0.75em; margin-top:10px; line-height:30px; cursor:pointer; transition:linear;}
.step02-bankinfo{width:100%; margin-top:20px; border-top:solid 1px #e5e5e5; padding:5px 0; font-size:1rem; font-weight:400; transition:linear;}
.step02-bankinfo span{font-size:0.75em; font-weight:normal;}
.step02-bankinfo span.banknum{font-size:1rem; font-weight:bold; color:#105799;}
.btn-step03{height:40px; margin-top:30px; padding:0 10px;}

.btn-buy-download{width:180px; height:60px; margin-right:10px;}
.btn-buy-free{width:180px; height:60px;}

@media (max-width:640px){
	.btn-step, .btn-step03{margin-top:10px;}
}

/*buy price 180416 update*/
.buy-price-tab-area{width:50%; max-width:300px; margin:0 auto; border:solid 1px #e5e5e5; border-radius:4px; overflow:hidden; background-color:#e5e5e5;}
.buy-price-tab{width:50%; padding:10px 0; float:left; text-align:center; font-size:1em; cursor:pointer; color:#fff;}
.bptn-current{background-color:#fff; color:#00a0e9; font-weight:bold; cursor:default; border-radius:4px;}
.bpi01{display:block;}
.bpi02{display:none;}

.buy-price-info{width:100%; font-size:0.75em; text-align:center; margin-top:30px;}

.buy-price-asp-service{width:100%; padding:0 10px;}

.bpas-info-text{position:absolute; width:100%; height:30px; top:-30px; left:0; line-height:30px; text-align:right; font-size:0.75em;}

.asp-price-container{width:100%; border:solid 1px #e5e5e5; margin-top:60px; box-shadow:0px 3px 3px rgba(0,0,0,0.1);}
.apc-title{float:left; width:32%; height:280px;}
.apc-function{float:left; width:38%; height:280px;}
.apc-price{float:left; width:30%; height:280px; background-color:#00a0e9; color:#fff;}
.apc-mobile .apc-price{background-color:#014099;}
.apc-video .apc-price{background-color:#00284c;}

.v-line-90{position:absolute; width:1px; height:260px; top:10px; left:32%; background-color:#e5e5e5;}

.sale{
	position:absolute; z-index:3; width:81px; height:91px; top:0px; right:5px; font-size:20px; font-weight:bold; text-align:center; color:#00a0e9; padding-top:10px; letter-spacing:-1px;
	background-image:url('../image/bg-sale.png'); background-repeat:no-repeat; background-size:100% 100%; background-position:center 0px;
}

.apc-mobile .sale{background-image:url('../image/bg-sale-mobile.png'); color:#104099;}
.apc-video .sale{background-image:url('../image/bg-sale-video.png'); color:#00284c;}

.sale .counter{font-size:30px;}
.sale-text{display:block; font-size:14px; color:#000; line-height:5px;}
.sale-info{margin-left:20px; margin-top:10px; font-size:0.75rem; font-weight:bold; color:#fa7272;}
.default-price{position:absolute; top:66px; left:56px; color:#ccefff; text-decoration:line-through; font-size:12px;}
.default-price.prem{left:36px;}
.sale-info02{
	position:absolute; width:100%; height:30px; bottom:70px; left:20px; line-height:30px; font-size:12px; font-weight:bold; color:#66accc; text-indent:40px;
	background-image:url('../image/icon-sale-info-02.png'); background-repeat:no-repeat; background-size:40px; 30px; background-position:0 center;
}

.buy_event_container{position:absolute; top:210px; left:95%; width:200px; height:300px; background-color:#00a0e9; transition:top 0.3s ease-out;}
.buy_event_container img{width:100%;}


.apc-title p{margin-top:30px; margin-left:20px; font-size:0.875em; line-height:1.3em; font-weight:bold;}
.apc-title a{margin: 5px;}
.apc-title-title{margin-left:20px; font-size:1.5em; color:#00284c; font-weight:700; letter-spacing:-1px;}
.apc-title-title span{color:#00a0e9;}
.apc-title-title span.add-mobile{display:block; color:#e54d00;}
.apc-title-button{position:absolute; width:130px; height:40px; bottom:20px; border-radius:20px; text-align:center; line-height:38px; cursor:pointer; font-size:0.875em;}
.apc-title-button.advice{left:20px; background-color:#00a0e9; color:#fff;}
.apc-title-button.buy{left:153px; background-color:#fff; border:solid 2px #00a0e9;}

.apc-mobile .apc-title-button.advice{background-color:#014099;}
.apc-mobile .apc-title-button.buy{border:solid 2px #104099;}

.apc-video .apc-title-button.advice{background-color:#00284c;}
.apc-video .apc-title-button.buy{border:solid 2px #00284c;}

.apc-function-title{font-weight:bold; font-size:1.2em; margin-top:30px; margin-left:20px; margin-bottom:10px; color:#00284c;}
.apc-function-content{
	width:100%; height:40px; line-height:40px; padding-left:65px; font-size:0.875em; font-weight:bold; color:#66accc;
	background-repeat:no-repeat; background-size:40px 40px; background-position:20px center;
}
.basic01{background-image:url('../image/icon-basic01.png');}
.basic02{background-image:url('../image/icon-basic02.png');}
.basic03{background-image:url('../image/icon-basic03.png');}
.basic04{background-image:url('../image/icon-basic04.png');}

.pro01{background-image:url('../image/icon-pro01.png');}
.pro02{background-image:url('../image/icon-basic02.png');}
.pro03{background-image:url('../image/icon-pro03.png');}
.pro04{background-image:url('../image/icon-basic04.png');}

.premium01{background-image:url('../image/icon-pro01.png');}
.premium02{background-image:url('../image/icon-pre02.png');}
.premium03{background-image:url('../image/icon-pre03.png');}
.premium04{background-image:url('../image/icon-basic04.png');}

.mobile01{background-image:url('../image/icon-mobile01.png');}
.mobile02{background-image:url('../image/icon-mobile02.png');}
.mobile03{background-image:url('../image/icon-mobile03.png');}
.mobile04{background-image:url('../image/icon-mobile04.png');}

.video01{background-image:url('../image/icon-video01.png');}
.video02{background-image:url('../image/icon-video02.png');}
.video03{background-image:url('../image/icon-video03.png');}
.video04{background-image:url('../image/icon-video04.png');}
.video05{background-image:url('../image/icon-video05.png');}
.video06{background-image:url('../image/icon-video06.png');}


.apc-function-button{
	position:absolute; width:150px; height:40px; bottom:10px; left:50%; margin-left:-75px; line-height:38px; font-size:0.875em; text-indent:30px;
	background-image:url('../image/icon-apc-function-button.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:0 center;
}
.apc-function-button:hover{color:#00a0e9; text-decoration:underline;}

.apc-mobile .apc-function-button{background-image:url('../image/icon-apc-function-button-mobile.png');}
.apc-video .apc-function-button{background-image:url('../image/icon-apc-function-button-video.png');}

.asp-price-num{margin-top:30px; margin-left:20px; font-size:0.875em; font-weight:bold;}
.asp-price-price{width:100%; margin-top:30px; text-align:center; font-size:2.5em; font-weight:500;}
.asp-price-price span{font-size:0.75em; font-weight:normal; margin-left:5px;}
.asp-price-subtext{width:100%; text-align:center; margin-bottom:10px;}

.asp-price-etc{width:100%; height:50px; overflow:hidden; cursor:pointer;}
.asp-price-etc-container{position:absolute; width:200%; height:50px; top:0; left:0; transition:all 0.3s ease-out;}
.asp-price-etctext{float:left; width:50%; height:50px; text-align:center; line-height:50px;}
.asp-price-etctext:hover{color:#ffff00;}
.ape-after{left:-100%;}
.ape-icon{background-image:url('../image/icon-asp-price-etctext.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:95% center;}
.ape-icon-back{background-image:url('../image/icon-asp-price-etctext-back.png'); background-repeat:no-repeat; background-size:30px 30px; background-position:5% center;}

.apc-mobile .ape-icon{background-image:url('../image/icon-asp-price-etctext-mobile.png');}
.apc-mobile .ape-icon-back{background-image:url('../image/icon-asp-price-etctext-back-mobile.png');}

.apc-video .ape-icon{background-image:url('../image/icon-asp-price-etctext-video.png');}
.apc-video .ape-icon-back{background-image:url('../image/icon-asp-price-etctext-back-video.png');}

.buy-price-solution-service{width:100%; display:none; margin-top:30px;}
.buy-price-solution-service h4{position:relative; font-size:1.2em; font-weight:400; color:#606f7d; margin-top:60px; margin-bottom:10px; text-indent:20px;}
.buy-price-solution-service h4:before{content:''; position:absolute; top:50%; left:10px; margin-top:-3px; width:6px; height:6px; border-radius:3px; background-color:#00a0e9; font-size:0;}

.solution-table{margin:0; padding:0; width:100%; border-spacing:0px; border-collapse:collapse;}
.solution-table td{border:solid 1px #e5e5e5; border-left:0; border-right:0; vertical-align:middle; padding:20px 10px; font-size:0.75em; text-align:center;}
.table-head td{font-size:1em; font-weight:bold; background-color:#fafcff;}
.solution-table .table-head td.col03{color:#00a0e9;}

.solution-table td.col01{width:10%; font-size:0.875em; font-weight:bold; color:#000; border-right:solid 1px #e5e5e5;}
.solution-table td.col02{width:45%; border-right:solid 1px #e5e5e5;}
.solution-table td.col03{width:45%; color:#000; font-weight:bold;}

.special td {padding:10px 0;}
.special ul{width:90%; margin:0 auto;}
.special ul li{
	float:left; width:50%; height:30px; text-align:left; padding-left:21px;
	background-image:url('../image/dot-solution-special.png'); background-repeat:no-repeat; background-size:6px 6px; background-position:10px 5px;
}

.solution-table td.imgarea{padding:30px;}
.solution-table td.imgarea img{width:100%;}

.solution-table-mobile{display:none; width:100%; margin-bottom:20px;}
.solution-table-mobile div{width:100%; padding:10px; border-bottom:solid 1px #e5e5e5;  text-align:center; font-size:0.75em;}
.stm-head{background-color:#fafcff; font-size:1em !important; font-weight:bold;}
.stm-head.stm-blue{color:#00a0e9 !important;}
.stm-subject{color:#000; font-weight:bold;}
.stm-contents ul li{
	width:100%; text-align:left; text-indent:21px; line-height:30px;
	background-image:url('../image/dot-solution-special.png'); background-repeat:no-repeat; background-size:6px 6px; background-position:10px center;
}
.stm-contents img{width:100%;}

.solution-good{
	float:left; width:23%; margin:10px 1%; height:200px; padding:20px; padding-top:120px; text-align:center; font-size:0.75em; border:solid 1px #e5e5e5;
	background-repeat:no-repeat; background-size:80px 80px; background-position:center 20px;
}
.solution-good span{color:#00a0e9;}
.good01{background-image:url('../image/icon-solution-good01.png');}
.good02{background-image:url('../image/icon-solution-good02.png');}
.good03{background-image:url('../image/icon-solution-good03.png');}
.good04{background-image:url('../image/icon-solution-good04.png');}
.good05{background-image:url('../image/icon-solution-good05.png');}
.good06{background-image:url('../image/icon-solution-good06.png');}
.good07{background-image:url('../image/icon-solution-good07.png');}
.good08{background-image:url('../image/icon-solution-good08.png');}
.good09{background-image:url('../image/icon-solution-good09.png');}
.good10{background-image:url('../image/icon-solution-good10.png');}

.solution-prepare{float:left; width:48%; margin:10px 1%; padding:20px;  border:solid 1px #e5e5e5;}
.solution-prepare ul li {
	text-align:left; font-size:0.75em; text-indent:15px; width:100%; display:block; line-height:30px;
	background-image:url('../image/icon-solution-prepare.png'); background-repeat:no-repeat; background-size:10px 10px; background-position:0px center;
}
.solution-prepare.prepare-end{float:none; clear:both; width:98%; background:none; text-indent:0px; font-size:0.75em;}

.solution-ask{font-size:0.875em; color:#00a0e9;}
.solution-info{
	float:left; width:31.33333333333333%; height:150px; margin:10px 1%; padding:20px; padding-top:110px; text-align:center; font-size:0.875em; border:solid 1px #e5e5e5;
	background-repeat:no-repeat; background-size:60px 60px; background-position:center 30px;
}

.solution-info.tell{background-image:url('../image/icon-solution-info-tell.png');}
.solution-info.email{background-image:url('../image/icon-solution-info-email.png');}
.solution-info.gotoreference{background-image:url('../image/icon-solution-info-more.png');}
.solution-info.gotoreference:hover{color:#00a0e9; text-decoration:underline;background-image:url('../image/icon-solution-info-more-hover.png');}

@media (max-width:1430px){
	.buy_event_container{display:none !important;}
}

@media (max-width:1024px){
	.apc-title{padding:10px;}
	.apc-title p{margin:0; margin-top:10px;}
	.apc-title-title{margin:0;}
	.apc-title-button{width:45%;}
	.apc-title-button.advice{left:10px;}
	.apc-title-button.buy{left:51%;}
	.apc-function{padding:10px;}
	.apc-function-title{margin-top:10px; margin-left:0;}
	.apc-function-content{background-position:0px center; text-indent:45px;}

	.asp-price-price{font-size:2em;}
	.sale-info{margin-left:0;}

	.special ul li{height:auto; float:none; width:100%;}
	.solution-good{width:48%;}
	.solution-prepare{width:48%;}
	.solution-info{width:48%;}
	.solution-info.gotoreference{width:98%;}
}

@media (max-width:820px){
	.apc-title, .apc-function, .apc-price{float:none; width:100%;}
	.apc-title, .apc-function{border-bottom:solid 1px #e5e5e5;}
	.v-line-90{display:none;}
	.apc-price{padding-top:10px;}
	.sale{width:61px; height:71px; font-size:10px; padding-top:7px;}
	.sale .counter{font-size:20px;}
	.sale-text{font-size:10px; line-height:10px;}
	.default-price{left:0; width:100%; text-align:center;}
	.default-price.prem{left:0;}

	.solution-table{display:none;}
	.solution-table-mobile{display:block;}
}

@media (max-width:640px){
	.buy-price-tab-area{width:100%;}
	.solution-good{padding:10px; padding-top:100px; background-size:60px 60px; background-position:center 30px;}
	.solution-info{padding:10px; padding-top:100px; background-size:40px 40px; background-position:center 30px; font-size:0.75em;}
	.solution-prepare{width:98%;}
	.solution-ask{display:none;}
}







/*download*/
.download-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:url('../image/download_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-download{padding-left:5%;}
.sb-download h1{font-weight:300; font-size:1.875em; color:#ffffff; letter-spacing:-1px; line-height:1.2em;}
.download-center{width:100%; padding:60px 0; text-align:center;}
.download-center h2{font-size:2em; font-weight:400; color:#105799;}
.download-center p{font-size:1em; font-weight:100; color:#606f7d; margin-top:18px;}
.download-center-contents-wrap{width:100%; padding:0 3.125%;}
.dcc-container{width:33.33333333333%; float:left; padding:60px;}
.dcc-container img{max-width:120px; margin:0 auto; display:block;}
.dcc-container h3{font-weight:500; font-size:1em; color:#333; line-height:1em; margin-top:10px; text-align:center;}
.btn-dcc{width:100px; height:40px; background-color:#014099; font-weight:bold; color:#fff; border-radius:4px; margin-top:20px;}
.btn-dcc:hover{border-radius:8px;}

.download-download{width:100%; max-width:720px; margin:0 auto; padding:60px 0 120px 0;}
.download-download h3{font-size:1.5em; font-weight:400; color:#00284c; text-align:left; width:100%; border-bottom:solid 1px #e5e5e5; padding-bottom:10px; margin-top:60px;}
.download-download ul li{width:100%; height:60px; line-height:60px; border-bottom:solid 1px #e5e5e5; padding:0 10px; color:#606f7d; cursor:default;}
.download-download ul li:hover{background-color:#fafcff;}
.download-download ul li button{float:right; height:50px; padding:5px 10px; margin-top:5px; background-color:#f7f7f7; border:solid 1px #f7f7f7; text-indent:45px; text-align:left; font-weight:bold; font-size:0.875em; line-height:45px; border-radius:4px; color:#4d4d4d;}
.btn-download-exe{background:url('../image/btn-download-exe.svg'); background-repeat:no-repeat; background-size:50px 50px; background-position:0 0;}
.btn-download-apk{background:url('../image/btn-download-apk.svg'); background-repeat:no-repeat; background-size:50px 50px; background-position:0 0;}
.btn-download-pdf{background:url('../image/btn-download-pdf.svg'); background-repeat:no-repeat; background-size:50px 50px; background-position:0 0;}
.btn-download-ios{background:url('../image/btn-download-ios.svg'); background-repeat:no-repeat; background-size:50px 50px; background-position:0 0;}
.btn-download-doc{background:url('../image/btn-download-doc.svg'); background-repeat:no-repeat; background-size:50px 50px; background-position:0 0;}
.btn-download-pkg{background:url('../image/btn-download-pkg.svg'); background-repeat:no-repeat; background-size:50px 50px; background-position:0 0;}
.download-download ul li button:hover{border:solid 1px #e5e5e5; border-radius:8px;}

/*reference*/
.reference-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:url('../image/reference_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-reference{padding-left:5%;}
.sb-reference h1{font-weight:300; font-size:1.875em; color:#ffffff; letter-spacing:-1px; line-height:1.2em;}
.reference-wrap{width:100%; padding:60px 0;}
.reference-header{width:100%; height:300px; overflow:hidden; background-image:url('../image/reference_header.png'); background-repeat:no-repeat; background-size:33% auto; background-position:5% bottom; border-bottom:solid 4px #014099; padding:30px;}
.reference-header:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-color:#f2f9ff; z-index:-1;}
.reference-header h2{font-weight:100; width:100%; font-size:2em; text-align:right; color:#333; line-height:1.5em; z-index:2;}
.reference-header h2 span{color:#014099; font-weight:400;}
.reference-contents{width:100%; margin-top:60px; padding:0 5% 20px 5%; border-bottom:solid 1px #e5e5e5;}
.reference-img{float:left; width:40%;}
.reference-img img{width:100%;}
.reference-text{float:left; width:60%; padding:20px; padding-top:0;}
.reference-text h3{font-weight:400; font-size:1.2em; color:#014099; display:inline-block;}
.btn-reference{padding:0 10px; height:30px; text-align:center; line-height:30px; display:inline-block; background:none; border:0; font-size:0.75em; }
.alink{color:#00a0e9; background-image:url('../image/icon-btn-reference.svg'); background-repeat:no-repeat; background-size:auto 10px; background-position:100% center; padding-right:15px;}
.alink:hover{text-decoration:underline; background-color:#fff;}
.nlink{color:#666; cursor:default;}
.nlink:hover{background-color:#fff; color:#666;}
.reference-text p{margin-top:20px; word-break:keep-all; font-size:0.75em; line-height:1.5em;}
.reference-text p span{color:#333; font-size:0.875rem; line-height:2em; font-weight:bold; display:block; margin-bottom:10px;}

/*reference thumb*/
.reference-thumb-container{float:left; width:22.5%; margin:20px 1.25%; border:solid 1px #e5e5e5; cursor:pointer; overflow:hidden;}
.thumb-image{width:100%; background-color:#fff; padding:10px;}
.thumb-image img{width:100%;}
.thumb-image-hover{background-color:#fafcff;}
.thumb-subject{width:100%; height:30px; line-height:30px; overflow:hidden; text-align:center; font-size:1em; white-space:nowrap; text-overflow:ellipsis; background-color:#004cff; color:#fff;}
.thumb-subject-hover{font-weight:bold; color:#fff; background-color:#00a0e9;}
.reference-thumb-container:hover{border-color:#00a0e9; box-shadow:4px 4px 4px rgba(0,0,0,0.2);}

/*180510 update*/
.reference-thumb-detail{position:absolute; width:100%; height:100%; top:0; left:100%; padding:20px; background-color:#fff; cursor:pointer; z-index:2; transition:left 0.2s ease-out;}
.rtd-hover{left:0;}
.rtd-subject{width:100%; font-size:1em; font-weight:bold; color:#00a0e9;}
.rtd-description{width:100%; font-size:0.875em; line-height:1.5em; margin-top:5px; color:#000;}
.rtd-paragraph{width:100%; font-size:0.75em; line-height:1.5em; margin-top:10px;}

@media (max-width:1024px){
	.reference-thumb-detail{padding:10px;}
	.rtd-description{font-size:0.75em;}
	.rtd-subject{font-size:0.75em;}
}

.reference-detail-wrap{width:100%; text-align:center;}
.reference-detail-wrap h3{display:inline-block; font-size:1.5em; font-weight:bold; line-height:1.2em;}
.reference-detail-wrap img{display:block; margin:60px auto; width:100%; max-width:650px;}
.reference-detail-wrap p{width:100%; max-width:700px; margin:30px auto; text-align:justify; line-height:1.5em; font-size:0.875em;}
.reference-detail-summary{width:100%; max-width:700px; margin:5px auto; display:table;}
.rds-thead{display:table-cell; width:20%; text-align:center; vertical-align:middle; font-weight:bold; color:#fff; padding:10px 5px; background-color:#606f7d;}
.rds-tbody{display:table-cell; width:80%; text-align:left; vertical-align:top; padding:10px; background-color:#fafcff; color:#333;}
.reference-detail-button{width:100%; max-width:700px; margin:0 auto; text-align:right; border-top:solid 1px #e5e5e5; padding:10px;}
.btn-reference-detail{padding:10px 20px; font-size:0.875em; font-weight:normal;}
.reference-h-line{width:100%; max-width:700px; margin:0 auto; margin-top:30px; height:1px; font-size:0; background-color:#e5e5e5;}


/*customer*/
.sb-customer{padding-left:5%; }
.customer-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-image:url('../image/customer_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-customer h1{font-weight:400; font-size:1.875em; color:#ffffff; letter-spacing:-1px; line-height:1.2em;}
.customer-center{width:100%; padding:60px 0;}
.customer-center h2{text-align:center; font-size:2em; color:#606f7d;}
.customer-center h2 span{color:#014099;}
.customer-center p{text-align:center; margin-top:10px;}
.customer-center-contents-wrap{width:100%; margin-top:60px;}
.ccc-container{float:left; width:360px; height:500px; padding:60px; border:solid 2px #e5e5e5; margin-right:10px;}
.ccc-container h3{text-align:center; font-weight:300; color:#0043e1; font-size:2em;}
.ccc-container p{width:100%; text-align:center; font-size:0.75em; color:#606f7d; margin-top:10px; line-height:1.5em;}
.ccc-container form{margin:0 auto; padding:0; text-align:center;}
.ccc-container form .ccc-input{width:100%; height:40px; border:solid 2px #e5e5e5; padding:10px; font-size:0.875em; color:#999999; margin-top:20px; box-sizing:border-box; text-align:left;}
.ccc-container form .ccc-input:focus{border-color:#00a0e9;}
.ccc-container form .ccc-text{width:100%; height:120px; resize:none; overflow-y:auto; border:solid 2px #e5e5e5; padding:10px; font-size:0.875em; color:#999999; margin-top:10px; box-sizing:border-box; text-align:left;}
.ccc-container form .ccc-text:focus{border-color:#00a0e9;}
.ccc-container form .btn-ccc-send {width:168px; height:50px; border-radius:4px; box-sizing:border-box; background-color:#004cff; text-align:center; margin:0 auto; margin-top:10px; color:#fff; font-size:1em; cursor:pointer;}
.ccc-container form .btn-ccc-send:hover{background-color:#0043e1;}
.ccc-container ul{margin-top:20px;}
.ccc-container ul li{width:100%; padding:10px; font-size:0.75em; color:#606f7d; text-align:left; border-bottom:solid 1px #e5e5e5; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.btn-ccc-notice{width:120px; height:30px;border-radius:4px !important; background-color:#004cff; color:#fff; font-weight:400; text-align:center; margin-top:18px; border-radius:0; border:0;}
.btn-ccc-notice:hover{background-color:#0043e1; border-radius:4px; border:0; color:#fff;}
.ccc-link-container{width:100%; margin-top:10px;}
.btn-ccc-link{width:113px; height:146px; margin-right:10px; text-align:center; padding:10px; color:#fff; font-size:1em; font-weight:normal; float:left; border:0; border-radius:0;}
.btn-ccc-link:hover{color:#fff;}
.btn-ccc-link img{display:block; width:50px; margin:20px auto;}
.ccc-free{background-color:#0043e1; margin-top:10px;}
.ccc-free:hover{background-color:#013680;}
.ccc-advice{background-color:#606f7d; margin-top:10px; margin-right:0;}
.ccc-advice:hover{background-color:#4d5863;}
.ccc-broad{background-color:#7d7d7d;}
.ccc-broad:hover{background-color:#636363;}
.ccc-faq{background-color:#0540cb; margin-right:0;}
.ccc-faq:hover{background-color:#0d4e80;}

.customer-free-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-image:url('../image/free_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-free h1{font-weight:300; font-size:1.875em; color:#014099; letter-spacing:-1px; line-height:1.2em;}
.sb-free{padding-left:5%; }
.customer-free{width:100%; padding:60px 0; max-width:700px; margin:0 auto;}
.customer-free h2{text-align:left; font-weight:400; color:#014099; font-size:1.5em; line-height:1.875em; text-indent:10px;}
.customer-free form{margin:0; padding:0;}

.customer-free-header{width:100%; text-align:center; margin-bottom:60px;}
.customer-free-header h2{text-align:center; color:#00a0e9;}


.row{width:100%; border-left:solid 1px #e5e5e5; border-right:solid 1px #e5e5e5; border-bottom:solid 1px #e5e5e5;}
.etc-row{display:none;}
.row-first{border-top:solid 1px #e5e5e5; margin-top:20px;}
.thead{width:20%; border-right:solid 1px #e5e5e5; height:58px; line-height:50px; font-weight:400; font-size: 1em; color:#606f7d; text-align:left; float:left; padding:0 10px;}
.col{float:left; height:50px; padding:0 10px;}
.col input{width:300px; height:30px; background-color:#fff; border:solid 1px #e5e5e5;border-radius:5px; font-size:0.875em; padding:0 10px; line-height:30px;}
.col input:focus{border-color:#004cff;border-radius:5px;}
.col span{margin-left:10px; font-size:0.75em; line-height:50px;}
.prod-list{float:left; width:26%; line-height:50px; padding-left:10px; font-size:0.75em;}
.prod-mid{border-left:solid 1px #e5e5e5; border-right:solid 1px #e5e5e5;}
.prod-radio{width:1em; height:1em; margin-right:5px;}
.terms-row{width:100%; height:30px; margin-top:10px;}
.tr-left{float:left; line-height:30px; font-weight:bold; font-size:0.75em; color:#666666;}
.tr-left input[type="checkbox"]{margin-right:5px;}
.tr-center{float:center; line-height:30px; font-weight:bold; font-size:0.75em; color:#666666;}
.tr-center input[type="checkbox"]{margin-right:5px;}
.free-notice{width:100%; text-align:left; font-size:0.875em; color:#00a0e9; margin:10px 0;}
.btn-terms{float:right; height:30px; padding:0 10px; line-height:30px; font-size:0.75em; font-weight:normal; background-color:#606f7d; color:#fff; border:0;}
.btn-terms:hover{background-color:#4d5863; color:#fff;}
.btn-terms-center{float:center; height:30px; padding:0 10px; line-height:30px; font-size:0.75em; font-weight:normal; background-color:#7c8085; color:#fff; border:0;}
.btn-terms-center:hover{background-color:#68727f; color:#fff;}
.free-info-text{width:83%; font-size:0.75em; line-height:1.5em; margin:0 auto; margin-top:60px; word-break:keep-all;}
.btn-free{width:170px; height:50px; border-radius:4px; margin-top:60px; font-size:1rem; cursor:pointer; transition:all 0.2s ease-out;}

.customer-advice{width:100%; padding:60px 0; max-width:700px; margin:0 auto;}
.customer-advice h2{text-align:left; font-weight:400; color:#014099; font-size:1.5em; line-height:1.875em; text-indent:10px;}
.customer-advice p{text-indent:10px; font-size:0.875em; text-align:left;}
.advice-select{width:300px; height:30px; font-size:0.75em; padding:0 10px; border:solid 1px #e5e5e5;}
.text-box{height:140px;}
.text-box-col{height:140px; width:80%; padding:10px;}
.advice-textarea{width:100%; height:100%; border-radius:5px;box-sizing:border-box; resize:none; overflow-y:auto; border:solid 1px #e5e5e5; padding:10px;}
.btn-advice{width:190px; height:50px; border-radius:4px; margin-top:60px; font-size:1rem; cursor:pointer; transition:all 0.2s ease-out;}

.customer-notice{width:100%; padding:60px 5% 120px 5%;}
.board-row{width:100%; border-bottom:solid 2px #e5e5e5; overflow-x:hidden;}
.board-row:hover{background-color:#fafcff;}
.board-number{width:5%; height:60px; padding:0 10px; line-height:60px; display:inline-block; overflow:hidden; text-align:center; float:left; font-size:0.875em; color:#999;}
.board-subject{width:75%; height:60px; padding:0 10px; line-height:60px; display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; float:left;}
.board-subject a{font-size:1em; font-weight:normal;}
.board-subject a:hover{color:#014099;}
.board-date{width:19%; height:60px; text-align:center; font-size:0.9em; line-height:60px; color:#999; display:inline-block; overflow:hidden; float:right;}
.board-page{width:100%; text-align:center; cursor:default; margin-top:30px;}
.board-page a span{font-size:1em; font-weight:normal; padding:5px 10px; border:solid 1px #e5e5e5; font-weight:bold; color:#606f7d; margin:0 2.5px;}
.board-page a:hover span {background-color:#fafcff; color:#00a0e9;}

.notice-view-row{display:table; width:100%; padding:10px 0; border-top:solid 1px #e5e5e5;}
.notice-view-row div{display:table-cell; vertical-align:middle;}
.notice-view-col01{ width:10%; text-align:center; font-weight:bold; overflow:hidden;}
.notice-view-col02{width:90%;}
.notice-view-col03{width:60%; font-size:0.75em;}
.notice-view-col04{width:20%; font-size:0.75em;}
.notice-view-contents{width:100%; padding:40px 20px; border-top:solid 1px #e5e5e5; font-size:0.875em;}

.notice-view-button{width:100%; padding:10px; text-align:right; border-top:solid 1px #e5e5e5;}
.btn-notice-view{padding:10px 20px; font-size:0.875em;}

.customer-broad{width:100%; padding:60px 5% 120px 5%;}
.broad-wrap{width:100%;}
.broad-container{width:22.5%; margin:20px 1.25%; float:left; padding:10px; border:solid 1px #e5e5e5;}
.broad-container a img{width:100%; display:block;}
.broad-container a p{width:100%; text-align:center; font-size:0.875em; line-height:1.5em; font-weight:normal; margin-top:10px; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.broad-container:hover{background-color:#fafcff;}
.broad-container:hover a p{font-weight:bold;}
/*.broad-wrap .broad-container:nth-child(3n+3){margin-right:0;}*/

.customer-faq{width:100%; padding:60px 5% 120px 5%;}
.customer-faq h2{text-align:left; font-weight:400; color:#014099; font-size:1.5em; line-height:1.875em; text-indent:10px;}
.faq-row{width:100%; border-bottom:solid 1px #e5e5e5; transition:linear;}
.faq-q{width:100%; padding:10px; font-size:1em; font-weight:400; color:#606f7d; cursor:pointer; transition:linear;}
.faq-q:before{content:'▼'; position:absolute; width:20px; height:20px; top:5px; right:5px; z-index:2; font-size:14px; text-align:center; line-height:20px; color:#999;}
.faq-q:hover:before{color:#00a0e9;}
.faq-q span{color:#014099; font-weight:600;}
.faq-current{color:#014099; font-weight:bold;}
.faq-current:before{content:'▲';}
.faq-a{display:none; width:100%; padding:20px; background-color:#fafcff; font-size:0.8em; line-height:1.5em; font-weight:normal; margin-top:10px; border-top:solid 1px #e5e5e5; transition:linear; cursor:default; color:#000;}
.faq-a a{font-weight:bold;}
.faq-a a:hover{text-decoration:underline;}
@media (max-width: 820px){
	.faq-a img{width:100%;}
}
.faq-wrap{width:100%; margin-top:60px; padding:10px;}
.faq-btn-wrap{width:100%;}
.btn-faq-cate{float:left; padding:10px 20px; background-color:#fafcff; text-align:center; border:solid 1px #e5e5e5; font-size:1em; color:#666; border-radius:0;}
.btn-faq-cate:hover{color:#000; background-color:#fafcff;}
.btn-faq-current{background-color:#fff; font-weight:bold; color:#000; border-bottom:solid 1px #fff;}
.btn-faq-current:hover{background-color:#fff;}
.faq-blank{position:absolute; width:100%; height:1px; bottom:0; left:0; background-color:#e5e5e5; z-index:-1;}
.faq-contents-wrap{width:100%; padding:20px; border:solid 1px #e5e5e5; border-top:0;}

/*회사소개 등*/
.sb-company{padding-left:5%; }
.company-banner:after{content:''; position:absolute; width:100%; height:100%; top:0; left:0; background-image:url('../image/company_banner.png'); background-repeat:no-repeat; background-size:auto 100%; background-position:center; z-index:-1;}
.sb-company h1{font-weight:300; font-size:1.875em; color:#fff; letter-spacing:-0.1em; line-height:1.2em;}
.company-wrap{width:100%; padding:60px 0;}

.company-header{width:100%; padding-bottom:10px; border-bottom:solid 1px #e5e5e5; margin-top:60px;}
.company-header h2{font-weight:400; color:#00284c; text-align:center; font-size:2.5em; line-height:1.2em;}
.company-header p{font-size:1em; text-align:center; margin-top:10px;}
.koino{padding:40px; padding-bottom:40px; border-bottom:0; margin-top:0 !important; background-image:url('../image/company-header.png'); background-repeat:no-repeat; background-size:cover; background-position:center;}
.koino h2 span{color:#00a0e9;}
.koino p{font-size:1.5em !important; color:#000;}
.company-from{width:100%; padding:0 20px; text-align:right; font-size:0.75em; margin-top:30px;}
.company-paragraph{padding:20px; padding-bottom:0; line-height:1.5em; font-size:0.875em; text-align:justify;}

.company-business-row{width:100%; padding:40px; display:table;}
.bgblue{background-color:#fafcff;}
.cb-image{display:table-cell; vertical-align:middle; width:40%;}
.cb-image img{width:100%;}
.sub-grade img{width:60%; margin:0 auto;}
.cb-text{display:table-cell; vertical-align:middle; width:60%;}
.cb-text h3{font-weight:normal; color:#00a0e9; font-size:2em;}
.cb-text h3 span{font-size:0.875rem; color:#606f7d; padding-left:10px;}
.subcopy{display:block; padding-top:5px; padding-bottom:20px; color:#333; font-size:1rem; font-weight:bold;}
.cb-text p{font-size:0.75em; line-height:1.5em;}
.cb-btn{width:100%; border-top:dashed 1px #e5e5e5; margin-top:20px; padding:5px 0;}
.btn-company-business{padding:10px 20px; margin:5px;}

.company-tech-container{width:100%; margin:20px 0; padding:20px; border:solid 1px #e5e5e5;}
.company-tech-container:nth-child(2n+2){background-color:#fafcff;}
.company-tech-container span{display:block; font-weight:bold; font-size:1em; color:#333;}
.company-tech-container p{font-size:0.75em; line-height:1.5em; width:80%; margin-top:20px;}
.tech-logo{position:absolute; width:200px; height:60px; top:50%; right:20px; margin-top:-30px;}

.company-terms{max-width:700px; margin:0 auto;}
.company-terms h1{font-size:2em; font-weight:400; text-align:center; padding-bottom:10px; border-bottom:solid 1px #e5e5e5; color:#00a0e9;}
.company-terms span{font-size:1em; font-weight:bold; display:block; padding:20px 0; color:#333;}
.company-terms p{font-size:0.75em; line-height:1.5em; text-align:justify;}
.company-terms p br{line-height:2em;}

.sitemap-container{float:left; width:22.5%; margin:0 1.25%; margin-bottom:50px; padding-bottom:20px; height:220px; overflow:hidden; border-bottom:solid 1px #e5e5e5;}
.sitemap-container:before{content:''; position:absolute; width:30px; height:4px; top:0; left:10px; background-color:#00a0e9; z-index:3;}
.sitemap-container h4{font-size:1em; font-weight:bold; color:#333; background-color:#fafcff; padding:10px; border-bottom:solid 1px #eee;}
.sitemap-container ul{width:100%;}
.sitemap-container ul li{width:100%; padding:5px 10px; padding-bottom:0;}
.sitemap-container ul li a{font-size:0.75em;}
.sitemap-container ul li a:hover{color:#00a0e9; text-decoration:underline;}


/*메인화면*/
@media (max-width:1280px){
	.mh-left{padding:60px 30px;}
}

@media (max-width:1400px){
	.login{height: 130px; bottom: -65px;}
	.login-text{float: none; display: block;}
}
/*
@media (max-width:1140px){
	.login{height:auto;}
	.login-text{float:none; display:block;}
	.login-area{float:none;}
}*/

@media (max-width:1100px){
	.mh-left{padding:30px;}
	.btn-howto{margin-top:30px;}
}

@media (max-width:1024px){
	.navi{display:none;}
	.menu-all-container{overflow-y:auto;}
	.menu-container{width:50%;}
}

@media (max-width:820px){
	.top-info{display:none;}
	.g-login{margin-top:62px;}
	.logo{height:32px; margin-top:15px;}
	.menu-all-container{width:70%; right:-70%;}
	.menu-all-container-on{right:0;}
	.menu-container{width:100%; height:auto;}
	.menu-all-mobile{display:block;}
	.main-banner{margin-top:63px;}
	.banner-01 .contents h1{font-size:2em; line-height:1.5em; padding-top:0;}
	.banner-01 .contents p{font-size:1em; margin-top:120px;}
	.banner-01 .contents p br{display:none;}

	.login-text{text-align:center; font-size:0.875em;}
	.btn-g-login{display:block;}
	.g-login-after{display:block;}
	.login-area{display:none;}
	.main-header h2{font-size:2em;}
	.mp-desktop, .mp-mobile, .mp-video{width:100%; float:none; display:block;}
	.mp-mobile{margin:60px 0;}
	.mp-mobile:before, .mp-mobile:after{display:none;}
	.mh-left{width:100%; height:auto;}
	.main-howto-article{float:none; max-width:100%;}
	.mh-right{display:none;}
	.ms-first, .ms-second, .ms-third{width:100%; float:none; display:block;}
	.ms-third{margin:30px 0; border:0;}
	.mf-box{width:100%; max-width:300px; margin:0 auto; padding:10px 0; margin-bottom:40px; float:none;}
	.main-howto-article p{word-break:break-all; text-align:justify;}
	.main-howto-article p br{display:none;}
	.main-stat-wrap div p br{display:none;}
	.main-product, .main-stat, .main-function, .main-reference{padding:60px 0;}

	.footer-info{padding:0;}
	.footer-info .contents{padding:0;}

	.footer-info-left{width:100%; float:none; height:auto;}
	.footer-info-left ul{width:100%;}
	.footer-info-left ul li{width:50%; text-align:center; margin-right:0; display:inline-block; float:left; height:40px; border:solid 1px #fff; background-color:#fafcff;}
	.footer-info-right{display:none;}
	.footer-copyright-left{float:none;}
	.footer-copyright-left p{text-align:center;}
	.footer-copyright-right{display:none;}

	.modal{width:90%; height:90%; top:5%; left:5%; margin-top:0; margin-left:0;}

	header.main-header{margin-bottom:40px;}
	.mf-box h3{margin-top:10px;}
	.main-header p{margin-top:9px;}
	.main-function .btn-textonly{margin:0 auto;}
	.main-reference .btn-textonly{margin-bottom:0; margin-top:20px;}
	.main-reference-img{margin-top:0;}
	.mf-box p br{display:none;}
}

@media (max-width:640px){
	.btn-left{top:400px; left:10px; margin-top:0;}
	.btn-right{top:400px; right:10px; margin-top:0;}
}

/*서브페이지*/

@media (max-width:1140px){
	.iss-contents h3{font-size:1.5em;}
	.ccc-container{width:32.66666666666667%; margin-right:1%; height:480px;}
	.btn-ccc-link{width:49%; margin-right:2%}
	.ccc-advice, .ccc-faq{margin-right:0;}
}


@media (max-width:1024px){
.iss-row{height:740px;}
.iss-contents{height:370px; padding:20px; padding-top:30px;}
.iss-contents h3 br{display:none;}
.iss-contents p{width:100%;}
.iss-04, .iss-05, .iss-06{top:370px;}
.iss-detail{height:370px;}
.iss-04-detail, .iss-05-detail, .iss-06-detail{top:370px;}
.introduce-solution > .h60-div{display:none;}

.product-table-row{display:table;}
.prod-tbody-01, .prod-tbody-02, .prod-tbody-03, .prod-tbody-colspan, .prod-thead-01, .prod-thead-02, .prod-thead-03{display:table-cell; vertical-align:middle; float:none;}
.bpc-container{width:50%;}
.mw100{width:100%;}
.mw100 > .mh300{min-height:0;}

.ccc-container{width:48%; margin:0 1%;}
.ccc-container.last-menu.mw100{width:98%; margin:0 1%; margin-top:30px;}
.ccc-link-container{width:50%; margin:10px auto;}

.broad-container{width:48%; margin:10px 1%;}
}

@media (max-width:820px){
	.sub-wrap{margin-top:62px;}
	.sub-banner{display:none;}
	.sub-navi-right{display:none;}
	.introduce-solution-banner{padding:20px; text-align:center; margin-top:30px;}
	.introduce-solution-banner:after{z-index:2; background-color:rgba(255,255,255,0.9);}
	.introduce-solution-banner h2, .introduce-solution-banner p{z-index:3; margin:0; padding:0; margin-top:10px;}
	.introduce-solution-banner h2 br, .introduce-solution-banner p br{display:none; }
	.introduce-solution-summary{display:none;}
	.introduce-solution-summary-mobile{display:block;}
	.introduce-solution-end{margin-bottom:30px;}
	.introduce-solution-end h2{font-size:1.5em;}
	.btn-introduce-end, .btn-introduce-advice{width:40%;}
	.btn-introduce-end{margin-right:5px;}
	.introduce-solution > .h-line-60{display:none;}

	.introduce-function{padding:30px 0;}
	.introduce-function h2{font-size:1.5em;}
	.introduce-function > .h60-div{height:30px;}
	.function-contents-row{width:100%;}
	.function-contents-col01, .function-contents-col02{display:block; width:100%; min-height:60px;}
	.function-contents-col01{line-height:60px; font-size:1.2em;}
	.fci14{line-height:1.2em;}
	.btn-function-more{width:100%; margin-top:10px;}

	.introduce-howto{padding:30px 0;}
	.introduce-howto h2{font-size:1.5em;}
	.introduce-howto p.howto-header{margin-top:5px; font-size:0.875em;}
	.howto-process-row{width:100%; display:table; margin-top:30px;}
	.howto-process{display:table-cell; margin:0; padding:10px 20px; width:33.33333333333%;}
	.m-block{display:table-row;}
	.howto-contents{width:100%; display:block;}
	.howto-contents-row{margin-bottom:30px;}

	.product-desktop{padding:30px 0;}
	.product-contents{padding:30px 0;}
	.product-main-img{float:none; width:80%; margin:0 auto;}
	.product-main-text{float:none; width:100%; padding:5%;}
	.product-main-text h2 span{display:block;}
	.desktop-function-wrap{padding:0;}
	.df-box{float:none; width:100%; margin-top:30px;}
	.btn-product-desktop{margin-top:10px;}
	.product-mobile-icon{width:90%; margin:0 auto; margin-top:30px;}
	.product-mobile-text{width:90%; margin:0 auto; margin-top:30px;}
	.product-mobile-point{width:100%; padding:10px 5%; height:auto; background-image:none;}
	.product-mobile-point p{width:100%; font-size:0.75em;}
	.mobile-function-row{width:90%;}
	.mobile-function-col01, .mobile-function-col02{display:block; width:100%; padding:10px;}
	.mobile-function-col01{border-bottom:solid 1px #e5e5e5; background-color:#00a0e9; color:#fff; font-size:1rem;}

	.buy-price{padding:30px 0;}
	.btn-buy-price-tab{overflow-y:hidden;}
	.buy-price-contents p {word-break:break-all; text-align:justify;}
	.buy-price-contents h4{text-indent:0; text-align:center;}
	.buy-price-contents h4:before{display:none;}
	.bpc-container, .bpc-colspan{float:none; width:100%; margin:0 auto;}
	.btn-bpc{width:40%; margin:0 2.5px;}

	.buy-buy{padding:30px 0;}
	.buy-buy h2{text-align:center;}
	.buy-step-wrap{margin-top:30px;}
	.buy-step{padding:0 10px; font-size:0.75em; font-weight:normal;}
	.buy-buy h3{font-size:1em;}
	.step-img{float:none; width:70%; margin:0 auto;}
	.step-text{float:none; width:100%; margin-top:20px;}
	.step-text h4{font-size:1em;}
	.step-text p{word-break:break-all;}
	.step-text p span{font-size:0.875rem;}
	.btn-buy-download{width:40%; margin-right:5px;}
	.btn-buy-free{width:40%;}
	.buy-buy > .h-line-60{margin:30px 0;}

	.download-download{padding:30px 0;}
	.download-download h3{font-size:1.2em; margin-top:30px;}
	.download-download ul li{font-size:0.75em; height:50px; line-height:50px;}
	.download-download ul li button{font-size:0.75em; height:40px; background-size:40px 40px; line-height:35px; text-indent:35px;}

	.reference-wrap{padding:30px 0;}
	.reference-thumb-container{width:48%; margin:10px 1%;}
	.reference-detail-wrap img{margin:30px auto;}
	.rds-thead, .rds-tbody{display:block; width:100%;}

	.customer-center{padding:30px 0 30px 0;}
	.customer-center h2{font-size:1.5em;}
	.customer-center h2 span{display:block;}
	.customer-center-contents-wrap{margin-top:30px;}
	.ccc-container{width:100%; margin:0; height:auto; float:none; padding:30px; margin-bottom:30px;}
	.ccc-container h3{font-size:1.5em;}
	.ccc-link-container{width:90%;}

	.customer-free{padding:30px 0;}
	.customer-free > form > .h10-div{display:none;}
	.row{margin-bottom:30px; border-top:solid 1px #e5e5e5;}
	.col{float:none; width:100%; height:auto; padding:10px;}
	.col input{width:100%; height:auto;}
	.col span{line-height:1em;}
	.thead{float:none; width:100%; border-right:0; border-bottom:solid 1px #e5e5e5; font-weight:bold; background-color:#fafcff;}
	.prod-list{float:none; width:100%;}
	.prod-mid{border:0; border-top:solid 1px #e5e5e5; border-bottom:solid 1px #e5e5e5;}
	.free-info-text{width:100%; margin-top:30px;}
	.btn-free{margin-top:30px;}

	.customer-advice{padding:30px 0;}
	.customer-advice > form >.h10-div{display:none;}
	.text-box{height:auto;}
	.text-box-col{height:200px;}
	.btn-advice{margin-top:30px;}

	.row-first{margin-top:5px;}

	.customer-notice{padding:30px 0;}
	.board-row{border-bottom:solid 1px #e5e5e5;}
	.board-number{display:none;}
	.board-subject{height:40px; line-height:40px; font-size:0.75em;}
	.board-date{height:40px; line-height:40px; font-size:0.75em;}

	.notice-view-col01{display:none !important;}
	.notice-view-col02{width:100%;}
	.notice-view-col03{width:80%;}

	.customer-broad{padding:30px 0;}
	.broad-container{width:100%; margin-right:0%; float:none; height:auto;}

	.customer-faq{padding:30px 0;}
	.faq-q{font-size:0.75em; padding-right:20px;}
	.faq-a{font-size:1em;}
	.faq-wrap{margin-top:30px; padding:0;}
	.faq-btn-wrap{display:table;}
	.btn-faq-cate{display:table-cell; float:none; font-size:0.75em; padding:10px;}

	.sitemap-container{width:100%; margin:0; margin-bottom:40px; float:none; height:auto;}

	.company-header h2{font-size:1.8em;}
	.company-header h2 br{display:none;}
	.koino p{font-size:1em !important;}
	.company-paragraph{font-size:0.75em;}


	.cb-image{display:table-row; width:100%;}
	.cb-image img{width:80%; margin:0 auto;}
	.cb-text{display:table-row; width:100%;}
	.cb-text h3{font-size:1.5em;}
	.cb-text p{text-align:justify;}
	.cb-text p br{display:none;}
	.cb-btn{text-align:center;}
	.company-business-row{padding:20px;}

	.company-tech-container p{width:100%;}
	.tech-logo{position:relative; margin:0 auto; margin-top:20px;}


	.my-wrap{padding:30px 0;}
	.my-row{display:block; border:0; margin-bottom:20px;}
	.my-col01{display:block; width:100%; text-align:center; border:solid 1px #e5e5e5;}
	.my-col02{display:block; width:100%; text-align:center; border:0; height:auto; padding:10px 0; line-height:1em;}
	.my-col02 input{max-width:100%; display:block;}
	.my-col02 p{display:block; margin-top:10px;}

}

@media (max-width:640px){
	.reference-thumb-container{width:98%; margin:10px 1%;}
	.rtd-subject{font-size:1em;}
	.rtd-description{font-size:0.875em;}
}

/*index pop*/
.index-popup-area {
	position:fixed; top:15%; left:5%; width:90%; max-width:518px; height:645px; z-index:81;
}
.index-pop{position:absolute; top:0; left:0; width:100%; max-width:518px; z-index:81;}
.index-pop-wrap{position:relative; width:100%; height:100%;}
.index-pop-close{position:absolute; width:20px; height:20px; top:10px; right:10px; cursor:pointer; z-index:2;
	background-image:url('../image/png/btn_menu_close.png'); background-repeat:no-repeat; background-size:100% 100%; background-position:center;
}
.index-pop-contents{width:100%; height:100%;}
.index-pop-contents img{width:100%;}
.check-pop{position:absolute; width:100%; top:10px; right:40px;}
.check-pop-box {float:right; height:20px; line-height:20px; padding-right:5px; padding-top:1px;}
.check-pop-box input{cursor:pointer;}
.check-pop-text{float:right; height:20px; line-height:20px; font-size:12px;}
.check-pop-text label{cursor:pointer;}
.btn-pop-link{position:absolute; width:46%; bottom:8px; left:33px;}
.btn-pop-link img{width:100%;}

@media (max-width:640px){
	.index-popup-area {top:15%; left:50%; margin-left:-150px; max-width:300px; height:374px;}
	.check-pop{top:5px;}
	.btn-pop-link{bottom:5px; left:17px;}
}

/*180510 update function*/
.new-function-wrap{width:100%; max-width:960px; margin:0 auto; margin-top:60px;}
.new-function-container{float:left; width:31.33333333333333%; height:280px; margin:0 1%; padding:20px;}
.new-function-image{width:90px; margin:20px auto;}
.new-function-image img{width:100%;}
.new-function-title{font-size:1em; font-weight:bold; color:#00a0e9; text-align:center;}
.new-function-paragraph{margin-top:5px; font-size:0.75em; line-height:1.5em; text-align:center;}

@media (max-width:820px){
	.new-function-container{width:48%;}
}
@media (max-width:640px){
	.new-function-container{width:98%; height:auto; margin:20px 1%;}
}

/*190509 update*/

.sub-contents.full{max-width:100%; padding:0;}
.sub-contents.full .contents{width:100%; max-width:1120px; padding:0px 10px; margin:0 auto;}
section.introduce-section.renew{border-top:0; padding-bottom:60px;}
section.introduce-section > p > span{color:#51545d; font-weight:bold;}
section.introduce-content{width:100%; height:368px; border-bottom:solid 1px rgba(0,0,0,0.1);}
section.introduce-content.blu{background-color:#fafcff;}
section.introduce-content.gradient{background-image:url('../image/bg-introduce-content-gradient.png'); background-repeat:repeat-x; backgound-size:1px 100%; background-position:0 bottom;}
section.introduce-content.end{border-bottom:0;}
section.introduce-content > .contents{height:100%;}

.ic-text-wrap{width:100%; max-width:442px; z-index:2; padding-top:60px;}
h4.ic-text-h4{font-size:28px; color:#000; font-weight:400; line-height:1em; padding-bottom:24px;}
h4.ic-text-h4:before{content:''; position:absolute; width:64px; height:3px; background:#004cff; top:-10px; left:1px;}
p.ic-text-p{font-size:14px; font-weight:300; letter-spacing:-1px; padding-top:10px;}
p.ic-text-p.first{padding-top:0;}
.ic-image-wrap{position:absolute; z-index:1; width:658px; height:367px; bottom:0; right:-80px;}

.footer-new-wrap.with-trial{margin-top:0;}
.bottom-trial-wrap{width:100%; padding:18px 0px; border-top:solid 1px rgba(0,0,0,0.1); border-bottom:solid 1px rgba(0,0,0,0.1); text-align:center;}
.bottom-trial-container{display:inline-block;}
.bottom-trial-text{display:inline-block; text-align:left; height:40px; line-height:40px; font-size:18px; color:#00284c; font-weight:300;}
.bottom-trial-text span{color:#004cff;}
.bottom-trial-button{display:inline-block;}
.bottom-trial-button > a{display:block; width:160px; height:40px; line-height:40px; margin:0; padding:0; text-align:center; background:#004cff; border-radius:4px; color:#fff; font-weight:400; margin:0px 4px;}
.bottom-tel-wrap{width:100%; height:300px; background-image:url('../image/bg-bottom-tel.png'); background-repeat:no-repeat; background-size:cover;}
.bottom-tel-container{position:absolute; width:100%; top:50%; left:50%; text-align:center; transform:translate(-50%, -50%);}
.bottom-tel-text-01{font-size:28px; color:#fff; font-weight:400; padding-bottom:4px; width:100%;}
.bottom-tel-text-02{font-size:18px; color:#00a0e9; padding-bottom:20px; width:100%;}
.bottom-tel-button{width:160px; height:40px; margin:0 auto;}
.bottom-tel-button a{display:block; width:160px; height:40px; line-height:40px; background:#004cff; border-radius:4px; text-align:center; font-size:16px; color:#fff;}


@media (max-width: 1120px){
	.ic-text-wrap{margin-left:24px;}
	.ic-image-wrap{right:-48px;}
}
@media (max-width: 1080px){
	section.introduce-section.renew{padding:48px 0px;}
	section.introduce-section.renew p{width:100%;}

	section.introduce-content{height:auto;}
	.ic-text-wrap{padding:48px 0px;}
	.ic-image-wrap{width:auto; height:100%; right:0;}
	.ic-image-wrap img{height:100%;}

}
@media (max-width: 1024px){
	
	h4.ic-text-h4{font-size:24px;}
	.ic-text-wrap{width:50%; margin:0; padding:48px; padding-right:0;}
	.ic-text-wrap br{display:none;}

}
@media (max-width: 960px){

	.ic-text-wrap{padding-left:24px;}
	.ic-agent-01{right:-72px;}
}
@media (max-width: 820px){

	p.ic-text-p{font-size:13px;}

	.bottom-trial-wrap{padding:12px 0px;}
	.bottom-trial-text{font-size:14px;}
	.bottom-trial-button > a{font-size:14px;}
	.bottom-tel-wrap{height:200px;}
}
@media (max-width: 768px){
	.ic-image-wrap{opacity:0.5;}
	p.ic-text-p{color:#000;}
}
@media (max-width: 720px){
	section.introduce-section.renew{margin-top:0;}
	.introduce-section.renew h3{font-size:24px;}
}
@media (max-width: 640px){
	h4.ic-text-h4{font-size:18px;}
	.ic-text-wrap{width:100%; padding:36px 0px;}
	.ic-image-wrap{opacity:1;position:relative; width:100%; height:auto; right:auto; margin:0 auto;}
	.ic-image-wrap img{width:100%; height:auto;}

	.bottom-trial-text{width:100%; height:auto; line-height:1em; text-align:center; padding-bottom:8px;}
	.bottom-trial-button > a{margin:0 auto;}
}

/* 190704 update */
.apc-title-title span.add-video{color:#e54d00;}
.sale-event-2019{position:absolute; width:183px; height:65px; top:8px; right:-6px; background:url('../image/bg-sale-event-2019.png'); background-repeat:no-repeat; background-size:100% 100%; background-position:center center;
	font-size:16px; font-weight:bold; line-height:16px; padding:30px 16px 0px 0px; color:#000; text-align:right; z-index:2;
}
.sale-event-2019 span{color:#ff6e00;}
@media (max-width: 480px){
	.sale-event-2019{top:576px;}
}

/* 200225 update */
/* buy */
.sale-event-2020 {position: absolute; width: 80px; height: 87px; background: url(../image/event-2020-bg2.png); top: -3px; right: 10px; z-index: 2; text-align: center; color: #fa7272; font-size: 14px; line-height: 20px;
	vertical-align: middle; padding-top:6px; font-weight:600;}
.sale-event-2020 span{display:block; color:#896a45; font-weight:400;}
.sale-event-2020 strong{font-size:18px; color:#113658; line-height:22px;}
@media (max-width: 820px){
	 .sale-event-2020{top:558px;}
}
/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .asp-price-price{padding-top:10px;}
}