@import url('sidebar.css');
@media (min-width:1200px) {
    #cms-wrapper{padding:150px 0 0;background-color:#000}
    #cms-bg{background-color:#ccc;padding:40px 20px 0}
    #cms-container{max-width:1600px;margin:0 auto}
    #cms-header{width:100%;align-items:center}
    #cms-photo-wrapper{position:relative;width:56%;margin-right:auto;}
    #cms-titles{width:40%;padding:20px 20px 20px 0}
    #cms-design{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}
    #cms-design > span:nth-child(1){position:absolute;width:100%;height:5px;top:14%;left:0;background-color:#000;transform-origin:0 0;-moz-transform:scale(0,1);-webkit-transform:scale(0,1);-o-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1);-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;transition:all .4s linear}
    #cms-design > span:nth-child(2){position:absolute;width:5px;height:72%;top:14%;right:0;background-color:#000;transform-origin:0 0;-moz-transform:scale(1,0);-webkit-transform:scale(1,0);-o-transform:scale(1,0);-ms-transform:scale(1,0);transform:scale(1,0);-webkit-transition:all .6s linear;-moz-transition:all .6s linear;-o-transition:all .6s linear;transition:all .6s linear}
    #cms-design > span:nth-child(3){position:absolute;width:100%;height:5px;bottom:14%;left:0;background-color:#000;transform-origin:100% 0;-moz-transform:scale(0,1);-webkit-transform:scale(0,1);-o-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1);-webkit-transition:all .4s linear;-moz-transition:all .4s linear;-o-transition:all .4s linear;transition:all .4s linear}
    #cms-design > span:nth-child(4){position:absolute;width:5px;height:72%;top:14%;left:0;background-color:#000;transform-origin:0 100%;-moz-transform:scale(1,0);-webkit-transform:scale(1,0);-o-transform:scale(1,0);-ms-transform:scale(1,0);transform:scale(1,0);-webkit-transition:all .6s linear;-moz-transition:all .6s linear;-o-transition:all .6s linear;transition:all .6s linear}
    #cms-design.active > span{-moz-transform:scale(1,1);-webkit-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,0);transform:scale(1,1);-webkit-transition:all .6s linear;-moz-transition:all .6s linear;-o-transition:all .6s linear;transition:all .6s linear}
    #blog-container{background-color:#ccc}
    #blog-photo-wrapper{position:relative;max-width:1600px;z-index:1}
    #blog-photo-container{width:100%}
    #blog-photo{display:block;width:100%;position:relative;padding-bottom:50%;overflow:hidden}
    #blog-photo img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
    #blog-photo:after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.44);z-index:2}
    #blog-inner{max-width:1640px;padding:100px 20px;margin:0 auto;border-bottom:6px solid #e7e7e7}
    #blog-desc{font-size:1.202vw;line-height:1.4;color:#020202}
    .blog-dateTime{margin-top:10%;display:inline-block;font-size:1.202vw;font-weight:500;color:#fff;background-color:#000;padding:14px 25% 14px 16px}
    .blog-title{margin-top:8%;font-size:1.567vw;font-weight:600;color:#fff;line-height:1.1}
    .blog-author-wrapper{margin-top:8%;width:100%}
    .blog-author-container{display:inline-flex;padding:2% 3%;background-color:#dfdfdf;align-items:center}
    .blog-author-photo-container{width:80px}
    .blog-author-photo{position:relative;width:100%;padding-bottom:100%;overflow:hidden;border-radius:50%}
    .blog-author-photo > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
    .blog-author-contents{width:calc(100% - 80px);padding:0 15px}
    .blog-author-hashtag{font-size:1.198vw;font-weight:600;color:#c5161d} 
    .blog-author-title{margin-top:8px;font-size:1.198vw;font-weight:500;color:#030303;text-transform:uppercase}
    .blog-arrows{position:absolute;width:80%;height:38px;padding:0 6.6% 0 8.6%;left:0;bottom:0}
    .blog-left{height:100%;width:calc(50% - 7px);align-items:center;background-color:#000;padding:8px 15px;cursor:pointer}
    .blog-right{margin-left:auto;height:100%;width:calc(50% - 7px);align-items:center;background-color:#000;padding:8px 15px;justify-content:flex-end;cursor:pointer}
    .blog-left svg,.blog-right svg{height:100%;width:auto}
    .blog-left:hover svg path,.blog-right:hover svg path{fill:#ed1c24!important}
}
@media (min-width:765px) and (max-width:1199px) {
    #cms-wrapper{background-color:#000}
    #blog-container{background-color:#ccc}
    #blog-photo-wrapper{position:relative;max-width:1600px;z-index:1}
    #blog-photo-container{width:100%}
    #blog-photo{display:block;width:100%;position:relative;padding-bottom:50%;overflow:hidden}
    #blog-photo img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
    #blog-photo:after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.44);z-index:2}
    #blog-inner{max-width:1640px;padding:30px 20px 70px;margin:0 auto}
    #blog-desc{font-size:2.6vw;line-height:1.4;color:#020202}
    .blog-dateTime{display:inline-block;font-size:2.702vw;font-weight:500;color:#fff;background-color:#000;padding:14px 10% 14px 16px}
    .blog-title{margin-top:25px;font-size:3vw;font-weight:600;color:#fff;line-height:1.1}
    .blog-author-wrapper{margin-top:25px;width:100%}
    .blog-author-container{display:inline-flex;padding:2% 3%;background-color:#dfdfdf;align-items:center}
    .blog-author-photo-container{width:80px}
    .blog-author-photo{position:relative;width:100%;padding-bottom:100%;overflow:hidden;border-radius:50%}
    .blog-author-photo > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
    .blog-author-contents{width:calc(100% - 80px);padding:0 15px}
    .blog-author-hashtag{font-size:2.6vw;font-weight:600;color:#c5161d}
    .blog-author-title{margin-top:8px;font-size:2.6vw;font-weight:500;color:#030303;text-transform:uppercase}
    .blog-arrows{position:absolute;width:60%;height:38px;padding:0 6.6% 0 8.6%;left:0;right:0;bottom:0;margin:0 auto}
    .blog-left{height:100%;width:calc(50% - 7px);align-items:center;background-color:#000;padding:8px 15px;cursor:pointer}
    .blog-right{margin-left:auto;height:100%;width:calc(50% - 7px);align-items:center;background-color:#000;padding:8px 15px;justify-content:flex-end;cursor:pointer}
    .blog-left svg,.blog-right svg{height:100%;width:auto}
    .blog-left:hover svg path,.blog-right:hover svg path{fill:#ed1c24!important}
    .blog-mobile{padding:20px;background-color:#ed1c24}
}
@media (min-width:0px) and (max-width:764px) {
    #cms-wrapper{background-color:#000}
    #blog-container{background-color:#ccc}
    #blog-photo-wrapper{position:relative;max-width:1600px;z-index:1}
    #blog-photo-container{width:100%}
    #blog-photo{display:block;width:100%;position:relative;padding-bottom:50%;overflow:hidden}
    #blog-photo img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
    #blog-photo:after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-color:rgba(0,0,0,0.44);z-index:2}
    #blog-inner{max-width:1640px;padding:30px 10px 70px;margin:0 auto}
    #blog-desc{font-size:3.6vw;line-height:1.4;color:#020202}
    .blog-dateTime{display:inline-block;font-size:3.502vw;font-weight:500;color:#fff;background-color:#000;padding:14px 10% 14px 16px}
    .blog-title{margin-top:25px;font-size:3.8vw;font-weight:600;color:#fff;line-height:1.1}
    .blog-author-wrapper{margin-top:25px;width:100%}
    .blog-author-container{display:inline-flex;padding:2% 3%;background-color:#dfdfdf;align-items:center}
    .blog-author-photo-container{width:80px}
    .blog-author-photo{position:relative;width:100%;padding-bottom:100%;overflow:hidden;border-radius:50%}
    .blog-author-photo > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
    .blog-author-contents{width:calc(100% - 80px);padding:0 15px}
    .blog-author-hashtag{font-size:3.6vw;font-weight:600;color:#c5161d}
    .blog-author-title{margin-top:8px;font-size:3.6vw;font-weight:500;color:#030303;text-transform:uppercase}
    .blog-arrows{position:absolute;width:80%;height:38px;padding:0 6.6% 0 8.6%;left:0;right:0;bottom:0;margin:0 auto}
    .blog-left{height:100%;width:calc(50% - 7px);align-items:center;background-color:#000;padding:8px 15px;cursor:pointer}
    .blog-right{margin-left:auto;height:100%;width:calc(50% - 7px);align-items:center;background-color:#000;padding:8px 15px;justify-content:flex-end;cursor:pointer}
    .blog-left svg,.blog-right svg{height:100%;width:auto}
    .blog-left:hover svg path,.blog-right:hover svg path{fill:#ed1c24!important}
    .blog-mobile{padding:20px 10px;background-color:#ed1c24}
}