@charset "uft-8";

/* 글씨들 아래에서 위로 올라오는 효과 */
.package_ani{opacity:0;}
.divide_bg{background-color:rgba(0,0,0,0.1);}

/** 패키지 1 - 전체 패키지 **/
.package_1_wrap{width:100%; height:100%; background:url(../images/package_bg.png) no-repeat 50%; background-size:300%; padding-top:300px; transition:0.9s;}
.package_1_area{width:100%; position:relative; padding-top:83%; max-width:900px; margin:0 auto;}
.package_device{display:block; position:absolute; transition:0.6s;}
.package_device.laptop{width:100%; max-width:772px; top:0; left:0; transition-delay:0.5s;}
.package_device.tablet{width:45%; max-width:290px; top:20%; right:0; transition-delay:0.9s;}
.package_device.phone{width:44%; max-width:270px; bottom:0; right:30%; transition-delay:1.3s;}

.package_1_wrap.package_ani{background-size:500%;}
.package_device.laptop.package_ani{top:-20%;}
.package_device.tablet.package_ani{top:0%;}
.package_device.phone.package_ani{bottom:20%;}

@media all and (min-width:480px) and (orientation: landscape){
    .package_1_wrap{height:auto; padding:60px 0 50px 0;}
    .package_1_area{width:65%; padding-top:48%;}
    .package_device.tablet{width:38%; top:17%;}
    .package_device.phone{width:35%; right:20%;}
    
    .package_1_wrap{background-size:200%;}
    .package_1_wrap.ani{background-size:300%;}
    .package_device.tablet.ani{top:-3%;}
}
@media all and (min-width:640px){
    
}
@media all and (min-width:768px){
    .package_1_wrap{background-size:160%; height:100%; padding:60px 0 0 0;}
    .package_1_wrap.ani{background-size:300%;}
}
@media all and (min-width: 1024px){
    .package_1_wrap{padding-top:130px;}
    .package_1_area{padding-top:0; height:480px;}
}
@media all and (min-width:1280px){
    .package_1_wrap{background-size:140%; height:100%; padding:160px 0 0 0;}
    .package_1_area{height:550px;}
}
@media all and (min-width:1440px){
    .package_1_wrap{background-size:120%;}
}
@media all and (min-width: 1680px) and (orientation: landscape){
    .package_1_wrap{padding:360px 0 0 0; background-size:110%;}
    .package_1_area{left:-55px;}
}
@media all and (min-width:1920px){
    .package_1_wrap{background-size:1920px;}
}


/** 패키지 2 - 책소개 **/
.package_2_wrap{height:100%;}
.package_2_area{padding:30px 10% 30px 10%; width:100%; height:100%;}
.package_2_list{width:100%; max-width:1200px; margin:0 auto; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.package_2_list li{background-color:rgba(255,255,255,0.8); width:100%; border-radius:20px; margin:0 0 40px 0; text-align:center; padding:25px 10px 35px 10px; position:relative; top:0; transition:0.5s;}

.package_2_list li:nth-child(1){transition-delay:0.1s;}
.package_2_list li:nth-child(2){transition-delay:0.3s;}
.package_2_list li:nth-child(3){transition-delay:0.5s;}
.package_2_list li:nth-child(4){transition-delay:0.7s;}
.package_2_list li:nth-child(5){transition-delay:0.9s;}
.package_2_list li:nth-child(6){transition-delay:1.1s;}

.package_2_list li.package_ani{top:100px;}


.book_img{display:block; width:85%; max-width:350px; margin:0 auto;}
.package_2_list .book_img{width:90%; max-width:210px;}
.book_title{font-size:21px; padding:15px 0 10px 0; letter-spacing:-1px;}
.book_more{width:100px; height:38px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; background-color:#071b3e; color:#fff; font-size:20px; border-radius:30px; position:absolute; left:calc(50% - 50px); bottom:-18px; transition:0.2s;}
.book_more:hover{background-color:#fff; color:#071b3e;}

a.book_buy_btn{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:180px; height:50px; background-color:#071b3e; color:#fff; border-radius:30px; margin:20px auto 0 auto; font-size:24px; transition:0.2s;}
a.book_buy_btn:hover{background-color:#fff; color:#071b3e;}

.book_buy_btn_wrap{transform:scale(1); transition:0.5s; transition-delay:1.3s;}
.book_buy_btn_wrap.package_ani{transform:scale(0.8);}

.package_footer{position:relative;}
.package_footer footer{bottom:0; left:0; right:0;}

@media all and (min-width:480px){
    .package_2_area{padding:50px 2% 50px 2%;}
    .package_2_list li{width:49%;}
    .book_title{font-size:17px;}
    .book_title_eng{font-size:14px;}
}
@media all and (min-width:480px) and (orientation: landscape){
    .package_2_area{padding:50px 4% 50px 4%;}
}
@media all and (min-width:640px){
    .package_2_area{padding:50px 4% 50px 4%;}
    .package_2_list li{width:48%;}
    .book_title{font-size:21px;}
    .book_title_eng{font-size:16px;}
}
@media all and (min-width:768px){
    
}
@media all and (min-width:1024px){
    .package_2_list li{width:31%; margin:0 0 50px 0;}
    .book_title{font-size:21px;}
    .book_title_eng{font-size:16px;}
}
@media all and (min-width:1280px){
    .package_2_area{padding:50px 0;}
    .package_2_list li{width:31.2%; padding:35px 30px 45px 30px;}
    .book_title{font-size:25px; padding:15px 0 10px 0;}
    .book_title_eng{font-size:19px;}
}
@media all and (min-width:1440px){

}
@media all and (min-width:1680px) and (orientation:landscape){
    /*
    .package.fp-auto-height.fp-section{height:100%;}
    */
    .package_2_wrap{height:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:130px 0 0 0;}
    .package_2_area{padding:0;}
    .package_2_list li{width:30%; padding:20px 30px 35px 25px; margin:0 0 40px 0;}
    .package_2_list li:nth-child(3) ~ li{margin:0 0 30px 0;}
    
    .package_footer footer{position:absolute;}
}