@import url('/css/font.css');
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

@font-face {
    font-family: 'misaeng';
    font-style: normal;
    font-weight: 400;
    src: local('misaeng'), local('misaeng'), local('misaeng');
    src: url('/font/SDMiSaeng.ttf');
    src: url('/font/SDMiSaeng.ttf') format('truetype');

}

/*---------------- Reset CSS----------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
html,body {
	width:100%; height:100%; min-width:320px; overflow-x:hidden !important; font-family: 'Noto Sans KR', sans-serif; font-size:13px; color:#333; 
}
a{
	text-decoration:none; color:inherit;
}
table {
    border-spacing: 0;
}
img {
    border: 0; padding:0; vertical-align:top; max-width:100%;
}
ol,ul,li {
    list-style: none;
    margin:0;
    padding:0;
}
h1,h2,h3,h4,h5,h6 {
	font-weight:normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#666;
}
input { vertical-align:middle;  }
label { cursor:pointer; }
*:focus { outline:0; }




/*---------------- 공통----------------------- */

#loading { position:fixed; top:0; left:0; z-index:9999; background:#fee1ea; width:100%; height:100%; }
#loading img { position:absolute; width:50%;  left:calc(50% - 25%); top:calc(50% - 25%);  }



.section { width:100%; height:100%; position:relative;  }
.dimmed_black { position:absolute; top:50px; left:0; width:100%; height:100%;  background:rgba(0,0,0,0.6); z-index:2; opacity:0; visibility:hidden; }
.dimmed_white { position:absolute; top:50px; left:0; width:100%; height:100%; background:rgba(255,255,255,0.6); z-index:2; opacity:0; visibility:hidden;    }


#header { position:fixed; width:100%; min-width:320px; height:50px; left:0; top:0; background:rgba(255,255,255,0.7); z-index:999;}
#header .inner { width:95%; height:100%;position:relative; margin:auto; }
#logo { float:left; width:40%; padding:10px 0 0; }
#logo img { width:100%; max-width:125px;  }
#gnb { position:absolute; right:15%; font-weight:bold;  font-size:1em; top:0; height:50px;  }
#gnb li {  text-align:center; display:none; height:50px; line-height:50px; }
#gnb li span{ font-size:0.6em; display:none; }
#gnb li.active  { display:block; color:#e2164b; }

#nav { position:absolute;  right:0; width:30px; height:30px; margin:10px; background:url("/img/m_nav.png") no-repeat; background-size: 100% auto; }
#nav.on { background:url("/img/m_nav_close.png") no-repeat; background-size: 100% auto; }

#menu { width:100%; height:100%; position:fixed; top:0; left:0; background: url('/img/m_nav_bg.jpg'); background-size:cover; z-index:998; opacity:0; visibility:hidden;  }
#menu ul { padding-top:25%; position:absolute; top:50%; left:50%; transform:translate(-50%,-55%); }
#menu li { text-align:center; font-size:1.2em; line-height:1.4; color:#e2164b; font-weight:bold;  padding:1% 0; opacity:0; visibility:hidden;  transition: all 1s; }
#menu li span {  font-size:0.75em; color:#c3a1aa;}
#menu li:first-child {transition-delay: 0.25s;}
#menu li:nth-child(2) {transition-delay: 0.35s; }
#menu li:nth-child(3) {transition-delay: 0.4s; }
#menu li:nth-child(4) {transition-delay: 0.45s; }
#menu li:nth-child(5) {transition-delay: 0.5s; }
#menu li:nth-child(6) {transition-delay: 0.55s; }
#menu li:last-child {transition-delay: 0.6s; }
#menu.on { opacity:1; visibility:visible; transition: all 0.5s; } 
#menu.on li { opacity:1; visibility:visible; } 
			
.past_back { float:right; padding-top:10px; }
.past_back img { max-height:30px; }

