/* BASIC css start */
body.active {overflow:hidden;}
body footer {margin-top:100px;}

.hcc_wrap {padding:80px 0;}
.hcc_wrap .hcc_top {text-align:center;}
.hcc_wrap .hcc_top img {width:280px;}
.hcc_wrap .hcc_top .info {font-size:1rem; margin:60px 0 100px; line-height: 1.6;}
.hcc_wrap .hcc_cont {}
.hcc_wrap .hcc_cont .inner {font-size:0;}
.hcc_wrap .hcc_cont .inner li {display:inline-block; width: 32%; vertical-align:top; margin-right:2%; margin-bottom:10%; cursor:pointer;}
.hcc_wrap .hcc_cont .inner li:nth-child(3n) {margin-right:0;}
.hcc_wrap .hcc_cont .inner li p {display:block; text-align:center; margin-top: 20px;}
.hcc_wrap .hcc_cont .inner li img {width:100%; transition:all .3s ease; -webkit-transition:all .3s ease;}
.hcc_wrap .hcc_cont .inner li p span {font-size: 1rem; font-weight:500; position:relative; line-height:1.5;}
.hcc_wrap .hcc_cont .inner li:hover img {opacity:0.7;}
.hcc_wrap .hcc_cont .inner li:hover p span {color:#00A0E9;}
.hcc_wrap .hcc_cont .inner li p span:after {content:''; display:inline-block; background:#00A0E9; position:absolute; bottom:0; left:50%; width:0; height:2px; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition:all .3s ease; -webkit-transition:all .3s ease;}
.hcc_wrap .hcc_cont .inner li:hover p span:after {width:100%;}

/* Æ˾÷ ÄÁÅÙÃ÷ */
.pop_wrap {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 100;}
.pop_wrap .pop_cont {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1350px;}
.pop_wrap .closed {position: absolute; right: -10px; top: -55px; }
.pop_wrap .closed svg {cursor:pointer;}
.pop_box {display: none; width:100%; max-width:1350px; padding: 45px 50px; background-color: var(--0); z-index: 1001;}
.pop_box .closed {position:absolute; right:24px; top:24px; cursor: pointer;}
.pop_wrap.active {display: block;}
.pop_box.active {display: inline-block;}
.pop_box .no-data {text-align:center; font-size: 1.125rem; padding: 100px 0;}
.pop_box .pop_inner > div {display:inline-block;}
.pop_box .swiper-pagination {display:inline-block; width:49px; line-height:22px; background:var(--0); text-align:center; left:16px; bottom:12px; border-radius:10px; letter-spacing:-1px;}
.sec1 {width:56%; float:right;}
.sec1 .swiper-slide img {width:100%;}
.sec1 .swiper-button-next:after,
.sec1 .swiper-button-prev:after {color:#fff; font-size:30px;}
.sec2 {width:41%; font-size:0; margin-bottom:25px;} 
.sec2 h3 {font-size:1.5rem; font-weight:700; line-height:1.25;}
.sec2 p {font-size:0.875rem; padding:50px 0;}
.sec2 dl {display:inline-block; vertical-align:top; width:50%; margin-bottom:25px;}
.sec2 dl dt {font-size:0.875rem; font-weight:700;}
.sec2 dl dd {font-size:0.875rem; word-break:keep-all;}
#tokyo .sec2 dl {display:block; width:100%;}
.sec3 {width:41%;}
.sec3 .map_cont {position: relative; padding-top: 49.5%;}
.sec3 iframe {position: absolute; left: 0; width: 100%; height: 100%; top: 0; filter: grayscale(1); border:none;}



/* ¹ÝÀÀÇü */
@media (max-width:1400px){
    .pop_wrap .pop_cont {max-width:1000px;}
    .sec2 {margin-bottom:0;}
    .sec2 h3 {line-height: 1.5; word-break: keep-all;}
    .sec2 p {padding:30px 0;}
    .sec2 dl {margin-bottom:20px;}
}

@media (max-width:1200px){
    .sec2 {margin-bottom:0;}
    .sec2 h3 {line-height: 1.5; word-break: keep-all;}
    .sec2 p {padding:30px 0;}
    .sec2 dl {margin-bottom:20px;}
}

@media (max-width:1024px){
    .hcc_wrap {padding:50px 0;}
    .hcc_wrap .hcc_top > img {height:50px;}
    .hcc_wrap .hcc_top .info {margin:60px 0 80px; font-size:1rem;}
    .hcc_wrap .hcc_cont .inner li {width:48%; margin-right:2%; margin-bottom:60px;}
    .hcc_wrap .hcc_cont .inner li:nth-child(2n) {margin-right:0;}
    .hcc_wrap .hcc_cont .inner li p {margin-top:20px;}
    .hcc_wrap .hcc_cont .inner li p span {font-size:1rem;}
    
    .pop_wrap .pop_cont {max-width:500px;}
    .pop_wrap .closed {top: -45px;}
    .pop_wrap .closed svg {width:40px !important; height:40px !important;}
    .pop_box {max-height: 80vh; overflow: auto; padding:40px 30px;}
    .pop_box .swiper-pagination {font-size:0.625rem; letter-spacing: -1px; line-height: 18px;}
    .pop_box .pop_inner > div {display:block; width:100%; float:none;}
    .sec1 {margin-bottom: 20px;}
    .sec2 h3 {font-size:1rem}
    .sec2 p {padding:28px 0 35px; font-size:0.813rem;}
    .sec2 dl {margin-bottom: 17px;}
    .sec2 dl dt,
    .sec2 dl dd {font-size:0.75rem}
}

@media (max-width:768px){
    .hcc_wrap {padding:50px 0 0;}
    .hcc_wrap .hcc_top > img {height:40px;}
    .hcc_wrap .hcc_top .info {margin:40px 0 60px; padding:0 20px; font-size:0.875rem; word-break:keep-all;}
    .hcc_wrap .hcc_top .info br {display:none;}
    .hcc_wrap .hcc_cont .inner li {width:100%; margin:0 0 60px;}
    .pop_box {max-width:inherit; overflow: auto; padding:40px 20px;}
    .sec2 {margin-bottom: 10px;}
    .sec2 p {padding:18px 0 25px; font-size:0.75rem;}
    .sec2 dl dt,
    .sec2 dl dd {font-size:0.688rem}
    
    .pop_wrap .pop_cont {width:90%;}
}

@media (max-height:700px){
    .pop_box {max-height: 80vh; overflow: auto;}
}

@media (min-height:700px){
    .pop_box {max-height: 80vh; overflow: auto;}
}
/* BASIC css end */