/*@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');*/
/*========== Reset Element ==========*/
*{margin:0;padding:0;box-sizing: border-box;border:none;outline:none;list-style:none;}
*[disabled]{cursor:not-allowed !important;opacity:0.5;pointer-events: none;}
img,picture,video,canvas,svg{display:block;max-width:100%;user-select:none;}
html{scroll-behavior:smooth;font-family: 'Nanum Gothic', sans-serif;font-size:62.5%;}
body{font-size:1.6rem;}
a{text-decoration: none;color:inherit;-webkit-tap-highlight-color: transparent;}button{outline:none;border: none;cursor:pointer;-webkit-tap-highlight-color: transparent;}input,textarea{font-size:1em;min-width:0;}
label{-webkit-tap-highlight-color: transparent;}
h1{font-size:3.2rem;}h2{font-size:2.4rem;}h3{font-size:1.872rem;}h4{font-size:1.6rem;}h5{font-size:1.328rem;}h6{font-size:1.072rem;}
:root{
	/*주황색톤*/
	--primary: #ffa415;--primary-light:#ffe387;--primary-dark-1:#f68500;--primary-dark-2:#de5400;
	/*빨간색톤*/
	--second: #e30d0d;--second-light: #f5d3d6;--second-dark: #b80000;
	/*파란색톤*/
	--accent: #4aace5;--accent-light:#52b4ff;--accent-dark:#3985b2;
	/*회색톤*/
	--default:#e5e5e5;--default-light:#cfcfcf; /*border*/
	--default-dark:#bfbfbf;--default-dark-very:#888;--muted:#c5c5c5; /*Text*/
	--bg:#f2f1f6;
	/*기본톤*/
	--white:white;--black:black;--red:#b6050f;
	--blue:#0454db;--green:#1abc9c;--yellow:#f7e953;
	/*간격*/
	--radius: .8rem;
	--gap:1.6rem;--gap-xsm:calc(var(--gap) * 0.25);--gap-sm:calc(var(--gap) * 0.5);--gap-lg:calc(var(--gap) * 2);--gap-xlg:calc(var(--gap) * 4);
	--tran: all 0.25s ease;--tran-slow: all 0.5s ease;
	--size-max: 100%;--size-min: 340px;--size-width:95%;--size-qust-max:1100px;
}
/*============ Utils ============*/
.none{display: none !important;}.hide{visibility:hidden !important}.overflow{overflow:hidden !important;}.iblock{display:inline-block !important;}
.flex{display: flex !important;}.full{flex:1 !important;}.grid{display: grid !important;}.bo{border:1px solid cyan !important}
.gap{gap:var(--gap) !important;}.gap-sm{gap:var(--gap-sm) !important;}.gap-lg{gap:var(--gap-lg) !important;}.gap-xlg{gap:var(--gap-xlg) !important;}
.flex.center{justify-content: center;align-items: center;}
.b10{flex-basis:10%;}.b20{flex-basis:20%;}.b30{flex-basis:30%;}.b40{flex-basis:40%;}.b50{flex-basis:50%;}.b60{flex-basis:60%;}.b70{flex-basis:70%;}.b80{flex-basis:80%;}.b90{flex-basis:90%;}.b100{flex-basis:100%;}
.p{padding:var(--gap) !important;}.p-xsm{padding:var(--gap-xsm) !important;}.p-sm{padding:var(--gap-sm) !important;}.p-lg{padding:var(--gap-lg) !important;}.p-xlg{padding:var(--gap-xlg) !important;}
.m{margin: var(--gap);}.m-sm{margin: var(--gap-sm);}.m-auto{margin: auto;}
.c{text-align: center;}.nowrap{white-space:nowrap !important;}
.w100{width: 100% !important;}.w90{width: 90% !important;}.w80{width: 80% !important;}.w70{width: 70% !important;}.w60{width: 60% !important;}.w50{width: 50% !important;}
.mw100{max-width: var(--size-qust-max);}.mw90{max-width: calc(var(--size-qust-max) * 0.9);}.mw80{max-width: calc(var(--size-qust-max) * 0.8)}.mw70{max-width: calc(var(--size-qust-max) * 0.7)}.mw60{max-width: calc(var(--size-qust-max) * 0.6)}.mw50{max-width: calc(var(--size-qust-max) * 0.5)}
.h100{height: 100% !important;}.h50{height: 50% !important;}
.primary{color:var(--primary) !important;}.second{color:var(--second) !important;}.accent{color:var(--accent) !important;}.default{color: var(--default);}
.bg-primary{background-color:var(--primary) !important;}.bg-second{background-color:var(--second) !important;}.bg-accent{background-color:var(--accent) !important;}.bg-default{background-color: var(--default) !important;}
.bo-primary{border-color:var(--primary) !important;}.bo-second{border-color:var(--second) !important;}.bo-accent{border-color:var(--accent) !important;}.bo-default{border-color:var(--accent-light) ;}
.bg{background-color:var(--bg);}
/*============ Dialog(Model) ============*/
dialog{margin:0;width: 90%; max-width: 400px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 9999;background-color: #fff;}
dialog::backdrop{background-color: rgba(0, 0, 0, 0.85);backdrop-filter: blur(5px);}
dialog main{padding:var(--gap);min-height: 100px;display: flex;justify-content: center;align-items: center;text-align: center;line-height: 1.5em;}
dialog footer{display: flex;text-align: center;}
dialog footer button{flex: 1;padding: var(--gap);background-color: var(--primary);color: var(--white);font-size: 1.5rem;transition: var(--tran);font-weight: bold;white-space:nowrap;}
dialog footer button:hover{background: var(--primary-dark-1);}
/*============ Character(Overlay) ============*/
._character{position: fixed;z-index: 9999;width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;}
/* ._character img{object-fit: cover;height: 50%;max-height: 323px;} */
._character img{object-fit: cover;height:clamp(16rem,calc(20vw + 20vh + 0.5vmin),32rem);}
/*============ Layout > Slide Menu ==============*/
.btn-side{height: 6rem;width: 4rem;display: flex;justify-content: center;align-items: center; position: absolute;top: 9rem;right: -4rem;z-index: 999999;background-color: var(--primary);border-top-right-radius: 50%;border-bottom-right-radius: 50%;}
.btn-side i{font-size: 2em;font-style: normal;color: var(--white);display: block;padding: 0;line-height: 2.5em;transition:all .15s ease-out;transition-delay: .15s;}
.btn-side.open i{transform: rotate(180deg);}
.side-nav{width:30rem;}
.side-nav .wrapper{display: grid;height: 100%;grid-template-rows: minmax(15rem, auto) 1fr minmax(15rem,auto);}
.side-nav .wrapper > * {padding: var(--gap);}
.side-nav .wrapper h5{color: var(--default-dark-very);margin-bottom: var(--gap);}
.side-nav .wrapper .top{background-color: var(--primary);display: flex;flex-direction: column;}
.side-nav .wrapper .top h5{color: var(--white);}.side-nav .wrapper .top h3{color: var(--white);}
.side-nav .wrapper .top .warning{display: flex;align-items: center;gap: var(--gap-xsm);color: var(--primary-light);word-break: keep-all;}
.side-nav .wrapper .middle{display: flex;flex-direction: column;}
.side-nav .wrapper .bottom{background-color: var(--default);}
.side-nav .wrapper .links{display: grid;gap: var(--gap-sm);}
.side-nav .wrapper .links li{display: flex;gap: var(--gap-sm);align-items: center;padding: var(--gap-sm);cursor:pointer;}
.side-nav .wrapper .links li:hover{background-color: var(--default-light);}
.side-nav .wrapper .links img{width: 2.4rem;height: 2.4rem;}

.switch {display: flex;justify-content: space-between;align-items: center;}
.switch input{display: none;}
.switch label{padding: var(--gap-sm);cursor: pointer;font-weight: bold;}
.switch .lever{display: inline-flex;background-color: var(--default);width: 8rem;height: 3.5rem;border-radius: 3.5rem;position: relative;}
.switch .lever::before{content: '';display: block;position: absolute;top: 0;left: 0;width: 3.5rem;height: 3.5rem;background-color: var(--white);border-radius: 50%;transition:var(--tran);transform: scale(.9);z-index: 1;}
.switch input:checked + .lever{background-color: var(--primary);}
.switch input:checked + .lever::before{left: calc(100% - 3.5rem);}
.switch input:checked + .lever::after{content: 'ON';left: 1rem;right: auto;}
.switch .lever::after{content: 'OFF';display: block;position: absolute;top: 0;right: 1rem;line-height: 3.5rem;color: var(--white);}

.side-nav .app-setup{display: none;gap: var(--gap-sm);margin-top: auto;}
.side-nav .app-setup span{display: flex;flex-direction: column;justify-content: space-evenly;}
.side-nav .app-setup span small{color: var(--default-dark);}
.side-nav .app-setup img{width: 5rem;}
.side-nav .app-setup.active{display: flex;}

/*============ Layout + Common ============*/
body{background-color: var(--bg);}
section{background-color: var(--white);padding: var(--gap);}

.container{width:clamp(var(--size-min),100%,var(--size-max));margin: 0 auto;display: flex;flex-direction: column;min-height:100vh; min-height:calc(var(--vh, 1vh) * 100);}

._btn{background-color: var(--primary);color:var(--white);display: inline-block;padding: var(--gap) var(--gap-lg);font-size: 2rem;transition: var(--tran);font-weight: bold;white-space:nowrap;position: relative;}
._btn.lg{width: 20rem;}
._btn.md{width: 15rem;}
._btn:hover, ._btn.active{background: var(--primary-dark-1);}
._btn[disabled]{background-color: var(--default-dark);}
._btn.pass{background-color: var(--accent);}._btn.pass:hover, ._btn.pass.active{background-color:var(--accent-dark) ;}

._btn-round{width: 13rem;height: 13rem;background-color: var(--accent);color: var(--white); display:inline-flex;justify-content: center;align-items: center; border-radius: 50%;font-size: 7rem;line-height: 13rem; transition: var(--tran);}
._btn.play{background-color: var(--accent);color: var(--white);font-size: 3rem;padding: 0 var(--gap-xlg);line-height: 6rem;}
._btn-round:hover, ._btn-round.active, ._btn.play:hover, ._btn.play.active{background-color: var(--accent-dark);}

.btn-overlay ._btn-round{width: clamp(7rem,calc(7vw + 7vh + 0.5vmin),13rem);height:clamp(7rem,calc(7vw + 7vh + 0.5vmin),13rem);	font-size: clamp(3rem, calc(3.5vw + 3.5vh + 0.5vmin), 7rem);}

._btn.radius{border-radius: 3rem;}
._btn.outline{outline: 2px solid var(--accent);background-color: transparent;color: var(--accent);}
._btn.outline[disabled]{outline-color: var(--default-light);color: var(--default-dark);}
._btn.outline:hover, ._btn.outline.active{outline-color: var(--accent-dark) !important;color: var(--accent-dark);}

._btn-arrow{background-color: var(--white);display:flex;justify-content: center;align-items: center; width: 8.5rem;height: 8.5rem;border-radius: 50%;box-shadow: 0 .2rem .3rem rgba(0,0,0,0.15);font-size: 4rem;font-weight: bold; color: var(--primary);transition: var(--tran);}
._btn-arrow:hover, ._btn-arrow.active{color: var(--white);background-color: var(--primary);}

._btn-group {display: inline-flex;background-color: var(--white);margin: auto;border: 1px solid var(--primary);border-right: none;}
._btn-group a{padding: var(--gap-sm) var(--gap);background-color:var(--white);color: var(--primary);border-right: 1px solid var(--primary);font-weight: bold;transition:var(--tran);}
._btn-group a:visited{background-color:var(--white);color:var(--primary);}
._btn-group a:hover, ._btn-group a.active{background-color: var(--primary);color: var(--white);}

dl._detail{display: flex;align-items: center;gap: var(--gap);}dl._detail dt{color: var(--primary);}dl._detail dd{color: var(--muted);}

._timer{background-color: var(--primary-dark-2); display: inline-block;margin-left: var(--gap-sm);font-size: 1.5rem;width: 8rem;height: 2.5rem;text-align: right;display: flex;align-items: center;justify-content: space-between;border-radius:.5rem;padding: 0 var(--gap-xsm);}
._timer i{background: url(../images/icon_timer.png) var(--primary-dark-2) no-repeat;display: block;width: 1.8rem;height: 1.8rem;}

._menu{width:100%;display:flex;background-color: var(--primary);color:var(--primary-light);}
._menu a{flex:1;display: block;padding: var(--gap);text-align: center;transition: var(--tran);display: flex;justify-content: center;align-items: center;font-weight: bold;
	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	/* font-size: 2rem; */
	font-size: clamp(1.4rem, calc(1vw + 1vh + 0.5vmin), 2rem);
}
._menu a:hover, ._menu a.active{background-color: var(--primary-dark-1);color: var(--white);}
._menu.pwa::before{content: '⭠';display: inline-flex;justify-content: center;align-items: center;padding: 0 var(--gap);font-weight: bold;cursor: pointer;font-size: clamp(2.4rem, calc(1vw + 1vh + 0.5vmin), 3rem);}

._title{background-color: var(--white);text-align: center;position: relative; box-shadow:0 .125rem .25rem rgba(0,0,0,.075);}
._title h2{font-size: clamp(1.872rem, calc(1vw + 1vh + 0.5vmin), 2.4rem);}
._title h3{font-size: clamp(1.6rem, calc(1vw + 1vh + 0.5vmin), 1.872rem);}
._title aside{position: absolute;right: var(--gap);top: 50%;transform: translateY(-50%);}

._main{flex:1; display: flex;flex-direction: column;gap: var(--gap);padding: var(--gap);word-break: keep-all;}

._footer{width: var(--size-width);padding: var(--gap);margin: auto;}

/*============ Main ============*/
._book_info{width: var(--size-width);margin: 0 auto;padding: var(--gap);display: flex;align-items: center;gap: var(--gap-lg);}._book_info .info{display:grid;gap:var(--gap);margin-left: var(--gap);}
._book_img{display: inline-block;width:12rem;object-fit: cover;box-shadow:0 .5rem 1rem rgba(0,0,0,.3);}
._book_list{width: var(--size-width);margin: 0 auto;padding: var(--gap);position: relative;flex: 1;	display: flex;align-items: center;gap: var(--gap-lg);}

._book_list .list{flex: 1;margin-bottom: var(--gap-lg);display: flex;flex-wrap: wrap;justify-content: space-evenly;}
._book_list .book{display: inline-flex;flex-direction: column;gap: var(--gap-sm);margin: var(--gap) var(--gap-sm);}
._book_list .book > img{display: inline-block;width: 11rem;height:14rem;object-fit: cover;cursor: pointer;margin-bottom: var(--gap-sm);}
._book_list .book > img:hover, .book.active > img{outline: .6rem solid var(--white);border-radius: 2px;box-shadow:0 1rem 3rem rgba(0,0,0,.175);}
._book_list .book > i{display: block;font-style: normal;text-align: center; padding: var(--gap-xsm) var(--gap-sm);background-color: var(--default-light);color: var(--white);border-radius: var(--radius);}
._book_list .book.Y > i{background-color: var(--accent);}
._book_list .book.I > i{background-color: var(--primary);}	
._book_list .pager{position: absolute;bottom: 0;left: 50%;padding: var(--gap);transform: translateX(-50%);display: flex;margin-top: var(--gap);}
._book_list .pager a{display: inline-block;padding: var(--gap-sm);font-size: 2rem;color: var(--default-dark);transition: var(--tran);}
._book_list .pager a:hover, .pager a.active{color: var(--accent);}

/*============ Detail ============*/
._chaci_list{width: var(--size-width);margin: 0 auto;display: flex;align-items: center;gap: var(--gap-xlg);height: 100%;}
._chaci_list .list{flex: 1;display: flex; flex-wrap: wrap; gap: var(--gap-xlg);padding: var(--gap); }
._chaci_list .list .chaci{min-width: 6rem;text-align: center;line-height: 2rem;}
._chaci_list .list .chaci a{width: 6rem;height: 6rem;display: inline-block; background-color: var(--default-dark);border-radius: 50%;background-position: center center;background-image: url(../images/icon_cha_a.png);background-repeat: no-repeat;transition: var(--tran);background-size: 80%;}
._chaci_list .list .chaci a:hover, ._chaci_list .list .chaci a.active{background-color:#7f7f7f;}
._chaci_list .list .chaci.I a:hover, ._chaci_list .list .chaci.I a.active{background-color:#cc8310;}
._chaci_list .list .chaci.Y a:hover, ._chaci_list .list .chaci.Y a.active{background-color:#3985b2;}
._chaci_list .list .chaci h5{visibility: hidden;}
._chaci_list .list .chaci.I a{background-color: var(--primary);background-image: url(../images/icon_cha_b.png);}
._chaci_list .list .chaci.I h5{visibility: visible;color: var(--primary);}
._chaci_list .list .chaci.Y a{background-color: var(--accent);background-image: url(../images/icon_cha_c.png);}
._chaci_list .list .chaci.Y h5{visibility: visible;color: var(--accent);}
/*============ swiper Sytle============*/
swiper-container {width: 100%;}
swiper-slide {text-align: center;background: #fff;display: flex;justify-content: center;align-items: center;}
swiper-slide img {display: block;object-fit: cover;}

/*============ Study > Element ※향후 버전업 참고 스타일============*/
/* ._main.std{overflow-y: auto;} */ /* 부모 객체(ex: main)는 flex로 적용*/
._qust{flex:1;width: var(--size-width);max-width: var(--size-qust-max); display: flex;flex-direction: column;justify-content: center;align-items: center; gap: var(--gap);margin: 0 auto;}
._box{padding: var(--gap);background-color: var(--white);border: 1px solid var(--default-light);margin:auto;}

._input{width:100%;display: inline-block; font-size: 2rem;padding: var(--gap);outline: 1px solid var(--default-light);margin: var(--gap) auto;position: relative;}
._input.x{outline-color: var(--second);background-color: var(--second-light);}._input.o{outline-color: var(--accent-dark);background-color: var(--accent-light);}
._input:not([readonly]):focus, ._input.active{outline: 2px solid var(--primary);}
._input.line{outline: none;border-bottom: 2px solid var(--default-light);background-color: transparent;}
._input.line:focus, ._input.line.active{border-color: var(--primary);}

._textarea{width:100%;display: inline-block; font-size: 2rem;padding: var(--gap);outline: 1px solid var(--default-light);}
._textarea:focus, ._textarea.active{outline: 2px solid var(--primary);}

._select{width:100%;display: inline-block; font-size: 2rem;padding: var(--gap);outline: 1px solid var(--default-light);	-webkit-appearance: none;-moz-appearance: none;	appearance: none;background: url('../images/icon_combo_arrow.png') no-repeat 98% 50% #fff;background-size: 2rem; }
._select:focus, ._select.active{outline: 2px solid var(--primary);}

._checkbox input{display: none;}
._checkbox label{display: inline-block;width: 3rem;height: 3rem;background: url(../images/square.png) no-repeat center;background-size: cover;cursor: pointer;}
._checkbox input:checked + label{background-image: url(../images/square_check.png);}

._progress { appearance: none;width: 100%;display: inline-block; margin: auto;}
._progress::-webkit-progress-bar {background:var(--white);border-radius:1rem;box-shadow: inset 3px 3px 10px var(--white);}
._progress::-webkit-progress-value {border-radius:1rem;background: var(--primary-dark-2);}

#_camera{width: 100%; max-height: 25vh;object-fit: cover;}
video, ._video, ._audio{width: 100%;margin: auto;height: auto;}
._video .video-wapper{position: relative;}
._video .video-wapper .btn-overlay{position: absolute; top: 0;right: 0;bottom: 0;left: 0; background-color:  rgba(0, 0, 0, 0.2);transition:opacity 0.5s ease;pointer-events: none;opacity: 1;}
._video .video-wapper .btn-overlay{opacity: 1;}
._video .video-wapper .btn-overlay button{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

._rec_timer{text-align: center;padding: var(--gap);font-weight: bold;font-size: 1.25em;height:50px;}

._player{width: 100%; display: flex;background-color: var(--white);border: 1px solid var(--default-light);padding: var(--gap-sm);}
._player li{padding: var(--gap);font-weight: bold;}._player li.totalTime{color: var(--accent);}
._player li.bar{flex: 1;}
._player .value{display: none;}
._player input{width: 100%;transition: var(--tran);} 
._player input::-webkit-slider-thumb{transform: scale(1.5);}/*Todo : 스타일 검토*/

/* Todo: (녹음)아이콘 검토 -> 이미지로 대체? */
._icon {display: inline-block;width: 3rem;height: 3rem;background-size: cover;background-position: center;position: absolute;top: 50%;left: 1rem;transform: translateY(-50%);}
._icon.mic{background-image: url(../images/icon_mic.png);}

._qust .grid, ._qust .flex{width: 100%; gap: var(--gap);align-items: center;}

._sentence{line-height: 1.5em;font-size: 1.2em;color: var(--default-dark-very);}

._think{display: grid;gap: var(--gap-lg);text-align: center;}._think li{display: flex;gap: var(--gap);justify-content: center;align-items: center;}
._think h1{display: flex;align-items: center;}
._think i{display: block;height:1.5rem;width:1.5rem;background-color: #dbdbdb;border-radius: 50%;outline: .4rem solid var(--white);}i.active, i.pass{background-color: var(--accent);}
._think-dual{width: 80%;display: flex;justify-content: space-between;align-items: center;margin: auto;}
._think-dual hr{width: 3px;height: 80%;background-color: var(--default);margin: 0 var(--gap-lg);}
._think img{max-height:25vh;}

/*============ Study > Templates ※향후 버전업 참고 스타일============*/
.BB101, .BB102, .BB105_1, .BB107{grid-template-columns: 2fr 1fr;}
.BB103_1, .BB109_2{grid-template-columns: 1fr 2fr;gap: var(--gap-lg) !important;}
.BB103_1 img, .BB109_2 img{height: 50% !important;}
.BB109_1{justify-content: space-between;gap: var(--gap-lg) !important; & img{height: 50% !important;margin: auto;}}
.BB111{width:70%;}

/*============ Study > Answer ============*/
._answer {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100vw;height: 100vh;overflow: auto;}
._answer .content {background-color: #fff;margin: 0;padding: 0;border: none;width: 100vw;height: 100vh;overflow: auto;}
._answer .content img {display: block;box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);}
._answer .close {color: #aaa;position: fixed;top: 0;right: 2rem;font-size: 5rem;display: block;padding: var(--gap);z-index: 9999;}
._answer .close:hover, ._answer .close:focus{color: #007aff;cursor: pointer;}
._answer .swiper-pagination-progressbar{position: fixed !important;}
._answer .swiper-button-next, .swiper-button-prev{position: fixed !important;padding: 2rem !important;}

/*============ Study > Footer ============*/
._controls{display: flex;justify-content: space-between;align-items: end;gap: var(--gap);}
._controls.reverse{flex-direction: row-reverse;}
._controls li:not(.pager){min-width: 10%;}
._controls li:first-child,._controls li:last-child{display: grid;gap: var(--gap-sm);}

._controls .pager-group{flex: 1; display: flex;justify-content: center;align-items: center;}

._controls .pager{display: flex;justify-content: space-between; gap: clamp(var(--gap-sm),calc(1vw + 1vh + 0.5vmin),var(--gap-lg));background:url(../images/bg_arr.png);background-repeat:repeat-x;background-position:center;background-size:.75rem;}
._controls .pager i{font: 0/0;text-indent:-9999px;display: block;height:clamp(1rem,calc(1vw + 1vh + 0.5vmin),1.5rem);width:clamp(1rem,calc(1vw + 1vh + 0.5vmin),1.5rem);background-color: #dbdbdb;border-radius: 50%;outline: .4rem solid var(--white);}
._controls .pager i.active, i.pass{background-color: var(--accent) !important;}

._controls .prog{display: none;width: 90%;}
._controls.many .pager{display: none;}
._controls.many .prog{display: flex;justify-content: center;align-items: center;gap: var(--gap);}
._controls.many .prog label{min-width: 5rem;}

._controls .prog progress { appearance: none;width: 95%;}
._controls .prog progress::-webkit-progress-bar {background:var(--default);border-radius:1rem;box-shadow: inset 3px 3px 10px var(--default-dark);}
._controls .prog progress::-webkit-progress-value {border-radius:1rem;background: var(--accent);}

/*============ Device (Responsive) ============*/
/* 세로 모드 최소 */
@media (orientation: portrait) and (max-width: 1024px){		
	:root {--gap: 1.4rem;--radius: .7rem;--size-width: 100%;}
	html{font-size:50%;}
	._btn-group a:hover{background-color:var(--white);color:var(--primary);}
	._book_info{flex-direction: column;align-items: stretch;}
	._book_info .info {text-align:center;}
	._book_info li{margin: auto;}
	._book_info li:last-child{margin: 0;}
	._btn{width: 100%;}
	._book_list {flex-direction: column;}
	._book_list [class *="btn-"]{display: none;}

	._chaci_list{flex-direction: column;gap: var(--gap-lg);}
	._chaci_list .list{justify-content: center;align-items: center;padding: 0;}

	._title aside{position: relative;justify-content: center;align-items: center;margin-bottom: var(--gap);right: 0;width: 50%;top: 3rem;}
	._title aside > a {flex: 1;}

	html .swiper-button-next, html .swiper-button-prev{display: none !important;}

	/*템플릿 세로모드*/
	.BB101, .BB102, .BB105_1, .BB107{grid-template-columns: 1fr;width: 80% !important;}
	.BB103_1, .BB109_2{grid-template-columns: 1fr;}
	.BB103_1 ._box, .BB109_2 ._box{width: 50% !important;margin: auto !important;}
	.BB109_1{flex-direction: column;}
	.BB109_1 ._box{width: 50%;margin: auto;}

	 /* 하단 컨트롤 반응형 세로모드 */
	 ._controls {display: grid;grid-template-columns: repeat(2,1fr);}
	 ._controls ._left, ._controls ._right{height: 8rem;}
	 ._controls .pager-group {order: -1;grid-column: span 2;}
	 ._controls.reverse ._right{order: 0}
	 ._controls.reverse ._left{order: 1}

	._controls ._btn{width: 100% !important;}
	._controls ._btn-round {		
        width: 100%;
        height: 100%;
        color: initial;
        display: block;
        justify-content: initial;
        align-items: initial;
        border-radius: initial;
        font-size: initial;
        line-height: initial;
		color:var(--white);font-size: 3rem;
    }
}
/* 가로 모드 */
@media (orientation: landscape) and (max-height:530px) and (max-width:1024px){
	:root {--gap: 1.4rem;--size-width: 80%;}
	html{font-size:35%;}
	._btn-group a:hover {background-color: var(--white);color: var(--primary);}
	section{padding:var(--gap-sm);}
	/*템플릿 가로모드 (높이가 낮은)*/
	.BB101, .BB102, .BB105_1, .BB107{width:80% !important;}
	.BB111{width:50%}
}