@charset "utf-8"; @font-face {   font-family: "Noto Sans Korean";   font-weight: 100;   font-style: normal;   src: url("../fonts/NotoSans-Thin.eot?") format("eot"),   url("../fonts/NotoSans-Thin.otf") format("opentype"),   url("../fonts/NotoSans-Thin.woff") format("woff"),   url("../fonts/NotoSans-Thin.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans Korean";   font-weight: 200;   font-style: normal;   src: url("../fonts/NotoSans-Light.eot?") format("eot"),   url("../fonts/NotoSans-Light.otf") format("opentype"),   url("../fonts/NotoSans-Light.woff") format("woff"),   url("../fonts/NotoSans-Light.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans Korean";   font-weight: 300;   font-style: normal;   src: url("../fonts/NotoSans-DemiLight.eot?") format("eot"),   url("../fonts/NotoSans-DemiLight.otf") format("opentype"),   url("../fonts/NotoSans-DemiLight.woff") format("woff"),   url("../fonts/NotoSans-DemiLight.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans Korean";   font-weight: 400;   font-style: normal;   src: url("../fonts/NotoSans-Regular.eot?") format("eot"),   url("../fonts/NotoSans-Regular.otf") format("opentype"),   url("../fonts/NotoSans-Regular.woff") format("woff"),   url("../fonts/NotoSans-Regular.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans Korean";   font-weight: 500;   font-style: normal;   src: url("../fonts/NotoSans-Medium.eot?") format("eot"),   url("../fonts/NotoSans-Medium.otf") format("opentype"),   url("../fonts/NotoSans-Medium.woff") format("woff"),   url("../fonts/NotoSans-Medium.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans Korean";   font-weight: 700;   font-style: normal;   src: url("../fonts/NotoSans-Black.eot?") format("eot"),   url("../fonts/NotoSans-Black.otf") format("opentype"),   url("../fonts/NotoSans-Black.woff") format("woff"),   url("../fonts/NotoSans-Black.woff2") format("woff2"); } 
@font-face {   font-family: "Noto Sans Korean";   font-weight: 900;   font-style: normal;   src: url("../fonts/NotoSans-Bold.eot?") format("eot"),   url("../fonts/NotoSans-Bold.otf") format("opentype"),   url("../fonts/NotoSans-Bold.woff") format("woff"),   url("../fonts/NotoSans-Bold.woff2") format("woff2"); } 

@font-face { font-family: 'NIXGONB-Vb'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/NIXGONB-Vb.woff') format('woff'); font-weight: normal; font-style: normal; }

article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {  	display:block; 	margin:0; 	padding:0; } 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, canvas, details,   summary, time, mark, audio, video { 	margin:0; 	padding:0; } 
*{box-sizing: border-box;} 
h1, h2, h3, h4, h5, h6{font-size:inherit;} 
body { 	line-height:1; 	font-family: 'Noto Sans Korean',sans-serif; 	font-weight: 200; 	font-size:14px; 	color:#333; 	-webkit-text-size-adjust: 100%; 	vertical-align: middle; 	letter-spacing: -0.5px; } 
ul li{ 	list-style:none; 	padding:0; } 
img { 	border: none; 	vertical-align: middle; } 
blockquote, q { 	quotes:none; } 
blockquote:before, blockquote:after, q:before, q:after { 	content:''; 	content:none; } 
a{ 	color:inherit; 	margin:0; 	padding:0; 	text-decoration: none; 	vertical-align: middle; } 
table { 	border-collapse:collapse; 	border-spacing:0; } 
input, select { 	vertical-align:middle; 	font-size:initial; } 
em{font-style:normal} 
sub,sup{ 	font-size: 75%; 	line-height: 0; 	position: relative; 	vertical-align: baseline; } 
sub { 	bottom: -0.25em; } 
sup { 	top: -0.5em; } 
b, strong { 	font-weight: bolder; } 
abbr[title], dfn[title] { 	cursor:help; 	border-bottom: none; 	text-decoration: underline; } 
button, [type="button"], [type="reset"], [type="submit"] { 	-webkit-appearance: button; 	cursor: pointer; 	padding: 0; 	background: transparent;  font-family: 'Noto Sans Korean',sans-serif; 	font-weight: normal; } 
button, [type="button"]{border:none;} 
legend { 	box-sizing: border-box; 	color: inherit; 	display: table; 	max-width: 100%; 	padding: 0; 	white-space: normal; } 
[type="checkbox"], [type="radio"] { 	box-sizing: border-box; 	padding: 0; } 


.offscreen{position: absolute;width:0px;height:0px;margin: -1px;padding: 0;border: 0;line-height: 0;font-size:0;white-space: normal;word-wrap: break-word;word-break: break-all;clip: rect(0,0,0,0);overflow:hidden;}

/* 심장판막 바로알기 캠페인 */

/* 공통 레이어아웃 */
section{padding: 60px 0 ;font-weight: 300; letter-spacing: -0.07em;}
.common-layoutt{width: 1260px; margin: 0 auto; position: relative;}
.event1{background: url("../img/event1_bg.jpg"); height: 900px;  width: 100%;}
.event2{background: url("../img/event2_bg.jpg") no-repeat center; height: 900px; width: 100%;}

h1{text-indent: -9999px; background: url("../img/h1_event_logo.png") no-repeat; width:1021px; height: 105px;display: block; margin: 0 auto }
.logo{ display: block; position: absolute; top:-40px; left:0px }
h1 p{text-indent: -9999px;}
.mission_no{ position: absolute; right: 30px; top: 190px;}
.mission_no li{ margin-left: 10px;;width: 30px; height: 30px; border-radius: 40px; display: inline-block;background: url("../img/event1_bg.jpg"); text-align: center; padding-top: 5px; font-size: 18px; font-weight: 500;color: rgba(197,164,164,0.6); }
.mission_no li.on{color: #fff; background:#756262}
.info-text{position: absolute; left: 0; top: 130px;; text-align: center; width: 100%; font-size: 16px; font-weight: 300; color:#756262 }
.info-text span{font-weight:500; color:#695353}

.mission_box{ background-color: rgba(197,164,164,0.3); width: 100%; height:585px; display: none; border-radius: 50px; margin: 60px auto 10px; position: relative;}
.mission_box::before{content: ""; display: block; width: 140px; height: 51px; position: absolute; top: -51px; right: 62px; background: url("../img/event1_bg_deco.png") no-repeat;}
.mission_box.active{display:block }
.mission1::after{content: ""; display: block; width: 550px; height: 700px; position: absolute; top: -25px; left: -30px; background: url("../img/event1_bg_deco2.png") no-repeat; opacity: }

.mission_text{ padding-top: 50px;}
.mission_text .step{ color: #664343; font-size: 20px; font-weight: 500; display: block; margin-bottom: 20px;}
.mission_text .step span{ color: #fff;font-size: 16px; font-weight: 300;display: inline-block; padding: 5px 10px 7px; margin-right: 10px;
    background: #756262; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, #917a7a , #756262); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #917a7a, #756262); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #917a7a, #756262); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #917a7a , #756262); /* Standard syntax */
}

.mission_text .question{background: #d70c25;  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2); border-radius: 10px; height: 65px;margin-bottom: 40px; padding: 8px; color: #fff; font-size:30px; font-weight: 400; line-height: 45px; text-align:left; letter-spacing: -3px}
.mission_text .question span{background: #a40115; color:#ffda5b; box-shadow: 5px 5px 0 #850010 ; border-radius: 8px; height: 45px; width: 45px; text-align: center; font-size: 36px; display: inline-block; font-weight: 800 ; margin-right:20px;}
.mission_text .add_text{background: #f1e6e9;color: #483030; line-height: 32px; display: block;font-size: 18px;padding: 10px 40px; border-radius: 15px;position: relative;}
.mission_text .add_text span{font-weight: 500; }
.mission_text .add_text .red{color:#e31d1b ;font-size: 30px;}
.mission_text .answer_list{margin-top:40px; }

.answer_list button{border:7px solid #f0e6e8;  box-shadow:5px 5px 0px rgba(0, 0, 0, 0.1) ; width: 175px; height: 175px; font-size: 22px; letter-spacing: -2px; border-radius: 100px; margin-right: 60px; background: #fff;color: #777777; vertical-align: top }
.answer_list button:last-child{margin-right: 0px;}
.answer_list button:hover, .mission_text .answer_list button:focus{border:7px solid #d70c25;color: #000;}


.info{ font-size: 20px; color:#d70c25 ; font-weight: 400; display: block; text-align: center}
.mission1 .info{padding-left: 495px }
.star{position: relative; top: 5px;}


/* mission 1 */
.info.active{ padding-left: 550px; text-align: left}
.mission1 .mission_text{width: 700px; margin-right: 60px; float: right;}
.mission1 .mission_text .add_text{font-size: 22px;padding: 20px 40px;}
.mission1 .mission_text .add_text::after {content: ""; display: block; position: absolute; left: -60px; top:40px;
width: 0px;height: 0px;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-right: 60px solid #f1e6e9;  }

.mission1 .mission_text .answer_list button{background: url("../img/event1_icon01.png") no-repeat 30px -90px #fff; font-size: 32px; font-weight: 500; letter-spacing: -4px;padding-bottom: 60px }
.mission1 .mission_text .answer_list button:hover, .mission1 .mission_text .answer_list button:focus{background-position:30px 80px}

.mission1 .mission_text .answer_list button:nth-child(2){background-position: -140px -90px }
.mission1 .mission_text .answer_list button:nth-child(3){background-position: -320px -90px}
.mission1 .mission_text .answer_list button:hover:nth-child(2),.mission1 .mission_text .answer_list button:focus:nth-child(2){background-position: -140px 80px }
.mission1 .mission_text .answer_list button:hover:nth-child(3),.mission1 .mission_text .answer_list button:focus:nth-child(3){background-position:  -320px 80px}



/* mission2 */
.mission2 {text-align: center}
.mission2  .mission_text{width: 600px;  margin: 50px auto 0; text-align: center}
.mission2 .answer_list{display: inline-block; position: relative; padding-top:60px;}
.mission2 .answer_list section{padding: 0 ; display: inline;text-align: center }
.answer_list div{border:7px solid #f0e6e8;  box-shadow:5px 5px 0px rgba(0, 0, 0, 0.1) ; width: 165px; height: 165px; font-size: 20px; line-height: 24px; letter-spacing: -2px; border-radius: 100px; margin-right: 20px; background: #fff;color: #777777;display: inline-block; vertical-align: top; cursor: pointer; }
.answer_list div p{width: 165px; height: 150px; display: table-cell; vertical-align: middle}
.answer_list div:last-child{margin-right: 0px;}
.answer_list div:hover,.answer_list div.active, .mission_text .answer_list div:focus{border:7px solid #d70c25;color: #000;}
.mission2 .answer_list section:first-child{margin-right: 80px;}
.mission2 .answer_list::before{content: ""; display: block; background: url("../img/event1_arrow.png") no-repeat; width:66px ; height:69px ; position: absolute; top:110px;left:550px;}

.answer_list #drop div{background: url(../img/event1_icon02.png) -3px -3px no-repeat}
.answer_list #drop .ans02{background-position: -183px -3px}
.answer_list #drop .ans03{background-position:-362px -3px }

/* mission3 */
.mission3 {text-align: center}
.mission3 .mission_text{width:850px;  margin: 50px auto 0; text-align: center;padding-top: 80px;}
.mission3 .answer_list{padding-top: 30px;}
.mission3 .answer_list button{ width: 230px; height: 230px; border-radius: 120px; font-size: 22px; line-height: 28px; padding-bottom: 100px; background: url(../img/event1_icon03.png) 0px 0px no-repeat  }
.mission3 .answer_list button:hover{background-image: url(../img/event1_icon03_on.png);}
.mission3 .answer_list button.ans02{background-position: -280px 0 }
.mission3 .answer_list button.ans03{background-position: -551px 0}
.mission3 .answer_list button.ans04{background-position: -830px 0}

/* mission4 */
.mission4 {background: url(../img/event1_bg_deco3.png) 37px 175px no-repeat  rgba(197,164,164,0.3);}
.mission4 .mission_text{padding-top: 30px;}
.mission4 .mission_text .question{height: 90px; text-align: center; background: url(../img/event1_bg_deco4.png) center top no-repeat transparent; color: #fff; box-shadow:none; margin-bottom:10px}
.mission4 .mission_text .add_text{line-height: 24px;text-align: center; width: 1150px; margin: 0 auto; background: transparent; color: #65373c}
.mission4 form{margin: 10px 0 0; display: block;width:600px;  margin-right: 50px;  float: right; border: 3px dotted #f1e6e9; border-radius: 30px; padding: 10px 20px 20px; background: rgba(255, 255, 255, 0.2)}
.mission4 form label{display: block; margin-bottom: 5px; vertical-align: bottom;}
.mission4 form label span{ color: #362e2e; font-size: 18px; font-weight: 300; width: 220px; text-align: right; padding-right: 20px; padding-bottom: 5px; display: inline-block; letter-spacing: -2px;vertical-align: bottom;}
.mission4 form input{border: 0; border-bottom: 1px solid rgba(76, 64, 64, 0.5); height: 30px; width:320px; background: transparent}
.mission4 form .checkbox_list{ margin-top: 25px;text-align: center;}
.mission4 form .checkbox{ padding-top: 0px; font-weight: 300 }
.mission4 form .checkbox_list label{display: inline; vertical-align: top; color:#555}
.mission4 form .checkbox_list label:first-child{margin-right: 20px;}
.mission4 form .checkbox input{width: 20px; height: 20px;vertical-align: top; position: relative; top: -5px;}
.mission4 form .checkbox a{vertical-align: top}
.mission4 form p.text{position: relative; top:0px; left: 220px; color: #9e4b55 }
.mission4 form button{ display: block; margin: 10px auto 0; background: #ffda5b; color: #333;  height: 50px; width: 300px; font-size: 24px;box-shadow:5px 5px 0px rgba(0, 0, 0, 0.1) ; font-weight: 500 }

.mission4 .ager{ display: none; position: absolute; bottom: 30px; right:80px; width: 550px;  background: rgba(53, 53, 68, 0.9); padding: 20px; padding-left: 60px; color:#fff; font-size: 14px; line-height: 22px; font-weight: 200; text-align: left; }
.mission4 .ager span{ display: block; padding: 3px 10px; background: rgba(255, 255, 255, 0.8); color: #333; width: 200px; margin: 10px auto ; text-align: center; font-weight: 500; cursor: pointer}

.mission4 .ager.active{display: block}



/* 레이어 팝업 */
.layout_wrap{display: none;width: 100%; height: 100%; position: fixed;top:0;left:0; background: rgba(53, 53, 68, 0.8); z-index: 100;}
.layout_wrap > div{display: none;width:890px; min-height: 500px; background-color: #fff;  position: fixed; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%) ; text-align: center;-webkit-transform: translateY(-50%) translateX(-50%) ; z-index: 10000; -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);	box-shadow: 5px 5px 5px rgba(68,68,68,0.6); ;}
.layout_wrap.active, .layout_wrap > div.active{display: block;}

.layout_wrap .yes{background: url("../img/event1_layerbg1.png") top  no-repeat #ffda5b}
.layout_wrap .yes .tit{color:#fff; font-size: 36px; margin-top:65px;}
.layout_wrap .yes .tit span{font-weight: 500}

.layout_wrap .no{background: url("../img/event1_layerbg2.png") top no-repeat #ffda5b}
.layout_wrap .no p{ font-size: 24px; line-height: 40px;letter-spacing: -2px; padding-top: 250px;}
.layout_wrap .no p span{display: block; font-size: 48px; letter-spacing: -5px}
.layout_wrap .button{position: absolute; bottom: 60px; left:0px; width: 100%; }
.layout_wrap button{ border: 0; background: #333333; color: #e0e0e0; width: 300px; height: 60px; font-size: 24px; padding-left: 30px; text-align: center; letter-spacing: -2px; margin: 0 auto ; position: relative; padding-right:70px;}
.layout_wrap button:hover{ background: #000; color: #fff;}
.layout_wrap button::after{content: ""; display: inline-block; width:37px ; height:37px; background: url("../img/event1_button.png") no-repeat; position: absolute; top:12px; right: 20px;}
.layout_wrap .yes button::after{background-position: -37px 0}
.layout_wrap .yes .button span{font-size: 16px; display: block; letter-spacing: -1px; position: absolute; bottom: -25px; color:#d70c25; text-align: center ; width: 100%;}
.layout_wrap .text{color: #333333; font-size: 20px; line-height: 28px; padding-top: 80px;display: block;}
.layout_wrap .text span{font-weight: 500}

/* 미션1정답 */
.layout_wrap .no1 .text::after{content: ""; display: block; width: 506px; height: 110px; background: url("../img/event1_layerbg3.png") no-repeat; margin: 0 auto;}

/* 미션2정답 */
.layout_wrap .no2 .text span{ margin-bottom: 10px;display: block;}
.layout_wrap .no2 .text p{background: rgba(0, 0, 0, 0.1); width: 400px; margin: 0 auto; padding: 20px; border-radius: 15px;}

/* 미션3정답 */
.layout_wrap .no3{height: 550px;}
.layout_wrap .no3 img{display: block; margin: 50px auto 10px; }



/* 정보제공 */
.event2{padding: 100px 0 }
.tab_list{height: 100px; width: 100%;  }
.tab_list button{display: block ;width: 620px; background: #9e4b55; border-radius: 30px 30px 0 0; color: #c8a2a6; font-size: 30px; font-weight: 500;height: 100px;box-shadow:5px 5px 0px rgba(0, 0, 0, 0.1) ;z-index: 1; float: left;z-index: -1; }
.tab_list button.active{color: #fff;  background: url("../img/event2_tab_bg.jpg") #9e4b55;}
.tab_list button:hover{color: #fff; }
.tab_list button:first-child{margin-right: 20px;}
.tab_list button::before{content: ""; width:25px; height: 25px; display: inline-block; background: url(../img/event2_tab_icon01.png) -38px 0; margin-right: 10px;}
.tab_list button::after{content: ""; width:25px; height: 25px; display: inline-block; background: url(../img/event2_tab_icon01.png) -38px 0; margin-left: 10px;}
.tab_list button.active::before, .tab_list button.active::after, .tab_list button:hover::before, .tab_list button:hover::after{background-position: 0px 0 }
.tab_list button:nth-child(2).active::before, .tab_list button:nth-child(2).active::after, .tab_list button:hover:nth-child(2)::before, .tab_list button:hover:nth-child(2)::after{background-position: -77px 0 }

.tab_panel{display: none;height:600px; width: 100%; border-radius:  0 0 30px 30px; border:15px solid #86363f; box-shadow:5px 5px 0px rgba(0, 0, 0, 0.1) ; text-align: center; position: relative;}
.tab_panel.active{display: block}
.tab_panel h2{font-size:48px;font-family: 'NIXGONB-Vb'; font-weight: normal; letter-spacing: -4px; color: #d70c25; margin-top: 100px;}
.tab_panel .video{background: rgba(53, 53, 68, 0.9); position: absolute; top: 0; ; left: 0; width: 100%; height: 100%; display: none}
.tab_panel video{display: block; width: auto; height: 570px; margin: 0 auto }


#tab1{background: url(../img/event2_tab_bg2.jpg) center bottom no-repeat #ffd95c; }
#tab1 p{font-size: 28px; letter-spacing: -3px; color: #5e5843; position: relative; display: inline-block; line-height: 38px; margin-top: 50px; }
#tab1 p::before{content: "["; display: inline-block; color: #ccae49; font-size: 90px; position: absolute;top: 30px; left: -80px; font-weight: 500 }
#tab1 p::after{content: "]"; display: inline-block; color: #ccae49; font-size: 90px;  position: absolute;top: 30px; right: -80px;font-weight: 500 }
#tab1 a{display: block; color: #ccae49; width: 60px; margin: 45px auto;  cursor: pointer }
#tab1 img{ opacity: 0.2}
#tab1 img:hover{ opacity: 0.4}

#tab2 h2{color: #2391e3; text-align: right;padding-right: 150px; margin-top: 40px;}
#tab2 a{display: inline-block;  margin: 130px auto; cursor: pointer}
#tab2 img{ opacity: 0.5;}
#tab2 img:hover{opacity:0.8}
#tab2{background: url(../img/event2_tab_bg3.jpg) center no-repeat; }