@charset "utf-8";
/* CSS Document */
* {
    user-select: none; /* 모든 요소에서 텍스트 선택을 방지 */
}

:root {
	--font-size-xsmall: 12px;
    --font-size-small: 14px;
    --font-size-normal: 16px;
	--font-size-medium: 18px;
    --font-size-large: 20px;
    --font-size-xlarge: 24px;
    --font-size-xxlarge: 30px;
	--font-size-xxxlarge: 35px;
	--font-size-xxxxlarge: 40px;
	--font-size-xxxxxlarge: 50px;
    --font-size-huge: 60px;
	--font-size-xhuge: 90px;
	
	--gap-5:5px;
	--gap-10:10px;
    --gap-15:15px;
    --gap-20:20px;
	--gap-30:30px;
    --gap-40:40px;
	--gap-50:50px;
    --gap-60:60px;
	--gap-80:80px;
	--gap-100:100px;
    --gap-140:140px;

    --color-primary: #5F9595;
    --color-secondary: #ECE5DF;
	---color-third: #AF1823;
	--color-top-bg:#605E69;
	--color-point: #AAB8BB;
	--color-font: #828282;
    --color-dark: #000000;
    --color-bright: #ffffff;
	--color-border: #d6d6d6;
	--color-light-gray : #F1F1F2;
	
	--logo-height:100px;
	--subTop-height:400px;
	
	--layout-board:960px;
	--layout-side-margin:40px;
	--layout-flax-margin:80px;
	--layout-width:1366px;
}

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;
	text-decoration:none;
	word-break:break-all;
	box-sizing: border-box;
}

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:var(--font-size-normal); scroll-behavior: smooth;}

body{
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	line-height:170%;
	height:100%;
	-webkit-font-smoothing: antialiased;
	font-weight:400;
}

p, a{
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size:100%;
    text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	moz-osx-font-smoothing: grayscale;
	word-break:keep-all;
}


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;
}



@media only screen and (max-width:768px){
	:root {
		--font-size-xsmall: 12px;
		--font-size-small: 14px;
		--font-size-normal: 16px;
		--font-size-medium: 18px;
		--font-size-large: 20px;
		--font-size-xlarge: 24px;
		--font-size-xxlarge: 30px;
		--font-size-xxxlarge: 35px;
		--font-size-xxxxlarge: 40px;
		--font-size-huge: 60px;
		--font-size-xhuge: 90px;
		
		--gap-5:5px;
		--gap-10:10px;
		--gap-15:15px;
		--gap-20:20px;
		--gap-30:30px;
		--gap-40:40px;
		--gap-50:50px;
		--gap-60:60px;
		--gap-80:80px;
		--gap-100:100px;
		--gap-140:140px;



		--logo-height:100px;
		--subTop-height:400px;

		--layout-side-margin:30px;
		--layout-flax-margin:60px;
	}
}

@media only screen and (max-width:640px){
	:root {
		--font-size-xsmall: 10px;
		--font-size-small: 12px;
		--font-size-normal: 14px;
		--font-size-medium: 16px;
		--font-size-large: 18px;
		--font-size-xlarge: 20px;
		--font-size-xxlarge: 28px;
		--font-size-xxxlarge: 30px;
		--font-size-xxxxlarge: 34px;
		--font-size-huge: 40px;
		--font-size-xhuge: 600px;
		
		--gap-5:5px;
		--gap-10:10px;
		--gap-15:15px;
		--gap-20:20px;
		--gap-30:25px;
		--gap-40:30px;
		--gap-50:40px;
		--gap-60:50px;
		--gap-80:70px;
		--gap-100:80px;
		--gap-140:90px;



		--logo-height:100px;
		--subTop-height:400px;

		--layout-side-margin:20px;
		--layout-flax-margin:40px;
	}
}


@media only screen and (max-width:425px){
	
}


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: #8a8da1;
    font-size: 0.937em;
    outline: none;
    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: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

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

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{
 	color:#737373;
	transition:all .5s;
}

button{background-color:transparent;}

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: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 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;
}

a {
    color:inherit;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
	transition: all .5s;
	cursor: pointer;
	font-size:inherit;
}

a:hover{
	color:var(--color-point);
}

/*---------------------------------------------------------------------------------------
button style
---------------------------------------------------------------------------------------*/

a.view-more{font-family: "Montserrat", sans-serif;}

