@charset "utf-8";

.sub_visual{position:relative; margin-left:120px; height:280px; background:url(/GCM/img/sub/sub01_visual.jpg) no-repeat center center/cover; overflow:hidden; border-radius:20px 0px 0px 20px}
.sub_visual.sub02{background-image:url(/GCM/img/sub/sub02_visual.jpg)}
.sub_visual.sub03{background-image:url(/GCM/img/sub/sub03_visual.jpg)}
.sub_visual.sub04{background-image:url(/GCM/img/sub/sub04_visual.jpg)}
.sub_visual.sub05{background-image:url(/GCM/img/sub/sub05_visual.jpg)}
.sub_visual h3{display:flex; align-items:center; padding-bottom:20px; padding-left:4.8%; ; height:100%; font-size:2.38em; text-shadow:0px 1px 2px rgba(0,0,0,.2); color:#fff}
.sub_visual h3.pb{padding-bottom:20px}
.sub_visual h3:not(.pb){padding-bottom:0px}
#tab{position:relative; margin-top:-50px; margin-left:180px; padding:34px 5%; background:var(--color); border-radius:15px 0px 0px 80px; z-index:1;}
#tab ul li{display:inline-block; margin-right:min(3vw)}
#tab ul li a{display:inline-block; position:relative; padding:0px 5px; font-size:1.22em; color:#222}
#tab ul li.on a{font-weight:bold; }
#tab ul li.on a:before{display:block; content:''; position:absolute; bottom:6px; left:0px; width:100%; height:9px; border-radius:10px; background:rgba(255,255,255,.5); z-index:-1}
#tab a[target=_blank]{padding-right:15px}
#tab a[target=_blank]:before{display:block; content:''; position:absolute; right:0px; width:13px; height:13px; background:url(/GCM/img/inc/ic_target.svg) no-repeat center center;}
#contents{margin:auto; width:86%; max-width:1400px}
#detail_con{word-break:keep-all; padding:min(80px, 15%) 0px min(120px, 20%)}
footer{border-top:1px solid #ccc}

/* 준비중 */
.ready {text-align:center; margin:100px 0px 50px}
.ready p.stit {display:inline-block; padding:10px 100px; color:#fff; background:#000;}
.ready p.con {position:relative; margin-top:30px; margin-bottom:200px; font-size:25px; ; line-height:140%; transform:rotate(0.032deg)}
.ready p.con:after {display:block; content:""; position:absolute; left:50%; top:160%; width:1px; height:125px; background:#a8a8a8;}
.ready .end {color:#4e4e4e; font-size:.9em; transform:rotate(0.032deg)}

h4{position:relative; margin-top:30px; padding-left:35px; font-size:1.44em; color:var(--color-txt);}
h4:before{display:block; content:''; position:absolute; left:0px; top:2px; width:30px; height:30px;  -webkit-mask: url(/GCM/img/sub/bl01.svg) no-repeat left top; -ms-mask: url(/GCM/img/sub/bl01.svg) no-repeat left top; -moz-mask: url(/GCM/img/sub/bl01.svg) no-repeat left top; background-color: var(--color)}
.bl02{position:relative; padding-left:20px; font-weight:bold; font-size:1.125em}
.bl02:before,
.bl02:after{display:block; content:''; position:absolute; left:0px; top:7px; width:5px; height:13px; background-color: var(--color)}
.bl02:after{transform:rotate(90deg)}
:not(ul).bl03,
ul.bl03>li{position:relative; margin:2px 0px; padding-left:10px}
:not(ul).bl03{margin-top:20px}
:not(ul).bl04,
ul.bl04>li{position:relative; margin:2px 0px; padding-left:13px}
:not(ul).bl03:before,
ul.bl03>li:before{display:block; content:''; position:absolute; left:0px; top:.5em; width:5px; height:5px; background-color:#333}
:not(ul).bl04:before,
ul.bl04>li:before{display:block; content:''; position:absolute; left:0px; top:.5em; width:8px; height:2px; background-color:#ccc; font-size:.95rem}
:not(ul).nobl:before,
ul.nobl>li:before{display:none !Important}
:not(ul).refer:before,
ul.refer>li:before{display:inline; content:'※ '}

.para01{margin:50px 0px 0px 15px}
.para02{margin:20px 0px 0px 15px}
.para02 :not(ul).bl04, .para02 ul.bl04{margin:5px 0px 10px 13px}
.para02 .bl03 :not(ul).bl04, .para02 .bl03 ul.bl04{margin-left:0px}
.tbox{padding:30px; border-radius:20px 10px; border:5px solid var(--color01)}
h4+.tbox{margin-top:10px}
.graybox{padding:20px; padding:max(4%, 20px) max(4.5%, 20px); background:#f5f5f5; border-radius:10px}
.conbtn{padding:20px 20px 18px; color:#fff; background:var(--color01); border-radius:5px; transition:all ease .3s}
.conbtn:hover{border-bottom-right-radius:25px}
table.data{width:100%; font-weight:normal;}
table.data+table.data{margin-top:20px}
table.data{border-top:4px solid #333}
table.data thead th{background:#f0f0f0;}
table.data td, table.data th{padding:15px max(1%, 5px) 12px; font-size:.88em; border:1px solid #ddd; border-top:0px}
table.data th:last-child,
table.data td:last-child{border-right:0px}
table.data th:first-child,
table.data td:first-child{border-left:0px}

/* 기념관소개 */
.greeting{}
.greeting .summary{margin:auto; padding-top:min(57%, 365px); text-align:center; max-width:765px; background:url(/GCM/img/sub/greeting_img01.jpg) no-repeat center top;  background-size:min(100%, 643px); font-size:1.1em}
.greeting>div{margin-top:5%; padding-top:6%; border-top:1px solid #ddd; overflow:hidden}
.greeting>div .img{float:left; width:53%;}
.greeting>div .con{float:left; width:47%;}
.greeting>div .con .txt{margin-bottom:30px}
.greeting>div .con .name{font-weight:bold;}
.memorial{}
.memorial>div{overflow:hidden}
.memorial>div+div{margin-top:min(60px, 10%)}
.memorial>div .img{float:left; width:51%}
.memorial>div .img img{border-radius:10px; }
.memorial>div .con{float:left; width:49%;}
.memorial>div .con .txt{margin:20px 0px 40px}
.memorial>div .con .txt .txt01{display:inline-block; padding:5px 5px 0px; color:#fff; border-radius:3px; background:var(--color02);}
.memorial>div .con .txt .txt02{display:inline-block; padding:5px 5px 0px;  color:#fff; border-radius:3px; background:var(--color-txt);}
.memorial>div .con .name{font-weight:bold;}
.memorial>div:last-child .img{float:right; text-align:right}
.organization{}
.organization .mem{position:relative; text-align:center;}
.organization .mem img{border-radius:5px}
.organization .mem>p{margin-top:5px}
.organization .organ01{position:relative;}
.organization .organ02{position:relative; margin:30px auto; width:90%; max-width:900px; overflow:hidden;}
.organization .organ02>li{float:left; position:relative; max-width:40%}
.organization .organ02>li:last-child{float:right}
.organization .organ01:before{display:block; content:''; position:absolute; bottom:-140px; left:50%; width:1px; height:115px; background:#ddd; border-radius:50px}
.organization .organ01 .mem:before{display:block; content:''; position:absolute; bottom:-25px; left:calc(50% - 6px); width:12px; height:12px; background:#ddd; border-radius:50px}
.organization .organ02:before{display:block; content:''; position:absolute; top:calc(50% - 14px); left:min(calc(180px + 3%), calc(40% + 3%)); right:min(calc(180px + 3%), calc(40% + 3%));height:1px; background:#ddd}
.organization .organ02>li:before{display:block; content:''; position:absolute; top:calc(50% - 20px); width:12px; height:12px; background:#ddd; border-radius:50px}
.organization .organ02>li:first-child:before{right:-20%}
.organization .organ02>li:last-child:before{left:-20%}
.organization .guide{position:relative; text-align:center; margin-top:30px; margin-top:max(7%, 30px);}
.organization .guide:before{display:block; content:''; position:absolute; top:50%; width:100%; height:1px; border-top:1px dashed #ccc; z-index:-1;}
.organization .guide span{display:inline-block; padding:8px 10px 3px; min-width:140px; background:#ddd; border-radius:3px}
.organization .organ03{display:flex; flex-wrap:wrap; justify-content:space-around}
.organization .organ03>li{margin-top:30px; width:13%;}

/* 이용안내 */
.info_time{display:flex; justify-content:space-between}
.info_time>dl{position:relative; padding:20px; padding:max(3%, 30px) max(3.5%, 30px); --bfw:62px; padding-left:calc(var(--bfw) + 8%); width:49%; border-radius:8px; background:#f0f0f0;}
.info_time>dl:before{display:block; content:'OPEN'; position:absolute; left:9%; top:50%; margin-top:calc(var(--bfw) / -2); width:var(--bfw); height:var(--bfw); background:url(/GCM/img/sub/info_ic01.png) no-repeat center center/var(--bfw); font-size:0px}
.info_time>dl:nth-child(2):before{content:'CLOSED'; background-image:url(/GCM/img/sub/info_ic02.png)}
.info_time>dl dt{font-weight:bold; font-size:1.22em;}
.info_time>dl dd{margin-top:10px;}
.info_free{margin-top:10px;}
.info_free>li{display:inline-block; margin-top:3px}
.info_free>li:After{display:inline; content:', ';}
.info_etiquette{display:flex; flex-wrap:wrap; border-top:4px solid var(--color01)}
.info_etiquette>li{flex-shrink:1; flex-grow:1; flex-basis:50%; position:relative; padding:30px 10px; --bfw:40px; padding-left:calc(var(--bfw) * 2); border-bottom:1px dashed #ddd}
.info_etiquette>li:before{display:block; content:''; position:absolute; left:20px; top:50%; margin-top:calc(var(--bfw) / -2); width:var(--bfw); height:var(--bfw); background:url(/GCM/img/sub/info_etiquette_ic01.png) no-repeat center center/var(--bfw);}
.info_etiquette>li:nth-child(2):before{background-image:url(/GCM/img/sub/info_etiquette_ic02.png)}
.info_etiquette>li:nth-child(3):before{background-image:url(/GCM/img/sub/info_etiquette_ic03.png)}
.info_etiquette>li:nth-child(4):before{background-image:url(/GCM/img/sub/info_etiquette_ic04.png)}
.info_etiquette>li:nth-child(5):before{background-image:url(/GCM/img/sub/info_etiquette_ic05.png)}
.info_etiquette>li:nth-child(6):before{background-image:url(/GCM/img/sub/info_etiquette_ic06.png)}
.facility{display:flex; justify-content:space-between}
.facility>dl{flex-basis:48%; text-align:center;}
.facility>dl>dt{padding:40px 20px; background:#f0f0f0; border-radius:10px; font-size:.9em; color:#666}
.facility>dl>dt span{display:block; font-weight:bold; font-size:2.77rem; color:#222}
.facility>dl>dd{margin-top:50px; margin-top:max(10%, 30px)}
.facility>dl>dd ul{display:flex; justify-content:space-between; margin-top:30px; margin-top:max(12%, 30px)}
.facility>dl>dd ul li{flex-shrink:1; flex-grow:1; margin-right:5px}
.facility>dl>dd ul li span{display:block; margin-top:5px; color:#484848}
.location>.map{padding:max(10px, 1.5%); background:#f0f0f0; height:400px;}
.location>.con{margin-top:20px;}

/* 전시안내 */
.exhibition>div{overflow:hidden}
.exhibition>div+div{margin-top:5%; padding-top:5%; border-top:1px dashed #ccc}
.exhibition>div>.place{float:left; width:28%; width:min(392px, 27%); }
.exhibition>div>.place .tit{padding:12% 13.5%; min-height:250px; background:#333; color:#fff; border-radius:8px}
.exhibition>div.place1 .place .tit{background:#235DCC}
.exhibition>div.place2 .place .tit{background:#00939C}
.exhibition>div.place3 .place .tit{background:#585147}
.exhibition>div>.place .subject{display:block; margin-top:10px; font-family:'SangSangRock'; font-size:2em; line-height:1.3}
.exhibition>div>.place .img{margin-top:20px}
.exhibition>div>.place .img img{max-width:168px}
.exhibition>div>.con{float:right; width:66.5% }
.exhibition>div>.con img{border-radius:6px}
.exhibition>div>.con>ul{display:flex; flex-wrap:wrap; justify-content:space-between}
.exhibition>div>.con>ul:not(.full)>li{width:45.5%}
.exhibition>div>.con>ul:not(.full)>li:nth-child(2)~li{margin-top:60px;}
.exhibition>div>.con>ul.full>li{width:100%}
.exhibition>div>.con>ul.full>li+li{margin-top:5%; padding-top:5%; border-top:1px dashed #ccc}
.exhibition>div>.con>ul,
.exhibition>div>.con>div{margin-bottom:40px}
.exhibition>div>.con .bl02{margin-bottom:10px}
.exhibition>div>.con .img{text-align:center; }
.exhibition>div>.con .con{padding:0px 2px}
.exhibition>div>.con .con .tit{font-weight:bold; font-size:1.11em}
.exhibition>div>.con .type01 .con{margin-top:20px}
.exhibition>div>.con .type01 .con .tit{margin-bottom:8px}
.exhibition>div>.con .type02{display:flex}
.exhibition>div>.con .type02 .img{flex-shrink:0; width:45.5%; margin-right:4%}
.exhibition>div>.con .type02 .tit{margin-bottom:10px}
.exhibition>div>.con .type03 .con{margin-top:20px}
.exhibition>div>.con .type04{display:flex;}
.exhibition>div>.con .type04 .img{flex-shrink:0; width:35.5%; margin-right:7%}
.exhibition>div>.con .type04 .con .txt{margin-top:10px}
.exhibition_gallery>div{overflow:hidden; max-width:926px}
.exhibition_gallery>div>ul.list{position:relative; font-size:0px; white-space:nowrap}
.exhibition_gallery>div>ul.list li{display:inline-block; vertical-align:top;}
.exhibition_gallery ul.gallery_btn{text-align:right; margin-top:-10px; margin-right:5px;}
.exhibition_gallery ul.gallery_btn li{display:inline-block; font-size:0px;}
.exhibition_gallery ul.gallery_btn li a{display:block; width:30px; height:5px; background:#ddd}
.exhibition_gallery ul.gallery_btn li.on a{background:var(--color01)}

/* 알림마당 */
p.biblebook{text-align:center; margin-bottom:10px; letter-spacing:-1px; font-size:2.2em; font-family:'SangSangRock'}
p.biblebook:before{display:inline-block; content:''; vertical-align:middle; width:80px; height:62px; margin-right:15px; background:url(/GCM/img/sub/ic_biblebook.png) no-repeat center center/contain}


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


@media all and (min-width:861px){
}

@media screen and (max-width:860px){
	.sub_visual{margin:0px 20px; height:150px; background-size:cover; border-radius:10px}
	.sub_visual h3{padding-bottom:0px; font-size:2em}
	#tab{display:none;}
	.greeting>div .img{float:none; padding:30px; width:100%;}
	.greeting>div .con{float:none; width:100%;}
	.memorial>div .img{float:none !important; padding:0px 30px ; width:100%;}
	.memorial>div .con{float:none; width:100%}
	.organization .organ01 .mem img{max-width:150px;}
	.organization .organ01:before,
	.organization .organ01 .mem:before,
	.organization .organ02:before,
	.organization .organ02>li:before{display:none}
	.organization .organ03>li{width:31%;}
	.info_time{flex-wrap: wrap}
	.info_time>dl{width:100%; margin-bottom:10px; --bfw:50px; padding-left:calc(var(--bfw) + 16%);}
	.facility{flex-wrap:wrap}
	.facility>dl{flex-basis:100%}
	.facility>dl+dl{margin-top:20%;}
	.location>.map{height:150px;}
	.exhibition>div>.place{float:none; margin-bottom:30px; width:100%;}
	.exhibition>div>.place .tit{padding:30px; min-height:0px}
	.exhibition>div>.place .img{text-align:center;}
	.exhibition>div>.con{float:none; width:100% }
	.exhibition>div>.con>ul{display:flex}
	.exhibition>div>.con>ul:not(.full)>li{width:100%;  }
	.exhibition>div>.con>ul:not(.full)>li+li{margin-top:30px}
	.exhibition>div>.con>ul.full>li{width:100%}
	.exhibition>div>.con .type02{flex-wrap: wrap}
	.exhibition>div>.con .type02 .img{width:100%}
	.exhibition>div>.con .type02 .con{margin-top:20px}
	.exhibition>div>.con .type04{display:flex; align-items: center}
	p.biblebook{text-align:center; ; margin-bottom:20px; letter-spacing:-1px; font-size:2.2em; font-family:'SangSangRock'}
	p.biblebook:before{display:block; width:100%; margin-bottom:5px}
}