@charset "utf-8";

.conts > .inner {max-width:1720px;}

.pageTitle {padding:4.5em 0 7em 0;}
.pageTitle:before {background:#FBF4FF !important; margin-top:-50vw;}
.pageTitle .btnWrap {position:absolute; bottom:0; left:50%; transform:translateX(-50%); margin-bottom:-1.5em;}
.pageTitle .btnWrap a {position:relative; display:block; width:18em; padding:1em 2em 1em 4em; background:#36339B url(../img/common/ask_ico_w.svg) no-repeat top 50% left 2em; border: 1px solid #0C43AC !important; text-align:left; transition:all .5s ease-in-out;}
.pageTitle .btnWrap a span {color:#fff; font-weight:700;}
.pageTitle .btnWrap a .arrow {display: inline-block; position:absolute; left:70%; top:50%; transform: translateY(-50%); width:3.5298em; height:3px; background:#fff; border-radius:3px; margin-right:2em; transition:all .5s ease-in-out;}
.pageTitle .btnWrap a .arrow:after {content: ''; position:absolute; right:0; top:50%; display:block; transform: translateY(-50%); display:block; background: url(../img/common/btn_ico_arrow.svg) no-repeat 0 0;width:.706em; height:1em; margin-right: -.3em;background-size: contain;}
.pageTitle .btnWrap a:hover {width:21em; background-color:#36339B;}
.pageTitle .btnWrap a:hover .arrow {width:4.706em;}

/* --------------------------------------------------
	상담 박스
----------------------------------------------------- */
.customerWrap > div + div {margin-top:7.5em}
.customerWrap .linkBox {position:relative; padding:4.5em 5em; background:#FAF9FB; border-radius:1em;}
.customerWrap .linkBox ul {display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:2em; }
.customerWrap .linkBox ul li {width:33.33%; text-align:center; }
.customerWrap .linkBox ul li a {position:relative; width:100%; display:block; padding:2.5em 1.5em 3em 1.5em; border-radius:1em; box-shadow:5px 5px 30px 0 rgba(0,0,0,0.08); text-align:center;}
.customerWrap .linkBox ul li a > * {z-index:1; position:relative;}
.customerWrap .linkBox ul li strong {display:block; margin-bottom:.6em; font-size:1.6em; font-weight:900; color:#222;}
.customerWrap .linkBox ul li p {color:#333; font-size:.9em;}
.customerWrap .linkBox ul li p em {font-weight:600; color:#333;}
.customerWrap .linkBox ul li a:before {content:""; position:absolute; top:0; right:0; left:0; bottom:0; display:block; background:#fff;  border-radius:1em;}
.customerWrap .linkBox ul li:hover a:before  {border:2px solid #000;}
.customerWrap .linkBox ul li:hover a:before  {border:2px solid #000; transform:scale(1.03); transition-duration:.4s;}
.customerWrap .linkBox ul li:hover a:after {content:''; display:block; width:2.5em; height:2.5em; position:absolute; right:1em; top:1em; background:url(../img/contents/customer/ico_customer_link.svg) no-repeat 0 0; background-size:contain;}
.customerWrap .linkBox li i {display:block; width:5em; height:5em; margin:0 auto 1.5em; background-image:url(../img/contents/customer/ico_customer01.svg); background-repeat:no-repeat; background-size:contain;}
.customerWrap .linkBox li.caht i {background-image:url(../img/contents/customer/ico_customer01.svg);}
.customerWrap .linkBox li.call i {background-image:url(../img/contents/customer/ico_customer02.svg);}
.customerWrap .linkBox li.mail i {background-image:url(../img/contents/customer/ico_customer03.svg);}

/* --------------------------------------------------
	업데이트 노트
----------------------------------------------------- */
.customerWrap .updateWrap {position:relative; margin-top:7.5em; margin-bottom:7em; background-image:url(../img/main/ask_bg.png); background-repeat:no-repeat; background-size:cover; background-attachment:fixed; background-position:center; border-radius:1em; overflow:hidden;}
.customerWrap .updateWrap {display:flex; padding:5.5em 5em; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between;}
.customerWrap .updateWrap .tit * {display:block; color:#fff; font-weight:900;}
.customerWrap .updateWrap .tit em {margin-bottom:1.3em;}
.customerWrap .updateWrap .tit strong {font-size:2em;}

.customerWrap .updateWrap .btnWrap a {position:relative; display:block; width:20em; padding:1em 2em 1em 4em; background:#fff url(../img/common/intro_free_ico_purple.svg) no-repeat top 50% left 2em; border-radius:5em; text-align:left;}
.customerWrap .updateWrap .btnWrap span {font-size:.8em; font-weight:800; color:#312E98;}
.customerWrap .updateWrap .btnWrap .arrow {display: inline-block; position:absolute; left:70%; top:50%; transform: translateY(-50%); width:3em; height:3px; background:#312E98; border-radius:3px; margin-right:2em; transition:all .5s ease-in-out;}
.customerWrap .updateWrap .btnWrap .arrow:after {content: ''; position:absolute; right:0; top:50%; display:block; transform: translateY(-50%); display:block; background: url(../img/common/btn_ico_arrow_purple.svg) no-repeat 0 0;width:.706em; height:1em; margin-right: -.3em;background-size: contain;}


@media all and (max-width:1400px) {
	.customerWrap .linkBox {padding:2.5em 3em;}
	.customerWrap .linkBox ul {gap:1em;}
}

@media all and (max-width:1240px) {
	.customerWrap .linkBox {padding:1.5em 1em;}
	.customerWrap .linkBox ul li strong,
	.customerWrap .updateWrap .tit strong {font-size:1.2em;}
	.customerWrap .updateWrap {padding:2.5em 3em;}
}

@media all and (max-width:1024px) {
	.customerWrap .linkBox {padding:2.5em 3em;}
	.customerWrap .linkBox ul {flex-direction:column; justify-content:center;}
	.customerWrap .linkBox ul li {width:100%;}
	.customerWrap .updateWrap {flex-direction:column; text-align:center; word-break:keep-all; }
	.customerWrap .updateWrap .btnWrap {margin-top:2em;}
	.customerWrap .updateWrap .btnWrap a {width:19em;}
}

@media all and (max-width:960px) {
	.customerWrap .updateWrap .tit strong {display:inline-block;}
}

@media all and (max-width:640px) {
	.customerWrap .linkBox {padding:1em;}

}