<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
@import url(../../font/Eulyoo1945/font.css);

/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 이용안내 &gt; 관람안내
	연관단어 : #sub_01_01

////////////////////////////////////////////////////////////////////////////// */
#sub_01_01{}
#sub_01_01 b{font-weight: 500;}
#sub_01_01 .red{color: #C92A2A !important;}
#sub_01_01 .grid3{
    display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; text-align: center; box-sizing: border-box;
}
#sub_01_01 .grid3 [data-skin="box"]{padding: 1.875em 1.875em 2.6875em; box-sizing: border-box;}
#sub_01_01 .grid3 [data-skin="box"]:nth-child(1) {
    -ms-grid-column: 1; grid-column: 1;
    -ms-grid-row: 1; grid-row: 1;
    margin-right: 2.4rem;
}
#sub_01_01 .grid3 [data-skin="box"]:nth-child(2) {
    -ms-grid-column: 2; grid-column: 2;
    -ms-grid-row: 1; grid-row: 1;
    margin-right: 2.4rem;
}
#sub_01_01 .grid3 [data-skin="box"]:nth-child(3) {
    -ms-grid-column: 3; grid-column: 3;
    -ms-grid-row: 1; grid-row: 1;
}
#sub_01_01 .grid3 [data-skin="box"] strong{position: relative; display: block; padding-bottom: 1.75em; font-size: 1.5em; font-weight: 600; line-height: 100%; color: #0064CA;}
#sub_01_01 .grid3 [data-skin="box"] strong:before{
    content: ""; display: block; width: 3.91em; height: 3.91em; margin: 0 auto 1.16em; background-color: rgba(0, 100, 202, 0.05); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;
    -webkit-border-radius: 50%; border-radius: 50%;
}
#sub_01_01 .grid3 [data-skin="box"]:nth-child(1) strong:before{background-image: url(../../images/1000y/content/sub_01_01_img01.svg)}
#sub_01_01 .grid3 [data-skin="box"]:nth-child(2) strong:before{background-image: url(../../images/1000y/content/sub_01_01_img02.svg)}
#sub_01_01 .grid3 [data-skin="box"]:nth-child(3) strong:before{background-image: url(../../images/1000y/content/sub_01_01_img03.svg)}
#sub_01_01 .grid3 [data-skin="box"] strong:after{content: ""; position: absolute; bottom: 0.3em; left: 50%; display: block; width: 1px; height: 1.125em; margin-left: -0.5px; background-color: #0064CA;}
#sub_01_01 .grid3 [data-skin="box"] p{line-height: 150%;}

#sub_01_01 .grid2{display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; padding: 1em 3.75em; box-sizing: border-box;}
#sub_01_01 .grid2 li:nth-child(2n-1) {
    -ms-grid-column: 1; grid-column: 1;
}
#sub_01_01 .grid2 li:nth-child(2n-2) {
    -ms-grid-column: 2; grid-column: 2;
}
#sub_01_01 .grid2 li:nth-child(1),
#sub_01_01 .grid2 li:nth-child(2){
    -ms-grid-row: 1; grid-row: 1;
}
#sub_01_01 .grid2 li:nth-child(3),
#sub_01_01 .grid2 li:nth-child(4){
    -ms-grid-row: 2; grid-row: 2;
}
#sub_01_01 .grid2 li:nth-child(5),
#sub_01_01 .grid2 li:nth-child(6){
    -ms-grid-row: 3; grid-row: 3;
}
#sub_01_01 .grid2 li:nth-child(7),
#sub_01_01 .grid2 li:nth-child(8){
    -ms-grid-row: 4; grid-row: 4;
}
#sub_01_01 .grid2 li{position: relative; display: table; table-layout: fixed; width: 100%; padding: 1.875em 0; box-sizing: border-box;}
#sub_01_01 .grid2 li:nth-child(2n-1):after{content: ""; display: block; position: absolute; top: 0; left: 0; display: block; width: 200%; height: 1px; background-color: #EBEBEB;}
#sub_01_01 .grid2 li:nth-child(1):after{display: none;}
#sub_01_01 .grid2 li:before{
    content: ""; display: table-cell; width: 6.25em; height: 6.25em; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;
    -webkit-border-radius: 50%; border-radius: 50%;
}
#sub_01_01 .grid2 li:nth-child(1):before{background-image: url(../../images/1000y/content/sub_01_01_img04.svg);}
#sub_01_01 .grid2 li:nth-child(2):before{background-image: url(../../images/1000y/content/sub_01_01_img05.svg);}
#sub_01_01 .grid2 li:nth-child(3):before{background-image: url(../../images/1000y/content/sub_01_01_img06.svg);}
#sub_01_01 .grid2 li:nth-child(4):before{background-image: url(../../images/1000y/content/sub_01_01_img07.svg);}
#sub_01_01 .grid2 li:nth-child(5):before{background-image: url(../../images/1000y/content/sub_01_01_img08.svg);}
#sub_01_01 .grid2 li:nth-child(6):before{background-image: url(../../images/1000y/content/sub_01_01_img09.svg);}
#sub_01_01 .grid2 li:nth-child(7):before{background-image: url(../../images/1000y/content/sub_01_01_img10.svg);}
#sub_01_01 .grid2 li span{position: relative; display: table-cell; width: 100%; vertical-align: middle; padding: 0 2.4em 0 1.2em; font-size: 1.125em; box-sizing: border-box;}

@media screen and (max-width:1024px){
    #sub_01_01 .grid3,
    #sub_01_01 .grid2{font-size: 0.9em;}
    
    #sub_01_01 .grid2{padding: 1em 2em;}
    #sub_01_01 .grid2 li{min-height: 8em;}
    #sub_01_01 .grid2 li:before{position: absolute; top: 50%; left: 0; margin-top: calc(-6.25em / 2); font-size: 0.9em;}
    #sub_01_01 .grid2 li span{padding: 0 1.5em 0 calc(1.2em + 5.5em);}
}
@media screen and (max-width:640px){
    #sub_01_01 .grid3,
    #sub_01_01 .grid2{font-size: 1em;}
    
    #sub_01_01 .grid3{
        -ms-grid-columns: 1fr; grid-template-columns: 1fr;
    }
    #sub_01_01 .grid3 [data-skin="box"] strong:before{font-size: 0.85em;}
    #sub_01_01 .grid3 [data-skin="box"]:nth-child(1) {
        -ms-grid-column: 1; grid-column: 1;
        -ms-grid-row: 1; grid-row: 1;
        margin-right: 0; margin-bottom: 1.4rem;
    }
    #sub_01_01 .grid3 [data-skin="box"]:nth-child(2) {
        -ms-grid-column: 1; grid-column: 1;
        -ms-grid-row: 2; grid-row: 2;
        margin-right: 0; margin-bottom: 1.4rem;
    }
    #sub_01_01 .grid3 [data-skin="box"]:nth-child(3) {
        -ms-grid-column: 1; grid-column: 1;
        -ms-grid-row: 3; grid-row: 3;
    }
    
    
    #sub_01_01 .grid2{-ms-grid-columns: 1fr; grid-template-columns: 1fr; padding: 1em 1.5em;}
    #sub_01_01 .grid2 li:nth-child(2n-1),
    #sub_01_01 .grid2 li:nth-child(2n-2) {
        -ms-grid-column: 1; grid-column: 1;
    }
    #sub_01_01 .grid2 li:nth-child(1){
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_01_01 .grid2 li:nth-child(2){
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_01_01 .grid2 li:nth-child(3){
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_01_01 .grid2 li:nth-child(4){
        -ms-grid-row: 4; grid-row: 4;
    }
    #sub_01_01 .grid2 li:nth-child(5){
        -ms-grid-row: 5; grid-row: 5;
    }
    #sub_01_01 .grid2 li:nth-child(6){
        -ms-grid-row: 6; grid-row: 6;
    }
    #sub_01_01 .grid2 li:nth-child(7){
        -ms-grid-row: 7; grid-row: 7;
    }
    #sub_01_01 .grid2 li:nth-child(8){
        -ms-grid-row: 8; grid-row: 8;
    }
    #sub_01_01 .grid2 li:after,
    #sub_01_01 .grid2 li:nth-child(2n-1):after{content: ""; display: block; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 1px; background-color: #EBEBEB;}
    #sub_01_01 .grid2 li:nth-child(1):after{display: none;}
    #sub_01_01 .grid2 li:before{font-size: 0.8em;}
    #sub_01_01 .grid2 li{min-height: 7em;}
    #sub_01_01 .grid2 li span{padding: 0 0 0 calc(1.2em + 4.6em);}
}


