@import url('sub.css');

.arrow{display: flex;}
.arrow img{width: auto; height: 17px;}



.arrow img {opacity: 0.1; -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; animation: mouse-scroll 1s infinite;}
.arrow img:nth-child(1) {-webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; animation-direction: alternate; animation-delay: alternate;}
.arrow img:nth-child(2) {-webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; animation-delay: .2s; animation-direction: alternate;}

@-webkit-keyframes mouse-scroll {
	0%   { opacity: 0.1;}
	100% { opacity: 0.7;}
}
@-moz-keyframes mouse-scroll {
	0%   { opacity: 0.1;}
	100% { opacity: 0.7;}
}
@-o-keyframes mouse-scroll {
	0%   { opacity: 0.1;}
	100% { opacity: 0.7;}
}
@keyframes mouse-scroll {
	0%   { opacity: 0.1;}
	100% { opacity: 0.7;}
}


/* 원격지원 및 AS */
.support-remote{display: flex; align-items:center; background:var(--white);}
.support-remote__flow{flex:1; display: flex; gap:36px;}
.support-remote__step{flex:1; text-align:center; display: flex; flex-direction: column; gap:30px; position: relative; opacity: 0.6; mix-blend-mode: luminosity; transition:all .3s linear; padding: 0 20px; box-sizing:border-box;}
.support-remote__step .support-remote__top{display: flex; flex-direction: column; gap:20px;}
.support-remote__step .support-remote__top .support-remote__num{display: block; margin: 0 auto; width: 97px; line-height: 35px; border-radius:35px; background:var(--main); color:var(--white); font-weight: 700;}
.support-remote__step .support-remote__top .support-remote__ico img{width: auto; height: 80px;}
.support-remote__step .support-remote__body{display: flex; flex-direction: column; gap:20px;}
.support-remote__step .support-remote__body .support-remote__txt{display: flex; flex-direction: column; gap:5px;}
.support-remote__step .support-remote__body .support-remote__tit{font-weight: 600; color:var(--black);}
.support-remote__step .support-remote__body a{display: flex; width: 100%; max-width:211px; margin: 0 auto; text-align:left;}
.support-remote__step .support-remote__body a{background:none; height: 48px;}
.support-remote__step .support-remote__body a::before{border-color:var(--basic);}
.support-remote__step .support-remote__body a::after{background:var(--basic);}
.support-remote__step .support-remote__body a p::after{color:var(--basic);}
.support-remote__step .support-remote__body a p em{color:var(--basic);}
.support-remote__step .support-remote__body a p em::after{color:var(--white);}
.support-remote__step .support-remote__body a:hover p::after{color:var(--white);}
.support-remote__step .arrow{position: absolute; right: -36px; top:50%; margin-top: -15px;}
.support-remote__step.active{opacity: 1; mix-blend-mode: normal;}
.support-remote__aside{width: 260px; box-sizing:border-box; padding:20px; display: flex; flex-direction: column; gap:10px; background:var(--grayBg);}
.support-remote__aside .support-remote__aside-hd{background:var(--sub); padding: 10px; box-sizing:border-box; border-radius:35px; text-align:center; }
.support-remote__aside .support-remote__aside-hd p{color:var(--white); font-weight: 700;}
.support-remote__aside .support-remote__aside-hd p::before{content:'\e998'; font-size:17px; display: inline-block; vertical-align: middle; font-weight: 400; font-family: var(--icon); color:inherit; margin: 0 10px 0 0;}
.support-remote__aside .support-remote__aside-cap img{width: 100%; height: auto;}

.rma-process{box-sizing:border-box; display:flex; align-items:flex-start; gap:10px; padding:50px 40px; background:var(--white);}
.rma-process .rma-process__step{box-sizing:border-box; position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:20px; padding: 0 10px;}
.rma-process .rma-process__step .rma-process__top{box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:20px; width:100%;}
.rma-process .rma-process__num{box-sizing:border-box; margin:0; display:inline-flex; align-items:center; justify-content:center; height:35px; padding:0 20px; border-radius:100px; background:var(--main); color:var(--white); font-weight:700; line-height:143%; letter-spacing:0.02em; white-space: nowrap;}
.rma-process .rma-process__ico{box-sizing:border-box; width:70px; height:70px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;}
.rma-process .rma-process__ico img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.rma-process .rma-process__tit{box-sizing:border-box; margin:0; width:100%; text-align:center; font-weight:600; color:var(--black); line-height:150%;}
.rma-process .rma-process__step .arrow{box-sizing:border-box; position:absolute; left:100%; margin-left:-3px; top:50%; transform: translateY(-50%); z-index:1; pointer-events:none;}

