@charset "utf-8";

/* ====================================================================================================
   Prev Privacy
==================================================================================================== */
  
/* ===========================================================================
    Prev Privacy > Default
=========================================================================== */
.prevPrivacy {position: relative; display: inline-flex; border:1px solid rgba(0,0,0,0.1); margin-top: 10px; border-radius: 10px; user-select: none; cursor: pointer;}


/* ===========================================================================
    Prev Privacy > Select
=========================================================================== */
.prevPrivacy .selected {padding: 10px 80px 10px 1vw;}
.prevPrivacy .selected::after {position: absolute; right: 15px; top: 23px; transform: translateY(-50%); font-size: 0.667em; color: #666; content: "▼";}

/* ===========================================================================
    Prev Privacy > Option
=========================================================================== */
.prevPrivacy .options {display: none; position: absolute; bottom: 100%; left: 0; right: 0; border: 1px solid #ccc; border-radius: 6px; background: #fff; width: 550px !important; max-height: 300px; overflow-y: auto; z-index: 10;}
.prevPrivacy .options li {padding: 10px 1vw; cursor: pointer; margin-bottom: 0 !important;}
.prevPrivacy .options li:hover {background: #f2f2f2;}

/* ===========================================================================
    Prev Privacy > Open
=========================================================================== */
.prevPrivacy.open .selected::after {top: 10px; right: 14px; transform: rotate(180deg);}
.prevPrivacy.open .options {display: block;}


/* ====================================================================================================
   태블릿 가로 (768px ~ 1023px)
==================================================================================================== */
@media screen and (max-width:1023px) {
  /* ===========================================================================
    Prev Privacy > Select
  =========================================================================== */
    .prevPrivacy .selected { padding-left: 2vw;}
    
}


/* ====================================================================================================
   모바일 가로 & 태블릿 세로 (480px ~ 767px)
==================================================================================================== */
@media screen and (max-width:659px) {
  /* ===========================================================================
    Prev Privacy > Select
  =========================================================================== */
    .prevPrivacy .selected {padding-right: 50px;}
    .prevPrivacy .selected::after {top: 21px;}
  /* ===========================================================================
    Prev Privacy > Option
  =========================================================================== */
    .prevPrivacy .options {width: 80vw !important;}
    .prevPrivacy .options li {padding: 10px 2vw;}
    
}


/* ====================================================================================================
   모바일 세로 (~ 479px)
==================================================================================================== */

@media screen and (max-width:479px) {
  /* ===========================================================================
    Prev Privacy > Default
  =========================================================================== */
    .prevPrivacy {width: 100%;}
    .prevPrivacy .fs18 {font-size: 0.775rem;}
  /* ===========================================================================
    Prev Privacy > Option
  =========================================================================== */
    .prevPrivacy .options {width: 100% !important;}
}