@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
.wrap {min-width:1900px;}

@media screen and (max-width:768px) {
    .wrap {min-width:auto;}
}



                       /*z-idex - 900번대*/
.header {display:flex; justify-content:space-between; position:fixed; top:0; left:0; padding:0 2rem; line-height:7rem; color:#f2f2f2; width:100%; min-width:1900px; transition:0.5s; z-index:999;}
.header.on {background:rgba(0,0,0,0.6);}
.header h1 {width:11.5rem;}
.header nav>ul {display:flex; font-size:1rem; font-weight:500;}
.header nav>ul>li> a {display:block; padding:0 0.75rem;}
.header .right a {font-size:1.4rem; font-weight:700;}
.header .right i {padding:0.3rem; border:2px solid#fff; border-radius:50%; margin-right:1rem;}


@media screen and (max-width:768px) {
                           /*z-idex - 1000번대*/
.header {display:flex; justify-content:space-between; position:fixed; top:0; left:0; padding:0 2rem; line-height:7rem; color:#f2f2f2; width:100%; min-width:1900px; transition:0.5s; z-index:1000;}
.header.on {background:transparent;}

.header h1 {width:11.5rem; z-index:1200;}
.header nav {position:fixed; top:0; left:-100%; width:calc(100% - 4.5rem); height:100vh; background:#d88e04; padding:7rem 1rem 0 1rem; transition:0.5s;} /*<-반응형땜에 새로만든거*/
.header nav.on {left:0;} /*<-반응형땜에 새로만든거*/
.header nav>ul {display:flex; flex-flow:column wrap;/*<-반응형땜에 새로만든거*/ font-size:0.8rem; font-weight:400; line-height:2rem;/*<-반응형땜에 새로만든거*/ } 
.header nav>ul>li~li {border-top:1px solid#ddd;}/*<-반응형땜에 새로만든거*/
.header nav>ul>li>a {display:block; padding:0 0.75rem;}
.header .right {opacity:0; position:fixed; bottom:5rem; left:1.5rem; z-index:1300;}
.header .right.on {opacity:1; transition:0.5s 0.3s;}/*<-반응형땜에 새로만든거*/
.header .right a {font-size:1.5rem; font-weight:700;}
.header .right i {padding:0.5rem; border:2px solid#fff; border-radius:50%; margin-right:1rem; }
}





.visual{position:relative;}
.visual:after {content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0;}
.visual .main_slider {}
.visual .main_slider figure {height:100vh;}
.visual .itm01 {background:url(./img/bg_intro01.jpg) no-repeat center center/cover;}
.visual .itm02 {background:url(./img/bg_intro02.jpg) no-repeat center center/cover;}
.visual .itm03 {background:url(./img/bg_intro03.jpg) no-repeat center center/cover;}



.visual .slogan {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align:center; width:60rem; z-index:999;}
.visual .slogan strong {display:block; font-size:1.3rem; margin-bottom:1rem;}
.visual .slogan h2 {font-size:3.5rem; margin-bottom:1rem; font-family: 'DM Serif Display', serif;}
.visual .slogan p {font-weight:300; line-height:1.4;}

.visual .slick-dots {position:absolute; bottom:3rem; left:0; width:100%; text-align:center; z-index:999;}
.visual .slick-dots li {display:inline-block; width:5rem; height:0.2rem; background:#fff; border-radius:0.1rem; margin:0 0.25rem; overflow:hidden;}
.visual .slick-dots li button {display:none;}

.visual .slick-dots li.slick-active {}

.visual .slick-dots li:after {content:""; display:block; width:0%; height:100%; background:#f4a40f;}
.visual .slick-dots li.slick-active:after {width:100%; transition:3s;}



@media screen and (max-width:768px) {
    .visual .slogan {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align:center; width:100%; padding:0 0.75rem;/*<-반응형땜에 새로만든거*/ z-index:999;}
    .visual .slogan strong {display:block; font-size:5vw; margin-bottom:1rem;}
    .visual .slogan h2 {font-size:10vw; margin-bottom:1rem; font-family: 'DM Serif Display', serif;}
    .visual .slogan p {font-size:3vw; font-weight:300; line-height:1.4;}
}








                       /*z-idex - 10번대*/
.content {padding:5rem 0; text-align:center; }
.content h2 {font-size:0.7rem; margin-bottom:0.25rem;}
.content p {font-size:2.4rem; font-family: 'DM Serif Display', serif; color:#d88e04; margin-bottom:1.5rem;}

.content .container {display:flex; flex-flow:row wrap; width:60rem; margin:0 auto;}
.content figure {width:50%; padding:0 0.75rem; position:relative;}
.content figure img {max-width:100%; transition:0.5s;}
.content figure .case {display:block; margin-bottom:1rem; overflow:hidden;}
.content figure h3 {font-size:0.7rem; margin-bottom:0.5rem;}
.content figure strong {display:block; font-size:1rem; font-weight:500; margin-bottom:1.5rem;}
.content figure .case::before {content:attr(data-prnum); display:block; width:9rem; background:#f5b031; color:#fff; padding:0.5rem 1rem; position:absolute; top:0.75rem; left:0; transition:0.5s 0.2s; z-index:10;}           /*before,after쓸때 html의 data복사해서 ""없애고 넣기*/

.content figure .case:hover img {transform:scale(1.2);}
.content figure .case:hover:before {width:13rem; background:#f0b54898;}



@media screen and (max-width:768px) {
                            /*z-idex - 10번대*/
    .content {padding:5rem 0; text-align:center; }
    .content h2 {font-size:0.7rem; margin-bottom:0.25rem;}
    .content p {font-size:2.4rem; font-family: 'DM Serif Display', serif; color:#d88e04; margin-bottom:1.5rem;}

    .content .container {display:flex; flex-flow:column wrap; width:auto; margin:0 auto;}
    .content figure {width:100%; padding:0 0.75rem; position:relative;}
    .content figure img {max-width:100%; transition:0.5s;}
    .content figure .case {display:block; margin-bottom:1rem; overflow:hidden;}
    .content figure h3 {font-size:0.7rem; margin-bottom:0.5rem;}
    .content figure strong {display:block; font-size:4.5vw; font-weight:500; margin-bottom:2rem;}
    .content figure .case::before {content:attr(data-prnum); display:block; width:9rem; background:#f5b031; color:#fff; padding:0.5rem 1rem; position:absolute; top:0.75rem; left:0; transition:0.5s 0.2s; z-index:10;}           /*before,after쓸때 html의 data복사해서 ""없애고 넣기*/

    .content figure .case:hover img {transform:scale(1.2);}
    .content figure .case:hover:before {width:13rem; background:#f0b54898;}
}









.costomer {padding:5rem 0 30rem 0; background:url(./img/bg_main2.jpg) no-repeat center bottom/cover; text-align:center; color:#f2f2f2;}
.costomer h2 {font-size:1.4rem; font-weight:500; margin-bottom:3rem; line-height:1.5rem;}

.costomer .container {display:flex; width:60rem; margin:0 auto;}
.costomer .container li {flex:1; padding:0 0.75rem;}
.costomer .container li a {display:block; background:rgba(0,0,0,0.4); padding:4rem 1.7rem; border-radius:1rem;}
.costomer h3 {font-size:1.3rem; font-weight:500; margin-bottom:1rem; line-height:1.4rem;}
.costomer p {font-size:0.7rem; font-weight:300; line-height:1rem;}


@media screen and (max-width:768px) {
    .costomer {padding:5rem 0 5rem 0; background:url(./img/bg_main2.jpg) no-repeat center bottom/cover; text-align:center; color:#f2f2f2;}
    .costomer h2 {font-size:5vw; font-weight:500; margin-bottom:3rem; line-height:1.5rem;}

    .costomer .container {display:flex; flex-flow:column wrap; width:auto; margin:0 auto;}
    .costomer .container li {flex:1; padding:0 0.75rem; margin-bottom:2rem;}
    .costomer .container li a {display:block; background:rgba(0,0,0,0.4); padding:4rem 1.7rem; border-radius:1rem;}
    .costomer h3 {font-size:1.2rem; font-weight:500; margin-bottom:1rem; line-height:1.4rem;}
    .costomer p {font-size:0.7.5rem; font-weight:300; line-height:1rem;}

}







.footer {padding:4rem 0; text-align:center; font-size:0.65rem; font-weight:300; color:#444;}
.footer ul {display:flex; justify-content:center; margin-bottom:0.3rem;}
.footer ul li~li:before {content:""; display:inline-block; width:1px; height:0.5rem; background:#ddd; margin:0 0.75rem;}


@media screen and (max-width:768px) {
    .footer {padding:3rem 0.5rem; text-align:center; font-size:0.6rem; font-weight:300; background:#333; color:#fff; line-height:1.6;}
    .footer ul {display:block; justify-content:center; margin-bottom:0.3rem;}
    .footer ul li {display:inline-block; margin:0 0.2rem}
    .footer ul li~li:before {content:""; display:none; width:1px; height:0.5rem; background:#ddd; margin:0 0.75rem;}


    .mopen {display:block; position:fixed; top:2.3rem; right:1.5rem; color:#fff; font-size:1.5rem; padding:0.25rem; background:rgba(0,0,0,0.3); z-index:1000;}/*<-반응형땜에 새로만든거*/


}



* {outline:1px solid#f00--;}