img {width:100%;}
/* Æ˾÷ */
#pop_box.shareLyr {background:rgba(0, 0, 0, 0.7);}
#pop_box.shareLyr.on {display:block;}
#pop_box.shareLyr .inner {padding:0 25px; box-sizing: border-box; text-align: left;}
#pop_box.shareLyr .inner .cont {width:100%; min-width:270px; border-radius:10px; position:relative;}
#pop_box.shareLyr .inner .cont .closeBtn {display: inline-block; width:30px; height:30px; background:url('//image5.compuzone.co.kr/img/images/product_list22/pro_comparison_x2.png') center center/contain no-repeat; position: absolute; top:15px; right:15px;}
.shr_sns {position:relative; padding:20px 35px; border-bottom: 1px solid #d8d8d8; color: #3a3a3a; font-size:20px; font-family: 'noto-B'; font-weight: normal; text-align: center; word-break: keep-all; height:inherit; line-height:inherit;}
#pop_box.shareLyr .layer_pop {width:auto; max-height:none; padding:0; background:none;}
.layer_pop .sale_price_inner {padding:20px 20px 25px;}
.layer_pop .sale_price_inner .basic {overflow:hidden;}
.layer_pop .sale_price_inner .basic p {margin-bottom:7.5px; font-size: 15px; font-family:'noto-R'; font-weight: normal; color:#3a3a3a; position:relative; padding-left:5px;}
/* ÁÖ»çÀ²Æ˾÷ */
.layer_pop .video_zone {width:100%; height:200px; margin-top:20px; border-radius:10px; overflow: hidden; box-sizing: border-box; isolation: isolate;}
/* ÇØ»óµµÆ˾÷ */
.gaming_pc_HD .sale_price_inner {padding:20px;}
.layer_pop .HD_img {display:block; width:100%;}
.layer_pop .HD_img img {display: block;}

/* wrap */
.gaming_bg {width:100%; background:#000;}
.gaming_wrap {width:100%; max-width:750px; margin:0 auto;}
.main_fix_menu {display:none;}
.section {position:relative; }

/* section1-Ä«µå¹è°æ */
.sec1 {height:calc(100vh - 95px); overflow:hidden; }
.sec1::after {content:''; width:100%; height:100vh; background:linear-gradient(transparent, transparent 45%, #000); position:absolute; top:0;}
.card_bg {width:750px; position:relative; top:-50px; left:50%; transform:translateX(-50%); padding:0 30px; box-sizing:border-box;}
.card_bg::before {content:''; width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:1; animation:card_bg 3s forwards 2.6s;}
@keyframes card_bg {
	0% {opacity:1;}
	100% {opacity:0;}
}
.card_wrap {display: flex; justify-content: center; margin-bottom:14px;}
.card_wrap .card {width:192px; height:202px; margin-right:14px; position: relative; perspective:1000px; overflow: hidden;}
.card_wrap .card:nth-child(4n) {margin-right:0px;}
.card_wrap .card img {width:100%;}
.card_wrap .front, .card_wrap .back {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: center; align-items: center; transition:1s; backface-visibility:hidden; border-radius: 10px; }
.card_wrap .front {background-color: #000; animation:card_ani1 4s infinite;}
.card_wrap .back {background-color: #000; transform:rotateY(180deg); animation:card_ani2 4s infinite;}
.card1 .front, .card1 .back{animation-delay:3s;}
.card2 .front, .card2 .back{animation-delay:3.05s;}
.card3 .front, .card3 .back{animation-delay:3.1s;}
.card4 .front, .card4 .back{animation-delay:3.15s;}
.card_wrap2 .card1 .front, .card_wrap2 .card1 .back{animation-delay:3.2s;}
.card_wrap2 .card2 .front, .card_wrap2 .card2 .back{animation-delay:3.25s;}
.card_wrap2 .card3 .front, .card_wrap2 .card3 .back{animation-delay:3.3s;}
.card_wrap2 .card4 .front, .card_wrap2 .card4 .back{animation-delay:3.35s;}
.card_wrap3 .card1 .front, .card_wrap3 .card1 .back{animation-delay:3.25s;}
.card_wrap3 .card2 .front, .card_wrap3 .card2 .back{animation-delay:3.3s;}
.card_wrap3 .card3 .front, .card_wrap3 .card3 .back{animation-delay:3.35s;}
.card_wrap3 .card4 .front, .card_wrap3 .card4 .back{animation-delay:3.4s;}
.card_wrap4 .card1 .front, .card_wrap4 .card1 .back{animation-delay:3.45s;}
.card_wrap4 .card2 .front, .card_wrap4 .card2 .back{animation-delay:3.5s;}
.card_wrap4 .card3 .front, .card_wrap4 .card3 .back{animation-delay:3.55s;}
.card_wrap4 .card4 .front, .card_wrap4 .card4 .back{animation-delay:3.6s;}
.card_wrap5 .card1 .front, .card_wrap5 .card1 .back{animation-delay:3.5s;}
.card_wrap5 .card2 .front, .card_wrap5 .card2 .back{animation-delay:3.55s;}
.card_wrap5 .card3 .front, .card_wrap5 .card3 .back{animation-delay:3.6s;}
.card_wrap5 .card4 .front, .card_wrap5 .card4 .back{animation-delay:3.65s;}
.card_wrap6 .card1 .front, .card_wrap6 .card1 .back{animation-delay:3.7s;}
.card_wrap6 .card2 .front, .card_wrap6 .card2 .back{animation-delay:3.75s;}
.card_wrap6 .card3 .front, .card_wrap6 .card3 .back{animation-delay:3.8s;}
.card_wrap6 .card4 .front, .card_wrap6 .card4 .back{animation-delay:3.85s;}
.card_wrap7 .card1 .front, .card_wrap7 .card1 .back{animation-delay:3.75s;}
.card_wrap7 .card2 .front, .card_wrap7 .card2 .back{animation-delay:3.8s;}
.card_wrap7 .card3 .front, .card_wrap7 .card3 .back{animation-delay:3.85s;}
.card_wrap7 .card4 .front, .card_wrap7 .card4 .back{animation-delay:3.9s;}
.card_wrap8 .card1 .front, .card_wrap8 .card1 .back{animation-delay:3.95s;}
.card_wrap8 .card2 .front, .card_wrap8 .card2 .back{animation-delay:4s;}
.card_wrap8 .card3 .front, .card_wrap8 .card3 .back{animation-delay:4.05s;}
.card_wrap8 .card4 .front, .card_wrap8 .card4 .back{animation-delay:4.1s;}
@keyframes card_ani1 {
	0% {transform:rotateY(0);}
	30% {transform:rotateY(180deg);}
	100% {transform:rotateY(180deg);}
}
@keyframes card_ani2 {
	0% {transform:rotateY(180deg);}
	30% {transform:rotateY(360deg);}
	100% {transform:rotateY(360deg);}
} 
@keyframes card_tit {
	0%,100% {transform:TranslateY(20px);}
	50% {transform:TranslateY(0px);}
}
@keyframes card_tit2 {
	0% {transform:TranslateY(100px); opacity:0;}
	100% {transform:TranslateY(0); opacity:1;}
}
.card_tit {width:100%; position:fixed; bottom:0; left:50%; transform:TranslateX(-50%); z-index:2;}
.card_tit.on {position:absolute;}
.card_tit h2 {margin-bottom:16px; line-height:48px; text-align: center; font-size:35px; font-family:'noto-B'; font-weight: normal; color:#fff; opacity:0; animation:card_tit2 1s ease-in-out forwards 1.5s;}
.card_tit h3 {margin-bottom:40px; text-align: center; font-size:15px; font-weight: normal; color:#fff; opacity:0; animation:card_tit2 1s ease-in-out forwards 2s;}
.card_tit_ani {text-align: center; opacity:0; animation:card_tit2 1s ease-in-out forwards 2.5s, card_tit 1.3s ease-in-out infinite 2.5s;}
.card_tit_ani p {margin-bottom:5px; font-size:13px; font-family:'spoqa M'; font-weight: normal; color:#1C8FED;}
.card_tit_ani span {display:block; width:1px; height:20px; margin:0 auto; background:#1C8FED; }

/* section2-°ÔÀÓ¼±Åà */
.sec2 {min-height:100vh; padding:40px 15px 0; box-sizing: border-box;}
.step_tit {width:100%;}
.step_tit h3 {margin-bottom:15px; text-align:center; font-size:20px; font-weight: normal; color:#fff; padding-top:1.5px;}
.step_tit h3 span {display:inline-block; width:79px; height:35px; margin-right:8px; margin-top:-1.5px; line-height:30px; text-align: center; border-radius:17.5px; background:#1C8FED; vertical-align: middle;}
.step_tit h3 span img {width:49px; padding-top:1.5px; vertical-align: inherit;}
.step_tit p {text-align:center; font-size:14px; font-weight: normal; color:#1C8FED;}
.gm_list {width:100%; margin-top:30px;}
.gm_list1 {padding-bottom:92px;}
.gm_list ul {overflow:hidden;}
.gm_list ul li {float:left; width:calc(33.3333% - 10.6666px); margin:0 16px 20px 0; opacity:0.6;}
.gm_list ul li:nth-child(3n) {margin:0 0 20px 0;}
.gm_list ul li span {display: block; margin-bottom:12px; height:214px; position:relative; border-radius: 20px; border:4px solid transparent; overflow: hidden; position:relative; box-sizing: border-box;}
.gm_list ul li span img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.gm_list1 ul li span img {width:auto; height:100%;}
.gm_list ul li p {text-align: center; font-size:15px; font-family:'noto-R'; font-weight: normal; color:#fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.gm_list ul li.on {opacity:1;}
.gm_list ul li.on span {border:2px solid #fff;}

/* section2-Çػ󵵼±Åà */
.gm_list2 {padding-bottom:10px;}
.gm_list2 ul li:nth-child(1) span {background:#0d6de3;}
.gm_list2 ul li:nth-child(2) span {background:#00c400;}
.gm_list2 ul li:nth-child(3) span {background:#8433ff;}
.gm_list2 ul li span.best::before { content:''; width:35px; height:15px; background:url('//image5.compuzone.co.kr/img/images/gaming_pc/best_mo.png') center center/contain no-repeat; position:absolute; top:15px; right:15px; z-index: 2;}
.gm_list2 ul li span img {width:100%;}
.gm_box_choice {width:100%; margin:5px 0 15px; overflow: hidden;}
.gm_box_choice span {float:left; width:calc(50% - 2.5px); height:30px; margin:0 5px 5px 0; line-height:31px; text-align: center; background:#3A3A3A; border-radius:5px; font-size:12px; font-family:'noto-R'; font-weight:normal; color:#fff;}
.gm_box_choice span:nth-child(2n) { margin:0 0 5px 0;}
.gm_box_choice span.gm_box_1 {width:100%; margin:0;}
.gm_reso {width:100%; padding:25px 20px; background:#3A3A3A; box-sizing: border-box; border-radius:10px; }
.gm_reso h3 {text-align: center; font-size:20px; font-family:'noto-B'; font-weight: normal; color:#fff;}
.gm_reso h3 span {font-size:20px; color:#1C8FED;}
.gm_reso h3 a{display:inline-block; width:24px; height:24px; margin-left:2px; background:url('//image5.compuzone.co.kr/img/images/gaming_pc/question24-w.png') center -1px/contain no-repeat; vertical-align:sub;}
.gm_reso p {margin:14px 0 16px; text-align: center; font-size:15px; font-family:'noto-R'; font-weight: normal; color:#fff;}
.gm_reso .gm_reso_img {display:block;}
.gm_reso .gm_reso_img img {width:100%;}
.gm_reso .gm_reso_img2 {display:block; margin-top:16px; padding:15px 30px 15px 6px; text-align: center; background:#595959; border-radius:10px; box-sizing: border-box;}
.gm_reso .gm_reso_img2 img {width:100%; max-width:540px;}
.space {height:122px;}

/* section3-·ÎµùÀ̹ÌÁö */
.sec3 {height:100vh;}
.gm_loading {width:100%; height:339px; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.gm_loading p {margin-bottom:40px; font-size:20px; font-family:'noto-R'; font-weight:normal; color:#fff;}
.lo_ani {width:240px; position:absolute; left:50%; transform:translateX(-50%);}
.lo_ani span.loani {display: block; width:240px; height:240px; position:absolute;}
.lo_ani span.loani img {width:100%;}
.lo_ani span.loani:nth-child(1) {animation:loading 2.5s ease-in-out infinite;}
.lo_ani span.loani:nth-child(2) {transform:scale(0); animation:loading 2.5s ease-in-out infinite 1.25s;}
.no_ani {width:240px; position:absolute; left:50%; transform:translateX(-50%);}
.no_ani span {display:block; width:240px; height:240px; animation:noading 2s linear infinite 1s;}
.no_ani span img {width:100%;}

@keyframes loading {
	0% {transform:scale(0) translate3d(-60%, 0px, -500px); z-index:2; opacity:1;}
	30%,50% {transform:scale(1) translate3d(0%, 0px, -0px); opacity:1;}
	80%,100% {transform:scale(0) translate3d(60%, 0px, -500px); z-index:1; opacity:0;}
}
@keyframes noading {
	0%, 36% {transform:rotate(0deg);}
	20%, 28% {transform:rotate(-5deg);}
	24%, 32% {transform:rotate(0deg);}
}

/* section4  */
.sec4 {padding:40px 15px; box-sizing: border-box; }
.gm_tab {width:100%; margin-bottom:20px;}
.gm_tab ul {overflow: hidden; width:100%; height:45px; background:#3A3A3A; border-radius:23px;}
.gm_tab ul li {float:left; width:50%; height:100%; line-height:46px; border-radius:23px; font-size:17px; font-family:'spoqa-M'; color:#6C6C6C; text-align:center; letter-spacing:0;}
.gm_tab ul li.on {background:#1C8FED; color:#fff;}
.gm_con {width:100%; background:#fff; border-radius:15px; margin-bottom:81px;}
.gm_con .gm_con_tit {height:80px; padding:27px 25px; border-bottom:1px solid #D8D8D8; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;}
.gm_con .gm_con_tit h3 {display: flex; flex-wrap: wrap; align-items: center; font-size:20px; font-weight: normal; color:#000; letter-spacing: -1px;}
.gm_con .gm_con_tit h3 span {font-size:20px; font-family:'noto-b'; color:#1C8FED; margin-right:6px;}
.gm_con .gm_con_tit h3 a {display:inline-block; width:24px; height:24px; margin-left:2px; background:url('//image5.compuzone.co.kr/img/images/gaming_pc/question24.png') center -0px/contain no-repeat; vertical-align:sub;}
.gm_con .gm_con_tit h4 {padding:5px 11px; font-size:13px; font-weight: normal; color:#1C8FED; border:1px solid #1C8FED; border-radius:14px;}
.gm_con .gm_con_pro>div.no_pro ul {display: none;}
.gm_con .gm_con_pro>div.no_pro .no_pro_inner {padding:10vh 0 15vh; text-align: center; box-sizing: border-box;}
.gm_con .gm_con_pro>div.no_pro .no_pro_inner span {display:inline-block; width:42px; height:42px;}
.gm_con .gm_con_pro>div.no_pro .no_pro_inner p {margin-top:12px; font-size:16px; font-family:'noto-R'; color:#6C6C6C;}
.gm_con .gm_con_pro ul li {width:100%; padding:30px 25px; border-bottom:1px solid #D8D8D8; box-sizing: border-box;}
.gm_con .gm_con_pro ul li:last-child {border-bottom:0;}
.gm_con .gm_con_pro ul li .pro_thum {display:block; width:230px; height:230px; margin:0 auto 20px;}
.gm_con .gm_con_pro ul li .pro_thum img {width:100%;}
.gm_con_pro_text h4 {margin-bottom:13px; font-size:16px; font-weight:normal; color:#1a1a1a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.gm_con_pro_text h5 {display:block; margin-bottom:8px; font-size:13px; font-weight:normal; color:#949494; overflow: hidden;}
.gm_con_pro_text h5 span {float:right;}
.gm_con_pro_text h6 {display:block; font-size:13px; font-family:'noto-M'; font-weight:normal; color:#1C8FED; overflow: hidden;}
.gm_con_pro_text h6 b {margin-right:2px; font-size:18px; font-family:'spoqa M'; font-weight:bold;}
.gm_con_pro_text h6 span {float:right; font-size:18px; font-family:'spoqa M'; font-weight:bold;}
.gm_con_pro_text a {display: block; width:100%; height:40px; line-height:42px; margin-top:18px; border:1px solid #1C8FED; border-radius: 5px; font-size:15px; font-family:'noto-M'; font-weight: normal; color:#1C8FED; text-align: center;}

/* ÇÏ´Ü ¹öÆ° */
.gm_btn {width:calc(100% - 30px); padding-bottom:40px; background:#000; box-sizing: border-box; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}
.gm_btn button {width:100%; height:52px; border-radius:10px; background:#1C8FED; font-size:18px; font-family:'noto-M'; font-weight: normal; color:#fff;}
.gm_btn .back_btn {background:#3A3A3A; position:relative; padding-left:32px;}
.gm_btn .back_btn::before {content:''; width:30px; height:30px; margin-left:-32px; background:url('//image5.compuzone.co.kr/img/images/gaming_pc/backbtn.png') center center/contain no-repeat; position:absolute; top:11px;}
.gm_btn2 button {float:left; width:calc(50% - 5px); height:52px; margin-right:10px; border-radius:10px; background:#3A3A3A; font-size:18px; font-family:'noto-M'; font-weight: normal; color:#fff;}
.gm_btn2 button:nth-child(2) {margin-right:0; background:#1C8FED; }

/**** ¹Ìµð¾îÄõ¸® ****/
@media screen and (max-width:750px) {
.gaming_wrap {max-width:100.0000vw; }
/* section1-Ä«µå¹è°æ */
.card_bg {width:100.0000vw; position:relative; top:-6.6667vw; left:50%; transform:translateX(-50%); padding:0 4.0000vw; box-sizing:border-box;}
.card_bg::before {content:''; width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:1; animation:card_bg 3s forwards 2.6s;}
.card_bg::after {content:''; width:100%; height:100vh; background:linear-gradient(transparent, transparent 5%, #000); position:absolute; top:0;}
.card_wrap {display: flex; justify-content: center; margin-bottom:1.8667vw;}
.card_wrap .card {width:25.6000vw; height:26.9333vw; margin-right:1.8667vw; position: relative; perspective:133.3333vw; overflow: hidden;}
.card_wrap .card:nth-child(4n) {margin-right:0.0000vw;}
.card_wrap .card img {width:100%;}
.card_wrap .front, .card_wrap .back {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: center; align-items: center; transition:1s; backface-visibility:hidden; border-radius: 1.3333vw; }
@keyframes card_tit {
	0%,100% {transform:TranslateY(2.6667vw);}
	50% {transform:TranslateY(0.0000vw);}
}
@keyframes card_tit2 {
	0% {transform:TranslateY(13.3333vw); opacity:0;}
	100% {transform:TranslateY(0); opacity:1;}
}

/* °ÔÀÓ¼±Åà Á¤»ç°¢ ºñÀ²À¯Áö */
.gm_list ul li {width:calc(33.3333% - 1.4222vw); margin:0 2.1333vw 20px 0;}
.gm_list ul li span {height:28.5333vw; margin-bottom:1.6vw; border-radius: 2.6667vw; border:2px solid transparent;}
}
@media screen and (max-width:540px) {
	.gm_list ul li p {font-size:12px;}
}

@media screen and (max-width:375px) {
	.gm_con .gm_con_tit h3 {font-size:16px;}
	.gm_con .gm_con_tit h3 span {font-size:16px;}
}