/* 
 2019. 금연이슈리포트 웹진 ,  한국건강증진개발원 
 update: 2020-06-13
*/


 /*
	1. common / body
--------------------------------------------------------------------------------------------------------*/
	@import url('layout.css');


	/* Typography */
	body {font-family: '나눔고딕', 'Nanum Gothic','Questrial','Helvetica Neue', sans-serif; background-color: white;  webkit-tap-highlight-color: #222;}
	
	a 	{text-decoration:none; color:#555; }
	img {width: 100%; height: auto; }
	.clear {clear:both;}
	.text-center { text-align: center;}
	.clearfix:after { /* fur Firefox, IE8, Opera, Safari, etc. */ content: "."; display: block; height: 0; clear: both; visibility: hidden; } * + html
	.clearfix { /* for IE7 */ display: inline-block; } * html .clearfix { /* for IE6 */ height: 1%; }
	/* For modern browsers */ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .clearfix { zoom:1; }
		

/*  2. top menu & app
--------------------------------------------------------------------------------------------------------*/

	/* top menu .Header */
		.header{position: relative; width:100%;max-width: 940px; height: 60px;text-align: left; background-image: url('../img/logo_bg.png');z-index:10;background-size:auto 100%;background-repeat: repeat-x}
		.topmenu{width:100%;height:100%;position:relative;}
			/* Logo */
			.logo{width:25%;height:100%;float:left;margin-top:4px;}
			.logo>a{width:100%;display:block;height:100%;}
			.logo>a>img{width:100%;}
			/* GNB */
			#gnb{width:58%; padding:0 2.5%;height:100%;text-align: center; float:left;}
			#gnb>ul{width:100%; height:100%;}
			#gnb>ul>li{float:left;height:100%;}
			#gnb>ul>li:nth-child(1){width:23%;padding:0 1%;}
			#gnb>ul>li:nth-child(2){width:38%;padding:0 1%;}
			#gnb>ul>li:nth-child(3){width:33%;padding:0 1%;}

			#gnb>ul>li>a{position:relative;display:block;width:100%;text-align: center;height:20px;padding-top:24px;padding-bottom:12px}
			#gnb>ul>li>a>span{position:absolute;text-align: center;display:block;}
					.mouseoff{color:#222;font-weight:bold;top:24px;left:0;width:100%;}
					.mouseon{color:#9a9a9a;font-weight:bold;top:24px;left:0;width:100%;}
					.mouseonindi{width:100%;height:4px;background:#cf0011;bottom:0;left:0;width:100%;}
					/* 회차마다 값 변경 */
					.submenu{bottom:-60px;height:12px;width:300px;font-size:14px;font-weight:700;padding:10px 0;color:#4b4b4b;text-align:center;white-space: nowrap;}
					.submenu1{left:-90px;}
					.submenu2{left:-50px;}
					.submenu3{left:-60px;}
			/* Previous */
			.previous{width:12%;float:right;height:100%;}
			.previous>div{width:94%;margin:0 auto;height:auto;position:relative;}
			.previous>div>p{width:100%;height:auto;margin-top:14px;position:relative;}
				.prevBt{position:relative;display: block;background:#00B08D;border-radius:4px;padding:6px 0;width:100%;height:100%;text-align: center;line-height: 20px;color:#e7e7e7;font-weight: 600;font-size:14px;border:2px solid transparent;}
				.prevBt:hover{background:transparent;border:2px solid #2980B9;color:#2970b9;transition:all .4s;}
        		.prevBt>i{margin-left:4px;}
				.prevDropdown{background:#00B08D;border-radius:4px;padding:4px 2px;width:100%;position:absolute;top:100%;left:0;}
				.prevDropdown>li>a{display:block;text-align: center;padding:4px 0;color:#E6E7E8;transition:all .3s;}
				.prevDropdown>li>a:hover{background:#7dc0ec;transition:all .3s;}
        		.prevDropdown>li>a>i{margin-left:4px;transition:all .4s;}
				.prevDropdown>li>a>i.on{transform:rotate(-180deg);transition:all .4s;}
	/* Mobile Menu */
      		/* Mobile Menu Open Button */
			.mob_gnb_bt_wrap{display:none;position:absolute;top:0;left:0;width:24px;height:18px;padding:21px 18px ;}
			.mob_gnb_bt_wrap>p{width:100%;height:100%;position:relative;overflow: hidden;}
			.mob_gnb_bt_wrap>p>a{display: block;width:100%;height:100%;}
			.mob_gnb_bt_wrap>p>a>span{display: block;background: #222;width:100%;height:2px;position:absolute;left:0;transition:all .4s;}
			.mob_gnb_bt_wrap>p>a>span:nth-child(1){top:0;}
			.mob_gnb_bt_wrap>p>a>span:nth-child(1).on{top:50%;margin-top:-1px;transform:rotate(45deg);}
			.mob_gnb_bt_wrap>p>a>span:nth-child(2){top:50%;margin-top:-1px;}
			.mob_gnb_bt_wrap>p>a>span:nth-child(2).on{left:100%;}
			.mob_gnb_bt_wrap>p>a>span:nth-child(3){bottom:0;}
			.mob_gnb_bt_wrap>p>a>span:nth-child(3).on{bottom:50%;margin-bottom: :-1px;transform:rotate(-45deg);}
			.bkbg{width:100%;height:100%;background:#000;opacity: 0.65;position: fixed;top:60px;left:0;z-index:8;}

      		/* Mobile GNB */
			/* .mob_gnb{position:fixed;top:60px;left:-84%;width:84%;height:100%;background:#fff;z-index: 9;box-sizing:border-box;}*/
			.mob_gnb{position:absolute;top:60px;left:-93%;width:93%;height:100%;background:#fff;z-index: 9;box-sizing:border-box;}
				.mob_gnb_wrap{width:80%;height:auto;margin:0 auto;padding:16px 0;position:relative;}
				.mob_gnb_wrap>li{padding:8px 0;position: relative;}
				.mob_gnb_wrap>li>p{}
				.mob_gnb_wrap>li>p>a{display:block;color:#222;font-weight: bold;padding:8px 0;border-bottom:1px solid #9b9b9b;}
				.mob_gnb_wrap>li>p>a>i{position:absolute;top:16px;right:0;transition:all .4s;}
				.mob_gnb_wrap>li>p>a>i.on{transform:rotate(-180deg);transition:all .4s;}
				.mob_gnb_wrap>li>div{margin:0 auto;background:white;}
				.mob_gnb_wrap>li>div>a{display:block;width:100%;color:#484542;padding:8px 0;transition: all .4s;text-indent:14px;}
				.mob_gnb_wrap>li>div>a:hover{background:#00B08D;transition: all .4s;}

				.mob_gnb_scroll {overflow: scroll; height: 400px; -ms-overflow-style: none;}
				::-webkit-scrollbar {display:none;} 

			@media all and (max-width:900px){
				/*.header{position:fixed;top:0;left:0;}*/
				.header{position:absolute;top:0;left:0;}
				#gnb{display:none;}
				.previous{display:none;}
				.previous>div>p{margin-top:0px;}
				.logo{width:30%;margin:0 auto;float:none;transition:all .3s;}
				.logo>a{display:flex;align-items: center;}
				.mob_gnb_bt_wrap{display:block;}
			}
			@media all and (max-width:580px){
				.logo{width:45%;transition:all .3s;}
				.col_text_left_01{width:14px;height:14px;margin-top:6px;}
				.col_text_left_01>span{border-width:7px;}
				.col_text_right_01{width:14px;height:14px;margin-top:6px;}
				.col_text_right_01>span{border-width:7px;}
				.text_size_02{font-size:16px;}
				.text_size_03{font-size:14px;}
        		.previous{width:18%;}
				.prevBt{font-size:10px;}
				.prevDropdown>li>a{font-size:10px;}
			}
			@media all and (max-width:500px){
				.logo{width:45%;transition:all .3s;}
				.col_text_left_01{width:10px;height:10px;margin-top:6px;}
				.col_text_left_01>span{border-width:5px;}
				.col_text_right_01{width:14px;height:10px;margin-top:6px;}
				.col_text_right_01>span{border-width:5px;}
				.text_size_02{font-size:12px;}
				.text_size_03{font-size:10px;}
				.previous{width:18%;}
				.prevBt{font-size:8px;}
				.prevDropdown>li>a{font-size:8px;}
			}
			@media all and (max-width:420px){
				.mob_gnb_wrap>li>div>a{font-size:15px;text-indent: 0px;}
			}
			@media all and (max-width:390px){
				.logo{width:46%;transition:all .3s;}
				.col_text_left_01{width:10px;height:10px;margin-top:6px;}
				.col_text_left_01>span{border-width:5px;}
				.col_text_right_01{width:14px;height:10px;margin-top:6px;}
				.col_text_right_01>span{border-width:5px;}
       	 		.previous{width:24%;}
				.text_size_02{font-size:8px;line-height:1.6;}
				.text_size_03{font-size:8px;}
			}

	.topGo {}
		.top_go_1{position:fixed; width:51px; height:auto; z-index:50 ; top:376px; left:50%; margin-left:463px;}
		.top_go_2{position:fixed; width:37px; height:auto; z-index:50; top:480px; left:50%; margin-left:470px;}
		.top_go_3{position:fixed; width:37px; height:auto; z-index:50; top:504px; left:50%; margin-left:470px;}
		.qselectbox{position:relative;width:100%;height:100%; }
	


/*  3. contents
--------------------------------------------------------------------------------------------------------*/
		
		/*display option */
		.view_mobile, .view_tablet {display:none }
		.view_web {display: block;}
		
		/* wrap */
		/*.wrap		{width:100%;max-width: 900px; margin: auto; background-color: white;overflow:hidden;}*/
		.wrap		{position:relative; width: 100%; max-width: 940px; height: auto; margin: auto; background-color: white; overflow:hidden;}
		.wrap_menu	{width: 100%; height: 100px; position:relative; z-index: 10; }

		/* index_page main option */
		.wrap_index {position:relative;z-index:7;}
		.index_box_1 {width:100%; height: auto; margin-bottom: 15px; } /* 인덱스 메인타이틀(title & pdf) */
		.index_box_2 {border:0px solid silver;position:relative;} /* 인덱스 배열항목 */
			.index_box_2_inner {width:100%; max-width:940px; height: auto; position: relative; }
			.view_tablet img {width: 100%; max-width: 940px;}   
			.title_01 {width: 50%; position:relative;display:inline-block;}
			.title_02 {width: 49%; position:absolute; top:0; right:0;}
			.title_03 {width: 49%; position:absolute; bottom:0; right:0;}
			.title_01 img, .title_02 img, .title_03 img  {width: 100%; max-width:467px;}

		/* index_page img hover effects_opacity */
		.hover figure img {opacity: 1;	-webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
		.hover figure:hover img {opacity: .5;}
		.column {margin: 0; padding: 0;}
		.column:last-child {padding-bottom: 0px;}
		.column::after {content: '';clear: both; display: block;}
		.column div { position: relative; float: left;	width: 100%; height: 100%; margin: 0 0 0 0px; padding: 0;}
		.column div:first-child { margin-left: 0; }
		.column div span { position: absolute;	bottom: ; left: 0;	z-index: -1; display: block; width: 100%; margin: 0; 
		padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; 
		transition: .3s ease-in-out; opacity: 0;}
		figure { width: 100%; height: 100%; margin: 0; padding: 0; background: #fff; overflow: hidden;}
		figure:hover+span { bottom: -36px;	opacity: 1;}

		/* contents */
		.col_top  {width: 100%: height: auto; margin-bottom: 15px;} /* head title banner area  */

		.cnt_wrap {}  /* contents area */
		.cnt_head {}  /* contents_head(title text) area  */
			.cnt_head_img {}
			.cnt_head_inner {margin-top: 30px; margin-bottom: 30px; text-align: center; padding: 0 5% 0 5%;} /* main head text */
			.cnt_head_inner_sub {margin-top: 30px; margin-bottom: 30px; padding: 0 15% 0 15%;}  /* head sub_title */
			.cnt_head .cnt_head_inner_sub p {
							text-align:justify; 
							word-break: keep-all;
							line-height:30px; 	 /* 행간, 줄간격 */
							letter-spacing: 0px; /* 자간, 글자간의 가격 */
							word-spacing: 3px;   /* 자간, 단어 사이의 간격 */ 
							}
		.cnt_body {margin-top:30px; padding: 0px 25px 0px 25px;}
			.cnt_body p  {	
							text-align:justify ; 
							word-break: break-all; 
							word-wrap: break-word ;
							line-height:30px; 	 /* 행간, 줄간격 */
							letter-spacing: 0px; /* 자간, 글자간의 간격 */
							word-spacing: 3px;   /* 자간, 단어 사이의 간격 */ 
						}

			/*. 기존 본문 텍스트 
				cnt_body p  {text-align:justify; word-break: break-all;	line-height:30px; letter-spacing: 0px; word-spacing: 3px;}	*/	
						
	 		.cnt_body_img {} /* img로만 구성된 페이지, TEXT정의 없음 */
	 	
	 		.cnt_12_TextTitle     {width: 100%;}
	        .cnt_12_TextTitle p   {font-weight:bolder; font-size: 25px; color: #436BBC; padding-bottom:15px; text-align:center;}
	        .cnt_12_TextTable p   {font-weight:bolder; font-size: 16px; color: #436BBC; padding-bottom:10px; text-align:center; line-height: 20px;}
	        .cnt_12_TextTableImg  {text-align: center;}
	        .cnt_12_TextTableImg img {width:100%; max-width: 940px;}
	        .cnt_12_TextTableSub {font-size: 13px; padding-top: 10px; line-height: 17px}
	        .view_mobile img 	 {width:100%; max-width: 600px;}

		 	.cnt_13_TextTitle 	 {width: 100%;}	
			.cnt_13_TextTitle p  {font-weight:bolder; font-size: 25px; color: #744444; padding-bottom:15px; text-align:center}
			.cnt_13_TextTable p  {font-weight:bolder; font-size: 16px; color: #0A0401; padding-bottom:10px; text-align:center; line-height: 20px;}
			.cnt_13_TextTableBox	 {}
			.cnt_13_TextTableSub 	 {font-size: 13px; padding-top: 10px; line-height: 17px}
			.cnt_13_TextTableImg 	 {text-align:center}
			.cnt_13_TextTableImg img {width: 100%; max-width: 940px;}

		@media all and (max-width: 900px){
			.cnt_body p  {	
							text-align:justify; word-break: break-all;
							line-height:30px; 	 /* 행간, 줄간격 */
							letter-spacing: 0px; /* 자간, 글자간의 간격 */
							word-spacing: 3px;   /* 자간, 단어 사이의 간격 */ 
						}
			.cnt_12_TextTitle p   {text-align:center;}
	        .cnt_12_TextTable p   {text-align:center;}
	        .cnt_13_TextTitle p   {text-align:center;}
	        .cnt_13_TextTable p   {text-align:center;}			
		}	

		@media screen and (min-width:600px) and (max-width:900px) {
			/*display option */
			.view_web, .view_mobile {display: none;}
			.view_tablet  {display:block; } 

			/* wrap */
			.wrap		{width:100%; max-width: 900px; margin: auto; background-color: white; overflow:hidden;}

			/* index_pdf */
			.index_pdf {width: 100%; max-width: 900px; margin-top: 10px; border: 1px solid #4B4541;}
			.index_pdf_inner img {height:  50px; background-color: #4B4541; }
		}
	 
		@media screen and (max-width:600px) {
			/*display option */
			.view_tablet, .view_web {display:none}
			.view_mobile {display: block;}

			/* wrap */
			.wrap		{width: 100%; max-width: 600px; margin: auto; background-color: white; overflow:hidden;}
			.wrap_menu	{width: 100%; height: 100px; position:relative; z-index: 10; }
			
			/* index main option */
			.wrap_index {position:relative;z-index:7;}
			.index_box_1 {width: 100%: height: auto; margin-bottom: 15px; } /* 인덱스 메인타이틀(title & pdf) */
			.index_box_2 {border:0px solid silver;}  /* 인덱스 배열항목 */
				.index_box_2_inner {width:100%; max-width:600px;  height: auto;}  
				.title_01, .title_02, .title_03 {width: 100%; display: block; position: relative; margin-top: 5px;}
				.title_01 img, .title_02 img, .title_03 img {width: 100%; max-width:600px;}

			/* index_pdf */
			.index_pdf {width: 100%; max-width: 600px; margin-top: 10px; border: 1px solid #4B4541;}
			.index_pdf_inner img {width: 100%; max-width: 600px; background-color: #4B4541;}

			/* contents */
			.cnt_head_inner {margin-top: 30px; margin-bottom: 30px; text-align: center; padding: 0 10px 0 10px;} /* main head text */
			.cnt_head_inner_sub {margin-top: 30px; margin-bottom: 30px; padding: 0 15px 0 15px;}  /* head sub_title */
			.cnt_body {margin-top:30px; padding: 0px 15px 0px 15px;}
			
 			/* toGO 맨위로  */
			.topGoMobile {width: 100%; max-width: 600px; background-color:#484542; color: white; text-align:center; font-size: 15px; font-weight: bold }
			.topGoMobile p {padding:15px 0 15px 0;}
			.topGoMobile a {color: white}			
			.topGoMobile:hover {background-color: silver; color: #fff;}						
		}


/*  4. footer
--------------------------------------------------------------------------------------------------------*/
		.wrap_foot  {width:100%; max-width: 940px; padding: 1.5% 0; margin-top:10px; border:1px solid #484542; 
			font-size: 12px; line-height:20px; background-color:#484542; color: white;}
		 
		.foot_logo  {width: 38.5%; float: left; padding-left: 1%; text-align: center; padding: 9px 0 0 0;}
			.foot_logoImg_01 {width: 100%; max-width: 180px; display: inline-block;}
			.foot_logoImg_02 {width: 100%; max-width: 180px; display: inline-block; margin-left:-25px;}
		.foot_copyright {width: 61.5%;  float: left; margin-top: 10px; padding-bottom:10px;
 						text-align:justify; 
 						word-break:break-all;
						line-height:22px; 	 /* 행간, 줄간격 */
						letter-spacing: 0px; /* 자간, 글자간의 간격 */
						word-spacing: 0px;   /* 자간, 단어 사이의 간격 */ 
						}	

	@media screen and (min-width:600px) and (max-width:900px) {
		/* footer  */
 		.wrap_foot  {width: 100%; padding: 0; margin-top:10px;}
		.foot_logo  {width: 100%; float: none;  text-align: center;}
			.foot_logoImg_01 {width: 100%; max-width: 180px; display: inline-block;}
			.foot_logoImg_02 {width: 100%; max-width: 180px; display: inline-block;}
		.foot_copyright {width: 100%; float: none; margin-top: 5px; text-align:center;}	
	}

	@media screen and (max-width:600px) {
		/* footer  */
		.copyright350 {display: none;}
		.copyright600 {display: block;}
		.wrap_foot  {width: 100%; padding: 0; margin-top:10px;}
		.foot_logo  {width: 100%; float: none; text-align: center;}
			.foot_logoImg_01 {width: 100%; max-width: 160px; display: inline-block;}
			.foot_logoImg_02 {width: 100%; max-width: 160px; display: inline-block; margin-left:-25px;}
		.foot_copyright {width: 96%; float: none; margin-top: 3px; padding: 0 2% 0 2%; text-align:center; line-height:18px;}	
	}

	@media screen and (max-width:350px) {
		.copyright350 {display: block;}
		.copyright600 {display: none;}
		.foot_logoImg_01 {width: 100%; max-width: 160px;}
		.foot_logoImg_02 {width: 100%; max-width: 160px; margin-left:0px;}
	}