/* 2018. 금연이슈리포트 웹진_반응형,  한국건강증진개발원  */
 

 /*  
	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:-100px;}
					.submenu2{left:-40px;}
					.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:700px){
				.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:600px){
				.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:13px;}
        		.previous{width:18%;}
				.prevBt{font-size:10px;}
				.prevDropdown>li>a{font-size:10px;}
			}
			@media all and (max-width:550px){
				.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:11px;}
				.previous{width:18%;}
				.prevBt{font-size:8px;}
				.prevDropdown>li>a{font-size:8px;}
			}
			@media all and (max-width:450px){
				.mob_gnb_wrap>li>div>a{font-size:15px;text-indent: 0px;}
				.text_size_03{font-size:10px;}
			}
			@media all and (max-width:400px){
				.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;}
			}

	.top_go_1{position:fixed; width:37px; height:124px; z-index:50; top:350px; left:50%; margin-left:471px;}
	.top_go_2{position:fixed; width:37px; height:53px; z-index:50; top:480px; left:50%; margin-left:471px;}
	.top_go_3{position:fixed; width:37px; height:53px; z-index:50; top:504px; left:50%; margin-left:471px;}
	.qselectbox{position:relative;width:100%;height:100%; }


/*  3. contents
--------------------------------------------------------------------------------------------------------*/

	/* wrap */
	.wrap		{width:100%; position:relative; max-width: 942px; margin: auto; background-color: white;overflow:hidden;}
	.wrap_menu	{width: 100%; height: 100px;position:relative;z-index: 10; }


	/*display option */
	.view_mobile, .view_tablet {display:none }
	.view_web {display: block;}


  	/* main border  */
	.col_cnt_wrap, .cnt_wrap {border:1px solid silver;}
  
	
	/* index main option */
	.wrap_index {position:relative;z-index:7;}
	.col_index_top {width: 100%: height: auto; margin-bottom: 15px; } /* index main banner (title & pdf) */
	.col_a, .col_b, .col_c, .col_d {width:100%; max-width:942px;  height: auto; display: flex; align-items: center;  position:relative; } /* index main title */
	.col_1_left  {width:67%;max-width: 630px;  height: auto; float:left; position:relative ; text-align: left;} /* title img position */
	.col_1_right {width:67%;max-width: 630px;  height: auto; float:left; position:relative ; text-align: right;} /* title img position */
	.col_2 	 	 {width:33%;max-width: 310px;  height: auto; float:left; position:relative } /* title text positon */
 
	/* 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 img 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: break-all;  
					line-height:30px; 	 /* 행간, 줄간격 */
					letter-spacing: 0px; /* 자간, 글자간의 가격 */
					word-spacing: 3px;   /* 자간, 단어 사이의 간격 */ }
	.cnt_bar {height: 20px;} /* head area */
	.cnt_bar hr {width: 95%; border-top: 1px solid silver }
	.cnt_body {margin-top:30px; padding: 0px 25px 0px 25px; }
	.cnt_body p  {	text-align:justify; word-break: break-all;
					line-height:30px; 	 /* 행간, 줄간격 */
					letter-spacing: 0px; /* 자간, 글자간의 가격 */
					word-spacing: 3px;   /* 자간, 단어 사이의 간격 */ }
 	.cnt_body_img { } /* img로만 구성된 페이지, TEXT정의 없음 */

	@media screen and (max-width:600px) {
		.view_mobile {display: block;}
		.cnt_head_inner_sub {margin-top: 30px; margin-bottom: 30px; padding: 0 15px 0 15px;}  /* head sub_title */
		.cnt_head .cnt_head_inner_sub p {
								text-align:justify; word-break: break-all;  
								line-height:30px; 	 /* 행간, 줄간격 */
								letter-spacing: 0px; /* 자간, 글자간의 가격 */
								word-spacing: 3px;   /* 자간, 단어 사이의 간격 */ } 			
	}	 

	/* cnt_14 참고문헌 */
	.cnt_14_img_01  {margin-bottom: 10px; }
	.cnt_14 		{}
	.cnt_14_box 	{margin-bottom: 40px; border-radius: 70px 10px 70px 10px; 
					border: 3px #B2B2B2 solid; padding: 20px; word-break:break-all;}
	.cnt_14_box p 	{text-align: left ;
					line-height: 20px; 	 /* 행간, 줄간격 */
					letter-spacing: 0px; /* 자간, 글자간의 간격 */
					word-spacing: 0px;   /* 자간, 단어 사이의 간격 */ }
	.cnt_14_box02	{width: 95%; margin: auto; padding: 10px}
	.cnt_14_box02_inner_left h4  {text-align: center; padding-bottom: 10px; }
	.cnt_14_box02_inner_left 	 {width: 25%; float: left; text-align: center; padding-left: 5px;}
	.cnt_14_box02_inner_right_01 {width: 70%; margin-left: 10px; float: left; margin-top: 5px}
	.cnt_14_box02_inner_right_02 {width: 70%; margin-left: 10px; float: left; margin-top: 5px;}
 
 
	@media screen and (min-width:600px) and (max-width:900px) {
		/*display option */
		.view_web, .view_mobile {display: none;}
		.view_tablet  {display:block; } 

		 

		/* 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;}

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

		/* 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;}
	}