@charset "utf-8";

body, html, div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, a, img, dl, dt, dd, form, pre, code, fieldset, legend, textarea, blockquot, button, th, td, input, select, strong { margin:0; padding:0}
fieldset,i, img {border:0 none}
img {width:inherit; max-width:100%; height:auto;}
dl, ul, ol, menu, li {list-style:none}
blockquote, p {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:""; content:none}
input, select, textarea, button {vertical-align:middle}
button, a{border:0 none; background-color: treansparent; cursor:pointer}
body, th, td, input, select, textarea, button { font-size:100%;/*** Font Size 수정금지 ***/ line-height:1.5; letter-spacing:-1; word-spacing:1}
body, html {width:100%; height:100%}
address, caption, cite, code, dfn, em, var {font-style:normal; font-weight:normal}
table {padding:0; border-spacing:0px; border:0; border-collapse:collapse;}
th, td {padding:0px;}

/* Index */
.raonkpopup {font-family: 'Malgun Gothic','돋움',Dotum,helvetica,arial; color:#444; display:block; background:url(../images/popup_bg.png); width:420px; height:422px; position: relative; text-align:center;}
.raonkpopup a {color:#333; text-decoration:none}
.raonkpopup a:active, .RAON_K_Solution a:hover {}
.raonkpopup .txt_hidden, #skipNav { position:-625.000em -625.000em; height:0; line-height:0; font-size:0; visibility:hidden}
h1 {font-size:;}

.raonkpopup p {font-size: 13px; padding:35px 30px 40px 34px; text-align:left;}
.raonkpopup p em {color:#1b579a; text-decoration:underline;}
.raonkpopup button {background-color:#1b579a; color:#ffffff; width:230px; height:56px; margin-top:10px; border-radius:10px; font-size:18px; font-weight:500; vertical-align:top;}
.raonkpopup .close {position:absolute; bottom:28px; right:26px; display:block; background:url(../images/close.png); width:22px; height:22px;}
.raonkpopup .checkbox {position:absolute; bottom:28px; left:30px;}
.raonkpopup .container {float:left; display: block; padding-left:22px; margin-right:25px; position: relative; cursor: pointer;  font-size: 14px; color:#1b579a; -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
.container input {position: absolute; opacity: 0;}
.raonkpopup .checkmark {position: absolute; top: 2px; left: 0; height: 22px; width: 22px; background:url(../images/check_off.png) no-repeat;}
.container input:checked ~ .checkmark {background:url(../images/check_on.png) no-repeat;}

/* 이미지팝업 */
#popup_layer_img {position: absolute; z-index: 90000; border: 0px solid black; margin: 0; padding: 0;}
#popup_layer_img .popup_layer_img_close {text-align: right;}
#popup_layer_img .popup_layer_img_close a {position: relative; background-color: rgba(0,0,0,0.5); display: inline-block; width: 2em; height:2em; border-radius:50%; transform: translate(60%, 15px);}
#popup_layer_img .popup_layer_img_close a span {position: absolute; display: block; width:64%; height:3px; background-color: #ffffff; top:calc(50% - 1.5px); left:18%}
#popup_layer_img .popup_layer_img_close a span.btn_closeL {transform:rotate(45deg);}
#popup_layer_img .popup_layer_img_close a span.btn_closeR {transform:rotate(-45deg);}
#popup_layer_img .popup_layer_img_content .popup_layer_img_closeAllday {position: absolute; background-color:rgba(0,0,0,0.5); left:20px; bottom:-6.5%; width:calc(100% - 40px); height:40px; color:#ffffff; border-radius:10px; text-align: center; line-height:40px;}
#popup_layer_img .popup_slider {position: relative; overflow:hidden; max-width:449px; max-height:625px;display: flex; transition: transform 0.5s ease;}
#popup_layer_img .popup_slider .popup_img {flex:0 0 100%; width:100%; display:none; transition:opacity 0.5s ease;}
#popup_layer_img .popup_slider .popup_img.active {display:block;}
#popup_layer_img .popup_dots {display: flex; position:absolute; justify-content: center; gap: 8px; margin-top: 10px; width:100%; bottom:23px;}
#popup_layer_img .popup_dots .popup_dot {width:10px; height:10px; border-radius: 50%; background-color:rgba(0,0,0,0.5); cursor:pointer; transition: background-color 0.3s; }
#popup_layer_img .popup_dots .popup_dot.active {background-color:#333}



@media screen and (max-width: 431px) {
    #popup_layer_img {left:0 !important; margin:10px 50px 0 10px; width:calc(100% - 70px); box-sizing:border-box;}
    
    
}