@charset "utf-8";

/* 버튼 */
.btn-wrap {margin:80px 0 0; text-align:center;}

.btn-view-more {display:inline-block; padding:0 1.75em; color:#555; letter-spacing:-0.02em; line-height:3.5em; border:1px solid #555; border-radius:1.75em; overflow:hidden;
    -webkit-transition:200ms;
    -moz-transition:200ms;
    -o-transition:200ms;
    transition:200ms;
}
.btn-view-more span {display:inline-block; padding-right:1.563em; padding-bottom:1px; background:url("../../img/icon/view_more.png") no-repeat right center;
    -webkit-transition:background-image 200ms;
    -moz-transition:background-image 200ms;
    -o-transition:background-image 200ms;
    transition:background-image 200ms;
}
.btn-view-more:hover {color:#fff; border-color:#bbb3d6; background:#bbb3d6;}
.btn-view-more:hover span {background-image:url("../../img/icon/view_more_w.png");}

.btn-confirm {display:inline-block; min-width:200px; padding:0 20px; color:#fff; font-size:1.125em; font-weight:400; text-align:center; line-height:68px; border:1px solid #8d80bb; border-radius:35px; background:#8d80bb;
    -webkit-transition:200ms;
    -moz-transition:200ms;
    -o-transition:200ms;
    transition:200ms;
}
.btn-confirm:hover {color:#8d80bb; background:transparent;}

.btn-download {display:inline-block; min-width:200px; padding:0 20px; color:#8d80bb; font-size:1.125em; font-weight:400; text-align:center; line-height:68px; border:1px solid #8d80bb; border-radius:35px; background:transparent;
    -webkit-transition:200ms;
    -moz-transition:200ms;
    -o-transition:200ms;
    transition:200ms;
}
.btn-download:hover {color:#fff; background:#8d80bb;}


/* 셀렉트 */
.select-st {padding:5px; border:1px solid #d0d3db; border-radius:3px;}


/* 라디오 */
.radio-box {display:inline-block; position:relative;}
.radio-box input[type="radio"] {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; opacity:0;}
.radio-box i {display:inline-block; position:relative; width:16px; height:16px; margin:1px 3px 0 0; vertical-align:middle; border:1px solid #ccc; border-radius:50%;}
.radio-box i:after {content:""; position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; border-radius:50%; background:#555;
    -webkit-transition:100ms;
    -moz-transition:100ms;
    -o-transition:100ms;
    transition:100ms;
}
.radio-box label {display:inline-block; vertical-align:middle;}
.radio-box input[type="radio"]:checked + i:after {width:8px; height:8px; margin:-4px 0 0 -4px; opacity:1;}


/* 팝업 */
.pop-open {height:100%; overflow:hidden;}
.popup {display:none; position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; background:rgba(0,0,0,0.8); z-index:9999;}
.popup .pop-in {display:table; table-layout:fixed; width:100%; height:100%;}
.popup .pop-cell {display:table-cell; padding:20px; text-align:center; vertical-align:middle;}
.popup .pop-box {display:inline-block; position:relative; width:100%; max-width:1160px; margin:10% 0 0; padding:75px 50px; text-align:left; vertical-align:top; border-radius:30px; background:#fff;}
.popup .pop-hd h4 {padding-right:40px; font-size:1.750em; letter-spacing:-0.02em;}
.popup .pop-cont {padding:2.222em 0 0; font-size:1.125em; letter-spacing:-0.02em; line-height:1.778em;}
.pop-close {position:absolute; right:50px; top:70px; width:48px; height:48px; font-size:0; text-indent:-9999px; border:1px solid #8d80bb; border-radius:50%; background:#8d80bb;
    -webkit-transition:300ms;
    -moz-transition:300ms;
    -o-transition:300ms;
    transition:300ms;
    -webkit-transform:rotateZ(45deg);
    -moz-transform:rotateZ(45deg);
    -ms-transform:rotateZ(45deg);
    -o-transform:rotateZ(45deg);
    transform:rotateZ(45deg);
}
.pop-close span {display:block; position:absolute; left:16%; top:16%; width:68%; height:68%;}
.pop-close em,
.pop-close i {position:absolute; border-radius:1px; background:#fff;
    -webkit-transition:background 200ms;
    -moz-transition:background 200ms;
    -o-transition:background 200ms;
    transition:background 200ms;
}
.pop-close em {left:0; top:50%; width:100%; height:2px; margin-top:-1px;}
.pop-close i {left:50%; top:0; width:2px; height:100%; margin-left:-1px;}
.pop-close:hover {background:transparent;
    -webkit-transform:rotateZ(225deg);
    -moz-transform:rotateZ(225deg);
    -ms-transform:rotateZ(225deg);
    -o-transform:rotateZ(225deg);
    transform:rotateZ(225deg);
}
.pop-close:hover em,
.pop-close:hover i {background:#8d80bb;}
.pop-bg {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9998;}


@media screen and (max-width:1023px){
/* 버튼 */
.btn-wrap {margin:60px 0 0;}

.btn-view-more {padding:0 1.4em; font-size:14px; line-height:2.8em; border-radius:1.4em;}
.btn-view-more span {background-size:auto 30%;}

.btn-confirm,
.btn-download {min-width:160px; padding:0 15px; font-size:14px; line-height:54px; border-radius:28px;}

/* 팝업 */
.popup .pop-box {padding:55px 20px; border-radius:22px;}
.popup .pop-hd h4 {font-size:1.5em;}
.popup .pop-cont {font-size:1.167em; line-height:1.5em;}
.pop-close {right:20px; top:50px; width:36px; height:36px;}
}


@media screen and (max-width:767px){
/* 버튼 */
.btn-wrap {margin:40px 0 0;}

.btn-confirm,
.btn-download {min-width:120px; padding:0 10px; letter-spacing:-0.02em; line-height:40px; border-radius:21px;}

/* 팝업 */
.popup .pop-box {padding:35px 20px; border-radius:15px;}
.popup .pop-hd h4 {font-size:1.333em;}
.pop-close {top:33px; width:24px; height:24px;}
}


@media screen and (max-width:359px){
.btn-confirm,
.btn-download {font-size:1em;}
}