@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, sub, sup, tt, var,i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,button {
    margin: 0;
    padding: 0;
    border: 0;
	font-size:100%;
	text-decoration:none;
	font-family: 'Roboto', 'Playfair Display', 'Noto Sans KR', 'Noto Sans SC', 'sans-serif';
	word-wrap:break-word;
	overflow-wrap: break-word;
	hyphens: auto;
}

strong,strike,b,u{
	margin: 0;
    padding: 0;
    border: 0;
	font-size:100%;
}


tbody, tfoot, thead, tr, th, td{margin: 0;
    padding: 0;
	font-size:100%;
	text-decoration:none;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

html{height:100%; font-size:16px;}

body{
	font-family: 'Roboto', 'Playfair Display', 'Noto Sans KR', 'Noto Sans SC', 'sans-serif';
	/*line-height:120%;*/
	
	-webkit-font-smoothing: antialiased;
	font-weight:400;
	background-color: #212121;
	color:#87898F;
	font-size:16px;
}

p, a{
	font-family: 'Roboto', 'Playfair Display', 'Noto Sans KR', 'Noto Sans SC', 'sans-serif';
    font-size:100%;
    text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	moz-osx-font-smoothing: grayscale;
}

a {
    color: #87898F;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
	transition: all .5s;
	cursor:pointer;
}

a:hover{
	color:#F3CFAC;
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

.font100{font-size:6.25rem}
.font70{font-size:4.375rem}
.font50{font-size:3.125rem}
.font35{font-size:2.1875rem}
.font30{font-size:1.875rem}
.font25{font-size:1.5625rem}
.font20{font-size:1.25rem}
.font18{font-size:1.125rem;}
.font14{font-size:0.875rem;}

@media only screen and (max-width:768px){
	html{font-size:14px;}
}

@media only screen and (max-width:640px){
	html{font-size:12px;}
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"],  textarea {
    box-sizing: border-box;
    padding: 0px 16px;
    color: #87898F;
    font-size: 0.937em;
    outline: none;
    background: #e6e6f4;
    border-radius: 5px;
	border:none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
	font-weight:400;
	transition:all .5s;
	font-family: 'Roboto', 'Playfair Display', 'Noto Sans KR', 'Noto Sans SC', 'sans-serif';
}

input::placeholder{color:#444444;}
textarea::placeholder{color:#444444;}

input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus,  textarea:focus{
	background: #E9E9E9; color:#737373;
	transition:all .5s;
}

input[type="button"],input[type="submit"],button{    
	box-sizing: border-box;
    font-size: 1rem;
    outline: none;
	border:none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
	font-weight:400;
	cursor: pointer;
	transition: all .5s;
	font-family: 'Roboto', 'Playfair Display', 'Noto Sans KR', 'Noto Sans SC', 'sans-serif';
}







article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
*, :after, :before {
    box-sizing: inherit;
}

user agent stylesheet
article, aside, footer, header, hgroup, main, nav, section {
    display: block;
}

li {
    font-size: inherit;
}

*, :after, :before {
    box-sizing: inherit;
}


h1{font-size:3.125rem; font-weight:700; padding:0;}
h2{font-size:1.875rem; font-weight:700; padding:0;}
h3{font-size:1.5625rem; font-weight:700; padding:0;}
h4{font-size:1.25rem; font-weight: 700; padding:0;}

a.button-type{display:inline-block; text-align:center; border:1px solid #000; padding:10px;  transition: all .5s; font-family: 'Archivo','Noto Sans KR', sans-serif;  font-weight: 700; color:#000;}


a.button-type-white{display:block; text-align:center; border:1px solid #fff; padding:10px 0;  transition: all .5s; font-family: 'Roboto', 'Playfair Display', 'Noto Sans KR', 'Noto Sans SC', 'sans-serif';}
a.button-type-white:hover{background-color: #29549d; color:#fff; transition: all .5s; border:1px solid #29549d;}


select,h1, h2, h3, h4, h5, h6, blockquote p, .thb-portfolio-filter .filters, .thb-portfolio .type-portfolio.hover-style5 .thb-categories {
    font-family: 'Roboto', 'Playfair Display', 'Noto Sans KR', 'Noto Sans SC', 'sans-serif';
}

.btn-confirm{width:140px; height:42px; }
.check {width:20px; height:20px; display:block; position:relative; font-size:0.937em; cursor:pointer; user-select:none;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; transition: all .5s;} 
.check input {position:absolute; opacity:0; cursor:pointer;} 
.checkmark {position:absolute; top:0; left:0px; width:100%; height:100%; background-color:#e6e6f4; border-radius: 5px; transition: all .5s;} 
.check:hover input ~ .checkmark {background-color:#7D1685; transition: all .5s;} 
.check input:checked ~ .checkmark {background-color:#3a3e56;} 
.checkmark:after {display:none; position:absolute; content:""; transition: all .5s;} 
.check input:checked ~ .checkmark:after {display:block;} 
.check .checkmark:after {top:45%; left:50%; width:5px; height:10px; border:solid #e58bf5; border-width:0 2px 2px 0; -webkit-transform:translate(-50%,-50%) rotate(45deg);-webkit-transform:translate(-50%,-50%) rotate(45deg); -ms-transform:translate(-50%,-50%) rotate(45deg); transition: all .5s;}

.check-circle {width:30px; height:30px; display:block; position:relative; font-size:0.937em; cursor:pointer; user-select:none;-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; transition: all .5s;} 
.check-circle input {position:absolute; opacity:0; cursor:pointer;} 
.checkmark-circle {position:absolute; top:0; left:0px; width:100%; height:100%; background-color:#cbcacb; border-radius: 50%; transition: all .5s;} 
.check-circle:hover input ~ .checkmark-circle {background-color:#707070; transition: all .5s;} 
.check-circle input:checked ~ .checkmark-circle {background-color:#7D1685;} 
.checkmark-circle:after  {display:block; position:absolute; content:""; transition: all .5s;}  
.check-circle .checkmark-circle:after {top:45%; left:50%; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; -webkit-transform:translate(-50%,-50%) rotate(45deg);-webkit-transform:translate(-50%,-50%) rotate(45deg); -ms-transform:translate(-50%,-50%) rotate(45deg); transition: all .5s;}

form{display: inline;}

.preLoader{position:fixed; width:100%; height: 100%; z-index: 100; overflow: hidden; background-color: #212121;}



#block{position:fixed; top:0px; left:0; width:100%; height: 100%; z-index: 51; background: rgba(0,0,0,0.8); cursor:pointer; display:none; }
.Top-btn{width:50px; height: 50px; border-radius: 50%; background: #fff; border:1px solid #00000; position:fixed; bottom:30px; right:-50px; z-index: 10; cursor: pointer;  opacity: 0; transition: all .5s; -webkit-transform: rotate(-200deg)}
.Top-btn > .inner-wrap{width:100%; height: 100%; position:relative;}
.Top-btn  img{width:40%; position:absolute; top:50%; left: 50%; -webkit-transform: translate(-50%,-50%);}
.Top-btn.on:hover{opacity: 1; transition: all .5s;}
.Top-btn.on{opacity: 0.5; transition: all .5s; right:30px; -webkit-transform: rotate(0deg);}

/*----- alert -----*/
.alert{width:calc(100% - 30px);  max-width:540px; position: fixed; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); z-index: 52; background: #fff; border-radius: 5px; opacity: 0; display: none;}
.alert .inner-wrap{width:100%; position: relative; width:calc(100% - 30px); margin:0 auto;}
.alert .inner-wrap > .headBox{width:100%; font-size:1em; text-align: left; border-bottom:1px solid #142057; height: 60px; line-height: 60px; }
.alert .txt-box{width:calc(100% - 60px); height:auto; padding:50px 0; text-align: center; font-weight: 500; color:#707070; margin:0 auto;}
.alert .btn-box{width:100%; display:flex; justify-content: center; margin-bottom:20px;}
.alert .btn-box button{width:85px; height:35px; border-radius: 5px; font-size:1em; margin:0 5px; float:left; cursor: pointer; color:#fff; background:#263262; }



.boardpage-wrap{width:100%; margin-top:30px;}
.boardpage-wrap ul{margin:0 auto; display: table;}
.boardpage-wrap ul li{width:30px; height: 30px; cursor: pointer; text-align: center; font-size:0.875em; color:#707070; border:1px solid #C1C1C1; vertical-align: middle; box-sizing: border-box; display: table-cell;}
.boardpage-wrap ul li.on{font-weight: 500; background-color:#F0F0F0;  color:#152a76;}
.boardpage-wrap ul li:hover{font-weight: 500; background-color:#F0F0F0;  color:#152a76;}
.boardpage-wrap ul a img{vertical-align: middle;}
.boardpage-wrap ul a:nth-child(1) img{width:16px; height: 15px;}
.boardpage-wrap ul a:last-child  img{width:16px; height: 15px; -webkit-transform:rotate(0deg); 
	-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";}
.boardpage-wrap ul a:nth-child(2) img{width:8px; height: 15px;}
.boardpage-wrap ul a:nth-last-of-type(2) img{width:8px; height: 15px; -webkit-transform:rotate(0deg); 
	-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";}

.empty_message{text-align: center; margin:50px auto;}

.custom-wrap .read-wrap .pre-wrap{width:100%; margin-top:50px;}
.custom-wrap .read-wrap .pre-wrap ul{border-top:1px solid #152a75; border-bottom:1px solid #152a75;}
.custom-wrap .read-wrap .pre-wrap ul > li{border-bottom:1px solid #d8d9da; width:100%; height: 40px;}
.custom-wrap .read-wrap .pre-wrap ul > li:hover{background-color: #F7F7F7;}
.custom-wrap .read-wrap .pre-wrap ul > li > div{float:left; height: 40px; line-height: 40px; padding:0 10px; font-size:0.875em;}
.custom-wrap .read-wrap .pre-wrap ul > li > div.title-wrap{text-align: center; width:80px;}
.custom-wrap .read-wrap .pre-wrap ul > li > div.title-wrap > img{width:12px;}
.custom-wrap .read-wrap .pre-wrap ul > li.next div.title-wrap > img{-webkit-transform: rotate(180deg)}
.custom-wrap .read-wrap .pre-wrap ul > li > div.cont-wrap{main-width:130px; color:#737373;}
/*
.contents-wrap{width:100%;}
.contents-wrap > .inner{width:calc(100% - 30px); max-width:1366px; margin:0 auto; padding:150px 0 100px 0;}
.contents-wrap > .inner > .readyImg{width:100%; max-width:604px; display:block; margin:0 auto;}
*/
a.re_btn{display:block; width:218px; margin:50px auto;}
a.re_btn > img{width:100%;  display:block;}



.bord-page-numbering-wrap{margin:30px auto; display: flex; justify-content: center;}
.bord-page-numbering-wrap > ul{display:flex; align-items: center; justify-content: flex-start; margin:15px auto;  height: auto;}
.bord-page-numbering-wrap > ul li{width:30px; height: 30px; border-radius: 50%; background: #444444; text-align: center; line-height: 30px; margin-right:10px; transition: all .5s;}
.bord-page-numbering-wrap > ul a:last-child li{margin-right:0;}
.bord-page-numbering-wrap > ul li.on{background: #000; color:#fff; transition: all .5s;} 
.bord-page-numbering-wrap > ul li.arrow-wrap{position:relative;}
.bord-page-numbering-wrap > ul li.prev .arrow-box{width:10px; height: 10px; border-top:1px solid #1C1C1C; border-left:1px solid #1C1C1C; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotateZ(-45deg); -webkit-transform: translate(-50%,-50%) rotateZ(-45deg);}
.bord-page-numbering-wrap > ul li.all.prev .arrow-box:nth-of-type(1){left:45%;}
.bord-page-numbering-wrap > ul li.all.prev .arrow-box:nth-of-type(2){left:65%;}
.bord-page-numbering-wrap > ul li.next .arrow-box{width:10px; height: 10px; border-top:1px solid #1C1C1C; border-right:1px solid #1C1C1C; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotateZ(45deg); -webkit-transform: translate(-50%,-50%) rotateZ(45deg);}
.bord-page-numbering-wrap > ul li.all.next .arrow-box:nth-of-type(1){left:35%;}
.bord-page-numbering-wrap > ul li.all.next .arrow-box:nth-of-type(2){left:55%;}
.bord-page-numbering-wrap > ul li.on .arrow-box{border-color:#e58bf5;}


#preloader{background-color:#212121;  width:100vw; height:100vh; position:fixed; z-index:100; top:0; left:0;}
#preloader .progress{position:fixed; top:50%; left:0; width:100%; height: 1px; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); background-color:#3D3D3D; }
#preloader .progress > .bar{width:0; height: 1px; background-color:#7D1685;}
#preloader p{color:#F3CFAC; font-size:20px; position:fixed; top:calc(50% - 20px); left:calc(50% - 20px); transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);  margin-top:-10px;}
#preloader p > span{  margin-right:5px;}

.ready-wrap{width:calc(100% - 60px); max-width:1280px; margin:0 auto; padding:8.75rem 0;}
.ready-wrap > img{margin:0 auto; display:block;}
.ready-wrap > h4{font-size:1.5625rem; text-align: center; margin-top:30px; color:#F3CFAC; font-weight: 400;}
.ready-wrap > p{font-size:1.25rem; text-align: center; margin-top:5px;}



.listBtn{width:150px; text-align: center; padding:15px 0; color:#F3CFAC; border:1px solid #363636; display:block; margin:0 auto;}
.listBtn:hover{border:1px solid #F3CFAC;}
.writeBtn{width:150px; text-align: center; padding:15px 0; color:#F3CFAC; border:1px solid #363636; display:block;}
.writeBtn:hover{border:1px solid #F3CFAC;}
.delBtn{width:150px; text-align: center; padding:15px 0; color:#F3CFAC; border:1px solid #363636; display:block;}
.delBtn:hover{border:1px solid #F3CFAC;}
.editBtn{width:150px; text-align: center; padding:15px 0; color:#F3CFAC; border:1px solid #363636; display:block;}
.editBtn:hover{border:1px solid #F3CFAC;}