@charset "utf-8";

/* wrap */
.wrap{position:relative;width:100%;min-width:1280px}

/* loading */
.progress{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100}
.progress > .bg{width:100%;height:100%;background:#fff;opacity:0.8;-ms-filter:alpha(opacity=80)}
.progress > img{position:absolute;top:50%;left:50%}

/* header */
.header{position:relative;width:1280px;height:114px;margin:0 auto;min-width:1280px}
.header-logo{position:absolute;top:44px;left:0}
/* 70주년 로고 변경에 따른 이전 버전 소스임 */
/* .header-logo > a{display:block;width:120px;height:36px;background:url("../images/logo.png") no-repeat left top;text-indent:-9999px} */
/* 70주년 로고 변경 20180105 */
.header-logo > a{display:block;width:75px;height:80px;background:url("../images/img_history.png") no-repeat left top;text-indent:-9999px} 
.header-tit{display:none;padding-top:26px}
.header-tit > a{display:block;width:134px;height:62px;margin:0 auto;background:url("../images/tit-sub-logo.png") no-repeat left top;text-indent:-9999px}
.share{position:absolute;top:53px;right:0}
.share > ul:after{display:block;content:"";clear:both}
.share > ul li{float:left;margin-left:7px}
.share > ul li:first-child{margin-left:0}
.share-count{margin-left:5px;font-family:"dotum";font-size:13px;font-weight:bold;color:#ff2d86}

/* container */
.content{overflow:hidden;/* width:1600px;*/ height:786px;margin:0 auto;min-width:1280px}

/* .container > .section.p1 */
.content > .section.p1 > h2{width:532px;height:356px;margin:34px auto 20px;background:url("../images/tit-intro.png") no-repeat center top;text-indent:-9999px}
.content > .section.p1 > p{text-align:center;font-size:14px;color:#949494}
.content > .section.p1 > p.page-exp{padding-top:46px;margin:44px 0 58px;background:url("../images/bg-mouse.png") no-repeat center top;font-size:12px;color:#575757}

.slide-intro{overflow:hidden;width:1600px;margin:0 auto}
.slide-intro-list{width:3200px}
.slide-intro-list:after{display:block;content:"";clear:both}
.slide-intro-list > li{float:left}
.slide-intro-list > li > a{display:block;width:532px;height:182px;text-indent:-9999px}
.slide-intro-list > li[data-num="0"] > a{background:url("../images/slide-intro-img01.png") no-repeat left top}
.slide-intro-list > li[data-num="1"] > a{background:url("../images/slide-intro-img02.png") no-repeat left top}
.slide-intro-list > li[data-num="2"] > a{background:url("../images/slide-intro-img03.png") no-repeat left top}
.slide-intro-list > li[data-num="3"] > a{background:url("../images/slide-intro-img04.png") no-repeat left top}
.slide-intro-list > li[data-num="4"] > a{background:url("../images/slide-intro-img05.png") no-repeat left top}
.slide-intro-list > li[data-num="5"] > a{background:url("../images/slide-intro-img06.png") no-repeat left top}

/* container > section.p2 */
.content > .section.p2{position:relative;padding-top:80px;background:url("../images/bg-section-p2.png") no-repeat center top}
.content > .section.p2 > h3{padding-bottom:38px;font-size:30px;color:#fff;text-align:center}
.content > .section.p2 > .tab-mode{position:absolute;top:78px;right:215px}
.content > .section.p2 > .tab-mode > ul:after{display:block;content:"";clear:both}
.content > .section.p2 > .tab-mode > ul li{float:left}
.content > .section.p2 > .tab-mode > ul li:first-child{margin-right:-1px}
.content > .section.p2 > .tab-mode > ul li > a{display:block;width:30px;height:30px;border:1px solid #bdc9a1;box-sizing:border-box;text-indent:-9999px}
.content > .section.p2 > .tab-mode > ul li.on >  a{border-color:#fff}
.content > .section.p2 > .tab-mode > ul li > a.btn-story{background:url("../images/bg-gallery-mode-off.png") no-repeat center}
.content > .section.p2 > .tab-mode > ul li.on > a.btn-story{background:url("../images/bg-gallery-mode-on.png") no-repeat center}
.content > .section.p2 > .tab-mode > ul li > a.btn-gallery{background:url("../images/bg-video-mode-off.png") no-repeat center}
.content > .section.p2 > .tab-mode > ul li.on > a.btn-gallery{background:url("../images/bg-video-mode-on.png") no-repeat center}

/* container > section.p2 > box-history(contant) */
.content > .section.p2 > .box-history{position:relative;width:1280px;height:632px;margin:0 auto}

/* container > section.p2 > box-history(contant) > tab-content */
.history-tab-list{margin:0 55px}
.history-tab-list > li{float:left;margin-left:21px}
.history-tab-list > li:first-child{margin-left:0}
.history-tab-list:after{display:block;content:"";clear:both}
.history-tab-list > li > a{display:block;width:177px;height:47px;padding-top:7px;background:url("../images/bg-round-box-off.png") no-repeat left top;text-align:center;font-family:"Nanum Myeongjo";font-weight:700;font-size:16px;color:#fff}
.history-tab-list > li > a > span{font-size:13px}
.history-tab-list > li.on > a{background:url("../images/bg-round-box-on.png") no-repeat left top;color:#333}
.history-tab-list > li.on > .tab-cont{display:block}
.tab-content-box{overflow:hidden;position:relative;width:1225px;height:505px;padding-top:2px;margin:70px 55px 0}
.tab-content-box > .tab-cont{position:absolute;top:0;left:0;width:1170px}
.tab-content-box > .tab-cont > div{float:left}
.history-exp{width:390px;margin-right:48px}
.history-exp > h4{padding:0 0 25px;color:#fff}
.history-exp > h4 > em{font-size:52px}
.history-exp > h4 > span{font-size:26px}
.history-exp > p{font-size:14px;color:#fff;line-height:26px;letter-spacing:-1px}

/* story mode */
.story-img-box{overflow:hidden;width:732px;height:396px}
.story-img-list{position:relative}
.story-img-list > li{position:absolute;left:0}
.story-img-list > li ul li{opacity:0;-ms-filter:alpha(opacity=0)}
.story-img-list > li:first-child ul li{opacity:1;-ms-filter:alpha(opacity=100)}
.story-img-list > li > ul{width:732px;height:396px}
.story-img-list > li > ul:after{display:block;content:"";clear:both}
.story-img-list > li > ul > li{float:left;position:relative}
.story-img-list > li > ul > li.second{margin-bottom:10px}
.story-img-list > li > ul > li:first-child{margin-right:10px}
.story-img-list > li > ul > li > a{display:block}

li.first > a > .explain{width:427px;height:396px}
li.second > a > .explain,
li.third > a > .explain{width:295px;height:193px}
.explain{text-indent:-9999px}

/* story mode img */
.story-img-list > li[data-item="1"] > ul > li.first > a[data-img-map="1"] > .explain{background:url("../images/thum/thum-tab01-img01.png")}
.story-img-list > li[data-item="1"] > ul > li.second > a[data-img-map="2"] > .explain{background:url("../images/thum/thum-tab01-img02.png")}
.story-img-list > li[data-item="1"] > ul > li.third > a[data-img-map="3"] > .explain{background:url("../images/thum/thum-tab01-img03.png")}

.story-img-list > li[data-item="2"] > ul > li.first > a[data-img-map="4"] > .explain{background:url("../images/thum/thum-tab01-img04.png")}
.story-img-list > li[data-item="2"] > ul > li.second > a[data-img-map="5"] > .explain{background:url("../images/thum/thum-tab01-img05.png")}
.story-img-list > li[data-item="2"] > ul > li.third > a[data-img-map="6"] > .explain{background:url("../images/thum/thum-tab01-img06.png")}

.story-img-list > li[data-item="3"] > ul > li.first > a[data-img-map="7"] > .explain{background:url("../images/thum/thum-tab01-img07.png")}
.story-img-list > li[data-item="3"] > ul > li.second > a[data-img-map="8"] > .explain{background:url("../images/thum/thum-tab01-img08.png")}
.story-img-list > li[data-item="3"] > ul > li.third > a[data-img-map="9"] > .explain{background:url("../images/thum/thum-tab01-img09.png")}

.story-img-list > li[data-item="4"] > ul > li.first > a[data-img-map="10"] > .explain{background:url("../images/thum/thum-tab01-img10.png")}
.story-img-list > li[data-item="4"] > ul > li.second > a[data-img-map="11"] > .explain{background:url("../images/thum/thum-tab01-img11.png")}
.story-img-list > li[data-item="4"] > ul > li.third > a[data-img-map="12"] > .explain{background:url("../images/thum/thum-tab01-img12.png")}

.story-img-list > li[data-item="5"] > ul > li.first > a[data-img-map="13"] > .explain{background:url("../images/thum/thum-tab01-img13.png")}
.story-img-list > li[data-item="5"] > ul > li.second > a[data-img-map="14"] > .explain{background:url("../images/thum/thum-tab01-img14.png")}

.story-img-list > li[data-item="6"] > ul > li.first > a[data-img-map="1"] > .explain{background:url("../images/thum/thum-tab02-img01.png")}
.story-img-list > li[data-item="6"] > ul > li.second > a[data-img-map="2"] > .explain{background:url("../images/thum/thum-tab02-img02.png")}
.story-img-list > li[data-item="6"] > ul > li.third > a[data-img-map="3"] > .explain{background:url("../images/thum/thum-tab02-img03.png")}

.story-img-list > li[data-item="7"] > ul > li.first > a[data-img-map="4"] > .explain{background:url("../images/thum/thum-tab02-img04.png")}
.story-img-list > li[data-item="7"] > ul > li.second > a[data-img-map="5"] > .explain{background:url("../images/thum/thum-tab02-img05.png")}
.story-img-list > li[data-item="7"] > ul > li.third > a[data-img-map="6"] > .explain{background:url("../images/thum/thum-tab02-img06.png")}

.story-img-list > li[data-item="8"] > ul > li.first > a[data-img-map="7"] > .explain{background:url("../images/thum/thum-tab02-img07.png")}
.story-img-list > li[data-item="8"] > ul > li.second > a[data-img-map="8"] > .explain{background:url("../images/thum/thum-tab02-img08.png")}
.story-img-list > li[data-item="8"] > ul > li.third > a[data-img-map="9"] > .explain{background:url("../images/thum/thum-tab02-img09.png")}

.story-img-list > li[data-item="9"] > ul > li.first > a[data-img-map="10"] > .explain{background:url("../images/thum/thum-tab02-img10.png")}
.story-img-list > li[data-item="9"] > ul > li.second > a[data-img-map="11"] > .explain{background:url("../images/thum/thum-tab02-img11.png")}
.story-img-list > li[data-item="9"] > ul > li.third > a[data-img-map="12"] > .explain{background:url("../images/thum/thum-tab02-img12.png")}

.story-img-list > li[data-item="10"] > ul > li.first > a[data-img-map="13"] > .explain{background:url("../images/thum/thum-tab02-img13.png")}

.story-img-list > li[data-item="11"] > ul > li.first > a[data-img-map="1"] > .explain{background:url("../images/thum/thum-tab03-img01.png")}
.story-img-list > li[data-item="11"] > ul > li.second > a[data-img-map="2"] > .explain{background:url("../images/thum/thum-tab03-img02.png")}
.story-img-list > li[data-item="11"] > ul > li.third > a[data-img-map="3"] > .explain{background:url("../images/thum/thum-tab03-img03.png")}

.story-img-list > li[data-item="12"] > ul > li.first > a[data-img-map="4"] > .explain{background:url("../images/thum/thum-tab03-img04.png")}
.story-img-list > li[data-item="12"] > ul > li.second > a[data-img-map="5"] > .explain{background:url("../images/thum/thum-tab03-img05.png")}
.story-img-list > li[data-item="12"] > ul > li.third > a[data-img-map="6"] > .explain{background:url("../images/thum/thum-tab03-img06.png")}

.story-img-list > li[data-item="13"] > ul > li.first > a[data-img-map="7"] > .explain{background:url("../images/thum/thum-tab03-img07.png")}
.story-img-list > li[data-item="13"] > ul > li.second > a[data-img-map="8"] > .explain{background:url("../images/thum/thum-tab03-img08.png")}
.story-img-list > li[data-item="13"] > ul > li.third > a[data-img-map="9"] > .explain{background:url("../images/thum/thum-tab03-img09.png")}

.story-img-list > li[data-item="14"] > ul > li.first > a[data-img-map="10"] > .explain{background:url("../images/thum/thum-tab03-img10.png")}
.story-img-list > li[data-item="14"] > ul > li.second > a[data-img-map="11"] > .explain{background:url("../images/thum/thum-tab03-img11.png")}
.story-img-list > li[data-item="14"] > ul > li.third > a[data-img-map="12"] > .explain{background:url("../images/thum/thum-tab03-img12.png")}

.story-img-list > li[data-item="15"] > ul > li.first > a[data-img-map="13"] > .explain{background:url("../images/thum/thum-tab03-img13.png")}
.story-img-list > li[data-item="15"] > ul > li.second > a[data-img-map="14"] > .explain{background:url("../images/thum/thum-tab03-img14.png")}

.story-img-list > li[data-item="16"] > ul > li.first > a[data-img-map="1"] > .explain{background:url("../images/thum/thum-tab04-img01.png")}
.story-img-list > li[data-item="16"] > ul > li.second > a[data-img-map="2"] > .explain{background:url("../images/thum/thum-tab04-img02.png")}
.story-img-list > li[data-item="16"] > ul > li.third > a[data-img-map="3"] > .explain{background:url("../images/thum/thum-tab04-img03.png")}

.story-img-list > li[data-item="17"] > ul > li.first > a[data-img-map="4"] > .explain{background:url("../images/thum/thum-tab04-img04.png")}
.story-img-list > li[data-item="17"] > ul > li.second > a[data-img-map="5"] > .explain{background:url("../images/thum/thum-tab04-img05.png")}
.story-img-list > li[data-item="17"] > ul > li.third > a[data-img-map="6"] > .explain{background:url("../images/thum/thum-tab04-img06.png")}

.story-img-list > li[data-item="18"] > ul > li.first > a[data-img-map="7"] > .explain{background:url("../images/thum/thum-tab04-img07.png")}
.story-img-list > li[data-item="18"] > ul > li.second > a[data-img-map="8"] > .explain{background:url("../images/thum/thum-tab04-img08.png")}
.story-img-list > li[data-item="18"] > ul > li.third > a[data-img-map="9"] > .explain{background:url("../images/thum/thum-tab04-img09.png")}

.story-img-list > li[data-item="19"] > ul > li.first > a[data-img-map="10"] > .explain{background:url("../images/thum/thum-tab04-img10.png")}
.story-img-list > li[data-item="19"] > ul > li.second > a[data-img-map="11"] > .explain{background:url("../images/thum/thum-tab04-img11.png")}
.story-img-list > li[data-item="19"] > ul > li.third > a[data-img-map="12"] > .explain{background:url("../images/thum/thum-tab04-img12.png")}

.story-img-list > li[data-item="20"] > ul > li.first > a[data-img-map="1"] > .explain{background:url("../images/thum/thum-tab05-img01.png")}
.story-img-list > li[data-item="20"] > ul > li.second > a[data-img-map="2"] > .explain{background:url("../images/thum/thum-tab05-img02.png")}
.story-img-list > li[data-item="20"] > ul > li.third > a[data-img-map="3"] > .explain{background:url("../images/thum/thum-tab05-img03.png")}

.story-img-list > li[data-item="21"] > ul > li.first > a[data-img-map="4"] > .explain{background:url("../images/thum/thum-tab05-img04.png")}
.story-img-list > li[data-item="21"] > ul > li.second > a[data-img-map="5"] > .explain{background:url("../images/thum/thum-tab05-img05.png")}
.story-img-list > li[data-item="21"] > ul > li.third > a[data-img-map="6"] > .explain{background:url("../images/thum/thum-tab05-img06.png")}

.story-img-list > li[data-item="22"] > ul > li.first > a[data-img-map="7"] > .explain{background:url("../images/thum/thum-tab05-img07.png")}
.story-img-list > li[data-item="22"] > ul > li.second > a[data-img-map="8"] > .explain{background:url("../images/thum/thum-tab05-img08.png")}
.story-img-list > li[data-item="22"] > ul > li.third > a[data-img-map="9"] > .explain{background:url("../images/thum/thum-tab05-img09.png")}

.story-img-list > li[data-item="23"] > ul > li.first > a[data-img-map="10"] > .explain{background:url("../images/thum/thum-tab05-img10.png")}
.story-img-list > li[data-item="23"] > ul > li.second > a[data-img-map="11"] > .explain{background:url("../images/thum/thum-tab05-img11.png")}
.story-img-list > li[data-item="23"] > ul > li.third > a[data-img-map="12"] > .explain{background:url("../images/thum/thum-tab05-img12.png")}

.story-img-list > li[data-item="24"] > ul > li.first > a[data-img-map="13"] > .explain{background:url("../images/thum/thum-tab05-img13.png")}
.story-img-list > li[data-item="24"] > ul > li.second > a[data-img-map="14"] > .explain{background:url("../images/thum/thum-tab05-img14.png")}

.story-img-list > li[data-item="25"] > ul > li.first > a[data-img-map="1"] > .explain{background:url("../images/thum/thum-tab06-img01.png")}
.story-img-list > li[data-item="25"] > ul > li.second > a[data-img-map="2"] > .explain{background:url("../images/thum/thum-tab06-img02.png")}
.story-img-list > li[data-item="25"] > ul > li.third > a[data-img-map="3"] > .explain{background:url("../images/thum/thum-tab06-img03.png")}

.story-img-list > li[data-item="26"] > ul > li.first > a[data-img-map="4"] > .explain{background:url("../images/thum/thum-tab06-img04.png")}
.story-img-list > li[data-item="26"] > ul > li.second > a[data-img-map="5"] > .explain{background:url("../images/thum/thum-tab06-img05.png")}
.story-img-list > li[data-item="26"] > ul > li.third > a[data-img-map="6"] > .explain{background:url("../images/thum/thum-tab06-img06.png")}

.story-img-list > li[data-item="27"] > ul > li.first > a[data-img-map="7"] > .explain{background:url("../images/thum/thum-tab06-img07.png")}
.story-img-list > li[data-item="27"] > ul > li.second > a[data-img-map="8"] > .explain{background:url("../images/thum/thum-tab06-img08.png")}
.story-img-list > li[data-item="27"] > ul > li.third > a[data-img-map="9"] > .explain{background:url("../images/thum/thum-tab06-img09.png")}

.story-img-list > li[data-item="28"] > ul > li.first > a[data-img-map="10"] > .explain{background:url("../images/thum/thum-tab06-img10.png")}
.story-img-list > li[data-item="28"] > ul > li.second > a[data-img-map="11"] > .explain{background:url("../images/thum/thum-tab06-img11.png")}
.story-img-list > li[data-item="28"] > ul > li.third > a[data-img-map="12"] > .explain{background:url("../images/thum/thum-tab06-img12.png")}

.story-img-list > li[data-item="29"] > ul > li.first > a[data-img-map="13"] > .explain{background:url("../images/thum/thum-tab06-img13.png")}
.story-img-list > li[data-item="29"] > ul > li.second > a[data-img-map="14"] > .explain{background:url("../images/thum/thum-tab06-img14.png")}
.story-img-list > li[data-item="29"] > ul > li.third > a[data-img-map="15"] > .explain{background:url("../images/thum/thum-tab06-img15.png")}

.story-img-list > li[data-item="30"] > ul > li.first > a[data-img-map="16"] > .explain{background:url("../images/thum/thum-tab06-img16.png")}
.story-img-list > li[data-item="30"] > ul > li.second > a[data-img-map="17"] > .explain{background:url("../images/thum/thum-tab06-img17.png")}
.story-img-list > li[data-item="30"] > ul > li.third > a[data-img-map="18"] > .explain{background:url("../images/thum/thum-tab06-img18.png")}

.story-img-list > li > ul > li > a > .btn-more{display:none;position:absolute;top:50%;left:50%;width:48px;height:49px;background:url("../images/btn-gallery-more.png") no-repeat left top;text-indent:-9999px}
.story-img-list > li > ul > li > a:hover > .btn-more{display:block}

.gallery-icon-list{position:absolute;top:2px;right:-40px}
.gallery-icon-list > li{position:relative;margin-top:3px}
.gallery-icon-list > li:first-child{margin-top:0}
.gallery-icon-list > li > a{display:block;width:30px;height:17px;background:url("../images/btn-thum-list.png") no-repeat center}
.gallery-icon-list > li.on > a > .bd-line{position:absolute;top:-2px;left:-2px;width:32px;height:19px;border:1px solid #fff}

.content-story > a{display:block;position:absolute;top:307px;width:23px;height:39px;text-indent:-9999px}
.content-story > a.btn-prev{left:0;background:url("../images/btn-slide-prev.png") no-repeat left top}
.content-story > a.btn-next{right:0;background:url("../images/btn-slide-next.png") no-repeat left top}

/* gallery mode */
.page-gallery .tab-content-box{width:1280px;margin:40px 0 0}
.tab-cont-gallery{display:none}
.tab-cont-gallery.on{display:block}
.box-gallery > .img-box{width:512px;height:376px;background:#fff}
.box-gallery > .img-box{display:block;position:relative;width:512px;height:376px}
.box-gallery > .img-box img{width:512px;height:376px}
.box-gallery > .img-box > a{display:block;width:512px;height:376px}
.box-gallery > .img-box > a > span{display:none;position:absolute;top:50%;left:50%;width:58px;height:64px;margin:-32px 0 0 -24px;background:url("../images/btn-layer-open.png") no-repeat left top;text-indent:-9999px}
.box-gallery > .img-box > a:hover > span{display:block}
.box-gallery > .img-box > .count{display:block;position:absolute;bottom:0;right:0;width:42px;height:26px;padding-top:16px;background:#43b248;color:#fff;text-align:center}
.box-gallery > .txt{width:450px;height:85px;padding:29px 31px 0;background:#fff;color:#333}
.box-gallery > .txt:after{display:block;content:"";clear:both}
.box-gallery > .txt > dt{float:left;width:83px;font-family:"Nanum Myeongjo";font-weight:700;font-size:18px}
.box-gallery > .txt > dd{float:left;width:364px;max-height:48px;font-family:"Nanum Myeongjo";font-weight:600;font-size:16px}
.box-gallery > div.txt p{max-height:48px;font-family:"Nanum Myeongjo Bold";font-size:16px}
.tooltip{display:none;position:absolute;top:-70px;right:-56px;width:200px;height:66px;background:url("../images/tooltip-gallery-img.png") no-repeat left top;text-indent:-9999px}
.tooltip.open{display:block}

/* layer */
#layer{display:none;position:absolute;top:0;left:0;width:100%;height:100%}
#layer.on{display:block}
#layer > .bg{width:100%;height:100%;background:#000;opacity:0.8;-ms-filter:alpha(opacity=80)}
#layer > .layer-wrap{position:absolute;top:50%;left:50%;width:599px;height:550px;background:#fff;z-index:200}
#layer > .layer-wrap > .layer-content{position:relative}
#layer > .layer-wrap > .layer-content > .layer-exp{padding:42px 53px 0;font-size:20px;color:#333}
#layer > .layer-wrap > .layer-content > .btn-close{display:block;position:absolute;top:0;right:-40px;width:23px;height:24px;background:url("../images/btn-close.png") no-repeat left top;text-indent:-9999px}