/* banner (KV) */
.nl_banner{padding-top: 80px;}
.nl_kv{position: relative; height: 400px; background: #000; overflow: hidden;}
.nl_kv_img{position: absolute; top: -57px; left: 50%; width: 1120px; height: 490px; margin-left: -446px; background: url(../images/newsletter/kv_pc.jpg) no-repeat 0 0 / 100% 100%;}
.nl_kv_inner{position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 115px; color: #fff;}
.nl_kv_tit{font-size: 64px; font-weight: 700; line-height: 64px;}
.nl_kv_txt{margin-top: 20px; font-size: 18px; font-weight: 500; line-height: 1.5; word-break: keep-all;}
.nl_br{display: none;}


/* list */
.nl_section{padding: 40px 0 80px;}
.nl_section .section_inner{width: 100%; max-width: 1180px; margin: auto;}
.nl_section .nl_tabs{display: flex; flex-wrap: wrap; justify-content: center;}
.nl_section .nl_tab{box-sizing: border-box; width: 306px; height: 52px; padding: 0; border: 1px solid #2196f3; background: #fff; color: #2196f3; font-size: 15px; font-weight: 500; line-height: 24px; text-align: center; text-indent: 0; cursor: pointer; transition: all .3s ease;}
.nl_section .nl_tab + .nl_tab{margin-left: -1px;}
.nl_section .nl_tab.active{background: #2196f3; color: #fff;}
.nl_section .nl_tab:hover:not(.active){background: #e3f2fd;}
.nl_section .nl_list{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; margin-top: 90px;}
.nl_section .nl_list li a{display: flex; flex-direction: column; box-sizing: border-box; height: 100%; min-height: 370px; border: 1px solid #b9b9b9; border-radius: 5px; background: #fff; overflow: hidden; transition: border-color .3s ease;}
.nl_section .nl_list li a:hover{border-color: #2196f3;}
.nl_section .nl_list .nl_thumb{position: relative; flex: none; padding-bottom: 51.05%; background: #f5f5f5; overflow: hidden;}
.nl_section .nl_list .nl_thumb img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all .5s ease;}
.nl_section .nl_list li a:hover .nl_thumb img{transform: scale(1.07);}
.nl_section .nl_list .nl_info{display: flex; flex: 1; flex-direction: column; padding: 20px 29px;}
.nl_section .nl_list .nl_tit{display: block; font-size: 24px; font-weight: 700; line-height: 35px; color: #303d49; word-break: keep-all;}
.nl_section .nl_list .nl_sub{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 20px; font-weight: 400; line-height: 30px; letter-spacing: -0.4px; color: #303d49; word-break: keep-all;}
.nl_section .nl_list .nl_link{display: block; margin-top: auto; padding-top: 20px; font-size: 14px; font-weight: 700; line-height: 14px; color: #2196f3;}
.nl_section .nl_more{text-align: center; margin-top: 56px;}
.nl_section .nl_more a{display: inline-block; width: 120px; height: 54px; border-radius: 5px; background: #2196f3; color: #fff; font-size: 16px; font-weight: 500; line-height: 54px; text-align: center;}
.nl_section .nl_empty{padding: 100px 0; text-align: center; font-size: 16px; color: #777777;}


/* view */
.nl_view_section{padding: 80px 0 80px;}
.nl_view_section .section_inner{width: 100%; max-width: 1000px; margin: auto;}
.nl_view_section .nl_view_title{display: flex; align-items: center; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #ddd; color: #000;}
.nl_view_section .nl_view_tit{flex: none; max-width: 50%; font-size: 36px; font-weight: 700; line-height: 44px; word-break: keep-all;}
.nl_view_section .nl_view_dot{flex: none; width: 8px; height: 8px; background: url(../images/newsletter/title_dot.svg) no-repeat 0 0 / 100% 100%;}
.nl_view_section .nl_view_sub{min-width: 0; font-size: 36px; font-weight: 300; line-height: 44px; word-break: keep-all;}
.nl_view_section .nl_view_content{max-width: 600px; margin: 80px auto 0; overflow-x: auto;}
.nl_view_section .nl_view_content iframe{display: block; width: 100%; max-width: none; min-height: 600px; border: 0;}
.nl_view_section .nl_subscribe{margin-top: 60px; padding-bottom: 20px;} /* padding : 이미지가 배너 아래로 튀어나오는 높이 */
.nl_view_section .nl_subscribe a{position: relative; display: block; width: 100%; max-width: 600px; height: 148px; margin: 0 auto;}
.nl_view_section .nl_subscribe .nl_sub_pop{position: absolute; top: 0; left: 230px; width: 354px; height: 168px; background: url(../images/newsletter/banner_pop.png) no-repeat 0 0 / 100% 100%;}
.nl_view_section .nl_subscribe .nl_sub_box{position: absolute; top: 0; left: 0; width: 100%; height: 148px; border-radius: 8px; background: #000; overflow: hidden;}
.nl_view_section .nl_subscribe .nl_sub_box:before{content: ''; position: absolute; top: 0; left: 230px; width: 354px; height: 168px; background: url(../images/newsletter/banner_in.jpg) no-repeat 0 0 / 100% 100%;}
.nl_view_section .nl_subscribe .nl_sub_txt{position: absolute; top: 72px; left: 40px; transform: translateY(-50%); font-size: 28px; font-weight: 700; line-height: 40px; color: #fff; white-space: nowrap;}
.nl_view_section .nl_subscribe .nl_sub_arrow{display: inline-block; width: 20px; height: 16px; vertical-align: middle; background: url(../images/newsletter/banner_pc_arrow.svg) no-repeat 0 0 / 100% 100%; transition: transform .3s ease;}
.nl_view_section .nl_subscribe a:hover .nl_sub_arrow{transform: translateX(5px);}


@media screen and (max-width:1200px) {
    .nl_banner{padding-top: 50px;}
    .nl_kv_inner{padding-left: 30px; padding-right: 30px;}
    .nl_section .section_inner, .nl_view_section .section_inner{width: 92%;}
}
@media screen and (max-width:1000px) {
    .nl_section .nl_list{grid-template-columns: repeat(2, minmax(0, 1fr));}
    .nl_view_section{padding: 60px 0 80px;}
    .nl_view_section .nl_view_content{margin-top: 60px;}
}
@media screen and (max-width:640px) {
    /* KV */
    .nl_kv{height: 300px;}
    .nl_kv_img{top: -8px; left: -12px; width: 394px; height: 316px; margin-left: 0; background-image: url(../images/newsletter/kv_m.jpg);}
    .nl_kv_inner{padding: 80px 20px 0;}
    .nl_kv_tit{font-size: 48px; line-height: 48px;}
    .nl_kv_txt{font-size: 16px;}
    .nl_br{display: inline;}

    /* list */
    .nl_section{padding: 20px 0 80px;}
    .nl_section .section_inner, .nl_view_section .section_inner{width: auto; margin-left: 20px; margin-right: 20px;}
    .nl_section .nl_tabs{justify-content: flex-start;}
    .nl_section .nl_tab{width: 50%;}
    .nl_section .nl_list{grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px;}
    .nl_section .nl_list li a{min-height: 305px;}
    .nl_section .nl_list .nl_thumb{padding-bottom: 51.25%;}
    .nl_section .nl_list .nl_info{padding: 12px 19px 19px;}
    .nl_section .nl_list .nl_sub{font-size: 16px; line-height: 24px; letter-spacing: -0.32px;}
    .nl_section .nl_list .nl_link{padding-top: 16px;}

    /* view */
    .nl_view_section{padding: 40px 0 60px;}
    .nl_view_section .nl_view_title{display: block; padding-bottom: 20px;}
    .nl_view_section .nl_view_tit{display: block; max-width: none; font-size: 32px; line-height: 40px;}
    .nl_view_section .nl_view_dot{display: none;}
    .nl_view_section .nl_view_sub{display: block; font-size: 20px; font-weight: 400; line-height: 30px;}
    .nl_view_section .nl_view_content{max-width: none; margin-top: 20px;}
    .nl_view_section .nl_subscribe{margin-top: 60px; padding-bottom: 16px;}
    .nl_view_section .nl_subscribe a{max-width: 320px; height: 120px;}
    .nl_view_section .nl_subscribe .nl_sub_pop{left: 26px; width: 286px; height: 136px;}
    .nl_view_section .nl_subscribe .nl_sub_box{height: 120px;}
    .nl_view_section .nl_subscribe .nl_sub_box:before{left: 26px; width: 286px; height: 136px;}
    .nl_view_section .nl_subscribe .nl_sub_txt{top: 60px; left: 20px; font-size: 20px; line-height: 28px;}
    .nl_view_section .nl_subscribe .nl_sub_arrow{width: 17px; height: 14px; background-image: url(../images/newsletter/banner_m_arrow.svg);}
}