@charset "utf-8";
/* CSS Document */
/* 디자인 주석
*{padding: 0; margin: 0}
input.radio {width:13px;height:13px; vertical-align:top; padding:0px; margin:0px;}
ul,li{padding:0; margin:0; list-style:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0} 
img,fieldset,iframe{border:0 none}
dl,ul,ol,menu,li{list-style:none}
img, input, button, select, textarea {vertical-align:middle;}
button {overflow:visible;margin:0;padding:0;border:none;background:0;vertical-align:middle;cursor:pointer;}
button::-moz-focus-inner,  
input::-moz-focus-inner{border:0;padding:0;}
#container{width: 100%; min-width: 320px;} 

*, *:before, *:after {box-sizing: inherit;} // 2026.03.25
*/
.taxAccounting body, td, input, textarea, div, th, p, a, address ul {
	font-family: unset !important;
    margin: 0;
    padding: 0;
    font-size: unset;
    color: unset;
    line-height: unset;
}


@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/*250930 추가*/
.sec001{background-color: #004fea}
.sec001 .fade-in {opacity: 0;  transform: translateY(20px);  transition: all 0.8s ease;}
.fade-in.visible { opacity: 1;  transform: translateY(0);}
.D-day{position: absolute; left: 64.5%; top: 17%; font-size:clamp(18px, 5.5vw, 52px); font-weight: 900; color: #fcff1d}
.sec002{background: #0024A2;
background: linear-gradient(0deg,rgba(0, 36, 162, 1) 0%, rgba(0, 79, 234, 1) 100%);}
.sec002-youtube{ width: 76.3%; max-width: 748px; margin-left: 11.9%; position: absolute; top: 41%; aspect-ratio: 16/9; }
.sec002-youtube iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }


/* 모달_유튜브 */
.modal_BG {display:flex; position:fixed; top:0;  right:0;  bottom:0;  left:0;  z-index:999; align-items:center;  justify-content:center;  background-color:rgba(0, 0, 0, 0.5);  box-sizing:border-box;}
.modal_BG .modal_inner {background-color: #000;  border-radius: 1rem;  box-sizing: border-box;  display: flex;  flex-direction: column;    overflow: hidden;  height:420px;   position: relative; width:700PX;}	
.modal_BG .modal_header {flex: 0 0 auto; box-sizing: border-box;  text-align: center; font-size: 1.2rem }	
.modal_BG .modal_header > img{width: 100%}
.modal_BG .modal_content { box-sizing: border-box; max-height:45rem; padding:.5rem;  overflow:hidden; height:420px; width: 700PX;   position: relative;}	
.btn-modal-close {height:5rem; width: 5rem; position: absolute;  right: -0.5rem;  top: -0.5rem;    z-index: 10;}
.modal_BG.youtube >  .modal_inner > .btn-modal-close:after, .modal_BG.youtube >  .modal_inner > .btn-modal-close:before {content: "";  height: 2px; border-bottom: 2px solid #FFF; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3px 0px; bottom: 0;  left: 0;  margin: auto;  position: absolute;   top: 0;  width:2rem;}	
.btn-modal-close:before {right: -2px; transform: rotate(45deg);}	
.btn-modal-close:after {right: 0;  transform: rotate(-45deg);}	
i.blind {clip: rect(0 0 0 0);  height: 1px;  margin: -1px;  overflow: hidden;  position: absolute;   width: 1px;}

/* 모달 유튜브 이외 컨텐츠 */
.modal_BG.content >  .modal_inner{ background-color: #FFF; width: 90%; max-width:600PX; height: max-content;  max-height: 600px;}
.modal_BG.content >  .modal_inner > .modal_content{padding: 0; width: 100%; height: 100%; max-width: 600px; max-height: 45rem;}
.modal_BG.content >  .modal_inner > .modal_content > img{width: 100%;}
.modal_BG.content >  .modal_inner > .btn-modal-close:after, .modal_BG.content >  .modal_inner > .btn-modal-close:before {content: "";  height: 2px; border-bottom: 2px solid #000; bottom: 0;  left: 0;  margin: auto;  position: absolute;   top: 0;  width:2rem;}	
@media (max-width: 1024px) {
	.modal_BG .modal_inner {height:360px; width:600PX;}	
	.modal_BG .modal_content {height:360px; width:600PX;  }
}
@media (max-width: 768px) {
	.modal_BG .modal_inner {height:260px; width:450PX;}	
	.modal_BG .modal_content {height:260px; width:450PX;}
}
@media (max-width: 480px) {
	.modal_BG .modal_inner {height:210px; width:350PX;}	
	.modal_BG .modal_content {height:210px; width:350PX;  }
}
@media (max-width: 350px) {
	.modal_BG .modal_inner {height:180px; width:300PX; min-width:300PX;}	
	.modal_BG .modal_content {height:180px; width:300PX; min-width:300PX; }
}


/* 하단 고정 배너 */
.Bar_container {z-index:998;    position: fixed;    left: 0;    bottom: 0;    width: 100%;  height:max-content; max-height: 100px; min-height:45px;  background: #FFF; box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 5px 1px;}
.Bar_inner{position:relative; width:100%; max-width:830px; min-width: 320px; height:auto; margin:0 auto;}
.Bar_inner{display:flex; flex-flow: nowrap; justify-content: center; align-items: center; width: 100%; column-gap: 1.5%;  margin:0 auto; max-width: 683px; padding: 1.5% 3%; box-sizing: border-box;}

.Bar_inner .Bar_txt{position: relative; width:35%; max-width:268px; }
.Bar_inner .Bar_txt > img{max-width:268px; width: 100%;}
.Bar_inner .ButtonWrap {max-width:395ㅔㅌ; width:65%;box-sizing: border-box; }
.Bar_inner .ButtonWrap a > img{width: 100%; max-width:395px;}
/* contents */
.sec01 {background-color: #0053f1;}
.sec02 {background-color: #000750;}
.sec03 {background: #EFFFFF;
background: linear-gradient(0deg, rgba(239, 255, 255, 1) 0%, rgba(214, 252, 255, 1) 100%);}
.sec04 {background-color: #c9f5ff;}
.sec05 {background: #00239F;
background: linear-gradient(0deg, rgba(0, 35, 159, 1) 0%, rgba(0, 21, 121, 1) 100%);}
.sec06 {background-color: #eef3f6;}
.sec07 {background-color: #101348;}
.sec08 {background-color: #b4ecff; }
.sec09 {background-color: #feffbb; }
.sec10 {background: #0053F1;
background: linear-gradient(0deg,rgba(0, 83, 241, 1) 0%, rgba(0, 52, 188, 1) 100%);}
.sec11{background-color: #FFF;}
.sec12 {background: #DDF8FE;
background: linear-gradient(124deg,rgba(221, 248, 254, 1) 0%, rgba(177, 230, 253, 1) 100%);}
.sec13{background-color: #101348}
.sec_mov{background: #FFF;/*background: #17A3FF;
background: linear-gradient(0deg,rgba(23, 163, 255, 1) 0%, rgba(23, 118, 247, 1) 100%);*/}
.sec_plan{background: #FFF; position: relative}
.sec_btn{background: #0053F1;}
.eventimg{position:relative; max-width:980px; height:auto; margin:0 auto;}
.eventimg img{ height:auto;width:100%; margin:0 auto; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}


.align-left {float: right;margin-left: 20px;}
.align-right {float: right;margin-left: 20px;}
.slide-in {opacity: 0;transition: all .5s;}
.align-left.slide-in {transform: translateY(30%) scale(0.95);}
.align-right.slide-in {transform: translateX(30%) scale(0.95);}.slide-in.active {opacity: 1;transform: translateX(0%) scale(1);}


/* topbg */

.eventtopbg1{ position:relative;width:100%; max-height:707px; min-height:232px; height:73vw; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.eventtopbg1{background: #004FEA;
background: linear-gradient(0deg,rgba(0, 79, 234, 1) 20%, rgba(0, 36, 162, 1) 100%);}
.topimg.mobile{ display: none}
.eventtopbg1 .topimg, .eventtopbg2 .topimg{position:relative; margin: auto; width: 100%; height: 100%; max-width:980px; box-sizing: border-box;}
.eventtopbg1 .topimg > .title{position: absolute; left: 50%; transform: translate(-50%, 0); width:100%; z-index: 2}
.eventtopbg1 .topimg > .title img, .eventtopbg2 .topimg > .title img{width: 100%; max-width:980px;}

.eventtopbg2{ position:relative;width:100%; max-height:520px; min-height:220px; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.eventtopbg2{background: #0053F4;
background: linear-gradient(0deg,rgba(0, 83, 244, 1) 20%, rgba(0, 79, 234, 1) 100%);}
.eventtopbg2 .topimg > .topbenefit {position: absolute; top:38%; width:100%; z-index: 2;}
.eventtopbg2 .topimg > .topbenefit > ul{display: flex; flex-flow: nowrap; column-gap:2.5%; align-items: center; justify-content: center; margin: 0 3.2%;}
.eventtopbg2 .topimg > .topbenefit > ul > li{width: 25%;}
.eventtopbg2 .topimg > .topbenefit > ul > li > img{width: 100%; max-width: 212px;}
.eventtopbg2 .topimg > .topbenefit > ul > li > img.border{border:8px solid #1776f7; border-radius:6px;}
.eventtopbg2 .topimg > .topbenefit > ul > li > img.border.active{border-color:#fff666;  box-shadow: 0 0px 6px rgba(0,0,0,0.6);}
.border {border: 3px solid transparent; transition: border 0.3s ease; border-radius: 10px;}
.topbenefit ul li img {transition: transform 0.3s ease, border 0.3s ease;}
.topbenefit ul li img.active {transform: scale(1.02);  border: 3px solid #ff4d4d;  z-index: 1;}


/* sec01 */
 
/* sec02 */
.sec02 > .eventimg{position: relative}
.sec02 .youtube{width: 76.1%; max-width: 632px; margin-left: 12%; position: absolute; padding: 53% 0 0 0;}
.sec02 .eventimg .btn_cart{position: absolute;padding-top:160%; width:66.6%; max-width: 553px; left: 50%; transform: translate(-50%, 0);}
.sec02 .eventimg .btn_course{position: absolute; width:16.4%; max-width:136px; left:62.9%; top:6.76%}
.sec02 .card{ top: 90%; position: absolute; right:3%;background: url("../images/arrow.png") no-repeat 100% 5px; background-size:19px 19px;}
.sec02 .card a{color: #666; text-decoration: none; font-size: 1.1rem;  letter-spacing: -0.05em; padding-right: 18px;}


/* sec03 */
.sec03 > .eventimg{position: relative}
.youtube_top{ width: 76.3%; max-width: 748px; margin-left: 11.9%; position: absolute; padding:72% 0 0 0;  height:33.2%; }


/* sec06 */
.sec06 img{width:100%;}

/* sec08 */
.sec08 .eventimg{text-align: center;}
.sec08 .eventimg > img{width:100%; max-width:940px; margin:0 auto;}

/*sec10*/
.sec10 .option_box{position: absolute; top:43%; left:5.5%; width:88.5%; display: flex;}
.sec10 .option_box .option{width:44%; max-width:410px; margin-left: 2.2%; background-color: transparent;}
.sec10 .option_box .option span.CKset{display: flex; flex-flow: nowrap;     justify-content:flex-start;     align-items: flex-start;}
.sec10 .option_box .option label{display:inline-block; cursor: pointer; padding-left: 1%;}
.sec10 .option_box .option label > img{ width:100%; max-width:326px; padding-top:0.5%;}
.sec10 .option_box .option input{width:30px; height:32px;-webkit-appearance: checkbox; cursor: pointer; margin-right:2.2%; vertical-align:top}
.sec10 .option_box .option.book{margin-left:7%}
.price_dday{position: absolute;font-size:clamp(13px, 2.4vw, 24px); letter-spacing: -.05em; text-align: center; background-color: #fff331; width:63%; box-sizing: border-box; padding:0.3%; top:68.1%; left: 19.1%; border: 1px dotted #f50050;}
.price_dday span.num{color:#f50050; font-weight: 700; letter-spacing: 0.05em;}
.price_box{position: absolute; width:63%;  top:71%; left: 19.1%}
.price_box ul{display: flex; width: 100%; justify-content: space-between; align-items: center;letter-spacing: -.05em; }
.price_box ul li.num1{color: #a3a3a3; font-size:clamp(16px, 4.4vw, 44px); width:37%;}
.price_box ul li.num2{color: #f50050; font-size:clamp(24px, 7.0vw, 72px); font-weight: 900; margin-left:5%;}

.btn_box{position: absolute; width: 65%; max-width:580px; left: 50%; transform: translate(-50%, 0); top: 83%;}
.btn_box > a > img{width: 100%;}

/*sec_btn*/
.sec_btn .btn_wrap{line-height: 0}
.sec_btn .eventimg a { width: 100%;   display: inline-block;  position: relative;}
.sec_btn .eventimg a img {position: absolute;  top: 0;  left: 0;  width: 100%;  height: auto;  opacity: 0;  animation: flashSwitch 1s infinite steps(1);}

/* 첫 번째 이미지 */
.sec_btn .eventimg a img:first-child {
  animation-delay: 0s;
  opacity: 1;
}

/* 두 번째 이미지 */
.sec_btn .eventimg a img:last-child {
  animation-delay: 0.5s; /* 🔹 0.5초마다 바뀜 */
}

@keyframes flashSwitch {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/*sec11*/
.sec11 .list-wrap{width: 100%; max-width:940px; margin:0 auto 10%;  }
.sec11 .list-wrap p.bottom_txt{padding: 0 2.5%; font-size: clamp(12px, 1.8vw, 16px); letter-spacing: -0.05rem}
.sec11 .list-wrap .card {background: #fff;  border-radius: 10px; width: 95%; margin:0 auto;  overflow: hidden;  margin-bottom: 20px;  border: 2px solid #000;}
.sec11 .list-wrap .card-header {background: #000;  color: #fff;  padding: 2.5% 3.8%;  display: flex;  justify-content: space-between;  align-items: center;}

.card-header .title {font-size: clamp(24px, 3.9vw, 38px); font-weight:700; font-family: 'Paperozi'; letter-spacing: -0.07rem}
.card-header .info {font-size: clamp(14px, 3.1vw, 22px); letter-spacing: -0.03rem}
.card-header .info span {color: #fbfa26;  font-weight: bold;  }

.card-body {display: flex;  justify-content: space-between;  align-items: center; padding: 2% 3% 2% 0%; width: 100%; box-sizing: border-box}
.left {display: flex; flex: 1; align-items: center;  gap: 15px;box-sizing: border-box;}
.left > img.book {width: 30%;  max-width: 170px; }
.left ul {list-style: none; width: 100%;}
.left li {position: relative;  text-align: left;   margin-bottom: 5px;}
.left li label{font-size: clamp(15px, 3.5vw, 23px); display: flex; align-items: center; font-weight:600; letter-spacing: -0.05rem; }
.right {width:38%; text-align: center;}
.price {font-size: clamp(20px, 4.5vw, 40px); letter-spacing: -0.05rem; font-weight:900;  color: #ff2d55;  margin-bottom: 10px;}
button {background: #ff2d55; width: 100%;  color: #fff;  border: none; font-weight:700; font-family: 'Paperozi';  border-radius: 6px; font-size: clamp(20px, 4vw, 32px);  cursor: pointer;  padding: 5.5% 1.5%; }
button:hover { background: #e0264a;}
.left li input {margin-right: 5px; accent-color: #2a7cff; /* 체크 색상 */}
.left li input[type="checkbox"] {width: 25px;  height: 25px;  accent-color: #2a7cff;}


/*sec12*/
.sec12 .btn_wrap{position: absolute;  width:90%; top:58%; left:50%; transform: translate(-50%, 0); display: flex; flex-flow: nowrap; justify-content: center; align-items: center; column-gap:1%;}
.sec12 .btn_wrap .btn_link img{max-width: 253px; width: 100%}
/*sec13*/
.sec13 .btn{position: absolute;  width: 22.4%; max-width:220px; top: 46.9%; right:3.5%; border: none; background: none !important; padding: unset !important;}
.sec13 .btn.link2{top:77%}

/*secmov*/
/* 리스트 */
.lecture-list {display: flex;  justify-content: center; gap: 2%;  margin-bottom: 15%;  flex-wrap: wrap;}
.lecture-item {max-width: 300px; width: 31%; display: flex; flex-flow: column; justify-content: center; align-items: center}
.thumb {position: relative;  overflow: hidden;}
.thumb img {width: 100%;  display: block;}
.tag {display: inline-block;  margin-top: 15px;  padding: 2% 8%;  border-radius:20px;  color: #fff; font-size: clamp(13px, 3vw, 24px);
  font-weight:500; letter-spacing: -0.05rem;}
.tag.purple {background: #8564a9;}
.tag.green {background: #75b915;}
ul.movthum{display: flex; flex-flow: nowrap; justify-content: center; align-items: center; column-gap: 2%; width:96%; margin:0 auto;}
ul.movthum li.movlink {position: relative; width: 50%; max-width: 465px; background: #FFF; border-radius: 10px;  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3px 0px;margin: 5% 0 13%;}
ul.movthum li.movlink > img{width: 100%;max-width: 465px;}
.linkthum{position: absolute; top:33%; width:90%; left: 50%; transform: translate(-50%, 0)}

/*sec_plan*/

.eventbg{position:absolute; max-width:980px; top:38.2%; left: 50%; transform: translate(-50%, 0); width: 100%;}
.eventimg img{ height:auto;width:100%; margin:0 auto; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
ul.plan-wrap{display: flex; flex-flow: nowrap; justify-content: center; align-items: center; column-gap: 2%; width:96%; margin:0 auto;}
ul.plan-wrap li:first-child {width: 31.3%;}
ul.plan-wrap li:nth-child(2){width: 33.5%;}
ul.plan-wrap li:last-child{width: 31.3%;}
ul.plan-wrap li img {width: 100%;}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- 후기 슬라이드----- */
.record_list{display: flex; column-gap:40px;}
.record_item {display: inline-block; max-width:398px; width: 33%; max-height:347px;}
.record_item > img{width: 100%;}
.swiper-slide {flex-shrink: 0;  width: 100%;height: 100%;   transition-property: transform}
.rolling_card_swiper .swiper-wrapper:hover .swiper-slide {/*animation-play-state: paused;*/}
.rolling_card_swiper .swiper-slide {width: auto;}
.rolling_card_swiper .swiper-slide:first-child {
		-webkit-animation: rolling_card_ltr 25s linear 1s infinite;
		animation: rolling_card_ltr 25s linear 1s infinite;
	}
.rolling_card_swiper .swiper-slide:first-child {
		animation-duration: 15s;
	}
 .rolling_card_swiper .swiper-slide:first-child {
		will-change: transform;
	}

        /* ----- animation ----- */
        @-webkit-keyframes rolling_card_ltr {
            100% {
                margin-left: calc(var(--rolling-card-width) * -1);
            }
        }

        @keyframes rolling_card_ltr {
            100% {
                margin-left: calc(var(--rolling-card-width) * -1);
            }
        }

        @-webkit-keyframes rolling_card_ltr {
            100% {
                transform: translateX(calc(var(--rolling-card-width) * -1));
            }
        }

        @keyframes rolling_card_ltr {
            100% {
                transform: translateX(calc(var(--rolling-card-width) * -1));
            }
        }

        :root {
            --rolling-card-width: 1195px;
        }

        /* ----- swiper-wrapper ----- */
        .swiper-wrapper {width: 100%; height: 100%;  display: flex; transition-property: transform;  box-sizing: content-box}
        .swiper-wrapper {transform: translate3d(0px, 0, 0) }
        .swiper-container {overflow: hidden;  list-style: none; padding: 0;}

	
/* 유의사항 */
.evt_foot{position:relative; width:100%; margin:0 auto; text-align:left; background-color:#515254; padding:60px 0;}
.evt_foot .f_tab{width:90%; max-width: 980px;  margin:0 auto; display: flex; column-gap: .3rem; justify-content:flex-start; align-items: center;  position:relative;}
.evt_foot .f_tab .selected{border-bottom: 1px solid #767778; width: 100%; color:#FFF; font-size: 1.3rem; font-weight: 600; padding: 10px; box-sizing: border-box;}
.evt_foot .footertext {position:relative;box-sizing: border-box; font-size:0.9rem; letter-spacing: -0.03rem; margin:0 auto; max-width:940px; width:90%; padding: 1rem 0 5rem; color:#e6e7ec;}
.evt_foot .footertext a{ color:#ffff00;}
.evt_foot .footertext strong{ font-size:.95rem; color: #e6e7ec;}
.evt_foot .footertext h2{font-size: 1.1rem; color: #B9DFF6}

#footer{padding-bottom: 90px;}

@media (max-width: 1024px) {
	.evt_foot .f_tab .selected{font-size: 1.2rem; padding: 10px 0px; }
	.evt_foot .footertext {font-size:0.8rem;}
	.evt_foot .footertext .tit, .evt_foot .footertext strong{font-size:0.85rem;}
	.evt_foot .f_tab .tab1 a, .evt_foot .f_tab .tab2 a{font-size:0.85rem;}
	.sec10 .eventimg .card{background-size:15px 15px; background-position: 98% 7px;}
	.sec10 .eventimg .card a{font-size:0.9rem;}
	.record_list{column-gap:30px;}
	.record_item {max-width:350px;  max-height:305px;}
	}

@media (max-width: 768px) {
	.evt_foot .f_tab .selected{font-size: 1.1rem; padding: 10px 0px; }
	.record_list{column-gap:25px;}
	.record_item {max-width:260px;  max-height:227px;}
	.eventtopbg2 .topimg > .topbenefit > ul > li > img.border{border:5px solid #1776f7; border-radius:5px;}
	.sec10 .option_box .option input{width:25px; height:20px;}
}
@media (max-width: 480px) {
	.left img{display: none}
	.left li{margin: 4%;}
	.left li input[type="checkbox"] {width: 20px;    height: 20px;}
	.sec10 .eventimg .card{background-size:15px 15px; background-position: 98% 7px;}
	.sec10 .eventimg .card a{font-size:0.8rem;}
	.sec11 .list-wrap .card-header {flex-flow: column; align-items: flex-start;}
	.record_list{column-gap:20px;}
	.record_item {max-width:220px;  max-height:192px;}
	.eventtopbg2{min-height:100px; padding-bottom:10%; }
	.eventtopbg2 .topimg > .topbenefit > ul {max-width: 400px; width:96%; column-gap: 0.5%; margin:0 auto;}
  	.eventtopbg2 .topimg > .topbenefit > ul > li {padding: 0.5%; width: 100%;  }
	.eventtopbg2 .topimg > .topbenefit > ul > li > img.border{border:4px solid #1776f7; border-radius:4px;}
	.eventtopbg2 .topimg > .topbenefit > ul > li > img.border.active{box-shadow: 0 0px 4px rgba(0,0,0,0.6);}
	ul.movthum{width: 80%; max-width: 315px;flex-flow: column; padding-bottom: 10%;}
	ul.movthum li.movlink {position: relative; width: 100%; margin-bottom:0;}
	.sec10 .option_box .option input{width:22px; height:15px;}
	.sec13 .btn{width: 28%; top:45%}
	.sec13 .btn.link2{top: 75%}
}
@media (max-width:350px) {
	.record_list{column-gap:20px;}
	.record_item {max-width:190px;  max-height:165px;}
	.eventtopbg2 .topimg > .topbenefit > ul > li > img.border{border:3px solid #1776f7; border-radius:3px;}
	.sec10 .option_box .option input{width:21px; height:15px;}

}

/* css추가부분 */
.MemberWrap{position:fixed;top:0;left:0;width:100%; height:100%;/*background-color:rgba(0,0,0,.4);*/  z-index:200;  }
.MemberWrap > .popup{width:70%; max-width: 450px; position:absolute; left: 50%; top:10%; transform:translate(-50%, 0);}
.MemberWrap > .popup .contentsbox {position:relative; min-height:300px; padding:20px 0px 5px 0px; min-width: 300px; box-sizing: border-box; background-color:#ffffff; box-shadow: 0 0 5px 1px rgba(72,85,91,0.6);} 
.MemberWrap > .popup .btn_close{position: absolute; top: 10px; right: 10px;}
.pt5.book {margin-top: -70px;}

/* 로그인 */
.section_login{padding:0 30px 20px 30px !important; min-height: unset !important; max-width: 480px !important; margin:0 auto !important;}
.MemberWrap > .popup .checkbox_group1{margin-top:10px;}
.MemberWrap > .popup strong.snstxt{display: block; margin-bottom:5px;  margin-top:25px; color: #999;  text-align: center;  position: relative; letter-spacing: -0.05em; word-break:keep-all; font-size: 15px;}

.MemberWrap > .popup .snsjoin{width: 100%; padding-bottom:40px;}

.MemberWrap > .popup .snsjoin > div{position: relative; display: block; width:49%; float: left; }
.MemberWrap > .popup .snsjoin > div > a{display:flex; justify-content: center; align-items: center; padding:10px 2px; width:calc(100% - 2px); box-sizing: border-box; border-radius: 5px; font-size: 14px;letter-spacing: -0.07em;}
.MemberWrap > .popup .snsjoin > div > a.naver{background-color: #06be34; margin-right:2px; color:#FFF;}
.MemberWrap > .popup .snsjoin > div > a.naver::before{background-image:url("/img/icon_naver2.png"); }
.MemberWrap > .popup .snsjoin > div > a.kakao{background-color: #ffe812; margin-left:2px;  color:#000;}
.MemberWrap > .popup .snsjoin > div > a.kakao::before{background-image:url("/img/icon_kakao2.png"); }
.MemberWrap > .popup .snsjoin > div > a > img{width:26px; vertical-align:middle;}
.MemberWrap > .popup .snsjoin > div > a.kakao::before, .MemberWrap > .popup .snsjoin > div > a.naver::before { content: ""; margin-right:0.15em; width:24px; height:22px;  background-repeat: no-repeat;  background-size: 100%;}

#popup_mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: none;
    background-color: rgba(72, 85, 91, 0.9);
    opacity: 0.8;
}











/* 2025.07.14 모달 로그인/회원가입 부분 추가 시작 */
/* 로그인 */
.section_login{padding:0 30px 20px 30px !important; min-height: unset !important; max-width: 480px !important; margin:0 auto !important;}
.MemberWrap > .popup .checkbox_group1{margin-top:10px;}
.MemberWrap > .popup strong.snstxt{display: block; margin-bottom:5px;  margin-top:25px; color: #999;  text-align: center;  position: relative; letter-spacing: -0.05em; word-break:keep-all; font-size: 15px;}

.MemberWrap > .popup .snsjoin{width: 100%; padding-bottom:40px;}

.MemberWrap > .popup .snsjoin > div{position: relative; display: block; width:49%; float: left; }
.MemberWrap > .popup .snsjoin > div > a{display:flex; justify-content: center; align-items: center; padding:10px 2px; width:calc(100% - 2px); box-sizing: border-box; border-radius: 5px; font-size: 14px;letter-spacing: -0.07em;}
.MemberWrap > .popup .snsjoin > div > a.naver{background-color: #06be34; margin-right:2px; color:#FFF;}
.MemberWrap > .popup .snsjoin > div > a.naver::before{background-image:url("/img/icon_naver2.png"); }
.MemberWrap > .popup .snsjoin > div > a.kakao{background-color: #ffe812; margin-left:2px;  color:#000;}
.MemberWrap > .popup .snsjoin > div > a.kakao::before{background-image:url("/img/icon_kakao2.png"); }
.MemberWrap > .popup .snsjoin > div > a > img{width:26px; vertical-align:middle;}
.MemberWrap > .popup .snsjoin > div > a.kakao::before, .MemberWrap > .popup .snsjoin > div > a.naver::before { content: ""; margin-right:0.15em; width:24px; height:22px;  background-repeat: no-repeat;  background-size: 100%;}



/* 회원가입 */
.section_join, .section_joinOK{padding:0 20px 30px 20px; margin:0 auto;}
.section_join > .subscript p.main, .section_joinOK > .subscript p.main  {font-size: 30px; font-weight: 600; color: #333; line-height: 1.2; text-align: center; margin-bottom: 15px;}
.section_join > .subscript p.sub, .section_joinOK > .subscript p.sub{font-size:13px; color: #888; letter-spacing: -0.05em; padding-bottom:3px;}
.section_joinOK > .subscript p.sub{text-align: center;}
.section_joinOK > .subscript p.sub > span.red{ color: #cc4a4a; font-weight: bold}
.section_join > .customer {width:100%; margin: 0 auto;  border-top: 1px solid #555;padding-top:5px;}
/* 2025.07.15 주석 
.section_join > .customer .form{width: 90%; margin: 0 auto; padding-bottom: 10px;  height:35px; }
.section_join > .customer .form .label { display: block;  float: left; width:30%; min-width: 100px; letter-spacing: -0.05em; font-size:16px;  font-weight: bold;   color: #0a0a0a; padding-top: 5px;    line-height: 1.6;}
.section_join > .customer .form input[type=text], .section_join > .customer .form input[type=password]{display: block; float: left; width:70%; height:35px; box-sizing: border-box;   padding: 10px; border: 1px solid #e8e8e8; background: #fff;     color: #666;    font-size: 13px;    line-height: 1.5;    outline: none;} */
.section_join > .customer .btn_red, .section_joinOK .btn_red{padding:11px 2px 12px;border-radius: 5px;font-size:15px;background:#cc4a4a; color: #FFF; border: none}
.section_join > .customer .btn_area a, .section_joinOK > .btn_area a{text-align: center; display: block; color: #888; text-decoration: underline; font-size: 15px; width: 100%}
.form_agree{ padding:5px 0px 5px 15px; font-size:14px; position: relative;}
.form_agree .rull_view{position: absolute; top: 0; right: 0;}
.form_agree .rull_view > a::before{content: " "; display: block; width:16px; height:20px; background: url("/img/btn_arrow.png") no-repeat 0 8px;}
.form_agree .rull_view > a > label{ font: 0px; display: none}
.rull_box{width: 100%; background-color: #eee; height:100px; overflow-x: scroll; font-size: 12px; margin-top:10px; padding: 15px; box-sizing: border-box}
.checkbox_all{ width: 100%; box-sizing: border-box;  border-top: 1px solid #555; margin-top:5px; padding:15px;  color: #0a0a0a; font-size:16px;  font-weight: bold;  }
.checkbox_all span{font-size:16px; }
.checkbox_all span.checkbox_agree{float: right;  color: #0093D4;}
.section_joinOK > .join_img{width: 100%; text-align: center; margin:0 auto}
.section_joinOK > .join_img > img{width: 60%; padding: 5%;}


/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 
@media all and (min-width:1024px) and (max-width:1279px) { 
	/** 로그인 */
	.section_login .btn_area .btn_blue, .section_login .btn_area .btn_red {width: 48%;}
	.MemberWrap > .popup {width: unset; position: fixed;}
	.MemberWrap > .popup strong.snstxt {margin-top: unset; font-size: 10px;}
	.section_login .subscript {padding-top: unset; padding-bottom: unset;}
	.MemberWrap {top: 12%;}
	.Jinp_box.USER_ID {margin-top: unset !important;}

	/** 회원가입 */
	/* 2025.07.15 주석 
	.section_join > .customer .form input[type=text], .section_join > .customer .form input[type=password] {
		width: 66%;
		font-size: 9.6px;
	} */
	.section_join > .customer .form .label {
		font-size: 12px;
		width: 33%;
		min-width: 86px;
	}
	.section_join > .subscript p.sub, .section_joinOK > .subscript p.sub {
		font-size: 12px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		font-size: 25px;
	}
	.form_agree label {
		font-size: 13px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		margin-bottom: unset;
	}
	.section_join > .customer .form {
		width: 100%;
	}
	.rull_box p {font-size: 10px;}
	.form_agree label {font-size: 11px;}
	.rull_box .tg th, .rull_box .tg td {font-size: 10px !important;}
	form .join_comment div{font-size: 10px; text-align: right; color: red;}
	.section_join, .section_joinOK {padding: 0 20px 15px 20px;}

	.pt5.book {margin-top: -40px;}
}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) { 
	/** 로그인 */
	.section_login .btn_area .btn_blue, .section_login .btn_area .btn_red {width: 48%;}
	.MemberWrap > .popup {width: unset; position: fixed;}
	.MemberWrap > .popup strong.snstxt {margin-top: unset; font-size: 10px;}
	.section_login .subscript {padding-top: unset; padding-bottom: unset;}
	.MemberWrap {top: 12%;}
	.Jinp_box.USER_ID {margin-top: unset !important;}

	/** 회원가입 */
	/* 2025.07.15 주석 
	.section_join > .customer .form input[type=text], .section_join > .customer .form input[type=password] {
		width: 66%;
		font-size: 9.6px;
	} */
	.section_join > .customer .form .label {
		font-size: 12px;
		width: 33%;
		min-width: 86px;
	}
	.section_join > .subscript p.sub, .section_joinOK > .subscript p.sub {
		font-size: 12px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		font-size: 25px;
	}
	.form_agree label {
		font-size: 13px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		margin-bottom: unset;
	}
	.section_join > .customer .form {
		width: 100%;
	}
	.rull_box p {font-size: 10px;}
	.form_agree label {font-size: 11px;}
	.rull_box .tg th, .rull_box .tg td {font-size: 10px !important;}
	form .join_comment div{font-size: 10px; text-align: right; color: red;}
	.section_join, .section_joinOK {padding: 0 20px 15px 20px;}

	.pt5.book {margin-top: -40px;}
}

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767px) {
	/** 로그인 */
	.section_login .btn_area .btn_blue, .section_login .btn_area .btn_red {width: 48%;}
	.MemberWrap > .popup {width: unset; position: fixed;}
	.MemberWrap > .popup strong.snstxt {margin-top: unset; font-size: 10px;}
	.section_login .subscript {padding-top: unset; padding-bottom: unset;}
	.MemberWrap {top: 12%;}
	.Jinp_box.USER_ID {margin-top: unset !important;}

	/** 회원가입 */
	/* 2025.07.15 주석 
	.section_join > .customer .form input[type=text], .section_join > .customer .form input[type=password] {
		width: 66%;
		font-size: 9.6px;
	} */
	.section_join > .customer .form .label {
		font-size: 12px;
		width: 33%;
		min-width: 86px;
	}
	.section_join > .subscript p.sub, .section_joinOK > .subscript p.sub {
		font-size: 12px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		font-size: 25px;
	}
	.form_agree label {
		font-size: 13px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		margin-bottom: unset;
	}
	.section_join > .customer .form {
		width: 100%;
	}
	.rull_box p {font-size: 10px;}
	.form_agree label {font-size: 11px;}
	.rull_box .tg th, .rull_box .tg td {font-size: 10px !important;}
	form .join_comment div{font-size: 10px; text-align: right; color: red;}
	.section_join, .section_joinOK {padding: 0 20px 15px 20px;}

	.pt5.book {margin-top: -40px;}
}

/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) {
	/** 로그인 */
	.section_login .btn_area .btn_blue, .section_login .btn_area .btn_red {width: 48%;}
	.MemberWrap > .popup {width: unset; position: fixed;}
	.MemberWrap > .popup strong.snstxt {margin-top: unset; font-size: 10px;}
	.section_login .subscript {padding-top: unset; padding-bottom: unset;}
	.MemberWrap {top: 12%;}
	.Jinp_box.USER_ID {margin-top: unset !important;}

	/** 회원가입 */
	/* 2025.07.15 주석 
	.section_join > .customer .form input[type=text], .section_join > .customer .form input[type=password] {
		width: 66%;
		font-size: 9.6px;
	} */
	.section_join > .customer .form .label {
		font-size: 12px;
		width: 33%;
		min-width: 86px;
	}
	.section_join > .subscript p.sub, .section_joinOK > .subscript p.sub {
		font-size: 12px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		font-size: 25px;
	}
	.form_agree label {
		font-size: 13px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		margin-bottom: unset;
	}
	.section_join > .customer .form {
		width: 100%;
	}
	.rull_box p {font-size: 10px;}
	.form_agree label {font-size: 11px;}
	.rull_box .tg th, .rull_box .tg td {font-size: 10px !important;}
	form .join_comment div{font-size: 10px; text-align: right; color: red;}
	.section_join, .section_joinOK {padding: 0 20px 15px 20px;}

	.pt5.book {margin-top: -40px;}
}

@media (max-width: 450px){
	/** 로그인 */
	.section_login .btn_area .btn_blue, .section_login .btn_area .btn_red {width: 48%;}
	.MemberWrap > .popup {width: unset; position: fixed;}
	.MemberWrap > .popup strong.snstxt {margin-top: unset; font-size: 10px;}
	.section_login .subscript {padding-top: unset; padding-bottom: unset;}
	.MemberWrap {top: 12%;}
	.Jinp_box.USER_ID {margin-top: unset !important;}

	/** 회원가입 */
	/* 2025.07.15 주석 
	.section_join > .customer .form input[type=text], .section_join > .customer .form input[type=password] {
		width: 66%;
		font-size: 9.6px;
	} */
	.section_join > .customer .form .label {
		font-size: 12px;
		width: 33%;
		min-width: 86px;
	}
	.section_join > .subscript p.sub, .section_joinOK > .subscript p.sub {
		font-size: 12px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		font-size: 25px;
	}
	.form_agree label {
		font-size: 13px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		margin-bottom: unset;
	}
	.section_join > .customer .form {
		width: 100%;
	}
	.rull_box p {font-size: 10px;}
	.form_agree label {font-size: 11px;}
	.rull_box .tg th, .rull_box .tg td {font-size: 10px !important;}
	form .join_comment div{font-size: 10px; text-align: right; color: red;}
	.section_join, .section_joinOK {padding: 0 20px 15px 20px;}

	.pt5.book {margin-top: -40px;}
}

@media (max-width: 390px){
	/** 로그인 */
	.section_login .btn_area .btn_blue, .section_login .btn_area .btn_red {width: 48%;}
	.MemberWrap > .popup {width: unset; position: fixed;}
	.MemberWrap > .popup strong.snstxt {margin-top: unset; font-size: 10px;}
	.section_login .subscript {padding-top: unset; padding-bottom: unset;}
	.MemberWrap {top: 12%; z-index: 9999;}
	.Jinp_box.USER_ID {margin-top: unset !important;}

	/** 회원가입 */
	/* 2025.07.15 주석 
	.section_join > .customer .form input[type=text], .section_join > .customer .form input[type=password] {
		width: 66%;
		font-size: 9.6px;
	} */
	.section_join > .customer .form .label {
		font-size: 12px;
		width: 33%;
		min-width: 86px;
	}
	.section_join > .subscript p.sub, .section_joinOK > .subscript p.sub {
		font-size: 12px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		font-size: 25px;
	}
	.form_agree label {
		font-size: 13px;
	}
	.section_join > .subscript p.main, .section_joinOK > .subscript p.main {
		margin-bottom: unset;
	}
	.section_join > .customer .form {
		width: 100%;
	}
	.rull_box p {font-size: 10px;}
	.form_agree label {font-size: 11px;}
	.rull_box .tg th, .rull_box .tg td {font-size: 10px !important;}
	form .join_comment div{font-size: 10px; text-align: right; color: red;}
	.section_join, .section_joinOK {padding: 0 20px 15px 20px;}

	.pt5.book {margin-top: -40px;}
}
/* 2025.07.14 모달 로그인/회원가입 부분 추가 끝 */