@charset "utf-8";

#wrap{position:relative;width:750px; margin:0 auto;padding-top:60px;}
.header{position:fixed;top:0;z-index:1;}
.header .gotop{position:absolute;top:10px;right:30px; width:156px;height:40px;border-radius:20px; text-indent:-9999px;}

.main{background:url('../images/insurance02.jpg') 0 0 no-repeat;animation:bgtop 2s ease-in-out 1 alternate}
@-webkit-keyframes bgtop{
    0%{background-position:0 -200px;}
    100%{background-position:0 0;}
}
.cont01{position:relative; padding-top:290px; background-color:#fec7cc;}
.cont02{padding:0 0 80px; background-color:#f5f4ea;}
.cont02 .list{padding:0 29px; column-width:336px;column-gap:20px; overflow:hidden;}
.cont02 .list figure{display:inline-block; position:relative; margin:20px 0 0 0px;}
.cont02 .list figure img{position:relative;top:200px; opacity:0;transition:all .5s}
.cont02 .list figure.in-view img{top:0;opacity:1}

.form{position:absolute;top:-220px;left:30px;right:30px; padding:50px 60px 100px 300px; background:#fff url('../images/tit.png') 50px 50px no-repeat;border-radius:60px 5px 5px;}
.form .form-ele{display:block; width:100%;}
.form .form-ele input[type="text"],
.form .form-ele input[type="number"],
.form .form-ele input[type="tel"]{padding:0;margin-bottom:5px; width:100%;height:46px; font-size:20px;color:#666;text-indent:15px; border:solid 1px #ddd;background-color:#fff;}
.form .form-ele textarea{width:100%;height:100px;padding:10px 0 0; font-size:20px;text-indent:15px; border:solid 1px #ddd;background-color:#fff;}
.form .form-ele.agree{position:relative; margin-top:15px;}
.form .form-ele.agree input[type="checkbox"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.form .form-ele.agree input[type="checkbox"] + label{font-size:20px;line-height:20px;text-indent:0; display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.form .form-ele.agree input[type="checkbox"] + label:before{content:'';display:inline-block; margin-right:8px;width:20px;height:20px;line-height:22px; text-align:center;vertical-align:middle;border:1px solid #ddd;background-color:#fff; box-shadow:0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)}
.form .form-ele.agree input[type="checkbox"]:checked + label:before{content:'\2714'; color:#333;text-shadow:1px 1px #fff; background:#fff;border-color:#adb8c0;box-shadow:0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1)}
.form .form-ele.agree .btn-detail{font-size:20px;color:#666;font-weight:700; position:absolute;top:0;right:0}
.form .apply{position:absolute;left:0;bottom:0;width:100%;height:80px; background-color:#172146;border-radius:0 0 5px 5px;  font-size:28px;color:#fec7cc;font-weight:700;}

/* layer popup */
.wrap-layer-popup{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:300; overflow:auto}
.wrap-layer-popup .dimmed{width:100%;height:100%; background:#000;opacity:.5;filter:alpha(opacity=50); position:absolute;top:0;left:0}
.wrap-layer-popup .loop{height:0;width:0;position:absolute;overflow:hidden;clip:rect(1px 1px 1px 1px)}
.pop-layer{padding:50px 0 50px 50px;width:1000px;height:auto; background-color:#fff; display:block;position:absolute;top:50%;left:50%;z-index:10}
.pop-layer .head h1{font-size:38px;line-height:1;font-weight:800}
.pop-layer .btn-close{width:40px;height:40px; text-indent:-9999px; background:url('../images/btn_close.png') no-repeat center;background-size:100%; position:absolute;top:50px;right:50px}
.pop-layer .contents{margin-top:40px;padding-right:50px;height:600px;overflow-y:scroll;  font-size:18px;word-break:keep-all}
.pop-layer .contents div{margin-top:15px}
.pop-layer .contents li{margin-top:25px}
.pop-layer .contents li strong{margin-bottom:10px; font-size:20px;font-weight:700; display:block}
.pop-layer .contents li em{margin-top:15px;font-weight:700; display:block}
.pop-layer .contents p{margin-left:15px;padding:10px 0 0 10px;text-indent:-10px}
.pop-layer .contents .ex a{margin-left:20px}

@media (max-width:750px){
    #wrap{width:100%;padding-top:8vw;}
    #wrap img{width:100%;}

    .header .gotop{top:1.3333vw;right:4vw; width:20.8vw;height:5.3333vw;border-radius:2.6667vw;}

    .main{background-size:100%;}
    @-webkit-keyframes bgtop{
        0%{background-position:0 -26.6667vw;}
        100%{background-position:0 0;}
    }

    .cont01{padding-top:45vw;}
    .cont02{padding:0 0 10.6667vw;}
    .cont02 .list{padding:0 3.8667vw; column-width:44.8vw;column-gap:2.6667vw;}
    .cont02 .list figure{margin:2.6667vw 0 0 0;}
    .cont02 .list figure img{top:26.6667vw}
    
    .form{top:-22.6667vw;left:4vw;right:4vw; padding:6.6667vw 8vw 13.3333vw 40vw; background-size:28.6666vw 27.8667vw;background-position:6.6667vw 6.6667vw;border-radius:8vw .6667vw .6667vw;}
    .form .form-ele input[type="text"],
    .form .form-ele input[type="number"],
    .form .form-ele input[type="tel"]{margin-bottom:.6667vw; width:100%;height:6.1333vw; font-size:2.6667vw;text-indent:2vw;}
    .form .form-ele textarea{width:100%;height:13.3333vw;padding:1.3333vw 0 0; font-size:2.6667vw;text-indent:2vw;}
    .form .form-ele.agree{margin-top:2vw;}
    .form .form-ele.agree input[type="checkbox"] + label{font-size:2.6667vw;line-height:2.6667vw;}
    .form .form-ele.agree input[type="checkbox"] + label:before{margin-right:1.0667vw;width:2.6667vw;height:2.6667vw;line-height:2.9333vw;}
    .form .form-ele.agree .btn-detail{font-size:2.6667vw;}
    .form .apply{height:10.6667vw;border-radius:0 0 .6667vw .6667vw; font-size:3.7333vw;}
    





    /* layer popup */
    .pop-layer{padding:5.33vw 0 5.33vw 5.33vw;width:90%;height:90%;box-sizing:border-box}
    .pop-layer .head h1{font-size:5.06vw}
    .pop-layer .btn-close{width:5.33vw;height:5.33vw; top:5.33vw;right:5.33vw}
    .pop-layer .contents{margin-top:3.06vw;padding-right:5.33vw;height:calc(100% - 8.39vw); font-size:2.4vw}
    .pop-layer .contents div{margin-top:2vw}
    .pop-layer .contents li{margin-top:3.33vw}
    .pop-layer .contents li strong{margin-bottom:1.33vw; font-size:2.66vw}
    .pop-layer .contents li em{margin-top:2vw}
    .pop-layer .contents p{margin-left:2vw;padding:1.33vw 0 0 1.33vw;text-indent:-1.33vw}
    .pop-layer .contents .ex a{margin-left:2.66vw}
}