@charset "utf-8"; 

#container{position: relative; width: 1200px; min-height: 100%; margin: -70px 0 -74px}

#contents{position: relative; min-height: 990px; padding: 70px 0 74px 270px;background-color:#FFFFFF;}

/* html, css */
pre.code-box{padding:10px;border:1px solid #ccc;background:#e5e6e6;white-space:pre-wrap;*word-wrap:break-word}
pre.code-box code{font-family:sans-serif;font-size:14px;line-height:1.4;color:#666}

th.modify {background:#ff8e9e!important}
td.modify {background:#ffcad1}

/* guide-content-wrap */
.guide-content-wrap {padding: 35px 50px 35px 50px;}
.guide-content-wrap + .guide-content-wrap{padding-top: 0}
.guide-content-wrap h1 {font-size:30px; line-height:1.4; color:#31383f; margin-bottom: 20px;}
.guide-content-wrap h1 small{color: #3681b9; font-size: 26px}
.guide-content-wrap h2{color: #3681b9; font-size:22px; line-height:1.4; margin-bottom: 20px;}
.guide-content-wrap h2.center{text-align: center}
.guide-content-wrap h3 {font-size:16px; color:#333; line-height:1.4; margin-bottom: 10px;}
.guide-content-wrap h4 {font-size:12px; color:#2b4e8d;  line-height:1.4; margin-bottom: 10px;}
.guide-content-wrap p {margin-bottom: 20px}
.guide-content-wrap p img {border:1px solid #eaeaea;}
.guide-content-wrap p.terms {font-size:12px; color:#666;}
.guide-content-wrap p.terms span {font-weight:bold;}
.guide-content-wrap p.center {text-align:center}
.guide-content-wrap p.noborder img {border:0;}
.guide-content-wrap p strong {background:#ffe288; font-weight:normal;}
.guide-content-wrap > ul{margin-bottom: 20px}
.guide-content-wrap hr{border-top-color: #999; border-left: transparent; border-bottom: transparent; border-right: transparent; border-style: solid; margin: 50px 0 50px;}
.guide-content-wrap hr.dashed{border-style: dashed;}

/* guide-code-wrap */
.guide-code-wrap {padding: 35px 0 35px 50px;}
.guide-code-wrap + .guide-code-wrap{padding-top: 0}
.guide-code-wrap h1 {font-size:30px; line-height:1.4; color:#31383f; margin-bottom: 20px;}
.guide-code-wrap h1 small{color: #3681b9; font-size: 26px}
.guide-code-wrap h2{color: #3681b9; font-size:22px; line-height:1.4; margin-bottom: 20px;}
.guide-code-wrap h2.center{text-align: center}
.guide-code-wrap h3 {font-size:16px; color:#333; line-height:1.4; margin-bottom: 10px;}
.guide-code-wrap h4 {font-size:12px; color:#2b4e8d;  line-height:1.4; margin-bottom: 10px;}
.guide-code-wrap hr{border-top-color: #999; border-left: transparent; border-bottom: transparent; border-right: transparent; border-style: solid; margin: 50px 0 50px;}
.guide-code-wrap hr.dashed{border-style: dashed;}

.todo-list {padding-top:20px; margin-left:20px; list-style:disc}
.todo-list li {}
.todo-list li strong {color:#073f9c}
.todo-list li strong img {vertical-align:middle}
.todo-list li p {padding:10px 0; font-size:12px;}


.file-list {}
.file-list h1 {padding:0 0 10px 0; font-size:20px;}
.file-list h2 {padding:0 0 10px 0; font-size:14px;}
.file-list h1 span, .file-list h2 span{padding-left:10px; font-size:14px; color:#fd650f;}
.file-list h1 em {padding-left:20px; font-size:14px;}
.file-list table {width:100%; border-collapse: collapse;}
.file-list table th {border:1px solid #ccc; padding: 10px 5px; background:#eaeaea;}
.file-list table td {border:1px solid #ccc; padding: 10px 5px; background-color: #fff; text-align:center; vertical-align:top;}
.file-list table td.left {text-align:left;}
.file-list table td.title {background:#eaeaea; font-weight:bold}
.file-list table td img {vertical-align:middle}
.file-list table a {color:black}

.board-list {}
.board-list h1 {padding:0 0 10px 0; font-size:20px;}
.board-list h2 {padding:0 0 10px 0; font-size:14px;}
.board-list h1 span, .board-list h2 span{padding-left:10px; font-size:14px; color:#fd650f;}
.board-list h1 em {padding-left:20px; font-size:14px;}
.board-list table {width:100%; border-collapse: collapse;}
.board-list table th {border:1px solid #ccc; padding: 10px 5px; background:#eaeaea;}
.board-list table td {border:1px solid #ccc; padding: 10px 15px; background-color: #fff; text-align:left; vertical-align:top;}
.board-list table th.left {text-align:left;padding-left:20px;}
.board-list table td.title {background:#eaeaea; font-weight:bold}
.board-list table td img {vertical-align:middle}
.board-list table a {color:black}

/* tree-set */
.guide-content-wrap .tree{margin-top: 1em; border: 1px solid #ccc; background-color: #fff; padding: 15px 20px;}
.guide-content-wrap .tree .folder{padding-left: 26px; background: url(/images/onioncms/adm/sub/icon_folder.png) no-repeat 0 100%}
.guide-content-wrap .tree .folder + .tree-set{margin-top: 3px;}
.guide-content-wrap .tree .tree-set{background: url(/images/onioncms/adm/sub/ico_treeline.gif) no-repeat}
.guide-content-wrap .tree > .tree-set:last-of-type{background: none}
.guide-content-wrap .tree .tree-set li{padding-bottom: 0; padding-left: 20px; background: url(/images/onioncms/adm/sub/ico_tree.gif) no-repeat; font-size: 13px}
.guide-content-wrap .tree .tree-set li.last{background-image: url(/images/onioncms/adm/sub/ico_treelast.gif)}
.guide-content-wrap .tree .tree-set li .folder{padding: 1px 0 1px 27px; background: url(/images/onioncms/adm/sub/icon_folder.png) no-repeat 0 50%}
.guide-content-wrap .tree .tree-set li .file{padding: 1px 0 1px 24px; background: url(/images/onioncms/adm/sub/icon_file.png) no-repeat 0 50%}
.guide-content-wrap .tree .tree-set li span{display: inline-block; height: 20px; line-height: 20px}

/* timeline */
.timeline-wrap{margin: 20px; border-left:solid 2px #3681b9; position: relative; z-index: 2; padding: 15px 50px 15px 25px; margin-bottom: 15px;}
.timeline-wrap .timeline{position: relative; z-index: 2; padding: 15px 20px; margin-bottom: 15px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)}
.timeline-wrap .timeline:before{position: absolute; z-index: 0; content: ''; top: 50%; left: -6px; border: 5px solid transparent; border-top-color: #fff; border-bottom-color: transparent; border-left-color: #fff; border-right-color: transparent; filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.08)); transform-origin: 0 0; transform: rotate(-45deg);}
.timeline-wrap .timeline .circle{position: absolute; top: 50%; left: -33px; background: #fff; border: 2px solid #3681b9; width: 15px; height: 15px; border-radius: 50%; margin-top: -7px}
.timeline-wrap .timeline h2{font-size: 17px; padding-top: 0; text-decoration: none}
.timeline-wrap .timeline ul{margin-top: 10px}
.timeline-wrap .timeline ul li{font-size: 14px}
.timeline-wrap .timeline ul li a{display: inline; font-size: 14px; color: #666; text-decoration: none; font-weight: normal}
.timeline-wrap .timeline ul li a:hover,
.timeline-wrap .timeline ul li a:focus,
.timeline-wrap .timeline ul li a:active{color: #3681b9}
.timeline-wrap .timeline ul li .strong{color: #3681b9; font-weight: 500}

/* tab */
.guide-code-wrap .tab.page{margin: 30px 0 10px;}
.guide-code-wrap .tab.page li{float: left; text-align: center}
.guide-code-wrap .tab.col-2 li{width: 50%;}
.guide-code-wrap .tab.col-3 li{width: 33.333%;}
.guide-code-wrap .tab.col-4 li{width: 25%;}
.guide-code-wrap .tab.col-5 li{width: 20%;}
.guide-code-wrap .tab.page li span{display: inline-block; width: 69%; padding: 15px 0; border-radius: 30px; background-color: #c2cdd5; color: #fff; font-size: 20px; text-align: center; text-decoration: none; font-weight: 500; cursor: pointer;}
.guide-code-wrap .tab.page li.on span,
.guide-code-wrap .tab.page li span:hover{background-color: #3681b9}

.guide-code-wrap .row + .row{margin-top: 40px}

.guide-code-wrap .component-box{border: 1px solid #3681b9; padding: 25px 20px; background-color: #ffffff;}

/* code-tab */
.code-box .code-tab{margin-top: 20px}
.code-box .code-tab li{float: left; padding: 12px 20px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; background-color: #fff; color: #aaa; font-size: 16px; font-weight: 500; cursor: pointer;}
.code-box .code-tab li:first-child{border-left: 1px solid #ccc; border-right: 1px solid #3681b9}
.code-box .code-tab li.on{position: relative; color: #3681b9; border-top-color: #3681b9; border-right-color: #3681b9}
.code-box .code-tab li.on:first-child{border-left-color: #3681b9}
.code-box .code-tab li.on:after{content:''; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: #fff;}
.code-box .code-content{padding: 5px 20px; border: 1px solid #3681b9; background-color: #fff}
.code-box .code-content .code-item{display: none; max-height: 300px; overflow-y: auto}
.code-box .code-content .code-item.on{display: block;}
.code-box .code-content .code-item pre{white-space: pre-wrap;}
.code-box .code-content .code-item code{font-family: sans-serif;}

.mobile-image{margin: 30px 0; text-align: center}
.mobile-image img{max-width: 100%}

/*-------------------------------------------
	Code Sample
--------------------------------------------*/
.tab-content{display: none;}
.tab-content.on{display: block;}
.tab-content,.tab-content table,.tab-content input,.tab-content textarea,.tab-content select,.tab-content button{font-family: 'Nanum Square', sans-serif;}

/* input (type=text) */
.inp-text{width: 240px; max-width: 100%; height: 34px; padding: 0 6px; font-size: 14px; background-color: #fff; border: 1px solid #ccc; border-radius: 3px}
.inp-text.large{width: 100%}
.inp-text.medium{width: 50%; min-width: 110px;}

/** 버튼
	.btn: 버튼 기본 클래스
	.btn.btn-background: 배경이 채워진 버튼 (기본 크기: 90x36)
	.btn.btn-border: 테두리만 있는 버튼 (기본 크기: 60x28)
*/
.btn{display: inline-block; border-radius: 3px; outline: none; font-weight: 400; text-align: center; line-height: 20px; cursor: pointer; white-space: nowrap;}

.btn.btn-background{padding: 8px 10px; min-width: 90px; border: none; color: #fff !important; font-size: 14px; font-weight: 600}

.btn.btn-background.btn-gray{background-color: #4f555a}
.btn.btn-background.file-search{position: relative; padding: 10px 13px; background-color: #9e9e9e; line-height: 1;}
.btn.btn-background.file{min-width: 75px; padding: 10px 13px; line-height: 1}
.btn.btn-background.file.add{background-color: #678494}
.btn.btn-background.file.del{background-color: #787878}
.btn.btn-background.modify{background-color: #214b64}
.btn.btn-background.list{background-color: #1f6db1}
.btn.btn-background.delete{background-color: #888}
.btn.btn-background.cancel{background-color: #888}
.btn.btn-background.save{background-color: #1f6db1}

.btn.btn-border{padding: 3px 17px; border-style: solid; border-width: 1px; background-color: #fff; color: #6a6a6a; font-size: 13px;}
/*.btn.btn-border.btn-xs{}
.btn.btn-border.btn-sm{}
.btn.btn-border.btn-lg{}*/
.btn.btn-border.btn-blue{border-color: #649ed9}
.btn.btn-border.btn-green{border-color: #77c035}
.btn.btn-border.btn-gray{border-color: #8a8d91}
.btn.btn-border.btn-pink{border-color: #e58a9e}

/** 버튼 그룹
	.btn-group: 버튼 그룹 기본 클래스(오른쪽 정렬)
	.btn-group.btn-center: 중앙정렬 버튼 그룹
*/
.btn-group{margin: 20px 0; text-align: right}
.btn-group.center{text-align: center}

/* search-area */
.search-area{position: relative; margin-bottom: 10px}
.search-area .total{position: absolute; top: 50%; left: 0; margin-top: -9px; color: #666; font-size: 15px; font-weight: bold}
.search-area .total strong{color: #f34b4b;}
.search-area .total .bar{font-size: 12px; font-weight: normal}
.search-area .total .number{font-size: 14px; font-weight: normal}
.search-area .search-wrap{float: right; position: relative; width: 420px; max-width: 100%; height: 34px; padding-left: 139px;}
.search-area .search-wrap .inp-text{padding-right: 75px}
.search-area .search-wrap select{position: absolute; left: 0; bottom: 0; min-width: 129px; height: 100%; padding: 0 6px; margin-right: 0; font-size: 14px; border: 1px solid #ccc; border-radius: 3px}
.search-area .search-wrap .btn.search{position: absolute; bottom: 0; right: 0; background-color: #788189; padding: 7px 25px ; vertical-align: middle;}

/* table board list*/
table.board-list{width:100%; border-top: 2px solid #141414; line-height: 1.3}
table.board-list .w1{width: 8%;}
table.board-list .w2{width: auto;}
table.board-list .w3{width: 13%;}
table.board-list .w4{width: 15%;}
table.board-list .w5{width: 9%;}
table.board-list .w6{width: 12%;}
table.board-list th,table.board-list td{padding:10px 12px; border-left: none}
table.board-list th:first-child,table.board-list td:first-child{border-left: none}
table.board-list thead th{border-left: 1px solid #dcdee2; border-bottom: 1px solid #b9bcc3; color: #333333; font-size: 16px}
/*table.board-list tbody tr:hover{background-color: #eee}*/
table.board-list tbody td{border-left: 1px solid #dcdee2; border-bottom: 1px solid #dcdee2; color: #666666; font-size: 15px; text-align: center}
table.board-list tbody td.notice{position: relative;}
table.board-list tbody td.notice span{display: block; position: absolute; top: 15px; left: 50%; width: 36px; height: 27px; margin-left: -14px; background: url(/images/onioncms/adm/lib/icon_notice.png) no-repeat 50%; text-indent: -999em}
table.board-list tbody td.title a{display: block; max-width: 100%;/* overflow: hidden; white-space: nowrap; text-overflow: ellipsis;*/ padding-left: 4%; padding-right: 5%; text-align: left; color: #666666; text-decoration: none;}
table.board-list tbody td .new{margin-left: 5px; vertical-align: middle;}
table.board-list tbody td.title{ max-width: 100%;text-align: left; color: #666666; text-decoration: none;}


 /* 탑 셀렉트 박스 */
.top-select-box{padding:10px;margin-bottom:30px;border:3px solid #d1d1d1;line-height:1.5; }
.top-select-box .inner{padding:20px 2%;background-color:#fff;}
.top-select-box p{color:#222}


.component-box,.component-box table,.component-box input,.component-box textarea,.component-box select,.component-box button{font-family: 'Roboto', 'Nanum Square';}
.component-box.dark{background-color: #1c2431; border-color: #1c2431;}
.component-box + p{margin-top: 10px}
.component-box .component-group{margin-bottom: 30px}
.component-box .component-group:last-of-type{margin-bottom: 0}
.component-box .component-group button,.component-box .component-group a{margin-right: 20px}
.component-box .component-group a{display: inline;}

.tabMenu:after{content: ''; display: block; clear: both}
.tabMenu > li{float: left; font-weight: bold; text-align: center}
.tabMenu.col-2 > li{width: 50%;}
.tabMenu.col-3 > li{width: 33.33333%;}
.tabMenu.col-4 > li{width: 25%;}
.tabMenu.col-5 > li{width: 20%;}

.tabMenu.tab-fill > li > a{padding: 11px 0; border: 1px solid #ccc;  color: #a0a0a0;text-decoration:none;}
.tabMenu.tab-fill > li:not(:first-child) > a{border-left: none}
.tabMenu.tab-fill > li > a:hover,.tabMenu.tab-fill > li > a:focus,.tabMenu.tab-fill > li > a:active,.tabMenu.tab-fill > li.on > a{border-color: #2873ab; background-color: #3681b9; color: #fff;}


@media screen and (max-width: 965px) {
	.search-area .total{top: 0; margin-top: 0}
	.search-area .search-wrap{float: none; width: 100%; margin-top: 25px}
}
@media screen and (max-width: 760px) {
	.search-area .search-wrap{padding-left: 0; padding-right: 0; height: auto}
	.search-area .search-wrap select{position: static; width: 100%; height: 34px; margin-bottom: 5px}
	table.board-list{line-height: 1.5}
	table.board-list .only-pc{display: none;}
	table.board-list .w1{width: auto}
	table.board-list .w2{width: auto}
	table.board-list .w3{width: auto}
	table.board-list .w4{width: auto}
	table.board-list .w5{width: auto}
	table.board-list .w6{width: auto}
	table.board-list tbody tr{position: relative; display: block; border-bottom: 1px solid #cecece;}
	table.board-list tbody td{display: inline-block; border: none; padding-left: 0; padding-right: 0}
	table.board-list tbody td:nth-child(4){position: absolute; right: 30px; bottom: 0;}
	table.board-list tbody td:nth-child(5){position: absolute; right: 0; bottom: 0;}
	table.board-list tbody td.title{display: block;}
	table.board-list tbody td.title a{padding-left: 0; padding-right: 0}
	table.board-list tbody td.notice{display: block; float: left; width: 25px; height: 18px; margin-top: 10px; padding: 0}
	table.board-list tbody td.notice span{top: 4px; width: 25px; height: 18px; background-size: 25px auto}
	table.board-list tbody td.notice + td.title a{text-indent: 9px}
}

/* table board view*/
table.board-view{width:100%; line-height: 1.4}
table.board-view .w1{width: 15%;}
table.board-view tr:first-child th,table.board-view tr:first-child td{border-top: 2px solid #444444}
table.board-view th,table.board-view td{border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1}
table.board-view th:first-child,table.board-view td:first-child{border-left: none}
table.board-view th{min-width: 70px; background-color: #f9f9f9; color: #333333; font-size: 16px; text-align:center; font-weight:bold;}
table.board-view td{padding: 13px 20px; color: #666666; font-size: 15px;}
table.board-view td.tb-content{padding: 33px 20px;}
table.board-view td .file-down{display: inline-block; margin-right: 10px; color: #666666; font-size: 15px; text-decoration: underline}

.view-option{position: relative; margin-top: -1px; border-top: 1px solid #9e9e9e; border-bottom: 1px solid #9e9e9e}
.view-option dt{position: absolute; left: 0; width: 15%; min-width: 70px; height: 51px; padding: 17px 0; font-size: 14px; font-weight: bold; text-align: center;}
.view-option dt.next{top: 0; border-bottom: 1px solid #dedede;}
.view-option dt.prev{bottom: 0;}
.view-option dt.next + dd{border-bottom: 1px solid #dedede}
.view-option dd{height: 51px; padding: 17px 0 17px 15%; background: url(/images/onioncms/adm/lib/tab_line.gif) no-repeat 15% 50%;}
.view-option dd a{overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 20px; color: #888888;}

@media screen and (max-width: 540px) {
	.view-option dd{padding-left: 70px; background-position: 70px 50%}
}

/* table board write*/
table.board-write{width:100%; line-height: 1.3}
table.board-write tr:first-child th,table.board-write tr:first-child td{border-top: 2px solid #444444}
table.board-write th,table.board-write td{border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1;}
table.board-write th:first-child,table.board-write td:first-child{border-left: none}
table.board-write th{min-width: 70px; background-color: #f9f9f9; color: #333333; font-size: 16px; text-align:center }
table.board-write td{padding: 13px 20px; color: #666666; font-size: 15px}
table.board-write input[type="file"]{overflow: hidden; position: absolute; width: 0; height: 0; padding: 0; margin: -1px; clip:rect(0,0,0,0); border: 0;}
table.board-write .upload-wrap{margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e1e1e1}
table.board-write .upload-wrap label{margin-left: -6px}
table.board-write .file-wrap{font-weight: bold}
table.board-write .file-wrap + .file-wrap{margin-top: 5px}
table.board-write .file-limit{margin-top: 15px; color: #f14b4b; font-weight: bold}
table.board-write .file-del{margin-left: 5px; width: 27px; height: 20px; outline: none; border: none; background: url(/images/onioncms/adm/lib/icon_close.gif) no-repeat; text-indent: -999em}

/* gallery */
.gallery-list li{float: left; width: 32.33333%; margin-right: 1.5%; margin-bottom: 1.5%}
.gallery-list li:nth-child(3n){margin-right: 0}
.gallery-list li .gallery-item{background-color: #fff; color: #111; min-height: 130px; }
.gallery-list li .gallery-item a{position: relative; border: 1px solid #ddd;}
.gallery-list li .gallery-item a:hover,
.gallery-list li .gallery-item a:active,
.gallery-list li .gallery-item a:focus{border-color:#777;}
.gallery-list li .gallery-item a .gallery-thum{display: block; overflow: hidden; width: 100%; height: 200px;}
.gallery-list li .gallery-item a .gallery-thum img{width: 100%; height: 100%;}
.gallery-list li .gallery-item a .gallery-meta{padding: 10px 15px; border-top: 1px solid #ccc}
.gallery-list li .gallery-item a .gallery-meta h2{height: 48px; overflow: hidden; color: #1a1a1a; font-size: 18px; font-weight: normal; line-height: 24px}
.gallery-list li .gallery-item a:hover .gallery-meta h2,
.gallery-list li .gallery-item a:active .gallery-meta h2,
.gallery-list li .gallery-item a:focus .gallery-meta h2{text-decoration: underline;}
.gallery-list li .gallery-item a .gallery-meta .gallery-info{position: relative; display: block; width: 100%; padding: 11px 0 11px; border-top: 1px solid #ebebeb; color: #333; font-size: 13px; line-height: 18px}
.gallery-list li .gallery-item a .gallery-meta .gallery-info .gallery-date{position: absolute; bottom: 11px; right: 0; color: #888;}

@media screen and (max-width: 900px) {
	.gallery-list li{width: 49.25%;}
	.gallery-list li:nth-child(3n){margin-right: 1.5%}
	.gallery-list li:nth-child(2n){margin-right: 0}
}

@media screen and (max-width: 725px) {
	.gallery-list li{width: 100%;}
	.gallery-list li:nth-child(3n){margin-right: 0}
}

/**
 *	2017-06-07 추가 
 */
.board-list input[type="text"]{max-width: 300px} /* fix IE */
.content-box{padding: 20px; border: 1px solid #3681b9;}
.content-box .inner{display: table;}
.content-box .tree{display: table-cell; width: 40%; min-height: 100%; border: 1px solid #ccc; margin: 0; padding: 20px;}
.content-box .board-list.write{display: table-cell; width: 60%; padding-left: 20px; vertical-align: top}
.content-box + .content-box{margin-top: 20px;}

.required{color: #f14b4b;}

/* textarea */
.txtarea{resize: vertical; width: 100%; padding: 5px; font-size: 14px; border: 1px solid #ccc;}

/* 버튼 크기*/
.btn.btn-background.btn-small{padding: 3px 20px; font-size: 12px}
.btn.btn-background.btn-large{padding: 15px 30px; font-size: 16px}


/* 2018-07-16 KSM 추가 */
/*-------------------------------------------
  snb
--------------------------------------------*/
#snb .d1 > li.on > a,
#snb .d1 > li > a:hover{background-color:#94783b !important;}
#snb .d1 > li > a:before{background-color:#94783b !important;}​

/* TABLE */
.table_list table thead th,
.table_list table tbody td{word-break:break-all;}
.table_list table tbody td.center{padding-left:5px;padding-right:5px;}