@charset "utf-8";

/*layer popup*/
#pop03 {position:absolute; left:5%; top:130rem; width:550rem; z-index:100; background:rgba(0,0,0,0.6); padding:10rem; font-size:16rem;}
#pop03 a {display:block; margin:0 0 5rem; }
#pop03 img {width:100%;}
#pop03 form {position:relative; color:#fff;}
#pop03 form a {position:absolute; right:10rem; top:0; font-weight:600; color:#fff; }
@media all and (max-width:768px){
  #pop03 {width:90%;}
}

#container {padding:90rem 0 0;}

.scrolldown { position:fixed; right:-30rem; top:540rem; text-transform:uppercase; transform:rotate(-90deg); font-size:12px; letter-spacing:1px; background:url('/design/hwarang2022/img/main/scroll.png') no-repeat left center; padding:3rem 0 3rem 25rem; }
@media all and (max-width:1400px){
  .scrolldown {right:-45rem;}
}
@media all and (max-width:1023px){
  .scrolldown {top:465rem;}
}
@media all and (max-width:768px){
  .scrolldown {display:none;}
}

.visual {position:relative; margin:0 0 30rem; padding:0 60rem;}
.visual .control a { position:absolute; left:100rem; top:50%; width:60rem; height:60rem; background:rgba(0,0,0,0.3); border-radius:50%; transform:translate(0,-50%); z-index:20; text-indent:-99999px; overflow:hidden; }
.visual .control a:hover { background:rgba(0,0,0,0.5);}
.visual .control a::before {content:''; position:absolute; left:50%; top:50%; width:14rem; height:23rem; background:url('/design/hwarang2022/img/main/arrow.png') no-repeat center/100% auto; transform:translate(-50%, -50%); }
.visual .control a.next { left:auto; right:100rem; transform:translate(0,-50%) rotate(180deg); }
.visual_slide .owl-stage-outer { position:relative; z-index:10;}
.visual_slide .bg {height:520rem; text-indent:-999999px;}
.visual .owl-dots { position:relative; margin:-7px 0 0; overflow:hidden; z-index:20;}
.visual .owl-dots div { position:relative; float:left; text-align:center; padding:10rem 5rem 0; font-size:18rem;  }
.visual .owl-dots div.active {color:#fff; font-weight:800; }
.visual .owl-dots div::before {content:''; position:absolute; left:5rem; top:0; width:calc(100% - 10rem); height:7px; background:rgba(255,255,255,0.5); }
.visual .owl-dots div.active::before {background:#71302e;}
.visual .owl-dots div.active::after {content:''; position:absolute; left:50%; bottom:0; width:90%; max-width:160rem; height:30rem; background:#71302e; border-radius:20rem; transform:translate(-50%, 0); z-index:-1; }
@media all and (max-width:1400px){
  .visual {padding:0 3%;}
  .visual .control a {left:40rem;}
  .visual .control a.next {right:40rem;}
}
@media all and (max-width:1023px){
  .visual_slide .bg {height:450rem; background-size:auto 100%; }
}
@media all and (max-width:768px){
  .visual_slide .bg {height:400rem; }
  .visual .owl-dots div {text-indent:-99999px; padding:0; height:7px; }
  .visual .owl-dots div.active::after {display:none;}
}
@media all and (max-width:480px){
  .visual_slide .bg {height:300rem; }
}

h2 {font-size:30rem; margin:0 0 20rem; }

.popup {margin:0 0 30rem; padding:0 40rem; }
.popup h2 { font-family:'Gowun Batang', serif; float:left; margin:0 0 20rem 20rem;}
.popup a.more {float:left; background:url('/design/hwarang2022/img/main/more.png') no-repeat left center; padding:5rem 0 5rem 25rem; margin:7rem 0 0 20rem; }
.popup .control {float:right; margin:7rem 20rem 0 0;}
.popup .control .count {float:left; font-weight:600; margin:4rem 20rem 0 0; }
.popup .control .count span { position:relative; display:inline-block; padding:0 0 0 30rem; font-weight:400; color:#777; }
.popup .control .count span::before {content:''; position:absolute; left:15rem; top:5rem; width:1px; height:18rem; background:#aaa; transform:rotate(25deg); }
.popup .control a {display:block; float:left; width:33rem; height:33rem; background:#f3f3f3 url('/design/hwarang2022/img/main/control.png') no-repeat 0 0/300% auto; border-radius:5rem; margin:0 5rem; text-indent:-99999px;}
.popup .control a.next { transform:rotate(180deg); overflow:hidden; }
.popup .control a.play { display:none; background-color:#666; background-position:50% 0; }
.popup .control a.stop { background-position:100% 0; }
.popup_slide {clear:both;}
.popup_slide .owl-item {padding:0 20rem;}
.popup_slide a { display:block; position:relative; overflow:hidden; }
.popup_slide a::before, .popup_slide a::after { content:''; position:absolute; width:0; height:0;transition:0.5s; }
.popup_slide a:hover::before, .popup_slide a:hover::after { width:100%; height:100%; }
.popup_slide a::before { left:-5px; top:-5px; border-left:5px solid rgba(113,48,46,1); border-top:5px solid rgba(113,48,46,1); }
.popup_slide a::after { right:-5px; bottom:-5px; border-right:5px solid rgba(113,48,46,1); border-bottom:5px solid rgba(113,48,46,1); }
.popup_slide a:hover::before { left:0; top:0; }
.popup_slide a:hover::after { right:0; bottom:0; }
.popup_slide .owl-dots {display:none; }
@media all and (max-width:1400px){
  .popup { padding:0 2%; }
  .popup h2 { margin: 0 0 20rem; }
  .popup .control {margin:7rem 0 0;}
}
@media all and (max-width:480px){
  .popup .control .count {display:none;}
}


/* 6020오픈하는것 시작 */
.contWrap { clear:both; padding:30rem 60rem 40rem; background:#f3f3f3; overflow:hidden; }
@media all and (max-width:1400px){
  .contWrap { padding:30rem 3% 40rem; }
}

.contWrap article .c_wrap{display: flex; justify-content: space-between;}
.center01{padding-bottom: 36rem; margin-bottom: 20rem; border-bottom: 1px dashed #dadada;}
.c_wrap .c_left{width: 58%; margin-right: 10rem;}
.c_wrap .c_right{width: 51%; margin-top: -22rem;}
.c_info {overflow:hidden;}
.c_info li { position:relative; float:left; width:50%; padding:0 0 0 200rem;}
.c_info li:nth-of-type(2n+1) { clear:both; padding:0 0 0 140rem;}
.c_info li span {position:absolute; left:0; top:4rem; letter-spacing:-2rem; }
.c_info li strong {font-size:22rem;}
.c_address { display:flex; align-items:flex-start; padding:14rem 0 0;}
.c_address span {background:url('/design/hwarang2022/img/main/location.png') no-repeat left 5rem; padding:2rem 0 2rem 35rem; }
.c_address a { position:relative; flex-shrink:0; width:120rem; background:#71302e; color:#fff; padding:2rem 35rem 2rem 15rem; border-radius:20rem; margin:0 0 0 20rem; }
.c_address a::before {content:''; position:absolute; right:15rem; top:12rem; width:7rem; height:7rem; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); }
@media (max-width:1600px) and (min-width:1024px){
  .c_wrap .c_right h3{margin-left: 20rem;}
  .c_info li{ padding:0 !important;}
  .c_info li span {position:relative;}
  .c_info li strong {display:block;}
}
@media all and (max-width:1420px){
    .c_address {width:100%;}
  }
@media all and (max-width:1023px){
  .c_address {width:100%;}
}
@media all and (max-width:768px){
  .c_info li { padding:0 !important;}
  .c_info li span {position:relative;}
  .c_info li strong {display:block;}
}


.c_btn{overflow:hidden; margin-top: 18rem;}
.c_btn a { position:relative; float:left; width:25%; min-height:80rem; display:flex; align-items:center; padding:0 10rem 0 90rem; }
.center02 .c_right .c_btn a{width: 30%;}
.c_btn a::before {content:''; position:absolute; left:0; top:0; width:80rem; height:80rem; background:#e7e7e7 url('/design/hwarang2022/img/main/quick_icon.png') no-repeat 0 0/400% auto; border-radius:50%; transition:0.3s; }
.c_btn a.icon2::before {background-position:33.33% 0;}
.c_btn a.icon3::before {background-position:66.66% 0;}
.c_btn a.icon4::before {background-position:100% 0;}
.c_btn a:hover.icon1::before {background-color:#71302e; background-position:0 100%;}
.c_btn a:hover.icon2::before {background-color:#71302e; background-position:33.33% 100%;}
.c_btn a:hover.icon3::before {background-color:#71302e; background-position:66.66% 100%;}
.c_btn a:hover.icon4::before {background-color:#71302e; background-position:100% 100%;}
.c_caution {position:relative; margin-left: 9rem; padding:20rem 0 0 30rem; color:#cb2725; }
.c_caution::before {content:'!'; position:absolute; left:0; top: 24rem; width:22rem; height:22rem; line-height:22rem; color:#fff; text-align:center; background:#cb2725; border-radius:50%; }
@media (max-width:1600px) and (min-width:1024px){
  .c_btn a { display:block; padding:100rem 0 0; text-align:center; }
  .c_btn a::before {left:50%; transform:translate(-50%, 0);}
}
@media all and (max-width:1023px){
  .contWrap .center01 .c_wrap{flex-wrap: wrap;}
  .center01 .c_wrap .c_left{width: 100%;}
  .center01 .c_wrap .c_right{width: 100%; margin-top: 26rem;}
  .center02 .c_right .c_btn a{width: 50%;}
  .center02 .c_right .c_btn a span .dn{display: block !important;}
  .c_btn {width:100%; margin:20rem 0 0; }
}
@media all and (max-width:800px){
    .contWrap .center01 .c_wrap{flex-wrap: wrap;}
    .center01 .c_wrap .c_left{width: 100%;}
    .center01 .c_wrap .c_right{width: 100%; margin-top: 26rem;}
    .c_btn {width:100%; margin:20rem 0 0; }
  }
@media all and (max-width:768px){
    .contWrap .center02 .c_wrap{flex-wrap: wrap;}
    .center02 .c_wrap .c_left{width: 100%;}
    .center02 .c_wrap .c_right{width: 100%; margin-top: 26rem;}
    .c_btn a { display:block; padding:100rem 0 0; text-align:center; }
    .center02 .c_right .c_btn a{width: 25%;}
    .center02 .c_right .c_btn a span .dn{display: none !important;}
    .c_btn a::before {left:50%; transform:translate(-50%, 0);}
}
@media all and (max-width:480px){
  .center02 .c_right .c_btn a{width: 48%;}
}
/* 6020오픈하는것 끝*/

/* 홈페이지 점검 팝업 */
.layerPopup { position:absolute; box-shadow:2px 2px 15px rgba(0,0,0,0.5); }
.layerPopup form {position:absolute; left:5px; bottom:5px; width:calc(100% - 10px); background:rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.1); padding:10px; font-family:sans-serif; color:#555; font-size:14px; border-radius:5px; overflow:hidden; }
.layerPopup form input {margin:0 5px 0 0; }
.layerPopup a.close { position:absolute; right:10px; top:10px; font-weight:600; }
.layerPopup img {width:100%; vertical-align:top;}

#popup01 {width: 600px; top: 150px; z-index: 100; right: 8%;}
@media all and (max-width:680px){
  #popup01{width: 93%; right: 3%; top: 100px;}
}


.popMovie_wrap {position:absolute; right:170rem; top:170rem; width:560rem; z-index:100; box-shadow:2px 2px 15px rgb(0 0 0 / 50%);}
.popMovie_wrap #popMovie {background:rgba(0,0,0,0.6);}
.popMovie_wrap .popMovie_close {position:relative; padding:0 0 10rem 10rem; color:#fff;}
.popMovie_wrap .popMovie_close input[type="checkbox"] {width:20rem; height:20rem; vertical-align:middle;}
.popMovie_wrap #closeMovie {position:absolute; right:10rem;}
@media all and (max-width:1200px){
	.popMovie_wrap {right:50%; transform:translate(50%, 0);}
}
@media all and (max-width:1023px){
	.popMovie_wrap {top:130rem;}
}
@media all and (max-width:768px){
	.popMovie_wrap {width:450rem;}
	.popMovie_wrap iframe {height:250rem;}
}
@media all and (max-width:560px){
	.popMovie_wrap {top:110rem;}
	.popMovie_wrap {width:350rem;}
	.popMovie_wrap iframe {height:200rem;}
}