@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700');
html, body{min-height:100%;}
body{margin:0; padding:0; font-family: 'Nanum Gothic', sans-serif; font-size:16px; overflow-x:hidden; font-weight:400; color:#5a6262; word-break:keep-all; background-color:#f2f6ff;}
header, footer, div, section, article, aside, h1, h2, h3, h4, h5, h6, p, span, ul, li, dl, dt, dd{margin:0; padding:0; box-sizing:border-box; position:relative;}
ul, li, dl, dt, dd{list-style:none;}
button{margin:0; padding:0; box-sizing:border-box; border:0; background:none; cursor:pointer;}
p{line-height:1.2em; padding:8px 0;}
a{text-decoration:none; display:inline-block; color:inherit;}
img{border:0; display:inline-block; width:100%;}
i{font-size:20px;}/*fontawesome*/
*:focus{outline:none;}

button.blue{background-color:#00a8ff; color:#fff;}
button.green{background-color:#4fddc5; color:#fff;}
button.gray{background-color:#002132; color:#fff;}
button.green-border{background-color:#fff; border:solid 2px #4fddc5;}
button.blue-border{background-color:#fff; border:solid 2px #00a8ff;}
button.rounded{padding:0px 24px; height:48px; font-size:16px; font-weight:bold; line-height:48px; border-radius:24px;}
button i{font-weight:normal; font-size:1.5em;}

div.clear-div{clear:both;}
div.inline{display:inline-block;}
.text-center{text-align:center;}
.mt-40{margin-top:40px;}

header{position:fixed; top:0; left:0; width:100%; height:56px; cursor:default; text-align:right; z-index:99;}
header ul{display:inline-block;}
header li{display:inline-block;}
header li a{padding:0px 6px; line-height:56px; font-weight:700; color:#000;}
header li.menu-btn a{padding:0px 4px;}
header li.menu-btn a button{padding:0px 16px; height:40px; line-height:40px; border-radius:20px;}

div.logo{position:absolute; height:20px; top:18px; left:16px; cursor:pointer;}
div.logo a{height:100%;}
img.logo{width:auto; height:100%;}
header.scroll{background-color:rgba(255,255,255,1); box-shadow:0px 3px 3px rgba(0,0,0,0.2);}

section.banner{width:100%; height:616px; padding-top:56px;}
div.main-banner{width:100%; height:100%;}
div.mb{width:100%; height:100%; overflow:hidden;}

div.mb-content{width:100%; max-width:1080px; padding:66px 16px; margin:0 auto; cursor:default; z-index:5;}
h1.mb{font-size:48px; font-weight:700; letter-spacing:-0.1em; color:#002132; line-height:1.2em; padding-bottom:8px;}
h1.mb span{color:#4fddc5; letter-spacing:-0.05em;}
p.mb-text{font-size:24px; color:#00a8ff; font-weight:bold;}
div.mb-image{position:absolute; z-index:1;}
img.mb-image{width:auto; height:100%;}
div.mb-image.mb-01{height:90%; bottom:5%; left:45%;}
div.mb-image.mb-02{height:80%; bottom:10%; left:50%;}
div.mb-image.mb-03{height:90%; bottom:5%; left:55%;}

/* test */
div.selectbox {
    display: block;
    padding: 5px 0px 4px;
    font-weight: 100;
    position: relative;
}

div.selectbox span {
    padding: 0px 5px;
    color: #000;
}

div.selectbox a.btn {
    display: block;
    cursor: pointer;
}

.selectbox_list {
    z-index: 200;
    position: absolute;
    top: 50px;
    left: 0px;
    width: 100px;
    border: 1px solid #29d5b8;
    background: #fff;
    display: none;
}

.selectbox_list li {
    font-weight: 100;
	text-align:center;
	width: 100%;
}

.selectbox_list li a {
    width: 100%;
    display: block;
    color: #ABABAB;
    padding: 6px 0;
    cursor: pointer;
}

.selectbox_list li a:hover {
    background: #29d5b8;
    color: #fff;
}

.selectbox:hover>.selectbox_list {
    display: block;
}
/*test_end*/

section.section{width:100%; max-width:1080px; padding:96px 16px; margin:0 auto;}
section.section-full{width:100%; padding:96px 0;}
section.section-full .content{width:100%; max-width:1080px; padding:0 16px; margin:0 auto;}
h1.section-header{font-size:40px; font-weight:700; letter-spacing:-0.1em; color:#002132; line-height:1em; padding-bottom:8px;}
p.section-header{font-weight:bold; color:#00a8ff;}

.pricing-container{float:left; width:23%; height:320px; margin:0 1%; margin-top:40px; padding:16px; background-color:#fff; border-radius:8px; box-shadow:0px 3px 3px rgba(0,0,0,0.2); overflow:hidden;}
.icon-pricing{padding:16px 0;}
.icon-pricing i{font-size:32px; color:#00a8ff;}
.pricing-text{color:#000; font-weight:700; line-height:1.5em;}
.pricing-btn-wrap{position:absolute; width:100%; text-align:center; bottom:0; left:0; padding:16px 0; border-top:solid 1px #e5e5e5; background-color:#fff; background-color:#e5f7ff;}

.pricing-detail{position:relative; position:absolute; width:100%; height:100%; background-color:#fff; top:0; left:100%; transition:left 0.2s;}
.pricing-detail.on{left:0;}
.pricing-title{padding:16px 0; font-size:24px; color:#fff;}
.pricing-title.basic{background-color:#4fddc5;}
.pricing-title.corporate{background-color:#00a8ff;}
.pricing-title.enterprise{background-color:#002132;}
.pricing-price{padding:24px 0; font-size:32px; font-weight:700; color:#000;}
.pricing-price span{display:block; font-size:12px; color:#666; font-weight:400; padding-top:8px;}
ul.pricing-ul{display:inline-block; padding:0 16px;}
ul.pricing-ul li{text-align:left; padding-bottom:8px; padding-left:8px; font-size:14px; line-height:1.5em;}
ul.pricing-ul li:before{content:''; position:absolute; width:4px; height:4px; top:8px; left:0; border-radius:2px; background-color:#4fddc5;}
.btn-pricing-detail{position:absolute; transform:translate(-50%,-50%); left:50%; bottom:0px; cursor:pointer;}
.btn-pricing-detail i{font-size:32px;}
.btn-pricing-detail:hover i{color:#4fddc5;}

.goodfor-container{float:left; width:48%; margin:0 1%; margin-top:80px;}
.goodfor-container dl{width:95%; padding:16px; cursor:default; margin-left:5%;}
.goodfor-container dt{font-size:20px; font-weight:bold; color:#000; padding-bottom:8px;}
.goodfor-container dt i{font-size:24px; color:#00a8ff;}
.goodfor-container dd{display:list-item; list-style-type:disc; margin:0 24px; line-height:1.5em;}
.goodfor-container dl:hover{background-color:#fff;}

section.goodfor:before{
	content:''; position:absolute; width:500px; height:500px; bottom:-250px; left:-250px; z-index:-1;
	background-image:url('../image/bg-circle-green.svg'); background-repeat:no-repeat; background-size:100% 100%; background-position:center center;
}
section.goodfor:after{
	content:''; position:absolute; width:500px; height:500px; top:-250px; right:-250px; z-index:-1;
	background-image:url('../image/bg-circle-green.svg'); background-repeat:no-repeat; background-size:100% 100%; background-position:center center;
}

.howto-container{
	float:left; width:48%; margin:0 1%;
	margin-top:40px; background-color:#fff; border-radius:8px; overflow:hidden;
	box-shadow:0px 3px 3px rgba(0,0,0,0.2);
}
.howto-title{padding:16px; font-size:24px; font-weight:700; color:#000;}
.howto-container dl{width:100%; padding:0 16px;}
.howto-container dt{font-weight:700; color:#000; padding-bottom:8px;}
.howto-container dd{font-size:12px; padding-bottom:16px;}
.howto-container dd a{color:#00a8ff;}


section.support{background-color:#fff;}
.support-container{
	float:left; width:48%; margin:0 1%;
}
ul.customer-center{padding:16px 0;}
ul.customer-center li{padding-left:16px;}
ul.customer-center li:before{content:''; position:absolute; width:8px; height:2px; top:50%; left:0; margin-top:-1px; background-color:#4fddc5;}

footer{width:100%; background-color:#171a1c; color:#fff; padding:32px 0;}
footer .content{width:100%; max-width:1080px; padding:0px 16px; margin:0 auto;}
footer .content p a{color:#4fddc5;}
.btn-top{
	position:absolute; width:40px; height:40px; top:50%; right:16px; margin-top:-20px; z-index:2; cursor:pointer;
	background-image:url('../image/btn-top.svg'); background-repeat:no-repeat; background-size:100% 100%; background-position:center center;
}

div.m-menu{display:none; position:absolute; width:40px; height:40px; top:8px; right:0; line-height:40px; text-align:center; cursor:pointer;}
div.m-menu i{color:#4fddc5; font-size:28px; line-height:40px;}
div.m-menus{position:fixed; width:98%; top:64px; left:110%; background-color:#fff; border-radius:8px; z-index:98; box-shadow:0px 3px 3px rgba(0,0,0,0.2); transition:left 0.3s;}
div.m-menus.on{left:1%;}
div.m-menus-menu{float:left; width:50%; padding:16px 8px; text-align:center;}
div.m-menus div.m-menus-menu:nth-child(1), div.m-menus div.m-menus-menu:nth-child(2), div.m-menus div.m-menus-menu:nth-child(3), div.m-menus div.m-menus-menu:nth-child(4),  
div.m-menus div.m-menus-menu:nth-child(5), div.m-menus div.m-menus-menu:nth-child(6) {border-bottom:solid 1px #e5e5e5;}
div.m-menus div.m-menus-menu:nth-child(1), div.m-menus div.m-menus-menu:nth-child(3), div.m-menus div.m-menus-menu:nth-child(5), div.m-menus div.m-menus-menu:nth-child(7) {border-right:solid 1px #e5e5e5;}

@media (max-width: 960px){
	div.mb-image.mb-01{height:66%;}
	div.mb-image.mb-02{height:60%;}
	div.mb-image.mb-03{height:55%; left:63%;}
	.pricing-container{width:48%;}
}
@media (max-width: 830px){
	header ul{display:none;}
	div.m-menu{display:block;}
}
@media (max-width: 768px){
	section.banner{height:460px;}
	section.section, section.section-full{padding:40px 8px;}
	div.mb-image{display:none;}
	div.mb-content{text-align:center;}
	.goodfor-container{float:none; width:98%; margin-top:40px;}
	.goodfor-container dl{width:49%; margin-left:0; padding:16px 2%; display:inline-block; vertical-align:top;}
	section.goodfor:before, section.goodfor:after{display:none;}
	.goodfor-container img{max-width:460px; margin:0 auto; display:block;}
}
@media (max-width: 640px){
	h1.mb br{display:none;}
	p.mb-text br{display:none;}
	.bx-controls-direction{display:none;}
	h1.mb{font-size:32px;}
	p.mb-text{font-size:18px;}
	h1.section-header{font-size:28px;}
	.pricing-container{width:98%;}
	.howto-text span.title{font-size:18px;}
	.goodfor-container dl{width:100%; padding:16px 8px;}
	.howto-container{float:none; width:98%; height:auto;}
	.support-container{float:none; width:98%; padding:16px 0;}
	footer p{font-size:12px;}
}