/* °øÅë */
.FreeWrap {width:100%; min-width:1300px; overflow:hidden;}
.inner1300 {width:1300px; height:100%; margin:0 auto; position:relative;}
.co_blue {color:#1C8FED;}
.tit.flex {display: flex; justify-content: space-between; align-items: flex-end;}
.txtbox .flex {display: flex; justify-content: space-between; align-items: center; align-items: flex-end; margin-top:5px;}
.txtbox .flex .total {text-align: right; }
.txtbox h4 {height:44px; line-height:22px; font-weight:normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.txtbox .per {display: inline-block; height: 26px; line-height: 28px; padding: 0 12px; border-radius: 13px; background: #F14738; font-size: 16px; font-family: 'spoqa B'; color: #fff;}
.txtbox .cost {height:20px; color:#949494; text-decoration: line-through;}
.txtbox .total span {display: block;}
.imgbox img {width:100%; height:100%;}
.pro_menu {display:none; gap:5px; position:absolute; z-index:2;}
.pro_menu div {display:flex; align-items: center; width:40px; height:40px; position:relative; border-radius: 50%;}
.pro_menu div::before {content:''; width:40px; height:40px; background:rgba(26,26,26,0.7); border-radius: 50%; position:absolute; top:0; left:0; z-index:-1; overflow: hidden; transition:all 0.2s;}
.pro_menu div a {display:block; width:24px; height:24px; margin:0 auto; text-indent: -9999px;}
.pro_menu div:nth-child(1) a {background:url('//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_new_open_24.svg') center center/contain no-repeat;}
.pro_menu div:nth-child(2) a {background:url('//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_basket_24.svg') center center/contain no-repeat;}
.pro_menu div:nth-child(3) a {background:url('//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_heart_24.svg') center center/contain no-repeat;}
.pro_menu div:nth-child(4) a {background:url('//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_card_24.svg') center center/contain no-repeat;}
.pro_menu div:hover::before {background:#F14738;}
.pro_menu div a i {display:block; width:max-content; padding:2px 5px; font-size:12px; font-family:'¸¼Àº°íµñ'; font-weight: normal; font-style: normal; color:#fff; background:#000; border-radius:10px; position:absolute; bottom:-15px; left:50%; transform:TranslateX(-50%); display:none;}

/* sec1 ¸ÞÀÎ*/
.sec1 {width:100%; height:540px; background:#fff; overflow:hidden;}
.sec1 .sec1bg {width:100%; height:100%; position:absolute; top:0; left:0;}
.sec1 .sec1bg .sec1bg1 {position:absolute; top:50px; left:-400px;}
.sec1 .sec1bg .sec1bg2 {position:absolute; top:-360px; left:880px;}
.sec1 .tit {position:absolute; top:170px; left:0; transform:translateY(-70px); opacity:0; animation:sec1tit 0.5s ease-in-out forwards 1s;}
.sec1 .tit h2 {font-size:48px;}
.sec1 .tit p {margin-top:18px; color:#949494;}
@keyframes sec1tit {
    0% {transform:translateY(50px); opacity:0;}
    100% {transform:translateY(0); opacity:1;}
}
.sec1 .sec1ani {position:absolute; top:140px; right:70px;}
.sec1 .sec1ani .flex {display: flex; align-items: center; gap:15px;}
.sec1 .sec1ani .flex>div {width:130px; height:320px; position:relative; opacity:1; transform:rotateY(-90deg);}
.sec1 .sec1ani .flex>div:nth-child(1) {background:url('//image5.compuzone.co.kr/img/images/Freeshipping/sec1_li1.png') center center no-repeat; top:-40px; animation:sec1box2 0.5s linear forwards 1s;}
.sec1 .sec1ani .flex>div:nth-child(2) {background:url('//image5.compuzone.co.kr/img/images/Freeshipping/sec1_li2.png') center center no-repeat; top:0; animation:sec1box2 0.5s linear forwards 1.1s;}
.sec1 .sec1ani .flex>div:nth-child(3) {background:url('//image5.compuzone.co.kr/img/images/Freeshipping/sec1_li3.png') center center no-repeat; top:-60px; animation:sec1box2 0.5s linear forwards 1.2s;}
@keyframes sec1box2 {
    0% {transform:rotateY(-90deg);}
    100% {transform:rotateY(0); opacity:1;}
}
.sec1 .sec1ani .sec1ani1 {position:absolute; top:27px; left:-75px; transform-origin: center center; opacity:0; animation:sec1ani1 0.3s linear forwards 1.4s;}
.sec1 .sec1ani .sec1ani2 {position:absolute; top:103px; left:-29px; transform-origin: center center; opacity:0; animation:sec1ani1 0.3s linear forwards 1.5s;}
.sec1 .sec1ani .sec1ani3 {position:absolute; top:237px; left:7px; transform-origin: center bottom; opacity:0; animation:sec1ani1 0.3s linear forwards 1.6s;}
@keyframes sec1ani1 {
    0% {transform:scale(0.5); opacity:0;}
    60% {transform:scale(1.2); opacity:1;}
    100% {transform:scale(1); opacity:1;}
}
.sec1 .sec1noti {position:absolute; bottom:30px; right:70px;}
.sec1 .sec1noti p {color:#949494;}

/* sec2 ±ÝÁÖÀÇ Ãßõ */
.sec2 {padding:100px 0; box-sizing: border-box;}
.sec2 .tit {text-align: center;}
.sec2 .tit p {margin-top:10px; color:#6C6C6C;}
.sec2 .pro_drag_wrap {width:100%; margin-top:40px;}
.sec2 .pro_drag {width:100%; margin-top:40px;}
.sec2 .pro_drag ul {display: flex; align-items: center; gap:30px; width:fit-content;}
.sec2 .pro_drag ul li {width:280px; height:280px; border-radius:10px; box-sizing: border-box; overflow: hidden;}
.sec2 .pro_drag ul li>a {display: block; width:100%; height:100%; position:relative; }
.sec2 .pro_drag ul .imgbox {position:absolute; top:0; left:0;}
.sec2 .pro_drag ul .imgbox::before {content:''; width:100%; height:100%; background:rgba(0,0,0,0.02); position:absolute; top:0; left:0;}
.sec2 .pro_drag ul .batzone {position:absolute; top:10px; left:10px; display: flex; gap:5px; transition:all 0.3s;}
.sec2 .pro_drag ul .batzone span {height:26px; line-height:24px; padding:0 12px; background:#fff; border:1px solid #1C8FED; border-radius: 12px; font-size:12px; font-family:'¸¼Àº°íµñ'; color:#1C8FED; letter-spacing: -1px; box-sizing: border-box;}
.sec2 .pro_drag ul li:hover .batzone {opacity:0;}
.sec2 .pro_drag ul li:hover .txtbox {opacity:1;}
.sec2 .pro_drag ul .txtbox {display: flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; padding:20px; background:rgba(0,0,0,0.6); box-sizing: border-box; position:absolute; top:0; left:0; opacity:0; transition:all 0.3s;}
.sec2 .pro_drag ul .txtbox h4 {color:#fff;}
.sec2 .pro_drag ul .txtbox .flex {justify-content: flex-start; gap:10px;}
.sec2 .pro_drag ul .txtbox .total {color:#fff;}
.sec2 .pro_drag ul .txtbox .cost {color:#949494;}
.sec2 .pro_drag_progress {display:block; width:650px; margin:40px 0 0; padding:15px 0; position:relative; left:50%; transform:TranslateX(-50%); overflow:hidden;}
.sec2 .pro_drag_progress .drag_bar {display:block; width:100%; height:3px; background:#d8d8d8; position:absolute;}
.sec2 .pro_drag_progress .drag_handle {display:inline-block; width:16px; height:16px; left:0; top:8px; border-radius:50%; box-shadow:0 0 0 0px rgba(22, 111, 204, 1), 0 0 0 0px rgba(255, 255, 255, 1), 0 3px 6px 0 rgba(0, 0, 0, 0.2); background:#1C8FED;  transition:box-shadow 0.25s; position:absolute; z-index:2 !important; cursor: pointer;}
.sec2 .pro_drag_progress .drag_handle:active {box-shadow:0 0 0 2px rgba(22, 111, 204, 1), 0 0 0 3px rgba(255, 255, 255, 1), 0 3px 6px 0 rgba(0, 0, 0, 0.2);}
.sec2 .pro_drag_progress .drag_handle:before {content:""; display:inline-block; width:672px; height:3px; background-color: #1C8FED; position:absolute; top:7px; right:8px;}

/* sec3 ½ÃÁðÀ̽´¹è³Ê */
.sec3 {width:100%; height:510px; padding:80px 0; background-repeat: no-repeat; background-position: center center; background-image:url('//image5.compuzone.co.kr/img/images/Freeshipping/sec3_bg_txt.png'); box-sizing:border-box;}
.sec3>.flex {display: flex; align-items: center;}
.sec3 .tit {width:380px;}
.sec3 .tit p {margin-top:20px; font-family:'noto-L';}
.sec3 .sec3pro {width:920px;}
.sec3 .sec3pro .swiper-container {width:calc(100% + 376px);}
.sec3 .sec3pro .swiper-slide {width:248px; height:350px;}
.sec3 .sec3pro .swiper-slide>a {display: block; width:100%; height:100%; padding:20px; background:#fff; border-radius:10px; box-sizing: border-box; overflow:hidden; position:relative;}
.sec3 .sec3pro .swiper-slide .imgbox {width:208px; height:208px; position:relative;}
.sec3 .sec3pro .swiper-slide .imgbox::before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(255,255,255,0.5); z-index:1; display:none;}
.sec3 .sec3pro .swiper-slide .txtbox {margin-top:10px;}
.sec3 .sec3pro .txtbox .flex .perc {color:#F14738;}
.sec3 .sec3pro .pro_menu {top:170px; left:50%; transform:TranslateX(-50%);}
.sec3 .sec3pro .swiper-option {width:30px; height:30px; position:absolute; top:50%; transform:TranslateY(-50%); left:365px; z-index:1;}
.sec3 .sec3pro .swiper-button-prev {width:30px; height:30px; margin:0; background:#fff url('//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_prev_24.svg') center center/20px no-repeat; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); top:0; left:0; z-index:2; transition:all 0.3s; opacity:0;}
.sec3 .sec3pro:hover .swiper-button-prev {opacity:1;}
/* »óÇ° hover */
.sec3 .sec3pro .swiper-slide:hover .imgbox::before {display:block;}
.sec3 .sec3pro .swiper-slide:hover .pro_menu {display: flex;}
.sec3 .sec3pro .swiper-slide:hover .pro_menu div:hover a span {display: none;}

/* sec4 Ư°¡ÇÒÀÎ + ¹«·á¹è¼ÛÀ¸·Î ¾Ë¶ã±¸¸Å */
.sec4 {width:100%; padding:100px 0; box-sizing: border-box; overflow:hidden;}
.sec4 .sec4pas {display: flex; align-items: center; gap:5px;}
.sec4 .sec4pas a {display: block; width:32px; height:32px; line-height: 32px; border-radius: 50%; border:1px solid #e8e8e8; text-align: center; font-size:16px; font-family:'spoqa R'; font-weight:normal; color:#949494;}
.sec4 .sec4pas a:hover, .sec4 .sec4pas a.on {background:#258FFF; border:1px solid #258FFF; color:#fff;}
.sec4pro {margin-top:40px;}
.sec4pro ul {display: flex; flex-wrap:wrap; gap:20px;}
.sec4pro ul li {width:420px;}
.sec4pro ul li a {display: flex; width:100%; height:100%; background:rgba(0, 0, 0, 0.02); border-radius: 10px; box-sizing: border-box; overflow:hidden;}
.sec4pro ul li a .imgbox {width:170px; height:170px; position:relative;}
.sec4pro ul li a .imgbox::before {content:''; width:100%; height:100%; background:rgba(0, 0, 0, 0.02); position:absolute; top:0; left:0;}
.sec4pro ul li a .txtbox {display: flex; flex-direction:column; justify-content:space-between; width:250px; padding:20px; box-sizing: border-box;}

/* sec5 À̺¥Æ®¹è³Ê */
.sec5 {width:100%; overflow: hidden; position:relative;}
.sec5 .swiper-container {width:100%; padding-bottom:20px;}
.sec5 .swiper-slide a {display: flex; justify-content: space-between; width:1300px; height:100px; margin:0 auto;}
.sec5 .swiper-option {width:1300px; margin:0 auto; position:absolute; top:0; left:50%; transform:TranslateX(-50%); z-index:1;}
.sec5 .swiper-option .swiper-pagination {right:0; padding-top:15px;}
.sec5 .swiper-option .swiper-pagination-bullet {margin:0 2px; background:#d8d8d8; opacity:1;}
.sec5 .swiper-option .swiper-pagination-bullet-active {background:#1C8FED;}

/* sec6 ¹«·á¹è¼Û »óÇ° ¸ð¾Æº¸±â */
.sec6 {width:100%; padding-bottom:100px; box-sizing: border-box;} 
.sec6 .noti {display: flex; align-items: center; position:relative;}
.sec6 .noti p {color:#6c6c6c;}
.sec6 .noti .ex {display:inline-block; width:20px; height:20px; margin-left:2px; background:url('//image5.compuzone.co.kr/img/images/svg_icon/D8D8D8/icon_line_question_mark_circle_24.svg') center center/contain no-repeat; cursor: pointer;}
.sec6 .noti .bloo {width:max-content; border:1px solid #000; padding:13px; background:#fff; border-radius: 2px; box-sizing: border-box; position:absolute; top:30px; right:0; display: none;}
.sec6 .noti .bloo::before {content:''; width:16px; height:10px; background: url(//image5.compuzone.co.kr/img/images/bsk/bsk_content.png) -214px -186px; position:absolute; top:-10px; right:1px;}
.sec6 .noti .bloo p {margin-top:4px; font-size:14px; font-family:'noto-R'; color:#1a1a1a;}
.sec6 .noti .bloo p:first-child {margin-top:0;}
.sec6 .noti .ex:hover .bloo {display: block;}
.sec6 .sec6cate {margin-top:40px; margin-left:-1px; border-radius:10px; border:1px solid #d8d8d8; overflow:hidden;}
.sec6 .sec6cate ul {display: grid; grid-template-columns: repeat(6,1fr); border-bottom:1px solid #d8d8d8;}
.sec6 .sec6cate ul:last-child {border-bottom:none;}
.sec6 .sec6cate ul li {width:100%; padding:10px; font-size:14px; font-family:'noto-R'; font-weight: normal; color:#1A1A1A; border-right: 1px solid #D8D8D8; box-sizing: border-box; transition:all 0.3s; cursor: pointer;}
.sec6 .sec6cate ul li:last-child {border-right:none;}
.sec6 .sec6cate ul li:first-child {border-right: 1px solid #D8D8D8;}
.sec6 .sec6cate ul li:hover {background:#F9F9F9;}
.sec6 .sec6cate ul li.on, .sec6 .sec6cate ul li.ON2 {background:#1C8FED; color:#fff; box-shadow: 3px 3px 6px rgba(0,0,0,0.16); border-radius: 5px;}
.sec6 .sec6cate ul li.none_li{background:#fff; box-shadow: none; border-radius:0; pointer-events: none;}
.sec6 .pro_filter {margin:40px auto 20px; display: flex; justify-content: space-between; align-items: center;}
.sec6 .pro_filter .flex {display: flex; align-items: center; gap:30px;}
.sec6 .pro_filter .flex_20 {display: flex; gap:20px;}
.sec6 .pro_filter .flex_10 {display: flex; gap:10px;}

/* ÇÊÅÍ Å×À̺í form */
.pro_filter .checkbox input {display: none; vertical-align: middle;}
.pro_filter .checkbox label {display: flex; align-items: center;}
.pro_filter .checkbox input[type="checkbox"] + label i {display: inline-block; width: 18px; height: 18px; background: url(//image5.compuzone.co.kr/img/images/bsk/simp_checkG.png) center center/contain no-repeat; cursor: pointer; vertical-align: middle; margin-right:6px;}
.pro_filter .checkbox input[type="checkbox"]:checked + label > i {background: url(//image5.compuzone.co.kr/img/images/bsk/simp_checkedB.png) center center/contain no-repeat;}
.pro_filter .search_box {width: 200px; height: 40px; position: relative;}
.pro_filter .search_box > input {width: 200px; height: 40px; padding:0 40px 0 15px; border:1px solid #d8d8d8; border-radius:2px; line-height: 36px; outline: none; box-sizing: border-box;}
.pro_filter .search_box:hover > input {border:1px solid #1a1a1a;}
.pro_filter .search_box > input::placeholder {color: #949494; }
.pro_filter .search_box > button {position: absolute; display: inline-block; font-family: noto-R !important; line-height: 1; top:8px; right:10px; width: 24px; height: 24px; background:transparent url('//image5.compuzone.co.kr/img/images/svg_icon/3A3A3A/icon_line_search_24.svg') center/contain no-repeat;}
.pro_filter .select_box {width: 125px; height: 40px; position: relative;}
.pro_filter .select_box:before {content: ''; position: absolute; display:inline-block; top: 12px; right: 14px; width: 8px; height: 8px; border: solid #d8d8d8; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.pro_filter .select_box select {width:100%; height: 40px; line-height: 36px; padding:0 30px 0 10px; border:1px solid #d8d8d8; border-radius:2px; background-color:#fff; outline: none; appearance:none;}
.pro_filter .select_box:hover select {border:1px solid #1a1a1a;}
.pro_filter .select_box:hover:before {border: solid #1a1a1a; border-width: 0 2px 2px 0;}
.pro_filter .btn button {display: inline-block; padding: 0 20px; min-width: 78px; height: 40px; line-height: 40px; background: #fff; border: 1px solid #d8d8d8; border-radius: 2px; text-align: center; outline: none; cursor: pointer;}

/* »óÇ°¸®½ºÆ® */
.pro_list ul {display:flex; flex-wrap: wrap; gap:50px 20px;}
.pro_list ul li {width:244px; height:346px; position:relative;}
.pro_list ul li>a {display: block; width:100%; height:100%; background:#fff; box-sizing: border-box; overflow:hidden; position:relative;}
.pro_list .imgbox {display: flex; align-items: center; justify-content: center; width:244px; height:244px; position:relative; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
.pro_list .imgbox img {width:84%; height:84%;}
.pro_list .imgbox::before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.02); z-index:1; display:;}
.pro_list .imgbox::after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(255,255,255,0.5); z-index:1; display:none;}
.pro_list .txtbox {margin-top:10px; }
.pro_list .txtbox .flex .perc {color:#F14738;}
.pro_list .pro_menu {top:170px; left:50%; transform:TranslateX(-50%);}

/* »óÇ° hover */
.pro_list ul li:hover .imgbox::after {display:block;}
.pro_list ul li:hover .pro_menu {display: flex;}
.pro_list ul li:hover .pro_menu div:hover a span {display: none;}

/* Á¦Ç° ¸®½ºÆ® ÇÏ´Ü ÆäÀÌ¡ */
.bottom_area{float:none;}