@charset "utf-8";
@import url(basic.css);
/* CSS Document */

/* # ff4747 */

* {box-sizing: border-box;}

html {width: 100%; height: 100%; font-size: 72.5%}


body {
	/*font-family: 'Nanum Gothic', dotum, Arial, Helvetica, sans-serif; min-width: 32rem; height: 100%; font-size: 10px;*/
	animation:showhide .7s ease-out none;-webkit-animation:showhide .7s ease-out none;
}

@keyframes showhide {
	from {opacity:0; filter:alpha(opacity=0)}
	to {opacity:1; filter:alpha(opacity=100)}
}
@-webkit-keyframes showhide {
	from {opacity:0; filter:alpha(opacity=0)}
	to {opacity:1; filter:alpha(opacity=100)}
}

/* main */
#wrapper {width: 100%; position:relative; min-width: 32rem; height: 100%;  max-width : 72rem; margin: 0 auto;}

/* footer */
.footer {position: relative; padding: 3rem 0; width: 100%; background: #f8f8f8; display: block; text-align: center;}
.footer p {display: inline-block; text-align: center; height: 57px; margin: 0 auto;}
.footer p a.sns_btn {width: 58px; height: 57px; display: block; margin: 0 1rem; float: left; text-indent: -999px;}
.footer p a.kakao {background:url(../images/kakao_btn.png) no-repeat 0 0;}
.footer p a.k_story {background:url(../images/story_btn.png) no-repeat 0 0;}
.footer p a.facebook {background:url(../images/face_btn.png) no-repeat 0 0;}
.footer p a.band {background:url(../images/band_btn.png) no-repeat 0 0;}


#container {width: 100%; position: relative; height: 100%;}
#container .cont {background: #fff; display: block; text-align: center; }

#container .cont .con_box {display: inline-block; position: relative; width: 100%;}
#container .cont .con_box h2 {font-size: 2rem; text-align: left; display: block; line-height: 100%; font-weight: 600;}
#container .cont .con_box .con_tit {padding: 3rem 1.5rem; display: block;}
#container .cont .con_box .con_tit h2 {font-size: 3rem;}
#container .cont .con_box .con_txt {padding: 3rem 1.5rem; display: block;}
#container .cont .con_box .con_txt p {font-size: 2rem; text-align: left; line-height: 180%; display: inline-block; width: 100%; letter-spacing: -0.05rem;}

/* 기본 메인 부분 */
#container .cont.type01 {padding: 0 3rem; position: relative;}
#container .cont.type01 .con_box .wedding_date {width: 7rem; height: 7rem; position:absolute; right: 0; background: #7d0f0f; padding: 1.4rem; border-radius: 5rem; margin-top: 2rem;}
#container .cont.type01 .con_box .wedding_date:after {content: ""; width: 1px; height: 50%; top: 50%; right: 50%; margin: -24% 0 0 -25%; background: #fff; position:absolute; transform: rotate(45deg)}
#container .cont.type01 .con_box .wedding_date span {font-size: 2rem; color: #fff; display: block;}
#container .cont.type01 .con_box .wedding_date .top_txt {color: #fff; text-align: left;}
#container .cont.type01 .con_box .wedding_date .bom_txt {color: #fff; text-align: right;}
#container .cont.type01 .con_box .wedding_tit {display: block; min-height: 5%; margin-bottom: 3rem; padding-top: 2rem;}
#container .cont.type01 .con_box .wedding_img {position: relative; /*right: -35px;*/ display: block; width: 100%; }
#container .cont.type01 .con_box .wedding_img img {width: 100%; max-width: 100%;}
#container .cont.type01 .con_box .wedding_b_tit {display: block; margin: 3rem 0 2rem; text-align: right;}
#container .cont.type01 .con_box .wedding_b_tit p {font-size: 2rem; display: inline-block; text-align: left; line-height: 180%;}
#container .cont.type01 .con_box h1.name_txt {font-size: 3rem; text-align: left; display: block; line-height: 100%; font-weight: normal;}

/* 초대합니다 부분 */
#container .cont.type04 {background: #f8f8f8; padding: 5rem 3rem;}
#container .cont.type04 .con_box .wedding_name_box {padding: 3rem 1.5rem; display: block;}
#container .cont.type04 .con_box .wedding_name_box .top_txt,
#container .cont.type04 .con_box .wedding_name_box .bom_txt {margin-bottom: 2rem; width: 100%; display: inline-block;}
#container .cont.type04 .con_box .wedding_name_box .parents_tit, 
#container .cont.type04 .con_box .wedding_name_box .wedding_name {float: left; text-align: left; line-height 120%; font-size: 1.8rem;}
#container .cont.type04 .con_box .wedding_name_box .wedding_name {padding-left: 1.5rem; }

/* 신랑 신부에게 전화 버튼 영역 */
#container .btn_box {display: inline-block; background: #e68585; width: 100%;}
#container .btn_box a {width: 49.99%; float: left; padding: 2.5rem 0; text-align: center; font-size: 2.4rem; text-align: center; color: #fff; position: relative;}
#container .btn_box a:first-child:after {content:""; position: absolute; height: 50%; width: 1px; background: #dedede; top: 20px; right: 0;} 

/* 웨딩날짜만 있는 영역 */
#container .cont.type03 { padding: 6rem 3rem; background: url(../images/type03_bg.png) no-repeat center center; background-color: #fff; background-size: cover;}
#container .cont.type03 .wedding_date p {font-size: 2.2rem; line-height: 140%;}

/* 오시는 길 부분 */
#container .cont.type04 {background: #ffdddd; padding: 3rem;}
#container .cont.type04 .con_box {background: #fff; padding: 3rem 0 2rem;}
#container .cont.type04 .con_box .con_tit,
#container .cont.type04 .con_box .con_txt {padding: 3rem ;}
#container .cont.type04 .con_box .con_txt p {font-size: 1.6rem; text-align: left; line-height: 180%; display: inline-block; width: 100%;}
#container .cont.type04 .con_box .con_txt p b {font-size: 2rem; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"}
/* 지도영역 이미지로 임시로 영역 대처 */
#container .cont.type04 .con_box .map_box {display: block; width: 100%; height: 300px; margin: 1.5rem 0; overflow: hidden;}
#container .cont.type04 .con_box .map_box img {width: 100%; max-width: 100%;}

/* 교통편 영역 부분 */
#container .cont.type04 .con_box .traffic_box {padding: 3rem ;}
#container .cont.type04 .con_box .traffic_box .traffic_txt {margin-bottom: 2rem;}
#container .cont.type04 .con_box .traffic_box .traffic_txt h3 {font-size: 1.8rem; text-align: left; line-height: 180%; display: inline-block; width: 100%;}
#container .cont.type04 .con_box .traffic_box .traffic_txt p {font-size: 1.6rem; text-align: left; line-height: 180%; display: inline-block; width: 100%; letter-spacing: -0.05rem;}
#container .cont.type04 .con_box .traffic_box .traffic_txt p span {display: inline-block; }


/* 모바일 청첩장 부분 세로, 가로 기본 라인 */
.b_line {width: 2rem; height: 1px; display: block; margin: 0 0 .5rem 0; background: #272727;}
.v_line {height: 100px; width: 1px; background: #7d0f0f; display: block;}
.w_line {width: 14rem; height: 1px; position: relative; display: block; background: #434343; left: -55px;}
.w_line:after {content: ""; position:  absolute; width: 20px; height: 11px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #434343; right: -40px; top: -5px;}



/* 텍스트 및 슬라이드 애니메이션 영역 */

/* 스크롤 전 감춰두는 부분 */
.slideanim {
	visibility: hidden;}

/* 메인 SAVE THE DATE 텍스트 효과 */
.text_show {position: relative; display: inline-block; color: transparent; max-width: 100%; white-space: pre; text-transform: uppercase;}
.text_show:after {content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    color: #7d0f0f;
    white-space: pre;
    animation-name: txt_tshow;
    overflow: hidden;
    animation-duration: 2.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;}

/* 메인 이름 텍스트 효과 */
.text_r_show {position: relative; display: inline-block; color: transparent; max-width: 100%; white-space: pre; text-transform: uppercase;}
.text_r_show:after {content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    color: #434343;
    white-space: pre;
    animation-name: txt_tshow;
    overflow: hidden;
    animation-duration: 4.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;}

/* 메인 식장 및 웨딩날짜 텍스트 효과 */
.text_b_show {position: relative; display: inline-block; color: transparent; max-width: 100%; white-space: pre; text-transform: uppercase;}
.text_b_show:after {content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    color: #434343;
    white-space: pre;
    animation-name: txt_tshow;
    overflow: hidden;
    animation-duration: 6.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;}
	
@keyframes txt_tshow {
	0% {right: 100%;}
	20% {right: 100%;}
	50% {right: 0%;}
}

.slide {
  animation-name: slide;
  -webkit-animation-name: slide;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}
@keyframes slide {
	0% {
	  opacity: 0;
	  transform: translateY(70%);
	} 
	100% {
	  opacity: 1;
	  transform: translateY(0%);
	}
}
@-webkit-keyframes slide {
	0% {
	  opacity: 0;
	  -webkit-transform: translateY(70%);
	} 
	100% {
	  opacity: 1;
	  -webkit-transform: translateY(0%);
	}
}

.slide2 {
  animation-name: slide2;
  -webkit-animation-name: slide2;
  animation-duration: 1.8s;
  -webkit-animation-duration: 1.8s;
  visibility: visible;
}
@keyframes slide2 {
	0% {
	  opacity: 0;
	  transform: translateY(70%);
	} 
	50% {
	  opacity: 0;
	  transform: translateY(70%);
	} 
	100% {
	  opacity: 1;
	  transform: translateY(0%);
	}
}
@-webkit-keyframes slide2 {
	0% {
	  opacity: 0;
	  -webkit-transform: translateY(70%);
	} 
	50% {
	  opacity: 0;
	  transform: translateY(70%);
	} 
	100% {
	  opacity: 1;
	  -webkit-transform: translateY(0%);
	}
}

.parents_tit { width: 280px; }



/*  핸드폰 사이즈에 따른 컨텐츠 반응형 */

@media screen and (max-width:500px) {
	html {font-size: 62.5%;}
	body {font-size: 14px;}
	.parents_tit { width: 240px; }
}


@media screen and (max-width:420px) {
	html {font-size: 52.5%;}
	body {font-size: 10px;}
	#container .cont.type01 {padding: 0 1.5rem; }
	#container .cont.type02 {padding: 3rem 1rem; }
	#container .cont.type04 {padding: 2rem;}
	#container .btn_box a {padding: 1.5rem;}
	#container .btn_box a:first-child:after {top: 15px;}
	
	#container .cont.type04 .con_box .map_box {height: 220px;}
	
	.footer p a.sns_btn {margin: 0 .5rem;}

	.parents_tit { width: 167px; }
}