@charset "utf-8";


.today-date .date{position: relative;}
.today-date .date p{position: absolute; top: 0; left: 0; z-index: 99; background: #fff; width: 150px; height: 104px; box-shadow: 0 3px 12px rgba(0,0,0,0.16); text-align: center;}
.today-date .date p span{font-size: 36px; font-weight: 700; display: inline-block; line-height: 1.2em; margin-top: 15px;}
.today-date .date p em{font-size: 18px; display: inline-block; line-height: 1.2em; margin-top: 5px;}


.qt-books{height: 430px; width: 100%; min-width: 1024px; background: url(../img/qt-books-bg.svg) 50% 50% no-repeat; background-size: cover; margin-bottom: 70px;}
.qt-books .books-wrap{width: 80%;/*856px*/ float: left;}

.qt-books .book.hidden{display: none;}
.qt-books .book .title-area{vertical-align: middle; width: 70%; text-align: center;}
.qt-books .book .title-area h3{font-size: 38px; width: 320px; line-height: 1.36em; letter-spacing: -2px; margin: 20px auto 40px; word-break: keep-all; color: #333;}
.qt-books .book .title-area .bible em{font-size: 20px; width: 320px; line-height: 1.36em; margin: 0 auto; vertical-align: middle; margin-left: 8px;}
.qt-books .book .title-area .bible .icon.arrow-right{width: 27px; height: 27px; background: url(/qt/img/main-icons.svg) 0 -231px; display: inline-block; vertical-align: middle;}
.qt-books .book .img-area{height: 450px; width: 30%; vertical-align: bottom; padding-bottom: 10px; position: relative;}
.qt-books .book .img-area img{width: 250px; box-shadow: 0 3px 6px rgba(0,0,0,0.2)}
.qt-books .book.yena .img-area img{border-radius: 0 15px 15px 0;}
.qt-books .book .img-area .subscribe{opacity:0; position: absolute; bottom: 10px; left: 0; width: 100%; background: rgba(255,255,255,0.8); padding: 25px 50px; box-sizing: border-box; text-align: center; word-break: keep-all; font-size: 16px; line-height: 1.5em; color: #555; box-shadow: 0px -3px 3px rgba(0,0,0,0.05); transition: 0.2s all}
.qt-books .book .img-area:hover .subscribe{opacity: 1;}
.qt-books .book .img-area .subscribe a{color: #6582C8; text-decoration: underline; font-size: inherit;}
.qt-books .book.yena .img-area .subscribe{border-radius: 0 0 15px 0;}


.qt-books .w100{position: relative;}
.qt-books .slick-slider{position: static;}
.qt-books .books-slick .slick-dots{position: absolute; bottom: 107px; right: 23px; width: 176px; vertical-align: bottom; text-align: right; padding-bottom: 0; box-sizing: border-box;}

.qt-books .books-slick .slick-dots li{display: block; width: auto; height: auto; margin: 0; padding: 0;}
.qt-books .books-slick .slick-dots li button{display: inline-block; height: 45px; line-height: 1; color: #555; border: 1px solid #96979B; background: transparent; opacity: 0.8; font-size: 15px; margin-top: 6px; box-sizing: border-box; transition: none; width: 100%;}
.qt-books .books-slick .slick-dots li button:before{content: ""; display: none;}
.qt-books .books-slick .slick-dots li.slick-active button{background: linear-gradient(to right, #7392D6 1%,#4CDCDA 100%); border: 0; color: #fff; font-weight: 500; position: relative; opacity: 1;}
.qt-books .books-slick .slick-dots li.slick-active button:before{content: ""; display: block; position: absolute; top: 13px; left: -17px; width: 0px; height: 0px; border-color: transparent #7393D6 transparent transparent; border-style: solid; border-width: 11px; background: none;opacity: 1;}
.qt-books .books-slick .slick-dots li.slick-active button:active{box-shadow: none;}


.qt-fam{width: 100%;}
.qt-fam dl dt{width: 15.7%; height: 166px; display:block; float:left; margin-right: 1.6%}
.qt-fam dl dt span{display: inline-block; border: 5px solid rgba(155,155,155,0.25); height: 166px; text-align: center; box-sizing: border-box; padding-top: 10px; font-size: 24px; padding-top: 47px; line-height: 1.2em; width: 100%;}
.qt-fam dl dt em{font-size: 24px; font-weight: 700; line-height: 1.2em; padding-top: 5px; display: inline-block;}

.qt-fam dl dd{width: 16.5%; height: 166px; display:block; float:left; box-sizing: border-box; text-align: center; border: 1px solid #E1E1E1; border-right: 0; box-sizing: border-box; position: relative; }

.qt-fam dl dd:last-child{width: 16.6%; border-right: 1px solid #E1E1E1;}
.qt-fam dl dd span.icon{display: inline-block; background: url(../img/qt-brand-logo.svg); width: 120px; height: 72px; line-height: 72px; vertical-align: middle; margin-top: 45px;}
.qt-fam dl dd:nth-child(3) span.icon{background-position: 0 -504px;}
.qt-fam dl dd:nth-child(4) span.icon{background-position: 0 -360px;}
.qt-fam dl dd:nth-child(5) span.icon{background-position: 0 -288px;}
.qt-fam dl dd:nth-child(6) span.icon{background-position: 0 -432px;}
.qt-fam dl dd em.over{display: block; width: 100%; height: 100%; background: rgba(65,71,84,0.65); position: absolute; top: 0; left: 0; padding-top: 40px; box-sizing: border-box; opacity: 0; transition: 0.2s all;}
.qt-fam dl dd em.over a{color: #fff; display: block; width: 85px; text-align: center; height: 34px;
line-height: 34px; border: 1px solid #fff; margin: 0 auto 8px ; border-radius: 30px; font-size: 14px;}
.qt-fam dl dd:hover em.over{display: block; opacity: 1;}

.notice{margin-top: 60px;}
.notice .board{width: 49.2%; float: left; border: 1px solid #e1e1e1; height: 296px; overflow: hidden; box-sizing: border-box; padding: 30px 28px;}
.notice .board .btn-area{border-bottom: 1px solid #555; padding-bottom: 8.5px; margin-bottom: 32px;}
.notice .board .btn-area p{display:inline-block; font-size: 24px; font-weight: 500; color: #b8b8b8; background: transparent; line-height: 1.2em; cursor: pointer}
.notice .board .btn-area p:first-child:after{content:""; border-right: 1px solid #e1e1e1; margin-right: 13px; padding-left: 13px; height: 21px; display: inline-block; vertical-align: middle; margin-top: -2px;}
.notice .board .btn-area p.on{color: #333; font-weight: 700;}
.notice .board .btn-area p.right{width: 27px; height: 27px; line-height: 27px; background: url(/qt/img/main-icons.svg) 0 -257.8px no-repeat;}
.notice .board ul{}
.notice .board ul li{width: 100%; margin-bottom: 15px; border-bottom: 1px solid transparent; transition: 0.2s all}
.notice .board ul li:hover{border-bottom: 1px solid #e1e1e1;}
.notice .board ul li:after{content: ""; display: block; clear: both;}
.notice .board ul li span{display: block; float: left; width: 76%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; color: #555; vertical-align: middle;}
.notice .board ul li em{display: block; float: right; width: 22%; text-align: justify; font-size: 16px; color: #b8b8b8; vertical-align: middle; word-break: all;}
.notice .movie{width: 49.2%; float: right;}
.notice .movie iframe{width: 100%; height: 296px;}

.download{margin-top: 60px;}
.download dl{width: 100%; border: 1px solid #E1E1E1; border-top: 0; border-left: 0;}
.download dl dt{width: 25%; float: left; height: 200px; background: url(../img/down-bg.png) 100% 100% no-repeat; background-color: #8B9BBB;}
.download dl dt a{width: 100%; height: 100%; display: block; color: #fff; font-size: 24px; line-height: 1.2em; padding: 33px 40px; box-sizing: border-box;}
.download dl dt a .bold{font-size: inherit; color: inherit; font-weight: 700; margin-top: 10px; display: inline-block;}
.download dl dd{width: 25%; float: left; height: 200px; border: 1px solid #E1E1E1; border-right: 0; border-bottom: 0; box-sizing: border-box; transition: 0.2s all; position: relative;}
.download dl dd .icon{display: block; width: 72px; height: 72px; position: absolute; top: 108px; left: 167px; background: url(../img/down-icons.svg) no-repeat 0 0;}
.download dl dd .icon.no2{background-position: 0 -72px;}
.download dl dd .icon.no3{background-position: 0 -144px;}
.download dl dd .icon.no4{background-position: 0 -216px;}
.download dl dd .icon.no5{background-position: 0 -288px;}
.download dl dd .icon.no6{background-position: 0 -360px;}
.download dl dd .icon.no7{background-position: 0 -432px;}
.download dl dd a{width: 100%; height: 100%; display: block; color: #333; font-size: 18px; line-height: 1.5em; padding: 40px; box-sizing: border-box; font-weight: 200;}
.download dl dd:hover{border: 1px solid #6582C8;}
.download dl dd:hover a{color: #6582C8; box-sizing: border-box;}

.out.middle{margin-top: 60px;}

.think{background: #EFF1F6;}
h2.normal{text-align: center; font-size: 24px; font-weight: 700; line-height: 1.2em; padding-top: 60px; padding-bottom: 50px;}
.think .line{border-left: 1px solid #C1C8D9; margin:0 10%;}
.think .person{width: 100%; box-sizing: border-box; padding-bottom: 50px; margin-top: 36px;}
.think .person:last-child{padding-bottom: 60px;}
.think .person p{float: left;}
.think .person .time{width: 22.5%; margin-left: -14px; margin-top: 17px;}
.think .person .time em{color: #7491D6; font-weight: 700; font-size: 28px; vertical-align: middle;}
.think .person .time .icon{display:inline-block; width: 27px; height: 27px; background: url(../img/main-icons.svg) 0 -285px; vertical-align: middle; margin-right: 10px;}
.think .person .name{width: 15%;}
.think .person .name span.img{width: 100px; height: 100px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; display: block;}
.think .person .name em{font-size: 17px; font-weight: 500; text-align: center; word-wrap: break-word; display: block; width: 100px; margin-top: 6px; line-height: 1.2em;}
.think .person .text{width: 62.5%; background: #fff; border-radius: 10px; box-sizing: border-box; padding: 32px; cursor: pointer; position: relative;}
.think .person .text span{padding: 0; font-size: 16px; line-height: 1.75em; -webkit-box-orient: vertical; display: block; -webkit-line-clamp:4; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; height: 107px;}
.think .person .text:after{content: "..."; background: #fff; position: absolute; right: 32px; bottom: 31px; display: inline-block; padding: 0 3px;}

.think .person.empty .text .btn-write{border: 1px solid #7F98D4; border-radius: 30px; font-size: 14px; color: #6582C8; padding: 7px 11px; line-height: 1.2em; background: transparent; display: inline-block; margin: 20px auto 0;}
.think .person.empty .text{text-align: center;}
.think .person.empty .text span{text-align: center; height: auto;}
.think .person.empty .name{text-align: center;}
.think .person.empty .name span.img{display: inline-block;}
.think .person.empty .text:after{display: none;}

.daily{padding-bottom: 50px; overflow: hidden;}
.daily .card{padding: 0 7.5px; }
.daily .card img{width: 100%;}
.daily .card.link{text-align: center; position: relative;}
.daily .card.link img{display: block;}
.daily .card.link .inner{position: absolute; top: 0; left:0; width: 100%; height: 100%; }
.daily .card.link img.logo{width: auto; display: block; margin:40px auto 20px;}
.daily .card.link span{font-size: 14px;}
.daily .card.link button{font-size: 15px; color: #777; border: 1px solid #777; border-radius: 30px; height: 45px;line-height: 45px; width: 140px; text-align: center; display: block; margin: 0 auto; background: transparent; margin-top: 30px;}

.daily .card.img .inner{width: 100%; position: relative; height: 100%;}
.daily .card.img .over{display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.55); position: absolute; top: 0; left: 0; opacity: 0; transition: 0.2s all}
.daily .card.img .over .icon.more{width: 56px; height: 56px; background: url(../img/main-icons.svg) 0 -327px no-repeat; display: block; position: absolute; top: 50%; margin-top: -28px; left: 50%; margin-left: -28px; cursor: pointer;}
.daily .card.img:hover .over{display: block; opacity: 1;}
.daily .slick-list{overflow: visible;}
.slick-prev, .slick-next{width: 56px; height: 56px; top: 50%; z-index: 99;}
.slick-next{right: 56px;}
.slick-prev{left: 56px;}
.daily .slick-prev:before{background: url(/qt/img/main-icons.svg) 0 -438.8px no-repeat; width: 56px; height: 56px;}
.daily .slick-next:before{background: url(/qt/img/main-icons.svg) 0 -382.8px no-repeat; width: 56px; height: 56px;}

.daily .viewer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8); z-index: 200; display: none;}
.daily .viewer .inner{display: inline-block; width:auto; height: 600px; position: absolute; top: 50%; margin-top: -300px; left: 50%; margin-left: -300px;}
.daily .viewer img{height: 100%;}
.daily .viewer .close{text-indent: -9999em; width: 16px; height: 16px;background: url(/qt/img/main-icons.svg) 0 -494.8px no-repeat; position: absolute; right: -25px; top: -25px;}

.interview{width: 960px; margin: 0 auto 60px; text-align: center;}
.interview h2{padding: 0;}
.interview .more{width: 100%; text-align: right; padding: 8px 0;}
.interview .more .icon{width: 27px; height: 27px; display: inline-block; background: url(../img/main-icons.svg) 0 -258px no-repeat;}
.interview dl{width: 33.3333%; padding: 0 8px; box-sizing: border-box; cursor: pointer;}
.interview dl dt{width: 100%; height: 180px; background-position: 50% 50%; background-size: cover; position: relative; border: 1px solid #e1e1e1; box-sizing: border-box;}

.interview dl dt span.brand-logo{display: block; position: absolute; bottom: 10px; right: 10px;  z-index: 10; width: 100px; height: 25.5px; background: url(/duranno/img/brand-logo.png) 0 0 no-repeat; background-size: 100%; opacity: 1;}
.interview dl dt span.brand-logo.no2{background-position: 0 -25.5px;}
.interview dl dt span.brand-logo.no3{background-position: 0 -51px;}
.interview dl dd{text-align: center; margin-top: 26px;}
.interview dl dd .name{font-size: 20px; font-weight: 500; display: inline-block;}
.interview dl dd .line{width: 30px; display: block; margin: 0 auto; border-top: 1px solid #555; padding-top: 14px; margin-top: 14px;}
.interview dl dd .text{font-weight: 400; display: block; text-align: center; padding: 0 20px; font-size: 16px; color: #555; line-height: 1.5em;}

.mailing{background: #E7EAF1; text-align: center; padding-bottom: 60px;}
.mailing h2{padding-bottom: 20px;}
.mailing h2 span{font-weight: 400; font-size: inherit; color: inherit; padding-right: 10px;}
.mailing h2 em{font-weight: 700; font-size: inherit; color: inherit;}
.mailing .text{font-size: 16px; color: #777; padding-bottom: 26px;}
.mailing input{height: 50px; line-height: 50px; padding: 0 15px; margin-bottom: 20px;}
.mailing input.name{width: 200px;}
.mailing input.email{width: 340px; margin-left: 10px;}
.mailing button.btn{width: 140px; text-align: center; display: inline-block; color: #777; border: 1px solid #777; height: 45px; line-height: 45px; border-radius: 30px; background: transparent; font-size: 15px; margin: 0 3px;}
.mailing button.btn.full{background: #7D95CF; border: 1px solid #7D95CF; color: #fff;}



@media screen and (max-width: 1116px){
	.qt-books .book .title-area{width: 60%;}
}