@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

/*
 * layout.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) open-control
 * 4) 언어선택
 * 5) 준비중
 * 6) 관련사이트-목록열기형
 * 7) 레이아웃설정
 *
 */

/* 1) root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#0058cf;
	--color-white:#fff;
	--color-black:#000;
    --text-black:#070707;
	--font-base:16rem;

    --inr-narrow: 1280;
    /* --inr: 1440; */
    --inr: 1600;
    --inr-wide: 1720;
    --inr-width: .92;
	
	--font-eng:'Poppins', Sans-serif;
    --font-pre : 'Pretendard', Sans-serif;
	--font-combine:'Poppins', 'Pretendard', Sans-serif;
    --font-play:'Play', 'Pretendard', Sans-serif;
	--trans-ani:0.3s ease 0s;

    --fs60: clamp(28rem, calc(60 / var(--inr) * 100vw), 60rem);
    --fs50: clamp(26rem, calc(50 / var(--inr) * 100vw), 50rem);
    --fs45: clamp(24rem, calc(45 / var(--inr) * 100vw), 45rem);
    --fs42: clamp(24rem, calc(42 / var(--inr) * 100vw), 42rem);
    --fs40: clamp(24rem, calc(40 / var(--inr) * 100vw), 40rem);
    --fs35: clamp(24rem, calc(35 / var(--inr) * 100vw), 35rem);
    --fs30: clamp(24rem, calc(30 / var(--inr) * 100vw), 30rem);
    --fs28: clamp(22rem, calc(28 / var(--inr) * 100vw), 28rem);
    --fs25: clamp(20rem, calc(25 / var(--inr) * 100vw), 25rem);
    --fs24: clamp(20rem, calc(24 / var(--inr) * 100vw), 24rem);
    --fs22: clamp(20rem, calc(22 / var(--inr) * 100vw), 22rem);
    --fs20: clamp(18rem, calc(20 / var(--inr) * 100vw), 20rem);
}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);color:var(--text-black);position: relative;}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1300px){
    html{font-size:0.077vw /* 1px */;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}
}
@media (max-width:480px){
    html{font-size:0.271vw /* 1.3px */;}	
}

/* 3) open-control */
/* div.open-control
 *     button.open-control__btn
 *     div.list or ul.list
 * */
