@charset "utf-8";

.infograph_wrap {max-width:1140px; width:100%; margin:0 auto; padding:20px 20px 0; display:grid; column-gap:40px; }

.infograph_header {position: relative; grid-column: 1 / 3; grid-row: 1 / 2; width: 100%; display:flex; justify-content: space-between; border-bottom:1px solid #eee; margin-bottom:20px;}
.infograph_header a:hover {text-decoration:none;}
.infograph_header h3 {border-bottom:1px solid #ddd; height:50px; }
.infograph_header h3 span {font-size:32px; padding-bottom:10px; display:inline-block; border-bottom:1px solid #333; height:50px; letter-spacing:-1px;}

.infograph_header .search_wrap form {margin-left:auto; width:280px; height:40px; border-radius:40px; background-color:#fff; border:1px solid #ddd; font-size:1em; text-align:left; flex-direction:inherit;}
.infograph_header .search_wrap .photo_search_input { vertical-align:super; padding:5px 15px; width:calc(100% - 50px); height:40px; vertical-align:middle; }
.infograph_header .searchbox-input::placeholder {font-weight:400; font-size:0.888888em; color: #444;}
.infograph_header .search_wrap .btn_photoSearch { width:40px; height:40px; display:inline-block; background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Svzt.rgarjf.pbz%2S2024%2Srgarjf%2Svzntrf%2Sfrnepu.fit") no-repeat center center; background-size:25px 25px; outline: 0; line-height:0; cursor: pointer; vertical-align:middle; opacity:.8;}

/*
.search_wrap {display:inline-block; position:absolute; right:0; bottom:0; width:140px; height:40px; border-bottom:1px solid #222; display:table-cell; }
.search_wrap:hover {background-color:#e8f3fa;}
.search_wrap .photo_search_input { width:100px; height:38px; padding:5px 0 5px 10px; display:table-cell; vertical-align:middle; float:left; font-size:16px;}
.search_wrap .btn_photoSearch { width:38px; height:38px;}
.search_wrap .btn_photoSearch img {width:20px; height:20px;}
*/

.infograph_menu {color:#222; grid-column: 1 / 2; grid-row: 2 / 3; min-width:200px;}
.infograph_menu a {display:block; padding:13px 0;}
.infograph_menu .on > a {color:#d91b5d; text-decoration:underline; font-weight:600;}
.dropbtn {display:none;}
.dropdown-content {text-align:left;}
.infograph_menu a.on {color:#d91b5d; text-decoration:underline; font-weight:500;}
.infograph_menu a.on:hover {text-decoration:underline;}
.infograph_menu a:hover {color:#d91b5d; text-decoration:none;}

.infograph_list {grid-column: 2 / 3; grid-row: 2 /3;}
.infograph_list .list_count {font-size:20px; margin-bottom:20px;}
.infograph_list .list_count strong {color:#d91b5d;}
.infograph_list li {float:left; width:32%; margin-left:2%; text-align:center; padding-bottom:20px;}
.infograph_list li:nth-child(3n+1) {margin-left:0;}
.infograph_list .thumb {width:100%; height:0; padding-bottom:55%; overflow:hidden; border:1px solid rgba(0,0,0,0.1); border-radius:8px; }
.infograph_list .thumb img {width:100%; height:auto;}
.infograph_list dt {font-size:16px; margin:5px 0 0; line-height:1.4em; height:2.8em; overflow:hidden; letter-spacing:-0.01em; font-weight:500;}
.infograph_list dd {font-size:14px; color:#aaa; line-height:1em;}
.infograph_list a:hover dt {text-decoration:underline;}

/* 페이지네이션 영역 */
.pagination_wrap {width:100%;}
.paginate { width:100%; display:flex; justify-content: center;  margin-top:40px; column-gap:10px; font-size:0.83em;}
.paginate a { display: inline-block; min-width:35px; height:35px; text-align:center; border: 1px solid #ddd; color:#777; background-color: #fff; align-content:center; line-height:1em; padding:8px;}
.paginate a:hover {text-decoration:none; background:#ddd; color:#222;}
.paginate .on { border: 1px solid #ddd; background-color:#444; color: #fff; }
.paginate a img {height:12px; opacity:.8;}
.paginate a:first-child img {transform: rotate(180deg);}

.infograph_view {grid-column: 2 / 3; grid-row: 2 /3;}
.infograph_view li {position:relative;}
.infograph_view .summary_wrap {padding-bottom:40px; border-bottom:1px solid rgba(0,0,0,0.1); }
.infograph_view .summary_wrap .thumb {display:inline-block; width:300px; height:167px; position:absolute; left:0; top:0; border:1px solid rgba(255,255,255,1); outline:1px solid rgba(0,0,0,0.1); overflow:hidden; border-radius:8px;}
.infograph_view .summary_wrap .thumb img {width:100%; height:auto;}
.infograph_view .summary_wrap .info {display:block; padding-left:320px;}
.infograph_view .summary_wrap .info h4 {font-size:26px; margin-bottom:8px;}
.infograph_view .summary_wrap .text span {display:inline-block; margin-right:15px; margin-bottom:4px; color:#444; font-size:15px;}
.infograph_view .summary_wrap .text span:before {content:'|'; opacity:0.5; margin-right:15px; font-weight:100;}
.infograph_view .summary_wrap .text span a {color:cornflowerblue; text-decoration:underline;}
.infograph_view .summary_wrap .text span:last-child {width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top:2px;}
.infograph_view .summary_wrap .text span:last-child::before {content:''; margin:0;}
.infograph_view .summary_wrap .text span:first-child::before {content:''; margin:0;}
.infograph_view .btn_wrap {margin-top:10px;}
.infograph_view .btn_wrap a {display:inline-block; font-size:18px; background:#d91b5c; color:#fff; padding:15px 50px 15px 40px; border-radius:5px; line-height:1em;}
.infograph_view .btn_wrap a:hover {text-decoration:none; background:#bf1b52;}
.infograph_view .btn_wrap i {display:inline-block; vertical-align:middle; margin:0 5px 5px 0;}
.infograph_view .btn_wrap i img {width:20px; height:auto;}
.infograph_view .keyword_wrap {font-size:16px; border-bottom:1px solid rgba(0,0,0,0.1); padding:20px 0;}
.infograph_view .keyword_wrap .title {position:absolute; left:0; top:20px; width:100px; color:#d91b5c; padding:4px 0; font-weight:500;}
.infograph_view .keyword_wrap .keyword {display:block; padding-left:100px;}
.infograph_view .keyword_wrap .keyword a {display:inline-block; padding:4px 10px; margin-right:15px; color:#444;}
.infograph_view .keyword_wrap .keyword a:hover {color:#000; text-decoration:none; background:rgba(0,0,0,0.06); border-radius:5px; }
.infograph_view .news {color:#444; line-height:1.5em; font-size:17px; padding-top:40px;}
.infograph_view .news strong {display:block; font-size:22px; line-height:1.5em; font-weight:500; margin-bottom:30px; color:#000;}
.infograph_view .news a {font-size:18px; display:inline-block; margin-top:40px; color:#d91b5c; text-decoration:underline;}

.infograph_view .latest {margin:60px 0 40px; border-top:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); padding:20px 0;}
.infograph_view .latest strong {display:block; font-weight:400; font-size:18px; margin-bottom:10px;}
.infograph_view .latest li {float:left; width:32%; margin-left:2%; text-align:center; }
.infograph_view .latest li:nth-child(3n+1) {margin-left:0;}
.infograph_view .latest .thumb {width:100%; height:0; padding-bottom:55%; overflow:hidden; border:1px solid rgba(0,0,0,0.08); border-radius:8px;}
.infograph_view .latest .thumb img {width:100%; height:auto;}
.infograph_view .latest dt {font-size:16px; margin:5px 0 0; line-height:1.4em; height:2.8em; overflow:hidden; letter-spacing:-0.01em; font-weight:500;}
.infograph_view .latest a:hover dt {text-decoration:underline;}
.infograph_view .btn_list {display: inline-block; font-size:18px; background-color:#555; color: #fff; padding: 15px 50px; border: 1px solid rgba(0,0,0,0.1); border-radius:5px;}
.infograph_view .btn_list:hover {background-color:#444; text-decoration:none;}
.infograph_view > ul > li:last-child {text-align:center; margin-bottom:40px;}

@media screen and (max-width : 1100px) {

	.infograph_menu dl {display:none;}	
	.infograph_menu .dropdown {display:block;}
	.infograph_list li {width:49%;}
	.infograph_list li:nth-child(3n+1) { margin-left:2%;}
	.infograph_list li:nth-child(2n+1) { margin-left:0;}
	.infograph_view .summary_wrap .thumb {width:230px; height:128px;}
	.infograph_view .summary_wrap .info {padding-left:250px;}

}

@media screen and (max-width: 840px) {
  .infograph_wrap {display:block;}
  
	.infograph_view li {text-align:center;}
	.infograph_view .summary_wrap .thumb {position:relative; width:auto; height:auto; min-width:270px;}
	.infograph_view .summary_wrap .info {padding:0; margin-top:15px;}
	.infograph_view .keyword_wrap .title {position:inherit; top:0; margin-bottom:10px; width:100%;}
	.infograph_view .keyword_wrap .keyword {padding:0;}
	.infograph_view .latest li {width:49%;}
	.infograph_view .latest li:last-child {display:none;}

  .dropbtn { display:block; width:100%; background:linear-gradient(to top, #eee, #fff); color:#222; padding:12px; border-radius:10px; font-weight:500; border:1px solid rgba(0,0,0,0.2);}
  .dropbtn i img {transform: rotate(90deg); width:8px;  margin-top: -4px;  margin-left:8px;}
	.dropdown { position: relative; width:100%; margin-bottom:20px; }
	.dropdown-content { display:none; position: absolute; top:48px; background-color: #fff; min-width: 160px; overflow: auto; box-shadow: 0px 4px 4px rgba(0,0,0,0.1);   z-index: 1; width:100%; border:1px solid rgba(0,0,0,0.1); border-radius:10px; border-top:none;}
	.dropdown-content a { color: black; padding:13px; text-decoration: none; display: block; text-align:center;}
	.dropdown-content .on {color:#d91b5c; text-decoration:underline!important;}
	.dropdown a:hover {background:#fafafa;}
	.show {display: block;}
}

@media screen and (max-width: 600px) {
  .infograph_header {display:block; border-bottom:none;}
  .infograph_list li {width:100%; margin-left:0;}
	.infograph_list li:nth-child(3n+1) { margin-left:0;}
  .infograph_header .search_wrap form {width:100%; margin:20px 0;}
}