/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 이용안내 &gt; 시설안내
	연관단어 : #sub_01_02

////////////////////////////////////////////////////////////////////////////// */
#sub_01_02{}
#sub_01_02 .grid3{display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; margin-top: 1.875em; box-sizing: border-box;}
#sub_01_02 .grid3 li{position: relative; padding: 2.23em 2.23em 5.56em; background-color: #EFF1F6; font-size: 1.125em; line-height: 150%; color: #444; box-sizing: border-box;}

#sub_01_02 .grid3 li:nth-child(1) {
    -ms-grid-column: 1; grid-column: 1;
    -ms-grid-row: 1; grid-row: 1;
    margin-right: 2.4rem;
}
#sub_01_02 .grid3 li:nth-child(2) {
    -ms-grid-column: 2; grid-column: 2;
    -ms-grid-row: 1; grid-row: 1;
    margin-right: 2.4rem;
}
#sub_01_02 .grid3 li:nth-child(3) {
    -ms-grid-column: 3; grid-column: 3;
    -ms-grid-row: 1; grid-row: 1;
}
#sub_01_02 .grid3 li:before{content: ""; position: absolute; bottom: 2.23em; right: 2.23em; display: block; width: 3.66em; height: 3em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
#sub_01_02 .grid3 li:nth-child(1):before{background-image: url(../../images/1000y/content/sub_01_02_img13.svg);}
#sub_01_02 .grid3 li:nth-child(2):before{background-image: url(../../images/1000y/content/sub_01_02_img14.svg);}
#sub_01_02 .grid3 li:nth-child(3):before{background-image: url(../../images/1000y/content/sub_01_02_img15.svg);}
#sub_01_02 .grid3 li em{display: block; font-weight: 600; font-size: 0.89em; line-height: 1; color: #0064CA; font-style: normal;}
#sub_01_02 .grid3 li strong{display: block; margin-top: 0.42em; margin-bottom: 0.84em; font-weight: 600; font-size: 1.34em; line-height: 1; color: #222;}

@media screen and (max-width:1024px){
    #sub_01_02 .grid3{margin-top: 1.5em;}
    #sub_01_02 .grid3 li:nth-child(1) {margin-right: 1.4rem;}
    #sub_01_02 .grid3 li:nth-child(2) {margin-right: 1.4rem;}
    #sub_01_02 .grid3 li{padding: 2em 2em 5em; font-size: 1em;}
}
@media screen and (max-width:840px){
    #sub_01_02 .scroll{overflow-x: scroll;}
    #sub_01_02 .scroll .move{width: 840px;}
}

@media screen and (max-width:640px){
    #sub_01_02 .grid3{
        -ms-grid-columns: 1fr; grid-template-columns: 1fr;
    }
    #sub_01_02 .grid3 li{padding: 1.5em 1.5em 3.5em; font-size: 1.125em;}
    #sub_01_02 .grid3 li:nth-child(1) {
        -ms-grid-column: 1; grid-column: 1;
        -ms-grid-row: 1; grid-row: 1;
        margin-right: 0; margin-bottom: 1.4rem;
    }
    #sub_01_02 .grid3 li:nth-child(2) {
        -ms-grid-column: 1; grid-column: 1;
        -ms-grid-row: 2; grid-row: 2;
        margin-right: 0; margin-bottom: 1.4rem;
    }
    #sub_01_02 .grid3 li:nth-child(3) {
        -ms-grid-column: 1; grid-column: 1;
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_01_02 .grid3 li:before{font-size: 0.8em; bottom: 1.25em; right: 1.5em;}
    #sub_01_02 .scroll .move{width: 700px;}
}



/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 이용안내 &gt; 찾아오시는 길
	연관단어 : #sub_01_04

////////////////////////////////////////////////////////////////////////////// */
#sub_01_04{}
#sub_01_04 #map{height: 32.125em; background-color: #eee;}
#sub_01_04 .ms{padding: 2.25em 3.75em; background-color: #F7F8FA; box-sizing: border-box;}
#sub_01_04 .ms:after{content: ""; display: block; clear: both;}
#sub_01_04 .ms li{position: relative; float: left; min-height: 6.25em; padding-left: 7.75em; box-sizing: border-box;}
#sub_01_04 .ms li:nth-child(1){width: calc(100% - 20em);}
#sub_01_04 .ms li:nth-child(2){width: 20em;}
#sub_01_04 .ms li:before{
    content: ""; position: absolute; top: 0; left: 0; display: block; width: 6.25em; height: 6.25em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 50%; border-radius: 50%;
}
#sub_01_04 .ms li:nth-child(1):before{background-image: url(../../images/1000y/content/sub_01_04_img01.svg);}
#sub_01_04 .ms li:nth-child(2):before{background-image: url(../../images/1000y/content/sub_01_04_img02.svg);}
#sub_01_04 .ms li strong{display: block; margin-top: 0.78em; margin-bottom: 0.62em; font-size: 1.125em; line-height: 1; color: #0064CA;}
#sub_01_04 .ms li span,
#sub_01_04 .ms li a{display: block; font-size: 1.25em; line-height: 130%; color: #333;}
#sub_01_04 .table [data-list-bullet='2']&gt;li{font-size: 1em;}

@media screen and (max-width:1024px){
    #sub_01_04 #map{height: 25em;}
    #sub_01_04 .ms{font-size: 0.85em;}
    #sub_01_04 .ms li{padding-left: 6.5em;}
    #sub_01_04 .ms li:before{font-size: 0.8em;}
}
@media screen and (max-width:840px){
    #sub_01_04 .ms{padding: 1.5em 2em;}
    #sub_01_04 .ms li:nth-child(1){width: calc(100% - 16em);}
    #sub_01_04 .ms li:nth-child(2){width: 16em;}
}
@media screen and (max-width:640px){
    #sub_01_04 #map{height: 20em;}
    #sub_01_04 .ms{font-size: 0.85em;}
    #sub_01_04 .ms li{padding-left: 5em;}
    #sub_01_04 .ms li:before{font-size: 0.65em;}
    
    
    #sub_01_04 .table colgroup col:first-child{width: 9em !important;}
}
@media screen and (max-width:480px){
    #sub_01_04 #map{height: 16em;}
    #sub_01_04 .ms li{float: none; width: 100%; min-height: 4.5em;}
    #sub_01_04 .ms li:nth-child(1),
    #sub_01_04 .ms li:nth-child(2){width: 100%;}
    #sub_01_04 .ms li:nth-child(2){margin-top: 1em;}
}


/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 전시안내 &gt; 상설전시 &gt; 홍보실
	연관단어 : #sub_02_01_01