.qa-policy{box-sizing:border-box; display:flex; flex-direction:column; gap:4px; align-items:stretch; width:100%;}
.qa-policy__row{box-sizing:border-box; display:flex; align-items:center; gap:40px; padding:30px; overflow:hidden; width:100%; background:var(--white);}
.qa-policy__ico{box-sizing:border-box; flex-shrink:0; width:100px; height:100px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.qa-policy__row:nth-child(odd) .qa-policy__ico{background:var(--main);}
.qa-policy__row:nth-child(even) .qa-policy__ico{background:var(--sub);}
.qa-policy__ico img{width: 100%; height: 100%; display: block; object-fit:contain;}
.qa-policy__txt{box-sizing:border-box; flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; align-items:flex-start; justify-content:center;}
.qa-policy__tit{box-sizing:border-box; margin:0; width:100%; font-weight:600; color:var(--black); line-height:150%;}





/*******************************************************************************
    @media 1740px
*******************************************************************************/
@media all and (max-width:1740px){




}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


/* 원격지원 및 AS */
.support-remote__flow{flex-wrap:wrap;}
.support-remote__step{flex:auto; width: calc((100% - 36px)/2);}
.support-remote__step:nth-child(2n) .arrow{display: none;}


.rma-process{gap:30px 10px; flex-wrap:wrap;}
.rma-process .rma-process__step{flex:auto; width: calc((100% - 20px)/3);}
.rma-process .rma-process__step:nth-child(3n) .arrow{display: none;}



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){



}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


.arrow img{width: auto; height: 12px;}	

/* 원격지원 및 AS */
.support-remote{}
.support-remote__flow{gap:20px;}
.support-remote__step{width: calc((100% - 20px)/2); gap:20px; padding: 0 10px;}
.support-remote__step .support-remote__top{gap:10px;}
.support-remote__step .support-remote__top .support-remote__num{width: 80px; line-height: 30px;}
.support-remote__step .support-remote__top .support-remote__ico img{width: auto; height: 60px;}
.support-remote__step .support-remote__body{gap:10px;}
.support-remote__step .support-remote__body a{padding: 0 15px 0 22px; height: 50px;}
.support-remote__step .arrow{right: -16px; margin-top: -6px;}

.support-remote__aside{width: 200px; padding:15px; gap:5px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* 원격지원 및 AS */
.support-remote{flex-wrap:wrap; gap:20px;}
.support-remote__flow{gap:0; flex-wrap:wrap; flex:auto; width: 100%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.support-remote__step{width: 100%; gap:10px; padding: 20px 0;}
.support-remote__step .support-remote__top .support-remote__num{width: 70px; line-height: 25px;}
.support-remote__step .support-remote__top .support-remote__ico img{width: auto; height: 50px;}
.support-remote__step .support-remote__body{gap:20px;}
.support-remote__step .support-remote__body .support-remote__txt{gap:2px;}
.support-remote__step .support-remote__body a{max-width:150px; height: 40px;}
.support-remote__step .arrow{right: 50%; margin-right: -4px; margin-top: 0; bottom:-4px; top:auto; transform:rotate(90deg);}
.support-remote__step:nth-child(2n) .arrow{display: flex;}

.support-remote__aside{width: 100%; max-width: 260px; margin: 0 auto; padding:10px;}
.support-remote__aside .support-remote__aside-hd{padding: 6px;}
.support-remote__aside .support-remote__aside-hd p::before{font-size:14px;}

.rma-process{gap:20px 10px; padding:30px 10px;}
.rma-process .rma-process__step{width: calc((100% - 20px)/3); gap:10px;}
.rma-process .rma-process__step .rma-process__top{gap:10px;}
.rma-process .rma-process__num{height:30px; padding:0 15px;}
.rma-process .rma-process__ico{width:50px; height:50px;}



.qa-policy__row{gap:20px; padding:20px;}
.qa-policy__ico{width:70px; height:70px;}



}
/*******************************************************************************
    @media 480px
*******************************************************************************/
@media all and (max-width:480px){

	.qa-policy__row{gap:10px; padding:15px; flex-wrap:wrap;}
	.qa-policy__ico{width:60px; height:60px; margin: 0 auto;}
	.qa-policy__txt{flex:auto; width: 100%;}
	.qa-policy__tit{text-align:center;}
	
}