@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

.nanummyeongjo * {
 font-family: 'Nanum Myeongjo', serif;
}

/* 헤더 */
#theader { z-index: 9999; position: absolute; top: 0; width: 100%; height: 150px; background-color: rgba(255, 255, 255, 0.6); }
#theader.url_main { background-color: transparent; }
#theader .swrap { height: 100%; }
#theader .logo { display: block; float: left; height: 100%; writing-mode: vertical-lr; text-align: center; }
#theader .logo img { width: 294px; }
#theader #tnav { float: right; height: 100%; }
#theader #tnav .tmenu1 { height: 100%; display: flex; flex-wrap: nowrap; }
#theader #tnav .tmenu1 > li { height: 100%; }
#theader #tnav .tmenu1 > li > a { position: relative; padding: 0 30px; display: block; height: 100%; }
#theader #tnav .tmenu1 > li > a > span { position: relative; top: 50%; transform: translateY(-50%); display: block; text-align: center; font-weight: 700; font-size: 22px; color: #333; }
#theader #tnav .tmenu1 > li > a span::after { display: block; content: ''; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: rgba(0, 0, 0, 0.7); transition: all 0.3s; }
#theader #tnav .tmenu1 > li > a:hover span::after { width: 100%; }

#theader.url_main #tnav .tmenu1 > li > a::after { display: none; }

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

#theader .swrap .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: mo_bar1 forwards linear 0.4s; }
#theader .swrap .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: mo_bar2 forwards linear 0.4s; }
#theader .swrap .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 { background-color: #f0f0f0; }

#theader.active .swrap .ham_btn div:first-child { top: 0%; transform: translateY(-50%); animation: mo_bar1_on forwards linear 0.4s; }
#theader.active .swrap .ham_btn div:nth-child(2) { top: 40%; transform: translateY(-50%); animation: mo_bar2_on forwards linear 0.4s; }
#theader.active .swrap .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); }
}

@media (max-width: 1230px) {
    #theader { height: 130px; }
    #theader .logo img { width: calc(150px + 10vw); }
    #theader #tnav .tmenu1 > li > a { padding: 0 20px; }
    #theader #tnav .tmenu1 > li > a > span { font-size: 20px; }
}
@media (max-width: 1024px) {
    #theader { height: 120px; }
    #theader .logo img { width: calc(100px + 13vw); }
    #theader #tnav .tmenu1 > li > a { padding: 0 15px; }
    #theader #tnav .tmenu1 > li > a > span { font-size: 18px; }
}
@media (max-width: 767px) {
    #theader { position: fixed; top: 0; height: 90px; }
    #theader.scrollh { background-color: #f0f0f0; }
    #theader .swrap { width: 100%; }
    #theader .logo { margin-left: 17px; }
    #theader .logo img { width: 170px; }
    #theader #tnav { float: none; position: absolute; top: 90px; display: none; width: 100%; height: initial; }
    #theader #tnav .tmenu1 { display: block; height: initial; background-color: #f0f0f0; }
    #theader #tnav .tmenu1 > li { height: initial; }
    #theader #tnav .tmenu1 > li > a { padding: 15px 5px; }
    #theader #tnav .tmenu1 > li > a > span { top: 0; transform: translateY(0); }
    #theader #tnav .tmenu1 > li > a span::after { display: none; }
    #theader #tnav .tmenu1 > li > a:hover { background-color: #999; }

    #theader .swrap .ham_btn { display: block; }
    #theader.active #tnav { display: block; }
}

/* 푸터 */
#tfooter { padding: 60px 0; background-color: #404040; }
#tfooter span { display: inline-block; font-weight: 500; font-size: 18px; color: #fff; margin-right: 20px; line-height: 1.66; }
#tfooter i { display: block; font-style: normal; font-weight: 500; font-size: 18px; color: #838383; margin-right: 20px; line-height: 1.66; }
@media (max-width: 1024px) {
    #tfooter span { font-size: 16px; }
    #tfooter i { font-size: 16px; }
}
@media (max-width: 767px) {
    #tfooter br { display: none; }
    #tfooter span { display: block; font-size: 14px; }
    #tfooter i { font-size: 14px; }
}

/* main_visual */
#main_visual { height: 920px; }
#main_visual .mv_wrap { position: relative; height: 100%; }
.mv_slick, .mv_slick .slick-list, .mv_slick .slick-track { position: relative; height: 100%; }
.mv_slick .con { position: relative; overflow: hidden; }
.mv_slick .con .mv_bg { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/image/main_visual1.jpg) no-repeat center/cover; transform: scale(1.1); transform-origin: center; animation: mv_bg forwards linear 3s; }
@keyframes mv_bg { 
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.mv_slick .con .swrap { height: 100%; }
.mv_slick .con p { position: relative; top: 50%; transform: translateY(-50%); font-weight: 700; font-family: 'nanumy'; text-align: center; font-size: 34px; color: #333; line-height: 1.35; letter-spacing: -0.04em; }
.mv_slick .con p span { font-weight: 800; font-size: 42px; }
/* .mv_slick .slick-current p { animation: mv_p linear forwards 0.3s; }
@keyframes mv_p {
    0% { }
    100% { transform: translateY(-50%); opacity: 1; }
} */
@media (max-width: 1230px) {
    #main_visual { height: calc(500px + 10vw); }
    /* .mv_slick .con { background-position: 100% center; } */
}


/* main_contanct */
#main_contact { padding: 95px 0; background-color: #f5f5f5; }
#main_contact .contents { display: flex; flex-wrap: nowrap; justify-content: space-between; }
#main_contact .contents > li { width: 30.5%; padding: 45px 25px; background-color: #fff; text-align: center; border-radius: 50px; }
#main_contact .contents > li .txt1 { margin-top: 35px; font-weight: 700; font-size: 30px; color: #87583c; }
#main_contact .contents > li .txt2 { margin-top: 10px; font-weight: 500; font-size: 18px; color: #616161; line-height: 1.55; }
#main_contact .contents > li .txt_scr { margin-top: 30px; font-weight: 600; font-size: 16px; color: #616161; line-height: 1.2; }
#main_contact .contents > li .txt_tell { margin-top: 40px; font-weight: 700; font-size: 35px; color: #87583c; line-height: 1; }
#main_contact .contents > li .contact_btn { margin-top: 10px; display: inline-block; padding: 10px 50px; text-align: center; font-weight: 600; font-size: 15px; color: #fff; background-color: #87583c;  border-radius: 100px; }

@media (max-width: 1230px) {
    #main_contact .contents > li img { width: calc(70px + 1vw); }
    #main_contact .contents > li .contact_btn { font-size: 14px; }
}
@media (max-width: 1024px) {
    #main_contact .contents { flex-wrap: wrap; justify-content: initial; }
    #main_contact .contents > li { width: 100%; }
    #main_contact .contents > li:nth-child(n + 2) { margin-top: calc(15px + 1vw); }
    #main_contact .contents > li img { width: calc(35px + 4vw); }
}