@import url(font.css);
@import url(remixicon.css);

html {overflow-y:auto;}
body {-webkit-overflow-scrolling:touch; line-height: normal; font-size: 16px; color:#000000; font-family:'Pretendard', sans-serif; font-weight: 400;}
html,body {width:100%;}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
ul,ol,dl,dt,li {list-style: none;}
img, fieldset {border:0 none;}
img {vertical-align:top; height:auto;}
legend {display:none; position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}
input, textarea {font-size:14px; color: #000000; background:transparent; font-family: inherit;}
textarea {resize: none;}
button {border:0 none; background:transparent; padding:0; margin:0; font-family: inherit; color:#000000;}
input,textarea,select {appearance:none;}
em, address {font-style:normal; font-family: inherit;}
table {border-spacing:0; border-collapse:collapse; width:100%; font-family: inherit;}
caption {font-size: 0; line-height: 0; width:0; height:0; text-indent:-1000px; overflow: hidden;}
a, a:link, a:visited {text-decoration:none; color:#000000;}
a:hover, a:active {text-decoration:none;}
a,input{-webkit-tap-highlight-color:transparent;}
* {margin: 0; padding: 0; outline: none; text-decoration: none; box-sizing: border-box;}
::before, ::after {box-sizing: border-box;}
button, label {cursor: pointer;} 

/* radio */
input[type="radio"] {position:relative; cursor: pointer;}
input[type="radio"]::before {content:""; display:flex; width:24px; height:24px; background:url('../images/check_off.png')no-repeat; background-size:contain; background-position:center center;}
input[type="radio"]:checked::before {content:""; display:flex; width:24px; height:24px; background:url('../images/check_on.png')no-repeat; background-size:contain; background-position:center center;}

/* checkbox */
input[type="checkbox"] {position:relative; cursor: pointer;}
input[type="checkbox"]::before {content:""; display:flex; width:24px; height:24px; background:url('../images/check_off.png')no-repeat; background-size:contain; background-position:center center;}
input[type="checkbox"]:checked::before {content:""; display:flex; width:24px; height:24px; background:url('../images/check_on.png')no-repeat; background-size:contain; background-position:center center;}

/* select */
.selectBox {position:relative; cursor: pointer;}
.selectBox select {width:100%; height:48px; font-size:18px; border:1px solid #E2E1E5; border-radius:5px; padding:0 35px 0 10px; background: transparent; cursor: pointer;}
.selectBox::before {content:""; display:flex; width:16px; height:16px; background:url('../images/select.png')no-repeat; background-size:contain; background-position:center center; position:absolute; top:50%; right:10px; transform: translateY(-50%);}

/* common */
.content-wrap {max-width:1644px; margin:0 auto;}
.w123 {width:123px;}
.w140 {width:140px;}
.w300 {width:300px;}
.w330 {width:330px;}
.w500 {width:500px;}
.w612 {width:612px;}
.w100p {width:100%;}
.gold {background:#6E501A; color:#ffffff;}

/* header */
.header {padding:44px 0 0; display:flex; gap:27px; align-items: flex-end;}
.header .logo {width:314px;}
.header .logo img {width:100%;}
.header h1 {border-bottom:1px solid #967842; font-size:40px; line-height: 1.6; font-weight:600; color:#967842; margin-bottom:20px; width:calc(100% - 314px);}

/* 메인페이지 */
.index-bg {background:#F0F8FA;}

/* 메인페이지 상단 오른쪽 */
.idx-top {padding:70px 0 0; display:flex; gap:50px; background-repeat:no-repeat; background-position: 80px 100%; background-size: auto; height:1482px;}
.idx-top > div {width:50%; padding:0 0 0 50px;}
.idx-top > div + div {padding:0 50px 0 0;}
.idx-top .title-left {display:flex; align-items: center; flex-direction: column; margin-bottom:670px;}
.idx-top .title-left .slogan {display:flex; width:542px; margin-bottom:15px;}
.idx-top .title-left .slogan img {width:100%;}
.idx-top .title-left .event-period {display:flex; width:440px;}
.idx-top .title-left .event-period img {width:100%;}
.top-logo {margin:15px -50px 347px 0; display:flex; align-items: center; justify-content: end; gap:37px;}
.top-logo > div {background-size: contain; background-repeat: no-repeat;}
.top-logo .independenceHallLogo {width: 121px; height: 67px; background-image: url('../images/independenceHallLogo.png');}
.top-logo .warMemorialLogo {width: 90px; height: 67px; background-image: url('../images/warMemorialLogo.png');}
.link-Field {padding-right:50px;}
.link-Field .top-text {color:#67308F; font-size:40px; line-height: 1.4; font-weight:400; margin-bottom:50px; word-break: keep-all;}
.link-Field .link-wrap {display:flex; padding:40px 50px; flex-direction: column; border:1px solid #967842; background:#ffffff;}
.link-Field .link-wrap .inTop {margin-bottom:16px;}
.link-Field .link-wrap .inTop p {font-size:22px; font-weight:300; color:#967842; line-height:1.4;}
.link-Field .link-wrap strong {display:flex; align-items: center; font-size:44px; font-weight:800; gap:30px; color:#967842;}
.link-Field .link-wrap strong::after {content:""; display:flex; width:34px; height:24px; background:url(../images/right-arrow.png) no-repeat; background-size:contain; background-position:center center;}
.link-Field .link-wrap.gold strong::after {background:url(../images/right-arrow-white.png) no-repeat;}
.link-Field .link-wrap.gold {background:#967842;}
.link-Field .link-wrap.gold .inTop p {color:#ffffff;}
.link-Field .link-wrap.gold .inTop p.bold {font-weight:700; font-size:25px;}
.link-Field .link-wrap.gold strong {color:#ffffff;}
.link-Field .link-wrap + .link-wrap {margin-top:30px;}
/* 메인페이지 middle content */
.middle-content {padding:0 100px; display:flex; margin-top:-280px; gap:50px;}
.middle-content > div {width:50%; margin-top:40px;}
.middle-content > div + div {margin:0;}
.middle-content .inBox-left .box-head {display:flex; justify-content: center; flex-direction: column; padding:0 0 0 55px; margin-bottom:85px;}
.middle-content .inBox-left .box-head h2 {color:#967842; font-size:65px; font-weight:800; line-height:1.2;}
.middle-content .inBox-left .box-head p {font-weight:500; font-size:40px; line-height: 1.4; color:#967842; margin-top:40px;}
.middle-content .accordion {border-top:2px solid #172A3F;}
.middle-content .accordion > li {border-bottom:1px solid #172A3F;}
.middle-content .accordion button {display:flex; flex-direction: column; width:100%; background:#ffffff; color:#67308F; padding:44px 40px; position: relative;}
.middle-content .accordion button span {display:flex; font-weight:300; font-size:30px;}
.middle-content .accordion button strong {display:flex; font-weight:700; font-size:48px;}
.middle-content .accordion button::after {content:""; display:flex; width:40px; height:41px; background:url('../images/downArrow.png')no-repeat; background-size:contain; position: absolute; top:50%; right:40px; transform: translateY(-50%);}
.middle-content .accordion button.active::after {transform: translateY(-50%) rotate(180deg);}
.middle-content .accordion .hidden-content {height:0; transition: all 0.3s ease-out; overflow: hidden;}
.middle-content .accordion .hidden-content .inner {background:#67308F; padding:36px 28px;}
.middle-content .accordion .hidden-content .inner ul > li {color:#FFCE7D; display:flex; align-items: center; gap:15px; font-weight:600; font-size:28px; line-height: 1.4; padding:0 10px;}
.middle-content .accordion .hidden-content .inner ul > li::before {content:""; display:flex; width:5px; height:5px; background-color:#FFCE7D; border-radius:50%;}
.middle-content .accordion .hidden-content .inner.two {display:flex; gap:28px;}
.instagram-link {margin-top:100px; display:flex; justify-content: flex-end; padding:0 40px;}
.instagram-link a {display:flex; align-items: center; color:#967842; font-size:44px; font-weight:800;}
.instagram-link a::before {content:""; width:48px; height:48px; display:flex; background:url(../images/instagram-icon.svg) no-repeat; background-size:contain; background-position:center center; margin-right:15px;}
.instagram-link a::after {content:""; display:flex; margin-left:25px; width:34px; height:24px; background:url(../images/right-arrow.png) no-repeat; background-size:contain; background-position:center center;}
.questions-link {margin-top:20px; display:flex; justify-content: flex-end; padding:0 40px;}
.questions-link a {display:flex; align-items: center; color:#967842; font-size:44px; font-weight:800;}
.questions-link a::before {content:""; width:48px; height:48px; display:flex; background:url(../images/question-icon.svg) no-repeat; background-size:contain; background-position:center center; margin-right:15px;}
.questions-link a::after {content:""; display:flex; margin-left:25px; width:34px; height:24px; background:url(../images/right-arrow.png) no-repeat; background-size:contain; background-position:center center;}
.map-link {margin-top:20px; display:flex; justify-content: flex-end; padding:0 40px;}
.map-link a {display:flex; align-items: center; color:#967842; font-size:44px; font-weight:800;}
.map-link a::before {content:""; width:48px; height:48px; display:flex; background:url(../images/map-icon.svg) no-repeat; background-size:contain; background-position:center center; margin-right:15px;}
.map-link a::after {content:""; display:flex; margin-left:25px; width:34px; height:24px; background:url(../images/right-arrow.png) no-repeat; background-size:contain; background-position:center center;}

/* footer */
.footer {margin-top:100px; padding:0 0 80px;}
.footer address {display:flex; flex-direction: column; padding-top:20px; border-top:1px solid #B0D4E1;}
.footer address p {font-size:16px; font-weight:400; line-height: 1.4; color:#767676;}
.footer address strong {font-weight:700;}
.footer address p .bold {color:#67308F; font-size:16px; font-weight:700;}
.footer address p a {font-size:16px; font-weight:400; line-height: 1.4; color:#767676;}
.footer address .copy {margin-top:20px;}

/* sub header */
.sub-header {height:678px; background:#967842;}
.sub-header .content-wrap {display:flex; flex-direction: column;}
.sub-header .top {display:flex; padding:44px 0 0; gap:27px; align-items: flex-end; margin-bottom:48px;}
.sub-header .top .logo {width:314px;}
.sub-header .top .logo img {width:100%;}
.sub-header .top h1 {border-bottom:1px solid #ffffff; font-size:40px; line-height: 1.6; font-weight:600; color:#ffffff; margin-bottom:20px; width:calc(100% - 314px); display:flex; align-items: center; justify-content: space-between;}
.sub-header .top h1 .title {display:flex;}
.sub-header .top h1 .mainLink {display:flex; font-size:0; width:34px; height:24px; background:url(../images/right-arrow-white.png) no-repeat; background-size:contain;}
.sub-header .bottom-slogan {overflow: hidden; display:flex; justify-content: center; height:320px;}

/* sub content */
.sub-content {background:#ffffff; border:2px solid #967842; margin-top:-135px; padding-bottom:40px;}
.content-sub-wrap {padding:60px 150px 0;}
.sub-content h2 {font-size:40px; font-weight:700; color:#967842; padding-bottom:28px; border-bottom:1px solid #967842;}
.sub-content .accordion {margin-bottom:20px;}
.sub-content .accordion button {display:flex; width:100%; background:#ffffff; padding:28px 0;}
.sub-content .accordion button span {display:flex; font-weight:700; font-size:20px; position:relative; color:#67308F; text-align: left; word-break: keep-all;}
.sub-content .accordion .hidden-content {height:auto; transition: all 0.3s ease-out; overflow: hidden; border-top:1px solid #67308F; border-bottom:1px solid #67308F;}
.sub-content .accordion .hidden-content .inBox {background:#FAF4FF; padding:20px 30px;}
.sub-content .accordion .hidden-content .inBox .circle-list > li {font-size:20px; color:#222222; line-height: 1.6; position:relative; padding:0 30px; font-weight:400;}
.sub-content .accordion .hidden-content .inBox .circle-list > li::before {content:""; display:flex; width:5px; height:5px; background-color:#222222; border-radius:50%; position: absolute; top:15px; left:10px; }
.sub-content .accordion .hidden-content .inBox .top {margin:0 5px; width:calc(100% - 10px);}
.sub-content .accordion .hidden-content .inBox .top p > strong {font-size:20px; color:#222222; line-height: 1.6; font-weight:700;}
.sub-content .accordion .hidden-content .inBox .top .circle-list {margin:0 5px; width:calc(100% - 10px);}
.sub-content .accordion .hidden-content .inBox .number-list > li {font-size:20px; color:#222222; line-height: 1.6; margin:0 30px; width:calc(100% - 60px); font-weight:400; list-style-type: decimal;}

/* input style */
.inpField_wrap {display:flex; flex-direction: column; gap:40px; padding:40px 0 0 0;}
.inpField_wrap.noTopPadding {padding:0 0 0 300px;}
.inpField {display:flex; flex-direction: column; gap:16px;}
.inpField .lb {display:block; width:100%; font-size:20px; line-height: 1.4;}
.inpField .lb .sub {display:block; color:#7A7A7A; font-size:16px; margin-top:5px;}
.inpField .inp {height:48px; border:1px solid #E2E1E5; border-radius:5px; padding:0 10px; font-size:18px;}
.inpField .radioWrap {display:flex; align-items: center; gap:42px;}
.inpField .radioWrap .inbox {display:flex; align-items: center; gap:10px;}
.inpField .radioWrap .inbox label {font-size:20px;}
.inpField .threeField {display:flex; align-items: center; gap:20px}
.inpField .threeField.dashed {gap:7px;}
.inpField .dash {display:flex; width:12px; height:100%; align-items: center;}
.inpField .dash::after {content:""; width:100%; height:2px; background:#000000;}
.inpField .address {display:flex; flex-direction: column; gap:12px;}
.inpField .address .top {display:flex; align-items: center; gap:14px;}
.inpField .address .top button {display:flex; align-items: center; justify-content: center; height:48px; font-size:18px; font-weight: 500; color:#ffffff; background:#000000; border-radius:5px;}
.inpField .columnRadio {display:flex; flex-direction: column; gap:20px;}
.inpField .columnRadio .inbox {display:flex; align-items: center; gap:20px;}
.inpField .columnRadio .inbox label {font-size:20px;}
.childrenHidden .addField {display:flex; flex-direction: column; gap:40px; padding:40px 0 40px 0; border-top:1px solid #AEAEAE; border-bottom:1px solid #AEAEAE; width:100%;}
.inquiryField .inp {border:0; border-radius:0; border-bottom:1px solid #E2E1E5;}
.childrenField {display:flex; flex-direction: column; gap:40px;}
.inpField_wrap h3 {font-size:24px; font-weight:700; color:#67308F; padding:0 0 10px; border-bottom:1px solid #67308F; display:flex; align-items: center;}

/* 필드 안에 추가 버튼 */
.fieldINButton_wrap {display:flex; align-items: center; gap:30px;}
.fieldINButton_wrap a, .fieldINButton_wrap input, .fieldINButton_wrap button {display:flex; align-items: center; justify-content: center; height:69px; font-size:24px;}
.fieldINButton_wrap .add {border:3px solid #67308F; color:#67308F;}
.fieldINButton_wrap .delete {border:3px solid #7D7D7D; color:#7D7D7D;}

/* 스탬프신청 유의 사항 */
.stampNotice .check_wrap {display:flex; flex-direction: column; margin:20px 0 0; gap:25px;}
.stampNotice .check_wrap span {display:flex; align-items: center; gap:20px;}
.stampNotice .check_wrap span .lb {font-size:20px; font-weight:700;}

/* bottom Button style */
.bottomButton_wrap {display:flex; align-items: center; margin-top:50px; justify-content: center;}
.bottomButton_wrap input, .bottomButton_wrap a, .bottomButton_wrap button {display:flex; align-items: center; position: relative; height:104px; color:#ffffff; font-size:36px; padding:0 57px; justify-content: space-between; border-top-right-radius: 50px;}
.bottomButton_wrap input::after, .bottomButton_wrap a::after, .bottomButton_wrap button::after {content:""; display:flex; width:36px; height:24px; background:url('../images/button-arrow.png')no-repeat; background-size: contain; background-position: center center;}

/* add style */
.inpField .textarea {height:200px; overflow-y: auto; border:1px solid #E2E1E5; border-radius:5px; padding:15px 10px; font-size:18px; resize: none;}
.inpField .radioWrap.full {flex-direction: column; gap:12px; align-items: flex-start;}
.inpField.file .lb {font-size:24px; font-weight:700;}
.inpField.file label {display: flex; align-items: center; gap:10px;}
.inpField.file label input[type="file"] {display:none;}
.inpField.file label .result {display: flex; height:48px; border:1px solid #E2E1E5; color:#A4A4A4; border-radius:5px; padding:0 10px; font-size:18px; width:calc(100% - 143px); align-items: center;}
.inpField.file label .button {display: flex; background:#222222; color:#ffffff; border-radius:5px; height:48px; width:143px; justify-content: center; align-items: center;}
.stamp_confirm_list {display:flex; gap:28px; max-width: 612px;}
.stamp_confirm_list > li {display:flex; background:#C0C0C0; justify-content: center; align-items: center; overflow: hidden; width:20%; aspect-ratio: 1 / 1;}
.stamp_confirm_list > li img {object-fit: contain;}
.stamp_confirm_list > li.last-button {background:#F3F3F3;}
.inpField.borderTopBottom {border-top:1px solid #AEAEAE; border-bottom:1px solid #AEAEAE; padding:40px 0;}

/* 기념품 정보페이지 */
.souvenir-Infomation-wrap {max-width:800px; margin:60px auto 0;}
.souvenir-Infomation-wrap h3 {font-size:24px; font-weight:700; color:#67308F; padding:0 0 10px 0; border-bottom:1px solid #67308F; display:flex; align-items: center;}
.explain-text {font-size:24px; line-height: 1.5; color:#000000; word-break: keep-all; margin-bottom:40px;}
.description-image {margin-top:40px;}
.description-image .image-wrap {display:flex; justify-content: center; align-items: center; gap:80px;}
.description-image .image-wrap .imgBox {width:100%; display:flex; flex-direction: column; align-items: center;}
.description-image .image-wrap .imgBox .img {width: 300px; height:200px; background:#D9D9D9; margin-bottom:25px;}
.description-image .image-wrap .imgBox .img img {width: 100%; object-fit: cover;}
.description-image .image-wrap .imgBox figcaption {display:flex; justify-content: center; align-items: center; flex-direction: column; color:#000000;}
.description-image .image-wrap .imgBox figcaption strong {font-size:24px; font-weight:700;}
.description-image .image-wrap .imgBox figcaption span {font-size:20px; line-height: 1.3;}
.description-image .image-wrap .imgBox figcaption p {font-size:20px; line-height: 1.3; margin-top:35px;}
.description-image .bt-text {color:#67308F; font-size:24px; line-height: 1.6; margin-top:40px;}

/* 자주 묻는 질문 */
.notice-wrap {padding:80px 150px;}
.notice-wrap .content-box .total {font-size:16px; font-weight:700; margin:28px 0 12px;}
.notice-wrap .accordion {display:flex; flex-direction: column; gap:12px;}
.notice-wrap .accordion > li.list-item {background:#F6F6F6; padding:0 20px; opacity: 0; animation: fadeInUp 0.5s forwards;}
.notice-wrap .accordion > li > button {background:transparent; padding:18px 0; display:flex; position: relative;}
.notice-wrap .accordion > li > button::after {content:""; display:flex; width:24px; height:24px;  background:url('../images/icon-arrow-down.png')no-repeat; background-size:contain; transform: rotate(180deg); position:absolute; top:20px; right:0;}
.notice-wrap .accordion > li > button .title {color:#333333; font-weight:700; font-size:16px; line-height: 1.6; width:88%; padding-left:32px; position:relative;}
.notice-wrap .accordion > li > button .title::before {content:""; display:flex; width:28px; height:28px; background:url('../images/icon-custom-question.png')no-repeat; background-size:contain; position:absolute; top:-2px; left:0;}
.notice-wrap .accordion > li > button .date {font-size:16px; font-weight:400; line-height: 1.6; color:#333333; width:12%; padding-right:24px;}
.notice-wrap .accordion > li > button.active::after {transform: rotate(0deg); }
.notice-wrap .accordion > li > .hidden-content {background:transparent; border:0; height:0; transition: all 0.3s ease-out; overflow: hidden;}
.notice-wrap .accordion > li > .hidden-content .inner {border-top:1px solid #727272; padding:30px 15px; color:#333333; font-size:16px; font-weight:400; line-height: 1.6;}
.notice-wrap .accordion > li.nodata {display:flex; align-items: center; justify-content: center; color:#727272; min-height: 250px;}

/* 개인정보처리방침 */
.personal-wrap {padding:80px 150px;}
.personal-wrap .sub-text {padding:30px 20px; font-size:18px; line-height: 1.4;}
.personal-wrap .personal-infomation {display:flex; flex-direction: column; gap:12px;}
.personal-wrap .personal-infomation > li {background:#F6F6F6; padding:0 20px; opacity: 0; animation: fadeInUp 0.5s forwards;}
.personal-wrap .personal-infomation > li h3 {padding:18px 0 18px 18px; display:flex; color:#333333; font-weight:700; font-size:16px; line-height: 1.6;}
.personal-wrap .personal-infomation > li .inner-info {border-top:1px solid #727272; padding:30px 15px; color:#333333; font-size:16px; font-weight:400; line-height: 1.6;}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animationSlideDown {
  animation: slideDown 0.8s ease-out forwards;
}

.scroll-fade-up {
  opacity: 0;
  transform: translateY(200px);
  transition: all 0.8s ease-out;
}

/* 스크롤이 닿으면 추가되는 클래스 */
.scroll-fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width:1644px){
  /* common */
  .content-wrap {width:100%; padding:0 40px;}
}

@media (max-width:1420px){
  .idx-top {padding:50px 0; height:1100px; background-position:-20px 100%; background-size:60%;}
  .idx-top .title-left .slogan {width:80%;}
  .idx-top .title-left .event-period {width:80%;}
  .top-logo {margin:15px 0 250px 0;}
  .idx-top > div + div {padding:0;}
  .link-Field {padding:0;}
  .link-Field .top-text {font-size:24px;}
  .link-Field .link-wrap {padding:25px;}
  .link-Field .link-wrap .inTop p {font-size:18px;}
  .link-Field .link-wrap.gold .inTop p.bold {font-size:22px;}
  .link-Field .link-wrap strong {font-size:28px;}
  .middle-content {padding:0; margin-top:-200px;}
  .middle-content > div {padding:0;}
  .middle-content .inBox-left .box-head {padding:0 0 0 65px;}
  .middle-content .inBox-left .box-head h2 {font-size:45px;}
  .middle-content .inBox-left .box-head p {font-size:24px;}
  .middle-content .accordion button {padding:24px 20px;}
  .middle-content .accordion button span {font-size:20px;}
  .middle-content .accordion button strong {font-size:28px;}
  .middle-content .accordion button::after {width:24px; height:25px;}
  .middle-content .accordion .hidden-content .inner {padding:24px 20px;}
  .middle-content .accordion .hidden-content .inner ul > li {font-size:16px; padding:0;}
  .instagram-link a {font-size:28px;}
  .instagram-link a::before {width:30px; height:30px;}
  .instagram-link a::after {width:30px; height:22px;}
  .questions-link a {font-size:28px;}
  .questions-link a::before {width:30px; height:30px;}
  .questions-link a::after {width:30px; height:22px;}
  .map-link a {font-size:28px;}
  .map-link a::before {width:30px; height:30px;}
  .map-link a::after {width:30px; height:22px;}

  /* 자주 묻는 질문 */
  .notice-wrap {padding:80px 100px;}
  .notice-wrap .accordion > li > button {flex-direction: column; align-items: flex-start; gap:15px;}
  .notice-wrap .accordion > li > button .date {width:100%; padding-left:32px;}
}

@media (max-width:1024px){
  
  /* common */
  .content-wrap {padding:0 30px;}
  
  /* header */
  .header {padding:35px 0 0;}
  .header .logo {width:200px;}
  .header .logo img {width:100%;}
  .header h2 {font-size:34px; margin-bottom:14px; width:calc(100% - 200px);}

  /* 메인페이지 상단 오른쪽 */
  .idx-top {padding:45px 0 0; gap:20px; background-position:0 250px; height:850px; background-size:55%;}
  .idx-top > div {width:50%; padding:0;}
  .idx-top > div + div {padding:0;}
  .idx-top .title-left {margin-bottom:0;}
  .idx-top .title-left .slogan {display:flex; width:90%; margin-bottom:15px;}
  .idx-top .title-left .slogan img {width:100%;}
  .idx-top .title-left .event-period {display:flex; width:85%;}
  .idx-top .title-left .event-period img {width:100%;}
  .top-logo {margin:0 0 65px; gap:20px;}
  .top-logo .independenceHallLogo {width: 80px; height: 44.36px;}
  .top-logo .warMemorialLogo {width: 59px; height: 44.36px;}
  .link-Field .top-text {font-size:24px; line-height: 1.3; margin-bottom:25px; letter-spacing: -1px;}
  .link-Field .link-wrap {padding:25px 20px;}
  .link-Field .link-wrap .inTop {margin-bottom:20px;}
  .link-Field .link-wrap .inTop p {font-size:16px; letter-spacing: -0.8px;}
  .link-Field .link-wrap.gold .inTop p.bold {font-size:18px;}
  .link-Field .link-wrap strong {font-size:28px; gap:20px;}
  .link-Field .link-wrap strong::after {width:28px; height:20px;}
  .link-Field .link-wrap.gold strong::after {width:28px; height:20px; background-size: contain; background-position: 50% 50%;}

  /* 메인페이지 middle content */
  .middle-content {padding:0; margin-top:-180px; gap:20px;}
  .middle-content > div {width:50%; padding:0; margin-top:40px;}
  .middle-content > div + div {padding:0; margin:0;}
  .middle-content .inBox-left .box-head {padding:0; margin:0 0 45px 0;}
  .middle-content .inBox-left .box-head h2 {font-size:45px; line-height:1.2;}
  .middle-content .inBox-left .box-head p {font-size:24px; margin-top:30px; padding-left:5px;}
  .middle-content .accordion button {padding:20px;}
  .middle-content .accordion button span {font-size:16px;}
  .middle-content .accordion button strong {font-size:24px;}
  .middle-content .accordion button::after {width:24px; height:25px; right:20px;}
  .middle-content .accordion .hidden-content .inner {padding:20px;}
  .middle-content .accordion .hidden-content .inner ul > li {gap:5px; font-size:15px; line-height: 1.3; padding:0;}
  .middle-content .accordion .hidden-content .inner ul > li::before {width:4px; height:4px;}
  .middle-content .accordion .hidden-content .inner.two {display:flex; gap:30px;}
  .instagram-link {margin-top:80px; padding:0 30px;}
  .instagram-link a {font-size:24px;}
  .instagram-link a::before {width:24px; height:24px; margin-right:10px;}
  .instagram-link a::after {margin-left:20px; width:24px; height:14px;}
  .questions-link a {font-size:24px;}
  .questions-link a::before {width:24px; height:24px; margin-right:10px;}
  .questions-link a::after {margin-left:20px; width:24px; height:14px;}
  .map-link a {font-size:24px;}
  .map-link a::before {width:24px; height:24px; margin-right:10px;}
  .map-link a::after {margin-left:20px; width:24px; height:14px;}

  /* footer */
  .footer {margin-top:80px; padding:0 0 60px;}
  .footer address p {font-size:14px;}
  .footer address p a {font-size:14px;}

  /* sub header */
  .sub-header {height:475px;}
  .sub-header .top {padding:30px 0 0; margin-bottom:15px;}
  .sub-header .top .logo {width:200px;}
  .sub-header .top h1 {font-size:34px; margin-bottom:14px; width:calc(100% - 200px);}
  .sub-header .bottom-slogan {height:218px;}
  .sub-header .bottom-slogan img {width:280px; height:218px;}
  
  /* sub content */
  .sub-content {margin-top:-98px;}
  .content-sub-wrap {padding:40px 30px;}
  .sub-content h2 {font-size:28px; padding-bottom:20px;}
  .sub-content .accordion button span {font-size:20px;}
  .sub-content .accordion .hidden-content .inBox {padding:20px;}
  .sub-content .accordion .hidden-content .inBox .circle-list > li {font-size:18px; line-height: 1.6;}
  .sub-content .accordion .hidden-content .inBox .circle-list > li::before {top:12px; width:4px; height:4px;}
  .sub-content .accordion .hidden-content .inBox .circle-list > li br {display:none;}
  .sub-content .accordion .hidden-content .inBox .top p > strong {font-size:18px;}
  .sub-content .accordion .hidden-content .inBox .number-list > li {font-size:18px;}

  /* radio */
  input[type="radio"]::before {width:20px; height:20px;}
  input[type="radio"]:checked::before {width:20px; height:20px;}

  /* checkbox */
  input[type="checkbox"]::before {width:20px; height:20px;}
  input[type="checkbox"]:checked::before {width:20px; height:20px;}

  /* select */
  .selectBox select {height:42px; font-size:14px;}

  /* input style */
  .inpField_wrap {padding:35px 0 0 0;}
  .inpField_wrap.noTopPadding {padding:0 0 0 240px;}
  .inpField {display:flex; flex-direction: column; gap:16px;}
  .inpField .lb {font-size:18px;}
  .inpField .lb .sub {font-size:14px;}
  .inpField .inp {height:42px; font-size:14px;}
  .inpField .radioWrap .inbox label {font-size:18px;}
  .inpField .threeField {gap:15px}
  .inpField .threeField.dashed {gap:5px;}
  .inpField .dash {width:10px;}
  .inpField .address {gap:10px;}
  .inpField .address .top {gap:10px;}
  .inpField .address .top button {height:42px; font-size:14px;}
  .inpField .columnRadio {gap:15px;}
  .inpField .columnRadio .inbox {gap:15px;}
  .inpField .columnRadio .inbox label {font-size:18px;}
  .childrenHidden .addField {padding:35px 0 35px 0;}
  .inpField_wrap h3 {font-size:20px;}
  
  /* bottom Button style */
  .bottomButton_wrap input, .bottomButton_wrap a, .bottomButton_wrap button {height:84px; font-size:24px; padding:0 45px;}
  .bottomButton_wrap input::after, .bottomButton_wrap a::after, .bottomButton_wrap button::after {width:28px; height:19px;}
  .bottomButton_wrap .w500 {width:400px;}

  /* 필드 안에 추가 버튼 */
  .fieldINButton_wrap {gap:20px;}
  .fieldINButton_wrap a, .fieldINButton_wrap input, .fieldINButton_wrap button {height:55px; font-size:20px;}
  .fieldINButton_wrap .w300 {width:240px;}

  /* 스탬프신청 유의 사항 */
  .stampNotice .check_wrap {gap:20px;}
  .stampNotice .check_wrap span {display:flex; align-items: center; gap:15px;}
  .stampNotice .check_wrap span .lb {font-size:18px;}

  /* add style */
  .inpField .textarea {font-size:14px;}
  .inpField.file.w612 {width:100%; max-width: 612px;}
  .inpField.file .lb {font-size:20px;}
  .inpField.file label .result {height:42px; font-size:14px;}
  .inpField.file label .button {font-size:16px; height:42px;}

  /* 기념품 정보페이지 */
  .souvenir-Infomation-wrap {margin:40px auto 0;}
  .souvenir-Infomation-wrap h3 {font-size:20px;}
  .explain-text {font-size:18px; margin-bottom:30px;}
  .description-image {margin-top:30px;}
  .description-image .image-wrap {display:flex; justify-content: center; align-items: center; gap:60px;}
  .description-image .image-wrap .imgBox .img {width:260px; height:160px;}
  .description-image .image-wrap .imgBox figcaption strong {font-size:20px;}
  .description-image .image-wrap .imgBox figcaption span {font-size:16px;}
  .description-image .image-wrap .imgBox figcaption p {font-size:16px; margin-top:35px;}
  .description-image .bt-text {font-size:18px; margin-top:40px;}

  /* 자주 묻는 질문 */
  .notice-wrap {padding:30px 50px;}
  .notice-wrap .accordion > li > button {flex-direction: column; align-items: flex-start; gap:15px;}
  .notice-wrap .accordion > li > button .date {width:100%; padding-left:32px;}

  /* 개인정보처리방침 */
  .personal-wrap {padding:30px 50px;}
  .personal-wrap .sub-text {padding:20px; font-size:16px; line-height: 1.6;}
}

@media (max-width:768px){
    /* common */
  .content-wrap {padding:0 20px;}
  
  /* header */
  .header {padding:25px 0 0; gap:15px;}
  .header .logo {width:106px;}
  .header h1 {font-size:15px; margin-bottom:7px; width:calc(100% - 106px);}

  /* 메인페이지 상단 오른쪽 */
  .idx-top {padding:15px 0 0; gap:0; flex-direction: column; background-position:50% 260px; height:auto; background-size:100%;}
  .idx-top > div {width:100%; padding:0;}
  .idx-top > div + div {padding:0;}
  .idx-top .title-left {margin-bottom:0;}
  .idx-top .title-left .slogan {display:flex; width:240px; margin-bottom:15px;}
  .idx-top .title-left .slogan img {width:100%;}
  .idx-top .title-left .event-period {display:flex; width:204px;}
  .idx-top .title-left .event-period img {width:100%;}
  .top-logo {margin:20px 0 45px; gap:20px; justify-content: center;}
  .top-logo .independenceHallLogo {width:46px; height:26px;}
  .top-logo .warMemorialLogo {width:34px; height:26px;}
  .link-Field .top-text {font-size:16px; line-height: 1.2; margin-bottom:20px;}
  .link-Field .link-wrap {padding:16px 20px;}
  .link-Field .link-wrap .inTop {margin-bottom:20px;}
  .link-Field .link-wrap .inTop p {font-size:12px; letter-spacing: 0;}
  .link-Field .link-wrap.gold .inTop p.bold {font-size:14px;}
  .link-Field .link-wrap strong {font-size:20px; gap:15px;}
  .link-Field .link-wrap strong::after {width:20px; height:14px;}
  .link-Field .link-wrap + .link-wrap {margin-top:20px;}
  .link-Field .link-wrap.gold strong::after {width:20px; height:14px; background-size: contain; background-position: 50% 50%;}

  /* 메인페이지 middle content */
  .middle-content {flex-direction: column; margin-top:0; gap:0;}
  .middle-content > div {width:100%; margin-top:40px;}
  .middle-content > div + div {padding:0; margin:0;}
  .middle-content .inBox-left .box-head {padding:0; margin:0 0 45px 0;}
  .middle-content .inBox-left .box-head h2 {font-size:28px;}
  .middle-content .inBox-left .box-head p {font-size:16px; margin-top:15px; word-break: keep-all; padding:0 0 0 2px;}
  .middle-content .inBox-left .box-head p br {display:none;}
  .middle-content .accordion button span {font-size:14px; margin-bottom:4px;}
  .middle-content .accordion button strong {font-size:20px;}
  .middle-content .accordion button::after {width:20px; height:21px;}
  .middle-content .accordion .hidden-content .inner {padding:15px;}
  .middle-content .accordion .hidden-content .inner ul > li {font-size:13px; line-height: 1.6;}
  .middle-content .accordion .hidden-content .inner ul > li::before {width:3px; height:3px;}
  .middle-content .accordion .hidden-content .inner.two {gap:20px;}
  .middle-content .inBox-right .accordion {border-top:0;}
  .instagram-link {margin-top:25px; padding:0; display:flex; justify-content: end;}
  .instagram-link a {font-size:18px;}
  .instagram-link a::before {width:18px; height:18px; margin-right:10px;}
  .instagram-link a::after {margin-left:10px; width:15px; height:9px;}
  .questions-link {justify-content: end; padding:0;}
  .questions-link a {font-size:18px;}
  .questions-link a::before {width:18px; height:18px; margin-right:10px;}
  .questions-link a::after {margin-left:10px; width:15px; height:9px;}
  .map-link {justify-content: end; padding:0;}
  .map-link a {font-size:18px;}
  .map-link a::before {width:18px; height:18px; margin-right:10px;}
  .map-link a::after {margin-left:10px; width:15px; height:9px;}

  /* footer */
  .footer {margin-top:60px; padding:0 0 60px;}
  .footer address p {font-size:13px;}
  .footer address p .bold {font-size:15px;}
  .footer address p a {font-size:13px;}

  /* sub header */
  .sub-header {height:320px;}
  .sub-header .top {padding:10px 0 0; gap:15px; margin-bottom:15px;}
  .sub-header .top .logo {width:106px;}
  .sub-header .top h1 {font-size:15px; margin-bottom:7px; width:calc(100% - 106px);}
  .sub-header .top h1 .mainLink {width:24px; height:16.94px;}
  .sub-header .bottom-slogan {height:166px;}
  .sub-header .bottom-slogan img {width:210px; height:166px;}

  /* sub content */
  .sub-content {margin-top:-72px; padding-bottom:0;}
  .content-sub-wrap {padding:20px 15px;}
  .sub-content h2 {font-size:22px;}
  .sub-content .accordion {margin-bottom:0;}
  .sub-content .accordion button {padding:15px 0;}
  .sub-content .accordion button span {font-size:16px; position: relative; display:flex; width:100%; padding-right:40px;}
  .sub-content .accordion button span::after {content:""; display:flex; width:16px; height:17px; background:url('../images/downArrow.png')no-repeat; background-size:contain; position: absolute; top:50%; right:10px; transform: translateY(-50%);}
  .sub-content .accordion.remove button span::after {transform: translateY(-50%) rotate(180deg);}
  .sub-content .accordion.remove .hidden-content {height:0; border-bottom:0;}
  .sub-content .accordion .hidden-content .inBox {padding:15px 10px;}
  .sub-content .accordion .hidden-content .inBox .circle-list > li {font-size:14px; line-height: 1.4; margin-bottom:10px; padding:0 15px; word-break: keep-all;}
  .sub-content .accordion .hidden-content .inBox .circle-list > li::before {top:8px; left:5px; width:3px; height:3px;}
  .sub-content .accordion .hidden-content .inBox .circle-list > li:last-child {margin-bottom:0;}
  .sub-content .accordion .hidden-content .inBox .circle-list > li br {display:none;}
  .sub-content .accordion .hidden-content .inBox .top .circle-list {width:100%; margin:0;}
  .sub-content .accordion .hidden-content .inBox .top p {margin-bottom:5px;}
  .sub-content .accordion .hidden-content .inBox .top p > strong {font-size:14px;}
  .sub-content .accordion .hidden-content .inBox .number-list > li {font-size:14px; width:calc(100% - 30px); margin:0 10px 10px 20px; word-break: keep-all;}
  .sub-content .accordion .hidden-content .inBox .number-list > li:last-child {margin-bottom:0;}

  /* radio */
  input[type="radio"]::before {width:18px; height:18px;}
  input[type="radio"]:checked::before {width:18px; height:18px;}

  /* checkbox */
  input[type="checkbox"]::before {width:18px; height:18px;}
  input[type="checkbox"]:checked::before {width:18px; height:18px;}

  /* select */
  .selectBox select {height:38px; font-size:14px;}

  /* input style */
  .inpField_wrap {padding:35px 0 0 0; gap:25px;}
  .inpField_wrap.noTopPadding {padding:0 0 0 0; gap:25px;}
  .inpField {display:flex; flex-direction: column; gap:10px;}
  .inpField .lb {font-size:15px;}
  .inpField .lb .sub {font-size:13px;}
  .inpField .inp {height:38px; font-size:14px;}
  .inpField .radioWrap .inbox label {font-size:15px;}
  .inpField .threeField {gap:10px; flex-direction: column; } 
  .inpField .threeField.dashed {gap:10px;}
  .inpField .dash {display:none;}
  .inpField .address {gap:10px;}
  .inpField .address .top {gap:10px;}
  .inpField .address .top .inp {width:calc(100% - 123px);}
  .inpField .address .top button {height:38px; font-size:14px; width:123px;}
  .inpField .columnRadio {gap:15px;}
  .inpField .columnRadio .inbox {gap:15px;}
  .inpField .columnRadio .inbox label {font-size:15px;}
  .inpField .w123, .inpField .w140, .inpField .w300, .inpField .w330, .inpField .w500 {width:100%;}
  .childrenHidden .addField {padding:30px 0; gap:25px;}
  .childrenField {gap:25px;}
  .inpField_wrap h3 {font-size:18px;}

  /* bottom Button style */
  .bottomButton_wrap input, .bottomButton_wrap a, .bottomButton_wrap button {height:60px; font-size:20px; padding:0 45px; border-top-right-radius:0; justify-content: center;}
  .bottomButton_wrap input::after, .bottomButton_wrap a::after, .bottomButton_wrap button::after {display:none;}
  .bottomButton_wrap .w500 {width:100%;}

  /* 필드 안에 추가 버튼 */
  .fieldINButton_wrap {gap:15px;}
  .fieldINButton_wrap a, .fieldINButton_wrap input, .fieldINButton_wrap button {height:50px; font-size:16px; word-break: keep-all;}
  .fieldINButton_wrap .w300 {width:50%;}

  /* 방문자투어 유의 사항 */
  .stampNotice .check_wrap {gap:20px;}
  .stampNotice .check_wrap span {display:flex; align-items: center; gap:15px;}
  .stampNotice .check_wrap span .lb {font-size:15px;}

  /* add style */
  .inpField .textarea {font-size:14px;}
  .inpField.file.w612 {width:100%; max-width: 612px;}
  .inpField.file .lb {font-size:16px;}
  .inpField.file label .result {height:38px; width:calc(100% - 100px);}
  .inpField.file label .button {font-size:14px; height:38px; width:100px;}
  .stamp_confirm_list {gap:15px;}
  .stamp_confirm_list > li.last-button img {width:55%;}

  /* 기념품 정보페이지 */
  .souvenir-Infomation-wrap h3 {font-size:20px;}
  .explain-text {font-size:15px; margin-bottom:25px;}
  .description-image {margin-top:25px;}
  .description-image .image-wrap {display:flex; justify-content: center; align-items: center; gap:40px; flex-direction: column;}
  .description-image .image-wrap .imgBox .img {width:100%; height:180px;}
  .description-image .image-wrap .imgBox figcaption strong {font-size:18px;}
  .description-image .image-wrap .imgBox figcaption span {font-size:14px;}
  .description-image .image-wrap .imgBox figcaption p {font-size:14px; margin-top:35px;}
  .description-image .bt-text {font-size:15px; margin-top:30px;}

  /* 자주 묻는 질문 */
  .notice-wrap {padding:15px;}
  .notice-wrap .accordion > li > button {flex-direction: column; align-items: flex-start; gap:15px;}
  .notice-wrap .accordion > li > button span {padding:0;}
  .notice-wrap .accordion > li > button span::after {display:none;}
  .notice-wrap .accordion > li > button .title {font-size:16px; width:100%; padding:0 25px 0 32px; overflow: hidden; text-overflow: ellipsis; height:45px; line-height: 1.4; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;}
  .notice-wrap .accordion > li > button.active .title {overflow: initial; text-overflow: initial; height:auto; -webkit-line-clamp: initial; display:initial; -webkit-box-orient: initial;}
  .notice-wrap .accordion > li > .hidden-content .inner {padding:15px 0; font-size:14px; line-height: 1.4;}

  /* 개인정보처리방침 */
  .personal-wrap {padding:15px;}
  .personal-wrap .sub-text {padding:20px 0; font-size:16px; line-height: 1.6;}
  .personal-wrap .personal-infomation li h3 {padding:18px 0;}
  .personal-wrap .personal-infomation > li .inner-info {padding:15px 0; font-size:14px; line-height: 1.4;}
}