.historyRollArea {width:100%; overflow:hidden; margin-top:20px}
.historyRollArea .photoDiv {position:relative; width:686px; height:430px; float:left;}
.historyRollArea .photoDiv .photoRoll {position:relative; width:100%; height:100%; overflow:hidden;}
.historyRollArea .photoDiv .photoRoll ul {position:relative; height:100%}
.historyRollArea .photoDiv .photoRoll ul li {position:absolute; top:0; left:0; width:100%; height:100%}
.historyRollArea .photoDiv .photoRoll ul li img{width:100%}
.historyRollArea .photoDiv .photoRoll ul li .txt {margin-top:25px; width:576px; padding:18px 110px 17px 0; font-size:16px; color:#555; line-height:19px}
.historyRollArea .photoDiv .photoRoll ul li .txt span {font-size:14px; color:#777; display:inline-block}
.historyRollArea .photoDiv .btn {position:absolute; bottom:0; right:0}
.historyRollArea .photoDiv .btn a {display:inline-block; float:left}

.historyRollArea .thumDiv {position:relative; float:left; width:268px; height:430px; margin-left:26px}
.historyRollArea .thumDiv .thumList {position:relative; width:100%; height:351px; overflow:hidden}
.historyRollArea .thumDiv .thumList ul {position:relative; width:100%; height:351px}
.historyRollArea .thumDiv .thumList ul li {position:absolute; top:0; left:0; width:100%; height:351px}
.historyRollArea .thumDiv .thumList ul li a {position:relative; float:left; width:132px; margin-right:3px; margin-bottom:2px}
.historyRollArea .thumDiv .thumList ul li a img {width:100%}
.historyRollArea .thumDiv .thumList ul li a .on {position:absolute; top:0; left:0; width:100%; height:100%; background: url("/common/images/icon/tab_list_on_img.png") no-repeat 0 0; background-size:100%}
.historyRollArea .thumDiv .paging {width:100%; height:35px; padding-top:20px; position:absolute; bottom:0; left:0}
.historyRollArea .thumDiv .paging .btn_page {width:15px; height:15px; background:url("/common/images/btn/tablist_btn.png") no-repeat 0 0; margin:0 3px 3px}
.historyRollArea .thumDiv .paging .btn_page.on {background:url("/common/images/btn/tablist_btn_on.png") no-repeat 0 0}

/* 한진70년 게시판형식 */
.hisTit {font-size: 22px; font-weight: bold; color: #333; margin-top:35px}
.hisArea {overflow:hidden; margin-top:20px}
.hisArea .hisView {float:left; position:relative; width:490px; height:auto; margin-right:55px}
.hisArea .hisView > img {width:100%}
.hisArea .hisView .txt {width:490px; color:#333; padding:20px 0 0}
.hisArea .hisView .txt .tit {font-size:16px; font-weight:bold; margin-bottom:10px}
.hisArea .hisView .txt .date span {padding-left:19px; margin-left:17px; background:url("/common/images/icon/bar1x11.gif") no-repeat 0 50%}
.hisArea .hisView .btn {display:none}
.hisArea .hisView .btn .prev {position:absolute; left:0; top:40%; margin-top:-30px}
.hisArea .hisView .btn .next {position:absolute; right:0; top:40%; margin-top:-30px}

.hisArea .hisList {position:relative; float:left; width:435px; height:415px}
.hisArea .hisList .indicator {position:absolute; bottom:0; right:40px;width:355px; height:10px; text-align:center; z-index:2}
.hisArea .hisList .indicator button {width:10px; height:10px; vertical-align:top;}
.hisArea .hisList .rollList {position:relative; width:355px; height:415px; margin:0 auto; overflow:hidden}
.hisArea .hisList .rollList .roll {position:absolute; top:0; left:0; width:100%; height:400px;}
.hisArea .hisList .rollList .roll .list {display:block; width:170px; float:left; margin-right:15px; margin-bottom:15px}
.hisArea .hisList .rollList .roll .list .img {display:block; width:100%; height:114px; overflow:hidden;}
.hisArea .hisList .rollList .roll .list .img img {width:100%}
.hisArea .hisList .btn .prev {display:block; position:absolute; top:50%; left:0; margin-top:-8px}
.hisArea .hisList .btn .next {display:block; position:absolute; top:50%; right:0; margin-top:-8px}

@media all and (max-width:980px) {	
	.historyRollArea .photoDiv {float:none; margin:0 auto}
	.historyRollArea .photoDiv .photoRoll ul li .txt {width:85%; padding:18px 15% 17px 0; margin-top:0}
	.historyRollArea .photoDiv .btn {position:absolute; bottom:0; right:0}
	.historyRollArea .photoDiv .btn .nextBtn img {width:44px}
	.historyRollArea .photoDiv .btn .prevBtn img:first-child {width:45px}

	.historyRollArea .thumDiv {float:none; margin:20px auto 0; width:537px; height:230px}
	.historyRollArea .thumDiv .thumList {height:176px}
	.historyRollArea .thumDiv .thumList ul li {height:176px}

	.hisArea .hisView {float:none; margin:0 auto}
	.hisArea .hisView .btn {display:block}

	.hisArea .hisList {float:none; margin:30px auto 0; width:590px; height:274px}
	.hisArea .hisList .rollList {width:540px; height:244px;}
	.hisArea .hisList .rollList .roll {height:244px;}
	.hisArea .hisList .indicator {width:590px; right:0}
	.hisArea .hisList .btn .prev {top:44%}
	.hisArea .hisList .btn .next {top:44%}
}

@media all and (max-width:800px) {
	.historyTitle {margin-bottom:30px !important}
	.historyRollArea .photoDiv {width:100%}
	.historyRollArea .photoDiv .photoRoll ul li {height:auto}
	.historyRollArea .photoDiv .btn .nextBtn img {width:39px}
	.historyRollArea .photoDiv .btn .prevBtn img:first-child {width:40px}

	.hisArea .hisList {width:550px; height:260px}
	.hisArea .hisList .rollList {width:500px; height:244px;}
	.hisArea .hisList .rollList .roll .list {width:158px; margin-right:13px; margin-bottom:13px}
	.hisArea .hisList .rollList .roll .list .img {height:106px}
	.hisArea .hisList .indicator {width:550px; right:0}
	.hisArea .hisList .btn .prev {top:44%}
	.hisArea .hisList .btn .next {top:44%}
}

@media all and (max-width:600px) {
	.historyRollArea {margin-top:10px}
	.historyRollArea .photoDiv .photoRoll ul li .txt {width:79%; padding:12px 19% 13px 0; font-size:13px; line-height:16px}
	.historyRollArea .photoDiv .photoRoll ul li .txt span {font-size:12px; color:#777}
	.historyRollArea .photoDiv .btn {bottom:10px}
	.historyRollArea .photoDiv .btn .nextBtn img {width:29px}
	.historyRollArea .photoDiv .btn .prevBtn img:first-child {width:30px}

	.historyRollArea .thumDiv {float:none; margin:20px auto 0; width:268px; height:400px}
	.historyRollArea .thumDiv .thumList {height:351px}
	.historyRollArea .thumDiv .thumList ul li {height:351px}
	.historyRollArea .thumDiv .paging {padding-top:10px}
	
	.hisTit {font-size:17px; margin-top:25px}
	.hisArea {margin-top:15px}
	.hisArea .hisView {width:100%}
	.hisArea .hisView .txt {width:100%; padding:10px 0 0}
	.hisArea .hisView .txt .tit {font-size:13px; line-height:18px; margin-bottom:5px}
	.hisArea .hisView .txt .date {font-size:11px}
	.hisArea .hisView .btn .prev {top:50%; margin-top:-15px}
	.hisArea .hisView .btn .prev img {width:30px}
	.hisArea .hisView .btn .next {top:50%; margin-top:-15px}
	.hisArea .hisView .btn .next img {width:30px}

	.hisArea .hisList {margin:20px auto 0; width:280px; height:284px}
	.hisArea .hisList .rollList {width:240px; height:100%;}
	.hisArea .hisList .rollList .roll {height:255px}
	.hisArea .hisList .rollList .roll .list {width:115px; margin-right:10px; margin-bottom:10px}
	.hisArea .hisList .rollList .roll .list .img {height:77px}
	.hisArea .hisList .indicator {width:100%;}
	.hisArea .hisList .btn .prev {top:44%; left:0}
	.hisArea .hisList .btn .next {top:44%; right:0}
}