@charset "utf-8";

/* 비주얼 */
.vis_main {position:relative;background:#e4ebf7;width:100%;}
.vis_main .vis_img {position:relative;}
.vis_main .vis_img:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/Main/Images/new/section/archive/main/vis_pat.png') repeat left top;}

.vis_main .vis_img div {overflow:hidden;}

.vis_main .visual_img {position:relative;overflow:hidden; width:1200px;margin:0 auto; height:570px; background: url('/Main/Images/new/section/archive/main/visual.jpg') no-repeat center top ; /*background-size:cover;*/}
.vis_main .visual_img .bg {display:block; position:absolute; width:330px; height:200px;left:205px; bottom:90px;z-index:10;}
.vis_main .visual_img .land {position:absolute; right:0; bottom:0; background:url('/Main/Images/new/section/archive/main/vis_land.png') no-repeat;}
.vis_main .visual_img .mobil {position:absolute; left:0px; top:0px;width:345px;height:295px;z-index:5;background:url('/Main/Images/new/section/archive/main/vis_mobil.png') no-repeat;}
.vis_main .visual_img .box {width:130px; height:130px; left:250px; top:400px; background:url('/Main/Images/new/section/archive/main/vis_box.png') no-repeat center center; 
animation:box 4s ease-out Infinite; animation-direction:normal; transform-origin: top left; z-index:1; opacity:0;animation-delay:3s;}
.vis_main .visual_img .ladder {position:absolute; right:15px; bottom:60px; width:190px; height:138px; background:url('/Main/Images/new/section/archive/main/vis_bladder.png') no-repeat;}
@keyframes box {
	0% {right:5%; top:45%; opacity:1;}
	50%{left:15%; top:25.5%; opacity:1;}
	100% {right:50%; top:25.5%; opacity:1;transform: scale(.52);}
	
}
#books.on{display:block;}
#books.off{display:none;}
/*
.clock:before {content:""; position:absolute; background-color:#fbb30f; top:35px; left:48%;
background:url('/Main/Images/new/section/archive/main/book_page.png') no-repeat center center; 
width:37px; height:49px;
	-webkit-transform-origin:right bottom;
	  transform-origin:right bottom;
	-webkit-animation:grdAiguille 4s linear infinite;
	  animation:grdAiguille 4s linear infinite;
	  animation-delay:2s;
}	   */
.clock:after {content:""; position:absolute; background-color:#fbb30f; top:35px; left:48%;
background:url('/Main/Images/new/section/archive/main/book_page.png') no-repeat center center; 
width:37px; height:49px;/* border-radius:5px;*/
	-webkit-transform-origin:right bottom;
	  transform-origin:right bottom;
	-webkit-animation:grdAiguille 3s linear infinite;
	  animation:grdAiguille 3s linear infinite; 
}
@-webkit-keyframes grdAiguille{
	0%{-webkit-transform:rotate(65deg);opacity:1;}
	100%{-webkit-transform:rotate(-22deg); opacity:1;}
}
@keyframes grdAiguille{
	0%{transform:rotate(65deg);}
	100%{transform:rotate(-22deg);opacity:1;}
}


@media all and (max-width:1024px) {
    .vis_main .visual_img {background:url('/Main/Images/new/section/archive/main/bg_mobile2.png') no-repeat right 70%;overflow:hidden; max-width:100%; height:400px;}
	.vis_main .visual_img .bg {display:none;}
	.vis_main .visual_img .land {display:none;}
	.vis_main .visual_img .mobil {display:none;}
	.vis_main .visual_img .box{display:none;}
	.vis_main .visual_img .ladder {display:none;}
}
@media all and (max-width:768px) {
    .vis_main .visual_img {background:url('/Main/Images/new/section/archive/main/bg_mobile.png') no-repeat right 70%;overflow:hidden; max-width:100%;height:500px;}
}
@media all and (max-width:414px) {
    .vis_main .visual_img {background:url('/Main/Images/new/section/archive/main/bg_mobile0.png') no-repeat right 60%;overflow:hidden; max-width:100%;height:400px;}
}


.vis_main .vis_img li.slick-slide {width:100%; /*height:643px;*/ height:580px; transform:scale(1.2,1.2); -webkit-transform:scale(1.2,1.2); transition:transform 5000ms ease-in-out; -webkit-transition:transform 5000ms ease-in-out;}
.vis_main .vis_img li.slick-slide.zoom {transform: scale(1,1); -webkit-transform: scale(1,1);}
.vis_main .vis_img li.vis02 {background:url('/Main/Images/new/section/archive/main/vis02.jpg') no-repeat right top; background-size:cover;}

.vis_main .vis_txt {position:absolute; top:130px; left:50%; width:572px; z-index:1;}
.vis_main .vis_txt .left {}
.vis_main .vis_txt .txt {color:#212121; /*font-family:'NanumMyeongjo';*/}
.vis_main .vis_txt .txt01 {font-size:3.1em; font-weight:400;}
.vis_main .vis_txt .txt01 span {position:relative; font-weight:600;}
.vis_main .vis_txt .txt01 span:before {content:''; position:absolute; top:-20px; left:50%; width:5px; height:5px; margin-left:-3px; background:#212121; border-radius:50%;}
.vis_main .vis_txt .txt02 {padding-top:30px; font-size:2em; font-weight:400; margin:0px 0 50px 3px; color:#666; line-height:3rem;}
.vis_main .vis_ctl {overflow:hidden; margin:0 0 0 10px;}
.vis_main .vis_ctl > * {float:left;}
.vis_main .vis_ctl .vis_pager {margin-top:6px;}
.vis_main .vis_ctl .slick-dots {overflow:hidden;}
.vis_main .vis_ctl .slick-dots li {float:left; margin:0 15px 0 0;}
.vis_main .vis_ctl .slick-dots li button {width:58px; height:4px; background:#9fb0d7; text-indent:-9999px;}
.vis_main .vis_ctl .slick-dots li.slick-active button {background:#15284f;}
.vis_main .vis_ctl .vis_stop {display:block; width:16px; height:16px; background:url('/Main/Images/new/section/archive/main/icon04.png') no-repeat -33px -32px; text-indent:-9999px; margin-top:15px;}
.vis_main .vis_txt .bottom{display:none; padding:0 0 0 160px;}	
.vis_main .vis_txt .bottom .count{font-family:'LAB'; font-size:2.5em;color:#495d84; letter-spacing:1.5px;}


@media all and (max-width:1440px) {
    .vis_main .vis_txt .txt01 {font-size:2.8em;}
	.vis_main .vis_txt .txt02 {font-size:1.9em;}
	.vis_main .vis_txt .bottom{padding:0 0 0 80px;}
}
@media all and (max-width:1024px) {
    .vis_main .vis_img li.slick-slide {height:730px; background-position:10% bottom;}
    .vis_main .vis_txt .txt01 {font-size:2.3em;}
    .vis_main .vis_txt .txt01 span:before {top:-20px;}
    .vis_main .vis_txt .txt02 {font-size:1.3em; margin-top:0; line-height:2.5rem;}
	.vis_main .vis_txt .bottom{display:none;}
    .vis_main .vis_txt {top:0; left:0; height:100%; text-align:left; margin:0;}
	.vis_main .vis_txt .left {position:absolute; top:60px; padding-left:15px;}
	.vis_main .vis_txt .bottom{padding:280px 0 0 80px;}
}
@media all and (max-width:768px) {
	.vis_main .vis_txt {top:6px;left:5px;}

}
@media all and (max-width:414px) {
	.vis_main .vis_txt {width:400px; top:-20px; left:5px;}
	.vis_main .vis_txt .txt01 {font-size:1.7em;}
	.vis_main .vis_txt .txt02 {font-size:1.1em; line-height:2rem; padding-top:15px;}
	.vis_main .vis_txt .bottom{display:none;}

}


/* 아카이브 소개 */
.da_intro {float:right; width:31.167%; background:url('/Main/Images/new/section/archive/main/bg01.jpg') no-repeat center; background-size:cover; border-radius:40px 0 0 0;}
.da_intro h2 {padding:35px 30px 30px 30px; color:#fff; font-family:'NanumMyeongjo'; font-size:1.5em; text-align:right; font-weight:400;}
.da_intro span {display:block; font-size:0.6em; font-family:'NotoSansKR'; text-transform:uppercase; letter-spacing:0.7px;}
.da_intro li a {display:block; position:relative; padding:14px 30px 11px; border-top:1px solid #4d4d4d; color:#fff; transition:all 0.3s;}
.da_intro li a:after {content:''; position:absolute; top:17px; right:0; width:16px; height:16px; background:url('/Main/Images/new/section/archive/main/icon04.png') no-repeat -64px 0; opacity:0; transition:all 0.3s;}
.da_intro li a:hover {background:#202123;}
.da_intro li a:hover:after {right:30px; opacity:1;}
@media all and (max-width:1023px) {
    .da_intro {position:absolute; bottom:0; float:none; width:96%;}
    /*
    .da_intro h2 {position:absolute; left:-9999px;}
    .da_intro ul {overflow:hidden;}
    .da_intro li {float:left; width:20%;}
    .da_intro li a {padding:25px 7px; border-right:1px solid #4d4d4d; text-align:center; border-top:0;}
    .da_intro li a:after {display:none;}
    */
}
@media all and (max-width:599px) {
    .da_intro {width:94%;}
}

/* 검색 */
.conts {position:relative; margin-top:-53px; z-index:10;}
.conts .sdw {clear:both; box-shadow:-10px 10px 30px rgba(0,0,0,0.3);}
.conts .sdw:after {content:''; display:block; clear:both;}
.conts .sdw .da_search {background:#fff; padding:30px 37px;}
.conts .sdw .da_search label {position:absolute; left:-9999px;}
.conts .sdw .da_search select,
.conts .sdw .da_search input[type="text"] {display:inline-block; margin-right:1%; height:44px; padding:0 10px; border:1px solid #d5d5d5; border-radius:6px;}
/*
.conts .sdw .da_search input::placeholder {color:red; font-style:italic;}
*/
.conts .sdw .da_search select {width:15%;}
.conts .sdw .da_search #searchWord {width:47%;}
.conts .sdw .da_search #s_date,
.conts .sdw .da_search #e_date, 
.conts .sdw .da_search #productYear  {width:13%; background:url('/Main/Images/new/section/archive/main/icon03.png') no-repeat 95% center;}
.conts .sdw .da_search #e_date, 
.conts .sdw .da_search #productYear {margin-left:1%;}
.conts .sdw .da_search .bt_sbtn {width:9.5%; height:44px; line-height:44px; display:inline-block; text-align:center; /*background:#a88235;*/ background:#15286f; color:#fff; border-radius:6px;}
.conts .sdw .da_search .bt_sbtn2 {width:9.5%; height:44px; line-height:44px; display:inline-block; text-align:center; /*background:#805c12;*/ background:#15284f; color:#fff; border-radius:6px;}
/*.conts .sdw .da_search .bt_sbtn {display:block; float:right; width:46px; height:46px; margin-right:-14px; background:url('/Main/Images/new/section/archive/common/icon01.png') no-repeat -46px -46px; text-indent:-9999px;}*/
@media all and (max-width:1440px) {
    .conts .sdw .da_search input[type="text"] {margin-right:1%;}
    .conts .sdw .da_search #e_date,
	.conts .sdw .da_search #productYear {margin-left:1%;}
}
@media all and (max-width:1023px) {

    .conts .sdw {clear:both; box-shadow:-10px 10px 30px rgba(0,0,0,0.3)}
    .conts .sdw .da_search {position:relative; float:none; width:100%; padding:25px;}
    .conts .sdw .da_search select,
    .conts .sdw .da_search input[type="text"] {margin-right:10px;}
    .conts .sdw .da_search select {width:110px;}
    .conts .sdw .da_search #searchWord {width:calc(100% - 123px); margin-right:0;}
    .conts .sdw .da_search #s_date,
    .conts .sdw .da_search #e_date, 
	.conts .sdw .da_search #productYear  {width:calc(50% - 45px); margin-top:10px;}
    .conts .sdw .da_search #e_date, 
	.conts .sdw .da_search #productYear {margin-left:0;}
    /*.conts .sdw .da_search .bt_sbtn {float:none; position:absolute; right:125px; bottom:25px; margin:0;}*/
	.conts .sdw .da_search .bt_sbtn,.conts .sdw .da_search .bt_sbtn2 {width:auto; padding:0 20px;}
}


/* 기록물 */
.media {margin-top:-53px; padding-top:105px; padding-bottom:60px; background:#f8f8f8 url('/Main/Images/new/section/archive/main/bg02.jpg') no-repeat center bottom;}
.media a {display:block;}
.media .list {position:relative;}
.media .list > li h2 {position:absolute; top:0; font-weight:500;}
.media .list > li:nth-child(1) h2 {left:0;}
.media .list > li:nth-child(2) h2 {left:230px;}
.media .list > li:nth-child(3) h2 {left:460px;}
.media .list > li h2 a {position:relative; color:#8b8b8c; font-size:1.5em;}
.media .list > li h2 a:hover {color:#15284f; font-weight:600;}
.media .list > li h2 a.on {padding-left:30px; color:#15284f; font-weight:600;}
.media .list > li h2 a.on:before {content:''; position:absolute; top:50%; left:2px; width:10px; height:10px; margin-top:-5px; background:#15284f; border-radius:50%;}
.media .list > li:not(:first-child) h2 a.on {margin-left:-30px;}
.media .list > li:not(:first-child) .thmb {display:none;}
.media .thmb {overflow:hidden; padding-top:70px;}
.media .thmb .thmb_list {margin:0 -20px;}
.media .thmb .thmb_list li > a {margin:0 20px;}
.media .thmb .thmb_list li > a > span {display:block; position:relative; overflow:hidden;}
.media .thmb .thmb_list li > a > span:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; transition:all 0.3s;}
.media .thmb .thmb_list li > a > span:after {content:''; position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; background:url('/Main/Images/new/section/archive/common/icon01.png') no-repeat -92px -46px; opacity:0; transition:all 0.5s;}
.media .thmb .thmb_list li > a:hover > span:before {opacity:0.65;}
.media .thmb .thmb_list li > a:hover > span:after {opacity:1;}
.media .thmb .thmb_list li div {margin-top:25px;}
.media .thmb .thmb_list li div span {display:inline-block; padding:4px 10px; background:#fff; border:1px solid #d5d5d5; font-size:0.87em; }
.media .thmb .thmb_list li img {width:100%; height:240px;}
.media .thmb .thmb_list li div dl dt {overflow:hidden; margin:15px 0 30px; font-weight:500; font-size:1.3em; text-indent:2px; white-space:nowrap; text-overflow:ellipsis; letter-spacing:-1px;}
.media .thmb .thmb_list li div dl dd {color:#15284f; font-weight:500; font-size:0.95em; letter-spacing:0.1px; text-indent:4px;}
.media .thmb .more {position:absolute; top:0; right:0; width:46px; height:49px; background:url('/Main/Images/new/section/archive/common/icon01.png') no-repeat 0 -46px; text-indent:-9999px;}
@media all and (max-width:1440px) {
    .media .thmb .thmb_list {margin:0 -10px;}
    .media .thmb .thmb_list li > a {margin:0 10px;}
}
@media all and (max-width:1023px) {
    .media {padding-top:40px; padding-bottom:36px; margin-top:0;}
	.media .list > li:nth-child(2) h2 {left:140px;}
	.media .list > li:nth-child(3) h2 {left:280px;}
    .media .list > li h2 a {font-size:1.3em;}
    .media .list > li h2 a.on:before {width:6px; height:6px; margin-top:-3px;}
    .media .list > li h2 a.on {padding-left:17px;}
    .media .list > li:not(:first-child) h2 a.on {margin-left:-17px;}
    .media .thmb {padding-top:56px;}
    .media .thmb .thmb_list {text-align:center;}
    .media .thmb .thmb_list li {text-align:left}
    .media .slick-dots {display:inline-block !important; overflow:hidden; margin-top:40px;}
    .media .slick-dots li {float:left; margin:0 5px;}
    .media .slick-dots li button {display:block; width:10px; height:10px; background:#15284f; border-radius:50%; text-indent:-9999px; opacity:0.4;}
    .media .slick-dots li.slick-active button {width:40px; border-radius:40px; background:#15284f; opacity:1;}
    .media .thmb .more {margin-top:-7px;}
}
@media all and (max-width:599px) {
    .media .list > li:nth-child(2) h2 {left:130px;}
	.media .list > li:nth-child(3) h2 {left:260px;}
    .media .list > li h2 a {font-size:1.2em;}
	.media .thmb .thmb_list {margin:0;}
    .media .thmb .thmb_list li > a {margin:0;}
    .media .thmb .more {display:none;}
}

/* 자주찾는메뉴 */
.link {margin:30px 0;}
.link .link_slide:after {content:''; display:block; clear:both;}
.link .link_slide li {float:left; width:20%;}
.link .link_slide a {display:block; position:relative; padding-top:70px; text-align:center; font-size:1.2em; font-weight:500; letter-spacing:-1px;}
.link .link_slide a:before {content:''; position:absolute; top:0; left:50%; width:90px; height:70px; background:url('/Main/Images/new/section/archive/main/icon07.png') no-repeat; margin-left:-45px; transition:all .3s;}
.link .link_slide a:hover:before {top:-3px;}
.link .link_slide .link01 a:before {background-position:0 0;}
.link .link_slide .link02 a:before {background-position:-90px 0;}
.link .link_slide .link03 a:before {background-position:-180px 0;}
.link .link_slide .link04 a:before {background-position:-270px 0;}
.link .link_slide .link05 a:before {background-position:-360px 0;}
@media all and (max-width:1023px) {
    .link {margin:40px 0;}
    .link_slide {margin:0 35px;}
    .link_slide button {display:block; position:absolute; top:50%; width:16px; height:16px; margin-top:-8px; background:url('/Main/Images/new/section/archive/main/icon04.png') no-repeat; text-indent:-9999px;}
    .link_slide button.slick-prev {left:-20px; background-position:0 -32px}
    .link_slide button.slick-next {right:-20px; background-position:-16px -32px}
}

/* 독도 */
.dokdo {background:url('/Main/Images/new/section/archive/main/bg05.jpg') no-repeat left top;}
.dokdo article {position:relative; }
.dokdo article:after {content:''; display:block; clear:both;}
.dokdo article > span {position:absolute; left:0; bottom:0; width:650px; height:150px; background:url('/Main/Images/new/section/archive/main/bg07.png') no-repeat center;}
.dokdo article > div {position:relative; z-index:3; float:right; height:160px; padding-top:52px; box-sizing:border-box;}
.dokdo article > div > * {float:left;}
.dokdo article > div img {display:block; margin:0 102px 0; width:auto;}
.dokdo article > div a {overflow:hidden; position:relative; padding:13px 25px; border:1px solid #002b5e; color:#002b5e; font-weight:500;}
.dokdo article > div a:after {content:''; position:absolute; top:100%; left:0; width:100%; height:100%; background:#333; transition:top .3s;}
.dokdo article > div a:hover {color:#fff;}
.dokdo article > div a:hover:after {top:0;}
.dokdo article > div a span {position:relative; padding-right:80px; z-index:2;}
.dokdo article > div a span:after {content:''; position:absolute; top:3px; right:0; width:16px; height:16px; background:url('/Main/Images/new/section/archive/main/icon04.png') no-repeat -64px -16px;}
.dokdo article > div a:hover span:after {background-position:-64px 0;}
@media all and (max-width:1440px) {
    .dokdo article > span {width:550px;}
	.dokdo article > div img {margin-right:75px;}
}
@media all and (max-width:1023px) {
    .dokdo {margin-top:0; background-size:cover;}
    .dokdo article > span {display:none;}
    .dokdo article {text-align:center;}
    .dokdo article > div {display:inline-block; float:none; height:150px;}
    .dokdo article > div img {margin:-5px 50px 0 0;}
}
@media all and (max-width:599px) {
    .dokdo article {padding:20px 0 10px 0;}
    .dokdo article > div {overflow:hidden; padding-top:10px; height:auto;}
    .dokdo article > div > * {display:block; float:none;}
    .dokdo article > div img {margin:0 auto 15px;}
}