/* 헤더 */
#theader { z-index: 9999; position: fixed; top: 0; left: 0; width: 100%; height: 135px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); background-color: transparent; }
#theader .swrap { height: 100%; transition: all 0.4s; }
#theader .logo { display: block; float: left; height: 100%; writing-mode: vertical-lr; text-align: center; }
#theader .logo img { width: 153px; }
#theader #tnav { float: right; height: 100%; }
#theader #tnav .menu1 { display: flex; flex-wrap: nowrap; width: 650px; height: 100%; }
#theader #tnav .menu1 > li { position: relative; width: 100%; height: 100%; }
#theader #tnav .menu1 > li > a { position: relative; display: block; width: 100%; height: 100%; }
#theader #tnav .menu1 > li > a > span { position: relative; top: 50%; transform: translateY(-50%); display: block; text-align: center; font-weight: 600; font-size: 22px; color: #fff; }

#theader #tnav .menu1 > li .menu2 { display: none; position: absolute; left: 0; width: 100%; }
#theader #tnav .menu1 > li .menu2 a { display: block; padding: 15px 5px; text-align: center; font-weight: 500; font-size: 18px; color: #000; line-height: 1.3; letter-spacing: -0.04em; }

#theader .over_bg { display: none; z-index: -1; position: absolute; top: 135px; left: 0; width: 100%; height: 183.56px; background-color: rgba(253, 242, 224, 0.9); }


#theader .ham_btn { display: none; position: absolute; top: 55%; transform: translateY(-50%); right: 18px; width: 27px; height: 20px; cursor: pointer; }
#theader .ham_btn div { position: absolute; width: 100%; height: 3px; background-color: #fff; transform-origin: center; }

