@import url("layout.css");
/*-------------------------------------------------
Author : SY,CHo
Create date : 2020. 03. 13.

YHY : 2011202 웹접근성 명도대비 수정
-------------------------------------------------*/

/* ========================================== LAYOUT */
#wrap {line-height: 1;}

.fontTitillium {font-family: 'Titillium Web'; font-weight: normal;}
.fontTitillium em {font-weight: 300;}

/* ========================================== 공통 */
.section {overflow: hidden;}
.section h2 {font-size: 1.5rem; font-weight: 400;}
.section h2 strong {font-weight: 700;}

.decoText {line-height: 1.5; font-family: 'CUNanum'; font-size: 2rem; color: #000;}
.decoText strong {font-weight: 700;}
 
.tab:after {clear: both; display: block; content: "";}
.tab > li {float: left;}
.tab > li > a {position: relative; transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
.tab > li > a:before {position: absolute; left: 0; content: ""; transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}

.listType01 .element {float: left; display: inline-block; padding: 2.5rem 2rem; text-align: center; font-size: 0.65rem; background: #fff;}
.listType01 .element .tag {max-height: rem; overflow: hidden;}
.listType01 .element .tag span {display: inline-block; margin: 0.15rem 0.1rem; padding: 0 0.75rem; line-height: 1.5rem; color: #006fb9; border: 1px solid #006fb9;}
.listType01 .element .name {margin: 1.5rem 0 1rem;font-size: 1.75rem;font-weight: 500;color: #000;}
.listType01 .element .text {height: 2rem;line-height: 1.5;color: #666;overflow: hidden;font-size: 0.75rem;}
.listType01 .element .btnLine {margin-top: 2rem;}
.listType01 .element .btnLine a {position: relative; display: inline-block; margin: 0 0.25rem; padding-top: 2.25rem; width: 4rem; height: 4rem; color: #fff; border-radius: 50%;}
.listType01 .element .btnLine a:hover {transform: rotateY(360deg); -webkit-transform: rotateY(360deg); transition: all 1s ease; -webkit-transition: all 1s ease;}
.listType01 .element .btnLine a.go {background: #007d9e;}
.listType01 .element .btnLine a.bg_b {background: #006fb9;}
.listType01 .element .btnLine a:before {position: absolute; top: 0.7rem; left: 50%; margin-left: -11px; width: 22px; height: 22px; background: url(/images/web/product/main/icons01.png) no-repeat; content: "";}
.listType01 .element .btnLine a.go:before {background-position: 0 0;}
.listType01 .element .btnLine a.cart:before {background-position: -22px 0;}
.listType01 .element .btnLine a:focus{outline: 2px dotted black; outline-offset: 1px;} /*230105*/

/* 신협 인기상품 BEST */
#section1 {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9ece3+0,ecf2f0+100 */
background: rgb(249,236,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(249,236,227,1) 0%, rgba(236,242,240,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(249,236,227,1) 0%,rgba(236,242,240,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(249,236,227,1) 0%,rgba(236,242,240,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ece3', endColorstr='#ecf2f0',GradientType=1 ); /* IE6-9 */
}
#section1 .container {padding: 10.5rem 0 3.5rem; background: url(/images/web/product/main/char_pig.png) no-repeat right bottom 17rem;}
#section1 .container:after {clear: both; display: block; content: "";}
#section1 h2 {float: left; display: inline-block; margin-top: 6rem; margin-bottom: 1.5rem;  color: #48250e;}

/*210526*/
#section1 .listType01 .slick-slider {text-align: center;}
#section1 .listType01 .slick-slide {float: left; margin: 0 0.5rem;}
#section1 .listType01 .slick-list { width:100%; overflow:hidden; }

.tab.Type1 {float: left;display: inline-block;margin-top: 6rem;margin-left: 2rem;/* overflow: hidden; */} /*230105*/
.tab.Type1 > li {margin-left: 0.4rem;}
.tab.Type1 > li > a {display: inline-block;width: 40px;padding-top: 12px;text-align: center;color: #666;border-top: 5px solid #666;}/*251205 */
.tab.Type1 > li > a:before {top: -5px;width: 0;height: 5px;background: #006FB9;}/* 251111 웹접근성 */
.tab.Type1 > li.active > a {color: #000; font-size:1.1em; font-weight:500;}/*211028 접근성 수정*/
.tab.Type1 > li.active > a:before {width: 100%; height:7px;}/*211028 접근성 수정*/
.tab.Type1 > li.onbank > a { width:60px; padding-left:25px; }
.tab.Type1 > li.onbank > a:after { content:''; position:absolute; left:0; top:15px; width:25px; height:11px; background: url(/images/web/product/main/tab_onbank.png) no-repeat center top; }
.tab.Type1 > li.onbank.active > a:after { background-position: center bottom; }

#section1 .tabBox {position: relative; float: left; width: 100%; height: 0; opacity: 0; visibility: hidden;}
#section1 .tabBox.active {height: auto;/*210526*/ opacity: 1; visibility: visible;}

/*210526 : 클래스명 수정*/
#section1 .tabBox .slick-arrow {position: absolute; top: 50%; display: inline-block; margin-top: -1rem; width: 2rem; height: 2rem; line-height: 2rem; font-size: 2rem; color: transparent; overflow: hidden; z-index:2;/*210526*/}
#section1 .tabBox .slick-arrow:after {position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-family: 'xeicon'; color: #231f20;}
#section1 .tabBox .slick-prev {left: -2.5rem;}
#section1 .tabBox .slick-next {right: -2.5rem;}
#section1 .tabBox .slick-prev:after {content: "\e93b";}
#section1 .tabBox .slick-next:after {content: "\e93e";}

/*211028 접근성 정지재생 기능 추가*/
#section1 .tabBox .control a{position: absolute; top:-2.9rem; left:13.2rem; font-size:1.4rem; display: inline-block; color: transparent;}
#section1 .tabBox .control a i {color: #231f20;}
#section1 .tabBox .control a.btnPlay{display: none;}

/* 210526 삭제
#section1 .tabBox .bx-controls a.active::after,
#section1 .tabBox .bx-controls a:hover::after {color: #000;}*/

/*201215 신협인기상품BEST 정지/재생버튼 추가*/
/* #section1 .tabBox .bx-controls .bx-controls-auto-item a { top:-2.2rem; left:13rem; font-size:1.1rem; }
#section1 .tabBox .bx-controls .bx-controls-auto-item a:after { color:#48250e; }
#section1 .tabBox .bx-start:after {content: "\ea3e"; }
#section1 .tabBox .bx-stop:after { content: "\ea3b"; } */

/* 이달의 추천상품 */
#section2 {position: relative; padding: 7rem 0 8rem; background: url(/images/web/product/main/bgSection2.jpg) no-repeat center top; background-size: cover; background-attachment: fixed;}
#section2 h2 {margin-bottom: 6rem; text-align: center; color: #fff;}
#section2 .year {position: absolute;top: 2rem;left: 0;width: 100%;text-align: center;line-height: 0.7;font-size: 5rem;font-weight: 600;color: #fff;} /* 221027 접근성 수정*/
#section2 .month {position: absolute;top: 4.5rem;left: 50%;margin-left: 19.5rem;font-size: 1.75rem;font-weight: 600; color: #fff;} /* 221027 접근성 수정*/
#section2 .recommendation {position: relative;}
#section2 .slick-slider {text-align: center;}
#section2 .slick-slide {float: left; margin: 0 0.5rem;}
#section2 .element {padding: 0; width: 15.75rem; box-shadow: 3px 3px 3px rgba(0,0,0,0.2);}
#section2 .element a {position: relative; display: block; padding: 3rem 1.5rem 2.5rem; height: 20.5rem; background: #fff;}
#section2 .element a .tag span {width: 4.5rem; border-left: none; border-right: none;}
#section2 .element a .tag span.green {color: #099e5e; border-color: #099e5e;}
#section2 .element a .tag span.orange {color: #cd4919;border-color: #cd4919;}
#section2 .element a .tag span.navy {color: #193a97; border-color: #193a97;}
#section2 .element a .tag span.purple {color: #4f79ff; border-color: #4f79ff;}
#section2 .element a .name {margin: 2rem 0 1.5rem;}
#section2 .element a .text {height: 3rem;}
#section2 .element a .btnLine {position: absolute; bottom: 0; left: 0; width: 100%; height: 2.5rem; line-height: 2.5rem; font-size: 0.75rem; color: #000; background: #f4f4f4;}
#section2 .element a .btnLine i {margin-left: 1rem;}
#section2 .element a .up {position: absolute; bottom: -2rem; left: -2rem; padding: 4.75rem 2.5rem; width: calc(100% + 4rem); height: 0; color: #fff; background: url(/images/web/product/main/bgUp.png) no-repeat center center; background-size: cover; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transition: 0.35s ease; transition: 0.35s ease; z-index: 1;}
#section2 .element a .icon img {-webkit-transition: 0.35s ease; transition: 0.35s ease;}
#section2 .element a .up .name,
#section2 .element a .up .text {color: #fff;}

#section2 .slick-slide.slick-current.slick-active.slick-center .icon img,
/* 201217 이달의 추천상품 포커싱 효과 추가 */
#section2 .element a:focus .icon img,
#section2 .element a:hover .icon img {transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -webkit-transition-delay: 0.35s; transition-delay: 0.35s;}
/*#section2 .slick-slide.slick-current.slick-active.slick-center {margin: 0 2.5rem;}*/
#section2 .slick-slide.slick-current.slick-active.slick-center .up,
#section2 .element a:focus .up,
#section2 .element a:hover .up {height: calc(100% + 4rem); opacity: 1; visibility: visible;}

#section2 .slick-prev,
#section2 .slick-next {display: none;}
#section2 .slick-dots {position: relative; display: table; margin: 4rem auto 0; width: 70%; height: 3px; top: 50px;}  /*211028 슬라이드 수정*/
#section2 .slick-dots:before {position: absolute; top: 1px; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.5); content: "";}
#section2 .slick-dots > li {display: table-cell;}
#section2 .slick-dots > li button {display: block; width: 100%; height: 3px; line-height: 0; color: transparent; overflow: hidden;}
#section2 .slick-dots > li button:hover,
#section2 .slick-dots > li.slick-active button {background: #fff;}

#section2 .slideElementBox {position: absolute; bottom: -60px; left: 85%; width: 155px; height: 30px; line-height: 30px; text-align: center; color: #fff;}  /*211028 슬라이드 수정*/
#section2 .slideElementBox > a {float: left; position: relative; display: inline-block; width: 30px; height: 30px; color: transparent; overflow: hidden;}
#section2 .slideElementBox > a i {position: absolute; top: 0; left: 0; width: 100%; line-height: 30px; font-size: 1.25rem; color: #fff;}
#section2 .slideElementBox .slideCount {float: left; display: inline-block; width: 60px; font-size: 1.1rem;}
#section2 .slideElementBox .slideCount .total {font-size: 0.75rem;}

/* 내게 꼭! 맞는 상품 찾기 */
#section3 {position: relative; padding: 6rem 0 12rem; text-align: center; background: url(/images/web/product/main/pattern.png) repeat;}
#section3:before {position: absolute; bottom: 0; left: 0; width: 100%; height: 14rem; background: #fff; content: "";}
#section3 h2 {margin-bottom: 4.5rem;}
#section3 .exactly {font-family: 'CUNanum'; font-size: 2.5rem;}

.tab.Type2 {display: inline-block; margin-bottom: 2.5rem;}
.tab.Type2 > li {position: relative; margin: 0 1.25rem;}
.tab.Type2 > li:before {position: absolute; bottom: -4rem; left: 50%; margin-left: -0.5rem; width: 1rem; height: 1rem; background: #fff; content: ""; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
.tab.Type2 > li > a {display: block; padding-top: 100px; width: 90px; font-size: 0.9rem; color: #021522;}
.tab.Type2 > li > a:before {top: 0; width: 100%; height: 90px; background: #fff; border-radius: 50%;}
.tab.Type2 > li > a:after {position: absolute; top: 0; left: 0; width: 100%; height: 90px; background: url(/images/web/product/main/icons02.png) no-repeat; border-radius: 50%; content: ""; transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
.tab.Type2 > li:nth-of-type(2) > a:after {background-position: 0 0;}
.tab.Type2 > li:nth-of-type(3) > a:after {background-position: -90px 0;}
.tab.Type2 > li:nth-of-type(4) > a:after {background-position: -180px 0;}
.tab.Type2 > li:nth-of-type(5) > a:after {background-position: -270px 0;}
.tab.Type2 > li:nth-of-type(6) > a:after {background-position: -360px 0;}
.tab.Type2 > li:nth-of-type(7) > a:after {background-position: -450px 0;}
.tab.Type2 > li:nth-of-type(8) > a:after {background-position: -540px 0;}
.tab.Type2 > li:nth-of-type(1) > a:after {background-position: -630px 0;}

.tab.Type2 > li.active:before {bottom: -3rem;}
.tab.Type2 > li.active > a:before {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0070ba+0,04b9c2+100 */
background: rgb(0,112,186); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(0,112,186,1) 0%, rgba(4,185,194,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,112,186,1) 0%,rgba(4,185,194,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,112,186,1) 0%,rgba(4,185,194,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0070ba', endColorstr='#04b9c2',GradientType=1 ); /* IE6-9 */
}
.tab.Type2 > li:nth-of-type(2).active > a:after {background-position: 0 -90px;}
.tab.Type2 > li:nth-of-type(3).active > a:after {background-position: -90px -90px;}
.tab.Type2 > li:nth-of-type(4).active > a:after {background-position: -180px -90px;}
.tab.Type2 > li:nth-of-type(5).active > a:after {background-position: -270px -90px;}
.tab.Type2 > li:nth-of-type(6).active > a:after {background-position: -360px -90px;}
.tab.Type2 > li:nth-of-type(7).active > a:after {background-position: -450px -90px;}
.tab.Type2 > li:nth-of-type(8).active > a:after {background-position: -540px -90px;}
.tab.Type2 > li:nth-of-type(1).active > a:after {background-position: -630px -90px;}

#section3 .tabBox {position: relative; display: none; padding: 3.5rem 5rem;}
#section3 .tabBox:before {position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: #fff; content: "";}
#section3 .tabBox:after {position: absolute; top: -12.1rem; left: -9.6rem; width: 17.3rem; height: 22.45rem; background: url(/images/web/product/main/bgPig.png) no-repeat left top; background-size: cover; content: "";}

#section3 .tabBox.active {display: block;}

#section3 .tabBox > div {position: relative;}
#section3 .inBox {float: left; width: 50%; height: 3rem; text-align: left;}
#section3 .inBox h3 {float: left; display: inline-block; padding: 0 0.75rem 0 1.5rem; font-size: 1rem; font-weight: 500; color: #000;}
#section3 .inBox ul {float: left; display: inline-block; width: 20rem;}
#section3 .inBox ul > li {float: left; margin: 0 0.5rem 0.5rem 0;}
#section3 .inBox ul > li > a {display: inline-block;padding: 0 1rem;line-height: 1.2rem;font-size: 0.7rem;color: #909090;background: #fff;border: 1px solid #909090;border-radius: 0.6rem;}/*230105*/
#section3 .inBox ul > li.active > a {color: #fff; background: #103988; border-color: #103988;}
#section3 .inBox + .inBox ul > li.active > a {background: #005D85; border-color: #005D85;} /*211028 접근성 컬러 수정*/
#section3 .inBox ul > li.active > a:focus {outline-width:2px; outline-offset:2px; outline-style:dashed;} /*230831 접근성 포커싱 수정*/


#section3 .searchBox {clear: both; margin-top: 4.5rem;}
#section3 .searchBox p {display: block; padding: 4px; border-bottom-right-radius: 30px; overflow: hidden;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3a9dde+0,1d62b4+100 */
background: rgb(58,157,222); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(58,157,222,1) 0%, rgba(29,98,180,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(58,157,222,1) 0%,rgba(29,98,180,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(58,157,222,1) 0%,rgba(29,98,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9dde', endColorstr='#1d62b4',GradientType=1 ); /* IE6-9 */
}
#section3 .searchBox input {display: block; padding: 0 1rem; width: 100%; height: 3.6rem; line-height: 3.6rem; font-size: 1rem; background: #fff; border: none; border-bottom-right-radius: 30px;}
#section3 .searchBox input::placeholder {color: #666;} /*211028 접근성 컬러 수정*/
#section3 .searchBox button {margin-left: -3.6rem; width: 3.6rem; height: 3.6rem; line-height: 3.6rem; font-size: 2rem; color: #1d62b4;}
#section3 .tagList {display: block; overflow: hidden;}
#section3 .tagList > li {float: left; margin: 1rem;}

/* 고객 서비스 */
#section4 {position: relative; padding: 7rem 0 8rem; text-align: center; background: url(/images/web/product/main/bgSection4.jpg) no-repeat center top; background-size: cover; background-attachment: fixed;}
#section4 .decoText {margin: 2.5rem 0; font-family: 'NotoSans'; font-size: 1.5rem; font-weight: 400; color: #000;}
#section4 .btnLine a {position: relative; display: inline-block; padding: 0 1.5rem; line-height: 2.5rem; border: 1px solid #989b9f; border-radius: 1.25rem; overflow: hidden;}
#section4 .btnLine a:before {position: absolute; top: 0; left: -10%; width: 0; height: 110%; background-color: #fff; opacity: 0; content: ""; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transition: all .3s; -webkit-transition: all .3s;}
#section4 .btnLine a:hover:before {width: 120%; opacity: 0.2; transition: all .3s; -webkit-transition: all .3s;}
#section4 .btnLine a i {margin-left: 1.5rem;}

#section5 {text-align: center;}
.tab.Type2.other {margin: 3.5rem 0;}
.tab.Type2.other > li {margin: 0 1.5rem;}
.tab.Type2.other > li > a {position: relative; display: inline-block; padding-top: 70px; width: auto; font-size: 0.9rem; color: #8e97a6; white-space: nowrap;}
.tab.Type2.other > li > a:before {display: none;}
.tab.Type2.other > li > a:after {position: absolute; top: 0; left: 50%; margin-left: -25px; width: 50px; height: 45px; background: url(/images/web/product/main/icons03.png) no-repeat; border-radius: 0; content: ""; transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
.tab.Type2.other > li:nth-of-type(1) > a:after {background-position: 0 0;}
.tab.Type2.other > li:nth-of-type(2) > a:after {background-position: -50px 0;}
.tab.Type2.other > li:nth-of-type(3) > a:after {background-position: -100px 0;}
.tab.Type2.other > li:nth-of-type(4) > a:after {background-position: -150px 0;}
.tab.Type2.other > li:nth-of-type(5) > a:after {background-position: -200px 0;}
.tab.Type2.other > li:nth-of-type(6) > a:after {background-position: -250px 0;}
.tab.Type2.other > li > a:hover {color: #000;}
.tab.Type2.other > li:nth-of-type(1) > a:hover:after {background-position: 0 -45px;}
.tab.Type2.other > li:nth-of-type(2) > a:hover:after {background-position: -50px -45px;}
.tab.Type2.other > li:nth-of-type(3) > a:hover:after {background-position: -100px -45px;}
.tab.Type2.other > li:nth-of-type(4) > a:hover:after {background-position: -150px -45px;}
.tab.Type2.other > li:nth-of-type(5) > a:hover:after {background-position: -200px -45px;}
.tab.Type2.other > li:nth-of-type(6) > a:hover:after {background-position: -250px -45px;}

.sideNav {position: fixed; top: 20rem; right: 2.5rem; width:144px; }
.sideNav a.hash { position:relative; display: block; padding: 0.6rem; width:70px; text-align: center; font-size: 0.65rem; color: #fff; font-family: 'Titillium Web', sans-serif; background: #06204b; overflow:hidden; float:right; }
.sideNav a.hash i {display: block; margin-bottom: 0.25rem; font-size: 1.2rem;}
.sideNav a.hash:hover i {transform: rotate(360deg); -webkit-transform: rotate(360deg); transition: all 0.25s; -webkit-transition: all 0.25s;}
.sideNav a.hash::before {position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(0,0,0,.2); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0;}
.sideNav a.hash:hover{animation: bloom ease-in-out .75s forwards;}
.sideNav a.hash:hover::before {animation: circle2 .75s;}
@keyframes bloom {
	0% {filter: grayscale(.8);}
	40% {filter: grayscale(.5);}
	100% {filter: grayscale(0);}
}
@keyframes circle2 {
	0% {opacity: .3; background: rgba(255,255,255,.2);}
	40% {opacity: 0.5; background: rgba(255,255,255,.2);}
	100% {width: 200%; height: 200%; opacity: 0;}
}

.sideNav ul { position:relative; float:right; margin-top:1.2rem; }
.sideNav ul::before {position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: #b2b5b3; border-radius: 10px; content: "";}
.sideNav li + li {margin-top: 15px;}
.sideNav li a {position: relative;display: block;padding-right: 30px;line-height: 25px;text-align: right;font-size: 0.65rem;/* color: transparent; */}/*220203 color:transparent 삭제*/
.sideNav li a::before {position: absolute; top: 12px; right: 8px; width: 4px; height: 4px; background: #fff; border-radius: 50%; content: ""; transition: all .25s; -webkit-transition: all .25s;}
.sideNav li a:hover,
.sideNav li a.active {color: #111;font-weight: 600;transition: all .25s;-webkit-transition: all .25s;} /*220203 font-weight 추가*/
.sideNav li a:hover::before,
.sideNav li a.active::before {top: 10px; right: 6px; width: 8px; height: 8px; box-shadow: 3px 3px 3px #000;}

/* Layer popup 슬라이드 */
.LayerPopupList {position: relative; display: inline-block; margin: 2.5rem auto; padding: 0 3rem;}
#popupList {overflow: hidden;}
#popupList li {float: left; width: 360px !important; height: 393px;}
#popupList a {display: block; width: 347px; height: 100%; text-align: center; background: #fff;}
#popupList a img {width: 100%; height: 100%;}

.layerPopup .bx-controls-direction > a {position: absolute; top: 50%; display: block; margin-top: -1rem; width: 2rem; height: 2rem; color: transparent; overflow: hidden;}
.layerPopup .bx-controls-direction > a:before {position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; line-height:2rem; text-align: center; font-family: 'xeicon'; font-size: 2rem; color: #fff; text-shadow: 3px 3px 3px rgba(0,0,0,0.5);}
.layerPopup .bx-prev {left: 0;}
.layerPopup .bx-prev:before {content: '\e93b';}
.layerPopup .bx-next {right: 0;}
.layerPopup .bx-next:before {content: '\e93e';}

.layerPopup .pagerShort {position: absolute; top: -5.25rem; left: 50%; margin-left: 7rem; padding-top: 0; width: 3.25rem; height: 3.25rem; line-height: 3.25rem; text-align: center; font-family: 'Titillium Web', sans-serif; font-size: 0.9rem; color: #fff; letter-spacing: -0.05em; border-radius: 50%;
background: rgb(0,111,186);
background: -moz-linear-gradient(left,  rgba(0,111,186,1) 0%, rgba(23,167,219,1) 100%);
background: -webkit-linear-gradient(left,  rgba(0,111,186,1) 0%,rgba(23,167,219,1) 100%);
background: linear-gradient(to right,  rgba(0,111,186,1) 0%,rgba(23,167,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006fba', endColorstr='#17a7db',GradientType=1 );
}
.pagerShort .total {color: inherit;}
.pagerShort .now {color: #ffd65d;}

.layerPopup .closeWrap a {display: inline-block; margin: 0 0.25rem; padding: 0 1.5rem; line-height: 2rem; border-radius: 1rem; background: #000;}
.layerPopup .closeWrap a i {margin-left: 1rem;}

@media screen and (max-width: 1700px){
	/* 사이드 네비게이션*/
	.sideNav {right: 10px;}
}
@media screen and (max-width: 1500px){  
	#section1 .tabBox .slick-prev {left: 0;}/*210526*/
	#section1 .tabBox .slick-next {right: 0;}/*210526*/
}
@media screen and (max-width: 1440px){
	/* 신협 인기상품 BEST */
	#section1 .container {background-size: 40% auto;}

	/* 내게 꼭! 맞는 상품 찾기 */
	#section3 .tabBox:after {display: none;}
}
@media screen and (max-width: 1400px){
	.container {padding: 0 2rem;}

	/* 신협 인기상품 BEST */
	#section1 .container {padding: 10rem 2rem 3.5rem;}
	#section1 .listType01 .element {padding: 1.5rem 1rem;}
	#section1 .listType01 .element .tag {height: 4rem;}
	#section1 .listType01 .element .name {font-size: 1.5rem;}
	#section1 .tabBox .slick-prev {left: -2rem;}/*210526*/
	#section1 .tabBox .slick-next {right: -2rem;}/*210526*/
	#section2 .slick-dots {margin: 4rem 0 0 2rem; width: calc(100% - 190px);}
	#section2 .slideElementBox {right: 1rem; left: auto;}
}
@media screen and (max-width: 1024px){
	.section h2 {font-size: 1.25rem;}
	.decoText {font-size: 1.5rem;}

	/*211028 정지/재생버튼 추가*/
	#section1 .tabBox .control a { left:11rem; }

	/*201217 신협인기상품BEST 정지/재생버튼 추가*/
    /* #section1 .tabBox .bx-controls .bx-controls-auto-item a { left:11rem; } 211028 삭제 */ 
    
	/* 이달의 추천상품 */
	#section2 {padding: 4rem 0;}
	#section2 .year {font-size: 2rem;} /* 211028 접근성 수정*/
	#section2 .month {margin-left: 9.5rem; font-size: 1.5rem;}

	/* 내게 꼭! 맞는 상품 찾기 */
	#section3 {padding: 3rem 0 0;}
	#section3:before,
	#section3 .tab.Type2 > li:before {display: none;}
	#section3 h2 {margin-bottom: 2.5rem;}
	#section3 .exactly {font-size: 2rem;}
	#section3 .tab.Type2 {position: relative; padding: 0 2rem;}
	#section3 .tab.Type2:before {position: absolute; bottom: -3rem; left: 50%; margin-left: -0.5rem; width: 1rem; height: 1rem; background: #fff; content: ""; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transition: all 0.35s ease; -webkit-transition: all 0.35s ease;}
	#section3 .tab.Type2 > li {margin: 0 0 1rem; width: 25%;}
	#section3 .tab.Type2 > li > a {margin: 0 auto;}

	#section3 .inBox {float: none; margin-bottom: 1rem; width: 100%; height: auto;}
	#section3 .inBox h3 {float: none; display: block; margin-bottom: 1rem; padding: 0;}
	#section3 .inBox ul {float: none; display: block; width: 100%; overflow: hidden;}

	#section3 .searchBox {margin-top: 0;}

	/* 고객 서비스 */
	#section4 {padding: 3rem 0;}
	#section4 .decoText {margin: 1.5rem 0; font-size: 1rem;}
	.tab.Type2.other > li {margin: 0 1rem;}

	/* 사이드 네비게이션*/
	.sideNav {display: none;}
}
@media screen and (max-width: 768px){
	/* 신협 인기상품 BEST */
	#section1 .container {padding: 7rem 2rem 3.5rem; background-size:40% auto; background-position:bottom 20rem right; }
	#section1 h2 {float: none; display: block; margin-top: 3rem; margin-bottom: 0;}
	
	/*201217 신협인기상품BEST 정지/재생버튼 추가*/
    /* #section1 .tabBox .bx-controls .bx-controls-auto-item a { top:-5.4rem; }  211028 삭제*/

		/*211028 접근성 정지/재생버튼 추가*/
		#section1 .tabBox .control a { top:-6rem; }

	.tab.Type1 {float: none; margin-top: 2rem; margin-bottom: 1rem; margin-left: 0;}

	/* 이달의 추천상품 */
	#section2 .element a .icon img {width: 100px;}
	#section2 .element .name {font-size: 1.25rem;}

	/* 내게 꼭! 맞는 상품 찾기 */
	#section3 .tabBox {padding: 3.5rem 2rem;}
	#section3 .tagList > li {margin: 0.75rem 1rem;}

	/* 고객 서비스 */
	#section4 {padding: 3.5rem 0;}

	#section5 .container {padding: 0;}
	.tab.Type2 {display: block;}
	.tab.Type2.other {margin: 0 0 0 -1px;}
	.tab.Type2.other > li {margin: 0; padding: 1.5rem 1rem; width: 33.333%; border-left: 1px solid rgba(155, 155, 155, 0.2); border-bottom: 1px solid rgba(155, 155, 155, 0.2);}
	.tab.Type2.other > li > a {padding-top: 50px; font-size: 0.8rem;}
}
@media screen and (max-width: 640px){
	#section1 .decoText br {display: none;}
}
@media screen and (max-width: 480px){
	.container {padding: 0 1rem;}

	/* 신협 인기상품 BEST */
	/* #section1 .container {padding: 8rem 1rem 3.5rem; background-size: contain;} */
	#section1 .container { background-size:8rem auto; background-position:bottom 29rem center;}
	#section1 .decoText {margin-bottom: 8rem; text-align: center; font-size: 1.25rem;}

	/* 내게 꼭! 맞는 상품 찾기 */
	#section3 .tab.Type2 {padding: 0 1rem;}
	#section3 .tab.Type2 > li {width: 33.333%;}

	#section3 .tabBox {padding: 1.5rem;}
	#section3 .inBox h3 {font-size: 0.9rem;}
	#section3 .searchBox p {border-bottom-right-radius: 0;}
}
@media screen and (max-width: 414px){
	/* 신협 인기상품 BEST */
	#section1 .container {padding: 7rem 1rem 3.5rem;}
	#section1 .listType01 .element {padding: 1.5rem 3rem;}
	#section1 .listType01 .element .name {font-size: 1.25rem;}
	#section1 .tabBox .slick-prev {left: 0;}/*210526*/
	#section1 .tabBox .slick-next {right: 0;}/*210526*/

	/* 내게 꼭! 맞는 상품 찾기 */
	#section3 .exactly {font-size: 1.75rem;}

	.tab.Type2 > li > a {padding-top: 80px; width: 70px; font-size: 0.75rem;}
	.tab.Type2 > li > a:before {height: 70px;}
	.tab.Type2 > li > a:after {height: 70px; background-image: url(/images/web/product/main/icons02.mobile.png);}
	.tab.Type2 > li:nth-of-type(2) > a:after {background-position: 0 0;}
	.tab.Type2 > li:nth-of-type(3) > a:after {background-position: -70px 0;}
	.tab.Type2 > li:nth-of-type(4) > a:after {background-position: -140px 0;}
	.tab.Type2 > li:nth-of-type(5) > a:after {background-position: -210px 0;}
	.tab.Type2 > li:nth-of-type(6) > a:after {background-position: -280px 0;}
	.tab.Type2 > li:nth-of-type(7) > a:after {background-position: -350px 0;}
	.tab.Type2 > li:nth-of-type(8) > a:after {background-position: -420px 0;}
	.tab.Type2 > li:nth-of-type(1) > a:after {background-position: -490px 0;}
	.tab.Type2 > li:nth-of-type(2).active > a:after {background-position: 0 -70px;}
	.tab.Type2 > li:nth-of-type(3).active > a:after {background-position: -70px -70px;}
	.tab.Type2 > li:nth-of-type(4).active > a:after {background-position: -140px -70px;}
	.tab.Type2 > li:nth-of-type(5).active > a:after {background-position: -210px -70px;}
	.tab.Type2 > li:nth-of-type(6).active > a:after {background-position: -280px -70px;}
	.tab.Type2 > li:nth-of-type(7).active > a:after {background-position: -350px -70px;}
	.tab.Type2 > li:nth-of-type(8).active > a:after {background-position: -420px -70px;}
	.tab.Type2 > li:nth-of-type(1).active > a:after {background-position: -490px -70px;}

	#section3 .searchBox input {padding: 0 0.5rem; height: 2.6rem; line-height: 2.6rem; font-size: 0.8rem; border-bottom-right-radius: 0;}
	#section3 .searchBox button {margin-left: -2.6rem; width: 2.6rem; height: 2.6rem; line-height: 2.6rem; font-size: 1.25rem;}

	#section3 .tagList > li {margin: 0.5rem;}

	/* 고객 서비스 */
	#section4 .decoText {font-size: 0.8rem;}

	.tab.Type2.other > li {padding: 1.5rem 0;}
	.tab.Type2.other > li > a {font-size: 0.7rem;}
}