@charset "UTF-8";


@font-face {
    font-family: 'SBAggroM';
    src: url('/font/SBAggrowM.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'jalnan';
    font-style: normal;
    font-weight: 500;
    src: local('jalnan'), local('jalnan'), url(/font/Jalnan.eot);
    src: url(/font/Jalnan.eot?#iefix) format('embedded-opentype'),
    url(/font/Jalnan.woff2) format('woff2'),
    url(/font/Jalnan.woff) format('woff');
}
@font-face {
    font-family: 'GmarketSans';
    font-style: normal;
    font-weight: 100;
    src: url('/font/GmarketSansLight.woff') format('woff'),
    url('/font/GmarketSansTTFLight.ttf') format('truetype');
}
@font-face {
    font-family: 'GmarketSans';
    font-style: normal;
    font-weight: 400;
    src: url('/font/GmarketSansMedium.woff') format('woff'),
    url('/font/GmarketSansTTFMedium.ttf') format('truetype');
}
@font-face {
    font-family: 'GmarketSans';
    font-style: normal;
    font-weight: 700;
    src: url('/font/GmarketSansBold.woff') format('woff'),
    url('/font/GmarketSansTTFBold.ttf') format('truetype'); 
}
@font-face {
    font-family: 'NotoKrL';
    font-style: normal;
    font-weight: 200;
    src: local('Noto Sans Light'), local('NotoSans-Light'), url(/font/NotoSans-Light.eot);
    src: url(/font/NotoSans-Light.eot?#iefix) format('embedded-opentype'),
    url(/font/NotoSans-Light.woff2) format('woff2'),
    url(/font/NotoSans-Light.woff) format('woff');;
}
@font-face {
    font-family: 'NotoKrR';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'), url(/font/NotoSans-Regular.eot);
    src: url(/font/NotoSans-Regular.eot?#iefix) format('embedded-opentype'),
    url(/font/NotoSans-Regular.woff2) format('woff2'),
    url(/font/NotoSans-Regular.woff) format('woff');
}
@font-face {
    font-family: 'NotoKrM';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(/font/NotoSans-Medium.eot);
    src: url(/font/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
    	  url(/font/NotoSans-Medium.woff2) format('woff2'),
    	  url(/font/NotoSans-Medium.woff) format('woff');
}
@font-face {
    font-family: 'NotoKrB';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(/font/NotoSans-Bold.eot);
    src: url(/font/NotoSans-Bold.eot?#iefix) format('embedded-opentype'),
    url(/font/NotoSans-Bold.woff2) format('woff2'),
    url(/font/NotoSans-Bold.woff) format('woff');
}


p.gap10 {height: 10px; clear: both; overflow: hidden; display: block;}
p.gap20 {height: 20px; clear: both; overflow: hidden; display: block;}
p.gap30 {height: 30px; clear: both; overflow: hidden; display: block;}
p.gap40 {height: 40px; clear: both; overflow: hidden; display: block;}
p.gap50 {height: 50px; clear: both; overflow: hidden; display: block;}



/* 탭메뉴 */
.tap-wrap ul.taps {display: flex;}
.tap-wrap ul.taps li {width: 33.3333%; border: 1px solid #e1e1e1; margin-left: -1px; text-align: center; transition: 0.1s ease; -ms-transition: 0.1s ease; -moz-transition: 0.1s ease-in-out; -webkit-transition: 0.1s ease-in-out;}
.tap-wrap ul.taps li a {padding: 20px 0; width: 100%; height: 100%; display: inline-block; box-sizing: border-box; line-height: 1;}
.tap-wrap ul.taps li a span {position: relative; display: inline-block; font-family: 'NotoKrL'; color: #555; letter-spacing: -0.03em;}
.tap-wrap ul.taps li a span::before {content: ''; position: absolute; top: 0; right: -26px; background: url('/img/guide-img/btn-icon-scuts01.png') no-repeat center; width: 15px; height: 14px;}

.tap-wrap ul.taps li:hover a, .tap-wrap ul.taps li a.active {background-color: #538dd1; border: 1px solid #538dd1;}
.tap-wrap ul.taps li:hover a span, .tap-wrap ul.taps li a.active span {color: #fff; font-family: 'NotoKrM';}
.tap-wrap ul.taps li:hover a span::before , .tap-wrap ul.taps li a.active span::before  {background: url('/img/guide-img/btn-icon-scuts02.png') no-repeat center;}


/* 컨텐츠박스 타이틀 */
.contentbox-tit {background-color: #f8f8f8; padding: 35px 50px; box-sizing: border-box;}
.contentbox-tit .box-con {position: relative; padding-left: 85px;}
.contentbox-tit .box-con::before {content: ""; width: 45px; height: 48px; background: url('/img/guide-img/box-con-icon01.png') no-repeat center; position: absolute; top: 0; left: 0; border-radius: 50%;}
.contentbox-tit .box-con h5 {background: 0; padding: 0; margin: 0;}
.contentbox-tit .box-con .tit {font-family: 'yg-jalnan'; font-size: 18px; color: #111; letter-spacing: -0.01em; line-height: 1; margin-bottom: 11px;}
.contentbox-tit .box-con .txt {font-family: 'NotoKrL'; font-size: 15px; color: #555; letter-spacing: -0.03em;}

h4.cont-title {font-family: 'yg-jalnan'; font-size: 20px; color: #3077c8; letter-spacing: -0.03em;}
h5.cont-title {font-family: 'NotoKrR'; font-size: 18px; color: #e4780b; letter-spacing: -0.03em; background: 0; padding: 0;}


/* 타이틀 */
.cont-list {}
.cont-list.step01 {padding: 5px 0px;}
.cont-list.step01 li {position: relative; padding-left: 20px; font-family: 'NotoKrR'; letter-spacing: -0.03em; color: #333; font-size: 15px;}
.cont-list.step01 > li::before {content: ''; position: absolute; top: 10px; left: 5px; width: 8px; height: 2px; background-color: #3077c8;}
.cont-list.step02 {padding: 5px 0px;}
.cont-list.step02 > li {color: #666; font-family: 'NotoKrL'; padding: 0 0 5px 15px;}
.cont-list.step02 > li::before {content: ''; position: absolute; top: 10px; left: 5px; width: 3px; height: 3px; background-color: #878787;}
.cont-list.step02 .c-blue {color: #3077c8;}


/* 테이블 */
.table-wrap table.type01 {position: relative; width: 100%; border-collapse: collapse; table-layout: fixed; clear: both; color: #555; background: #fff; border-top: 2px solid #000; font-family: 'NotokrR';}
.table-wrap table.type01 thead th {background: #f7f7f7; color: #000; font-family: 'NotokrM'; text-align: center; letter-spacing: -0.03em; padding: 10px; font-size: 1em; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #9d9d9d; font-weight: 500; box-sizing: border-box; white-space: nowrap;}
.table-wrap table.type01 tbody td, .table-wrap table.type01 tbody th {letter-spacing: -0.02em; padding: 10px; color: #555555; border-bottom: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; text-align: center; vertical-align: middle; font-family: 'NotokrL'; box-sizing: border-box;}
.bdWrite table.type01 tbody td, .table-wrap table.type01 tbody th {border-bottom: 0 solid #e2e2e2;}
.table-wrap table.type01 thead th:last-child, .table-wrap table.type01 tbody td:last-child {border-right: 0;}

.table-wrap .scroll-guide {display: none; position: relative; padding: 10px 20px;
background: #f6f6f6; margin-bottom: 5px; text-align: center;}
.table-wrap .scroll-guide p {text-align: center; font-weight: 600; color: #666; font-size: 0.800em;}
.table-wrap .scroll-table {overflow-x: auto;}

@media screen and (max-width:680px){
    .table-wrap .scroll-guide {position: relative; display: block;}
    .table-wrap .scroll-guide p {position: relative;}
    .table-wrap .scroll-guide p:before {content: "좌우스크롤 하시면 자세한 내용을 확인하실수 있습니다.";}
    .table-wrap .scroll-guide:before {position: absolute; top: 50%; left: 0px;    width: 20px; height: 20px; margin-top: -10px; line-height: 20px; font-weight: 600;
    content: "〈";}
    .table-wrap .scroll-guide:after {position: absolute; top: 50%; right: 0px;      width: 20px; height: 20px; margin-top: -10px; line-height: 20px; font-weight: 600;
    content: "〉";}
    .table-wrap table.scroll {width: 680px;}
    .table-wrap table.type01 thead th {font-size: 14px; padding: 6px;}
    .table-wrap table.type01 tbody td {font-size: 14px; padding: 6px;}

    .table-wrap table.respon colgroup{display:none;}
    .table-wrap table.respon thead {display:none;}
    .table-wrap table.respon tbody {overflow:hidden;}
    .table-wrap table.respon tbody th{display:none;}
    .table-wrap table.respon [data-cell-header]:before {content:attr(data-cell-header); float:left; font-weight:600 ; font-size:0.933em; position:absolute; left:0; top:0;box-sizing:border-box; padding:10px 0px; box-sizing:border-box; z-index:2;}

    .table-wrap table.respon tbody tr{border-top:1px solid #E6E6E6; border-bottom:1px solid #d5d8df; padding:5px 0px; display:block; overflow:hidden; width:100%;}
    .table-wrap table.respon tbody tr:first-child {border-top:0;}
    .table-wrap table.respon tbody td{position:relative; width:100%; box-sizing:border-box;float:left; text-align:left; padding:8px 8px 8px 120px; font-size:14px;}
    .table-wrap table.respon tbody td[data-cell-header]:before{width:100px; padding-left:15px; text-align:left; box-sizing:border-box; font-size:14px; top:-3px;}
    .table-wrap table.respon tbody td[data-cell-header]:after{position:absolute; left:0; top:0; width:100px; height:99%; display:block; content:""; z-index:1; background:#f7f7f7;}

    .table-wrap table.respon tbody tr:hover{background:none;}
    .table-wrap table.respon tbody tr td{border-bottom:1px solid #d1d1d1; border-right:none;}
    .table-wrap table.respon tbody tr td:last-child{border-bottom:none;}
}


/* 버튼 */
.btn-wrap.type01 a {background-color: #eee; padding: 10px 0; box-sizing: border-box; display: inline-block; width: 100px; height: 39px; text-align: center; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; font-family: 'NotoKrR';}
.btn-wrap.type01 a span {position: relative; padding-left: 27px;}
.btn-wrap.type01 a span::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.btn-wrap.type01 a span:hover {text-decoration: underline;}
.btn-wrap.type01 a.write span::before {background: url('/img/guide-img/btn-icon-write.png') no-repeat center left; width: 15px; height: 17px;}
.btn-wrap.type01 a.list span::before {background: url('/img/guide-img/btn-icon-list.png') no-repeat center left; width: 16px; height: 15px;}
.btn-wrap.type01 a.modi span::before {background: url('/img/guide-img/btn-icon-modi.png') no-repeat center left; width: 16px; height: 16px;}
.btn-wrap.type01 a.del span::before {background: url('/img/guide-img/btn-icon-del.png') no-repeat center left; width: 16px; height: 20px;}

.btn-wrap.type01.blue a {background-color: #3077c8; color: #fff;}
.btn-wrap.type01.blue a.write span::before {background: url('/img/guide-img/btn-icon-write02.png') no-repeat center left; width: 15px; height: 17px;}
.btn-wrap.type01.blue a.list span::before {background: url('/img/guide-img/btn-icon-list02.png') no-repeat center left; width: 16px; height: 15px;}
.btn-wrap.type01.blue a.modi span::before {background: url('/img/guide-img/btn-icon-modi02.png') no-repeat center left; width: 16px; height: 16px;}
.btn-wrap.type01.blue a.del span::before {background: url('/img/guide-img/btn-icon-del02.png') no-repeat center left; width: 16px; height: 20px;}


.btn-wrap.type02 a {background-color: #fff; padding: 10px 0; box-sizing: border-box; display: inline-block; width: 125px; height: 40px; border: 1px solid #e1e1e1; text-align: center; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; font-family: 'NotoKrR'; color: #5e5e5e;}
.btn-wrap.type02 a span {position: relative; padding-left: 32px;}
.btn-wrap.type02 a span::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.btn-wrap.type02 a span:hover {text-decoration: underline;}
.btn-wrap.type02 a.down span::before {background: url('/img/guide-img/btn-icon-down.png') no-repeat center left; width: 20px; height: 17px;}
.btn-wrap.type02 a.view span::before {background: url('/img/guide-img/btn-icon-view.png') no-repeat center left; width: 20px; height: 12px;}
.btn-wrap.type02 a.scuts span::before {background: url('/img/guide-img/btn-icon-scuts.png') no-repeat center left; width: 15px; height: 14px;}
.btn-wrap.type02 a.loca span::before {background: url('/img/guide-img/btn-icon-loca.png') no-repeat center left; width: 13px; height: 21px;}
.btn-wrap.type02 a.home span::before {background: url('/img/guide-img/btn-icon-home.png') no-repeat center left; width: 17px; height: 19px;}
.btn-wrap.type02 a.detail span::before {background: url('/img/guide-img/btn-icon-detail.png') no-repeat center left; width: 20px; height: 19px;}

.btn-wrap.type02.gray a {background-color: #eee; color: #5e5e5e;}