/*#header 만 옮김*/

@charset "utf-8";



img{-ms-interpolation-mode: bicubic}
body{position: relative; transition:0.2s all; background: #f0f0f0;}
#header{background: #555861; position: fixed; top: 0; width: 100%; z-index: 100;}
.header-padding{transition: 0.2s all;}


#header .search-event{text-align: center; position: relative; background: url(/duranno/img/search-event-w-bg.png) repeat-x 0 0;}
#header .search-event .img-wrap{display: none;}
#header .search-event img{width: auto; max-width: 100%; position: relative; z-index: 2;}

#header .search-event .round-btn{width: 70px; height: 35px; border-radius: 0 0 35px 35px; z-index: 1; background: #f96a6a; position: absolute; bottom: -30px; right: 50%; margin-right: -35px;}
#header .search-event i.i-up{background: url(/duranno/img/search-event-icons.svg) 0 0 no-repeat; width: 30px; height: 30px; display: inline-block; margin-top: 3px; transform: rotate(180deg);}
#header .search-event i.i-up.on{transform: rotate(0deg);}

#header .top{background: #FFF; width: 100%; border-top: 1px solid #ddd; position: relative; z-index: 3; border-bottom: 1px solid #ddd; width: 100%;}
#header .top.on{position: fixed; top: 110px; left: 0; z-index: 12;}
#header .top i{vertical-align: middle; color: #7a7e8a; font-size: 32px; cursor: pointer}
#header .top .mybtn{background: #8FABB3; width: 45px; height: 45px; text-align: center;}
#header .top .mybtn .i-my{display: block; width: 45px; height: 45px; background: url(/duranno/img/search-event-icons.svg) 0 -165px;}
#header .top .brand{margin-right: 15px; vertical-align: middle; transition:0.2s all; position: relative;}

#header .top .brand button{width: 45px; display: block; height: 45px; line-height: 45px; background: #8FABB3;}
#header .top .brand button.real{position: absolute; z-index: 100; top: 0; left: 0; width: 50px; background: transparent;}
#header .top .brand button .svg{width: 22px; height: 22px; display: inline-block; vertical-align: middle;}


#header .top .brand button .icon.duranno.logo{width: 28px; height: 28px; background: url(/duranno/img/left-icon.svg) -56px -498px;  display: inline-block; vertical-align: middle; padding-right: 0;}
#header .top .brand button.new .i-menu{display: block; width: 45px; height: 45px; background: url(/duranno/img/search-event-icons.svg) 0 -120px;}


#header .top .brand span{line-height:1em;  border-bottom: 1px solid transparent; transition:0.2s all; color: #ffe191; font-size: 16px; vertical-align: middle; padding-right: 7px;}
#header .top .brand img{vertical-align: middle; transition:0.2s all;}
#header .top .brand button.on img{transform:rotate(180deg);}
#header .top .brand .brand-list{display: none; position: absolute; z-index: 101; background: rgba(22,26,32,0.9); padding: 0 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.2)}
#header .top .brand .brand-list li{display: block; height: auto; line-height: normal; padding: 10px 10px; width: 120px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-right:0;}
#header .top .brand .brand-list li:last-child{border-bottom: 0;}
#header .top ul li{display: inline-block;  height: 45px; line-height: 45px; box-sizing: border-box; vertical-align: top;}
#header .top ul li a{line-height: 1.2em; color: #555; font-size: 14px; border-bottom: 1px solid transparent; transition:0.2s all; font-weight: 400;}
#header .top ul li.on a{color: #368399; }
#header .top ul li.on{border-bottom: 3px solid #368399;}
#header .top ul li .new{display: inline-block; background: #f96a6a; padding: 0 2.5px; line-height: 14px; font-size: 9px; color: #fff; margin-left: 0; vertical-align: middle; font-weight: 500;}
#header .top ul li:hover a{color: #666;}
#header .top .left li{margin-right: 15px;}
#header .top .right li{margin-left: 15px;}
#header h1.mobile{display: none;}

#header .ad{background: #4c648c; position: relative; z-index: 2;}
#header .ad .w100{position: relative; cursor: pointer;}
#header .ad .ad-close{position: absolute; top: 10px; right: 0px; box-shadow: 0px 0px 15px rgba(0,0,0,0.15); background: rgba(0,0,0,0.08);}
#header .ad.other{display: none;}


#header #new-nav{background: #fff; display: block; height: 110px; line-height: 110px; position: relative; top: 0; text-align: center; z-index: 0; width: 100%;}
#header #new-nav.on{position: fixed; z-index: 100; top: 0; background: rgba(255,255,255,1)}
#header #new-nav .w100{position: relative;}
#header #new-nav h1{background: url(/duranno/img/core/duranno-logo.svg) 0 0 no-repeat; cursor: pointer; background-size: 160px; text-indent: -9999em; height: 22px; position: absolute; top: 50%;  width: 160px; margin-top: -10px;}
/* #header #new-nav h1.web{display: block; background-image: url(/duranno/img/core/40th_duranno1.svg); width: 174px; height: 53px; margin-top: -22px; background-size: 172px;} */
#header #new-nav h1.mobile{display: none;}
#header #new-nav .search-area{display: inline-block; width: 572px; height: 50px; background: #EEEEEE; vertical-align: middle; line-height: 50px; text-align: left; border-radius: 50px;}
#header #new-nav .search-area .search-input{display: inline; vertical-align: top; background: transparent; border: 0; margin-left: 20px; height: 50px; line-height: 50px; width: 70%; font-size: 16px; color: #555; font-weight: 400;}
#header #new-nav .search-area .search-btn{width: 60px; display: block; background: transparent; float: right; height: 50px; line-height: 50px;}
#header #new-nav .search-area .search-btn .i-search{width: 30px; height: 30px; background: url(/duranno/img/search-event-icons.svg) 0 -30px no-repeat; display: inline-block; margin-top: 10px;}


#header #new-nav .top-topic{width: 161px; position: absolute; right: 0; top: 35px;}
#header #new-nav .top-topic p{height: 20px; font-size: 14px; color: #555; font-weight: bold; display: inline-block; line-height: 20px; position: absolute; left: 0; top: 0;}
#header #new-nav .top-topic ul{width: 120px; line-height: 1.2em; position: absolute; top: 25px; left: 0;}
#header #new-nav .top-topic ul li{text-align: left;}
#header #new-nav .top-topic ul li a{font-size: 14px; color: #555; vertical-align: top;  overflow: hidden; text-overflow: ellipsis; display: inline-block; width: 120px; white-space: nowrap}
#header #new-nav .search-slick button{background: url(/duranno/img/search-event-icons.svg) 0 -80px; left: auto; right: -20px; width: 20px; height: 20px; top: 25px;}
#header #new-nav .search-slick button.slick-next{right: -40px; background-position: 0 -100px;}
#header #new-nav .search-slick button:before{display: none;}




#header .wrap{width: 100%; height: 2000px; background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; z-index:200;}
#header .side{width: 280px; position: fixed; top: 0; z-index: 201;  transition:0.2s all; box-shadow:0px 0px 0px rgba(0,0,0,0); overflow: auto;}
/*#header .side.on{box-shadow:0px 0px 50px rgba(0,0,0,0.5);}*/

#header .side-l{background: #212934; left: -280px;}
#header .side-l h1{padding: 46px 0; text-align: center; border-bottom: 1px solid #2b3747;}
#header .side-l h1 .svg{width: 143px; display: inline-block;}
#header .side-l h1 .svg .durannoLogo{fill:#FFF;}

#header .side-l .btn{width: 100%; border-bottom: 1px solid #2b3747; padding: 20px; box-sizing:border-box; margin-bottom: 20px;}
#header .side-l .btn button{width: 50%; float: left; display: block; padding: 0; background: transparent;}
#header .side-l .btn button i{color: #fff; display: inline-block; width: 30px; height: 30px; background: #31425b; border-radius: 50%; font-size: 18px; line-height: 30px; vertical-align: middle;}
#header .side-l .btn button span{color: #fff; font-size: 15px; vertical-align: middle; padding-left: 10px;}
#header .side-l .btn button .new{display: inline-block; background: #e94766; padding: 0 2.5px; line-height: 14px; font-size: 9px; color: #fff; margin-left: 5px; vertical-align: middle; font-weight: 500;}
#header .side-l ul>li.line{border-bottom: 1px solid #2b3747; padding: 0 20px 0; margin-bottom: 20px}
#header .side-l ul>li>a{display: block; padding: 0 20px 20px; box-sizing:border-box;}
#header .side-l ul>li>a:after{content: ''; display: block; clear: both;}
#header .side-l ul>li>a i{color: rgba(255,255,255,0.7); display: block; float: right; transition: 0.2s all;}
#header .side-l ul>li>a span{color: #fff; font-size: 18px; display: block; float: left;}
#header .side-l ul li.on a span{color: #78c1fb;}
#header .side-l ul li.on a i{color: #78c1fb; transform:rotate(180deg);}
#header .side-l ol{background: #2d3d54; padding: 15px 20px; margin-bottom: 20px;}
#header .side-l ol>li>a{color: #fff; display: block; padding: 7px 0; font-size: 16px; font-weight: 300;}



#header .side-l.new{background: #fff; width: 375px; left: -375px; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; display: none}
#header .side-l.new::-webkit-scrollbar{display: none;}
#header .side-l.new .icon.duranno-logo{cursor:pointer; width: 178px; height: 43px; background: url(/duranno/img/left-icon.svg) 0 -542px; display: block; margin: 0 auto;}
#header .side-l.new h1{padding: 26px 0; border-bottom: 1px solid #E8E9EA;}
#header .side-l.new .btn{padding: 12px 0; border-bottom: 1px solid #E8E9EA; margin-bottom: 0;}
#header .side-l.new .btn button{text-align: center; width: 33.3333%; box-sizing: border-box;}
#header .side-l.new .btn button:first-child{border-right: 1px solid #E8E9EA}
#header .side-l.new .btn button:last-child{border-left: 1px solid #E8E9EA}
#header .side-l.new .btn button span{color: #31425B; font-size: 12px; font-weight: 400;}
#header .side-l.new .btn button .new{background: url(/duranno/img/left-icon.svg) no-repeat 0px -526px; width: 16px; height: 16px; display: inline-block; background-color: transparent; text-indent: -9999em; margin-left: 2px;}
#header .side-l.new .banner img{width: 100%;}
#header .side-l.new .tabs{padding: 5px; padding-bottom: 1px;}
#header .side-l.new .tabs button{border: 1px solid #ddd; border-bottom: 1px solid #aaa; padding: 15px 0 14px; width: 50%; background: #F7F7F7; box-sizing: border-box; display: block; float: left; font-size: 14px; font-weight: 500; color: #7f7f7f}
#header .side-l.new .tabs button.on{border: 1px solid #aaa; border-bottom: 0; background: #fff; padding-bottom: 15px; color: #4d4d4d;}

#header .side-l.new .tabs button:first-child{border-right: 0;}
#header .side-l.new .tabs button:last-child{border-left: 0;}
#header .side-l.new .tabs button.on:first-child{border-right: 1px solid #aaa;}
#header .side-l.new .tabs button.on:last-child{border-left: 1px solid #aaa;}

#header .side-l.new .outer{border-bottom: 0; position: relative; border-top: 0; box-shadow: none;}
#header .side-l.new .outer>li span em{color: #4D4D4D; font-size: 14px; position: relative;}
#header .side-l.new .outer>li span i.icon{background: url(/duranno/img/left-icon.svg) no-repeat 0px -618px; width: 12px; height: 12px; display: inline-block; position: absolute; right: -12px; top: 2px;}
#header .side-l.new .outer>li{width: 33.3333%; display: block; float: left; text-align: center; padding: 15px 0 15px; cursor: pointer; position: static;}
#header .side-l.new .outer>li:nth-child(1){border-bottom: 1px solid #f2f2f2; margin-left: 5%; width: 28.3333%;}
#header .side-l.new .outer>li:nth-child(2){border-bottom: 1px solid #f2f2f2;}
#header .side-l.new .outer>li:nth-child(3){border-bottom: 1px solid #f2f2f2; margin-right: 5%; width: 28.3333%;}
#header .side-l.new .outer>li:nth-child(4){border-bottom: 1px solid #fff; margin-left: 5%; width: 28.3333%;}
#header .side-l.new .outer>li:nth-child(5){border-bottom: 1px solid #fff;}
#header .side-l.new .outer>li:nth-child(6){border-bottom: 1px solid #fff; margin-right: 5%; width: 28.3333%;}
#header .side-l.new .outer>li .icon.cate{display: block; width: 50px; height: 50px; background: url(/duranno/img/left-icon.svg) no-repeat 0 0; margin: 0 auto;}
#header .side-l.new .outer>li .icon.cate.qt{background-position: 0 0;}
#header .side-l.new .outer>li .icon.cate.magazine{background-position: 0 -50px;}
#header .side-l.new .outer>li .icon.cate.bible{background-position: 0 -100px;}
#header .side-l.new .outer>li .icon.cate.books{background-position: 0 -150px;}
#header .side-l.new .outer>li .icon.cate.seminar{background-position: 0 -200px;}
#header .side-l.new .outer>li .icon.cate.subscribe{background-position: 0 -250px;}
#header .side-l.new .outer>li .icon.cate.shopping{background-position: 0 -300px;}
#header .side-l.new .outer>li .icon.cate.store{background-position: 0 -350px;}
#header .side-l.new .outer>li .icon.cate.apps{background-position: 0 -400px;}

#header .side-l.new .outer>li.on{border-bottom: 0!important;}
#header .side-l.new .outer>li.on span em{color: #00657F;}
#header .side-l.new .outer>li.on span i.icon{background-position: -12px -618px;}
#header .side-l.new .outer>li.on .icon.cate.qt{background-position: -50px 0;}
#header .side-l.new .outer>li.on .icon.cate.magazine{background-position: -50px -50px;}
#header .side-l.new .outer>li.on .icon.cate.bible{background-position: -50px -100px;}
#header .side-l.new .outer>li.on .icon.cate.books{background-position: -50px -150px;}
#header .side-l.new .outer>li.on .icon.cate.seminar{background-position: -50px -200px;}
#header .side-l.new .outer>li.on .icon.cate.subscribe{background-position: -50px -250px;}
#header .side-l.new .outer>li.on .icon.cate.shopping{background-position: -50px -300px;}
#header .side-l.new .outer>li.on .icon.cate.store{background-position: -50px -350px;}
#header .side-l.new .outer>li.on .icon.cate.apps{background-position: -50px -400px;}
#header .side-l.new .outer>li.qt .ul-height,
#header .side-l.new .outer>li.magazine .ul-height,
#header .side-l.new .outer>li.bible .ul-height{height: 0; /*transition: all 0.2s;*/}
#header .side-l.new .outer>li.qt.on .ul-height{height: 280px;}
#header .side-l.new .outer>li.magazine.on .ul-height{height: 142px;}
#header .side-l.new .outer>li.bible.on .ul-height{height: 352px;}

#header .side-l.new li.btn-wrap{width: 100%; padding: 20px 20px; box-sizing: border-box;}
#header .side-l.new li.btn-wrap button{height: 50px; line-height: 50px; font-size: 14px; font-weight: 500; text-align: center; display: block; width: 100%; background: #F5F5F5; transition: all 0.1s;}
#header .side-l.new li.btn-wrap button em{vertical-align: middle; font-size: 14px; transition: all 0.1s;}
#header .side-l.new li.btn-wrap button .icon.sm.mail{display: inline-block; width: 24px; height: 24px; background: url(/duranno/img/left-icon.svg) 0 -450px; margin-right: 10px; transition: none;}
#header .side-l.new li.btn-wrap button .icon.sm.subscribe{display: inline-block; width: 24px; height: 24px; background: url(/duranno/img/left-icon.svg) -24px -450px; margin-right: 10px; transition: none;}
#header .side-l.new li.btn-wrap button .icon.sm.giftcard{display: inline-block; width: 24px; height: 24px; background: url(/duranno/img/left-icon.svg) -48px -450px; margin-right: 10px; transition: none;}

#header .side-l.new li.btn-wrap button:hover{background: #A8BB03;}
#header .side-l.new li.btn-wrap button:hover em{background: #A8BB03; color: #fff;}
#header .side-l.new li.btn-wrap button:hover .icon.sm.mail{background-position: 0px -474px;}
#header .side-l.new li.btn-wrap button:hover .icon.sm.subscribe{background-position: -24px -474px;}
#header .side-l.new li.btn-wrap button:hover .icon.sm.giftcard{background-position: -48px -474px;}

#header .side-l.new .brand li.btn-wrap button{margin-bottom: 5px;}


#header .side-l.new .inner-tabs{width: 100%; position: absolute; left: 0; background: #f5f5f5; border-bottom: 1px solid #ddd; margin-top: 15px; border-top: 1px solid #dddd; }
#header .side-l.new .inner-tabs:before{content: ""; display: block; border-color: transparent transparent #ddd transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 14%;}
#header .side-l.new .magazine .inner-tabs:before{left: 48%;}
#header .side-l.new .bible .inner-tabs:before{left: auto; right: 14%;}
#header .side-l.new .inner-tabs li.half{width: 50%; display: table; float: left; height: 70px; overflow: hidden; background: #F5F5F5; border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; box-sizing: border-box;}
#header .side-l.new .inner-tabs li.half.non-cursor{cursor: default;}

#header .side-l.new .inner-tabs li.half em{display: table-cell; vertical-align: middle; line-height: 1.2em; text-align: left; padding: 0 20px; font-size: 14px;}
#header .side-l.new .inner-tabs li.half em:first-child{padding-right: 0;}
#header .side-l.new .inner-tabs li.half em:last-child{padding-left: 0; text-align: right;}
#header .side-l.new .inner-tabs li.half .icon.logo{display: inline-block; width: 47px; height: 20px; background: url(/duranno/img/left-qt-logo.svg) 0 0;}
#header .side-l.new .inner-tabs li.half .icon.logo.qt{background-position: 0 -0px;}
#header .side-l.new .inner-tabs li.half .icon.logo.sn{width: 50px; height: 14px; background-position: 0 -20px;}
#header .side-l.new .inner-tabs li.half .icon.logo.yj{width: 46px; height: 19px; background-position: 0 -34.2px;}
#header .side-l.new .inner-tabs li.half .icon.logo.yn{width: 60px; height: 35px; background-position: 0 -53.4px;}
#header .side-l.new .inner-tabs li.half .icon.logo.ll{width: 44px; height: 37px; background-position: 0 -88.5px;}

#header .side-l.new .inner-tabs li.btn-wrap{display: block; width: 100%; float: none; background: #fff; height: auto; overflow: visible; clear: both; padding: 10px 20px;}
#header .side-l.new .inner-tabs li.btn-wrap button{height: 50px; line-height: 50px; font-size: 14px; font-weight: 500; text-align: center; display: block; width: 100%;}


#header .side-l.new .magazine .inner-tabs li.half em{}
#header .side-l.new .magazine .inner-tabs li.half .icon.logo.sl{background: url(/duranno/img/left-magazine-logo.svg); width: 60px; height: 23px; background-position: 0 0;}
#header .side-l.new .magazine .inner-tabs li.half .icon.logo.moksin{background: url(/duranno/img/left-magazine-logo.svg); width: 82px; height: 20px; background-position: 0 -23px;}


#header .side-l.new .bible .inner-tabs{border-bottom: 0;}
#header .side-l.new .bible .inner-tabs li.half em img{width: 70px;}

#header .side-l.new .brand ul{width: 100%;}
#header .side-l.new .brand ul li.table{width: 50%; display: table; float: left; border-right: 1px solid #E8E9EA; border-bottom: 1px solid #E8E9EA; box-sizing: border-box;}
#header .side-l.new .brand ul li.table:nth-child(even){border-right: 0;}
#header .side-l.new .brand ul li .table-cell{display: table-cell; height: 120px; width:100%; vertical-align: middle;}
#header .side-l.new .brand .icon.brand{background: url(/duranno/img/left-brand-logo.svg) no-repeat 0 0; display: table; margin: 0 auto; width: 100px; height: 60px;}
#header .side-l.new .brand .icon.brand.qt{background-position: 0 0;}
#header .side-l.new .brand .icon.brand.sl{background-position: 0 -60px;}
#header .side-l.new .brand .icon.brand.moksin{background-position: 0 -120px;}
#header .side-l.new .brand .icon.brand.biblecollege{background-position: 0 -180px;}
#header .side-l.new .brand .icon.brand.yena{background-position: 0 -240px; }
#header .side-l.new .brand .icon.brand.yejo{background-position: 0 -300px;}
#header .side-l.new .brand .icon.brand.livinglife{background-position: 0 -360px;}
#header .side-l.new .brand .icon.brand.sena{background-position: 0 -420px;}
#header .side-l.new .brand .icon.brand.gaspelpj{background: url(/duranno/img/left-logo-gospel.png) 0 0 no-repeat; background-size: 100%; width: 92px; height: 40px; }
#header .side-l.new .brand .icon.brand.mall{background-position: 0 -480px;}
#header .side-l.new .brand li.btn-wrap{clear: both; margin-top: 15px;}

#header .side-l.new .brand ul li.table{position: relative;}
#header .side-l.new .brand ul li.table .box{transition: 0.2s all; opacity: 0; display: block; display: table; position: absolute; top: 0; left: 0; width: 100%; height: 120px; background: rgba(0,0,0,0.8); cursor: pointer;}
#header .side-l.new .brand ul li.table:hover .box{display: table; position: absolute; top: 0; left: 0; width: 100%; height: 120px; background: rgba(0,0,0,0.8); transition: 0.2s all; opacity: 1;}
#header .side-l.new .brand ul li.table:hover .box span{display: table-cell; vertical-align: middle;}
#header .side-l.new .brand ul li.table:hover .box strong{color: #fff; font-weight: 500; font-size: 16px;  text-align: center; display: block;}
#header .side-l.new .brand ul li.table:hover .box em{color: #fff; font-weight: 400; font-size: 12px; line-height: 1.4em;  text-align: center; display: block; margin: 0 auto; padding: 0 20px; word-break: keep-all; }
#header .side-l.new .brand ul li.table:hover .box em.line{width: 20px; border-bottom: 1px solid #fff; padding-top: 5px; margin-bottom: 5px; padding-left: 0; padding-right: 0;}
#header .side-close.new.on{display: none;}



#header .side-close{color: rgba(255,255,255,0.5); font-size: 35px; cursor: pointer; display: none; transition: 0.5s all; position: absolute; top: 0; left: 0; z-index: 202;}
#header .side-close:hover{transform: rotate(180deg);}
#header .side-close.on{display:block; opacity: 1;}


#header .side-r .close{right: auto; left: -40px;}

#header .side-r{background: #fff; right: -280px;}
#header .side-r .log{padding: 40px 25px 15px; border-bottom: 1px solid #ebebeb; text-align: center;}
#header .side-r .log button{border: 1px solid #ebebeb; height: 35px; line-height: 35px; width: 105px; box-sizing:border-box; background: #fff; color: #808080; font-size: 14px;}
#header .side-r .log .title{padding-bottom: 30px;}
#header .side-r .log .title i{color: #b2b2b2; vertical-align: middle; font-size: 28px;}
#header .side-r .log .title .name{color: #2b2b2b; font-size: 20px; font-weight: 300; padding:0 5px; vertical-align: middle;}
#header .side-r .log .title .name em{color: #2b2b2b; font-size: 20px; font-weight: 500;}
#header .side-r .log .title .hi{color: #8f8f8f; font-size: 15px; vertical-align: middle;}
#header .side-r ul{padding: 25px 0}
#header .side-r ul li a{display: block; font-size: 18px; color: #545454; padding:5px 40px;}
#header .side-r ul>li.line{border-bottom: 1px solid #ebebeb; margin-bottom: 15px; padding-top: 15px}




.fixed-footer{position: fixed; bottom: 0; z-index: 100; width: 100%; text-align: center; }

section.barcode{display:none; position:relative; bottom: 0; height: 218px; z-index:98; width: 100%; transition: 0.2s all; text-align: center; box-shadow: -2px 0px 5px rgba(0,0,0,0.5)}
section.barcode.logout{height: 191px; bottom: 0;}
section.barcode .inner{padding: 0; box-sizing: border-box; background: #fff;}
section.barcode .inner h3{font-size: 17px; font-weight: 500; color: #fff; height: 45px; line-height: 45px; padding: 0 15px;}
section.barcode .inner .gift-area h3{text-align: left; cursor: pointer; background: #e7537a;}
section.barcode .inner .member-area h3{text-align: left; cursor: pointer; background: #20aaba;}
section.barcode .inner h3 span{font-size: 17px; font-weight: 500; text-align: left; display: block; float: left; color: #fff;}
section.barcode .inner h3 em{font-size: 18px; vertical-align: middle; color: #FFF; display: block; float: right; font-weight: 500;}
section.barcode .inner .barcode-area{position: relative; padding: 15px; height: 98px; overflow: hidden;}
section.barcode .inner .nomember-area{padding: 20px;}
section.barcode .inner p.notice{margin: 0 auto; font-size: 16px; color: #666; font-weight: 500; padding-bottom: 20px;}
section.barcode .inner p.notice span{background: #698bbc; display: inline-block; color: #fff; font-size: 16px; font-weight: 400; padding: 0 5px; margin-top: 10px;}
section.barcode .inner .nomember-area button{background: #fff; border: 1px solid #5d86c1; color: #5d86c1; width: 80px; text-align: center; line-height: 38px; height: 38px; margin: 0 3px; display: inline-block;}
section.barcode .inner .link-area{text-align: right; padding-top: 10px;}
section.barcode .inner .link-area.pt-5{padding-top: 5px;}
section.barcode .inner .link-area .icon span{display: inline-block; color: #6791cd; vertical-align: middle; font-size: 14px;}
section.barcode .inner .link-area em{display: inline-block; width: 23px; height: 23px; background: url(/duranno/img/gift-foot-icon.png) 0 0 no-repeat; background-size: 100%; vertical-align: middle; margin-right: 5px;}
section.barcode .inner .link-area .icon.no2 em{background-position: 0 -46px;}
section.barcode .inner .link-area .icon.no2 span{color: #666666;}
section.barcode .inner .link-area .icon.no3 em{background-position: 0 -23px;}
section.barcode .inner .link-area .icon.no3 span{color: #16817a;}
section.barcode .inner .in-arrow.in-close{transform: rotate(180deg);}
section.barcode .title{font-weight: 500; color: #393939; font-size: 16px; padding: 15px 0;}
section.barcode .title span{font-weight: 500; color: #708ab8; font-size: 16px;}
section.barcode .b-area{padding-bottom: 10px; display: inline-block;}
section.barcode .b-num{letter-spacing: 1px;}
section.barcode .b-num a{letter-spacing: 1px;}

.fixed-footer .arrow{display:block; position: absolute; top: -45px; left: 50%; z-index: 100; margin-left: -100px; width: 200px; text-align: center; border-radius: 5px 5px 0 0; height: 45px; line-height: 45px; background:url(/duranno/img/gift-foot-btn.png) 0 0 no-repeat; background-size: 200px; color: #fff; cursor: pointer}

section.barcode .arrow i{font-size: 30px; color: #fff; cursor: pointer; transform:rotate(180deg); margin-top: -7px;}
section.barcode.off{bottom: 0;}
section.barcode.off .arrow i{transform:rotate(0deg); padding:5px;}
section.barcode .plus{position: absolute; bottom: 6px; right: 10px; color: #999; cursor: pointer;}

/*section.barcode .inner.nomember{height: 141px; width: 100%; text-align: center; padding-left: 40px; padding-right: 40px; background: transparent;}
section.barcode .nomember p{font-size: 18px; vertical-align: middle; display: inline-block; height: 100px; line-height: 100px;}
section.barcode .nomember p span{font-size: 18px; font-weight: 500; color: #fff; display: inline-block;}
section.barcode .nomember p:first-of-type{text-align: right;}
section.barcode .nomember p:last-of-type{text-align: center;}
section.barcode .nomember .svg{width: 62px; height: 100px; text-align: center; padding-right: 20px;}*/

section.ad{background: #4c648c; position: relative; display: none; z-index: 99;}
section.ad .w100{cursor: pointer;}
section.ad .ad-close{position: absolute; top: 10px; right: 10px!important; box-shadow: 0px 0px 15px rgba(0,0,0,0.15); background: rgba(0,0,0,0.08);}
section.ad.other{display: none;}


.real-footer{background: #424953; padding-top: 60px}
.real-footer .left{width: 40%;}
.real-footer .left ul li{float: left; width: 51px; height: 51px; background: url(../img/footer-sns.png) 0 0 no-repeat; margin-right: 10px; }
.real-footer .left ul li.insta{background-position: -51px 0;}
.real-footer .left ul li.cafe{background-position: -102px 0;}
.real-footer .left ul li.mail{background-position: -153px 0;}
.real-footer .left ul li.tel{background-position: -204px 0;}
.real-footer .left p{color: #abb4c3; font-size: 14px; font-weight: 300; margin-top: 25px; line-height: 1.6em;}
.real-footer .left p a{color: #abb4c3; font-size: 14px;}
.real-footer .right{width: 60%;}
.real-footer .right dl{width: 20%; float: left; text-align: center;}
.real-footer .right dl dt{color: #f0f0f0; font-size: 16px; border-right: 1px solid rgba(255,255,255,0.5); line-height: 1em; margin: 10px 0 20px;}
.real-footer .right dl:last-child dt{border-right:0;}
.real-footer .right dl dd{line-height: 1.6em;}
.real-footer .right dl dd a{color: #b4bac2; font-size: 14px; font-weight: 300;}
.real-footer>p{color: #8f96a2; font-size: 14px; font-weight: 300; clear:both; width: 100%; text-align: center; padding: 80px 0; line-height: 1.6em;}


/* duranno books local nav bar */
.books-lnb{width: 100%; height: 40px; line-height: 40px; background: #fafafa; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; box-shadow: 0px 2px 5px rgba(0,0,0,0.05); position: relative; z-index: 10;}
.books-lnb .w100{position: relative;}

.books-lnb .books-search{display: none; float: left; background: #f0f0f0; width: 260px; height: 30px; line-height: 30px; border-radius: 15px; margin-top: 12.5px;}
.books-lnb .books-search input{border: 0; background: transparent; width: 220px; line-height: 30px; height: 30px; display: block; float: left; box-sizing: border-box;}
.books-lnb .books-search :-moz-placeholder{color: #999; opacity: 1; font-size: 13px; text-align: center; letter-spacing: 0.5px;}
.books-lnb .books-search ::-moz-placeholder{color: #999; opacity: 1; font-size: 13px; text-align: center; letter-spacing: 0.5px;}
.books-lnb .books-search ::-webkit-input-placeholder{color: #999; opacity: 1; font-size: 13px; text-align: center; letter-spacing: 0.5px;}
.books-lnb .books-search input::-ms-input-placeholder{color: #999; opacity: 1; font-size: 13px; text-align: center; letter-spacing: 0.5px;}
.books-lnb .books-search button{display: block; float: left; width: 40px; text-align: center; background: transparent; margin-top: 4px;}
.books-lnb ul{float: left; margin-left: 57px;}
.books-lnb ul li{display: inline-block; margin-right: 20px;}
.books-lnb ul li a{color: #555; font-size: 14px; font-weight: 400;}
.books-lnb ul li.on{color: #4189C2;}
.books-lnb ul li.on a{color: #4189C2;}


.modal .inner{position: fixed; z-index: 100; top: 50%; left: 50%; margin-top: -55px; margin-left: -55px; background: rgba(51,51,51,0.9); border-radius: 50%; width: 110px; height: 110px;}
.modal .inner span{display: block; text-align: center; margin: 20px auto 0; }
.modal .inner p{color: #fff; font-size: 14px; text-align: center; margin-top: 4px;}

.i-loading{background: url(/duranno/img/loading-icon.svg) 0px 0 no-repeat; width: 50px; height: 50px; display: block; position: absolute; top: 50%; right: 50%; margin-top: -25px; margin-right: -25px; animation-name: ani; animation-duration: 0.5s; animation-iteration-count: infinite; transition: 0.2s all; animation-timing-function: linear;}
.i-loading.fin{animation-name: none; background: url(/duranno/img/loading-icon.svg) 0px -100px no-repeat;}
@keyframes ani{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}




@media screen and (max-width: 1200px){ /*광고배너 배경변경위치*/
	#header .ad.other{display:block; position: fixed; background:#541D0E; bottom: 0; z-index: 100; width: 100%; box-shadow: -2px -2px 2px rgba(0,0,0,0.2)}
	#header .ad.other .w100{text-align: center;}
	section.barcode{display: block;}
	section.ad{display: block;}
	.fixed-footer .arrow{display:block;}
}


@media screen and (max-width: 1023px){
	#header .ad .web{width: 100%;}
	#header .ad .ad-close{right: 10px;}
	#header .nav-area{height: 90px;}
	#header #new-nav .w100{top: -15px;}
	#header #nav{height: 80px; line-height: 80px; top: 0;}
	#header #nav ul{display: none;}
	#header #nav .left{float: none; width: 100%; text-align: center;}
	/*#header .top{top: -10px;}*/
	#header .top.on{top: 80px; z-index: 100;}
	#header .top .brand.on{position: fixed; top: 0; left: 0; z-index: 101}
	#header .top .brand.on button{height: 90px; line-height: 90px;background: rgba(22,26,32,0.5);}
	#header .top ul.right li{display: none;}
	#header .top ul.right li:last-child{display: block;}
	#header #new-nav .search-area{width: 40%; line-height: 40px; height: 40px; margin-top: 12px;}
	#header #new-nav .search-area .search-input{width: 65%; height: 40px; line-height: 40px; padding: 0;}
	#header #new-nav h1{width: 130px; background-size: 100%; margin-left: 15px; margin-top: 0;}
	#header #new-nav .top-topic{right: 15px; top: 43px;}
	#header #new-nav .search-area .search-btn{height: 40px; }
	#header #new-nav .search-area .search-btn .i-search{margin-top: 5px;}


	.real-footer{padding: 60px 20px 100px}
	.real-footer .left{width: 100%; float: right;}
	.real-footer .left ul{text-align: center;}
	.real-footer .left ul li{float: none; display: inline-block; width: 41px; height: 41px; background-size: 205px; margin: 0 5px}
	.real-footer .left ul li.insta{background-position: -41px 0;}
	.real-footer .left ul li.cafe{background-position: -82px 0;}
	.real-footer .left ul li.mail{background-position: -123px 0;}
	.real-footer .left ul li.tel{background-position: -164px 0;}
	.real-footer .left p{text-align: center; margin-bottom: 50px;}
	.real-footer .right{width: 100%; float: left;}
	.real-footer>p{padding-bottom: 0; font-size: 13px; padding-top: 40px}


	/* duranno books local nav bar */
	#header #nav h1 .svg.books{display: inline-block; margin-left: 20px;}

	.books-lnb .semo{display: none;}
	.books-lnb{box-sizing: border-box; height: auto; line-height: 45px;}
	.books-lnb .books-search{width: 100%; padding: 3px 10px; box-sizing: border-box; height: 36px; line-height: 36px; border-radius: 18px}
	.books-lnb .books-search button{float: right; width: 10%}
	.books-lnb .books-search input{width: 90%; padding: 0 0 0 10%;}
	.books-lnb .books-search-wrap{padding: 0 10px;}
	.books-lnb .ul-wrap{width: 100%; overflow-x: scroll;}
	.books-lnb ul{width: 610px; /*margin: 0 auto; float: none; */text-align: left; margin-left: 0;}
	.books-lnb ul li{letter-spacing: -1px; margin-right: 15px;}
	.books-lnb ul li:first-child{margin-left: 15px;}
}

@media screen and (max-width: 649px){
	#header{background: #fff;}

	#header .top{background: transparent; border-top: 0; bottom: 86px; border-bottom: 0; box-shadow: none; padding: 0 5px; box-sizing: border-box; top: auto; height: 45px;}
	#header .top.on{top: 4px;}
	#header .top ul.left{display: none;}	
	#header .top ul.right li:last-child{background: transparent;}
	#header .top .brand button{background: transparent;}	
	#header .top .mybtn .i-my{background-position: 0 -255px; background-color: transparent;}
	#header .top .brand button.new .i-menu{background-position: 0 -210px; background-color: transparent;}
	#header .ad .web{display: none;}
	#header .ad .mobile{display: block; width: 100%;}



	#header .search-event .img-wrap .web{display: none;}
	#header .search-event .img-wrap .mobile{display: block; width: 100%; }
	#header #new-nav{padding-bottom: 40px; box-shadow: 0px 3px 6px rgba(0,0,0,0.05); height: 95px;}
	#header #new-nav .w100{padding: 0 15px; box-sizing: border-box;}
	#header #new-nav h1{width: 88px; left: 50%; margin-left: -44px; line-height: 13px; height: 13px; top: 38px; margin-top: 0; z-index: 101;}
	#header #new-nav h1.web{display: none;}
	/* #header h1.mobile{position: absolute; left: 50%; top: 16px; z-index: 101; display: block; width: 123px; height: 16px; background-image: url(/duranno/img/core/40th_duranno_m.svg); margin-left: -61.5px; text-indent: -9999em;} */
	#header h1.mobile{position: absolute; left: 50%; top: 50%; z-index: 101; display: block; background: url(/duranno/img/core/duranno-logo.svg) 0 0 no-repeat; margin-left: -61.5px; text-indent: -9999em;background-size: 123px; width: 123px; height: 17px; margin-top: -10px;}	
	
	#header #new-nav .search-area{margin-top: 70px; width: 100%;}
	#header #new-nav .top-topic{width: 100%; left: 0; bottom: -12px; top: auto;}
	#header #new-nav .top-topic p{left: 15px; letter-spacing: -1.5px; word-spacing: -1px vertical-align: middle;}
	#header #new-nav .top-topic ul{top: 0; left: 0; width: 100%;}
	#header #new-nav .top-topic ul li a{width: 100%; padding-left: 130px; letter-spacing: -1px; word-spacing: -1px; vertical-align: middle;}
	#header #new-nav .search-slick button{right: 35px;}
	#header #new-nav .search-slick button.slick-next{right: 15px;}

	/*.main{margin-top: 15px;} 헤더 수정되면 옮길것...*/


	
/*	section.barcode{background:rgba(63,66,72,0.9);}
	section.barcode .nomember.inner{width: auto; margin: 0 auto; background:transparent;}
	section.barcode .nomember{display: table;}
	section.barcode .nomember .svg{height: 56px; width: 56px;}
	section.barcode .nomember p{display: table-cell; height: auto; line-height: 1.6em;}
	section.barcode .nomember p:last-of-type{text-align: center; width: 165px;}*/

	#header .side-l.new .brand ul li.table:hover .box{display: none;}


/*	#header .top .brand{position: absolute; z-index: 100; bottom: 0; left: 0; }
	#header .top .brand button{height: 50px; line-height: 50px;}
	#header .top .brand button .svg{display: none;}
	#header .top .brand button.new{border-right: 0; border-left: 0;}
	#header .top .brand button.new .icon.duranno.logo{display: none;}
	#header .top .brand button i{color: #7a7e8a; display: block; font-size: 28px;}
	#header .top .brand button{background:transparent;}
	#header .top .brand span{display: none;}
	#header .top .brand.on button{height: 50px; line-height: 50px;}
	#header .nav-area{height: auto;}

	#header #nav{height: 50px; line-height: 50px; top: 0;}
	#header #nav h1 .svg{height: 14px;}*/

	.real-footer .right{float: none;}
	.real-footer .right dl{width: 33.3333%; margin-bottom: 30px;}
	.real-footer .right dl:nth-of-type(3) dt{border-right:0;}


	/* duranno books local nav bar */
	/*.books-lnb{margin-top: 15px;}*/
	.books-lnb ul{width: 480px;}
/*	.books-lnb ul li{margin-left: 15px;}*/


}

@media screen and (max-width: 420px){
	#header .side-l.new{width: 100%;}
	#header .side-l.new h1{padding: 10px 0;}
	#header .side-l.new .icon.duranno-logo{background: url(/duranno/img/left-icon.svg) 0 -585px; width: 134px; height: 33px; margin: 0 0 0 15px; float: left;}
	#header .side-close.new.on{display: block; color: #7a7e8a; position: static; float: right; margin-right: 10px;}
}

@media screen and (max-width: 350px){
	.real-footer .long-word{letter-spacing:-2px; word-spacing:-2px}
}