@charset "utf-8";

/*좌측 광고 영역 (화면너비 1420px 이하에서 중앙 광고)*/
#ad_area_l{
    width:125px;
    position:absolute;
    right:50%;
    top:290px;
    transform: translate(-585px);
    padding-top:10px;
    z-index: 99;
}
#ad_area_l.scroll{
    position:fixed;
    top:80px;
}
.ad_box_l{
    width:125px;
    height:256px;
    margin-bottom:12px;
    overflow: hidden;
    box-shadow: 0 0 1px 0 #808080;
}
.ad_box_l .ad_img_v{
    width:100%;
}
.ad_box_l .ad_img_h,.ad_box_l .ad_img_m{
    display:none;
}

/*우측 광고 영역*/
#ad_area_r{
    width:125px;
    position:absolute;
    top:290px;
    left:50%;
    transform: translate(585px);
    padding-top:10px;
    z-index: 99;
}
#ad_area_r.scroll{
    position:fixed;
    top:80px;
}
.ad_box_r{
    width:125px;
    height:256px;
    margin-bottom:12px;
    overflow: hidden;
    box-shadow: 0 0 1px 0 #808080;
}
.ad_box_r .ad_img_v{
    width:100%;
}
.ad_box_r .ad_img_h,.ad_box_r .ad_img_m{
    display: none;
}
.insu_box_r{
    width:125px;
    line-height:30px;
    font-size:12px;
    text-align: center;
}
.insu_box_r span{
    position: relative;
    display: block;
    width:125px;
    height:36px;
    text-align: center;
    line-height:36px;
    font-size:14px;
    background-color: #336fc9;
    color:#fafafa;
    overflow: hidden;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: inset 3px 3px 3px rgba(255,255,255,0.1),
        inset -3px -3px 3px rgba(0,0,0,0.1);
}
.insu_box_r span:last-of-type{
    background-color: #808080;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.insu_box_r span:hover:last-of-type{
    background-color: #fcaf17;
}
.insu_box_r span:first-of-type:after {
	content: "";
	height: 155px;
	left: -75px;
	opacity: .2;
	position: absolute;
	top: -50px;
	background: #fff;
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
	-webkit-transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
	transition: all .55s cubic-bezier(0.19, 1, 0.22, 1);
	width: 50px;
	z-index: 1;
}
.insu_box_r span:hover:after {
	left: 120%;
}
.insu_box_r a{
    position: relative;
    display: block;
    width:125px;
    height:30px;
    text-align: center;
    line-height:30px;
    font-size:12px;
    border: 1px solid #ddd;
    border-bottom: none;
    overflow: hidden;
}
.insu_box_r a:hover {
    color:#fafafa;
}
.insu_box_r a:hover:before {
    height: 100%;
    bottom: 0;
    opacity: 1;
}
.insu_box_r a:before{
    position: absolute;
    content: '';
    transition-duration: .3s;
    z-index: -1;
    top: auto;
    left: auto;
    bottom: 50%;
    right: 0;
    width: 0;
    opacity: 0;
    background-color: #fcaf17;
    width: 100%;
}
.insu_box_r a:after{
    position: absolute;
    content: '';
    z-index: -2;
    top: 0px;
    left: 0px;
    width: 100%;
    height:100%;
    background-color: #fff;
}
#ad_area_upper{
    width:125px;
    position:absolute;
    top:70px;
    left:50%;
    transform: translate(585px);
    padding-top:10px;
    z-index: 99;
}
.ad_box_upper{
    width:125px;
    height:185px;
    margin-bottom:12px;
}
.ad_box_upper img{
    width:142px;
    height:185px;
    position: relative;
    left:-10px;
    opacity: 0.96;
}
#ad_area_mobile{
    display: none;
}

