@charset="utf-8";

body {margin:0; padding:0 ; font-family:'Noto Sans', sans-serif;}
/*----------------------------------------------------
/*  공통 스타일 적용 CSS
/*  초안 작성일자 : 2017.07.26
/*  최종 작성일자 : 2017.08.01
/*  작성자 : (주)케이시크 이슬 (dew0826@segio.com)
/*  적용 범위 : 그룹웨어 홍보용 홈페이지 약관동의 및 서비스 신청 폼
/*  최종 수정자 : 이슬 
/*  마지막 업데이트 :2017.08.01
----------------------------------------------------*/
/* Standard Selector Property */
html {overflow:auto; overflow-x:auto; overflow-y:auto;}
* {padding:0; margin:0;}
th, td, textarea, div, body,input {font-family: 'Noto Sans KR'; color:#666; font-size:15px; margin:0px}
body {width: 100%; height: 100%;}
form {margin:0; padding:0;}
p {margin:0; padding:0;}
fieldset {border:0 none; padding:0; margin:0;}
legend {display:none;}
caption {display:none;}
img {border:0;}
address {font-style:normal;}
h1 {margin:0; padding:0;}
h2 {margin:0; padding:0;}
h3 {margin:0; padding:0;}
.clear {clear: both; display: block; float: none; font-size: 0 !important; height: 0; line-height: 0 !important; margin: 0 !important; overflow: hidden; padding: 0 !important; width: 100%;}
a {color:#333; text-decoration:none;}
address {padding:35px 0 0 0;}
ul,ol,dl,li {margin:0; padding:0; list-style-type:none}
input[type=radio], input[type=checkbox] {margin-right:3px}
button {font-family: inherit; font-size: 15px; height: 35px; border: none; outline: 0; cursor: pointer;}
button, input[type=text], input[type=password], select {border-radius: 4px; vertical-align: middle;}
input[type=text], input[type=password], select {padding-left:10px; min-width: 50px; height: 35px; line-height: 30px; font-size: 15px; font-family: inherit; color: #666; box-sizing: border-box;}
input[type=text], input[type=password], textarea {transition: all 0.2s ease;}
/* float 속성 해제 */
.clearfix {display:inline-block}
.clearfix:after {  /* for Firefox, IE8, Opera, Safari, etc. */
    clear:both;
    display:block;
    content:'';
    height:0;
    visibility:hidden
}
* + html .clearfix { /* for IE7 */
    display:inline-block
}
* html .clearfix { /* for IE6 */
    height:1%
}

/* TOP버튼 */
a.return-top {right:25px; bottom:0px; position:fixed; z-index:9999; display: block; background: #333; border-radius: 4px 4px 0 0; padding: 10px; width:40px; height:30px;  line-height: 30px; color:#fff; font-size:14px; font-weight:600;}
a.return-top {text-align:center;}


/* 공통 테이블 [컨텐츠] */
.tbTypeA {width: 60%; margin-top: 10px; margin:0 auto; border-bottom: 1px solid #dfdfdf; border-left:1px solid #dfdfdf;}
table {border-collapse: collapse;  border-spacing: 0;}
.tbTypeA th, .tbTypeA td { line-height:20px; text-align:center; border-right:1px solid #dfdfdf; border-top:1px solid #dfdfdf; background:#B7B7B7; padding:10px 2px;}
.tbTypeA td {background:#fff; padding:15px;}
.tbTypeA th { color:#000; border-right:1px solid #dfdfdf;}
.tbTypeA .td_left {text-align:left; padding:2%}
#cl_context > dl {line-height:25px;}
.tbTypeA span {color:#10529A; font-weight:600;}



.groupware_wrap {width:100%; }
.groupware_sub {width:100%; }


/* 상단 네비게이션 */
.groupware_wrap header {display:block; position:relative;  background: url('image/main_visual.png') center no-repeat; max-width: 100%;  height: 1000px; overflow: hidden; }
.groupware_wrap header .header_wrap {width: 100%; margin: 0 auto;  background: rgba(42, 52, 61, 0.43) !important; z-index: 10;  top: 0px;  position: fixed;box-sizing: border-box; transition: All 0.2s ease;-webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease;}
.groupware_wrap header h1 {width: 200px; height: 50px; display: inline-block; vertical-align: middle;}
.groupware_wrap header img {width: 200px; height: auto; margin-top: 8px; }
.header_wrap .point_box {background:#E26279; border-radius:5px; box-sizing:border-box;}
.groupware_wrap nav ul {margin: 9px 0;}
.groupware_wrap nav ul li {display: inline-block; padding:10px 25px;}
.groupware_wrap nav ul li a {color:#fff; font-size: 15px;}
.groupware_wrap nav ul li a:hover { border-bottom: 5px solid #fff;}

/* 메인 비쥬얼 */

.context_wrap h1 {color:#fff; font-weight: normal; font-size:40px; margin:0 auto; line-height:50px;}
.context_wrap h1 p {color: #fff; font-weight: 500;}
.context_wrap h1 p span { display:inline-block; height: 50px; font-weight:600; border-bottom:1px solid #fff;}
.context_wrap .small_text {text-align: center; margin:10px 0; color:#fff; }
ul.select_box {width:1180px; margin:50px 0 0 254px; }
ul.select_box li { display:block; float:left; width: 200px; height: 20px; background:#3EB5DD; padding:10px;border-radius:5px; border:1px solid #fff;}
ul.select_box li:hover {background:#1581a6;}
ul.select_box li a {color:#fff;}




ul.select_box li:last-child {margin-left:50px;}
.context_wrap h3 > img {margin-top:70px; width:600px;}
.scroll_down { position:relative;  margin:0 auto;  } 


/* 웹호스팅 버전 출시 첫번째 */
.content_01 {display: block;  max-width: 100%; height:980px; background: url('image/body_bg1.png'); text-align: center;}
.content_01 h1 {padding-top:110px; font-size: 40px; color:#26B4E2; }
.content_01 p {font-size: 16px;}
.content_01 img {margin-top:50px; width:800px;}
.content_01 ul {width:900px; margin:30px auto;}
.content_01 ul li {float: left; max-width:195px; margin-right:40px;}
.content_01 ul li {padding-top:120px;}
.content_01 ul li.version_icon01 {background: url('image/icon01.png')no-repeat center top;}
.content_01 ul li.version_icon02 {background: url('image/icon02.png')no-repeat center top;}
.content_01 ul li.version_icon03 {background: url('image/icon03.png')no-repeat center top;}
.content_01 ul li.version_icon04 {background: url('image/icon04.png')no-repeat center top;}
.content_01 ul li:last-child {margin-right:0;}

/* 웹호스팅 버전 출시 두번째 */
.content_02 {display:block; max-width: 100%; height:970px; background:#F4F4F2;text-align: center;}
.content_02 p {font-size: 18px; padding-top:110px; }
.content_02 h1 {font-size: 40px; color:#26B4E2; }
.content_02 ul {width:800px; margin:30px auto; color:#fff;}
.content_02 ul li {float: left; max-width:160px; height:170px; margin: 0 0 80px 50px; font-size:14px; }
.content_02 ul li span {position:relative; top:-60px;}
.content_02 ul li h5 {font-size: 17px; font-weight: normal; margin:30px 0; text-decoration:underline; margin-top:-58px;}
.content_02 ul li.version_icon05 {display:block; background:#23A8D3; padding:20px;}
.content_02 ul li.version_icon06 {display:block; background:#E26279; padding:20px;}
.content_02 ul li.version_icon07 {display:block; background:#23A8D3; padding:20px;}
.content_02 ul li.version_icon08 {display:block; background:#E26279; padding:20px;}
.content_02 ul li.version_icon09 {display:block; background:#23A8D3; padding:20px;}
.content_02 ul li.version_icon10 {display:block; background:#E26279; padding:20px;}

/* 서비스 요금 안내 */
.content_03 {display: block;  max-width: 100%; height:980px; background: url('image/body_bg2.png'); text-align: center;}
.content_03 h1 {font-size: 40px; color:#396c9b; padding:110px 0 30px 0; }
.content_03 span {display:block; width:60%; margin:10px auto; }

/* 웹호스팅 서비스 신청 */
.groupware_sub header {display:block; position:relative;  background: url('image/sub_visual1.jpg')no-repeat; max-width: 100%;  height: 500px; overflow: hidden;}
.groupware_sub header .header_wrap {width: 100%; background-color: #26B4E2; margin: 0 auto;}
.groupware_sub header h1 {width: 200px; height: 50px; display: inline-block; vertical-align: middle;}
.groupware_sub header img {width: 200px; height: auto; margin-top: 8px; }
.groupware_sub nav {width: 700px; height: 55px; display: inline-block; margin-left: 190px; }
.groupware_sub nav ul {margin: 9px 0; }
.groupware_sub nav ul li {display: inline-block; padding:10px 25px;}
.groupware_sub nav ul li a {color:#fff; font-size: 15px;}
.groupware_sub nav ul li a:hover {display:block; border-bottom: 5px solid #fff; }
.groupware_sub .sl_visual {position:absolute; top:230px; width:100%; text-align:center; color: #fff;}
.groupware_sub .sl_visual h1 {font-size:38px;}
.groupware_sub .sl_visual p {font-size:20px;}
.sl_body {max-width:780px; margin:0 auto; overflow: hidden;}
.sl_body h1 {text-align: center; padding:30px;  font-size:32px; font-weight: bold; margin-top:20px;}
.sl_body h1:after {content:''; display:block; width:80px; height:5px; background: #26B4E2; margin:10px auto;}
.form_wrap {background:#fff; border-radius: 5px; width:100%; }
.form_wrap h3 { margin:10px auto;}
.form_wrap .terms {background:#f9f9f9; width:100%; height:200px; border:1px solid #e3e8ee; margin:0 auto; padding:20px; box-sizing: border-box; overflow-y: scroll;margin-bottom:5px;}
.form_wrap .terms p {font-size:15px;}
.form_wrap .terms ul.list {list-style-position: outside; list-style-type: decimal; font-size: 13px;  color: #555; line-height:1.5;}
.form_wrap label {font-size:14px;}
.next_button {display:block; text-align: center; margin:70px auto; background:#0185B0; width:150px;padding:10px;}
.next_button a {color:#fff;}

.form_wrap div.terms p {font-size:13px;}



/* 회원가입 신청 */
.sl_body {display:block; padding:30px;}
.group_wrap {width:100%; height:100%;}
.group_wrap:before {content: ''; display: block; width:100%; height:3px; background: #0185B0; margin:15px 0;}
.group_wrap:after {content: ''; display: block; width:100%; height:3px; background: #0185B0;}
.group_wrap label.form_01 {width:30%;}
.service_wrap label.form_02 {border:1px solid #ddd; border-radius: 0;}
.group_wrap> p {margin-left:30%; color:#fa6e07;}
.form_wrap p.tit_text {text-align: right;}
.form_wrap p.tit_text span {color:#fa6e07;}
.joinform_licensee {height:100px;}
.form_group {height:50px; width:100%; display:blcok;} 
.form_group span.essential {color:#fa6e07;}
.form_group input.form_control {width:100%; box-sizing: border-box; border:1px solid #ddd; border-radius: 0;}
span.text_box {display:block; float: right; width:70%; }
span.text_box p {color:#0C669F; font-weight: 600;}
.group_wrap span.file_box input {display:inline-block;width:70%; box-sizing: border-box; height:35px; -webkit-appearance: none; 
  appearance: none;  } 
.group_wrap span.file_box {width:70%; float:right;}
.form_group span.file_box > ul {height:auto;}
.form_group span.file_box > ul li {float:left;}
.form_group span.file_box > ul li > button {display:block; width:50px; height:30px; font-size:13px; line-height:30px; background:#0185B0; color:#fff;}
.form_group span.file_box > span#upload_file_name > button#img_delete {background:none; color:red;}
.form_group span.file_box > span#upload_file_name {float:left; content:''; display:block; clear:both;}
.form_group ul li { margin:5px 0;}
.form_group ul li span.select_box {display:inline-block; width: 20%;}
.service_wrap:before {content: ''; display: block; width:100%; height:3px; background: #0185B0; margin:15px 0;}
.service_wrap:after {content: ''; display: block; width:100%; height:3px; background: #0185B0;}
.service_wrap span.text_box input {margin-left:20px;}
.service_wrap span.text_box input:first-child {margin-left:0;}
.form_group input.form_control2 {box-sizing: border-box; width:10%; border:1px solid #ddd; border-radius: 0;}
.form_group input.form_control3 {box-sizing: border-box; border:1px solid #ddd; border-radius: 0;}
.submit_button button{display:block; text-align: center; margin:70px auto; background:#0185B0; width:150px;padding:10px;line-height:10px;color:#fff;}
.submit_button button:hover {color:#22BEFF;}
.form_group .form_01 {font-weight: 600; margin-bottom:30px;}
.group_wrap > p {margin: -20px 0 0 30%}


/* 페이지네비게이션 */
.nav_pagination {text-align:center}
ul.pagination {clear:both; display:inline-block; margin:40px 0 0 0; width:auto; overflow:hidden}
ul.pagination li {float:left; width:35px; height:35px; margin:0 2px; font-size:13px; color:#666; text-align:center; line-height:33px; border:1px solid #ccc; box-sizing:border-box}
ul.pagination li i {font-size:15px; line-height:32px}
ul.pagination li a {display:block; line-height:33px; text-align:center; font-size:13px; color:#555}
ul.pagination li:hover {background:#eaeaea}
ul.pagination li.disabled {color:#999; border-color:#dedede; background-color:#f9f9f9; cursor:not-allowed}
ul.pagination li.active {color:#fff; border-color:#1985ce; background:#1985ce}
ul.pagination li.active a {color:#fff}


/* footer */

footer {display:block; max-width:100%; height: 200px; background: #1A1A1A; }


/* Smartphones (portrait and landscape) */




@media screen and (min-width:970px)  {
.groupware_wrap nav {height: 55px; display: inline-block; padding-left: 100px; }
.groupware_wrap header .header_wrap {max-width:100%;}
.groupware_wrap header .header_wrap .top_menu {width:1000px; margin: 0 auto; padding:0 30px;}
.context_wrap {width:1000px; position:absolute; top:170px; left:50%; margin-left:-500px; color:#515050; text-align: center;}

span.menuBtn {display: none;}
.groupware_sub header .header_wrap .top_menu {width:1180px; margin:0 auto;}
footer {display:block; max-width:100%; height: 200px; background: #1A1A1A; }
footer .footer_wrap { max-width:1180px; margin:0 auto; padding-top:50px;}
footer .footer_wrap:after {display: block; clear:both; content:''; }
.footer_wrap  ul li {float:left;color:#e0e0e0; padding-right:10px;}
.footer_wrap  ul li a {color:#e0e0e0;}
.footer_wrap .footer_logo {float:left; width:10%; padding-left:3%;}
.footer_wrap .footer_text {float:left; width:30%; padding-left:3%;  color:#e0e0e0;}
.footer_wrap .footer_info {float:left; width:51%; color:#e0e0e0;}


}

@media screen and (max-width:969px) and  (min-width:770px){
span.menuBtn {display: none;}
.groupware_wrap header .header_wrap {width:100%;}
.groupware_wrap header .header_wrap .top_menu {width:100%; text-align: center; padding-top:10px;}
.groupware_wrap nav {width:100%; display: inline-block; margin-left:-20px;}
.groupware_wrap nav ul li {display: inline-block; }
.groupware_wrap nav ul li a { font-size: 15px;}
.context_wrap h3 > img {margin-top:70px;}

.context_wrap h1 {padding-top:30px}
.context_wrap {width:95%; position:absolute; top:150px; left:50%; margin-left:-47%;color:#fff; text-align: center;}
ul.select_box {width:80%; margin:50px 0 0 175px; }
ul.select_box li {max-width:25%;}

ul.select_box li:last-child {margin-left:50px;}
.content_01 {width:100%; height:1050px;}
.content_01 p {font-size: 18px; }
.content_01 h1 {margin-top:-30px; font-size:35px;}
.content_01 img {width:80%;}
.content_01 ul {width:100%; margin-left:50%; margin-left:8%;}
.content_01 ul li {display:block; max-width:40%; margin-bottom:20px; box-sizing: border-box; }
.content_02 {height:1100px;text-align: center;}
.content_02 ul {margin-top:-40px; max-width:100%;}
.content_02 ul li {max-width:35%; font-size:16px;box-sizing: border-box; height:210px; margin-left:10%;}
.content_02 ul li h5 {font-size:20px;}
.content_02 p {font-size: 18px; padding-top:90px;}
.content_02 h1 {font-size: 35px; color:#26B4E2; }
.content_03 h1 {padding-top:80px;font-size: 35px;}
.content_03 {height:950px;}
.tbTypeA {width:98%;}
footer {display:block; max-width:100%; height: 200px; background: #1A1A1A; }
footer .footer_wrap { max-width:1180px; margin:0 auto; padding-top:50px;}
footer .footer_wrap:after {display: block; clear:both; content:''; }
.footer_wrap  ul li {float:left;color:#e0e0e0; padding-right:10px;}
.footer_wrap  ul li a {color:#e0e0e0;}
.footer_wrap .footer_logo {float:left; width:10%; padding-left:3%;}
.footer_wrap .footer_text {float:left; width:30%; padding-left:3%; color:#e0e0e0;}
.footer_wrap .footer_info {float:left; width:51%; padding-left:3%; color:#e0e0e0;}
.groupware_sub header .header_wrap {width:100%;}
.groupware_sub header .header_wrap .top_menu {width:100%; text-align: center; padding-top:10px;}
.groupware_sub nav {width:100%; display: inline-block; margin-left:-20px;}
.groupware_sub nav ul li {display: inline-block; }
.groupware_sub nav ul li a {color:#fff; font-size: 15px;}


}

 @media screen and (max-width:769px) {
.groupware_wrap header img {width:200px; margin-left:10px;}
.top_menu nav {display: none;}

span.menuBtn {display:inline; width:50px; height: 50px;}
span.menuBtn img{width:25px; position: absolute; right: 10px; padding-top:7px; cursor: pointer;}
.groupware_wrap nav {width: 100%; height:183px; background: #fff; position: relative; z-index: 99999999; margin-left: 0; }
.groupware_wrap nav ul {margin: 0;}
.groupware_wrap nav ul li {display: block; line-height:25px; border-bottom:1px solid #eee;}
.groupware_wrap nav ul li a {color:#4f4f4f; font-size: 15px;}
.groupware_wrap nav ul li a:hover { border-bottom:0; color:#14AEE0; }
.groupware_wrap header {width:100%; height:930px; }
.context_wrap h3 > img {margin-top:70px;}
.joinform_licensee {display:none;}
.context_wrap h1 {margin-top:-30px}
.context_wrap {width:95%; position:absolute; top:130px; color:#fff; text-align: center;}
ul.select_box {width:80%; margin:30px 0 0 185px; }
ul.select_box ul {width:100%;}
ul.select_box ul:after {content: ''; display: block; clear: both;}
ul.select_box li {float:left; width:50%; padding:10px; margin-bottom:10px;}

ul.select_box li:last-child {margin-left:0}
.context_wrap {color:#fff;width:100%; }
.context_wrap h3 > img {width:80%;margin-top:45px;}

.content_01 {width:100%; height:1400px; background: url('image/body_bg1.png')}
.content_01 p {font-size: 18px; }
.content_01 h1 { font-size:35px;}
.content_01 img {width:80%;}
.content_01 ul {width:100%;  margin-left:25%; }
.content_01 ul li {display:block;max-width:50%; margin-bottom:40px;  }
.content_02 {height:1100px;text-align: center;}
.content_02 ul {margin-top:-40px; max-width:98%;}
.content_02 ul li {max-width:43%; font-size:16px;box-sizing: border-box; height:210px; margin-left:5%;}
.content_02 ul li.version_icon07 {display:block; background:#E26279; padding:20px;}
.content_02 ul li.version_icon08 {display:block; background:#23A8D3; padding:20px;}
.content_02 ul li h5 {font-size:20px;}
.content_02 p {font-size: 18px; padding-top:90px;}
.content_02 h1 {font-size: 35px; color:#26B4E2; }
.content_03 h1 {padding-top:80px;font-size: 35px;}
.content_03 {height:970px;}
.tbTypeA {width:98%;}
footer { width:100%; height:240px; }
footer .footer_wrap {max-width:100%; padding:20px;} 
.footer_logo { width:20%; height:150px; float:left; }
.footer_wrap .footer_text {float:left; color:#fff; width:80%;margin-bottom:20px; }
.footer_wrap .footer_info {height:90px; float:left; background: #1A1A1A; color:#fff; }
.groupware_sub header {height:300px;background: url('image/sub_visual_small.jpg')no-repeat;}
.groupware_sub .sl_visual {top:120px;}
.groupware_sub nav {width: 100%; height:183px; background: #fff; position: relative; z-index: 99999999; margin-left: 0; }
.groupware_sub nav ul {margin: 0;}
.groupware_sub nav ul li {display: block; line-height:25px; border-bottom:1px solid #eee;}
.groupware_sub nav ul li a { font-size: 15px;color:#000;}
.groupware_sub nav ul li a:hover { border-bottom:0; color:#14AEE0; }
.groupware_sub header {width:100%; }
.groupware_sub header img { margin-left:30px;}
.sl_body {padding:30px;}
.sl_body .text p {font-size:14px;}

span.text_box {width: 100%;  box-sizing: border-box;} 
.sl_body .form_group {margin:15px 0;}
.group_wrap {width:100%;}
.group_wrap > p {margin-left:0px}
.group_wrap label.form_01 {margin-bottom:10px;}
}




@media screen and (max-width:590px) {
.groupware_wrap header {height:700px;}
.context_wrap h1 {font-size: 24px; line-height: 30px; } 
.context_wrap h1 p span {border-bottom:0; }
.context_wrap .small_text {font-size:13px; width:60%; margin:0 auto;}
ul.select_box {width:80%; margin-left:27%;}
ul.select_box ul {width:100%;}
ul.select_box ul:after {content: ''; display: block; clear: both;}
ul.select_box li {float:left; width:50%; padding:10px; margin-bottom:10px;line-height: 20px;}
ul.select_box li a {font-size:14px;}
.context_wrap .scroll_down {display: none}
ul.select_box li:last-child {margin-left:0}
.content_01 h1 {font-size:28px; padding-top:80px;}
.content_01 p {font-size: 13px;}
.content_01 {height:1300px;  background: url('image/body_bg1.png')}
.content_02 h1 {font-size:28px;}
.content_02 p {font-size: 13px;padding-top:60px;}
.content_02 {height: 1960px; padding:20px; max-width:100%;}
.content_02 ul {padding:50px 15px 0 0; width:65%; box-sizing:border-box; overflow:hidden;}
.content_02 ul li {float:left; max-width:100%;  font-size:14px; box-sizing:border-box; }
.content_02 ul li h5 {font-size:18px}
.content_02 ul li.version_icon07 {display:block; background:#23A8D3; padding:20px;}
.content_02 ul li.version_icon08 {display:block; background:#E26279; padding:20px;}
.content_03 {background: url('image/body_bg2.png'); width:100%; height:auto; padding-bottom:80px;}
.content_03 h1 {font-size:28px;}

footer {width:100%; height:240px; padding-bottom:30px;}
.footer_logo {float:left;  width: 20%; height:100px;}
.footer_logo img {width:80%;}
.footer_wrap .footer_text {float:left; color:#fff; width:75%;  font-size:14px; padding-left:5%;}
.footer_wrap .footer_info {height:90px;float:left; background: #1A1A1A; color:#fff; width:100%;  font-size:14px;}

.groupware_sub .sl_visual h1 {font-size:30px;}
.groupware_sub .sl_visual p {font-size:16px;}
.form_group ul li span.select_box {display:inline-block; width: 35%;}
.form_group input.form_control3 {width:40%;}

}