@import url('https://fonts.googleapis.com/css2?family=Marcellus:wght@300;400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

@font-face {
  font-family: 'Aida';
  src: url('../font/Aida-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aida';
  src: url('../font/Aida-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aida Italic';
  src: url('../font/Aida-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Han Serif KR';
  src: url('../font/SourceHanSerifKR-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Source Han Serif KR';
  src: url('../font/SourceHanSerifKR-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Source Han Serif KR';
  src: url('../font/SourceHanSerifKR-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Source Han Serif KR';
  src: url('../font/SourceHanSerifKR-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Source Han Serif KR';
  src: url('../font/SourceHanSerifKR-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Source Han Serif KR';
  src: url('../font/SourceHanSerifKR-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Source Han Serif KR';
  src: url('../font/SourceHanSerifKR-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

/********************************************************** 
* Fonts
***********************************************************/ 
.marcellus *, .marcellus {
    font-family: 'Marcellus', 'Source Han Serif KR', serif;
}

.aida *, .aida {
    font-family: 'Aida', 'Marcellus', serif;
    font-weight: 300;
}

.optima *,.optima {
    font-family: "OptimaLTStd";
}
.nanummyeongjo *,.nanummyeongjo {
    font-family: 'Nanum Myeongjo', serif;
}
.sortsmillgoudy *,.sortsmillgoudy {
    font-family: 'Sorts Mill Goudy', serif;
}


/********************************************************** 
* Common
***********************************************************/ 
:root { 
    color-scheme: light only !important;
    --color-primary: #D05326;
}
@media (prefers-color-scheme: dark) { /* 다크모드 막기 */
    html,
    body {
        background: #fff !important;
        background-color: #fff !important;
    }
    :root { /* 다크모드 막기 */
        color-scheme: light only !important;
    }
}

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, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}
html, body{
	font: 400 16px/1.3 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	color: #000;
}
html.open{overflow-y:hidden !important;}
body.open{width:100%; height:100%; overflow-y:hidden !important;}
body *{box-sizing: border-box; word-break: keep-all;}
a:hover, a:link, a:visited, a:active {text-decoration: none; color: inherit;}
hr{border:0; margin:0; width:100%; height:1px; background: #fff;}
button{font-family: inherit;}
address {font-style: normal;}

*/
select{
  /*ios대응*/
  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;

  /*화살표 배경 넣기*/
/*  background: url('../img/select-down-arrow.svg') no-repeat 93% 50% rgba(255, 255, 255, 0); background-size:12px;화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
select::-ms-expand{ 
  display:none; /* 화살표 없애기 for IE10, 11*/
}
a { -webkit-tap-highlight-color:transparent;}
* {-webkit-tap-highlight-color:transparent;}
img {max-width: 100%; vertical-align: top;}

/********************************************************** 
* scrollbar - 스크롤 바
***********************************************************/
/* width */
::-webkit-scrollbar {
	width:8px; height:100vh; background:transparent;
}

/* Track */
::-webkit-scrollbar-track {
    display:none;
    background-color:transparent;
    border-radius:2rem;
    box-shadow:inset 0px 0px 5px transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
	width:8px; background-color:rgba(0, 0, 0, 0.7);
	border-radius: 2rem;
	-webkit-border-radius: 2rem;
	-moz-border-radius: 2rem;
	-ms-border-radius: 2rem;
	-o-border-radius: 2rem;
    background-clip:padding-box;
    border:0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color:rgba(0, 0, 0, 0.7);
}


.dp_ib {display: inline-block;}

/********************************************************** 
* font style
***********************************************************/
.ta_c{text-align: center;}

.normal{font-weight: 400;}
.medium{font-weight: 500;}
.semibold{font-weight: 600;}

.italic{font-style:italic;}

/********************************************************** 
* color
***********************************************************/
.c-w{color:#fff;}

/********************************************************** 
* icon
***********************************************************/
.blog_icon { display:inline-block; position:relative; width:1.5rem; height:1.25rem; margin-right:0.5rem; background:url("../img/blog_icon.png") 50% 50%/100% no-repeat; }



.pc_cont_1024{display:block; opacity:1; visibility:visible;}
.m_cont_1024{display:none; opacity:0; visibility:hidden;}
.pc_cont_1024_in{display:inline-block; opacity:1; visibility:visible;}
.m_cont_1024_in{display:none; opacity:0; visibility:hidden;}

.pc_cont_480{display:block; opacity:1; visibility:visible;}
.m_cont_480{display:none; opacity:0; visibility:hidden;}
.pc_cont_480_in{display:inline-block; opacity:1; visibility:visible;}
.m_cont_480_in{display:none; opacity:0; visibility:hidden;}

.m_cont_434{display:none; opacity:0; visibility:hidden;}

/********************************************************** 
* reveal - 텍스트 효과
***********************************************************/
.reveal { transition:transform 0.8s ease-out, opacity 0.8s ease-out; will-change:transform, opacity; transition-delay: .1s;}
.fade-in { opacity:0; }
.fade-up { transform:translateY(50px); opacity:0; }
.fade-down { transform:translateY(-50px); opacity:0; }
.fade-left { transform:translateX(-100px); opacity:0; }
.fade-right { transform:translate(50%,-0%); opacity:0; }
.active.fade-in { opacity:1; }
.active.fade-up { transform:translateY(0); opacity:1; }
.active.fade-down { transform:translateY(0); opacity:1; }
.active.fade-left { transform:translateX(0); opacity:1; }
.active.fade-right { transform:translate(0,-0%); opacity:1; }
.reveal.highlight:before { width:0%; transition:width 0.8s ease-in-out; }
.reveal.highlight.active:before { width:100%; }

.active.delay_100{transition-delay: .1s}
.active.delay_200{transition-delay: .2s}
.active.delay_300{transition-delay: .3s}
.active.delay_400{transition-delay: .4s}
.active.delay_500{transition-delay: .5s}
.active.delay_600{transition-delay: .6s}
.active.delay_700{transition-delay: .7s}
.active.delay_800{transition-delay: .8s}
.active.delay_900{transition-delay: .9s}
.active.delay_1000{transition-delay: 1.0s}
.active.delay_1100{transition-delay: 1.1s}
.active.delay_1200{transition-delay: 1.2s}
.active.delay_1400{transition-delay: 1.4s}
.active.delay_1600{transition-delay: 1.6s}
.active.delay_1800{transition-delay: 1.8s}
.active.delay_2000{transition-delay: 2.0s}
.active.delay_2100{transition-delay: 2.1s}
.active.delay_2200{transition-delay: 2.2s}
.active.delay_2300{transition-delay: 2.3s}
.active.delay_2400{transition-delay: 2.4s}
.active.delay_2500{transition-delay: 2.5s}
.active.delay_2600{transition-delay: 2.6s}
.active.delay_2700{transition-delay: 2.7s}
.active.delay_2800{transition-delay: 2.8s}
.active.delay_2900{transition-delay: 2.9s}
.active.delay_3000{transition-delay: 3.0s}
.active.delay_3500{transition-delay: 3.5s}
.active.delay_4000{transition-delay: 4.0s}


/********************************************************** 
* more_btn
***********************************************************/
.main_more_btn{position:relative; width:auto; margin:2.5rem 0 0;}
.main_more_btn > a{position:relative; width:160px; padding:1rem 1.5rem; color:#fff; background:#4D403A; display:inline-block; overflow:hidden; border-radius:50px;}
.main_more_btn > a:hover{
    color:#000;
    background-color:transparent;
    transition: background 0.1s 0.1s ease;
    -webkit-transition: background 0.1s 0.1s ease;
    -moz-transition: background 0.1s 0.1s ease;
    -ms-transition: background 0.1s 0.1s ease;
    -o-transition: background 0.1s 0.1s ease;
}
.main_more_btn > a > p{position:relative; width:100%; display:flex; justify-content:center; align-items:center;}
.main_more_btn > a > p > span{position:relative; display:inline-block; z-index:2;}
.main_more_btn > a > p > span + span{margin-left:0.8rem;}
.main_more_btn > a::after{
    content:''; position:absolute; top:-1rem; left:-1rem; width:calc(100% + 2rem); height:calc(100% + 2rem); background-color:#fff; z-index:1;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: transform 0.8s cubic-bezier(0.19,1,0.22,1);
    transition: transform 0.8s cubic-bezier(0.19,1,0.22,1);
}
.main_more_btn > a:hover::after{
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1)
}