////////////////////////////////////////////////////////////////////////////// */
#sub_02_01_01{}
#sub_02_01_01 .grid{display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 3.2rem; padding: 0 4.37em;}
#sub_02_01_01 .grid img{
    margin-bottom: 2.6rem; box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sub_02_01_01 .grid img:nth-child(1){
    -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
    -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/3;
}
#sub_02_01_01 .grid img:nth-child(2){
    -ms-grid-column: 3; grid-column: 3/4;
    -ms-grid-row: 1; grid-row: 1;
}
#sub_02_01_01 .grid img:nth-child(3){
    -ms-grid-column: 3; grid-column: 3/4;
    -ms-grid-row: 2; grid-row: 2;
}
#sub_02_01_01 .grid img:nth-child(4){
    margin-top: 0.375em; 
    -ms-grid-column: 1; grid-column: 1/2;
    -ms-grid-row: 3; grid-row: 3;
}
#sub_02_01_01 .grid img:nth-child(5){
    -ms-grid-column: 1; grid-column: 1/2;
    -ms-grid-row: 4; grid-row: 4;
}
#sub_02_01_01 .grid img:nth-child(6){
    margin-top: 0.375em;
    -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4;
    -ms-grid-row: 3; -ms-grid-row-span: 2; grid-row: 3/5;
}
#sub_02_01_01 .grid img:nth-child(7){
    margin-top: 0.375em;
    -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
    -ms-grid-row: 5; grid-row: 5;
}
#sub_02_01_01 .grid img:nth-child(8){
    margin-top: 0.375em; 
    -ms-grid-column: 3; grid-column: 3/4;
    -ms-grid-row: 5; grid-row: 5;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #sub_02_01_01 .grid img:nth-child(1){
        margin-right: 3.2rem;
    }
    #sub_02_01_01 .grid img:nth-child(6){
        margin-left: 3.2rem;
    }
    #sub_02_01_01 .grid img:nth-child(7){
        margin-right: 3.2rem;
    }
}

@media screen and (max-width:1024px){
    #sub_02_01_01 .grid{grid-column-gap: 2.5rem;}
    #sub_02_01_01 .grid img{margin-bottom: 2rem;}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:1024px){
    #sub_02_01_01 .grid img:nth-child(1){
        margin-right: 2.5rem;
    }
    #sub_02_01_01 .grid img:nth-child(6){
        margin-left: 2.5rem;
    }
    #sub_02_01_01 .grid img:nth-child(7){
        margin-right: 2.5rem;
    }
}

@media screen and (max-width:640px){   
    
    #sub_02_01_01 .grid{-ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-column-gap: 1.4rem; padding: 0 2em;}
    #sub_02_01_01 .grid img{width: 100%; margin-bottom: 1.4rem;}
    #sub_02_01_01 .grid img:nth-child(1){
        margin-right: 0;
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/1;
    }
    #sub_02_01_01 .grid img:nth-child(2){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_01 .grid img:nth-child(3){
        -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_01 .grid img:nth-child(4){
        margin-top: 0;
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_02_01_01 .grid img:nth-child(5){
        -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3;
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_02_01_01 .grid img:nth-child(6){
        margin-left: 0; margin-top: 0;
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 4; -ms-grid-row-span: 1; grid-row: 4;
    }
    #sub_02_01_01 .grid img:nth-child(7){
        margin-right: 0; margin-top: 0; 
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 5; -ms-grid-row-span: 1; grid-row: 5;
    }
    #sub_02_01_01 .grid img:nth-child(8){
        margin-top: 0;
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 6; -ms-grid-row-span: 1; grid-row: 6;
    }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:640px){
    #sub_02_01_01 .grid img{display: block; width: 100%;}
    #sub_02_01_01 .grid img:nth-child(2),
    #sub_02_01_01 .grid img:nth-child(4){
        width: calc(100% - 1.4rem); margin-right: 1.4rem;
    }
}

/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 전시안내 &gt; 상설전시 &gt; 영상체험실
	연관단어 : #sub_02_01_02

////////////////////////////////////////////////////////////////////////////// */
#sub_02_01_02{}
#sub_02_01_02 .grid{display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 3.2rem; padding: 0 4.37em;}
#sub_02_01_02 .grid span{
    position: relative; display: block; margin-bottom: 2.6rem; box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sub_02_01_02 .grid span:nth-child(1){
    -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
    -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/3;
}
#sub_02_01_02 .grid span:nth-child(2){
    -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/4;
    -ms-grid-row: 1; grid-row: 1;
}
#sub_02_01_02 .grid span:nth-child(3){
    -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/4;
    -ms-grid-row: 2; grid-row: 2;
}
#sub_02_01_02 .grid span:nth-child(4){
    -ms-grid-column: 1; grid-column: 1/2;
    -ms-grid-row: 3; grid-row: 3;
}
#sub_02_01_02 .grid span:nth-child(5){
    -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4;
    -ms-grid-row: 3; grid-row: 3;
}
#sub_02_01_02 .grid span:nth-child(6){
    -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/4;
    -ms-grid-row: 4; grid-row: 4;
}
#sub_02_01_02 .grid span img{display: block; width: 100%; height: 100%;}
#sub_02_01_02 .grid span &gt;a{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; text-indent: -9999px;}
#sub_02_01_02 .grid span [data-skin="popup"] .wraps .in{font-size: 10px; width: 100%; max-width: calc(1600px + 4em); margin: 0 auto; padding: 20em 2em 0; box-sizing: border-box;}
#sub_02_01_02 .grid span [data-skin="popup"] .wraps .in video{display: block; width: 100%;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #sub_02_01_02 .grid span:nth-child(1){
        margin-right: 3.2rem;
    }
    #sub_02_01_02 .grid span:nth-child(5){
        margin-left: 3.2rem;
    }
}

@media screen and (max-width:1024px){
    #sub_02_01_02 .grid{grid-column-gap: 2.5rem;}
    #sub_02_01_02 .grid span{margin-bottom: 2rem;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:1024px){
    #sub_02_01_02 .grid span:nth-child(1){
        margin-right: 2.5rem;
    }
    #sub_02_01_02 .grid span:nth-child(5){
        margin-left: 2.5rem;
    }
}

@media screen and (max-width:640px){
    #sub_02_01_02 .grid{-ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-column-gap: 1.4rem; padding: 0 2em;}
    #sub_02_01_02 .grid span{
        width: 100%; margin-bottom: 1.4rem;
    }
    #sub_02_01_02 .grid span:nth-child(1){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/1;
    }
    #sub_02_01_02 .grid span:nth-child(2){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_02 .grid span:nth-child(3){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_02_01_02 .grid span:nth-child(4){
        -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3;
        -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row: 2/4;
    }
    #sub_02_01_02 .grid span:nth-child(5){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 4; grid-row: 4;
    }
    #sub_02_01_02 .grid span:nth-child(6){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 5; grid-row: 5;
    }
    #sub_02_01_02 .grid span img{display: block; width: 100%;}
    #sub_02_01_02 .grid span [data-skin="popup"] .wraps .in{padding: 15em 2em 0;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:640px){
    #sub_02_01_02 .grid span:nth-child(4){
        margin-left: 1.4rem; margin-right: 0; width: calc(100% - 1.4rem);
    }
    #sub_02_01_02 .grid span:nth-child(5){
        margin-left: 0;
    }
}



/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 전시안내 &gt; 상설전시 &gt; 어린이 체험관
	연관단어 : #sub_02_01_03

////////////////////////////////////////////////////////////////////////////// */
#sub_02_01_03{}
#sub_02_01_03 .grid{display: -ms-grid;display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 3.2rem; padding: 0 4.37em;}
#sub_02_01_03 .grid img{
    display: block; width: 100%; margin-bottom: 2.6rem; box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sub_02_01_03 .grid img:nth-child(1){
    -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
    -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1/3;
}
#sub_02_01_03 .grid img:nth-child(2){
    -ms-grid-column: 3; grid-column: 3/4;
    -ms-grid-row: 1; grid-row: 1;
}
#sub_02_01_03 .grid img:nth-child(3){
    -ms-grid-column: 3; grid-column: 3/4;
    -ms-grid-row: 2; grid-row: 2;
}
#sub_02_01_03 .grid img:nth-child(4){
    margin-top: 0.375em; 
    -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/4;
    -ms-grid-row: 3; grid-row: 3;
}
#sub_02_01_03 .grid img:nth-child(5){
    -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
    -ms-grid-row: 4; grid-row: 4;
}
#sub_02_01_03 .grid img:nth-child(6){
    margin-top: 0.375em;
    -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/4;
    -ms-grid-row: 4; grid-row: 4;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #sub_02_01_03 .grid img{display: inline; width: auto; height: auto;}
    #sub_02_01_03 .grid img:nth-child(1),
    #sub_02_01_03 .grid img:nth-child(5){
        margin-right: 3.2rem;
    }
}
@media screen and (max-width:1024px){
    #sub_02_01_03 .grid img{margin-bottom: 2.5rem;}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:1024px){
    #sub_02_01_03 .grid img{display: inline; width: auto; height: auto;}
    #sub_02_01_03 .grid img:nth-child(1),
    #sub_02_01_03 .grid img:nth-child(5){
        margin-right: 2.5rem;
    }
}

