@charset "utf-8";

/* common */
.cf::after {content:''; display:block; clear:both;}
.inner {width:94%; max-width:1280px; margin:0 auto;}
.inner.half {max-width: 640px; margin:0;}
.mb-br {display:none;}

@media (max-width:1600px) {
    .pc-br {
        display: none;
    }
    .mb-br {
        display: block;
    }
}

.navi-btn {cursor:pointer;}
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0;text-indent:-9999em;line-height:0;border:0 !important;overflow:hidden !important}

.maxinner {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* color */
.clr-red {color:#d81a26 !important;}

/* popup */
.popup {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.4); z-index:99; justify-content:center; align-items:center;}
.popup.on {display:flex;}
.popup .pop-cont {position:relative; min-width:62rem; max-width:110rem; min-height:44rem; max-height:96vh;}
.popup .pop-main {background:#fff; max-height:96vh; padding:6rem 7rem;}
.popup .pop-main.scrollbox {margin-left:0;}
.popup .pop-main .title {font-size:2.4rem; text-align:center; color:#111; font-weight:700;}
.popup .pop-main .btnbox {display:flex; justify-content:center; text-align:center; margin-top:3.5rem;}
.popup .pop-main .btnbox a {display:inline-flex; align-items:center; justify-content:center; margin-right:3rem; width:19.3rem; height:5.9rem; background:#f0333b; color:#fff;}
.popup .pop-main .btnbox a:last-child {margin-right:0;}
.popup .pop-main .btnbox a.wht-btn {background:#fff; color:#333333; border:1px solid #dcdcdc;}
.popup .pop-main .btnbox a .ico {margin-left:1rem;}
.popup .pop-close-btn {position:absolute; top:3rem; right:4rem; cursor:pointer; width: 2.1rem;}

/********************************** main popup **********************************/
.hd_popup_area {z-index:7;margin:0 auto; width:100%; max-width:970px; }
.hd_popup_area img{max-width:100%; vertical-align:top;}
.hd_popup_area h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute; background:#fff; top:130px; left:80px; z-index: 2;}
.hd_pops_con {position:relative;}
.hd_pops_footer {padding:10px 0;background:#333;color:#fff;text-align:right; overflow:hidden; text-align:center; position:relative;}
.hd_pops_footer button { padding:2px 10px;border:0;background:transparent; font-size:14px;color:#fff; float:left;}
.hd_pops_footer .pop_closeBtn{position:absolute; right:10px; width:30px; height:30px; top:8px; padding:15px 0 0; cursor:pointer;  z-index:2;}
.hd_pops_footer .pop_closeBtn span{width:100%; height:2px; background:#fff; display:block; margin:-2px 0; transform:rotate(45deg);}
.hd_pops_footer .pop_closeBtn span:last-child{transform:rotate(-45deg);}
.hd_pops_link{
	display:block;
	padding:10px;
	color:#0c4da2;
	font-size:12px;
	text-align:right;
}
@media screen and (max-width:768px){
	.hd_popup_area{max-width:500px; width:100%; }
	.hd_pops{width:90%;  left:5% !important; top:80px; !important;}
}

/* radio + checkbox */
.ck-box {display:inline-block; position:relative; font-size:1.6rem; color:#666; font-weight:300;}
.ck-box.full {display:block;}
.ck-box.full + .ck-box.full {margin-top:1.5rem; margin-left:0;}
.ck-box + .ck-box {margin-left:2rem;}

.ck-box .checkbox {background:none; opacity:0; position:absolute; left:0; top:0; z-index:10; width:1.8rem; height:1.8rem; cursor:pointer;}
.ck-box .checkbox + label {position:relative; display:inline-block; z-index:5; padding-left:3rem; color:#666; font-weight:300; font-family:'Pretendard', sans-serif; line-height:1;}
.ck-box .checkbox + label::before {content:''; display:inline-block; z-index:5; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1.8rem; height:1.8rem; background:#fff; border:1px solid #ddd;}
.ck-box .checkbox + label .req {color:#ff0000; margin-left:0.5rem;}
.ck-box .checkbox:checked + label::before {background:#fff url('/assets/images/sub/checkbox-chk.png') no-repeat center; border-color:#080808;}
.ck-box .checkbox.type-red + label::before{border-radius:3px; border:1px solid #dcdcdc;}
.ck-box .checkbox.type-red:checked + label::before {background:#fff url('/assets/images/sub/checkbox-chk-red.png') no-repeat center; border-color:#d91b27;}

.ck-box .radio {background:none; opacity:0; position:absolute; left:0; top:0; z-index:10; width:1.8rem; height:1.8rem; cursor:pointer;}
.ck-box .radio + label {position:relative; display:inline-block; z-index:5; padding-left:3rem; color:#666; font-weight:300; font-family:'Pretendard', sans-serif; line-height:1;}
.ck-box .radio + label::before {content:''; display:inline-block; z-index:5; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1.8rem; height:1.8rem; background:#fff; border-radius:3px; border:1px solid #dcdcdc;}
.ck-box .radio + label .req {color:#ff0000; margin-left:0.5rem;}
.ck-box .radio:checked + label::before {background:#fff url('/assets/images/sub/checkbox-chk-red.png') no-repeat center; border-color:#d91b27;}



/* scroll box */
.scrollbox {height:100%; overflow:auto; scrollbar-track-color: transparent; scrollbar-base-color: transparent; padding-right:3rem;}
.scrollbox::-webkit-scrollbar-track {border-radius: 3px; background-color: transparent;}
.scrollbox::-webkit-scrollbar {width: 6px; background-color: transparent;}
.scrollbox::-webkit-scrollbar-thumb { border-radius:3px; background-color: #e5e5e5;}


/* header */
.header {position:fixed; top:0; left:0; width:100%; z-index: 9; transition:all .5s ease;}
.header.hide {display:none;}
.header:after {display:block; content:''; background:url(/assets/images/common/hd-bg-logo.png) no-repeat center/contain; width:38.9rem; height:12.2rem; position:absolute; right:0; bottom:-0.5rem; opacity:0; visibility: hidden;}
.header > .inner {display:flex; justify-content:space-between; align-items:center; padding: 0 6rem; width: 100%; max-width:100%; height:13rem;}
.header .logo {display:block; width:10.2rem; height:3.2rem; background:url(/assets/images/common/hd-logo.png) no-repeat center/contain; transition:all .1s;}
.header .gnb > li > a {font-size:1.8rem; color:#fff;}
.header .gnb {display:inline-block; text-align:center; position:absolute; top:0; left:50%; transform:translateX(-50%);}
.header .gnb > li {position:relative;display:inline-block;padding:0 3.5rem; min-width:15rem;}
.header .gnb > li > a {position:relative;line-height:13rem; font-weight:500; padding:0 1.5rem;}
.header .gnb > li > a::after {display:block; content:''; position:absolute; bottom:0; left:50%; width:0; height:3px; background:#d81a26; transition:all ease .4s;}
.header .gnb > li:hover > a::after {width:100%; left:0; display:block;content:'';}
.header .gnb a {display:block; font-size:1.8rem; color:#fff;}
.header .gnb .dep2 {display:none; width:100%; padding:4.3rem 2.5rem 4.3rem 2.5rem; min-height:35rem; position:absolute; top:13rem; left:0;}
.header .gnb .dep2 li {padding:1.2rem 0;}
.header .gnb .dep2 li a {font-size:1.7rem; font-weight:500; color:#666; transition:all .2s;}
.header .gnb .dep2 li:hover a {color:#d81a26;}

.header .r-box {display:flex; align-items:center;}
.header .r-box .r-right {display:flex; align-items:center;}
.header .utill a {display:inline-block; font-size:1.4rem; color: #fff; margin:0 1.5rem; font-weight:400;}
.header .sch-btn {display:inline-block; width:2rem; height:2rem; transition:all .1s; background:url(/assets/images/common/ico-search.png) no-repeat center/contain;}
.header .lang {position:relative; font-size:1.4rem; color: #fff; cursor:pointer; margin-right:4.5rem; padding-left:1.5rem;}
.header .lang .ico {display:inline-block; margin-left:1rem; width:12px; height:7px; transition:all .1s; background:url(/assets/images/common/lang-arr.png) no-repeat center/contain;}
.header .lang.active .ico {transform:rotate(180deg);}
.header .lang .lang-list {display:none; position:absolute; top:4rem; left:1.5rem; background:#ffffff; padding:0 1.5rem; width: calc(100% - 1rem); text-align:center;}
.header .lang .lang-list a {position:relative; display:block; color:#333; line-height: 1; padding:1rem 0; transition:all .2s;}
.header .lang .lang-list a:after {display: block; content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:rgba(0,0,0,0.3);}
.header .lang .lang-list a:last-child:after {display:none;}
.header .lang .lang-list a:hover {color: #d81a26;}
.header .lang .txt {display:inline-block; position:relative; padding-right:1.4rem; line-height:1;}

.header .menu-btn {position:relative; width:2.8rem; height:1.8rem; cursor:pointer; margin-left:2rem; z-index:999;}
.header .menu-btn .bar {display:inline-block; transition:all .4s; position:absolute; left:0; width:100%; height:2px; background-color:#fff;}
.header .menu-btn .bar:nth-child(1) {top:0;}
.header .menu-btn .bar:nth-child(2) {top:calc(50% - 1px);}
.header .menu-btn .bar:nth-child(3) {bottom:0;}

.header .menu-btn.on .bar:nth-child(1) {transform:translate(-50%) rotate(-45deg); left:50%; top:50%;}
.header .menu-btn.on .bar:nth-child(2) {left:200%; opacity:0; transform:translateY(0); animation:active-menu-bar02 .8s forwards;}
.header .menu-btn.on .bar:nth-child(3) {transform:translate(-50%) rotate(45deg); left:50%; bottom:auto; top:50%;}

.header .menu-btn.on .bar {background:#313131;}

@keyframes active-menu-bar02 {
	100% {height:0;}
}


.header .sch-w {display:none; position: absolute; top:0; left:0; background:#fff; width:100%; z-index:1000; box-shadow:11px 4px 8px 0px rgb(0 0 0 / 3%);}
.header .sch-w .sch-close-btn {opacity:0; transform:translateY(-5rem); transition:all 1s ease; position:absolute; bottom:-3rem; right:5rem; width:6rem; height:6rem; display:inline-flex; justify-content:center; align-items:center; background:#d91b27;}
.header .sch-w .sch-close-btn.active {opacity:1; transform:none;}
.header .schbox {position: relative; width:92%; max-width:80rem; margin:8rem auto;}
.header .schbox .sch-input {border:none; border-bottom:1px solid #111111; height:6rem;}
.header .schbox .sch-submit {position:absolute; top:50%; right:0; border:none; background:none; transform:translateY(-50%);}



/* header - scroll on */
.header.sc-on:not(.hd-blk) {background-color:#fff;}
.header.sc-on:not(.hd-blk) .inner {border-bottom:1px solid #ddd;}
.header.sc-on:not(.hd-blk) .gnb > li > a {color:#111;}
.header.sc-on:not(.hd-blk) .utill a  {color:#111;}
.header.sc-on:not(.hd-blk) .sch-btn {background-image:url(/assets/images/common/ico-search-on.png);}
.header.sc-on:not(.hd-blk) .logo {background-image:url(/assets/images/common/hd-logo-on.png);}
.header.sc-on:not(.hd-blk) .lang {color:#111}
.header.sc-on:not(.hd-blk) .lang .ico {background-image:url(/assets/images/common/lang-arr-on.png);}
.header.sc-on:not(.hd-blk) .menu-btn .bar {background:#000;}


/* header - on */
.header.on {height:48.5rem; background:#fff; overflow:hidden;}
.header.on:after {right:26rem; visibility: visible; opacity:1; transition:.4s;}
.header.on .gnb .dep2 {display:block;}
.header.on:not(.hd-blk) .inner {border-bottom:1px solid #ddd;}
.header.on:not(.hd-blk) .gnb > li > a {color:#111;}
.header.on:not(.hd-blk) .utill a  {color:#111;}
.header.on:not(.hd-blk) .sch-btn {background-image:url(/assets/images/common/ico-search-on.png);}
.header.on:not(.hd-blk) .logo {background-image:url(/assets/images/common/hd-logo-on.png);}
.header.on:not(.hd-blk) .lang {color:#111}
.header.on:not(.hd-blk) .lang .ico {background-image:url(/assets/images/common/lang-arr-on.png);}
.header.on:not(.hd-blk) .menu-btn .bar {background:#000;}


/* header -  dark background*/
.header.hd-blk {background-color:#000;}

/* header -  white background*/
.header.hd-wht {background-color:#fff; box-shadow: 11px 4px 8px 0px rgba(0, 0, 0, 0.03);}
.header.hd-wht > .inner {border-bottom:none !important; box-shadow: 11px 4px 8px 0px rgba(0, 0, 0, 0.03);}
.header.hd-wht .gnb > li > a {color:#111;}
.header.hd-wht .utill a  {color:#111;}
.header.hd-wht .sch-btn {background-image:url(/assets/images/common/ico-search-on.png);}
.header.hd-wht .logo {background-image:url(/assets/images/common/hd-logo-on.png);}
.header.hd-wht .lang {color:#111}
.header.hd-wht .lang .ico {background-image:url(/assets/images/common/lang-arr-on.png);}
.header.hd-wht .menu-btn .bar {background:#000;}





/* 사이트맵 */
.all-menu {transform:translate(100%, 0); transition:transform 0.5s ease-out; width:100%; height:100vh; position:fixed; top:0; left:0; background:#fff url(/assets/images/common/all-menu-bg.png) no-repeat center/cover;}
.all-menu.on {transform:translate(0, 0);}
.all-menu:after {display:block;content:'';background:url(/assets/images/common/hd-bg-logo.png) no-repeat center/contain;width:38.9rem;height:12.2rem;position:absolute;right:-2rem;bottom:3.5rem;opacity:0;transform:translateX(25rem);transition:1.4s ease;transition-delay:1.2s;z-index: -1;}
.all-menu.on:after {opacity:1; transform:translateX(0);}
.all-menu ul {display:flex; height:100%; overflow-y:auto; text-align:center;}
.all-menu ul li {width:20%; margin:0 1.5rem; padding-top:30rem; overflow:hidden;}
.all-menu ul li strong {display:block; font-size:3.5rem; color:#111; font-weight:700; position:relative; padding-bottom:3rem; transform:translateX(100%); opacity:0;}
.all-menu ul li strong::before {display:block; content:''; z-index:2; width:100%; height:1px; background:#dddddd; position:absolute; bottom:0; left:0;}
.all-menu ul li strong::after {display:block; content:''; transition:all .2s ease-out; z-index:3; width:5rem; height:1px; background:#d81a26; position:absolute; bottom:0; left:0;}
.all-menu ul li strong .txt-en {position:absolute; z-index:-1; top:-1.6rem; left:50%; transform:translateX(-50%); font-size:3rem; font-weight:700; color:#f5f5f5;}
.all-menu ul li .depth2 {padding:2.2rem 0; transform:translateX(100%); opacity:0;}
.all-menu ul li .depth2 a {display:block; font-size:1.7rem; color:#666; font-weight:500; padding:1.2rem 0; transition:all .2s ease-out;}
.all-menu ul li .depth2 a:hover {color:#d81a26;}

.all-menu ul li:hover strong::after {width:100%;}

.all-menu.on ul li strong {transform:translateX(0); opacity:1; transition:all 0.7s ease-out; transition-delay:0.4s;}
/* .all-menu.on ul li:nth-child(1) strong {transition-delay:0.4s;}
.all-menu.on ul li:nth-child(2) strong {transition-delay:0.8s;}
.all-menu.on ul li:nth-child(3) strong {transition-delay:1.2s;}
.all-menu.on ul li:nth-child(4) strong {transition-delay:1.6s;}
.all-menu.on ul li:nth-child(5) strong {transition-delay:2s;} */

.all-menu.on ul li .depth2 {transform:translateX(0); opacity:1; transition:all 0.7s ease-out; transition-delay:0.8s;}
/* .all-menu.on ul li:nth-child(1) .depth2 {transition-delay:0.4s;}
.all-menu.on ul li:nth-child(2) .depth2 {transition-delay:0.8s;}
.all-menu.on ul li:nth-child(3) .depth2 {transition-delay:1.2s;}
.all-menu.on ul li:nth-child(4) .depth2 {transition-delay:1.6s;}
.all-menu.on ul li:nth-child(5) .depth2 {transition-delay:2s;}
 */



/* footer */
.ft-1 {border-bottom:1px solid #e5e5e5; border-top:1px solid #e5e5e5;}
.ft-1 .inner {display:flex; justify-content:space-between; align-items:center; height:8rem;}
.ft-1 .logo {width:10.2rem;}
.ft-1 .link a {display:inline-block; font-size:1.5rem; color:#666;}
.ft-1 .link a:after {display:inline-block; content:''; width:1px; height:1rem; background:#666; margin:0 1rem;}
.ft-1 .link a:last-child::after {display:none;}
.ft-1 .link a.clr-red {font-weight:700;}

.ft-2 {border-bottom:1px solid #e5e5e5; padding:2rem 0;}
.ft-2 .swiper-slide {width:auto; display:flex;}
.ft-2 .swiper-slide > * {flex-shrink:0;}
.ft-2 .swiper-slide .txt {font-size:1.4rem; line-height:1.285; margin-left:1.5rem;}

.ft-3 {padding-top:3.5rem; padding-bottom:7rem;}
.ft-3 .inner {display:flex; justify-content:space-between;}
.ft-3 .left ul li {float:left; margin:0.5rem 0; color:#666;}
.ft-3 .left ul li::after {display:inline-block; content:''; width:1px; height:1rem; background:#dfdfdf; margin:0 1rem;}
.ft-3 .left ul li.last::after {display:none;}
.ft-3 .left ul li.first {clear:left;}
.ft-3 .left .copy {font-size:1.5rem; color:#999; margin-top:3rem;}

.ft-3 .right {display:flex; align-items:flex-start;}
.ft-3 .right .sns {margin-right:3rem; display:flex; align-items:center; height:4.5rem}
.ft-3 .right .sns a {width:3.6rem; height:3.6rem; border-radius:50%; display:inline-block; text-align:center; margin:0 0.5rem; transition:all .2s ease;}
.ft-3 .right .sns a.blog {background:url(/assets/images/common/ft-sns-blog.png) no-repeat center;}
.ft-3 .right .sns a.facebook {background:url(/assets/images/common/ft-sns-fb.png) no-repeat center;}
.ft-3 .right .sns a.kakao {background:url(/assets/images/common/ft-sns-kakao.png) no-repeat center;}
.ft-3 .right .sns a.blog:hover {background-image:url(/assets/images/common/ft-sns-blog-on.png);}
.ft-3 .right .sns a.facebook:hover {background:url(/assets/images/common/ft-sns-fb-on.png);}
.ft-3 .right .sns a.kakao:hover {background:url(/assets/images/common/ft-sns-kakao-on.png);}
.ft-3 .family-site {position:relative; display:inline-block; width:auto;}
.ft-3 .family-site .family-btn {position:relative; border-bottom:1px solid #313131; cursor:pointer; width:24rem; height:4.5rem; padding:1.5rem 0; display:flex; justify-content:space-between; font-size:1.5rem; color:#111; font-weight:500;}
.ft-3 .family-site .family-btn .arr {position:absolute; top:50%; right:1rem; transform:translateY(-50%); transition: all .2s ease;}
.ft-3 .family-site .family-btn.active .arr {transform:translateY(-50%) rotate(180deg);}
.ft-3 .family-site .dep2 {display:none; z-index:1; position:absolute; bottom:4.5rem; left:0; width:100%; padding:1rem; border:1px solid #2d2d2d; background:#111;}
.ft-3 .family-site .dep2 a {font-size:1.5rem; color: #ddd; display:block; padding:1.2rem 0; border-bottom:1px solid rgba(255,255,255,0.15);}
.ft-3 .family-site .dep2 a:last-child {border-bottom:none;}




@media ( max-width: 1780px ) {
	.header > .inner {padding:0 3%;}
	.header .gnb {position:relative; top:auto; left:auto; transform:none;}
	.header .gnb > li {padding:0 2rem;}
	.header .gnb .dep2 {padding:4rem 2rem;}
}

@media ( max-width: 1380px ) {
	.header .gnb {display:none;}
}

@media ( max-width: 1200px ) {
	.header > .inner {padding:0 3%; height:10rem;}
	.header.hide {display:block;}
}

@media ( max-width: 1024px ) {
	.all-menu ul li strong {font-size:2.8rem;}
	.all-menu ul li strong .txt-en {font-size:2.2rem; top:-1.8rem;}

	.ft-3 {padding:3rem 0 5rem 0;}
	.ft-3 .inner {flex-wrap:wrap;}
	.ft-3 .right {order:1; margin-bottom: 3rem;}
	.ft-3 .left {order:2;}

}

@media ( max-width: 768px ) {
	.header {border-bottom:1px solid rgba(255,255,255,0.25);}
	.header .utill {position: absolute; width:100%;height:4rem;top: 0;right: 0;text-align: right;padding: 0 3%;border-bottom: 1px solid rgba(255,255,255,0.25); display: flex;align-items: center;justify-content: flex-end;}
	.header .utill a:last-child {margin-right:0;}
	.header .logo,
	.header .r-box .r-right {/*transform: translateY(2rem);*/ margin-top:4rem;}
	.header .r-box .r-right {z-index:99;}
	.header .logo {width:8rem;}
	.header .schbox {margin:6rem auto;}
	.header .sch-w .sch-close-btn {width:4rem; height:4rem; padding:1.2rem; bottom:-2rem; right:3%}
	.header .lang {margin-right:2rem;}

	.header.sc-on .utill {/*border-bottom: 1px solid rgba(0,0,0,0.17);*/ height:0; opacity:0;}
	.header.sc-on,
	.header.sc-on > .inner {height:8rem;}
	.header.sc-on .logo, .header.sc-on .r-box .r-right {/*transform:none;*/ margin-top:0;}

	.all-menu ul {flex-wrap:wrap; padding:6rem 0;}
	.all-menu ul li {width:100%; margin:2rem 0; padding-top:0;}
	.all-menu ul li strong {font-size:2.4rem; padding-bottom:2rem;}

	.ft-3 .family-site .dep2 a {font-size:1.4rem;}

	.popup .pop-main {padding:5rem 2.5rem;}
	.popup .pop-main .title {font-size:2rem;}
	.popup .pop-cont {min-width:inherit; width:94%;}
}

@media all and (max-width:500px) {

	.ft-1 .inner {flex-wrap:wrap; height:auto; padding:1.4rem 0;}
	.ft-1 .logo {display:none;}
	.ft-1 .inner .link {width:100%;}
}