.open-control{position:relative;}
.open-control .list{display:none; position:absolute; top:100%; width:100%; padding:15rem; background-color:#fff; border:1rem solid #eee;}
.open-control .list a{display:inline-block;}

/* 4) 언어선택 */
.lang-area{position:relative; min-width:120rem;}
.lang-area .open-control__btn{display:flex; align-items:center; gap:10rem; background-color:transparent; font-size:17rem; font-weight:500;}
.lang-area .list ul{display:flex; flex-direction:column; gap:5rem; font-size:15rem;}
.lang-area .list a{opacity:0.5; font-weight:600; transition:0.3s ease;}
.lang-area .list a:hover{opacity:1;}

/* 5) 준비중 */
.ready-page{padding:120rem 0; text-align:center;}
.ready-page strong{display:block; font-size:35rem;}
.ready-page strong i{opacity:0.2; display:block; margin-bottom:10rem; font-size:45rem;}
.ready-page p{margin-top:20rem; font-size:18rem; line-height:1.4;}
@media (max-width:480px){
	.ready-page{padding:80rem 0;}
	.ready-page	strong{font-size:30rem;}
	.ready-page	p{font-size:16rem; word-break:keep-all;}
	.ready-page	p br{display:none;}
}

/* 6) 관련사이트-목록열기형 */
.relate-site{position:relative; max-width:260rem;}
.relate-site .open-control__btn{position:relative; width:100%; height:55rem; box-sizing:border-box; padding:0 30rem 0 20rem; background-color:transparent; border:1rem solid rgba(14,14,14,0.15); font-size:15rem; font-weight:600; text-align:left; color:#333; transition:0.3s ease;}
.relate-site .open-control__btn .xi-plus-min{position:absolute; right:20rem; top:50%; margin-top:-10rem; font-size:20rem; transition:transform 0.3s;}
.relate-site .open-control__btn.active{border-color:#111;}
.relate-site .open-control__btn.active .xi-plus-min{transform:rotate(45deg);}
.relate-site .list{display:none; position:absolute; bottom:100%; top:auto; width:100%; box-sizing:border-box; padding:35rem 20rem; background:#fff; border:1rem solid #111; border-bottom:0;}
.relate-site .list ul > li{margin-top:10rem;}
.relate-site .list ul > li:first-child{margin-top:0;}
.relate-site .list a{opacity:0.5; display:inline-block; font-size:14rem; font-weight:500; transition:opacity 0.3s;}
.relate-site .list a:hover{opacity:1;}
@media (max-width:480px){
	.relate-site{max-width:100%;}
}

/* 7) 레이아웃설정 */
/* inner */
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }

#header{display:flex; justify-content:flex-end; align-items:center; position:relative; z-index:90; width:100%; padding:0 50rem;}
#header h1{position:absolute; left:50rem;font-family: var(--font-play);}

/* gnb */
#header nav{padding-top:38rem;}
#header h1 a {
    background-image: url(/images/common/M&S-logo-white.svg);
    background-repeat: no-repeat;
    width: 135rem;
    height: 20rem;
    display: block;
}
#header nav .gnb{display:flex; align-items:center;}
#header nav .gnb li a{display:inline-block; word-break:keep-all;}
#header nav .gnb > li{position:relative;}
#header nav .gnb > li > a{padding:0 50rem 38rem; /*font-size:18rem;*/ font-size: var(--fs20);font-weight: 500;}
#header nav .gnb > li .box:not(.depth03){width:100%; min-width:180rem; padding:20rem; background-color:#fff; border:1rem solid #eee; box-shadow:0 20rem 30rem rgba(0,0,0,0.15);}
#header nav .gnb > li .box:not(.depth03) a{display:block; font-weight:500; transition:opacity 0.3s ease;}
#header nav .gnb > li .box:not(.depth03):is(:hover) a{opacity:0.5;}
#header nav .gnb > li .box:not(.depth03):is(:hover) a:hover{opacity:1;}
#header nav .gnb .box > ul{display:flex; flex-direction:column; gap:7rem;}
#header nav .gnb .box.depth03{margin-left:10rem;}
	/* gnb active */
#header nav .gnb .box:not(.depth03){opacity:0; visibility:hidden; position:absolute; left:50%; transform:translate(-50%, -30rem); transition:0.3s ease; transition-property:opacity, visibility, transform;}
#header nav .gnb .active .box:not(.depth03){opacity:1; visibility:visible; transform:translate(-50%, 0);}
@media (max-width:1024px){
	#header nav{display:none;}
    /* #header {padding: 0 20rem;} */
    #header {padding: 0 0 0 20rem;}
    #header h1 {line-height: 0.75;font-size: 22rem;left: 0;}
}

/* maga menu */
.mega-menu{opacity:0; visibility:hidden; display:flex; align-items:stretch; position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; background-color:rgba(0,0,0,0.6); transition:0.3s ease; transition-property:opacity, visibility;}
.mega-menu.active{opacity:1; visibility:visible;}
.gnb-mob{overflow-y:auto; width:80%; background-color:#fff;}
.gnb-mob a {width: 280rem;padding: 50rem 50rem 0; display: block;}
.gnb-mob .gnb{padding:30rem;}
.gnb-mob .gnb > li{position:relative; border-bottom:1rem solid rgba(0,0,0,0.1);}
.gnb-mob .gnb > li > a{display:flex; align-items:center; padding:20rem 20rem; font-size:23rem; font-weight:500;}
.gnb-mob .gnb > li .open{position:absolute; top:20rem; right:20rem; width:20rem; height:20rem; background-color:transparent; font-size:0;}
.gnb-mob .gnb > li .open:before{content:'\e913'; display:block; font-family:xeicon !important; font-size:20rem;}
.gnb-mob .gnb > li > a.active ~ .open:before{content:'\e91a';}
.gnb-mob .gnb > li > a.on{color:var(--color-point);}
.gnb-mob .box{display:none; padding:30rem; background-color:#f3f3f3;}
.gnb-mob .box ul{display:flex; flex-direction:column; gap:10rem;}
.gnb-mob .box a{display:block; font-size:18rem;}
.gnb-mob .box a span{line-height:1.4; background:linear-gradient(90deg, #222, #222); background-size:0 2rem; background-repeat:no-repeat; background-position:0 100%; transition:0.5s;}
.gnb-mob .box a.on span{background-size:100% 2rem; font-weight:700;}
	/* maga control */
[class*="mega-menu__"]{display:block; width:60rem; height:60rem; background-color:transparent;}
[class*="mega-menu__"] span{display:block; position:relative; width:16rem; height:14rem; margin:0 auto; font-size:0;}
[class*="mega-menu__"] span i,
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{display:block; position:absolute; height:2rem; background-color:#222; transform:rotate(0);}
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{content:''; width:100%;}
[class*="mega-menu__"] span:before{right:0; top:0; transition:0.5s ease 0s;}
[class*="mega-menu__"] span:after{left:0; bottom:0; transition:0.5s ease 0s;}
[class*="mega-menu__"] span i{opacity:1; left:0; top:6rem; width:100%; transition:opacity 0.3s, transform 0.5s ease 1.1s;}
[class*="mega-menu__"].active i{opacity:0;}
[class*="mega-menu__"].active span:before{right:0; top:5rem; transform:rotate(45deg);}
[class*="mega-menu__"].active span:after{left:0; bottom:7rem; transform:rotate(-45deg);}
	/* mega menu - open btn */
	/* pc에서만 사용한다면 display none처리 */
.mega-menu__btn{display:block;}
	/* mega menu - close btn */
.mega-menu__close{flex:auto; width:auto; height:auto; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}
.mega-menu__close em{display:flex; justify-content:center; align-items:center; width:60rem; height:60rem;}
.mega-menu__close span{width:26rem; height:24rem;}
.mega-menu__close span i,
.mega-menu__close span:before,
.mega-menu__close span:after{background-color:#fff;}
.mega-menu__close.active span:before{top:11rem;}
.mega-menu__close.active span:after{bottom:11rem;}
.mega-menu__close:focus{outline:none;}
@media (hover: hover){
	.gnb-mob .box a:hover span{background-size:100% 2rem;}
}
@media (max-width:1024px){
	[class*="mega-menu__"]{display:block;}
	.mega-menu__close{display:flex; justify-content:flex-end; padding-right:30rem; padding-top:20rem;}
	.mega-menu .open{display:block;}
}
@media (max-width: 767px) {
    .gnb-mob>a {width: 200rem;padding: 50rem 20rem 0;}
}
@media (max-width:480px){
	.mega-menu__close{padding-right:10rem;}
	.gnb-mob .gnb{padding:20rem 0;}
	.gnb-mob .gnb > li > a{font-size:18rem;}
	.gnb-mob .box{padding:25rem 20rem;}
	.gnb-mob .box a{font-size:16rem;}
}

/* util */
.util-area{display:flex; align-items:center; gap:10rem;}
.util-area>a {display: none; visibility: hidden;}
/* @media (max-width: 767px) {
    .util-area {font-size: 12rem;}
} */


#header {position: relative;color: var(--color-white);justify-content: space-between;transition: all .5s ease;}
#header h1 {position: relative;}
#header nav .gnb > li .box:not(.depth03) a {color: var(--text-black);}
[class*="mega-menu__"] span::before,
[class*="mega-menu__"] span::after,
[class*="mega-menu__"] span i {background-color:var(--color-white);} 
.gnb-mob .gnb > li > a,
.gnb-mob .box a {color: var(--text-black);}

/* header subpage  */
#header.subpage {color: var(--text-black);background-color: #fff;
    h1 a {background-image: url("/images/common/M&S-logo.svg");}
    [class*="mega-menu__"] span::before,
    [class*="mega-menu__"] span::after,
    [class*="mega-menu__"] span i {background-color: var(--text-black)}
    .mega-menu__close.active span::before, .mega-menu__close.active span::after {background-color: var(--color-white);}
    h1 span {color: #0257D4;}
}



#footer {background-color: #141414;color: #d1d1d1;padding-block:50rem; font-size: 14rem; position:relative;
    .info{display:flex;flex-direction:column;gap:30rem;}
    address {display: flex;flex-direction: row;flex-wrap: wrap;gap: 20rem 40rem;}
    address span {font-weight: 400;}
    address b {margin-right: .8ch;font-weight: 600;}
	p.callnum {border:1px solid #ccc; padding:20rem; border-radius:5rem; position:absolute; top:0; right:150px;  font-size:20rem; }
    .copyright{font-weight:400;color: #999;}
    .top-btn {width: 55rem;aspect-ratio: 1;background-color: #474747; color: var(--color-white);display: flex;justify-content: center;align-items: center;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}

    @media (max-width: 767px) {
        .top-btn {top: 0;}
		p.callnum {position:relative; right:auto; font-size:15rem;   padding:10rem; text-align:center;}
    }
}


.hq-guide {width: 130rem;position: fixed;z-index: 999;left: 0;bottom: 30%;background-color: #404040;border: 1px solid #404040;border-top-right-radius: 10rem;border-bottom-right-radius: 10rem; transform: translateX(0);transition: all var(--trans-ani);
    .guide-title {background-color: var(--color-point);color: var(--color-white);display: grid;place-items: center;height: 50rem;border-top-right-radius: 10rem;
        h3 {font-size: 16rem;font-weight: 500;}
    }
    &> ul { padding-inline: 5rem;}
    &>ul>li:not(:last-child){border-bottom:1px dashed #d9d9d9;}

    .hq-item {display: flex;flex-direction: column;align-items: center;padding-block: 15rem;gap: 10rem;
        i{background-color:#ff7222;color:var(--color-white);font-size:14rem;font-weight:300;display:grid;place-items:center;width:fit-content;padding-inline:15rem;height:30rem;border-radius:15rem;}
        p {font-weight: 600;font-size: 14rem;}
    }
    .hq-item.tltnum {
		 p {font-weight: 600; font-size: 21rem; color:#ff6600; padding: 0;}
	}
    }


    .btn-hq-guide {
        --w-btn: 28rem;
        --radius : 5rem;

        
        display: grid;
        place-items: center;
        position: absolute;
        bottom: 20rem;right: calc(var(--w-btn) * -1);background-color: #404040;color: var(--color-white);width: var(--w-btn);height: 60rem;border-top-right-radius: var(--radius );border-bottom-right-radius: var(--radius ); 

        i {transform: rotate(90deg);transition: all var(--trans-ani);}
        i.closed {transform: rotate(270deg);}
 
    }
    &.hq-close {
        transform: translateX(140rem);
    }
}