@media screen and (max-width:640px){
    #sub_02_01_03 .grid{-ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-column-gap: 1.4rem; padding: 0 2em;}
    #sub_02_01_03 .grid img{display: block; width: 100%; margin-bottom: 1.4rem;}
    #sub_02_01_03 .grid img:nth-child(1){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1/1;
    }
    #sub_02_01_03 .grid img:nth-child(2){
        margin-right: 1.4rem; width: calc(100% - 1.4rem);
        -ms-grid-column: 1; grid-column: 1/2;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_03 .grid img:nth-child(3){
        -ms-grid-column: 2; grid-column: 2/3;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_03 .grid img:nth-child(4){
        margin-top: 0; 
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_02_01_03 .grid img:nth-child(5){
        margin-top: 0;
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 4; grid-row: 4;
    }
    #sub_02_01_03 .grid img:nth-child(6){
        margin-top: 0;
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
        -ms-grid-row: 4; grid-row: 4;
    }
}


/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 전시안내 &gt; 상설전시 &gt; 야외전시
	연관단어 : #sub_02_01_04

////////////////////////////////////////////////////////////////////////////// */
#sub_02_01_04{}
#sub_02_01_04 .grid{display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 3.2rem; padding: 0 4.37em;}
#sub_02_01_04 .grid img{
    display: block; width: 100%; box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sub_02_01_04 .grid img:nth-child(1){
    -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3;
    -ms-grid-row: 1; grid-row: 1;
}
#sub_02_01_04 .grid img:nth-child(2){
    -ms-grid-column: 3; grid-column: 3/4;
    -ms-grid-row: 1; grid-row: 1;
}

#sub_02_01_04 .bx2{position: relative; padding: 2.25em 2.5em; background-color: #F6F5F0; box-sizing: border-box;}
#sub_02_01_04 .bx2:after{content: ""; display: block; clear: both;}
#sub_02_01_04 .bx2 strong{position: absolute; top: 3.125em; left: 2.5em; font-weight: 600;}
#sub_02_01_04 .bx2 strong span{display: block; max-width: 6em; font-size: 1.5em; line-height: 130%; letter-spacing: -0.02em; color: #222;}
#sub_02_01_04 .bx2 &gt; div{float: left; }
#sub_02_01_04 .bx2 .txts{width: calc(100% - 71% - 2em); margin-right: 2em; padding-top: 7.375em; box-sizing: border-box;}
#sub_02_01_04 .bx2 .txts ol{}
#sub_02_01_04 .bx2 .txts ol li{position: relative; display: block; width: 100%; padding-left: 1.5em; font-size: 1.125em; letter-spacing: -0.02em; font-weight: 500; box-sizing: border-box;}
#sub_02_01_04 .bx2 .txts ol li:not(:first-child){margin-top: 1.5em;}
#sub_02_01_04 .bx2 .txts ol li em{
    position: absolute; top: 0.15em; left: 0; display: block; width: 1.54em; height: 1.54em; font-size: 0.84em; color: #000; background-color: #FFC700; text-align: center; font-style: normal; line-height: 1.54em; font-weight: 600;
    -webkit-border-radius: 50%; border-radius: 50%;
}
#sub_02_01_04 .bx2 .imgs{width: 71%;}
#sub_02_01_04 .bx2 .imgs img{display: block; width: 100%;}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #sub_02_01_04 .grid img{display: inline; width: auto; height: auto;}
    #sub_02_01_04 .grid img:nth-child(1){margin-right: 3.2rem;}
}

