/* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); */
@import url(notosanskr.css);


.fr{ float: right}
.fl{ float: left;}

body{overflow: scroll;  overflow-x: hidden; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;font-family:'Noto Sans CJK KR', Noto Sans KR, sans-serif; letter-spacing: -0.02em; /*-webkit-touch-callout: none; -webkit-user-select:none;*/}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none}
table {border-collapse: collapse;border-spacing: 0;}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
.main_container { margin: 0px 0 0 0; height: 100vh; display: flex; justify-content: center; align-items: flex-start;}

.login_article{ width:380px; margin: 15px; box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.15); border-radius: 8px;     background: #ffffff; position: relative; z-index: 1}
.login_article .title{    position: relative; display: flex; background: #ffffff; border-bottom: 1px solid #e5e5e5; color: #ffffff; font-size: 22px; padding: 7px 10px 7px 20px; border-radius: 8px 8px 0 0; justify-content: space-between; align-items: center;}
.login_article .content{ padding: 20px 20px 30px;}

.login_article .notice{height: 20px; color: #E21919; display: block; font-weight: 500; margin: 10px;}
.form_user{background: url(/resources/images/intro/ic_user.png) no-repeat 97% center;}
.form_pass{background: url(/resources/images/intro/ic_lock.png) no-repeat 97% center;}
.form_otp{}
.focus { }

input:disabled{ background: #F0F0F0}
.input_group{ margin: 8px 0}
.input_group input{padding: 15px 55px 15px 15px; width: calc(100% - 72px); border: 1px solid #e5e5e5; border-radius: 6px; font-size: 16px;}
.input_group.focus  input{border: 1px solid #f68100;}

.btn{flex: 1 1 0; font-size: 18px; text-decoration: none; display: inline-flex; height: 54px; background: #f68100; border-radius: 4px; color: #ffffff; align-items: center; justify-content: center; font-weight: 600;}
.btn:active{ background: #795548}
.btn.cancel{ background: #795548}

.find_option{ margin: 50px 0 0 0}
.find_option a{    line-height: 16px; font-weight: 500; font-size: 13px; text-decoration: none; display: inline-flex; width: 60px; height: 36px; background: #D9D9D9; border: 1px solid #D9D9D9; border-radius: 10px; color: #686868; padding: 10px 10px 10px 8px; align-items: center;}
.find_option a.active,.find_option a:hover{   background: #a25500; border: 1px solid #3C9BEE; color: #006AC7; }

.modal{ margin: 15% 0 0 0}
.modal_bg{ position: absolute; width: 100; height: 100%; background: rgba(0,0,0,0.21);top: 0; left: 0; right: 0; bottom: 0;  }
.modal_bg{ display: block;  content:"n"; width: 100%; height: 100%; background: url(/resources/images/intro/kpopup.jpg) no-repeat ; background-size: cover;}

.btn_zone{    gap: 5px;     margin: 10px 0px; display: flex;}
.cp_right{text-shadow: 1px 1px 2px rgba(0,0,0,0.9); position: relative; z-index: 999; color: #DEDEDE; text-align: center; display: block;}


/* sample_site*/
.sample_site{ padding: 2em;  text-align: center; width: 80%;  margin: 150px 0 0 0;}
.sample_site .title{     color: #0953a8; display: block; font-size: 34px; font-weight: 400; margin: 0px 0 45px;}
.sample_site ul{ display: flex; justify-content: center; gap:20px;}
.sample_site li{     display: inline-flex; }
.sample_site li a{width: 180px; text-decoration: none; color:#333333; padding: 20px 20px 22px; border: 1px solid #e1e1e1; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);border-radius: 10px; }
.sample_site li strong{display: block; font-size: 18px; font-weight: 800; margin: 15px 0 0 0;}
.sample_site li span{font-size: 13px; margin: 15px 0 0 0; display: block; line-height: 18px;}
.sample_site li a:hover{ border: 1px solid #8AB9FF;     box-shadow: 0px 0px 12px rgba(138, 185, 255, 0.8);}
.sample_site li .btn{height: 18px; font-size: 14px; padding: 13px 20px; font-weight: 500; display: inline-block; margin: 0 auto; background: #4ea1ff; margin: 15px 0 0 0; border-radius: 8px; color: #ffffff;}
.sample_site li a:hover .btn{ background-color: #0953a8}

/* loading*/
.loadbar em{display: none; z-index: 2; text-align: center; position: absolute; width: 100%; font-size: 24px; font-weight: 600; color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); line-height: 50px; letter-spacing: 1px;}
.loadbar.on em{ display: block}
.loadbar{ position:relative;  border: 1px solid #c8c8c8;   background: repeating-linear-gradient(45deg, #C8C8C8, #C8C8C8 16px, #9D9D9D 16px, #9D9D9D 30px); border-radius: 4px;}
.loader {z-index: 1; border-radius: 8px;width: 100%;height:50px; position: relative;animation: none;}
.loadbar.on .loader{animation: loader-animation 30s linear forwards;width: 100%; background: rgba(33,150,243,0.8);}
.loadbar::after{content: ""; width: 34px; height: 34px; position: absolute; top: 8px; right: 8px; background: url("/resources/images/intro/bg_aam.png") no-repeat;}

@keyframes loader-animation {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}






.header { position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-color: #fff; z-index: 100; box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.2);    }
.header .header_main{    margin: 0 auto; display: flex;  width: 1200px; height: 60px;  justify-content: space-between;  align-items: center;}
.header a{ margin: 0 8px}
.header .login{gap: 5px;  flex: initial; padding: 0 20px; right: 24px; top: 10px; font-size: 15px; height: 40px;}

.footer{    position: relative; padding: 45px 0 30px; background-color: #333333;  z-index: 15;}

.main_section{display: flex; margin: 60px 0 0px 0; flex-direction: column; align-items: center;     line-height: 20px;}

.main_section01{ width: 100%; }
.main_section01 {display: block; width: 1200px;  padding: 60px 0 0;    margin: 0 auto;}
.main_section01  .title{ font-weight: 600; font-size: 24px; display: block; margin: 0 0 30px;}
 .main_section01  .sub_title span{ color: #F68100;}
.main_section01  .sub_title{background: url("/resources/images/intro/bg_bull.png") no-repeat; font-weight: 600; font-size: 24px; display: block; margin: 0 0 30px; padding: 0 0 0 24px;}

.main_banner{font-weight: 600; padding: 3em 3em 0; border-radius:20px;  background: #FFD777 url('/resources/images/intro/bg_01.png') no-repeat center bottom; }
.main_banner .title{     line-height: 26px; font-size: 22px; font-weight: 600;}
.main_banner .tit{     line-height: 52px; font-size: 52px; display: block; font-weight: 800; margin: 5px 0 25px;}
.main_banner .title:after{ content: ""; display: block; background: url("/resources/images/intro/img_bg_main.png") no-repeat; height: 272px; margin: 40px 0 0 0}
.main_banner .cont{}

.sub_banner{font-weight: 600; padding: 3em 3em 0; border-radius:20px;  background: #FDDF98 url('/resources/images/intro/bg_01.png') no-repeat center bottom; position: relative;     height: 293px;}
.sub_banner .title{     line-height: 26px; font-size: 22px; font-weight: 600;}
.sub_banner .tit{     line-height: 32px; font-size: 32px; display: block; font-weight: 800; margin: 5px 0 25px;}
.sub_banner .title:after{ content: ""; display: block; background: url("/resources/images/intro/img_bg_sub.png") no-repeat;     height: 340px; position: absolute; right: 0; top: 0; border-radius: 20px; width: 100%; }
.sub_banner .cont{    width: 73%;     display: inline-block;}

.inqure_banner{background: #FCDDAD url('/resources/images/intro/bg_02.png') no-repeat center bottom; display: flex; justify-content: space-between; align-items: center; font-size: 24px; font-weight: 600; border-radius:20px; padding: 0.7em 1.5em;}
.inqure_banner .btn{font-size: 22px;     flex: inherit; font-weight: 500; background: #FFAF33; padding:0 40px; border: 2px solid #ffffff;}
.inqure_banner .btn:active {background: #795548;}

.comm_list{ margin: 0 0 60px}
.comm_list a{ width: 100%; text-decoration: none; display: inline-block; }
.comm_list a:hover,.comm_list a:active{ background-color: #f68100; border-radius: 20px; color: #ffffff;}
.comm_list em{ background: #F68100; color: #ffffff; border-radius: 17px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 4px 16px 8px; position: absolute; top: 12px; left: 12px; z-index:1; }
.comm_list li{ /*margin: 0 5px 8px;*/ display: inline-block; border-radius: 20px; border: 1px solid #B7B7B7; position: relative; }
.comm_list span{ font-size: 17px; display: block; padding: 15px 25px 25px; font-weight: 600; }
.comm_list img{ border-radius: 20px 20px 0 0;}

@media (max-width: 1280px) {

}

@media (max-width: 1024px) {
}






@media (max-width: 768px) {


}

@media (max-width: 500px) {
.main_section{ margin: 80px 20px 0}
.main_section01{ width: 100%;     padding: 30px 0 0;}
.header .header_main{ width:auto!important; flex-direction: column;}
.main_container{ margin: 0}
.login_article {width: 330px;}
.content img{ width: 100%}
.header {height: 100px;}

.sample_site{ margin: 0}
.sample_site ul {flex-direction: column;}
.sample_site .title {font-size: 24px;}
.sample_site li a {width: 100%;}

.main_section01 .cont{width:auto; }
.main_banner .tit{ font-size: 34px; line-height: 34px;}
.main_banner {padding: 2em 1.3em 0;}
.main_banner .title{ font-size: 18px;}
.main_banner .title:after{background-size: contain;height: 87px;}
.inqure_banner {    flex-direction: column;    gap: 20px;}
.inqure_banner span{ line-height: 28px; text-align: center;  font-size: 18px;}

.main_section01 .sub_title{ font-size: 18px;}
.comm_list li{ width: 100%; }
.comm_list span {font-size: 15px; padding: 10px 25px 15px;}
.comm_list img {width: 100%;border-radius: 20px 20px 0 0;}

.sub_banner{    padding: 2em 1.6em 2em; height: auto}
.sub_banner .tit{ font-size: 18px; line-height: 22px}
.sub_banner .cont {font-size: 16px; display: inline-block;line-height: 22px;}
.sub_banner .title:after {background: url("/resources/images/intro/img_bg_sub_m.png") no-repeat;background-size: auto;opacity: 0.3;    height: 320px;}

}



@media (max-width: 300px) {

}

.Thumbnail { position: relative; width:100%; height:100%; overflow: hidden; }
.Thumbnail img { position:absolute; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0; }
.Thumbnail img.portrait { width: 100%; height: auto; }
.Thumbnail img.landscape { width: auto; height: 100%; left: 50%; transform: translateX(-50%); max-width: none;}