/****** PC용 CSS *****/
/*** 2024 연중기획 ***/
/*공통*/
.cfixed:after, .container:after{display:block; content:""; clear:both;}
body{background:url(../../images/special/2024/bg.jpg)top center; background-size:cover; background-attachment: fixed;}
.logo{position:absolute; top:40px; left:50px;}
.menu{width:600px; margin:0px auto 0 auto;}
.menu li{float:left; font-size:15px; font-weight:bold; margin-right:10px; letter-spacing: -1px;}
.menu li a{color: #2c4f73; padding: 3px 12px 4px 12px;}
.menu li a:hover{text-decoration:none; background:#e64880; color:#fff;  border-radius: 15px;}
.menu li.on a{background:#e64880; color:#fff; border-radius: 15px;}
.menu li.on a:hover{text-decoration:none;}
.menu li:last-child{margin-right:0;}
.visual.mobile{display: none;}

/*인트로*/
#intro .visual{width:626px; margin:190px auto 0 auto;}
#intro .list{width:958px; margin:50px auto 50px auto; position:relative;}
#intro .list.mobile{display: none;}
#intro .list li{position: relative; float:left;}
#intro .list.web li:nth-child(2){margin-left: -14px;}
#intro .list.web li:nth-child(3){margin-left: 16px;}
#intro .list.web li:last-child{margin-left: -14px;}

/*메인*/
#main .visual{width:518px; margin:58px auto 0 auto;}
#main .content{width:1075px; margin:25px auto 100px auto;}
#main .news_list .list_box{float:left; margin-left:9px; margin-right:9px; margin-bottom:18px; width:197px;  background:#fff; border-radius:10px;}
/*#main .news_list .list_box .l_img img{border-radius:10px 10px 0 0; max-width: 197px;}*/
#main .news_list .list_box .l_img img{border-radius:10px 10px 0 0; width: 197px; height: 127px;}
#main .news_list .list_box .l_txt{width:197px; padding:18px 15px; box-sizing: border-box;}
#main .news_list .list_box .title{margin-bottom:6px; font-size:15px; font-weight:bold; letter-spacing:-0.05em; line-height:1.2em; height:37px;  word-wrap: break-word;}
#main .news_list .list_box .txt{font-size:13px; line-height:1.3em; margin-bottom:7px; height:50px; word-wrap: break-word; word-break:break-all;}
#main .news_list .list_box .txt a{color:#828282;}
#main .news_list .list_box .info{font-size:11px; font-weight:normal; color:#77b5e1; line-height:1.2em;}
#main .btn_more{float:left; width:calc(100% - 18px); margin-left:9px; height:45px; background:rgba(0, 0, 0, 0.3); border-radius:6px; cursor:pointer;}
#main .btn_more .icon_txt{display:block; width:72px; margin:11px auto;}
#main .btn_more .icon_txt .txt{display:inline-block; color:#fff; margin:6px 0 0 10px; font-size:12px;}
#main .btn_more:hover{
	background-image: -webkit-gradient(linear, left top, right bottom, from(#085ca7), to(#00a9cf));
    background-image: -moz-linear-gradient(left, #085ca7, #00a9cf);
    background-image: -o-linear-gradient(left, #085ca7, #00a9cf);
    background-image: -ms-linear-gradient(left, #085ca7, #00a9cf);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#085ca7', endColorstr='#00a9cf', GradientType=0);
}

/*뷰 페이지(컨텐츠 없을 경우)*/
.prepare{margin-top:100px;}
.prepare .comment{text-align:center; margin-bottom:30px;}
.prepare .comment p{ display:inline-block; font-size:24px; font-weight:bold; color:#fff; background:#e2355e; padding:5px 12px 6px 12px; border-radius: 8px;}
.prepare .list_box{margin:0 auto 18px auto; width:520px; height:127px; background:#fff; border-radius: 8px;}
.prepare .list_box img{float:left; border-radius: 8px 0 0 8px;}
.prepare .list_box .l_txt{float:left; width:280px; height:88px; padding:18px 15px;}
.prepare .list_box .title{margin-bottom:6px; font-size:18px; font-weight:bold; letter-spacing:-0.05em; line-height:1.2em;}
.prepare .list_box .txt{font-size:14px; line-height:1.4em; }
.prepare .list_box .txt a{color:#828282;}


/*기사뷰*/
#view .content{ max-width:1100px; margin:25px auto 100px auto; background:#fff; padding:50px; box-sizing:border-box; border-radius: 6px;}
#view .left_content{ float:left; width:65%; }
#view .right_content{ float:right; width:30%; }
#view .visual{width:518px; margin:42px auto 0 auto;}
#view .top_content h1{ width:100%; text-align:left; font-size:36px; font-weight:normal; line-height:1.3em; }
#view .top_content .container{ position:relative; max-width:1100px; }
#view .top_content .container .info{ margin-top:25px; text-align:left; float:left; }
#view .top_content .container .info .byline{ font-size:14px; line-height:1.6em; }
#view .top_content .container .info .byline .name{ font-size:16px; color:#00a6e9; }
#view .top_content .container .info .update{ margin-top:5px; font-size:14px; color:#828282; }
#view .top_content .container .share{ position:absolute; right:0; width:132px; margin:0 auto; margin-top:20px; }
#view .top_content .container .share li.mobile{display:none;}
#view .top_content .container .share li{float:left; margin-left:6px;}
#view .top_content .container .share li:first-child{margin-left:0;}
#view .top_content .container .share li img{ width:40px; }
#view .news_content{margin-top:40px;}
#view .news_content .container{ line-height:1.5em; width:100%; word-wrap: break-word; word-break: break-all; text-align: justify; }
#view .news_content .container h2{ margin-bottom:20px; font-size:22px; line-height:1.3em; letter-spacing:-0.02em; }
#view .news_content .container p{ font-size:17px; margin-bottom: 25px; line-height: 1.6em;}
#view .news_content .container p.font_blue{ color:#2a64d2; }
#view .news_content .container p.font_black{ color:#000; }
#view .news_content .container img{ max-width:650px; padding: 0 !important; }
#view .news_content .container p.news_img{ text-align:center; }
#view .news_content img.atc { float: right; margin-top: 20px; width:45px; }
#view .right_content h2 .more{ display:inline-block; float:right; margin-top:8px; font-size:14px; }
#view .left_content h2 .more{ display:inline-block; float:right; margin-top:8px; font-size:14px; }
#view .hot_news{ margin-top:5px; }
#view .hot_news h2{ font-size:20px; font-weight:bold; border-bottom:2px solid #000; padding-bottom:6px; }
#view .hot_news .news_list{ font-size:17px; }
#view .hot_news .news_list li{ padding:8px 0; border-bottom:1px solid #e0e0e0; }


/***** 모바일용 CSS *****/
@media (max-width:800px){
	/*공통*/
	body{background:url(../../images/special/2024/bg_m2.jpg)top center; background-size:contain; background-attachment: fixed;}
	.menu{width:calc(100% - 30px); /*width:290px;*/ margin-top:5px;}
	.menu li{float:left; font-size:15px; margin:8px 0 0 0; letter-spacing:-1.5px; width: 50%;}
    .menu li a{padding: 3px 8px 4px 8px;}
    .visual.web{display: none;}
    .visual.mobile{display: block; width: 100%;}
    .visual.mobile img{width: 100%;}
	/*인트로*/
    #intro{background:url(../../images/special/2024/bg_m.jpg)top center; background-size:cover; background-attachment: fixed; padding: 12px;}
    #intro .visual{margin-top: 50px; width: 90%;}
    #intro .list{width: 90%; margin-top: 30px;}
    #intro .list.web{display: none;}
    #intro .list.mobile{display: block;}
    #intro .list li{width: calc(50% - 5px); margin-right: 0; margin-bottom: 10px;}
    #intro .list li:nth-child(odd){margin-right: 10px;}
    #intro .list img{width: 100%;}
    #intro .list li .list_text dt a{font-size: 14px;} 
	/*메인*/
	#main .logo{display:none;}
	#main .visual{width:80%; margin:30px auto 0 auto;}
	#main .visual img{width:100%;}
	#main .content{width:calc(100% - 12px); margin-top: 20px; margin-bottom:30px;}
	#main .news_list{width: 380px; margin: 10px auto 0 auto;}
	#main .news_list .list_box{ width:180px; margin-left:5px; margin-right:5px; margin-bottom:10px;}
    #main .news_list .list_box .l_img img{width: 180px; height: 116px;}
	/*#main .news_list .list_box img{width:100%;}*/
	#main .news_list .list_box .l_txt{width:100%; padding:10px 10px; box-sizing:border-box;}
	#main .news_list .list_box .title{font-size:14px; height:32px; margin-bottom:5px;}
	#main .news_list .list_box .txt{font-size:12px; height:42px; margin-bottom:4px; line-height:1.2em;}
	#main .btn_more{width:calc(100% - 10px); margin-left:5px;}
	/*기사뷰*/
	#view .logo{display:none;}
	#view .content{margin:15px 0 0 0; padding:30px 20px; border-radius: 0;}
	#view .visual{width:80%; margin:30px auto 0 auto;}
	#view .visual img{width:100%;}
	#view .left_content{ float:left; width:100%; }
	#view .right_content{ float:right; width:100%; }
	#view .top_content h1{ padding-right:0; }
	#view .top_content .container h1{ width:100%; text-align:center; font-size:28px;  }
	#view .top_content .container .info{ margin-top:10px; text-align:center; float:none; }
	#view .top_content .container .share{ position:relative; right:0; margin-top:15px; }
	#view .top_content .container .share li.mobile{display:block;}
	#view .top_content .container .share li.web{display:none;}
	#view .news_content .container img{ width:100%; }
	#view .news_content img.atc{width:45px;}
	#view .news_content table{width:100%;}
	#view .news_content{ margin-top:30px; }
	#view .news_content .container{ width:100%; }
	#view .news_content .container h2{ font-size:18px; }
	#view .hot_news{ margin-top:30px; }
	/*뷰 페이지(컨텐츠 없을 경우)*/
	.prepare{margin-top:30px;}
	.prepare .comment{ margin:0 auto 20px auto;}
	.prepare .comment p{font-size:18px;}
	.prepare .list_box{ width:210px; height:auto;}
	.prepare .list_box img{ width:100%; border-radius: 8px 8px 0 0;}
	.prepare .list_box .title{margin-bottom:6px; font-size:16px; line-height:1.2em;}
	.prepare .list_box .l_txt{width:calc(100% - 30px); font-size:12px; line-height:1.4em; background:#fff; height:auto; border-radius: 0 0 8px 8px;}
}

/***** 모바일(390이하) *****/
@media (max-width:390px){
    /*메인*/
    #main .news_list{width: 360px;}
	#main .news_list .list_box{ width:170px;}
    #main .news_list .list_box .l_img img{width: 170px; height: 110px;}
}


/***** 모바일(360이하) *****/
@media (max-width:360px){
    /*메인*/
    #main .news_list{width: 340px;}
	#main .news_list .list_box{ width:160px;}
    #main .news_list .list_box .l_img img{width: 160px; height: 103px;}
}


/***** 모바일(320이하) *****/
@media (max-width:320px){
	/*공통*/
	.menu li{font-size:13px;}
    /*메인*/
    #main .news_list{width: 300px;}
	#main .news_list .list_box{ width:140px;}
    #main .news_list .list_box .l_img img{width: 140px; height: 90px;}
}


/***** 기사뷰 *****/

/*편집자주석*/
.editorsnote{border-left: 4px solid #000; padding-left:20px; margin: 20px 0; font-weight: bold; color: #000; font-size:16px;}
.editorsnote.align-left{float: left; margin: 20px 30px 20px 0; max-width: 300px;}
.editorsnote.align-right{float: right; margin: 20px 0 20px 30px; max-width: 300px;}
.text-align-left{text-align:left}
.text-align-right{text-align:right}
.text-align-center{text-align:center}

/*스타일*/
.bw_color_navy{color:#0021b0;}
.bw_color_blue{color:#0000ff;}
.bw_color_pink{color:#eb008a;}
.bw_box{display: table; padding: 5px 10px; background: #eee; border: 1px solid #ccc; color: #888;} /*박스(그레이)*/
.bw_box_blue{display: table; padding: 5px 10px; background: #f3f9fd; border: 1px solid #c0d5e6; color: #6689bf;} /*박스(블루)*/
.bw_box_pink{display: table; padding: 5px 10px; background: #fff1fa; border: 1px solid #f1cde6; color: #ce7ab0;} /*박스(핑크)*/
.bw_subtitle{font-weight: bold; color:#0021b0;}
.bw_subtitle1{font-weight: bold; color:#0021b0;}
.bw_subtitle2{font-weight: bold; color:#000000;}
.bw_topbottom_line{display: inline-block;width: 100%;padding: 10px 0 10px 0;margin: 20px 0 0 0;border-top: 1px solid #333;border-bottom: 1px solid #e6e6e6;font-size: 20px;letter-spacing:-1.5px;text-align: center;color: #333;line-height: 1.5;background: #fdfdfd;}
.bw_bold{font-weight: bold;} /*볼드*/
.bw_italic{font-style: italic;} /*이탤릭*/

/*인용구*/
.news_content .container p.bw_quote {padding: 0 20px; text-align: center; font-style: italic; font-size: 19px; font-family: 'Nanum Myeongjo', serif;}
.bw_quote:before, .bw_quote:after{display: block; width: 21px; height: 16px; content: ""; right: 0; left: 0; margin: auto;}
.bw_quote:before{background: url(/images/icon_quote_start.png) no-repeat; background-size: 21px; margin-bottom: 10px;}
.bw_quote:after{background: url(/images/icon_quote_end.png) no-repeat; background-size: 21px; margin-top: 10px;}
.bw_text_first:first-letter{font-size: 42px; font-weight: bold; float: left; margin: 15px 10px 10px 0;} /*첫번째 글자 크게*/

/*꺽쇄글박스*/
.additional_box {position: relative; padding: 10px 15px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgb(224,224,224);}
.additional_box::before, .additional_box::after {position: absolute; content: ''; width: 20px; height: 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.additional_box::before {top: 0; left: 0; border-top: 5px solid rgb(224,224,224); border-left: 5px solid rgb(224,224,224);}
.additional_box::after {bottom: 0; right: 0; border-bottom: 5px solid rgb(224,224,224); border-right: 5px solid rgb(224,224,224);}

/*이미지, 캡션*/
figure{margin: 0; display: block; max-width: 700px;}
figure.img-align-center{margin: 20px auto;}
figure.img-align-left{float: left; max-width: 300px; margin: 0 15px 15px 0;}
figure.img-align-right{float: right; max-width: 300px; margin: 0 0 15px 15px;}
figure img{width: 100%;}
figure > figcaption{margin-top: 0; font-size: 14px;text-align: left;display: inline-block;width: 100%; max-width: 700px; color: #888;line-height: 1.5em; letter-spacing: -0.05em; background: #f2f2f2; padding: 10px 20px; box-sizing: border-box;}
.news_content .container figure > figcaption > p{font-size: 14px;}

/*본문*/
.new_editor p{margin-bottom: 25px;}

/* youtube 반응형 변환 */
.youtubeWrap { position: relative; width: 100%; padding-bottom: 56.25%; text-align:left; }
.youtubeWrap iframe { position: absolute; width:100%; height:100%;}

/*유튜브 동영상*/
.youtube-embed-wrapper{padding-top: 0 !important; margin-bottom: 30px;}

@media (max-width: 1200px){
    figure{width: 100% !important;}
}

/***** 모바일용 CSS *****/
@media (max-width:800px){
    figure.img-align-left{float: none; max-width: 100%; margin: 0 0 15px 0;}
    figure.img-align-right{float: none; max-width: 100%; margin: 0 0 15px 0;}
    .editorsnote.align-left{float: none; margin: 20px 0 20px 0; max-width: 100%;}
    .editorsnote.align-right{float: none; margin: 20px 0 20px 0; max-width: 100%;}

    /*인용구*/
    .news_content .container p.bw_quote {padding: 0;}
}