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

span{display:inline; font-kerning: normal;}

: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: 32px;
	--font-size-xxxlarge: 36px;
	--font-size-xxxxlarge: 40px;
	--font-size-xxxxxlarge: 50px;
    --font-size-huge: 60px;
	--font-size-shuge: 80px;
	--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;
	--gap-400:400px;

    --color-primary: #000;
	--color-primary-text: #fff;
    --color-secondary: #FF888F;
	---color-third: #AF1823;
	--color-point: #F85050;
	--color-font: #828282;
    --color-dark: #000000;
    --color-bright: #ffffff;
	--color-border: #d6d6d6;
	--color-light-gray : #ECEDF1;
	
	--logo-height:100px;
	--subTop-height:400px;
	
	--layout-side-margin:40px;
	--layout-flax-margin:80px;
	--layout-about-margin:140px;
	--layout-width:1366px;
	--board-layout:1024px;
}

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: 'SUIT Variable', -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;
	background-color:#17171A;
}

p, a{
	font-family: 'SUIT Variable', -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;
	cursor: none;
}


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;
		--gap-400:300px;


		--logo-height:100px;
		--subTop-height:400px;
		--layout-flax-margin:60px;
		--layout-side-margin:30px;
	}
}

@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-shuge: 50px;
		--font-size-xhuge: 60px;
		
		--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;
		--gap-400:200px;

		--logo-height:100px;
		--subTop-height:400px;
		--layout-flax-margin:40px;
		--layout-side-margin:20px;
	}
}


@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: 'SUIT Variable', -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: 'SUIT Variable','Roboto','Noto Sans KR', 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);
}

a.view-more{font-family: 'SUIT Variable', sans-serif;}

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

.list-button-type{width:120px; height: 50px;  position:relative; font-weight: 500; background-color:var(--color-primary); transition: all .3s; display:block; border-radius: 5px;  box-sizing: border-box;}
.list-button-type > p{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); color:var(--color-primary-text); transition: all .3s; font-size:var(--font-size-normal); line-height: 0;}
.list-button-type > img{position:absolute; right:50%; top:50%; transform: translate(50%,-50%); transition: all .3s; opacity:0;}
.list-button-type:hover p{left:20px; transform: translate(0%,-50%);}
.list-button-type:hover > img{right:20px; opacity:1; transform: translate(0%,-50%);}

.write-button-type{width:120px; height: 50px;  position:relative; font-weight: 500; background-color:var(--color-primary); transition: all .3s; display:block; border-radius: 5px;  box-sizing: border-box;}
.write-button-type > p{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); color:var(--color-primary-text); transition: all .3s; font-size:var(--font-size-normal); line-height: 0;}
.write-button-type > img{position:absolute; right:50%; top:50%; transform: translate(50%,-50%); transition: all .3s; opacity:0;}
.write-button-type:hover p{left:20px; transform: translate(0%,-50%);}
.write-button-type:hover > img{right:15px; opacity:1; transform: translate(0%,-50%);}


.cancle-button-type{width:120px; height: 50px; position:relative; font-weight: 500; background-color:#fff; transition: all .3s; display:block; border-radius: 5px;  box-sizing: border-box; border:1px solid #000;}
.cancle-button-type > p{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); color:#000; transition: all .3s; font-size:var(--font-size-normal); line-height: 0;}
.cancle-button-type > img{width:14px;  position:absolute; right:50%; top:50%; transform: translate(50%,-50%); transition: all .3s; opacity:0;}
.cancle-button-type:hover p{left:20px; transform: translate(0%,-50%);}
.cancle-button-type:hover > img{right:15px; opacity:1; transform: translate(0%,-50%);}

.edit-button-type{width:120px; height: 50px; position:relative; font-weight: 500; background-color:#fff; transition: all .3s; display:block; border-radius: 5px;  box-sizing: border-box; border:1px solid #000;}
.edit-button-type > p{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); color:#000; transition: all .3s; font-size:var(--font-size-normal); line-height: 0;}
.edit-button-type > img{width:14px;  position:absolute; right:50%; top:50%; transform: translate(50%,-50%); transition: all .3s; opacity:0;}
.edit-button-type:hover p{left:20px; transform: translate(0%,-50%);}
.edit-button-type:hover > img{right:15px; opacity:1; transform: translate(0%,-50%);}


.delete-button-type{width:120px; height: 50px;  position:relative; font-weight: 500; background-color:#D64E4E; transition: all .3s; display:block; border-radius: 5px;  box-sizing: border-box;}
.delete-button-type > p{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); color:#fff; transition: all .3s; font-size:var(--font-size-normal); line-height: 0;}
.delete-button-type > img{position:absolute; right:50%; top:50%; transform: translate(50%,-50%); transition: all .3s; opacity:0;}
.delete-button-type:hover p{left:20px; transform: translate(0%,-50%);}
.delete-button-type:hover > img{right:15px; opacity:1; transform: translate(0%,-50%);}

@media only screen and (max-width:450px){
	.list-button-type{width:80px; height: 40px;}
	.write-button-type{width:80px; height: 40px;}
	.cancle-button-type{width:80px; height: 40px;}
	.edit-button-type{width:80px; height: 40px;}
	.delete-button-type{width:80px; height: 40px;}

}


select,h1, h2, h3, h4, h5, h6, blockquote p, .thb-portfolio-filter .filters, .thb-portfolio .type-portfolio.hover-style5 .thb-categories {
    font-family: 'SUIT Variable', 'Roboto','Noto Sans KR', 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:#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;}




/* 기본 스타일 초기화 */
.text-animation span {
  display: inline-block;
  will-change: transform, opacity;
}

.text-animation {
  display: inline-block;
  position: relative;
  perspective: 1000px; /* 3D 효과를 위한 원근감 */
	font-size:40px;
	color:#fff;
}


a[data-cursorOn]{
	cursor:none;
}