@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap&subset=korean');

body {margin:0; padding:0; width:100%; min-width:1200px; height:100vh; background:#f6f3f2; color:#333; font-family:'Nanum Gothic', sans-serif;}
h1, h2, h3, h4, p {font-style:normal; font-weight:400; font-variant:normal; text-transform:none; line-height:1;}
h1, h2, h3, h4, p, ul {margin:0; padding:0;}
ul {list-style:none;}
ul li {margin:0; padding:0;}
a, img, input, select {outline:none;}
a {text-decoration:none; color:#000; transition:color .2s ease-in;}
li {list-style:none;}

h1 {margin-bottom:8px; font-size:26px; font-weight:bold;}
h2 {margin-bottom:20px; font-size:20px;}
h3 {height:34px; padding:0 15px; border-bottom:1px solid #efefef; font-size:13px; font-weight:bold; line-height:34px;}
h4 {font-size:18px; font-weight:bold;}
h4 span {display:block; margin-top:10px; font-size:14px; font-weight:normal;}

.clear {clear:both;}
.container {min-height:calc(100% - 161px);}
.blank-menu {height:70px;}
.blank-content {height:20px;}

/*메뉴*/
.menu-wrap {position:fixed; top:0; width:100%; height:70px; background:#fff; box-shadow:0 3px 15px rgba(0,0,0,0.15); z-index:9999;}
.menu-container {display:flex; width:1160px; height:70px; margin:0 auto; font-size:16px;}
.menu-container .menu-logo {width:200px; height:70px; background:url(../images/logo2020.png) no-repeat center left; text-indent:37px; font-size:19px; font-weight:800; line-height:71px; letter-spacing:-0.5px; cursor:pointer;}
.menu-container .menu-box {display:flex; justify-content:space-around; width:840px;}
.menu-container .menu-box div {display:flex; justify-content:center; align-items:center; font-weight:bold; cursor:pointer;}
.menu-container .menu-box div:hover {color:#e72027;}
.menu-container .menu-box div.on {color:#e72027;}
.menu-container .menu-member {position:relative; width:200px; height:70px;}
.menu-container .menu-member .btn-login {position:absolute; top:22px; right:0; width:70px; height:26px; border:1px solid #d0d0d0; border-radius:4px; box-sizing:border-box; font-size:13px; text-align:center; line-height:26px; cursor:pointer;}
.menu-container .menu-member .btn-login:hover {background:#333; border:1px solid #333; color:#fff;}

/*타이틀*/
.title-wrap {width:100%; height:150px;}
.title-container {width:1160px; height:150px; margin:0 auto; padding:50px 0; box-sizing:border-box;}
.title-container .desc {font-size:16px;}

/*탭메뉴(스크롤되다가 상단에 고정)*/
.tabmenu-wrap {height:55px; margin-bottom:50px; background:url(../images/bg_tabmenu.png); z-index:9998;}
.tabmenu-container {display:flex; width:1160px; margin:0 auto; font-size:16px;}
.tabmenu-container div {display:flex; justify-content:center; align-items:center; width:100%; height:55px; background:#fff; border:1px solid #e1e1e1; border-right:0; box-sizing:border-box; color:#777; cursor:pointer;}
.tabmenu-container div:hover {background:#fcfbfb; color:#333;}
.tabmenu-container div:last-child {border-right:1px solid #e1e1e1;}
.tabmenu-container div.on{border:0; background:#102e3b; color:#fff;}

/*탭메뉴(일반)*/
.tabmenu2-wrap {position:relative; height:50px; margin-top:50px; border-bottom:1px solid #d6d6d6; box-sizing:border-box;}
.tabmenu2-container {position:absolute; top:0; left:0;}
.tabmenu2-container div {display:inline-block; width:300px; height:50px; background:rgba(0,0,0,0.4); border-bottom:1px solid #d1cfce; border-radius:4px 4px 0 0; box-sizing:border-box; text-align:center; line-height:48px; color:rgba(255,255,255,0.8); vertical-align:top; cursor:pointer;}
.tabmenu2-container div.on {border:1px solid #d1cfce; border-bottom:1px solid #fff; background:#fff; color:#333; font-weight:700;}
.tabmenu2-content {min-height:250px; border:1px solid #d6d6d6; border-top:0; background:#fff; box-sizing:border-box;}
.tabmenu2-content.blank {padding:30px;}
.tabmenu2-content input[type=password] {display:block; width:400px; height:36px; margin-bottom:7px; padding:0 10px; border:1px solid #d6d6d6; border-radius:4px; box-sizing:border-box; font-size:15px;}
.tabmenu2-content input[type=password]:-moz-placeholder{color:#bbb;}
.tabmenu2-content input[type=password]:-ms-input-placeholder{color:#bbb;}
.tabmenu2-content input[type=password]::-webkit-input-placeholder{color:#bbb;}
.tabmenu2-content input[type=password]:focus {box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);}
.tabmenu2-content input[type=password]:focus::-webkit-input-placeholder{opacity:0;}

/*사이드메뉴(스크롤되다가 메뉴 아래에서 40px 여백 두고 고정)*/
.sidemenu-wrap {flex-basis:210px; margin-right:50px; z-index:9997;}
.sidemenu-container {width:210px;}
.sidemenu-container div {display:flex; align-items:center; height:40px; margin-bottom:2px; padding:0 20px; background:#fff; box-sizing:border-box; color:#666; cursor:pointer;}
.sidemenu-container div:hover {background:rgba(255,255,255,0.7); color:#333;}
.sidemenu-container div.on {border:1px solid #ed2028; color:#ed2028;}
.sidemenu-container div.on:hover {background:#fff;}

/*내용*/
.content-wrap {position:relative; display:flex; width:1160px; margin:0 auto; font-size:15px;}
.content-container {position:relative; flex:auto; margin-bottom:50px; width:900px}
.content-box-wrap {margin-bottom:50px; background:#fff; box-shadow:10px 10px 15px rgba(0,0,0,0.1);}
.content-box-wrap:last-child {margin-bottom:0;}
.content-box-wrap .line-gradient {height:2px;}
.content-box-wrap .title-box {margin:0 30px; padding:25px 0; border-bottom:1px solid #ddd;}
.content-box-wrap .title-box .title1 {margin-bottom:10px; font-size:22px; font-weight:bold;}
.content-box-wrap .title-box .title2 {font-size:15px; color:#777;}
.content-box-wrap .btn-wrap {display:flex; justify-content:center; align-items:center; padding:44px 0;}
.content-box-wrap .btn-wrap .btn-down {position:relative; width:260px; height:60px; margin:0 20px; border:1px solid #ddd; box-shadow:2px 2px 0 #f5f5f5; box-sizing:border-box; cursor:pointer;}
.content-box-wrap .btn-wrap .btn-down:hover {background:#fcfbfb; border:1px solid #cdcdcd; box-shadow:2px 2px 0 #e9e9e9;}
.content-box-wrap .btn-wrap .btn-down .icon {position:absolute; top:-1px; left:-1px; width:60px; height:60px;}
.content-box-wrap .btn-wrap .btn-down .name {display:flex; justify-content:center; align-items:center; height:58px; margin-left:59px;}
.content-box-wrap.java .line-gradient {background:#e72027; background:-moz-linear-gradient(left, #e72027 0%, #ffc156 50%, #e72027 100%); background:-webkit-linear-gradient(left, #e72027 0%, #ffc156 50%, #e72027 100%); background:linear-gradient(to right, #e72027 0%, #ffc156 50%, #e72027 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e72027', endColorstr='#e72027',GradientType=1 );}
.content-box-wrap.java .btn-wrap .btn-down .icon.sample {background:url(../images/icon_sample.png) no-repeat center center, #ec4030;}
.content-box-wrap.java .btn-wrap .btn-down .icon.down {background:url(../images/icon_down.png) no-repeat center center, #ec4030;}
.content-box-wrap.php .line-gradient {background:#3a9dde; background:-moz-linear-gradient(left, #3a9dde 0%, #00cd74 50%, #3a9dde 100%); background:-webkit-linear-gradient(left, #3a9dde 0%, #00cd74 50%, #3a9dde 100%); background:linear-gradient(to right, left, #3a9dde 0%, #00cd74 50%, #3a9dde 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e72027', endColorstr='#e72027',GradientType=1 );}
.content-box-wrap.php .btn-wrap .btn-down .icon.sample {background:url(../images/icon_sample.png) no-repeat center center, #06a79f;}
.content-box-wrap.php .btn-wrap .btn-down .icon.down {background:url(../images/icon_down.png) no-repeat center center, #06a79f;}
.content-btn-wrap {display:flex; margin:20px 0;}
.content-btn-wrap.right {float:right;}
.content-btn-black {width:170px; height:40px; margin-left:10px; background:#333; border-radius:4px; font-size:15px; text-align:center; line-height:40px; color:#fff; cursor:pointer;}
.content-box {margin:15px 0 30px 0; border:1px solid #d6d6d6; border-top:1px solid #333; background:#fff;}
.content-box .subs {padding:15px; font-size:15px; word-break: break-all;}
.button-wrap {position:relative; margin-top:20px; font-size:0; text-align:center;}
.button-wrap .button {display:inline-block; margin-right:10px; padding:10px 50px; font-size:15px; cursor:pointer;}
.button-wrap .button:last-child {margin:0;}
.button-wrap .button.blank {background:#333; border:1px solid #333; color:#fff; }
.button-wrap .button.white {background:#fff; border:1px solid #d0d0d0;}
.button-wrap .button.right {position:absolute; right:0;}
.text-key {font-size:28px; color:#e72027; text-align:center;}
.text-red {margin-top:10px; font-size:12px; line-height:1.5; color:#e72027;}

/*테이블*/
.table-horizontal {width:100%; border-collapse:collapse; font-size:15px;}
.table-horizontal thead tr {height:40px; border-top:1px solid #333; border-bottom:1px solid #ccc; background:rgba(0,0,0,0.05); font-size:13px;}
.table-horizontal tbody tr {height:60px; border-bottom:1px solid #d6d6d6; background:#fff;}
.table-horizontal tbody tr:hover {background:#fcfbfb;}
.table-horizontal tbody tr td {padding:0 20px; cursor:pointer;}
.table-horizontal tbody tr td input[type=text] {width:100%; height:36px; padding:0 10px; border:1px solid #d6d6d6; border-radius:4px; box-sizing:border-box; font-size:15px;}
.table-horizontal tbody tr td input[type=text]:-moz-placeholder{color:#bbb;}
.table-horizontal tbody tr td input[type=text]:-ms-input-placeholder{color:#bbb;}
.table-horizontal tbody tr td input[type=text]::-webkit-input-placeholder{color:#bbb;}
.table-horizontal tbody tr td input[type=text]:focus {box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);}
.table-horizontal tbody tr td input[type=text]:focus::-webkit-input-placeholder{opacity:0;}
.table-horizontal tbody tr td select {height:36px; padding:0 6px; border:1px solid #d6d6d6; border-radius:4px; box-sizing:border-box; font-size:15px;}
.table-horizontal tbody tr td select:focus {box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);}
.table-horizontal tbody tr td .star {margin-left:5px; color:#ed2028;}
.table-horizontal tbody tr.center {text-align:center;}

/*테이블(흰 박스 안에 들어가는)*/
.table-horizontal-w {width:100%; border-collapse:collapse; font-size:15px;}
.table-horizontal-w thead tr {height:40px; border-bottom:double #d6d6d6; font-size:13px;}
.table-horizontal-w tbody tr {height:40px; border-bottom:1px solid #d6d6d6; background:#fff;}
.table-horizontal-w tbody tr td {padding:0 20px; border-right:1px solid #e6e6e6;}
.table-horizontal-w tbody tr td:last-child {border-right:0;}
.table-horizontal-w tbody tr td input[type=text] {width:100%; height:36px; padding:0 10px; border:1px solid #d6d6d6; border-radius:4px; box-sizing:border-box; font-size:15px;}
.table-horizontal-w tbody tr td input[type=text]:-moz-placeholder{color:#bbb;}
.table-horizontal-w tbody tr td input[type=text]:-ms-input-placeholder{color:#bbb;}
.table-horizontal-w tbody tr td input[type=text]::-webkit-input-placeholder{color:#bbb;}
.table-horizontal-w tbody tr td input[type=text]:focus {box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);}
.table-horizontal-w tbody tr td input[type=text]:focus::-webkit-input-placeholder{opacity:0;}
.table-horizontal-w tbody tr td select {height:36px; padding:0 6px; border:1px solid #d6d6d6; border-radius:4px; box-sizing:border-box; font-size:15px;}
.table-horizontal-w tbody tr td select:focus {box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);}
.table-horizontal-w tbody tr td .star {margin-left:5px; color:#ed2028;}
.table-horizontal-w tbody tr.center {text-align:center;}

/*소개-결과코드*/
.table-horizontal-l {width:100%; border-collapse:collapse; font-size:15px;}
.table-horizontal-l thead tr {height:40px; border-top:1px solid #333; border-bottom:1px solid #ccc; background:rgba(0,0,0,0.05); font-size:13px;}
.table-horizontal-l tbody tr {height:40px; border-bottom:1px solid #d6d6d6; background:#fff;}
.table-horizontal-l tbody tr td {padding:0 20px; border-right:1px solid #d6d6d6; text-align:center;}
.table-horizontal-l tbody tr td:last-child {border:0}

/*소개-가이드*/
.table-horizontal-l2 {width:100%; border-collapse:collapse; font-size:15px;}
.table-horizontal-l2 thead tr {height:40px; border:1px solid #d6d6d6; background:rgba(0,0,0,0.04); font-size:12px; color:#888;}
.table-horizontal-l2 tbody tr {height:40px; border:1px solid #d6d6d6; background:#fff;}
.table-horizontal-l2 tbody tr td {padding:10px 17px; border:1px solid #d6d6d6; text-align:center; word-break: keep-all;}
.table-horizontal-l2 tbody tr td:last-child {text-align:left;}

/*로그인*/
.login-wrap {width:800px; margin:70px auto; padding:50px; border:1px solid #d6d6d6; border-top:1px solid #333; background:#fff; box-sizing:border-box; text-align:center;}
.login-wrap .login-title-wrap {margin-bottom:40px;}
.login-wrap .login-title-wrap .login-title {font-size:24px; font-weight:700;}
.login-wrap .login-title-wrap .login-desc {margin-top:10px; color:#777;}
.login-wrap .certify {width:400px; height:36px; margin-bottom:20px; padding:0 10px; border:1px solid #d6d6d6; border-radius:4px; box-sizing:border-box; font-size:15px;}
.login-wrap .certify:-moz-placeholder{color:#bbb;}
.login-wrap .certify:-ms-input-placeholder{color:#bbb;}
.login-wrap .certify::-webkit-input-placeholder{color:#bbb;}
.login-wrap .certify:focus {box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);}
.login-wrap .certify:focus::-webkit-input-placeholder{opacity:0;}
.login-wrap .login-form {position:relative; width:400px; margin:0 auto; text-align:left;}
.login-wrap .login-form input {width:294px; height:50px; margin-bottom:3px; padding:0 10px; border:1px solid #d6d6d6; box-sizing:border-box; font-size:15px;}
.login-wrap .login-form input:-moz-placeholder{color:#bbb;}
.login-wrap .login-form input:-ms-input-placeholder{color:#bbb;}
.login-wrap .login-form input::-webkit-input-placeholder{color:#bbb;}
.login-wrap .login-form input:focus {box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);}
.login-wrap .login-form input:focus::-webkit-input-placeholder{opacity:0;}
.login-wrap .login-form .btn-login {position:absolute; top:0; right:0; width:103px; height:103px; margin-left:3px; background:#333; box-sizing:border-box; font-size:15px; color:#fff; text-align:center; line-height:103px; cursor:pointer;}
.login-wrap .join {margin-top:40px; font-size:13px; cursor:pointer;}

/*푸터*/
.footer-wrap {background:#323236;}
.footer-menu-wrap {display:flex; width:1160px; margin:0 auto; border-bottom:1px solid #464649; font-size:14px; color:#fff;}
.footer-menu-wrap div {display:flex; align-items:center; height:60px; margin-right:35px; cursor: pointer;}
.footer-copyright {width:1160px; margin:0 auto; padding:20px 0; font-size:12px; line-height:20px; color:rgba(255,255,255,0.6);}


/*추가*/
.guide-title {font-weight: 700; margin-bottom: 8px;}
.guide-desc {font-size: 16px;}
.contents-box {margin-bottom: 90px;}

/*레이어팝업*/
.layerpopup {width:500px; margin:50px; background:#fff; box-shadow:3px 3px 10px rgba(0,0,0,0.4); position: absolute; z-index: 9999; display: none;}
.layerpopup .title {position:relative; height:50px; line-height:50px; background:#222; font-size:18px; font-weight:bold; text-indent:20px; color:#fff;}
.layerpopup .title span {display:block; position:absolute; top:13px; right:13px; width:24px; height:24px; background:url(../images/btn_close.png) no-repeat center center; background-size:16px 16px; cursor:pointer;}
.layerpopup .popupbox {padding:20px;}
.layerpopup .popupbox .subtitle {margin-bottom:7px; font-weight:bold;}
.layerpopup .popupbox .conbox {padding:10px; background:#f5f5f5; border-radius:4px; box-shadow:inset 1px 1px 3px rgba(0,0,0,0.1); font-size:13px; line-height:21px;}
#popup-mask {position:absolute; left:0; top:0; z-index:9998; background:rgba(0,0,0,0.6); opacity: 0.8;}


/*메인*/
.main-intro {display:flex; justify-content:center; align-items:center; height:300px; background:url(../images/bg.png) no-repeat center center; background-size:cover; font-size:30px; color:#fff;}
.main-intro span {font-weight:bold;}
.main-wrap {padding:80px 0; text-align:center;}
.main-wrap.white {background:#fff;}
.main-wrap.sky {background:#f2f5f8;}
.main-wrap .title {margin-bottom:60px; font-size:38px;}
.main-wrap .title span {font-weight:800;}
.main-wrap .title2 {font-size:22px; line-height:30px;}
.main-wrap .desc-box {width:1000px; margin:60px auto 0 auto; padding:20px; background:#f9f9f9; border:1px solid #d7d7d7; text-align:left;}
.main-wrap .desc-box .subtitle {margin-bottom:15px; font-weight:bold;}
.main-wrap .desc-box ul li {margin:15px 0 0 18px; list-style:disc; font-size:15px;}
.main-wrap .feature-wrap {display:flex; justify-content:space-around; width:1160px; margin:0 auto;}
.main-wrap .feature-wrap .feature-box {width:240px;}
.main-wrap .feature-wrap .feature-box .thumb {width:92px; height:92px; margin:0 auto 40px auto;}
.main-wrap .feature-wrap .feature-box:nth-child(1) .thumb {background:url(../images/icon_1.png);}
.main-wrap .feature-wrap .feature-box:nth-child(2) .thumb {background:url(../images/icon_2.png);}
.main-wrap .feature-wrap .feature-box:nth-child(3) .thumb {background:url(../images/icon_3.png);}
.main-wrap .feature-wrap .feature-box:nth-child(4) .thumb {background:url(../images/icon_4.png);}
.main-wrap .feature-wrap .feature-box .f-title {font-size:21px; font-weight:800; color:#444;}
.main-wrap .feature-wrap .feature-box .text {margin-top:15px; font-size:15px; line-height:23px; color:#888;}
.main-wrap .btn-wrap {display:flex; justify-content:center; align-items:center; padding:44px 0 10px 0;}
.main-wrap .btn-wrap .btn-container {position:relative; height:60px; margin:0 20px; background:rgba(255,255,255,1); border:1px solid rgba(0,0,0,0.2); box-shadow:2px 2px 0 rgba(0,0,0,0.05); box-sizing:border-box; cursor:pointer;}
.main-wrap .btn-wrap .btn-container:hover {background:rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.26); box-shadow:2px 2px 0 rgba(0,0,0,0.08);}
.main-wrap .btn-wrap .btn-container .btn-icon {position:absolute; top:-1px; left:-1px; width:60px; height:60px;}
.main-wrap .btn-wrap .btn-container .btn-name {display:flex; justify-content:center; align-items:center; height:58px; margin-left:59px;}
.main-wrap .btn-wrap .btn-container.btn1 {width:200px;}
.main-wrap .btn-wrap .btn-container.btn2 {width:250px;}
.main-wrap .btn-wrap .btn-container.btn3 {width:300px;}
.main-wrap .btn-wrap .btn-container.btn1 .btn-icon {background:url(../images/icon_sample.png) no-repeat center center, #ec4030;}
.main-wrap .btn-wrap .btn-container.btn2 .btn-icon {background:url(../images/icon_down.png) no-repeat center center, #ec4030;}
.main-wrap .btn-wrap .btn-container.btn3 .btn-icon {background:url(../images/icon_test.png) no-repeat center center, #06a79f;}
.main-wrap .line-w {width:1160px; height:1px; margin:60px auto; background:rgba(0,0,0,0.1);}