@charset "utf-8";

/*main start*/

#main { position: relative; overflow: hidden; width:100%; height:50vh; padding: 2.36%; background:url(../img/main/image2.jpg) 50% no-repeat; background-size: cover;}

#main > .txt { position: absolute; bottom: 0px; left:50%; transform: translateX(-50%); right: auto; z-index: 101; color: #FFF; text-align: center;  transition: .4s; }
#main > .txt > .txt-in { display: inline-block; margin: 0px auto; padding-bottom: 0px; }
#main > .txt > .txt-in > h3 { font-size: 22px; font-family: 'EB Garamond'; font-weight: 400; font-style: italic; letter-spacing: 1; }
#main > .txt > .txt-in > h1 { display: inline-block; margin-top: 15px; z-index: 1; position: relative; font-family: 'EB Garamond'; font-size: 62px; font-weight: normal; line-height: 72px; letter-spacing: 4; }
#main > .txt > .txt-in > h1 > span{ position: absolute; bottom:-15px; }
#main > .txt > .txt-in > p { display: block; margin: 30px auto 60px; font-size: 14px; line-height: 24px;  }


/*main end*/  

section .defalt-w { margin: 0px auto; width: 1200px; }
.title { text-align: center; }
.title h3 { font-family: 'EB Garamond'; font-size: 22px; font-weight: 400; letter-spacing: 1; color: #c9ab90; }
.title h2 { position: relative; margin: 5px auto 0px; width: 58%; font-family: 'EB Garamond'; font-size: 51px; font-weight: 400; letter-spacing: 1; }
.title h2::before { content: ''; position: absolute; left: 0px; top: 35px; width: 20%; height: 1px; background: #c4c4c4; }
.title h2::after { content: ''; position: absolute; right: 0px; top: 35px; width: 20%; height: 1px; background: #c4c4c4; }
.title p { margin-top: 15px; font-size: 13px; line-height: 22px; }

/*service start*/

#service { padding-top: 140px; }

#service .service-in .service-wrap { margin-top: 60px; display: flex; justify-content: space-between; }
#service .service-in .service-wrap a { display: block;  width: 31%; cursor:default;}
#service .service-in .service-wrap a .pic img { width: 100%; transition: all .3s ease-in-out;}
#service .service-in .service-wrap a .pic { position: relative; }
#service .service-in .service-wrap a .pic .plus { position: absolute; padding: 0px 11px; width: 37px; height: 37px; bottom: 0px; background: #fff; transition: .4s; overflow: hidden; }
#service .service-in .service-wrap a:hover .pic img { transform:scale(1.025); }
#service .service-in .service-wrap a .pic .plus h3 {  display: inline-block; line-height: 37px; }
#service .service-in .service-wrap a .pic .plus p { margin-left: 12.5px; display: inline-block; font-size: 13px; position: relative; top: -2px; }
#service .service-in .service-wrap a .txt { margin-top: 24px; text-align: center; }
#service .service-in .service-wrap a .txt h3 {font-family: 'Arita-buri-SemiBold'; font-size: 24px; font-weight: 400; letter-spacing: 1; }
#service .service-in .service-wrap a .txt p { margin-top: 5px; font-size: 13px; line-height: 1.5em; }

/*service end*/

/*banner2 start*/

#banner2 { padding-top: 90px; }
#banner2 .banner2-in .title2 { display: flex; text-align: left; }
#banner2 .banner2-in .title2 div:nth-of-type(2) { padding-top: 35px; padding-left: 150px; }
#banner2 .banner2-in .title2 div h3 { font-family: 'EB Garamond'; font-size: 22px; font-weight: 400; letter-spacing: 1; color: #c9ab90; }
#banner2 .banner2-in .title2 div h2 { position: relative; margin: 5px auto 0px; font-family: 'EB Garamond'; font-size: 40px; font-weight: 400; letter-spacing: 5px; color: #666; }
#banner2 .banner2-in .title2 div p { margin-top: 15px; margin-bottom: 30px; font-size: 13px; line-height: 34px; }
#banner2 .banner2-in .title2 div a { position: relative; text-align: center; }
#banner2 .banner2-in .title2 div a svg { position: absolute; top: 0; left: 0; }
#banner2 .banner2-in .title2 div a svg rect {fill: transparent; stroke: #c9ab81; transition: 2s; stroke-width: 2px; stroke-dashoffset: 240%; stroke-dasharray: 330% 25; }
#banner2 .banner2-in .title2 div a:hover svg rect { stroke-dashoffset: -113% !important; }
#banner2 .banner2-in .title2 div a span { position: absolute; display: block; height: 50px; width: 163px; font-family: 'Open Sans'; font-size: 13px; line-height: 50px; font-weight: 600; }


/* 반응형 시작 */

@media (max-width: 1300px) {
    
    #main > .txt { right: 70px; }
    .sec1-prev { top: 55%;  }
    .sec1-next { top: 55%;  }
    
    
    .title h2 { width: 80%; }
    .title h2::before { width: 12.5%; }
    .title h2::after { width: 12.5%; }
    
    
    #service { padding: 140px 2.36% 0px; }
    
}

@media (max-width: 1200px) {
    section .defalt-w { width: 100%; }
}
@media (max-width: 768px) {
    #main > .txt { right: 70px; }
    #main > .txt > .txt-in {  padding-bottom: 60px; }
    #main > .txt > .txt-in > h3 { font-size: 18px; }
    #main > .txt > .txt-in > h1 { margin-top: 10px; font-size: 48px; line-height: 40px; }
    #main > .txt > .txt-in > h1 > span { bottom: -12px; }
    #main > .txt > .txt-in > p { margin-top: 30px; }
    #main > .txt { top: 75%; left: 50%; right: auto; bottom: auto; transform: translate(-50%,-50%); width: 80%; text-align: center; }
    .sec1-prev { top: 57.5%; left: 20px; }
    .sec1-next { top: 57.5%; right: 20px; }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0px 10px; }
    
    
    .title h3 { font-size: 18px; }
    .title h2 { font-size: 34px; width: 90%; }
    .title h2::before { top: 25px; }
    .title h2::after { top: 25px; }
    
    
    #service { padding-top: 100px; }
    #service .service-in .service-wrap a .txt h3 { font-size: 18px; }
    #service .service-in .service-wrap a .pic .plus { display: none; }
    
}



@media (max-width: 500px) {
    
    #main { height:40vh; }
    #main > .txt { top: 80%; left: 50%; }
    #main > .txt > .txt-in > h3 { font-size: 14px; }
    #main > .txt > .txt-in > h1 { font-size: 40px; margin-left:0px;}
    #main > .txt > .txt-in > h1 > span{ bottom: -10px; }
    #main > .txt > .txt-in > p { margin-top: 26px; font-size: 12px; line-height: 20px; }
    #main > .txt > .txt-in > p > br { display: none; }
    .sec1-prev { left: 12.5px; transform: scale(0.7); }
    .sec1-next { right: 12.5px; transform: scale(0.7); }
    
    .title h3 { font-size: 14px; }
    .title h2 { font-size: 28px; }
    .title h2::before { top: 18px; width: 10% }
    .title h2::after { top: 18px; width: 10%  }
    .title p { font-size: 12px; line-height: 20px; }
    
    #service { padding-top: 60px; }
    #service .service-in { padding: 0px 2.36%; }
    #service .service-in .service-wrap { display: block; margin-top: 36px; }
    #service .service-in .service-wrap a { display: flex; margin-top: 36px; width: 100%; }
    #service .service-in .service-wrap a:nth-of-type(1) { margin-top: 0px; }
    #service .service-in .service-wrap a .pic { width: 35%; }
    #service .service-in .service-wrap a .txt { margin-top: 2px; padding-left: 10px; width:65%; text-align: left; }
    #service .service-in .service-wrap a .txt p { font-size: 12px; line-height: 1.75em;}
}