/*작은 웹화면 반응형 1440px*/
@media screen and (max-width:1440px){
    /*#ad_area_l{
    left:1170px;
    transform: translate(0);
    top:290px;
    z-index: 100;
    }*/
    #ad_area_l{
        width:1110px;
        height:98px;
        left:32px;
        transform: translate(0);
        top:275px;
        z-index: 100;
        display: flex;
        }
        .ad_area_left{
            display: inline-block;
            display: flex;
        }
        .ad_box_l{
            width:264px;
            height:98px;
            margin-right:16px;
        }
        .ad_box_l .ad_img_v{
            display:none;
        }
        .ad_box_l .ad_img_h{
            display:block;
            width:264px;
        }
    #ad_area_r{
    left:1170px;
    transform: translate(0);
    top: 275px;
    z-index: 100;
    }
    #ad_area_upper{
        left:1170px;
    transform: translate(0);
    top: 70px;
    z-index: 100;
    }
}
/*작은 웹화면 반응형 1280px*/
@media screen and (max-width:1280px){
    #ad_area_l{
        width:560px;/*544px*/
        height:98px;
        left:32px;
        transform: translate(0);
        top:275px;
        z-index: 100;
        display: flex;
        }
        .ad_area_left{
            display: block;
        }
    .ad_box_l{
        width:264px;
        height:98px;
        margin-right:16px;
    }
    .ad_box_l .ad_img_v{
        display:none;
    }
    .ad_box_l .ad_img_h{
        display:block;
        width:264px;
    }
    #ad_area_r{
        width:560px;/*924px*//*544px*/
        height:98px;
        left:591px;
        transform: translate(0);
        top:275px;
        z-index: 100;
        display: flex;
        }
    .ad_box_r{
        width:264px;
        height:98px;
        margin-right:16px;
    }
    .ad_box_r .ad_img_v{
        display:none;
    }
    .ad_box_r .ad_img_h{
        display:block;
        width:264px;
    }
    .insu_box_r{
        display: none;
    }
    /*.insu_box_r{
        width:264px;
        height:98px;
        line-height:30px;
        font-size:12px;
        text-align: center;
        position: relative;
    }
    .insu_box_r span:first-of-type{
        width:100%;
        height:70%;
        transition-duration: 0.3s;
        line-height: 70px;
    }
    .insu_box_r span:first-of-type.open{
        height:32%;
        line-height: 32px;
    }
        .insu_box_r span:first-of-type:after {
            display: none;
        }
        .insu_box_r a{
            position: relative;
            display: block;
            width:33.3%;
            height:38%;
            text-align: center;
            line-height:36px;
            font-size:12px;
            border: 1px solid #ddd;
            border-bottom: none;
            overflow: hidden;
            float:left;
        }
    .insu_box_r span:last-of-type{
        position: absolute;
        top:70%;
        width:100%;
        height:30%;
        line-height: 28px;
    }
    */
    #ad_area_upper{
        left:1010px;
    transform: translate(0);
    top: 70px;
    z-index: 100;
    }
}
/*모바일 반응형 919px*/
@media screen and (max-width:919px){
    #ad_area_mobile{
        position: absolute;
        top:calc(41.5vw + 16px);
        left:15px;
        width:calc(100vw - 30px);
        display: block;
        height:auto;
    }
    .aside_ad_slider{
        width:calc(100vw - 30px);
        height:calc(37.1vw - 11.1px);
        overflow: hidden;
        position: relative;
        box-shadow: 0 0 1px #ddd;
    }
    .aside_ad_slider>ul{
        width:auto;
        position: absolute;
        left:0px;
        top:0px;
    }
    .aside_ad_slider>ul>li{
        display: inline-block;
        width:calc(100vw - 30px);
        height:calc(37.1vw - 11.1px);
        font-size:0px;
        margin: 0px;
        padding:0px;
    }
    .aside_ad_slider>ul>li>a>img{
        width:100%;
    }
    /*
    #ad_area_l{
        top:41.5vw;
        left:16px;
        width:calc(50vw - 20px);
        display: block;
    }
    #ad_area_l.scroll{
        position:absolute;
        top:41.5vw;
    }
    .ad_box_l{
        width:calc(50vw - 20px);
        height:calc(13.25vw - 6.6px);
        margin-right:0px; 
        margin-bottom:8px;
    }
    .ad_box_l .ad_img_h{
        display: none;    
    }
    .ad_box_l .ad_img_m{
        display: block;
        width: 100%;
    }
    #ad_area_r{
        top:41.5vw;
        left:calc(50vw + 4px);
        width:calc(50vw - 20px);
        display: block;
    }
    #ad_area_r.scroll{
        position:absolute;
        top:41.5vw;
    }
    .ad_box_r{
        width:calc(50vw - 20px);
        height:calc(13.25vw - 6.6px);
        margin-right:0px;
        right:0px;
        margin-bottom:8px;
    }
    .ad_box_r:nth-child(2){
        margin-right:0px;
    }
    .ad_box_r .ad_img_h{
        display: none;    
    }
    .ad_box_r .ad_img_m{
        display: block;
        width: 100%;
    }
    .insu_box_r{
        display: none;
    }
    .insu_box_r{ 나중에 쓰게 될 경우
        position: absolute;
        top:120px;
        width: calc(100vw - 32px);
        height:30px;
        display: flex;
    }
    .insu_box_r span:first-of-type{
        width:70%;
        height:100%;
        transition-duration: 0.3s;
        line-height: 30px;
        border-radius: 10px 0 0 10px;
        font-size:12px;
    }
    .insu_box_r span:first-of-type.open{
        width:10%;
        height:100%;
        line-height: 30px;
        color:transparent;
        position: relative;
    }
    .insu_box_r span:first-of-type.open::before{
        content: '×';
        display: block;
        position: absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        text-align: center;
        color:white;
        font-weight: 700;
    }
    .insu_box_r a{
        width:20%;
        height:100%;
        text-align: center;
        line-height:30px;
        font-size:12px;
        border: 1px solid #ddd;
        border-bottom: none;
        overflow: hidden;
        float:left;
    }
    .insu_box_r span:last-of-type{
        position: relative;
        top:0px;
        width:30%;
        height:100%;
        border-radius: 0 10px 10px 0;
        font-size:12px;
    }*/
    #ad_area_l{
        display: none;
    }
    #ad_area_r{
        display: none;
    }
    #ad_area_upper{
        display: none;
    }
}