#theader .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: mo_bar1 forwards linear 0.4s; }
#theader .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: mo_bar2 forwards linear 0.4s; }
#theader .ham_btn div:last-child { top: 80%; transform: translateY(-50%); animation: mo_bar3 forwards linear 0.4s; }
@keyframes mo_bar1 {
    0% { top: 50%; transform: translateY(-50%) rotateZ(45deg); }
    50% { top: 50%; transform: translateY(-50%) rotateZ(0deg); }
    100% { top: 0%; transform: translateY(-50%); }
}
@keyframes mo_bar2 {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes mo_bar3 {
    0% { top: 50%; transform: translateY(-50%) rotateZ(-45deg); }
    50% { top: 50%; transform: translateY(-50%) rotateZ(0deg); }
    100% { top: 80%; transform: translateY(-50%); }
}

#theader.active .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: mo_bar1_on forwards linear 0.4s; }
#theader.active .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: mo_bar2_on forwards linear 0.4s; }
#theader.active .ham_btn div:last-child { top: 80%; transform: translateY(-50%); animation: mo_bar3_on forwards linear 0.4s; }
@keyframes mo_bar1_on {
    0% { top: 0%; transform: translateY(-50%); }
    50% { top: 50%; transform: translateY(-50%); }
    100% { top: 50%; transform: translateY(-50%) rotateZ(45deg); }
}
@keyframes mo_bar2_on {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes mo_bar3_on {
    0% { top: 80%; transform: translateY(-50%); }
    50% { top: 50%; transform: translateY(-50%); }
    100% { top: 50%; transform: translateY(-50%) rotateZ(-45deg); }
}

#theader.scrollh { background-color: #303030; }
#theader.scrollh3 .swrap { max-width: 1430px; }

@media (max-width: 1230px) {
    #theader { height: 120px; }
    #theader .logo img { width: 120px; }

/*     #theader #tnav .menu1 { width: 600px; }
    #theader #tnav .menu1 > li > a > span { font-size: 22px; }
    #theader #tnav .menu1 > li .menu2 a { font-size: 16px; } */
    #theader .over_bg { top: 120px; /* height: 203.2px; */ }
}
@media (max-width: 1024px) {
    #theader { position: fixed; height: 80px; }
    #theader .swrap { width: 100%; }
    #theader .logo { margin-left: 18px; }
    #theader .logo img { width: 90px; }

    #theader #tnav { display: none; }
    #theader.active #tnav { display: block; }
    #theader #tnav { position: absolute; top: 79px; left: 0; width: 100%; float: none; height: initial; }
    #theader #tnav .menu1 { display: block; width: 100%; height: initial; }
    #theader #tnav .menu1 > li { width: 100%; height: initial; }
    #theader #tnav .menu1 > li > a { padding: 15px 10px; width: 100%; height: initial; pointer-events: none; background-color: #896c4a; }
    #theader #tnav .menu1 > li > a > span { top: 0; transform: translateY(0); text-align: center; font-weight: 500; font-size: 18px; }

    #theader #tnav .menu1 > li .menu2 { display: none; position: relative; background-color: rgba(135, 110, 76, 0.9); }
    #theader #tnav .menu1 > li .menu2 a { padding: 12px 5px; font-size: 15px; color: #fff; }
    #theader #tnav .menu1 > li .menu2 a br { display: none; }
    
    #theader .over_bg { opacity: 0; display: none; }

    #theader.scrollh3 .swrap { max-width: 100%; }
    #theader .ham_btn { display: block; }
}

/* 푸터 */
#tfooter { background-color: #896c4a; }
#tfooter .top { padding: 45px 0; text-align: center; }
#tfooter .top span { margin: 5px 0; display: inline-block; font-weight: 700; font-size: 16px; color: #fff; line-height: 1.2; }
#tfooter .top i { margin: 0 5px; display: inline-block; font-style: normal; font-size: 16px; color: #fff; line-height: 1.2; }
#tfooter .bottom { padding: 20px 0; border-top: 1px solid #957b5c; }
#tfooter .bottom p { text-align: center; font-size: 16px; color: #fff; line-height: 1.2; }
@media (max-width: 1230px) {
    #tfooter .top span { font-size: 14px; }
    #tfooter .top i { font-size: 14px; }
    #tfooter .bottom p { font-size: 14px; }
}
@media (max-width: 1024px) {
    #tfooter .top span { display: block; }
    #tfooter .top i { display: none; }
    #tfooter .top br { display: none; }
}
/* 메인비주얼 */
#main_visual { height: 100vh; }
#main_visual .mv_wrap, #main_visual .mv_slick, #main_visual .slick-list, #main_visual .slick-track, #main_visual .mv_slick .con { height: 100%; }
#main_visual .mv_slick .con { position: relative; overflow: hidden; }
#main_visual .mv_slick .con .frame { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center/cover; }
#main_visual .mv_slick .con1 .frame { background-image: url(/image/mv_slide1.jpg); }
#main_visual .mv_slick .con2 .frame { background-image: url(/image/mv_slide1.jpg); }

#main_visual .mv_slick .con .txt { opacity: 0; position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 1170px; animation: mv_txt forwards linear 1s; }
@keyframes mv_txt{
    0% { top: 60%; opacity: 0; }
    100% { top: 55%; opacity: 1; }
}
#main_visual .mv_slick .con .txt .txt1 { text-align: left; font-family: 'JSArirang-Regular'; font-size: 70px; color: #fff; line-height: 1.3; }
#main_visual .mv_slick .con .txt .txt1 span { color: #d09c56; }
#main_visual .mv_slick .con .txt .txt1 .mo_1 { display: none; }
#main_visual .mv_slick .con .txt .txt2 {text-align: right; margin-top: 10px; font-family: 'JSArirang-Regular'; font-size: 70px; color: #fff; }
#main_visual .mv_slick .con .txt .txt2 span { color: #d09c56; }
#main_visual .mv_slick .slick-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; }
#main_visual .mv_slick .slick-dots > li { margin: 0 6px; width: 12px; height: 12px; background-color: #fff; border-radius: 50%; cursor: pointer; }
#main_visual .mv_slick .slick-dots > li button { display: none; }
#main_visual .mv_slick .slick-dots .slick-active { background-color: #876e4c; }
/* #main_visual .mouse {text-align: center;position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px;animation: motion 0.7s linear 0s infinite alternate; cursor: pointer;} */
/* @keyframes motion {
	0% {bottom: 50px;}
	100% {bottom: 70px;}
} */


#main_visual .arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 30px;
}

#main_visual .arrows path {
	stroke: #fff;
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

#main_visual .arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

#main_visual .arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

#main_visual .arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}


@media (max-width: 1230px) {
    #main_visual .mv_slick .con .txt { max-width: calc(100% - 40px); }
    #main_visual .mv_slick .con .txt .txt1 { padding-left: 10%; font-size: 50px; }
    #main_visual .mv_slick .con .txt .txt2 { padding-right: 10%; font-size: 50px; }
}
@media (max-width: 1024px) {
    #main_visual { height: 500px; }
    #main_visual .mv_slick .con .txt .txt1 { padding-left: 10%; font-size: 40px; }
    #main_visual .mv_slick .con .txt .txt2 { text-align: left; padding-right: 0; padding-left: 48%; font-size: 40px; }
    /* #main_visual .mouse { display: none; } */
    #main_visual .arrows { display: none; }
}
@media (max-width: 767px) {
    #main_visual .mv_slick .con .txt { max-width: calc(100% - 36px); }
    #main_visual .mv_slick .con .txt .txt1 { padding-left: 0; text-align: center; font-size: 34px; }
    #main_visual .mv_slick .con .txt .txt1 .mo_1 { display: inline-block; }
    #main_visual .mv_slick .con .txt .txt2 { padding-left: 0; padding-right: 0; margin: 5px; text-align: center; font-size: 34px; }
}

/* 메인 포트폴리오 */
#main_portfolio { padding: 85px 0; background-color: #fdf2e0; }
#main_portfolio .tit { text-align: center; font-weight: 700; font-size: 38px; color: #4b4b4b; }
#main_portfolio .tit span { color: #8a6c48; }
#main_portfolio .more { position: relative; left: 50%; transform: translateX(-50%); display: inline-block; width: 140px; height: 50px; background-color: transparent; border: 1px solid #aaa; border-radius: 26px; }
#main_portfolio .more span { display: block; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; font-weight: 600; font-size: 18px; color: #686868; }
#main_portfolio .more:hover { background-color: #896c4a; }
#main_portfolio .more:hover span { color: #fff; }
@media (max-width: 1230px) {
    #main_portfolio .more { width: 130px; height: 45px; }
    #main_portfolio .more span { font-size: 16px; }
}
@media (max-width: 1024px) {
    #main_portfolio .more { width: 110px; height: 40px; }
    #main_portfolio .more span { font-size: 14px; }
}