@media screen and (max-width:1024px){
    #sub_02_01_04 .grid{grid-column-gap: 2.5rem;}
    
    
    #sub_02_01_04 .bx2{display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr;}
    #sub_02_01_04 .bx2 strong{position: relative; top: auto; left: auto;}
    #sub_02_01_04 .bx2 strong{
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .bx2 strong span{max-width: none;}
    #sub_02_01_04 .bx2 &gt; div{float: none; }
    #sub_02_01_04 .bx2 .txts{width: 100%; margin-top: 2em; margin-right: 0; padding-top: 0; grid-row-start: 3; grid-row-end: 3;}
    #sub_02_01_04 .bx2 .txts{
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_02_01_04 .bx2 .txts ol{display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 1rem; }
    #sub_02_01_04 .bx2 .txts ol li:not(:first-child){margin-top: 0;}
    #sub_02_01_04 .bx2 .txts ol li:nth-child(n+4){margin-top: 1.5rem;}
    #sub_02_01_04 .bx2 .txts ol li:nth-child(1){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/2;
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(2){
        -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/3;
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(3){
        -ms-grid-column: 3; -ms-grid-column-span: 2; grid-column: 3/4;
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(4){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/2;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(5){
        -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/3;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(6){
        -ms-grid-column: 3; -ms-grid-column-span: 2; grid-column: 3/4;
        -ms-grid-row: 2; grid-row: 2;
    }
    
    #sub_02_01_04 .bx2 .imgs{
        width: 100%; margin-top: 1em; 
        -ms-grid-row: 2; grid-row: 2;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:1024px){
    #sub_02_01_04 .grid img:nth-child(1){margin-right: 2.5rem;}
}


@media screen and (max-width:840px){
    #sub_02_01_04 .bx2 .txts ol{-ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;}
    #sub_02_01_04 .bx2 .txts ol li:nth-child(n+3){margin-top: 1.25rem;}
    
    #sub_02_01_04 .bx2 .txts ol li:nth-child(1){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/2;
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(2){
        -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/3;
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(3){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/2;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(4){
        -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/3;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(5){
        -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/2;
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(6){
        -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/3;
        -ms-grid-row: 3; grid-row: 3;
    }
}
@media screen and (max-width:640px){
    #sub_02_01_04 .grid{-ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-column-gap: 1.4rem; padding: 0 2em;}
    #sub_02_01_04 .grid img{display: block; width: 100%;}
    #sub_02_01_04 .grid img:nth-child(1){
        margin-bottom: 1.4rem;
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .grid img:nth-child(2){
        -ms-grid-column: 1; grid-column: 1/2;
        -ms-grid-row: 2; grid-row: 2;
    }
    
    #sub_02_01_04 .bx2{padding: 1.75em 2em;}
    
    #sub_02_01_04 .bx2 .txts ol{-ms-grid-columns: 1fr; grid-template-columns: 1fr;}
    #sub_02_01_04 .bx2 .txts ol li:nth-child(n+2){margin-top: 1rem;}
    
    #sub_02_01_04 .bx2 .txts ol li:nth-child(1){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 1; grid-row: 1;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(2){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 2; grid-row: 2;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(3){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 3; grid-row: 3;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(4){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 4; grid-row: 4;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(5){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 5; grid-row: 5;
    }
    #sub_02_01_04 .bx2 .txts ol li:nth-child(6){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 6; grid-row: 6;
    }
}

/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 온라인 전시관 &gt; 온라인 전시관
	연관단어 : #sub_02_02

////////////////////////////////////////////////////////////////////////////// */
#sub_02_02{}
#sub_02_02 .bx{
    overflow: hidden; position: relative; display: block; /* background: url(../../images/1000y/content/sub_02_02_img01.png) no-repeat center center; background-size: cover;*/
    -webkit-border-radius: 1.5em 0; border-radius: 1.5em 0;
}
#sub_02_02 .bx .img{display: block; }
#sub_02_02 .bx .img img{display: block; width: 100%;}
#sub_02_02 .bx .txt{position: absolute; top: 3.75em; right: 3.75em; display: block; max-width: 22em; padding: 2.375em; background-color: rgba(16, 34, 62, 0.95); box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.25); box-sizing: border-box;}
#sub_02_02 .bx .txt strong{display: block; padding-right: 3em; font-size: 1.5em; color: #FFF; letter-spacing: -0.02em; line-height: 100%; font-weight: 600; box-sizing: border-box;}
#sub_02_02 .bx .txt strong:before{content: ""; position: absolute; top: 1.25em; right: 1.25em; display: block; width: 2.84em; height: 2.17em; background: url(../../images/1000y/content/sub_02_02_img02.svg) no-repeat center center; background-size: 100% auto;}
#sub_02_02 .bx .txt strong span{display: block; font-size: 0.67em; margin-bottom: 0.625em;}
#sub_02_02 .bx .txt p{margin-top: 1.12em; font-weight: 400; line-height: 150%; letter-spacing: -0.02em; color: #FFF;}
#sub_02_02 .bx .txt a{display: inline-block; margin-top: 2.5em; text-decoration: underline; line-height: 100%;}
#sub_02_02 .bx .txt a:after{
    content: ""; display: inline-block; width: 1.25em; height: 1.25em; margin-left: 16px; background: url(../../images/1000y/content/sub_02_02_img03.svg) no-repeat center center; background-size: 100% auto; vertical-align: bottom;
    -webkit-transform: translateX(0); transform: translateX(0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#sub_02_02 .bx .txt a:hover:after{
    -webkit-transform: translateX(0.5em); transform: translateX(0.5em);
}
#sub_02_02 .bx .txt a span{font-weight: 500; color: #FFF; line-height: 100%; font-size: 1.25em; letter-spacing: -0.02em; text-decoration: underline; text-underline-position: under;}

@media screen and (max-width: 1024px) {
    #sub_02_02 .bx .img{height: 35em; background: url(../../images/1000y/content/sub_02_02_img01.png) no-repeat center center; background-size: cover;}
    #sub_02_02 .bx .img img{display: none;}
}
@media screen and (max-width: 740px) {
    #sub_02_02 .bx .img{height: 25em;}
    #sub_02_02 .bx .txt{position: relative; top: auto; right: auto; max-width: 100%;}
}
@media screen and (max-width: 640px) {
    #sub_02_02 .bx .img{height: 20em;}
}
@media screen and (max-width: 480px) {
    #sub_02_02 .bx .img{height: 15em;}
}


/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 역사관 소개 &gt; 역사관 소개
	연관단어 : #sub_05_01

////////////////////////////////////////////////////////////////////////////// */
#sub_05_01{}
#sub_05_01 .img_box{overflow: hidden; position: relative; }
#sub_05_01 .img_box:before{content: ""; position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; background: url(../../images/1000y/content/sub_05_01_img02.png) no-repeat bottom right; background-size: auto 100%;}
#sub_05_01 .img_box:after{content: ""; position: absolute; bottom: 10%; right: 3.6%; display: block; width: 9.6%; height: 54%; background: url(../../images/1000y/content/sub_05_01_img03.svg) no-repeat right bottom; background-size: 100% 100%;}
#sub_05_01 .img_box img{display: block; width: 100%;}
#sub_05_01 .txt_box {margin-top: 3.125em; padding: 0 3.3125em; box-sizing: border-box;}
#sub_05_01 .txt_box strong{font-family: 'Eulyoo1945'; font-size: 2em; line-height: 130%; color: #333333; letter-spacing: -0.05em; font-weight: 600;}
#sub_05_01 .txt_box strong span{color: #0064CA;}
#sub_05_01 .txt_box p{font-size: 1.25em; line-height: 160%; color: #333;}
#sub_05_01 .txt_box strong + p{margin-top: 1.3em;}
#sub_05_01 .txt_box p + p{margin-top: 1.6em;} 

@media screen and (max-width:1024px){
    #sub_05_01 .txt_box {margin-top: 2.3em; padding: 0 2.5em; }
}
@media screen and (max-width:640px){
    #sub_05_01 .txt_box {margin-top: 1.5em; padding: 0; font-size: 0.9em;}
}


/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 역사관 소개 &gt; 연혁
	연관단어 : #sub_05_02

////////////////////////////////////////////////////////////////////////////// */
#sub_05_02{}
#sub_05_02 .titles{display: block; text-align: center; font-family: 'Eulyoo1945'; line-height: 130%; letter-spacing: -0.05em; color: #333; font-size: 2em; font-weight: 600;}
#sub_05_02 .titles span{color: #0064CA;}
#sub_05_02 [data-history]{margin-top: 5.75em;}
#sub_05_02 [data-history] &gt;ul{position: relative; overflow: hidden;}
#sub_05_02 [data-history] &gt;ul:before{content: ""; position: absolute; top: 1em; left: 50%; z-index: 1; display: block; width: 1px; height: 100%; margin-left: -0.5px; background-color: #0064CA;}
#sub_05_02 [data-history] &gt;ul &gt;li{position: relative; width: 50%; margin-bottom: 1.875em; padding-right: 3.4375em; text-align: right; box-sizing: border-box;}
#sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2){text-align: left; margin-left: 50%; padding-right: 0; padding-left: 3.4375em;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;strong{display: block; font-size: 2.375em; line-height: 1; color: #222; font-weight: 600; letter-spacing: -0.05em;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;strong:before{
    content: ""; opacity: 1; position: absolute; right: -3.75px; top: 0.4em; z-index: 30; display: block; width: 7px; height: 7px; background-color: #0064CA;
    -webkit-border-radius: 50%; border-radius: 50%;
    -webkit-transition: opacity .3s ease; transition: opacity .3s ease;
}
#sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2) &gt;strong:before{right: auto; left: -3.25px;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;strong:after{content: ""; position: absolute; top: 0.48em; right: 0; display: block; width: 1.05em; height: 1px; background-color: #D9D9D9;}
#sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2) &gt;strong:after{right: auto; left: 0;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li:after{
    content: ""; opacity: 1; position: absolute; right: -8.5px; top: 10px; z-index: 0; display: block; width: 17px; height: 17px; background-color: #C4D8EC;
    -webkit-border-radius: 50%; border-radius: 50%;
    -webkit-transform: scale(0); transform: scale(0);
    -webkit-transition: opacity .3s ease; transition: opacity .3s ease;
}
#sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2) &gt;ul &gt;li:after{right: auto; left: -8.5px;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li[data-hit="on"]:after {
    opacity: 1;
    -webkit-animation-name: history;
    animation-name: history;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

@-webkit-keyframes history {
    0%,100% {
        opacity: 1;
        transform: scale(0)
    }

    25% {
        opacity: 1;
        transform: scale(0.75)
    }
    
    70% {
        opacity: 1;
        transform: scale(1.25)
    }
    99% {
        opacity: 0;
        transform: scale(0.75)
    }
}

@keyframes history {
    0%,100% {
        opacity: 1;
        transform: scale(0)
    }

    25% {
        opacity: 1;
        transform: scale(0.75)
    }
    
    70% {
        opacity: 1;
        transform: scale(1.25)
    }
    99% {
        opacity: 0;
        transform: scale(0.75)
    }
}

#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul{margin-top: 2.5em;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li{}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .txt_box{display: inline-flex; }
#sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-1) &gt;ul &gt;li .txt_box{flex-direction: row-reverse; }
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .txt_box em,
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .txt_box span{font-style: normal; font-size: 1.125em; line-height: 1; color: #222; letter-spacing: -0.05em;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .txt_box span{margin-left: 1.625em; font-weight: 500;}
#sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2) &gt;ul &gt;li .txt_box span{margin-left: 0; margin-right: 1.625em}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .img_box{margin-top: 2.5em;}
#sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .img_box img{display: block; max-width: calc(100% - 16px); margin: 0 0 0  auto; box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);}
#sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2) &gt;ul &gt;li .img_box img{margin: 0 auto 0 0;}

@media screen and (max-width: 1024px) {
    #sub_05_02 [data-history]{margin-top: 4.25em;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul,
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .img_box{margin-top: 1.75em;}
}
@media screen and (max-width: 840px) {
    #sub_05_02 [data-history] &gt;ul &gt;li{padding-right: 2.5em;}
    #sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2){padding-left: 2.5em;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;strong:after{width: 0.7em;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .txt_box{display: block; }
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .txt_box em{display: block;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .txt_box span{display: block; margin-left: 0; margin-bottom: 0.4em;}
    #sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2) &gt;ul &gt;li .txt_box span{margin-right: 0;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul,
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .img_box{margin-top: 1.25em;}
    

}
@media screen and (max-width: 640px) {
    #sub_05_02 [data-history] &gt;ul{overflow: visible;}
    #sub_05_02 [data-history] &gt;ul:before{left: 0; margin-left: 0;}
    #sub_05_02 [data-history] &gt;ul &gt;li{margin-bottom: 3em;}
    #sub_05_02 [data-history] &gt;ul &gt;li:last-child{margin-bottom: 0;}
    #sub_05_02 [data-history] &gt;ul &gt;li,
    #sub_05_02 [data-history] &gt;ul &gt;li:nth-child(2n-2){width: 100%; text-align: left; padding-right: 0; padding-left: 2.5em; margin-left: 0; margin-right: 0;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;strong{font-size: 2em;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;strong:before{right: auto; left: -3.25px;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;strong:after{top: 0.5em; right: auto; left: 0;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li:after{top: 7px; right: auto; left: -8.5px;}
    #sub_05_02 [data-history] &gt;ul &gt;li &gt;ul &gt;li .img_box img{margin: 0 auto 0 0;}
}




/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 역사관 소개 &gt; 조직 및 주요업무
	연관단어 : #sub_05_03

////////////////////////////////////////////////////////////////////////////// */
#sub_05_03{}
#sub_05_03 .table tr th{font-weight: 500;}
#sub_05_03 .table tr td{color: #444;}
#sub_05_03 .table tr td b{font-weight: 500;}
#sub_05_03 .table tr td [data-list-bullet="2"] li{font-size: 1em;}




/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 사이트 맵
	연관단어 : #sub_sitemap

////////////////////////////////////////////////////////////////////////////// */

#sub_sitemap{}
#sub_sitemap&gt;ul{display: flex;flex-wrap: wrap;margin: 0 -1.25em;}
#sub_sitemap&gt;ul&gt;li{width: calc(100% /3);padding:0 1.25em;box-sizing: border-box;}
#sub_sitemap&gt;ul&gt;li:nth-child(n+4){padding-top: 2.5em;}
#sub_sitemap&gt;ul&gt;li&gt;.in{height: 100%; min-height: 21.5em; padding: 2em 2.5em;box-sizing: border-box;background-color: #F7F8FA;border-radius: 8px;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;strong{font-size: 1.5em;color: #222;font-weight: 600;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul{margin-top: 1.5em;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul&gt;li&gt;a{font-size: 1.125em;color: #444;font-weight: 500;transition: all .3s;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul&gt;li&gt;a:hover{color: #0064CA;text-decoration: underline;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul&gt;li~li{margin-top: 0.8em;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul&gt;li&gt;ul{margin-top: 0.5em;padding: 0.8em 0.8em; background-color: #fff;border-radius: 8px;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul&gt;li&gt;ul&gt;li~li{margin-top: 0.3em;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul&gt;li&gt;ul&gt;li&gt;a{font-size: 1em;color: #444;font-weight: 500;transition: all .3s;}
#sub_sitemap&gt;ul&gt;li&gt;.in&gt;ul&gt;li&gt;ul&gt;li&gt;a:hover{color: #0064CA;text-decoration: underline;}


@media screen and (max-width:1024px){
    #sub_sitemap&gt;ul&gt;li{width: 50%;}
    #sub_sitemap&gt;ul&gt;li:nth-child(n+4){padding-top: 0;}
    #sub_sitemap&gt;ul&gt;li:nth-child(n+3){padding-top: 2.5em;}
}

@media screen and (max-width:640px){
    #sub_sitemap&gt;ul&gt;li{width: 100%;}
    #sub_sitemap&gt;ul&gt;li~li{padding-top: 1.2em !important;}
    #sub_sitemap&gt;ul&gt;li&gt;.in{min-height: 0; padding: 1.5em 1.5em;}
}


/* //////////////////////////////////////////////////////////////////////////////

	메뉴구조 : 본인인증서비스
	연관단어 : #login_wrap

////////////////////////////////////////////////////////////////////////////// */
#login_wrap{}
#login_wrap [data-infombox="1"]{}
#login_wrap [data-infombox="1"] + div{margin-top: 1.875em;}
#login_wrap [data-infombox="1"] + div{display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;}
#login_wrap [data-infombox="1"] + div &gt; div{position: relative; padding: 2.5em 2.5em 7.375em; border: 1px solid #E2E2E2; box-sizing: border-box;}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(1){
    -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
    -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1;
}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(2){
    margin-left: 2.4rem;
    -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2/3;
    -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1;
}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(3){
    margin-left: 2.4rem;
    -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3/4;
    -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1;
}
#login_wrap [data-infombox="1"] + div &gt; div.sns-login{padding: 2.5em 2.5em 9.75em;}
#login_wrap [data-infombox="1"] + div &gt; div:before{content: ""; display: block; width: 4.3125em; height: 4.0625em; margin-bottom: 2em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(1):before{background-image: url(../../images/1000y/content/login_wrap_img01.svg);}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(2):before{background-image: url(../../images/1000y/content/login_wrap_img02.png);}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(3):before{background-image: url(../../images/1000y/content/login_wrap_img03.svg);}
#login_wrap [data-infombox="1"] + div &gt; div h5{font-size: 1.5em; letter-spacing: -0.02em; font-weight: 600; line-height: 100%; color: #222;}
#login_wrap [data-infombox="1"] + div &gt; div h5:before{display: block; margin-bottom: 0.625em; font-size: 0.67em; color: #0064CA; letter-spacing: -0.02em; font-weight: 600;}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(1) h5:before{content: "01";}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(2) h5:before{content: "02";}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(3) h5:before{content: "03";}
#login_wrap [data-infombox="1"] + div &gt; div p{line-height: 150%; letter-spacing: -0.02em; color: #444;}
#login_wrap [data-infombox="1"] + div &gt; div p strong{display: none;}
#login_wrap [data-infombox="1"] + div &gt; div &gt; span,
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div{position: absolute; bottom: 2.5em; left: 0; display: block; width: 100%; padding: 0 2.5em; text-align: center; box-sizing: border-box;}
#login_wrap [data-infombox="1"] + div &gt; div &gt; span a,
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a{
    position: relative; display: inline-block; width: 100%; max-width: 13.06em; height: calc(2.78em - 2px); line-height: calc(2.78em - 2px); font-size: 1.125em; border-width: 1px; border-style: solid; letter-spacing: -0.02em; color: #FFF; font-weight: 500; text-decoration: none; box-sizing: border-box;
    -webkit-border-radius: 4px; border-radius: 4px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(1) &gt; span a{background-color: #0064CA; border-color: #0064CA;}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(2) &gt; span a{background-color: #10223E; border-color: #10223E;}
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a:nth-child(1){background-color: #17AA58; border-color: #17AA58;}
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a:nth-child(2){background-color: #FAE100; border-color: #FAE100;}
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a:not(:first-child){margin-top: 0.88em; color: #222;}
#login_wrap [data-infombox="1"] + div &gt; div &gt; span a:hover{background-color: #fff;}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(1)&gt; span a:hover{color: #0064CA;}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(2)&gt; span a:hover{color: #10223E;}
#login_wrap [data-infombox="1"] + div &gt; div &gt; span a:after{
    content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.3em; margin-bottom: 0.2em; background: url(../../images/1000y/content/login_wrap_img04.svg) no-repeat center center; background-size: 100% auto; vertical-align: middle;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(1) &gt; span a:hover:after{background-image: url(../../images/1000y/content/login_wrap_img05.svg);}
#login_wrap [data-infombox="1"] + div &gt; div:nth-child(2) &gt; span a:hover:after{background-image: url(../../images/1000y/content/login_wrap_img06.svg);}
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a i{display: inline-block; margin-right: 0.2em; font-style: normal;}
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a i:before{content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.3em; margin-bottom: 0.2em; background: url(../../images/1000y/content/login_wrap_img07.svg) no-repeat center center; background-size: 100% auto; vertical-align: middle;}
#login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a:nth-child(2) i:before{background-image: url(../../images/1000y/content/login_wrap_img08.svg);}
#login_wrap [data-list-bullet="1"] a[target="_blank"]{display: inline-block; color: #0064CA;}
#login_wrap [data-list-bullet="1"] a[target="_blank"]:after{content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.1em; margin-bottom: 0.2em; background: url(../../images/1000y/skin/icon_blank02.svg) no-repeat center center; background-size: 100% auto; vertical-align: middle;}


@media screen and (max-width: 1024px){
    #login_wrap [data-infombox="1"] + div{-ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-column-gap: 2rem;}
    #login_wrap [data-infombox="1"] + div &gt; div:nth-child(1){
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1;
    }
    #login_wrap [data-infombox="1"] + div &gt; div:nth-child(2){
        margin-left: 0; margin-top: 2rem;
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2;
    }
    #login_wrap [data-infombox="1"] + div &gt; div:nth-child(3){
        margin-left: 0; margin-top: 2rem;
        -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2;
        -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3;
    }
    
    
    
    
    
    
    #login_wrap [data-infombox="1"] + div &gt; div,
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login{padding: 2.5em 2.5em 3em 8.3em; box-sizing: border-box;}
    #login_wrap [data-infombox="1"] + div &gt; div:before{position: absolute; top: 2.5em; left: 2.5em;}
    #login_wrap [data-infombox="1"] + div &gt; div &gt; span, 
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div{position: relative; bottom: auto; left: auto; margin-top: 1.2em; padding: 0; text-align: left;}
    #login_wrap [data-infombox="1"] + div &gt; div &gt; span a, 
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div a{max-width: 11.5em; text-align: center;}
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a{margin-right: 0.4em;}
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a:last-child{margin-right: 0;}
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a:not(:first-child){margin-top: 0;}
}

@media screen and (max-width: 640px){
    #login_wrap [data-infombox="1"] + div &gt; div, 
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login{padding: 2em 2em 2.5em;}
    #login_wrap [data-infombox="1"] + div &gt; div:before{display: none;}
}
@media screen and (max-width: 480px){
    #login_wrap [data-infombox="1"] + div &gt; div &gt; span, 
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div{width: 14em;}
    #login_wrap [data-infombox="1"] + div &gt; div.sns-login &gt;div &gt;a:not(:first-child){margin-top: 0.4em;}
}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	메뉴구조 : 페이지 준비중 
	연관단어 : [data-skin="ing_box"]
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
[data-skin="ing_box"]{display: flex;align-items: center;justify-content: center;flex-direction: column; flex-wrap: wrap; height: 46.25em; text-align: center; border: 4px solid #ECECEC;background-image: url(../../images/1000y/layout/img_page_ing.png);background-size: cover;background-repeat: no-repeat;background-position: center;}
[data-skin="ing_box"]&gt;strong{display: block; width: 100%; margin-bottom: 0.5em; font-size: 3.33em;font-weight: 500;color: #222;}
[data-skin="ing_box"]&gt;strong&gt;em{font-style: inherit; color: #0064CA;}
[data-skin="ing_box"]&gt;p{display: block;margin: 0; font-size: 1.25em;color: #444;}

@media screen and (max-width: 1024px) {
    [data-skin="ing_box"]{height: 35em;}
}
@media screen and (max-width: 640px) {
    [data-skin="ing_box"]{height: 25em;}
	[data-skin="ing_box"]&gt;strong{font-size: 2.5em;line-height: 1.2;}
}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	[data-infombox]
		1: 본인확인 서비스 상단
		2: 홍보실 상단
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
[data-infombox]{}
[data-infombox="1"]{padding: 1.8em 23em 1.8em 2em;border: 0.625em solid #F7F8FA;}
[data-infombox="1"]&gt;strong{display: block; padding-bottom: 0.8em; font-size:1.25em;font-weight: 500;color: #0064CA;}
[data-infombox="1"]&gt;p{font-size:1.125em;font-weight: 400;color: #444;}

[data-infombox="2"]{position: relative;}
[data-infombox="2"]::before{content: "";position: absolute;width: 100%;height: 35em;top: 0;left: 0;border-radius: 24px 0;background-image: url(../../images/1000y/content/bg_information_01.png);background-position: center;background-repeat: no-repeat;background-size: cover;z-index: -1;}
[data-infombox="2"]&gt;.in{padding: 4.37em 4.37em 2.5em;}
[data-infombox="2"]&gt;.in&gt;strong{position: relative; display: block;font-size: 2.125em;color: #0064CA;font-weight: 600;font-family: 'Eulyoo1945'}
[data-infombox="2"]&gt;.in&gt;strong::before{content: "";position: absolute;width: 2px;height: 90%;left: 0;bottom: calc(100% + 0.68em);background-color: #0064CA;}
[data-infombox="2"]&gt;.in&gt;p{display: block; padding-top: 1.875em;}


@media screen and (max-width: 1290px){
	[data-infombox="1"]{padding:1.8em 2em;}
}

@media screen and (max-width: 640px){
	[data-infombox="1"]{padding: 1em 1.2em;}

	[data-infombox="2"]&gt;.in{padding: 2em;}
	[data-infombox="2"]&gt;.in&gt;strong::before{display: none;}
}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	[data-infom-list]
		1: 국보·보물·사적 
		
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
[data-infom-list]{}
[data-infom-list="1"]{padding-bottom: 1.85em; border-bottom: 1px dashed #D9D9D9;}
[data-infom-list="1"]&gt;.top{display: flex;justify-content: space-between;}
[data-infom-list="1"]&gt;.top&gt;strong{position: relative; padding-left: 1em;font-size:2.12em;color: #0064CA;font-weight: 600;font-family: 'Eulyoo1945';box-sizing: border-box;word-break: keep-all;}
[data-infom-list="1"]&gt;.top&gt;strong::before{content: "";position: absolute;width: 0.7em;height: 2px; background-color:#0064CA;top: 0.75em ;left: 0;}
[data-infom-list="1"]&gt;.top&gt;[data-division]{position: relative;display: block; flex-shrink: 0; width: 4.75em;height: 2em;top: 0.2em; background: rgba(0, 100, 202, 0.1);border-radius: 500px;}
[data-infom-list="1"]&gt;.top&gt;[data-division="4"],
[data-infom-list="1"]&gt;.top&gt;[data-division="5"]{width: 7.31em;}
[data-infom-list="1"]&gt;.top&gt;[data-division]::before{content:'국보';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); font-weight: 500;color: #0064CA;}
[data-infom-list="1"]&gt;.top&gt;[data-division="2"]::before{content:'보물';}
[data-infom-list="1"]&gt;.top&gt;[data-division="3"]::before{content:'사적';}
[data-infom-list="1"]&gt;.top&gt;[data-division="4"]::before{content:'유형문화재';}
[data-infom-list="1"]&gt;.top&gt;[data-division="5"]::before{content:'문화재자료';}
[data-infom-list="1"]&gt;.midd&gt;ul{display: flex;flex-wrap: wrap;padding-top: 2.35em;}
[data-infom-list="1"]&gt;.midd&gt;ul&gt;li{display: flex; align-items: baseline; width: calc(100% / 3);margin: 0.3em 0;padding-right: 1em;}
[data-infom-list="1"]&gt;.midd&gt;ul&gt;li&gt;p,
[data-infom-list="1"]&gt;.midd&gt;ul&gt;li&gt;span{flex-shrink: 0; padding-left: 2px;font-size: 1em !important; color: #444;font-weight: 400;line-height: 1.4;}
[data-infom-list="1"]&gt;.midd&gt;ul&gt;li&gt;p{flex-shrink: 0; font-weight: 500 !important;}

[data-infom-list="1"] + p {padding: 2.2em 0;}


@media screen and (max-width: 1024px){
    [data-infom-list="1"]&gt;.top{display: grid; grid-row-gap: 1rem;}
    [data-infom-list="1"]&gt;.top&gt;strong{grid-row-start: 2; grid-row-end: 2; line-height: 1.3;}
    [data-infom-list="1"]&gt;.top&gt;[data-division]{grid-row-start: 1; grid-row-end: 1;}
    [data-infom-list="1"]&gt;.midd&gt;ul{padding-top: 1.5em;}
    [data-infom-list="1"]&gt;.midd&gt;ul&gt;li{ width: calc(100% / 2);}
	[data-infom-list="1"]&gt;.midd&gt;ul&gt;li&gt;span{flex-shrink: 1;}
}

@media screen and (max-width: 640px){
    [data-infom-list="1"]{padding-bottom: 1.5em;}
	[data-infom-list="1"]&gt;.midd&gt;ul&gt;li{ width: 100%;}
    [data-infom-list="1"] + p {padding: 1.5em 0;}
}

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

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	메뉴구조 : 본인확인 서비스
	연관단어 : [data-box-list]
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
[data-box-list]{}
[data-box-list="1"]{ }



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	메뉴구조 : 성주사지&gt;국보·보물·사적 
	연관단어 : [data-slide="img"]
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.card_news {
    overflow: hidden; position:relative; padding: 2.5em 2.5em 1.25em; background-color: #4D5561; box-sizing: border-box;
    -webkit-border-radius: 24px 0px; border-radius: 24px 0px;
}
.card_news .head {position:relative; z-index:2; width: 100%; height: 34.3em;  background-color: #F7F8FA; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);}
.card_news .head span{overflow: hidden; position: relative; display: block; width: 100%; height: 100%;}
.card_news .head img {
    position: absolute; top: 50%; left: 50%; display: block; width:auto; max-width: none !important; height: 101%;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.card_news .head &gt;img{max-height: 100%;}
.card_news .head .controls{
    position: absolute; top: 50%; left: 50%; width: 100%; background-color: rgba(0, 0, 0, 0.8); box-sizing: border-box;
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.card_news .head .controls &gt;.count{display: none;}
.card_news .head .controls &gt;a{
    position:absolute; top:50%; display: block; width:3.25em; height:3.25em; margin-top: calc(-3.25em / 2); background-color: rgba(255, 255, 255, 0.7); background-repeat: no-repeat; background-position: center center; background-size: 0.75em 1.25em; box-shadow: 5px 5px 20px rgb(0 0 0 / 20%); text-indent: -9999px;
    -webkit-border-radius: 50%; border-radius: 50%;
    -webkit-transition: background-color .3s; transition: background-color .3s;
}
.card_news .head .controls &gt;.btn_left:hover,
.card_news .head .controls &gt;.btn_right:hover{background-color: rgba(255, 255, 255, 1);}
.card_news .head .controls &gt;.btn_left{left: calc(-3.25em / 2); background-image:url(../../images/1000y/skin/icon_slide_prev_btn.svg);}
.card_news .head .controls &gt;.btn_right{right: calc(-3.25em / 2); background-image:url(../../images/1000y/skin/icon_slide_next_btn.svg);}


.card_news .midd {overflow: hidden; position:relative; z-index:5; margin:1.5625em auto 0; padding-bottom: 1.25em; text-align: center; box-sizing: border-box;}
.card_news .midd:after{content: ""; display: block; clear: both;}
.card_news .midd ul {position: relative; width: auto; max-width: 20000px; display: block; margin: 0 auto; white-space: nowrap; line-height: 1;}
.card_news .midd ul:after{content: ""; display: block; clear: both;}
.card_news .midd ul li {display: inline-block; width: calc(14.625em +  2.25em); margin-left: -3px; padding-right: 2.25em; box-sizing: border-box; white-space: nowrap;  line-height: 1;}
.card_news .midd ul li:nth-child(1){margin-left: 0;}
.card_news .midd ul li:last-child{width: 14.625em; margin-right: 0; padding-right: 0;}
.card_news .midd ul li a { position:relative; display:block; width: 100%; height: 7.6875em; background-color: #F7F8FA; box-shadow: 0.625em 0.625em 1.25em rgba(0, 0, 0, 0.2);}
.card_news .midd ul li a:before{
    content: ""; position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; background-color: transparent; border: 1px solid #5C626A; box-sizing: border-box;
    -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.card_news .midd ul li.on a:before{border: 4px solid #0064CA;}
.card_news .midd ul li.on a{border-color: #0064CA;}
.card_news .midd ul li a span{overflow: hidden;position: relative; display: block; width: 100%; height: 100%;}
.card_news .midd ul li a img {
	position: absolute; top: 0; left: 50%; display:block; width: auto; height: 100%;
	transform: translateX(-50%); -webkit-transform: translateX(-50%);
    -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.card_news + [class*="codeView"]{margin-top: 3.34em !important; }
.card_news + [class*="codeView"] + .board_butt{margin-top: 2.5em !important; }
.board_butt .button.small .typeA,
.board_butt .button.small .typeA *{min-width: 6em; background: #0064CA;}
.board_butt .button.small .typeA:hover{background: #0050A2;}
.board_butt .button.small .typeA a:before{content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.2em; background: url(../../images/1000y/skin/board_list.svg) no-repeat center center; background-size: 100% auto;}

@media (max-width: 1290px){
    .card_news .head{height: 39em;}
}
@media (max-width: 1024px){
    .card_news .head{height: 30em;}
    .card_news .midd{margin: 1.25em auto 0;}
    .card_news .midd ul li{font-size: 0.8em;}
}
@media (max-width: 840px){
    .card_news .head{height: 24em;}
}
@media (max-width: 640px){
    .card_news{padding: 1.5em 1.5em 0.25em;}
    .card_news .head{height: 21em;}
    .card_news .midd{margin: 1em auto 0;}
    .card_news .midd ul li{font-size: 0.6em;}
    .card_news .head .controls &gt;a{font-size: 0.8em;}
    
    .card_news + [class*="codeView"],
    .card_news + [class*="codeView"] + .board_butt{margin-top: 2em !important; }
}
@media (max-width: 480px){
    .card_news .head{height: 15em;}
}




/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	[data-skin='grid']
	: 전시안내
	
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
[data-skin='grid']{padding: 0 4.37em;}
[data-skin='grid'] ul li{transition: all .3s linear;}
[data-skin='grid'] .cell{display: flex;justify-content: space-between;}
[data-skin='grid'] .cell+.cell{margin-top: 2em;}
[data-skin='grid'] .cell_3_2{position: relative; width: calc(100% * 0.7);}
[data-skin='grid'] .cell_3_1{position: relative; width: calc(100% - (100% * 0.7) - 2em);}

[data-skin='grid'] .cell_3_1.pad_top_1{padding-top: 20%}
[data-skin='grid'] .cell_3_2.pad_top_1{padding-top: 21.5%}
[data-skin='grid'] .cell_3_2.pad_top_2{padding-top: 38%}

[data-skin='grid'] .column_2_1.pad_top_1{padding-top: 65.5%;}


[data-skin='grid'] .column{flex-direction: column;height: 100%;}
[data-skin='grid'] .column_2_1{position: relative;}

[data-skin='grid'] img{position: absolute;display: block; width: 100%;height: 100%;top: 0;left: 0;filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));}

[data-skin='grid'] ul li{position: relative;}


@media screen and (max-width: 640px){
	[data-skin='grid']{padding: 0 2em;}
	[data-skin='grid'] img{position: initial;}
	[data-skin='grid'] .cell{flex-wrap: wrap;}
	[data-skin='grid'] .cell+.cell{margin-top: 1em;}
	[data-skin='grid'] .cell_3_2{width: 100%;}
	[data-skin='grid'] .cell_3_1{width: 100%;margin-top: 1em;}

	[data-skin='grid'] .cell_3_1.pad_top_1,
	[data-skin='grid'] .cell_3_2.pad_top_1{padding-top: 0;}
	[data-skin='grid'] .cell_3_2.pad_top_2{padding-top: 0;margin-top: 1em;}
	
	[data-skin='grid'] .column{flex-direction: row;}
	[data-skin='grid'] .column_2_1{width: calc((100% - 1em) / 2);}
	[data-skin='grid'] .column_2_1.pad_top_1{padding-top: 0;}
}</pre></body></html>