.list-button-type{width:120px; height: 50px; color:var(--color-bright); position:relative; font-weight: 500; background-color:var(--color-primary); transition: all .3s; display:block; border-radius: 5px;}
.list-button-type > p{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); color:#fff; transition: all .3s;}
.list-button-type > img{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); transition: all .3s; opacity:0;}
.list-button-type:hover{background-color:#477171;}
.list-button-type:hover p{left:30%; transform: translate(0%,-50%);}
.list-button-type:hover > img{left:70%; opacity:1; transform: translate(0%,-50%);}
.list-button-type.black{background-color:#000;}
.list-button-type.black:hover{background-color:#000;}
.list-button-type.red{background-color:var(---color-third);}
.list-button-type.red:hover{background-color:#9D1111; }
.list-button-type.white{background-color:#fff; border:1px solid #d6d6d6;}
.list-button-type.white > p{color:#000;}


select,h1, h2, h3, h4, h5, h6, blockquote p, .thb-portfolio-filter .filters, .thb-portfolio .type-portfolio.hover-style5 .thb-categories {
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.btn-confirm{width:140px; height:42px; }
.listBtn{padding:var(--gap-10) var(--gap-60); color:#fff; font-size:var(--font-size-normal); background-color:var(--color-primary); border-radius: 60px; display:inline-block;}
.listBtn:hover{color:#fff; background-color:#4F7D7D;}
/*---------------------------------------------------------------------------------------
checkbox style
---------------------------------------------------------------------------------------*/

.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:#d7d7ea; 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:25px; height:25px; 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:#d7d7ea; transition: all .5s;} 
.check-circle input:checked ~ .checkmark-circle {background-color:var(--color-point);} 
.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-wrap{position:fixed; width:100%; height: 100%; z-index: 100; background: rgba(255,255,255,1); opacity:0;}
.preloader-wrap > img{position:fixed; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); z-index: 101;}


#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 var(--color-border); 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:#000; }


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

.preLoader{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); text-align:center; font-size:20px;  z-index:52; color:#fff; display:none; }
.preLoader > img{opacity:0.5; width:50%; margin-bottom:15px;}


.width-wrap{width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width); margin:0 auto;}

/*---------------------------------------------------------------------------------------
1.board style - normal
---------------------------------------------------------------------------------------*/
#list-style{padding:var(--gap-100) 0;}
#list-style > .inner-wrap{width:calc(100% - var(--gap-40)); max-width:var(--layout-board); margin:0 auto;}
.search-wrap{width:100%; padding:var(--gap-20); background-color:#e8e8e8; box-sizing: border-box;}
.search-wrap > .inner-wrap{display:flex; align-items: center; background-color: #fff;}
.search-wrap .board-search-select{background-color: #fff; width:205px; height: 60px; color:#000; font-size:var(--font-size-medium);}
.search-wrap .hv{width:1px; height: 25px; background-color: #e8e8e8;}
.search-wrap .search-input{background-color:#fff; border-radius: 0; color:var(--color-font); width:calc(100% - 266px); height: 60px;}
.search-wrap .search-input:focus{ color:#000;}
.search-wrap  button{width:60px; height: 60px; background-color: var(--color-primary); display:flex; justify-content: center; align-items: center;}
p.emptyMessage{text-align: center; margin:var(--gap-50) auto;}

#list-style.read-wrap{padding:var(--gap-100) 0;}
#list-style.read-wrap > .inner-wrap{ margin:0 auto; max-width:var(--layout-board);}
#list-style.read-wrap h1.title{color:#000; text-align: center; font-weight: 600; font-size:var(--font-size-xxxlarge); margin:var(--gap-50) 0 var(--gap-20) 0;}
#list-style.read-wrap .head-info-wrap{display:flex; justify-content:center; align-items: center; flex-wrap: wrap; color:var(--color-font); padding:0 0 var(--gap-40) 0; border-bottom:2px solid #000;}
#list-style.read-wrap .head-info-wrap .info-wrap{display: flex; align-items: center;}
#list-style.read-wrap .head-info-wrap .info-wrap > .hv{width:1px; height: 15px; background-color: var(--color-border); margin:0 var(--gap-15);}
#list-style.read-wrap .cont-wrap{padding:var(--gap-50) 0; color:var(--color-font); font-size:var(--font-size-normal);}
#list-style.read-wrap .cont-wrap img{max-width:100%;}
#list-style.read-wrap .btn-wrap{display:flex; justify-content: center; margin:var(--gap-30) 0;}

#list-style .read-wrap .file-wrap{margin-bottom:var(--gap-40);}

#list-style .pn-wrap{width:100%; padding:var(--gap-15); border-top:1px solid var(--color-border); display:flex; align-items: center; transition:all .5s;}
#list-style .pn-wrap:hover{background-color:#e8e8e8; transition:all .5s;}
#list-style .pn-wrap:last-of-type{border-bottom:1px solid var(--color-border);}
#list-style .pn-wrap > svg{margin:0 var(--gap-15);}

#list-style .board-list-wrap{margin-top:var(--gap-50);}
#list-style .board-list-wrap .list-head{width:100%; border-top:2px solid #000; background-color:#f4f4f4; border-bottom:1px solid var(--color-border); padding:var(--gap-15) 0; display:flex;}
#list-style .board-list-wrap .list-head > li{text-align: center; color:#000; padding:0 var(--gap-10); box-sizing: border-box;}
#list-style .board-list-wrap ul > li.number{width:100px;}
#list-style .board-list-wrap ul > li.file{width:100px;}
#list-style .board-list-wrap ul > li.date{width:150px;}

#list-style .file-icon{fill:#E9E9E9; width:24px;}
#list-style .file-icon.on{fill:var(--color-primary); width:24px;}

#list-style .board-list-wrap .cont-list{display:flex; padding:var(--gap-20) 0; border-bottom:1px solid var(--color-border); transition: all .5s;}
#list-style .board-list-wrap .cont-list:hover{background-color:#f4f4f4;}
#list-style .board-list-wrap .cont-list > li{text-align: center; color:#000; display: flex; flex-wrap: wrap; align-items: center; justify-content:center; padding:0 var(--gap-10);}
#list-style .board-list-wrap .cont-list > li.number{font-weight: 800;}
#list-style .board-list-wrap .cont-list > li.date{color:var(--color-font)}
#list-style .board-list-wrap .cont-list > li > a{width:100%; display: inline-block;  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size:var(--font-size-large); font-weight: 500; text-align: left;}

#list-style .tdate{font-size:var(--font-size-normal); color:var(--color-font); width:100%; margin-top:var(--gap-5); text-align: left; display:none;}
#list-style .clip{padding:var(--gap-5) var(--gap-15); text-align: center; color:var(--color-bright); border-radius: 20px; background-color:var(--color-primary); font-weight: 400;}

#list-style .board-list-wrap .cont-list > li.flexWidth > .clip{display:none; margin-bottom:var(--gap-5);}

#list-style .total-list{margin-bottom:var(--gap-5);}
#list-style .total-list > span{color:var(--color-primary); font-weight: 500;}
#list-style .board-list-wrap .cont-list:nth-of-type(1){border-top:2px solid #000;}

@media only screen and (max-width:580px){
	.search-wrap .board-search-select{width:130px;}
	.search-wrap .search-input{width:calc(100% - 130px);}
	.board-list-wrap ul > li.disappear{display:none !important;}
	#list-style.read-wrap .file-wrap{width:100%; margin-top:var(--gap-15);}
	.tdate{display:block;}
	#list-style .number{width:100%;}
	#list-style .board-list-wrap .cont-list > li.flexWidth > .clip{display:block;}
	#list-style .board-list-wrap .cont-list > li.flexWidth{justify-content: flex-start;}
}

/*---------------------------------------------------------------------------------------
2.board style - accordian
---------------------------------------------------------------------------------------*/
#accordion-style{padding-bottom:var(--gap-50);}
#accordion-style > .inner-wrap{width:calc(100% - var(--layout-side-margin)); max-width:var(--layout-width); margin:0 auto;}
p.emptyMessage{text-align: center; margin:var(--gap-50) auto;}

#accordion-style .board-list-wrap{margin-top:var(--gap-50);}

#accordion-style .board-list-wrap ul > li.qaMark{width:100px;}
#accordion-style .board-list-wrap ul > li.category{width:150px; color:var(--color-font);}
#accordion-style .board-list-wrap .cont-list{border-bottom:1px solid var(--color-border); overflow: hidden; transition: all .3s;}
#accordion-style .board-list-wrap .cont-list:nth-of-type(2){border-top:1px solid var(--color-border);}
#accordion-style .board-list-wrap .cont-list > ul{display:flex; padding:var(--gap-20) 0; transition: all .5s; cursor: pointer;}
#accordion-style .board-list-wrap .cont-list > ul.answer-list{background-color:var(--color-light-gray);}
#accordion-style .board-list-wrap .cont-list li{text-align: center; color:#000; padding:0 var(--gap-15);}
#accordion-style .board-list-wrap .cont-list li.qaMark{font-weight: 600; font-size:var(--font-size-xxlarge); padding:0 var(--gap-10);}
#accordion-style .board-list-wrap .cont-list li.title-wrap{text-align: left; font-size:var(--font-size-large); width:calc(100% - 250px);}
#accordion-style .board-list-wrap .cont-list li.title-wrap > .title{width:100%;}
#accordion-style .board-list-wrap .cont-list li.title-wrap > .answer{color:var(--color-font); width:100%; font-size:var(--font-size-normal);}


.category-list{display:flex; align-items: center; justify-content:center; margin-bottom:var(--gap-50);}
.category-list > li{padding:0 var(--gap-10);}
.category-list > li > a{color:var(--color-font); font-size:var(--font-size-medium); padding:var(--gap-15) 0;}
.category-list > li.on > a{color:#000; font-weight: 600; border-bottom:1px solid #000;}

@media only screen and (max-width:580px){
	.board-list-wrap ul > li.disappear{display:none;}
	#accordion-style .board-list-wrap .cont-list li.title-wrap{width:calc(100% - 50px);}
	#accordion-style .board-list-wrap ul > li.qaMark{width:50px;}
}

/*---------------------------------------------------------------------------------------
board paging
---------------------------------------------------------------------------------------*/
.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: #fff; text-align: center; line-height: 30px; margin-right:3px; 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 #3a3e56; border-left:1px solid #3a3e56; 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 #3a3e56; border-right:1px solid #3a3e56; 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;}