.p_r { position: relative; } 
.p_a { position: absolute; } 
.p_c { position: absolute; left: 50%; transform: translateX(-50%); } 

.cont02 { background:linear-gradient(to bottom, #f3f6f7, #fdfdfd); padding: 5%; } 
.cont02 .tab_area { width: 100%; max-width:96vw; margin: 0 auto; } 
.cont02 .tab_area .tab_btn { display: flex; justify-content: space-between; align-items: center; } 
.cont02 .tab_area .tab_btn li { width: 24%; } 
.cont02 .tab_area .tab_btn li a { display: block; width: 100%; background: #c3ccce; border-radius: 0.75rem; padding: 12% 0; text-align: center; font-size: 1.05rem; font-weight: 700; color: #abb4b6; position: relative; } 
.cont02 .tab_area .tab_btn li a::after { content: ''; display: block; width: 4vw; height: 5vw; position: absolute; left: 50%; bottom: -38%; transform: translateX(-50%); background: url('https://cdn.edu2080.co.kr/sabok/images/event/2021/0713/re_250508/tab_icon01.png') 0 0 no-repeat; background-size: 100%; border-radius: 1rem; opacity: 0; } 
.cont02 .tab_area .tab_btn li:nth-of-type(2) a::after { background: url('https://cdn.edu2080.co.kr/sabok/images/event/2021/0713/re_250508/tab_icon02.png') 0 0 no-repeat; background-size: 100%; } 
.cont02 .tab_area .tab_btn li:nth-of-type(3) a::after { background: url('https://cdn.edu2080.co.kr/sabok/images/event/2021/0713/re_250508/tab_icon03.png') 0 0 no-repeat; background-size: 100%; } 
.cont02 .tab_area .tab_btn li:nth-of-type(4) a::after { background: url('https://cdn.edu2080.co.kr/sabok/images/event/2021/0713/re_250508/tab_icon01.png') 0 0 no-repeat; background-size: 100%; } 
.cont02 .tab_area .tab_btn li a:hover, .cont02 .tab_area .tab_btn li a.active { color: #fff; background: #0f6fed; } 
.cont02 .tab_area .tab_btn li a:hover::after, .cont02 .tab_area .tab_btn li a.active::after { opacity: 1; } 
.cont02 .tab_area .tab_btn li:nth-of-type(2) a:hover, .cont02 .tab_area .tab_btn li:nth-of-type(2) a.active { background: #68b719; } 
.cont02 .tab_area .tab_btn li:nth-of-type(3) a:hover, .cont02 .tab_area .tab_btn li:nth-of-type(3) a.active { background: #ff730d; } 
.cont02 .tab_area .tab_btn li:nth-of-type(4) a:hover, .cont02 .tab_area .tab_btn li:nth-of-type(4) a.active { background: #d400ff; } 
.cont02 .tab_area .tab_cont { display: none; position: relative; margin: 8% 0; width: 100%; } 
.cont02 .tab_area .tab_cont.active { display: block; } 
.cont02 .tab_area .tab_cont img { width: 100%; } 
.cont02 .tab_area .tab_cont .tab_cont_txt { bottom: 16vw; width: 86%; left: 50%; transform: translateX(-50%); } 
.cont02 .tab_area .tab_cont:nth-of-type(2) .tab_cont_txt { bottom: 21vw; } 
.cont02 .tab_area .tab_cont:nth-of-type(3) .tab_cont_txt { bottom: 6vw; } 
.cont02 .tab_area .tab_cont .tab_cont_txt a { display: block; height: 12vw;  width: 100%; } 
.cont02 .tab_area .tab_cont .tab_cont_txt p .price { font-size: 1.35rem; display: block; font-weight: 500; text-decoration: line-through; color: #aaa; text-align: end; } 
.cont02 .tab_area .tab_cont .tab_cont_txt p .sale_price { font-size: 2.05rem; display: block; font-weight: bold; color: #0f6fed; text-align: end; line-height: 2rem; margin-bottom: 5%; } 
.cont02 .tab_area .tab_cont:nth-of-type(2) .tab_cont_txt p .sale_price { color: #68b719; } 
.cont02 .tab_area .tab_cont:nth-of-type(3) .tab_cont_txt p .sale_price { color: #ff730d; } 
.cont02 .tab_area .tab_cont:nth-of-type(4) .tab_cont_txt p .sale_price { color: #000; } 

/* reason */
.reason, .open_reason.reason { position: absolute; width:95%; top:14%; left:50%; padding: 5%; box-sizing: border-box; background:rgba(0,0,0,0.95); color:#fff; text-align: left; font-size:12px; letter-spacing: -0.04em; display:none; transform: translateX(-50%); z-index: 10; } 
.reason.active, .open_reason.reason.active { display: block; } 
.reason .close, .open_reason.reason .close { position: absolute; width:4vw; height:4vw; top:4%; right:1.5%; cursor: pointer; } 
.reason .close::before, .reason .close::after, .open_reason.reason .close::before, .open_reason.reason .close::after { content:''; display:block; width:100%; height:1px; background:#fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(45deg); } 
.reason .close::after, .open_reason.reason .close::after { transform: translate(-50%,-50%) rotate(-45deg); }