@charset "utf-8";

*{ margin : 0; padding : 0; box-sizing: border-box; }
li{list-style : none;}
a{ text-decoration : none; } 
img {
	border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
body {
  overflow-x: hidden;
}
.wrapper{width:1100px; margin:0 auto; max-width: 100%; padding: 0 20px;}
.clearfix::after{content : '';display : block; clear : both;}


header{ text-align:center; z-index:9999; width:150px; height:600px; position:fixed; top:50px; right:20px;}

header .off{margin-bottom:50px; cursor:pointer;}
header .off a{display:block;}
header .on{display:none;}



#main{background-image:url(../images/bg.jpg); height:1000px;}
#main .main_inner1{position:relative; height:400px; overflow:hidden;}
#main .main_inner1 > img{position:absolute; top:-30px; right:100px;}
#main .main_inner2{position:relative; height:500px; text-align:center;}
#main .main_inner1 h1{position:absolute; top:50px; left:50px;}

#main .main_inner2 ul li{width:215px; line-height:107px; background-image:url(../images/menubg.png); position:absolute; text-indent:-9999px; overflow:hidden; z-index:999;}
#main .main_inner2 ul li:nth-child(1){top:-50px; left:100px;}
#main .main_inner2 ul li:nth-child(2){background-position:0 107px; top:200px; left:90px;}
#main .main_inner2 ul li:nth-child(3){background-position:0 214px; top:-80px; right:215px;}
#main .main_inner2 ul li a{display:block;}
#main .main_inner2 > img{margin-left:200px;}

#main .main_inner2 .inner2_txt{width:780px; position:absolute; bottom:0; left:50%; margin-left:-390px; }
#main .main_inner2 .inner2_txt .txt_box{height:125px; background-image:url(../images/english.png);}

#main,
.section1,
.section3 .contact {
  height: auto !important;
}

#box{width:100%; height:300px; background-image:url(../images/bg2.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:cover;}

.section1{background-image:url(../images/bg1.jpg); background-position:center top;height:1000px; }
.section1 .about{background-image:url(../images/about_h.png); background-repeat:no-repeat; background-position:center 70px;
	width:100%; height:1000px; overflow:hidden; position:relative;}
.section1 .about .about_inner{
	background-image:url(../images/about_inner.png); background-repeat:no-repeat; background-size:contain; width:874px; height:1000px;
	position:absolute; top:-1030px; left:50%; margin-left:-437px; padding-top:300px;font-family: 'Pangolin', 맑은고딕;
}
.section1 .about .about_inner .a_inner1{ width:700px; margin:0 auto; height:235px; }
.section1 .about .about_inner .a_inner1 ul li{float:left; width:350px; height:200px;}
.section1 .about .about_inner .a_inner1 ul li:nth-child(1){border-right:dashed 2px black; width:330px;}
.section1 .about .about_inner .a_inner1 ul li h2{text-align:right; margin-top:20px;margin-right:30px; margin-bottom:20px;}
.section1 .about .about_inner .a_inner1 ul li p{text-align:right; margin-right:30px;}
.section1 .about .about_inner .a_inner1 ul li h2.history{text-align:left; margin-left:30px;}
.section1 .about .about_inner .a_inner1 ul li.nanumfont p{font-family: 'NanumSquareRound',sans-serif;}
.section1 .about .about_inner .a_inner1 ul li p.le{text-align:left; margin-left:30px; }
.section1 .about .about_inner .a_inner1 ul li p.le strong{font-family: 'Pangolin', 맑은고딕;}
.section1 .about .about_inner .a_inner1 ul li.nanumfont p.le span{color:#7C7C7C;}

.section1 .about .about_inner .a_inner2{width:600px; margin:0 auto; height:200px;}
.section1 .about .about_inner .a_inner2 h2{float:left; text-align:center; margin-bottom:20px;}
.section1 .about .about_inner .a_inner2 ul{float:right;}
.section1 .about .about_inner .a_inner2 ul li{margin-bottom:15px; text-align:left; color:#7d7d7d;}
.section1 .about .about_inner .a_inner2 ul li p{ display:inline-block; color:#000;}
.section1 .about .about_inner .a_inner2 ul li p span{color:#7c7c7c;}



.section2{background-image:url(../images/bg.jpg);}
.section2 .work{height:3200px; position:relative;}
.section2 .work h2{text-indent:-9999px; background-image:url(../images/work_inner2.png);width:127px; height:346px; position:absolute; top:120px; left:20%; margin-left:-63px;}


.section2 .work .hyundai{z-index:9;width:500px; line-height:378px;background-image:url(../images/work1.png); margin:0 auto; 
	position:absolute; top:200px; left:50%; margin-left:-250px;  cursor:pointer;text-indent:-9999px;}
.section2 .work .hyundai_inner a{width:500px; height:378px; display: block;}


.section2 .work .socar{z-index:8;width:500px; line-height:378px;background-image:url(../images/work2.png); margin:0 auto; text-indent:-9999px;
	position:absolute; top:800px; left:50%; margin-left:-250px;  cursor:pointer;}
.section2 .work .socar_inner a{width:500px; height:378px; display: block;}	

.section2 .work .wedding{z-index:7;width:378px; line-height:500px;background-image:url(../images/work3.png); margin:0 auto; text-indent:-9999px;
	position:absolute; top:1380px; left:30%; margin-left:-180px;  cursor:pointer;}
.section2 .work .wedding_inner a{width:378px; height:500px; display: block;}

.section2 .work .raon{z-index:7;width:500px; line-height:378px;background-image:url(../images/work4.png); margin:0 auto; text-indent:-9999px;
	position:absolute; top:1420px; right:30%; margin-right:-250px;  cursor:pointer;}
.section2 .work .raon_inner a{width:500px; height:378px; display: block;}

.section2 .work .os{z-index:6;width:500px; line-height:378px;background-image:url(../images/work5.png); margin:0 auto; text-indent:-9999px;
	position:absolute; top:2020px; left:50%; margin-left:-250px;  cursor:pointer;}
.section2 .work .os_inner a{width:500px; height:378px; display: block;}

.section2 .work .ev{z-index:6;width:500px; line-height:378px;background-image:url(../images/work6.png); margin:0 auto; text-indent:-9999px;
	position:absolute; top:2500px; left:50%; margin-left:-250px;  cursor:pointer;}
.section2 .work .ev_inner a{width:500px; height:378px; display: block;}


.section2 .work .flower{position:absolute; top:400px; right:30%; margin-right:-250px; z-index:5; }


.section2 .artwork{width:100%; background-image:url(../images/bg.jpg);}
.section2 .artwork .art_inner{position:relative;  height:500px;}
.section2 .artwork .art_inner .inner_m{background-image:url(../images/art.png); background-size:contain; background-repeat:no-repeat; width:1200px; height:252px; position:absolute; bottom:50px; left:50%; margin-left:-600px;}
.section2 .artwork .art_inner > img{position:absolute; bottom:350px; left:200px;}
.section2 .artwork .art_inner .poly{background-image:url(../images/polyart.png); width:515px; height:432px; position:absolute; bottom:145px; left:50%; }
.section2 .artwork .art_inner .plus{width:64px; height:64px; background-image:url(../images/zoom2.png); position:absolute; bottom:200px; left:50%; opacity:0.5; cursor:pointer;}
.section2 .artwork .art_inner .plus:hover{opacity:1;}

.section2 .artwork .art_inner .artplus{display:none;}
.section2 .artwork .art_inner .artplus{width:100%; height:800px; background-color:rgba(0,0,0,0.7); position:absolute; top:-200px; text-align:center; font-family: 'Pangolin', cursive; padding-top:50px; color:#fff;}

@media (max-width: 768px) {

  /* 1️⃣ PC용 캔버스 해제 */
  .section2 .work {
    height: auto;
    padding: 150px 0;
  }

  /* 2️⃣ absolute 레이아웃 해제 */
  .section2 .work .hyundai,
  .section2 .work .socar,
  .section2 .work .wedding,
  .section2 .work .raon,
  .section2 .work .os,
  .section2 .work .ev {
    position: static !important;
    margin: 40px auto;
  }

  /* 3️⃣ 카드 크기 통일 */
  .section2 .work .hyundai,
  .section2 .work .socar,
  .section2 .work .raon,
  .section2 .work .os,
  .section2 .work .ev {
    width: 90%;
    height: auto;
    aspect-ratio: 4 / 3;
    background-size: cover;
  }

  /* wedding (세로형) */
  .section2 .work .wedding {
    width: 80%;
    height: auto;
	background-repeat: no-repeat;
	background-size: cover;aspect-ratio: 3 / 4;
  }

  /* 장식 요소 제거 */
  .section2 .work .flower {
    display: none;
  }

  /* WORK 타이틀 위치 자연스럽게 */
  .section2 .work h2 {
    position: static;
    margin-bottom: 60px;
  }



  .section2 .artwork {
    padding: 100px 0;
  }

  .section2 .artwork .art_inner {
    height: auto;
    padding-bottom: 80px;
  }

  /* 메인 아트 이미지 */
  .section2 .artwork .art_inner > img {
    position: static;
    width: 60%;
    margin: 0 auto 20px;
    display: block;
  }

  /* 중앙 배경 텍스트 */
  .section2 .artwork .art_inner .inner_m {
    position: static;
    width: 90%;
    height: auto;
    aspect-ratio: 16 / 4;
    margin: 20px auto;
  }

  /* polyart 이미지 */
  .section2 .artwork .art_inner .poly {
    position: static;
    width: 80%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 30px auto;
    background-size: contain;background-repeat: no-repeat;
  }

  /* 확대 버튼 */
  .section2 .artwork .art_inner .plus {
    position: static;
    margin: 10px auto;
    display: block;
    opacity: 1;
  }

  /* 확대 레이어 */
  .section2 .artwork .art_inner .artplus {
    padding-top: 80px;
  }

  .section2 .artwork .art_inner .artplus img {
    width: 90%;
    max-width: 500px;
  }


}


.section3{background-image:url(../images/bg.jpg);}
.section3 .contact{padding-top:150px; text-align:center; background-image:url(../images/contact.png); background-size:cover;
	background-repeat:no-repeat; width:100%; height:600px; font-size:20px; font-family: 'Pangolin', cursive;}
.section3 .contact .wrap{}
.section3 .contact .wrap h1{width:250px; line-height:121px; margin:0 auto; background-image:url(../images/contact_l.png); text-indent:-9999px; margin-bottom:50px;}

.section3 .contact .wrap .con_box{ height:300px; margin:0 auto; margin-top:50px;}

.section3 .contact .wrap .con_box > div{float:left; width:33.33%; text-align:center;}
.section3 .contact .wrap .con_box div p{padding-top:30px; opacity:0;}
.section3 .contact .wrap .con_box div:hover p{opacity:1;}