/* 소식지  sub02_02_01*/

/* 검색바 */
.s020201 .program--search{margin: 20px 0; padding:33px 20px 30px}
.s020201 .program--search .float-md-left{display: inline-block; margin-right: 10px;}
.s020201 .program--search .float-md-left,.s020201 .program--search .search_inner.float-md-right,.s020201 .program--search .search_inner.float-md-right .fieldset{float:none; width:auto}
.s020201 .program--count:before{top: -2px;}


/* 소식지 */
.s020201 .bx{padding:20px 46px; border-top:2px solid #df3127;; background-color:#f7f7f7;}
.s020201 .bx .lay{position:relative; min-height:400px; padding-left:250px;}
.s020201 .bx .lay .head{position:absolute; left:0; top:0; width:292px;}
.s020201 .bx .lay .head div{
    margin-bottom:20px; border:1px solid #ddd; background-color:#fff;
    box-shadow:5px 10px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow:5px 10px 5px rgba(0,0,0,0.1);
}
.s020201 .bx .lay .head div img{display:block;}
.s020201 .bx .lay .head .btn{width:100%;}
.s020201 .bx .lay .midd strong{display:inline-block; line-height:26px; padding:16px 0 1px 0px;  font-size:24px; color:#33373b;  margin-right:20px;}
.s020201 .bx .lay .midd ul{overflow:hidden;}
.s020201 .bx .lay .midd ul li{min-height:67px;float:left; width:25%; padding:5px;  margin-top: -3px;}
.s020201 .bx .lay .midd ul li label{display:table; table-layout:fixed; margin-bottom:0px; width:100%; height:100%; background-color:#fff;}
.s020201 .bx .lay .midd ul li label>span,
.s020201 .bx .lay .midd ul li label>a{display:table-cell; width:100%; height:54px; line-height:18px; padding:5px 10px; vertical-align:middle; text-align:center; font-size:14px; color:#33373b;}
.s020201 .bx .lay .midd ul li label>span em,
.s020201 .bx .lay .midd ul li label>a em{display:block; font-family:"Noto Sans KR";}
.s020201 .bx .lay .midd ul li input[type="radio"]{opacity:0; position:absolute; left:0; top:0; z-index:0;}
.s020201 .bx .lay .midd ul li .photos{display:none; height: 340px;}

.s020201 .bx .lay .midd ul li input[type="radio"]:checked~label>span,
.s020201 .bx .lay .midd ul li input[type="radio"]:checked~label>a{}
.s020201 .bx .lay .midd ul li input[type="radio"]:checked~.photos{display:block;}

.s020201 .bx .lay .midd ul li:nth-child(4n+1){clear:both;}

.s020201 .bx .lay .midd .photos{position:absolute; left:0; top:25px; width:210px;}
.s020201 .bx .lay .midd .photos div{
    position: relative;
    overflow: hidden;
    height: calc(100% - 64px);
    margin-bottom:20px; border:1px solid #ddd; background-color:#fff;
    box-shadow:5px 10px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow:5px 10px 5px rgba(0,0,0,0.1);

}
.s020201 .bx .lay .midd .photos div img{width: auto; height: 100%; max-width: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.s020201 .bx .lay .midd .photos .btn{width:100%; text-align: center; padding: 12px 14px;}

.s020201 .bx .lay .midd .move [class*="btn_"]{overflow:hidden; display:none; position:absolute; top:0; z-index:300; width:30px; height:100%; text-indent:-1000px; background-position:center center; background-repeat:no-repeat;}
.s020201 .bx .lay .midd .move .btn_prev{
    left:-10px; background-image:url(/images/icore/sub02/arrow.png);
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}
.s020201 .bx .lay .midd .move .btn_next{right:-10px; background-image:url(/images/icore/sub02/arrow.png);}

.s020201 .lists{margin-top:2px;}
.s020201 .lists>ul>li{padding:35px 0 10px 0; border-top:1px solid #ddd;}
.s020201 .lists>ul>li .head{position:relative; min-height:50px; margin-bottom:20px;}
.s020201 .lists>ul>li .head strong{display:block; line-height:50px; padding-left:10px;  font-size:24px; color:#33373b;}
.s020201 .lists>ul>li .head .btn{position:absolute; right:10px; top:0;}
.s020201 .lists>ul>li .midd{}
.s020201 .lists>ul>li .midd ul{position:relative; z-index:0; margin:0 -20px}
.s020201 .lists>ul>li .midd ul:after{content:""; display:block; clear:both;}
.s020201 .lists>ul>li .midd ul li{float:left; width:25%; padding:0 20px}

.s020201 .lists>ul>li .midd ul li .lay{}
.s020201 .lists>ul>li .midd ul li .lay a{display:block;}
.s020201 .lists>ul>li .midd ul li .lay a span{display:block; overflow: hidden; position:relative; width:100%; height:270px; padding:0 10px 15px 10px;}
.s020201 .lists>ul>li .midd ul li .lay a span:after{
    content:""; display:block; position:absolute; left:0; bottom:0; width:calc(100% - 2px); height:15px; border:1px solid #ccc;
    box-shadow:0px 5px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow:0px 5px 5px rgba(0,0,0,0.1);
}
.s020201 .lists>ul>li .midd ul li .lay a span img{display:block; width:100%; max-width:100%; height:100%; border:1px solid #e2e2e2; border-bottom:none;}
.s020201 .lists>ul>li .midd ul li .lay a strong{display:block; padding:15px 10px 30px 10px; text-align:center; font-weight:400; font-size:16px; color:#596068;}

.s020201 .lists>ul>li.on .midd ul li:nth-child(1n+1){display:block;}

@media screen and (max-width: 1379px){

    .sub02_02_01 .contents_wrap{width:100%}

}

@media screen and (max-width:1080px){

    .s020201 .bx .lay .midd ul li label>span em,
    .s020201 .bx .lay .midd ul li label>a em{display:inline;}

}
@media screen and (max-width:1000px){

    .s020201 .bx{padding:30px;}
    .s020201 .bx .lay{padding-left:35%;}
    .s020201 .bx .lay .midd ul li .photos{width:30%;}

    .s020201 .program--search{}
    .s020201 .program--search .float-md-left{}
    .program--search .program--count{top:7px}
    .s020201 .program--search .search_inner.float-md-right{display:inline-block}


}

@media screen and (max-width:800px) {

    .s020201 .lists>ul>li .midd ul li{width:50%}

}


@media screen and (max-width: 768px){

    .program--search .search--btn span{ width:81px}

}


@media screen and (max-width:700px){

    .s020201 .bx .lay{padding:480px 0 0 0;}
    .s020201 .bx .lay .midd ul li .photos{left:50%; top:0; width:292px; margin-left:-146px;}
    .s020201 .bx .lay .midd .photos div{height:100%}

    .s020201 .lists>ul>li .head .btn{height:40px; line-height:38px; padding:0 10px;}
    .s020201 .lists>ul>li .midd ul li .lay a strong{font-size:13px;}

    .s020201 .program--search{text-align: left;}
    .s020201  .program--search .program--count{top: 0;}
    .program--search .search--btn input[type="submit"]{color:#fff}


}
@media screen and (max-width:600px){

    .s020201 .bx .lay .midd ul li label>span,
    .s020201 .bx .lay .midd ul li label>a{line-height:16px; font-size:12px;}
    .s020201 .program--search .float-md-left,.s020201 .program--search .search_inner.float-md-right,.program--search .search_inner.float-md-right .fieldset{display:block; width:100%}
    .s020201 .program--search .search--btn button{background:#fff}

}

@media screen and (max-width:500px){

    .s020201 .bx .lay{min-height:10px; padding:0;}
    .s020201 .bx .lay .midd strong{padding-top:0; margin-right: 0;}
    .s020201 .bx .lay .midd ul li label,
    .s020201 .bx .lay .midd ul li input[type="radio"]{display:none;}
    .s020201 .bx .lay .midd ul li .photos{display:block; position:relative; left:0; width:100%; margin-left:0;}
    .s020201 .bx .lay .midd ul li .photos div{margin:0;     height: calc(100% - 64px);}
    .s020201 .bx .lay .midd ul li .photos .btn{position:absolute; left:0; top:0; z-index:100; width:100%; height:100%; border:none; background-color:rgba(0,0,0,0);}

    .s020201 .bx .lay .midd .move{position:relative; height:280px; margin-top: 19px;}
    .s020201 .bx .lay .midd .move [class*="btn_"]{display:block;}
    .s020201 .bx .lay .midd .move ul{position:absolute; left:0; top:0; width:100%; height:100%;}
    .s020201 .bx .lay .midd .move ul li{
        opacity:0; position:absolute; left:100%; top:0; z-index:0; width:200px; margin-left:0;
        transition:opacity 0.3s linear;
        -webkit-transition:opacity 0.3s linear;
    }

    .s020201 .bx .lay .midd .move.step_1 ul li:nth-child(1),
    .s020201 .bx .lay .midd .move.step_2 ul li:nth-child(2),
    .s020201 .bx .lay .midd .move.step_3 ul li:nth-child(3),
    .s020201 .bx .lay .midd .move.step_4 ul li:nth-child(4),
    .s020201 .bx .lay .midd .move.step_5 ul li:nth-child(5),
    .s020201 .bx .lay .midd .move.step_6 ul li:nth-child(6),
    .s020201 .bx .lay .midd .move.step_7 ul li:nth-child(7),
    .s020201 .bx .lay .midd .move.step_8 ul li:nth-child(8),
    .s020201 .bx .lay .midd .move.step_9 ul li:nth-child(9),
    .s020201 .bx .lay .midd .move.step_10 ul li:nth-child(10),
    .s020201 .bx .lay .midd .move.step_11 ul li:nth-child(11),
    .s020201 .bx .lay .midd .move.step_12 ul li:nth-child(12),
    .s020201 .bx .lay .midd .move.step_13 ul li:nth-child(13),
    .s020201 .bx .lay .midd .move.step_14 ul li:nth-child(14),
    .s020201 .bx .lay .midd .move.step_15 ul li:nth-child(15),
    .s020201 .bx .lay .midd .move.step_16 ul li:nth-child(16),
    .s020201 .bx .lay .midd .move.step_17 ul li:nth-child(17),
    .s020201 .bx .lay .midd .move.step_18 ul li:nth-child(18),
    .s020201 .bx .lay .midd .move.step_19 ul li:nth-child(19),
    .s020201 .bx .lay .midd .move.step_20 ul li:nth-child(20){opacity:1; left:50%; z-index:100; margin-left:-100px;}

}

@media screen and (max-width:460px) {

    .s020201 .lists>ul>li .midd ul li{width:100%}

}

@media screen and (max-width:360px) {

    .s020201 .bx .lay .midd strong{font-size:24px;}
    .s020201 .bx .lay .midd .move .btn_prev{left: -25px;}
    .s020201 .bx .lay .midd .move .btn_next{right: -25px;}

}


/* 모달팝업 */
#ajaxLayers {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.6);display: none; z-index: 9999;}
#ajaxLayers .pop-container{width:100%;max-width: 1183px;min-height: auto;margin:0 auto;position:absolute;top: 50%;left:50%;transform: translate(-50%,-50%);background-color:#fff;overflow: auto;}
#ajaxLayers .pop-container .pop-container{position:relative;top: 0;margin:0 auto 0;max-width: 1280px;min-height:870px;background-color:#fff;}
#ajaxLayers .pop-container .pop-heading{z-index:9;position: absolute;top:0;left:0;padding: 18px 25px;line-height: 1;width:100%;height:73px; background: #e83421;}
#ajaxLayers .pop-container .pop-heading strong{display: block;font-size: 30px;line-height: 1;font-weight: bold;color: #fff;}
#ajaxLayers .pop-container .pop-heading strong{display: block;font-size: 30px;line-height: 1;font-weight: bold;color: #fff;line-height: 38px;}
#ajaxLayers .pop-container .modal__close{z-index: 9;top: -73px;}
#ajaxLayers .pop-container .close_btn{position: absolute;top: 24px;right: 28px;width: 22px;height: 24px;z-index: 100;}
#ajaxLayers .pop-container .close_btn button{display:block;position:relative;width: 100%;height:100%}
#ajaxLayers .pop-container .view_pro {position: relative;margin-top: 73px;padding: 10px 25px;}
#ajaxLayers .pop-container .view_pro .ui_subscription--form{margin-top:20px;}
#ajaxLayers .pop-container .ui-topbox.type1 .inner{min-height: 165px;}
#ajaxLayers .pop-container  .ui-topbox.type1 .circle{top: 14px;}
#ajaxLayers .pop-container .col-sm-9 .form-num,#ajaxLayers .pop-container .col-sm-9 #emailSel{display: inline-block;}
#ajaxLayers .pop-container .ui_subscription--form .ui_text--box .box-text__scroll {height: 145px;}

@media(max-width:1024px){
	#ajaxLayers .pop-container{width:90%;height:600px;}
}

@media(max-width:860px){
	#ajaxLayers .pop-container .pop-heading{padding:10px 25px;}
	#ajaxLayers .pop-container .pop-heading strong{font-size:23px;padding-right: 45px;line-height: 52px;}
	#ajaxLayers .pop-container .modal__close-button span{width: 73px; height: 73px;}
}
@media screen and (max-width:767px){
    #ajaxLayers .ui-topbox.type1 .inner{min-height: 135px;}
	#ajaxLayers .pop-container{padding-top: 0;}
	#ajaxLayers .pop-container .view_pro {background-color: #fff;}
	#ajaxLayers .pop-container .pop-heading{height:50px;}
	#ajaxLayers .pop-container .pop-heading strong{font-size: 17px;line-height: 2;}
	#ajaxLayers .pop-container .pop-container .view_pro-info{position: static;width: 100%;}
	#ajaxLayers .pop-container .pop-container .view_pro{padding-left:0;padding:10px 20px;}
	#ajaxLayers .pop-container .modal__close-button span{width: 51px; height: 51px; top:0;}
    #ajaxLayers .pop-container .col-sm-9 .form-num{display:flex;}
	#ajaxLayers .pop-container .col-sm-9 .form-inline .mx-1{display:flex; align-items:center;}
}

@media screen and (max-width:575px){
	#ajaxLayers .pop-container .pop-heading strong{line-height:1}
}