/* reset */
html{font-size:16px; height:100%;}
body{height:100%; min-height:100%;}
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,label,article{margin:0;padding:0;}
html, body, header,footer,section,nav,div,ul,dl,ol,li,dl,dd,dt,h1,h2,h3,h4,h5,h6,p,span,a,button,input,label,textarea,article{box-sizing:border-box;}
fieldset,img {border:0 none}
dl,ul,ol,menu,li,label {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'],select {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body,th,td,input,select,textarea{line-height:1.5;font-family:'Noto Sans KR','Noto Sans', 'Malgun Gothic', '맑은 고딕', sans-serif;color:#676767}
a{text-decoration:none}
button, a{font-family:inherit; color:inherit; font-size:inherit;}
a:active, a:hover {text-decoration:none}
a:focus, button:focus{outline:none;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
img{width:auto; height:auto; max-width:100%; max-height:100%;}

/*Hide*/
.hide{overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
.landscape{display:none;}

/*common*/
.m_img{display:none;}

footer{text-align:center; position:absolute; z-index:1; font-size:0.7rem; bottom:0; width:100%; padding:3px 0; color:#FFF; border-top:2px solid #000; background:URL('/trw/img/img_bg_main.png') no-repeat bottom center #FF0912; background-size:cover;}
#sub footer{position:fixed; padding:3px 0;}

 
/*main*/
#main header{text-align:center; border-top:10px solid #FF0912; height:35vh;}
#main header h1{border-top:2px solid #000; padding:1rem 5%; height:100%; display:flex; align-items:center; text-align:center; justify-content:center;}
#main header h1 img{width:auto; height:100%;}

#main article{background:#FFF; padding-bottom:24px; position:relative; height:65vh;}

/*slider*/
.slick-initialized .slick-slide a{display:block; margin:0.8rem auto 1rem; width:65%; z-index:1;}
.slick-initialized .slick-slide a img{margin:0 auto; box-shadow:3px 3px 3px 0 rgb(0, 0, 0, 0.3);}

.slick-track li:focus{outline:none;}

.slick-prev, .slick-next{width:45px; height:45px; z-index:2;}
.slick-prev:before, .slick-next:before{display:none;}
.slick-prev{left:8%; background:URL('/trw/img/btn_prev.png') no-repeat; background-size:100% auto;}
.slick-next{right:8%; background:URL('/trw/img/btn_next.png') no-repeat; background-size:100% auto;}

/*sub*/
#sub header{padding:0.3rem 5% 0.25rem; position:relative; background:#FFF;}
#sub header h1{width:62%; margin:0 auto;}

.btn_back{width:22px; height:35px; position:absolute; display:block; top:50%; margin-top:-10px;}

#sub nav{background:#FFF;}
#sub nav ul{padding-bottom:8px; text-align:center}
#sub nav ul li{display:inline-block; white-space:nowrap; padding:5px 2.5% 5px; background:#F5F5F5; border:2px solid #D6D6D6; color:#000; border-radius:5px; font-size:1em;}
#sub nav ul li.on{border-color:#000;}
#sub nav ul li.on button{color:#FFF; font-weight:bold;}

#sub h2{text-align:center; color:#000; font-size:1.6em; margin-bottom:0.5rem;}

#sub article{padding-bottom:35px;}
#sub article:before{content:''; display:block; height:3rem; background:URL('/trw/img/bg_book_subtit.png') top center no-repeat; background-size:100% auto;}

#sub article > div{padding:0 4%;}

#sub article > div.list_wrap{display:none;}

/*유닛 트랙리스트*/
.list_wrap ul{border-radius:10px;}
.list_wrap h3{background:URL('/trw/img/btn_list.png') no-repeat 95% center #FFF; background-size:auto 30%; border:1px solid #D5D5D5; padding:7px 6% 9px; border-radius:4px; font-size:1.2em; color:#000; font-weight:normal;}

.list_wrap ul li.on h3{border:none; color:#FFF; background-image:URL('/trw/img/btn_list_on.png'); font-weight:bold; padding-top:10px; border-left:none !important;}

.list_wrap ul > li + li{margin-top:0.4rem;}

.list_wrap ul li:after{content:''; display:block; clear:both;}
.list_wrap ul li.on{border-radius:4px; overflow:hidden;}
.list_wrap ul li ol{display:none; padding:0 3% 15px;}
.list_wrap ul li.on ol{display:block;}
.list_wrap ul li ol li{padding-right:75px;}

/*알파벳 - 동영상버튼*/
.play_unit0{width:60%; display:block; margin:1.5rem auto 0.5rem;}
#sub article .alphabet_wrap ol li{border:1px solid #D8D8D8}
#sub article .alphabet_wrap ol li + li{margin-top:5px;}

/*트랙리스트 - 공통*/
#sub article ol{border-radius:4px; overflow:hidden;}
#sub article ol li{font-size:0.95em; background:#FFF; padding:0.5em 3%; border-radius:4px; position:relative;}
#sub article ol li strong{font-weight:normal}
#sub article ol li + li{margin-top:2px;}

#sub article ol li span{display:block; font-size:0.8em; font-weight:bold; position:relative; z-index:1;}

/*플레이 버튼*/
.list_wrap .btn_wrap{width:56px;}
.btn_wrap{position:absolute; right:3%; top:0; height:100%; z-index:2;}
.btn_wrap:after{content:''; display:block; clear:both;}
.btn_wrap a{font-size:0; width:23px; height:100%; display:block; float:left;}
.btn_wrap a.btn_a{background:URL('/trw/img/btn_list_audio.png') no-repeat center; background-size:100% auto; margin-right:10px;}
.btn_wrap a.btn_v{background:URL('/trw/img/btn_list_video.png') no-repeat center; background-size:100% auto;}

#sub footer{border-top:none;z-index:2;}
 
/*권별색상*/
#sub.book1{background-color:#FFE8EA}
#sub.book2{background-color:#DFFFF0}
#sub.book3{background-color:#D9EAFF}
#sub.book4{background-color:#FFEAC8}

#sub.book1 h2 span{color:#EC1C24;}
#sub.book2 h2 span{color:#006428;}
#sub.book3 h2 span{color:#2C63C7;}
#sub.book4 h2 span{color:#FF5A00;}

#sub.book1 header{border-top:5px solid #FF0912;}
#sub.book1 nav ul li.on{background:#FF0912}
#sub.book1 footer{background:#FF0912;}

#sub.book2 header{border-top:5px solid #00A651;}
#sub.book2 nav ul li.on{background:#00A651}
#sub.book2 footer{background:#00A651;}

#sub.book3 nav ul li, #sub.book4 nav ul li{vertical-align:top; padding:0;}
#sub.book3 nav ul li button, #sub.book4 nav ul li button{line-height:43px; height:2.5em; display:block; width:55px;}
#sub.book3 nav ul li.btn_alphabet, #sub.book4 nav ul li.btn_alphabet{white-space:break-spaces; width:130px;}
#sub.book3 nav ul li.btn_alphabet button, #sub.book4 nav ul li.btn_alphabet button{padding:3px 1%; line-height:18px; width:100%;}

#sub.book3 header{border-top:5px solid #0E76BC;}
#sub.book3 nav ul li.on{background:#0E76BC}
#sub.book3 footer{background:#0E76BC;}

#sub.book4 header{border-top:5px solid #F47920;}
#sub.book4 nav ul li.on{background:#F47920;}
#sub.book4 footer{background:#F47920;}

#sub.book1 .list_wrap ul li h3{border-left:4px solid #EC1C24}
#sub.book1 .list_wrap ul li.on{background:#E23138; border-color:#FFBFC4}
#sub.book1 .list_wrap ul li.on h3{background-color:#E23138;}
#sub.book1 article ol li span{color:#EC1C24}

#sub.book2 .list_wrap ul li h3{border-left:4px solid #008837}
#sub.book2 .list_wrap ul li.on{background:#1CA15D; border-color:#85DFA4}
#sub.book2 .list_wrap ul li.on h3{background-color:#1CA15D;}
#sub.book2 article ol li span{color:#00A651}

#sub.book3 .list_wrap ul li h3{border-left:4px solid #2E58A6}
#sub.book3 .list_wrap ul li.on{background:#2187CB; border-color:#85BFFF}
#sub.book3 .list_wrap ul li.on h3{background-color:#2187CB;}
#sub.book3 article ol li span{color:#2C63C7}

#sub.book4 .list_wrap ul li h3{border-left:4px solid #FF5A00}
#sub.book4 .list_wrap ul li.on{background:#FF752A; border-color:#FFC95D}
#sub.book4 .list_wrap ul li.on h3{background-color:#FF752A;}
#sub.book4 article ol li span{color:#FF5A00}

/*가로모드*/
@media screen and (orientation: landscape){
footer{background-image:URL('/trw/img/img_bg_main_lans.png')}

#main header{height:36vh}
#main article{height:64vh}
#main header h1 img{width:auto; height:auto;}

.pc_img{display:none;}
.m_img{display:inline-block;}

/*slider*/
.slick-initialized .slick-slide a{width:90%;}
.slick-list{padding:0 30px;}

/*sub*/
#sub article:before{background-image:URL('/trw/img/bg_book_subtit_lans.png')}
#sub header h1{width:65%; padding-top:10px;}
#sub h2{padding-top:10px;}
.play_unit0{width:50%}

#sub.book3 nav ul li.btn_alphabet, #sub.book4 nav ul li.btn_alphabet{width:200px;}
}

/*iphone X - 세로*/
@media only screen and (orientation: portrait) and  (min-height:812px) and (-webkit-max-device-pixel-ratio: 3.0){
#main header{height:auto;}
#main article{height:auto; padding:2rem 0 3rem}

#main header h1 img{width:auto; height:auto;}
}
/*iphone X - 가로*/
@media only screen and (orientation: landscape) and (min-width:812px) and (-webkit-max-device-pixel-ratio: 3.0) {
#main header{height:30vh}
#main article{height:70vh}

.slick-list{padding:0 60px;}

/*sub*/
#sub header h1{width:75%;}
#sub article:before{margin-bottom:0.2rem;}
}

/*DPR 3.5 - 세로*/
@media only screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 3.5) {
#main header{height:auto;}
#main article{height:auto; padding:2rem 0 3rem}

#main header h1 img{width:auto; height:auto;}

#sub.book3 nav ul li button, #sub.book4 nav ul li button{line-height:40px; height:3em;}
#sub.book3 nav ul li.btn_alphabet button, #sub.book4 nav ul li.btn_alphabet button{padding:3px 1%; line-height:17px; width:100%;}
}

/*DPR 3.5 - 가로*/
@media only screen and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3.5) {
#main header{height:30vh}
#main article{height:70vh}

.slick-list{padding:0 60px;}

#sub.book3 nav ul li.btn_alphabet, #sub.book4 nav ul li.btn_alphabet{width:210px;}
}

/*Tablet*/
@media only screen and (orientation: portrait) and  (min-height:1024px){

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
    #main header h1 img{max-width:500px;}
    .slick-initialized .slick-slide a{width:50%;}
}

/*320px 이하*/
@media only screen and (orientation: portrait) and  (max-height:320px){
html{font-size:15px;}
#sub nav ul li{font-size:0.9em;}
}

@media all and (min-width:1025px) {
    .slick-track{display:flex;justify-content: center;align-items: center;width:100%;}
    .slick-list{max-width:1500px;margin:0 auto;}
    .slick-slide{width:25% !important;}
    #sub article > div > a{text-align:center;}
    #sub header h1{padding:20px 0;width:50%;}
    #main header h1 img{max-width:900px;}

    #main header{height:35vh;}
    #main article{height:65vh;}

}