﻿/* 모비스역사관 2017-05-02 추가 */
.scrollWrap {position:relative;}
.historyDiv {position:relative; width:100%; height:100%; overflow:hidden; font-family:'NanumSquareR','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif;}
.historyDiv .tabMenu {position:fixed; top:181px; right:0; min-width:95px; z-index:100}
.historyDiv .tabMenu a {display:block; padding-left:13px; font-family:'NanumSquareR','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:14px; color:#c7c7c7; line-height:25px; margin-top:7px}
.historyDiv .tabMenu a:first-child {margin-top:0}
.historyDiv .tabMenu a.on {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; color:#fff; background:url('../images/history_tab_bg.png') no-repeat 0 50%;}
.historyDiv .tabMenu a span {display:block; padding-left:7px; }
.historyDiv .tabMenu a:first-child span {padding-left:20px}
.historyDiv .tabMenu a.on span {background:#004a8d}
.historyDiv .historyIntro {position:relative; overflow:hidden}
.historyDiv .historyIntro.intro {background:#000 url("../images/history_intro_bg.jpg") no-repeat 50% 50%; background-size:cover}
.historyDiv .historyIntro.intro .hoverBg {position:absolute; top:0; left:0; width:100%; height:100%; background:url("../images/history_intro_bg_on.jpg") no-repeat 50% 50%; background-size:cover; display:none}
.historyDiv .historyIntro.intro .scrollBt {position:absolute; bottom:30px; left:50%; display:block; margin-left:-16px}
.historyDiv .historyIntro.intro .txtDiv {position:absolute; top:50%; left:50%; width:940px; margin-top:-230px; margin-left:-470px}/* 2017-06-19 수정 */
.historyDiv .historyIntro.intro .txtDiv .titArea {float:left; width:460px; height:220px; margin-bottom:20px;}
.historyDiv .historyIntro.intro .txtDiv .titArea .txt {font-size:16px; color:#fff; line-height:26px; opacity:0.8; margin-top:30px}
.historyDiv .historyIntro.intro .txtDiv .btn {float:left; width:220px; margin-left:20px}
.historyDiv .historyIntro.intro .txtDiv .btn.btn1 {width:460px; margin-bottom:20px}
.historyDiv .historyIntro.intro .txtDiv .btn.btn2 {margin-left:0}
.historyDiv .historyIntro.intro .txtDiv .btn a {position:relative; display:block; padding:40px; height:138px; border:1px solid #a8a3a4; font-size:20px; color:#fff}
.historyDiv .historyIntro.intro .txtDiv .btn a > img {position:absolute; bottom:30px; left:40px}
.historyDiv .historyIntro.intro .txtDiv .btn a:hover, .historyDiv .historyIntro.intro .txtDiv .btn a:focus {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; border:1px solid #fff}
.historyDiv .historyIntro.intro .txtDiv .btn.btn1 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn1 a:focus {background:url("../images/intro_bt_img1.png") no-repeat 100% 100%;}
.historyDiv .historyIntro.intro .txtDiv .btn.btn2 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn2 a:focus {background:url("../images/intro_bt_img2.png") no-repeat 100% 100%;}
.historyDiv .historyIntro.intro .txtDiv .btn.btn3 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn3 a:focus {background:url("../images/intro_bt_img3.png") no-repeat 100% 100%;}
.historyDiv .historyIntro.intro .txtDiv .btn.btn4 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn4 a:focus {background:url("../images/intro_bt_img4.png") no-repeat 100% 100%;}
.historyDiv .historyIntro.intro .txtDiv .btn.btn5 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn5 a:focus {background:url("../images/intro_bt_img5.png") no-repeat 100% 100%;}
/* 2017-06-19 추가 */
.historyDiv .historyIntro.intro .txtDiv .share {position:absolute; top:-54px; right:0; width:154px; text-align:right; z-index:50}
.historyDiv .historyIntro.intro .txtDiv .share > a {display:inline-block}
.historyDiv .historyIntro.intro .txtDiv .share .sns {display:none; padding:10px 0 50px; background:#fff; overflow:hidden; margin-top:10px}
.historyDiv .historyIntro.intro .txtDiv .share .sns > a {float:left; display:block; width:100%; font-size:14px; color:#999; text-align:center; margin-top:40px}
.historyDiv .historyIntro.intro .txtDiv .share .sns > a:hover, .historyDiv .historyIntro.intro .txtDiv .share .sns > a:focus {color:#000}
.historyDiv .historyIntro.intro .txtDiv .share .sns > a > span {display:block; text-align:center; line-height:1; margin-top:10px}
/* // 2017-06-19 추가 */
.historyDiv .historyIntro.intro .downDiv {position:absolute; bottom:30px; left:0; width:100%; min-width:1200px; text-align:right}
.historyDiv .historyIntro.intro .downDiv > div {width:1200px; margin:0 auto}
.historyDiv .historyIntro.intro .downDiv > div > span {margin:0 20px}
.historyDiv .historyIntro.intro .downDiv a {display:inline-block; font-size:16px; color:#fff; padding-right:20px; background:url("../images/history_down_icon.png") no-repeat 100% 50%}
.historyDiv .historyIntro.intro .downDiv a span {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif;}
.historyDiv .history1 {background:url("../images/history_img_bg1.jpg") no-repeat 50% 50%; background-size:cover}
.historyDiv .history2 {background:url("../images/history_img_bg2.jpg") no-repeat 50% 50%; background-size:cover}
.historyDiv .history3 {background:url("../images/history_img_bg3.jpg") no-repeat 50% 50%; background-size:cover}
.historyDiv .history4 {background:url("../images/history_img_bg4.jpg") no-repeat 50% 50%; background-size:cover}
.historyDiv .history5 {background:url("../images/history_img_bg5.jpg") no-repeat 50% 50%; background-size:cover}
.historyDiv .historyIntro .txtDiv2 {position:absolute; top:50%; left:50%; width:940px; margin-top:; margin-left:-470px; text-align:center; color:#fff}
.historyDiv .historyIntro .txtDiv2 .tit {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:72px; margin-top:5px}
.historyDiv .historyIntro .txtDiv2 .bar {height:2px; margin:20px 0 30px}
.historyDiv .historyIntro .txtDiv2 .txt {font-size:18px; line-height:28px;}
.historyDiv .historyIntro .txtDiv2 .txt span {display:block; font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:20px; margin-bottom:5px}
.historyDiv .historyIntro .txtDiv2 .btn {text-align:center; margin-top:50px}
.historyDiv .historyIntro .txtDiv2 .btn a {display:inline-block; padding:0 42px; font-size:16px; color:#fff; line-height:43px; border:1px solid #989491}

.hTopBt {display:none; position:fixed; bottom:30px; left:50%; margin-left:-600px; width:1200px; text-align:right;}/* 2017-06-19 추가 */
.hTopBt > a {display:inline-block;}/* 2017-06-19 추가 */

.ui-loader {display:none}

/* 역사관헤더 */
#wrapper.historyWrap {position:relative; min-width:1024px !important; min-height:100%}
#wrapper.historyWrap.bg {background:#f3f3f3}
#wrapper.historyWrap #container {position:relative; width:100%; min-width:1024px; height:100%; overflow:hidden}
#wrapper.historyWrap #container #cBody {position:relative; width:100%; height:100%; overflow:hidden}
#header.historyH {padding:0; border:0 !important; height:80px; background:none}
#header.historyH.bg {background:#191919}
#header.historyH.absolute {position:absolute; top:0; left:0; z-index:99999}
#header.historyH.type2 {height:180px}/* 추억관 메뉴만 */
#header.historyH .headDiv {position:relative; padding:0 50px; margin:0 auto !important; width:auto !important; height:100%}
#header.historyH .headDiv h1 a {width:116px !important; height:43px; background:url("../images/history_logo.png") no-repeat 0 0; margin:20px 0 0;}
#header.historyH .headDiv h1 .subLogo {float:left; padding:0; margin:20px 0 0; background:none}
#header.historyH .headDiv h1 .subLogo a {width:204px !important; height:43px; background:url("../images/history_sublogo.png") no-repeat 0 0; margin:0}
#header.historyH .headDiv h1 .subLogo2 {float:left; display:inline-block; font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:20px; color:#fff; line-height:22px; margin:40px 0 0 15px}
#header.historyH .headDiv .snsBt {float:right; display:inline-block; margin-top:31px; margin-left:20px}/* 2017-06-19 추가 */
#header.historyH .headDiv .menuBt {float:right; display:inline-block; margin-top:33px}
#header.historyH .headDiv .allMenu {position:absolute; top:0; right:-240px; width:240px; height:99999px; padding-top:80px; background:url("../images/history_allmenu_bg.png") repeat 0 0; z-index:99999}
#header.historyH .headDiv .allMenu a {display:block; padding-bottom:3px; width:190px; font-size:21px; line-height:23px; text-align:right; margin-top:30px}/* 2017-06-23 수정 */
#header.historyH .headDiv .allMenu a.on {padding-bottom:1px; border-bottom:2px solid #fff; font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; color:#fff;}
#header.historyH .headDiv .allMenu a.close {position:absolute; top:32px; right:50px; width:16px; margin-top:0}

/* 2017-06-19 추가 */
#header.historyH .headDiv .snsMenu {position:absolute; top:0; right:-154px; width:154px; height:99999px; padding-top:80px; background:url("../images/history_allmenu_bg.png") repeat 0 0; z-index:99999}
#header.historyH .headDiv .snsMenu a {display:block; padding-bottom:3px; width:100%; font-size:14px; color:#999; line-height:26px; text-align:center; margin-top:30px}
#header.historyH .headDiv .snsMenu a span {display:block; line-height:1; margin-top:10px}
#header.historyH .headDiv .snsMenu a:hover, #header.historyH .headDiv .snsMenu a:focus {color:#fff}
#header.historyH .headDiv .snsMenu a.close {position:absolute; top:32px; right:50px; width:16px; margin-top:0}
/* // 2017-06-19 추가 */

.memoryMenu {width:100%; text-align:center; background:#191919}
.memoryMenu button {display:inline-block; padding:0 10px 20px; font-family:'NanumSquareR','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:24px; color:#999; line-height:33px; vertical-align:bottom; margin-left:10px}
.memoryMenu button:first-child {margin-left:0}
.memoryMenu button.is-checked {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:24px; color:#fff; background:url("../images/memory_btn_on.gif") repeat-x 0 100%}

.rightMenu {position:absolute; top:100px; right:0; min-width:95px; z-index:9999}/* 2017-06-23 수정 */
.rightMenu a {display:block; padding-left:13px; font-family:'NanumSquareR','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:14px; color:#c7c7c7; line-height:25px; margin-top:5px}
.rightMenu a:first-child {margin-top:0}
.rightMenu a.on {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; color:#fff; background:url('../images/history_tab_bg.png') no-repeat 0 50%;}
.rightMenu a span {display:block; padding-left:7px;}
.rightMenu a.on span {background:#004a8d}
.rightMenu .prev {margin:20px 0; padding-left:20px; width:auto}
.rightMenu .next {margin:20px 0; padding-left:20px; width:auto}

.rightMenu > div {max-height:550px; overflow-y:auto}

.historyTopBt {display:block; position:absolute; bottom:30px; right:45px;}
.rightMenu .historyTopBt {position:static; margin:0; padding-left:25px}

/* 역대 CEO관 */
.historyD {position:relative; width:100%; font-family:'NanumSquareR','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; overflow:hidden}
.historyD.ceoDiv .historyScrollWrap {position:relative; width:100%; min-width:1024px; height:100%; max-height:1000px}
.historyD.ceoDiv > ul {position:relative; width:1260px; padding-bottom:80px; margin:40px auto 0; overflow:hidden}
.historyD.ceoDiv > ul > li {float:left; padding:40px 0; width:380px; height:210px; margin:0 0 0 30px; overflow:hidden}
.historyD.ceoDiv > ul > li .pic {float:left; width:160px;}
.historyD.ceoDiv > ul > li .pic > img {width:100%}
.historyD.ceoDiv > ul > li .txtArea {float:left; margin-left:30px; padding-top:40px}
.historyD.ceoDiv > ul > li .txtArea .year {padding-bottom:18px; font-family:'NanumSquareR','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:16px; color:#454545; background:url("../images/bar30x2.gif") no-repeat 0 100%}
.historyD.ceoDiv > ul > li .txtArea .name {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:34px; color:#454545; margin-top:25px}
.historyD.ceoDiv > ul > li .txtArea .name span {display:block; font-size:18px; color:#454545; margin-bottom:10px}

/* 연대기관 */
.historyD.periodDiv .historyScrollWrap {position:relative; width:100%; min-width:1024px; height:100%; max-height:1000px; overflow:hidden}
.historyD.periodDiv .imgDimd {position:absolute; top:0; left:0; width:100%; height:100%; background:url("../images/period_dimd.png") repeat 0 0;}
.historyD.periodDiv .imgDimd2 {position:absolute; top:0; left:0; width:100%; height:100%; background:url("../images/period_dimd2.png") repeat 0 0; display:none}
.historyD.periodDiv .leftShadow {position:absolute; top:0; left:0; width:455px; height:100%; background:url("../images/left_shadow.png") repeat-y 0 0; }
.historyD.periodDiv .rightShadow {position:absolute; top:0; right:0; width:455px; height:100%; background:url("../images/right_shadow.png") repeat-y 0 0;}
.historyD.periodDiv .bottomShadow {position:fixed; bottom:0; left:0; width:100%; height:450px; background:url("../images/bottom_shadow.png") repeat-x 0 0;}

.historyD.periodDiv .main {position:relative; width:100%; height:100%; text-align:center; overflow:hidden}
.historyD.periodDiv .main > img {width:100%; height:auto}
.historyD.periodDiv .main .txtArea {position:absolute; bottom:210px; left:100px; max-width:850px; color:#fff; text-align:left; z-index:10}
.historyD.periodDiv .main .txtArea .year {font-family:'NanumSquareEB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:146px; line-height:1; letter-spacing:-7px; margin-left:-14px}
.historyD.periodDiv .main .txtArea .tit {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:30px; line-height:1.1; margin-top:30px;}
.historyD.periodDiv .main .txtArea .txt {font-size:18px; line-height:28px; margin-top:25px}
.historyD.periodDiv .rollArea {position:relative; width:100%; height:100%; text-align:center; overflow:hidden}
.historyD.periodDiv .rollArea > img {height:100%}
.historyD.periodDiv .rollArea .txtArea {position:absolute; bottom:210px; left:100px; max-width:850px; color:#fff; text-align:left; z-index:10}
.historyD.periodDiv .rollArea .txtArea .year {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:20px;}
.historyD.periodDiv .rollArea .txtArea .tit {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:50px; line-height:1.1; margin-top:15px;}
.historyD.periodDiv .rollArea .txtArea .txt {font-size:18px; line-height:28px; margin-top:35px}
.historyD.periodDiv .rollArea .videoDiv {position:absolute; bottom:210px; left:5%; width:87%; z-index:99}
.historyD.periodDiv .rollArea .videoDiv .video {float:left; position:relative; width:58%; padding-bottom:35%; margin-left:42%}
.historyD.periodDiv .rollArea .videoDiv .video video {width:780px}
.historyD.periodDiv .rollArea .videoDiv .video iframe {position:absolute; top:0; left:0; width:100%; height:100%}/* 2017-06-08 추가 */
.historyD.periodDiv .rollArea .videoDiv .videoTxt {position:absolute; bottom:0; left:0; display:table; vertical-align:bottom; width:40%; height:100%; color:#fff;}
.historyD.periodDiv .rollArea .videoDiv .videoTxt > div {display:table-cell; vertical-align:bottom}
.historyD.periodDiv .rollArea .videoDiv .videoTxt .videoYear {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:20px; text-align:left}
.historyD.periodDiv .rollArea .videoDiv .videoTxt .videoTit {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:50px; text-align:left; margin-top:15px}
.historyD.periodDiv .rollArea .videoDiv .videoTxt .caption {font-size:18px; line-height:27px; text-align:left; max-height:380px; overflow-y:auto; margin-top:25px}/* 2017-06-14 수정 */
.historyD.periodDiv .thumbList {position:absolute; bottom:0; left:0; padding-left:200px; width: -moz-calc(100% - 200px); width: -webkit-calc(100% - 200px); width: -o-calc(100% - 200px); width: calc(100% - 200px); height:130px; overflow:hidden; z-index:999}
.historyD.periodDiv .thumbList .yearMain {position:absolute; top:0; left:0; padding:25px 30px 0; width:140px; height:105px; font-size:16px; color:#fff; background:#000; z-index:100; cursor:pointer}
.historyD.periodDiv .thumbList .yearMain .year {font-family:'NanumSquareEB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:40px}/* 2017-06-26 수정 */
.historyD.periodDiv .thumbList .swiper-wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-ms-transition-property: -ms-transform;
	transition-property: transform;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box; 
	height:130px
}
.historyD.periodDiv .thumbList .swiper-wrapper .swiper-slide {position:relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; float:left; width:200px !important; height:130px; background:#ddd; cursor:pointer}
.historyD.periodDiv .thumbList .swiper-wrapper .swiper-slide > img {width:100%;}
.historyD.periodDiv .thumbList .swiper-wrapper .swiper-slide .videoIcon {display:block; position:absolute; top:50%; left:0; width:200px; height:40px; background:url("../images/period_video_icon.png") no-repeat 50% 50%; margin-top:-20px}
.historyD.periodDiv .thumbList .swiper-wrapper .swiper-slide .dimd {display:block; position:absolute; top:0; left:0; width:200px; height:130px; background:url("../images/period_thumbnail_bg.png") no-repeat 0 0;}
.historyD.periodDiv .thumbList .swiper-wrapper .swiper-slide .dimd:hover, .historyD.periodDiv .thumbList .swiper-wrapper .swiper-slide.on .dimd {background:url("../images/period_thumbnail_bg_over.png") no-repeat 0 0;}
.historyD.periodDiv .thumbList .thumbPrev {display:block; width:10px; height:19px; background:url("../images/period_thumb_prev.gif") no-repeat 0 0; position:absolute; bottom:20px; left:30px; z-index:110}
.historyD.periodDiv .thumbList .thumbNext {display:block; width:10px; height:19px; background:url("../images/period_thumb_next.gif") no-repeat 0 0; position:absolute; bottom:20px; left:70px; z-index:110}

/* 에피소드관 */
.historyD.episodeDiv .historyScrollWrap {position:relative; padding-top:80px; width:100%; min-width:1024px; height:100%; max-height:1000px}
.historyD.episodeDiv .historyScrollWrap:nth-child(odd) {background:#f3f3f3}
.historyD.episodeDiv .episodeD {position:relative; width:1340px; height:560px; margin:0 auto; overflow:hidden;}
.historyD.episodeDiv .epiPicDiv {position:relative; float:left; width:540px; overflow:hidden; margin-top:50px;}
.historyD.episodeDiv .epiPicDiv .epiNum {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:20px; color:#000}
.historyD.episodeDiv .epiPicDiv .pic {margin-top:10px}
.historyD.episodeDiv .epiPicDiv .pic > div {padding:0 21px 21px 0; width:440px; height:340px; background:url("../images/episode_img_bg.png") no-repeat 100% 100%}
.historyD.episodeDiv .epiPicDiv .pic img {width:100%; max-height:100%; box-shadow:4px 8px 11px #eee;}
.historyD.episodeDiv .epiTxtDiv {position:relative; float:right; width:800px; height:100%;}
.historyD.episodeDiv .epiTxtDiv .txtArea {position:relative; width:100%}
.historyD.episodeDiv .epiTxtDiv .txtArea .tit {position:relative; font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:30px; color:#000; padding-bottom:30px; background:url("../images/epsode_tit_icon.png") no-repeat 0 100%; margin-bottom:15px;}
.historyD.episodeDiv .epiTxtDiv .txtArea .txt {position:relative; font-size:18px; color:#454545; line-height:28px; max-height:480px; overflow-y:auto; -webkit-text-size-adjust: 100%}
.historyD.episodeDiv .nextEpiBtn {position:absolute; bottom:30px; left:0; width:100%; text-align:center;}
.historyD.episodeDiv .nextEpiBtn a {display:inline-block; font-size:14px; color:#454545; padding-bottom:25px; background:url("../images/episode_next_icon.png") no-repeat 50% 100%;}

/* 역대수상관 */
.awardMenu {padding:55px 0 0; text-align:center}
.awardMenu a {display:inline-block; padding-bottom:20px; font-family:'NanumSquareR','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; font-size:24px; color:#999; margin-left:60px}
.awardMenu a:first-child {margin-left:0}
.awardMenu a.on {font-family:'NanumSquareB','Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif; color:#000; background:url("../images/award_menu_on.gif") no-repeat 50% 100%;}
.awardDiv {text-align:center; padding-top:60px; padding-bottom:230px; background:url("../images/memory_bottom_icon.png") no-repeat; background-position:left 50% bottom 120px}
.awardDiv ul {width:1240px; margin:0 auto; overflow:hidden}
.awardDiv ul li {display:inline-block; float:left; width:295px; margin-right:20px;}
.awardDiv ul li:nth-child(4n) {margin-right:0}
.awardDiv ul li > a {display:block}
.awardDiv ul li .img img {width:100%}
.awardDiv ul li .txt {padding-top:20px; font-size:16px; color:#000; line-height:24px; text-align:center; min-height:100px; max-height:100px}

.eHisPopW.newHisPop {padding:0; opacity:1; background:none; max-width:980px; width:auto;}
.eHisPopW.newHisPop .eHisPopD .imgA img {width:auto; max-width:980px; height:600px; max-height:600px}
.eHisPopW.newHisPop .eHisD {font-family:"NanumSquareB", "Malgun Gothic", "맑은고딕", "dotum", "돋움", sans-serif; font-size:24px; color:#fff; text-align:center; line-height:34px}

/* 추억관 */
.memoryDiv {position:relative; width:auto; max-width:1260px; min-width:1024px; margin:0 auto; padding-top:10px; padding-bottom:270px; background:url("../images/memory_bottom_icon.png") no-repeat; background-position:left 50% bottom 120px}
.memoryDiv .grid-item {position:absolute; top:0; left:0; padding:10px; width:295px}
.memoryDiv .grid-item .img img {width:100%}
.memoryDiv .grid-item .txt {padding:34px 10px; font-size:18px; color:#000; text-align:center; line-height:28px; background:#fff}

.fontMG {font-family:"Malgun Gothic", "맑은고딕", "dotum", "돋움", sans-serif; line-height:1.1}

/* 연대기관 브라우저 높이값 770px보다 작을때 */
@media all and (max-height:770px) {
	.historyD.periodDiv .rollArea .videoDiv .video {width: 52%; padding-bottom: 26%;}
	.historyD.periodDiv .rollArea .videoDiv .videoTxt .caption {max-height:165px;}
}

@media all and (max-width:1350px) {
	.historyD.episodeDiv .episodeD {width:1280px;}
	.historyD.episodeDiv .epiPicDiv {width:auto}
}

@media all and (max-width:1280px) {
	.historyDiv .historyIntro.intro .downDiv {bottom:30px; left:auto; right:10px}
	.historyDiv .historyIntro.intro .downDiv > div {width:100%}

	.historyD.ceoDiv > ul {width:850px;}
	.awardDiv ul {width:96%; padding:0 2%; text-align:left}
	.awardDiv ul li {float:left; width: -moz-calc(33.3% - 20px); width: -webkit-calc(33.3% - 20px); width: -o-calc(33.3% - 20px); width: calc(33.3% - 20px); margin:0 10px}
	.awardDiv ul li:nth-child(4n) {margin:0 10px;}
	.historyD.episodeDiv .episodeD {width:1000px; padding:0 12px}
	.historyD.episodeDiv .epiPicDiv {width:30%; margin-right:3%}
	.historyD.episodeDiv .epiPicDiv .pic > div {padding: 0 5% 5% 0; width:95%; height:auto; background:url("../images/episode_img_bg.png") no-repeat 100% 100%; background-size:95% auto;}
	.historyD.episodeDiv .epiPicDiv .pic img {width:100%; box-shadow: 3px 3px 6px #eee;}
	.historyD.episodeDiv .epiTxtDiv {width:67%; float:left}
	.memoryDiv {max-width:945px; min-width:945px;}

	.hTopBt {display:none; position:fixed; bottom:30px; left:0; margin-left:0; width:100%; text-align:right;}/* 2017-06-19 추가 */
	.hTopBt > a {margin-right:3%}/* 2017-06-19 추가 */
}

@media all and (max-width:1024px) {
	.historyDiv .tabMenu {display:none}
}

/* 테블릿 가로 해상도 */
@media all and (max-width:981px) {
	.historyDiv .historyIntro.intro .downDiv > div > span {margin:0 15px}
	.historyDiv .historyIntro.intro .downDiv a {display:inline-block; font-size:14px; color:#fff; padding-right:15px; background:url("../images/history_down_icon.png") no-repeat 100% 50%; background-size:auto 12px}

	.historyDiv .historyIntro.intro .txtDiv {width:94%; padding:0 3%; left:0; margin-left:0}
	.historyDiv .historyIntro.intro .txtDiv .titArea {float:none; width:100%; height:auto}
	.historyDiv .historyIntro.intro .txtDiv .btn {width: -moz-calc(33.3% - 6.5px); width: -webkit-calc(33.3% - 6.5px); width: -o-calc(33.3% - 6.5px); width: calc(33.3% - 6.5px); margin:10px 0 0 10px;}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn1 {width: -moz-calc(50% - 5px); width: -webkit-calc(50% - 5px); width: -o-calc(50% - 5px); width: calc(50% - 5px); margin:0 0 0 0}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn2 {width: -moz-calc(50% - 5px); width: -webkit-calc(50% - 5px); width: -o-calc(50% - 5px); width: calc(50% - 5px); margin:0 0 0 10px}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn3 {margin-left:0}
	.historyDiv .historyIntro.intro .txtDiv .btn a {height:138px; padding:15px 30px}
	.historyDiv .historyIntro .txtDiv2 {width:94%; padding:0 3%; left:0; margin-left:0}

	/* 2017-06-19 추가 */
	.historyDiv .historyIntro.intro .txtDiv .share {top:186px; right:3%}
	.historyDiv .historyIntro.intro .txtDiv .share .sns {padding:0 25px 40px}
	/* // 2017-06-19 추가 */
}

/* 사이버감사실 해상도 */
@media all and (max-width:855px){
	
}

@media all and (max-width:758px){
	.historyDiv .historyIntro.intro .downDiv {display:none}/* 2017-06-19 수정 */
	
	.historyDiv .tabMenu {top:80px; right:0; min-width:70px}
	.historyDiv .tabMenu a {padding-left:6px; font-size:10px; line-height:20px; margin-top:4px}
	.historyDiv .tabMenu a.on {background:url('../images/history_tab_bg.png') no-repeat 0 50%; background-size:6px 20px}
	.historyDiv .tabMenu a span {padding-left:3px}
	.historyDiv .tabMenu a:first-child span {padding-left:15px}

	.historyDiv .historyIntro.intro .txtDiv .titArea .imgTxt img{height:105px}/* 2017-06-19 수정 */
	.historyDiv .historyIntro.intro .txtDiv .titArea .txt {font-size:14px; line-height:20px; margin-top:5%}
	.historyDiv .historyIntro.intro .txtDiv .btn {width: -moz-calc(33.3% - 2.6px); width: -webkit-calc(33.3% - 2.6px); width: -o-calc(33.3% - 2.6px); width: calc(33.3% - 2.6px); margin:4px 0 0 4px;}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn1 {width: -moz-calc(50% - 2px); width: -webkit-calc(50% - 2px); width: -o-calc(50% - 2px); width: calc(50% - 2px); margin:0 0 0 0}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn2 {width: -moz-calc(50% - 2px); width: -webkit-calc(50% - 2px); width: -o-calc(50% - 2px); width: calc(50% - 2px); margin:0 0 0 4px}
	.historyDiv .historyIntro.intro .txtDiv .btn a {font-size:13px; height:69px; padding:9px}
	.historyDiv .historyIntro.intro .txtDiv .btn a img {height:10px; bottom:10px; left:10px}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn1 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn1 a:focus {background:url("../images/intro_bt_img1.png") no-repeat 100% 100%; background-size:auto 80%}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn2 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn2 a:focus {background:url("../images/intro_bt_img2.png") no-repeat 100% 100%; background-size:auto 50%}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn3 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn3 a:focus {background:url("../images/intro_bt_img3.png") no-repeat 100% 100%; background-size:auto 60%}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn4 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn4 a:focus {background:url("../images/intro_bt_img4.png") no-repeat 100% 100%; background-size:auto 40%}
	.historyDiv .historyIntro.intro .txtDiv .btn.btn5 a:hover, .historyDiv .historyIntro.intro .txtDiv .btn.btn5 a:focus {background:url("../images/intro_bt_img5.png") no-repeat 100% 100%; background-size:auto 80%}
	.historyDiv .historyIntro.intro .scrollBt {bottom:15px}
	.historyDiv .historyIntro.intro .scrollBt img {width:20px}
	.historyDiv .historyIntro .txtDiv2 .imgTxt img {height:18px}
	.historyDiv .historyIntro .txtDiv2 .tit {font-size:35px}
	.historyDiv .historyIntro .txtDiv2 .bar {margin:10px 0 10px}
	.historyDiv .historyIntro .txtDiv2 .bar img {height:1px}
	.historyDiv .historyIntro .txtDiv2 .txt {font-size:14px; line-height:22px}
	.historyDiv .historyIntro .txtDiv2 .txt span {font-size:16px; line-height:24px}
	.historyDiv .historyIntro .txtDiv2 .btn {margin-top:25px}
	.historyDiv .historyIntro .txtDiv2 .btn a {font-size:14px; line-height:30px; padding:0 30px}

	/* 2017-06-19 추가 */
	.historyDiv .historyIntro.intro .txtDiv .share {top:95px; right:3%; width:100px}
	.historyDiv .historyIntro.intro .txtDiv .share > a > img{height:25px}
	.historyDiv .historyIntro.intro .txtDiv .share .sns {padding:0 5px 20px; margin-top:5px}
	.historyDiv .historyIntro.intro .txtDiv .share .sns > a {font-size:12px; margin-top:20px}
	.historyDiv .historyIntro.intro .txtDiv .share .sns > a > img {height:25px}
	/* // 2017-06-19 추가 */

	.hTopBt > a {margin-right:3%}/* 2017-06-19 추가 */
	.hTopBt > a > img {height:30px}/* 2017-06-19 추가 */
}

@media all and (max-width:450px){
	.historyDiv .historyIntro.intro .txtDiv .titArea .txt {font-size:13px; line-height:18px}
}