/*---------------- episode1 괜찮니?캠페인----------------------- */
#section1 { background-image:url(/img/sec1_bg.jpg);  }
.main_copy { width:100%; position:relative; height:70px; padding-top:20px; line-height:70px; display:flex; align-items:center;}
.main_copy .heart { position:absolute; width:20%;  left:40%; padding:5px; box-sizing:border-box; }
.main_copy .name { position:absolute; width:100%; height:70px; left:0;  display:flex; align-items:center; font-family: 'Nanum Pen Script'; font-size:3em; line-height:0.8em;  }
.main_copy .name .string1 { position:absolute; width:35%; left:5%; display:inline-block;  text-align:right;    }
.main_copy .name .string2 { position:absolute; width:40%;  left:60%; display:inline-block;  text-align:left;}

.sec1_mailbox { width:60%; margin:auto; position:relative; text-align:center;  }
.sec1_mailbox .dolls { width:40%; margin:auto;  }
.sec1_mailbox .mailbox { width:100%;  }
.sec1_mailbox .btn_join { position:absolute; width:40vw; bottom:8vw; left: calc(50% - 20vw) ;  display:block; text-align:center; }
.sec1_mailbox .btn_join img { width:100%;  }



/*---------------- episode2 에어키스 캠페인 part1.----------------------- */
#section2 { background:url(/img/sec2_bg.jpg);  position:relative; }
.campaign1 { width:100%; height:60%; background:#fec3d3; text-align:center; position:relative; margin-top:150px;  }
.campaign1 .camp_title { width:43%; padding:5% 0; margin: auto;  text-align:center;}
.campaign1 .camp_copy { width:65%; margin: auto;  text-align:center;}
.campaign1 .camp_copy2 {width:85%; margin:2% auto; font-size:12px; text-align:center; background:rgba(255,255,255,0.5); line-height:20px; padding:10px 0; border-radius:10px; }
.campaign1 .camp_join { margin:4% auto 0; width:50%; text-align:center; position:relative; }
.campaign1 .camp_join .handsUp { position:absolute; width:100%; height:50px; text-align:center; font-size:0; top:0; }
.campaign1 .camp_join .handsUp li { display:inline-block; height:50px;   }
.campaign1 .camp_join .handsUp li img { height:100%;  }
.campaign1 .camp_join .sec2_btnjoin { position:relative; width:100%; padding:40px 0 0;  cursor:pointer;  }
.sec2_deco { position:absolute; width:275px; left:50%; margin-left:-138px;  top:-114px; }


/*---------------- episode2 에어키스 캠페인 part2.----------------------- */
#section2-2 { background:url(/img/sec2_bg.jpg);  }
.campaign2 { width:100%;  text-align:center; position:relative; margin-top:50px;  }
.campaign2 .camp_title { width:43%; padding:0% 0 3%; margin: auto; }
.campaign2 .camp_copy { width:65%; margin: auto;  }
.campaign2 .camp_copy2 { width:80%; margin: auto;  }
.campaign2 .sns  { text-align:center;  }
.campaign2 .sns a { display:inline-block; width:12%; margin:3%;  }
.campaign2 .videoArea { width:100%; background-color:#fdeef3; overflow:hidden; padding:2% 5%; margin:10px 0; box-sizing:border-box; text-align:center; position:relative;  }
.campaign2 .videoArea li .ico_play { position:absolute; width:47px; top: calc(50% - 23px); left: calc(50% - 23px);}

.moreview { width:60%;  margin:10px auto;  }


/*---------------- episode3 에어키스 메세지 ----------------------- */
#section8 { background:url(/img/sec2_bg.jpg); padding-top:50px; }
.sec8_title { width:86%; margin:auto; }
.social_tag { width:100%; padding:3% 7%; text-align:center; background:#fff; box-sizing:border-box; }
.social_area { padding:30px 0 0 0; background:#fec3d3; }
/* .social_area { padding:30px 0 0 4%; background:#fec3d3; } */
.sec8_moreview { display:block; width:60%; margin:auto; padding:2% 0; }


/*---------------- episode3 플래시몹----------------------- */
#section3 { background:url(/img/m_sec3_bg.jpg); background-size:cover;}
.section3_inner { padding-bottom:5%; }
.place_select { width:67%; height:auto; background: #fee1ea url('/img/m_btn_select.png') no-repeat 95% 5px; background-size:20px; margin:auto; border-radius:15px; border:5px solid #fff; }
.place_select select { width:90%; height:30px; padding-left:10%; text-align:center; box-sizing:border-box;  background:0; border:0; font-family: 'Nanum Pen Script'; font-size:1.7em; 
								color:#ef7d9b; -webkit-appearance: none; }

.bigImg { width:100%; margin:0px auto; padding-top:40px; background-image:url("/img/flashmob_deco.png"); background-size:90% auto; background-repeat:no-repeat; background-position:center top; }
.bigImg li {  width:67%;   margin:auto; position:relative; overflow:hidden;  display:none; }
.bigImg li:before { content:''; display:block; padding-bottom:56%; }
.bigImg li.active { display:block; }
.bigImg li img { display:block;  position:absolute; top:0; left:0; width:100%;  height:100%; }
.bigImg li .ico_play { position:absolute; width:47px; height:47px; top: calc(50% - 23px); left: calc(50% - 23px); }

.addImg { width:100%; height:50px; background:rgba(233,236,237,0.5) url("/img/flower4.png") no-repeat; background-size:15%; margin:10px 0 0; text-align:center; font-size:0; }
.addImg ul { width:67%; margin:auto;  }
.addImg li { width:25%; height:50px; float:left;  background:url(/img/polaroid_bg.png) no-repeat; background-size:contain; padding:2% 4% 3% 3%;
				  box-sizing:border-box; overflow:hidden; position:relative; }
.addImg li span.ico_play { position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-10px; width:20px; height:20px; z-index:99;  }
.addImg li span.ico_play img { width:100%; }
.addImg li img { width:100%; height:100%; }

.flashmob_info { width:90%; margin:auto; text-align:center;  } 
.flashmob_info h1 { font-size:1.4rem; color:#333; line-height:1.5em; font-family: 'Nanum Pen Script'; letter-spacing:-0.07rem; }
.flashmob_info h2 { font-size:1.1rem; color:#333; line-height:1.5em;  letter-spacing:-0.07rem;  }
.flashmob_info h2  span {  font-size:1.1rem; color:#888; display:inline-block; margin-left:0.5em;}



/*---------------- episode4 우체통 캠페인 ----------------------- */

#section4 { background-color:#73d0f4;	position:relative; }
.sec4_bg { position:absolute; left:-20%; bottom:0; height:35%; z-index:9; }
.sec4_title { width:76%;  margin:0 auto 10px; position:relative; }
.sec4_title img { width:100%; }

.postbox_select { width:67%; height:auto; background: #b9e8fa url('/img/m_btn_select_blue.png') no-repeat 95% 5px; background-size:20px; margin:auto; border-radius:15px; border:5px solid #fff; }
.postbox_select select { width:90%; height:30px; padding-left:5%; text-align:center; box-sizing:border-box;  background:0; border:0; font-family: 'Nanum Pen Script'; font-size:1.7em; 
								color:#008dd0; -webkit-appearance: none; }

.postbox { position:relative; display:none; }
.postbox.active { display:block; }
.postbox .bigImg { width:100%; margin:0px auto; padding-top:10px; background-image:none; background-size:90% auto; background-repeat:no-repeat; background-position:center top; }
.postbox .bigImg li { width:67%;  margin:auto; position:relative; overflow:hidden;  display:none; }
.postbox .bigImg li.active { display:block; }
.bigImg li img { display:block;  position:absolute; top:0; left:0; width:100%;  height:100%; }
.bigImg li .ico_play { position:absolute; width:47px; height:47px; top: calc(50% - 23px); left: calc(50% - 23px); }

.postbox .addImg { width:100%; height:50px; background:rgba(233,236,237,0.5) url("/img/sec4_letter.png") no-repeat; background-size:15%; background-position:100%; margin:10px 0 0; text-align:center; font-size:0; }
.postbox .addImg ul { width:67%; margin:auto;  }
.postbox .addImg li { width:25%; height:50px; float:left;  background:url(/img/polaroid_bg.png) no-repeat; background-size:contain; padding:2% 4% 3% 3%;
								box-sizing:border-box; overflow:hidden; position:relative; }
.postbox .addImg li span.ico_play { position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-10px; width:20px; height:20px; z-index:99;  }
.postbox .addImg li span.ico_play img { width:100%; }
.postbox .addImg li img { width:100%; height:100%; }

.postbox .postbox_info { padding-left:23%; }
.postbox .postbox_info h1 {  font-size:2rem; color:#2a81c4; line-height:1.5em; font-family: 'Nanum Pen Script'; letter-spacing:-0.07rem;  }
.postbox .postbox_info h2 { font-size:0.9rem; color:#2a6383; line-height:1.5em;  letter-spacing:-0.07rem;}



/*---------------- episode5 편지지 다운로드 ----------------------- */

#section5 { background-color:#73d0f4; 	position:relative; }

.sec5_title { width:80%;  margin:auto; position:relative; }
.sec5_title img { width:100%; }

.makingFilm { width:68%; margin:4% auto 45%; }

.letter_download_wrap { position: absolute; bottom:0; left:0; width:100%; }
.letter_download_inner { position:relative; width:100%; }
.letter_download_inner:before { content:''; display:block; padding-top:55%; }
.letter_download { position:absolute; top:0; left:0; right:0; bottom:0;  background:#9ddef7;}

.tab_type { padding-top:4%; text-align:center;  } 
.tab_type li { display:inline-block;  padding:2% 3% ; margin:0 5px; color:#50aed2; background:#73d0f4; 
												border-radius:5px; font-size:1.5em; font-family: 'Nanum Pen Script'; }
.tab_type li.active { background:#006aaf; color:#fff;  border:1px inset #ddd; box-sizing:border-box; } 

.tab_type_down p { padding:3% 0;  text-align:center; }
.tab_type_down p img { width:15px; }
.tab_type_down ul { text-align:center; display:none; }
.tab_type_down li { display:inline-block; border:4px solid transparent; }
.tab_type_down li:last-child { margin-right:0;  }
.tab_type_down li:hover { border:4px solid #498eda;  }

.tab_type_down .letter-type { display:block; }
.tab_type_down .letter-type li { width:13%; margin-right:3%;  }
.tab_type_down .post-type li { width:20%; margin-right:0%; }
.tab_type_down .orga-type span { color:#345787; font-size:14px; font-weight:bold;  }
.tab_type_down .orga-type img { width:12%; margin:10px 0;  }

.sec5_dolls { position:absolute; height:40%; top:-40%;  right:0; }


/*---------------- episode6 내가 들어줄게 ----------------------- */

#section6 {  position:relative; padding:10% 0; text-align:center; background:#ffe6ed url(/m/img/m_sec6_bg.png) no-repeat; background-size:100% auto; background-position:center 100px; border-bottom:1px solid #fff; }
#section6 img { max-width:90%;  }

.center_select { width:80%; height:auto; margin:20px auto; padding:3px 0; background: #fff url('/img/m_btn_select.png') no-repeat 95% 7px; background-size:20px; border-radius:10px;  }
.center_select select { width:90%; height:30px; padding-left:5%; text-align:center; box-sizing:border-box;  background:0; border:0; font-family: 'Nanum Pen Script'; font-size:1.7em; 
								color:#e56085; -webkit-appearance: none; }
.centerBox { width:80%; margin:auto; background:#fff;  color:#666; border-radius:10px; text-align:left; }
.centerBox li { display:none; padding:3% 5%; border-bottom: 1px solid #edebea;}
.centerName { margin:0 0 10px; font-size:14px; font-weight:500;  }
.centerDetail .centerAddr { padding-left:40px; background:url(/img/map/centerBox_ico1.png) no-repeat left center; margin:0 0 10px; word-break:keep-all; line-height:1.3;}
.centerDetail .centerTel { padding-left:40px; background:url(/img/map/centerBox_ico2.png) no-repeat left center; }
.centerDetail strong  { display:block; }


/*---------------- episode7 지난 캠페인 ----------------------- */

#section7 { background-color:#ffe6ed; 	position:relative;  }
#section7 .sec7_title { width:80%; margin:0 auto 5%; }
.pastImg { width:90%; margin:auto;  }
.pastContent { width:80%; margin:auto; padding:5%; background:#fff;  }
.pastContent h3 { font-family: 'nanumbarunpenr'; color:#f37095; }
.pastContent p { margin:5px 0 0; line-height:1.2; font-size:10px; word-break:normal; } 
.pastDate { margin:1% 0 2%; font-family: 'nanumbarunpenr'; color:#f37095; font-size:11px; }
.pastDate span { color:#c94066; } 
.past_btn_view { display:block; width:50%; margin:auto; }





/*---------------- sec1 : writing letter page ----------------------- */
#letterPopup { position:absolute; top:50px;  left:0; right:0;  background:rgba(0,0,0,0.7);  z-index:2;   }
.letter_inner { position:relative; width:100%; height:100%; margin:0 auto; }
.letter_close { position:absolute; top:0; right:2%; display:block; z-index:3; } 
 
.selectWrap { position:relative;  width:calc(100% - 40px); height:20%; }
.select {  position:relative;  }
.select li { width:50px; height:50px; display:inline-block;  box-sizing:border-box; }
.select li.letterS1 { background:url('/img/letter_thumb1.jpg') center; }
.select li.letterS2 { background:url('/img/letter_thumb2.jpg') center; }
.select li.letterS3 { background:url('/img/letter_thumb3.jpg') center; }
.select li.letterS4 { background:url('/img/letter_thumb4.jpg') center; }
.select li.letterS5 { background:url('/img/letter_thumb5.jpg') center; }
.select li.letterS6 { background:url('/img/letter_thumb6.jpg') center; }
.select li.letterS7 { background:url('/img/letter_thumb7.jpg') center; }
.select li.letterS8 { background:url('/img/letter_thumb8.jpg') center; }
.select li.letterS9 { background:url('/img/letter_thumb9.jpg') center; }
.select li.letterS10 { background:url('/img/letter_thumb10.jpg') center; }
.select li.letterS11 { background:url('/img/letter_thumb11.jpg') center; }
.select li.letterS12 { background:url('/img/letter_thumb12.jpg') center; }
.select li.letterS13 { background:url('/img/letter_thumb13.jpg') center; }
.select li.letterS14 { background:url('/img/letter_thumb14.jpg') center; }
.select li.letterS15 { background:url('/img/letter_thumb15.jpg') center; }
.select li.letterS16 { background:url('/img/letter_thumb16.jpg') center; }
.select li.letterS17 { background:url('/img/letter_thumb17.jpg') center; }
.select li.letterS18 { background:url('/img/letter_thumb18.jpg') center; }
.select li.letterS19 { background:url('/img/letter_thumb19.jpg') center; }
.select li.letterS20 { background:url('/img/letter_thumb20.jpg') center; }
.select li.letterS21 { background:url('/img/letter_thumb21.jpg') center; }
.select li.letterS22 { background:url('/img/letter_thumb22.jpg') center; }
.select li.letterS23 { background:url('/img/letter_thumb23.jpg') center; }
.select li.letterS24 { background:url('/img/letter_thumb24.jpg') center; }
.select li.letterS25 { background:url('/img/letter_thumb25.jpg') center; }
.select li.letterS26 { background:url('/img/letter_thumb26.jpg') center; }

.select li.active { border-radius:50%;  transition:0.3s; }

.letterArea {  position:relative;  width:96%; height:75%; margin:0 auto 10%;  }
.letterArea ul {position:relative;  width:100%; }
.letterArea ul:before { content:''; display:block; padding-top:124%; }
.letterArea li { position:absolute; top:0; left:0; right:0; bottom:0; display:none; z-index:-2; background-repeat: no-repeat; background-size:contain; background-position:center; }
.letterArea li.letter1 { background-image:url('/img/m_letter1.jpg'); }
.letterArea li.letter2 { background-image:url('/img/m_letter2.jpg'); }
.letterArea li.letter3 { background-image:url('/img/m_letter3.jpg'); }
.letterArea li.letter4 { background-image:url('/img/m_letter4.jpg'); }
.letterArea li.letter5 { background-image:url('/img/m_letter5.jpg'); }
.letterArea li.letter6 { background-image:url('/img/m_letter6.jpg'); }
.letterArea li.letter7 { background-image:url('/img/m_letter7.jpg'); }
.letterArea li.letter8 { background-image:url('/img/m_letter8.jpg'); }
.letterArea li.letter9 { background-image:url('/img/m_letter9.jpg'); }
.letterArea li.letter10 { background-image:url('/img/m_letter10.jpg'); }
.letterArea li.letter11 { background-image:url('/img/m_letter11.jpg'); }
.letterArea li.letter12 { background-image:url('/img/m_letter12.jpg'); }
.letterArea li.letter13 { background-image:url('/img/m_letter13.jpg'); }
.letterArea li.letter14 { background-image:url('/img/m_letter14.jpg'); }
.letterArea li.letter15 { background-image:url('/img/m_letter15.jpg'); }
.letterArea li.letter16 { background-image:url('/img/m_letter16.jpg'); }
.letterArea li.letter17 { background-image:url('/img/m_letter17.jpg'); }
.letterArea li.letter18 { background-image:url('/img/m_letter18.jpg'); }
.letterArea li.letter19 { background-image:url('/img/m_letter19.jpg'); }
.letterArea li.letter20 { background-image:url('/img/m_letter20.jpg'); }
.letterArea li.letter21 { background-image:url('/img/m_letter21.jpg'); }
.letterArea li.letter22 { background-image:url('/img/m_letter22.jpg'); }
.letterArea li.letter23 { background-image:url('/img/m_letter23.jpg'); }
.letterArea li.letter24 { background-image:url('/img/m_letter24.jpg'); }
.letterArea li.letter25 { background-image:url('/img/m_letter25.jpg'); }
.letterArea li.letter26 { background-image:url('/img/m_letter26.jpg'); }

.letterArea li.active { display:block; }

.letterArea input , .letterArea textarea {  border:0; font-family:'misaeng'; background:0; font-weight:bold; }
.letter_content { position:absolute;  top:10%; left:5%; right:5%; bottom:20%;  font-family:'misaeng'; }
.letter_content .letterTo { text-align:center; height:10%; }
.letter_content .letterTo input { width:30%; height:1.5em; font-size:1.5em; text-align:center; border-bottom:1px solid #b38e3a; color:#b38e3a; }
.letter_content .letterTo img { width:30%; }
.letter_content .letter_title { height:5%;  text-align:center; padding:5% 0; font-size:1.2em; font-weight:bold; }
.letter_content .write { width:70%; height:40%; background:url('/img/write_bg.jpg'); margin:auto; }
.letter_content .write textarea { width:100%; height:100%; padding:10px; box-sizing:border-box; color:#555; font-size:1.3em;  }
.letter_content .letterFrom {  text-align:center; padding:5% 0; color:#888;  font-size:1em; font-weight:bold; }
.letter_content .letterFrom span {  font-size:1.2em; font-weight:bold;  }
.letter_content .letterFrom input { width:100px;  height:1.5em;  font-size:1.2em; text-align:right; border-bottom:1px solid #888; color:#777;   }
.letter_content #submit { width:45%;  margin:10px 0 0; padding-left:15%; display:block;  }


#sns_share { position:absolute;  top:50px; left:0; right:0; height:100%; background:rgba(255,255,255,0.5);  z-index:2;  display:none;  }
.share_popup {  position:absolute; top:40%;  }
.share_popup img { width:100%; }
.share_popup a { position:absolute; display:block; width:20%; height:50%; }
.share_popup a.sns_kas { left:6%; top:34%; }
.share_popup a.sns_fb { left:30%; top:34%; }
.share_popup a.sns_blog{ left:52%; top:34%; }
.share_popup a.sns_kakao { left:74%; top:34%; }
.share_popup a.sns_close{ right:0px; top:0px;  height:30%;}

#letter_complete { position:absolute; width:100%; top:30%; left:0; z-index:2;   display:none;   }
.complete {   position:relative;   }
.kakao_submit img { width:90%; margin:auto; display:block;  }





/*---------------- sec2 : airkiss 캠페인참여 page ----------------------- */
#airkissPopup { position:absolute;  top:50px; bottom:0; left:0; right:0; background:url(/img/m_airkiss_bg.jpg) ; background-size:cover; z-index:9; }
.airkiss_inner { width:90%; height:100%;  margin:auto; position:relative; }
.airkiss_close { position:absolute; top:0; right:0px; display:block; } 
.airkiss_close img { width:30px; } 
.airkiss_title { width:50%; margin:5% 0 3%;}
#airkissPopup textarea { width:100%; height:20%; padding:3%; border:1px solid #ddd; background:#fafafa; font-size:12px; box-sizing:border-box; font-weight:normal; }
.radioArea { text-align:center; margin:1% 0; }
.radioArea input#disagree { margin-left:20px; }

table.personal {  }
.personal tr { height:25px;  }
.personal th { width:80px; height:25px; padding-left:28px; text-align:left; font-size:1em; color:#666; background:url('/img/ico_kiss.png') no-repeat left center; background-size:25px;}
.personal td { padding:4px 0; }
.personal input { width:200px; height:25px; border:1px solid #ddd; border-radius:3px; padding-left:5px; }
.personal input[type="tel"] { width:55px; }

.upload h1 { height:35px; line-height:35px;  font-size:1em; color:#666; font-weight:bold; margin:0; padding-left:28px; background:url('/img/ico_kiss.png') no-repeat left center; background-size:25px;}
.tab_btn {  border-bottom:1px solid #ddd; }
.tab_btn li { width:72px; height:22px; display:inline-block; font-weight:normal; font-family: 'Nanum Pen Script'; font-size:18px; border-radius: 10px 10px 0 0; text-align:center; cursor:pointer; } 
.tab_btn li.tab_btn1 { background:#fe7db6; color:#fff; margin-right:5px; }
.tab_btn li.tab_btn2 { background:#feb8ce; color:#ff3a6f; }

.tab_view { margin:5px 0 0; height:30px; }
.tab_view span { width:80px;  display:inline-block; }
.tab_view li.tab_view1 input { width:calc(100% - 90px); height:25px;  border:1px solid #ddd; border-radius:3px; padding-left:5px; }
.tab_view li.tab_view2 { display:none; }

.airkiss_submit { padding:2% 0 0; display:block; width:40%; margin:auto; }



/*---------------- sec2-2 : airkiss 참여영상 전체 게시판 list (board)----------------------- */

#board { background:url(/img/sec2_bg.jpg); position:relative; width:100%; height:100%; padding-top:50px;  }
.board_title { width:100%; }
.board_content { width:100%; overflow:hidden;  background:#fff; padding:10px 0; }
.board_content_inner { width:94%; height:auto; margin:auto;  }
.board_content ul { width:100%; overflow:hidden;  }
.board_content li { width:50%; float:left;  padding:0 2%; margin:2% 0;  box-sizing:border-box; text-align:center;  }

.video_thumb { width:100%; position:relative; overflow:hidden; background:#000; display:block;  }
.video_thumb:before { content:''; padding-top:56%; display:block;  }
.img_wrap { position:absolute; top:0; left:0; right:0; bottom:0;   }
.video_thumb img {  width:100%; }
.btn_view { display:inline-block; margin:5% 0 0; padding:2px 20px; background:#ffafca; color:#fff;  font-size:0.8em; }

.paging { padding:5% 0 10%; text-align:center; } 
.paging a { display:inline-block; }
.paging a img { vertical-align:middle; }
.paging ol { display:inline-block; margin:0 6px; }
.paging li { display:inline-block; width:27px; height:27px; line-height:27px; text-align:center; background:#fccadb; color:#e390ab; border-radius:3px; margin:0 6px;  }
.paging li a { display:block; }
.paging li.active { background:#f06b8d; color:#fff; }

.back_url { padding:20px 0 30px; text-align:center; }
.back_url a  { padding:5px 15px;  border:1px solid #f06b8d; border-radius:10px;  color:#f06b8d; font-weight:400; font-size:13px; }
.back_url a:hover  {  background:#f06b8d; color:#fff; transition:0.1s; }


/*---------------- sec2-2 : airkiss 참여영상 전체 게시판 view (board)----------------------- */

#boardView { background:url(/img/sec2_bg.jpg); position:relative; width:100%; height:100%; padding-top:50px;  }
.boardView_title { width:90%; margin:auto; }
.boardView_box { width:90%; margin:10px auto 0; border:2px solid #ef5d74; }

.view_titleArea {  background:#fff; padding:10px;  }
.view_title { font-size:1.1em; letter-spacing:-0.1em; font-weight:bold; text-align:center;}
/*.view_date { font-size:0.8em; letter-spacing:-0.05em;  }*/
.view_thumb { width:100%; overflow:hidden;  position:relative; }
.view_thumb .ico_play { position:absolute; width:47px; top: calc(50% - 23px); left: calc(50% - 23px);}
.view_snsArea { width:100%; position:relative; }
.view_snsArea:before { content:''; display:block; padding-top:15%; } 
.view_sns { position:absolute; top:0; left:0; width:100%; height:100%; background:url("/img/m_boardview_sns.jpg"); background-size:cover;  padding:2% 0 0 45%; box-sizing:border-box; }
.view_sns a { padding:0 2%; }
.view_sns a img { height:80%;  }
.addImg_title { padding:2% 0; border-top:2px solid #ef5d74; border-bottom:1px solid #ef5d74;  background:#fff0f5; text-align:center;  }
.addImg_title img { width:70%; vertical-align:middle;  }

.addImg_thumb { background:#fff; }
.addImg_thumb ul { padding:3% 0; text-align:center; font-size:0;  }
.addImg_thumb li { display:inline-block; width:25%; margin-right:3%; position:relative; border:5px solid transparent; border-radius:5px;}
.addImg_thumb li:before { content:''; display:block; padding-top:56%; overflow:hidden;}
.addImg_thumb li img { position:absolute; top:0; left:0; width:100%; height:100%;  }
.addImg_thumb li:last-child { margin-right:0; }

.addImg_thumb li.prev span { position:absolute; top:0; left:0; width:100%; height:100%;   }
.addImg_thumb li.current { border:5px solid #f71b74; border-radius:5px;  }
.addImg_thumb li.next span { position:absolute; top:0; left:0; width:100%; height:100%;   }

.btn_back { display:block; padding:2% 0; background:#fff0f5; text-align:center;   }
.btn_back img {  width:50%;    }