/* 공통 */
.ico-policy01{width: 94px; height: 94px; background: url(../images/icon/ico-policy01.png) no-repeat 0 0;}
.ico-policy02{width: 94px; height: 94px; background: url(../images/icon/ico-policy02.png) no-repeat 0 0;}
.ico-policy03{width: 94px; height: 94px; background: url(../images/icon/ico-policy03.png) no-repeat 0 0;}

.policy-wrap .visual{background: url(../images/samp/vis02-policy.png) no-repeat center center/cover;}
.policy-wrap h3{margin-top: 10px; margin-bottom: 90px; font-size: 40px; font-weight: bold;}

footer{margin-top: 0;}

.policy-link01{background: url(../images/samp/policy-link01.png) no-repeat center center/cover;}
.policy-link02{background: url(../images/samp/policy-link02.png) no-repeat center center/cover;}
.policy-link03{background: url(../images/samp/policy-link03.png) no-repeat center center/cover;}
.policy-link04{background: url(../images/samp/policy-link04.png) no-repeat center center/cover;}

.btn-bottom-group{}
.btn-bottom-group a{}
.btn-bottom-group a:after{content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.btn-bottom-group a div{height: 300px; position: relative; z-index: 1; text-align: center;}
.btn-bottom-group a div *{color: #fff;}
.btn-bottom-group a div span{font-size: 20px;}
.btn-bottom-group a div p{font-size: 40px;}

#container{position: relative; padding-bottom: 180px;}
#container:before{}
#container > .inner{position: relative;}
.desc em{font-size: 200px; color: #E6E6E6; font-weight: 600; font-style: normal; line-height: 1;}
.desc em + p{margin-top: 60px; font-size: 20px;}
.desc h3{margin-top: 15px;}
.desc h3 + p{max-width: 560px; margin-top: 50px; line-height: 1.8;}
.desc .ico{margin-bottom: 60px;}

.inner > .desc:before{content: " "; position: absolute; top: 9%; left: -100%; right: -100%; height: 18%; background: #F9F9F9; z-index: -1;}

.diagram{border-top: 1px solid #979797; margin-top: 130px; padding-top: 120px;}
.diagram ul{display: flex; position: relative;}
.diagram ul:before{content: " "; position: absolute; top: 50%; left: -100%; right: -100%; height: 0.5px; background: #242424;}
.diagram ul li{flex: 1; position: relative;}
.diagram ul li img{width: 100%;}
.diagram ul li p{width: 100%; position: absolute; top: 50%; left: 0; text-align: center; color: #242424 !important; font-size: 32px; transform: translateY(-50%); font-weight: 700;}

.img-list{margin-top: 120px;}
.img-list li{display: flex; padding: 145px 0; position: relative; align-items: center; justify-content: space-between;}
.img-list li:nth-child(1):before{content: " "; position: absolute; top: 0; left: -100%; right: -100%; height: 100%; background: #F9F9F9; z-index: -1;}
.img-list li > div{flex: 0 0 50%;}
.img-list li .desc{}
.img-list li .desc p{color: #666; font-size: 24px !important;}
.img-list li .img-wrap{margin-top: 0; text-align: right;}
.img-list li.reverse .img-wrap{text-align: left;}


@media screen and (max-width: 991px) {
    #container{padding-bottom: calc(100px / 2);}
    #container:before{top: calc(342px + 9.5%);}

    .policy-wrap .visual{}
    .policy-wrap h3{margin-bottom: calc(64px / 2); font-size: calc(50px / 2);}

    .desc em{font-size: calc(200px / 2);}
    .desc em + p{margin-top: calc(60px / 2); font-size: calc(24px / 2);}
    .desc h3 + p{max-width: 100%; margin-top: calc(60px / 2);}
    .desc .ico{display: none;}

    .inner > .desc:before{top: 5%; height: 20%;}

    .img-wrap{width: 100%; margin-top: calc(80px / 2); text-align: center;}
    .img-wrap img{width: 100%;}

    .btn-bottom-group a div{height: calc(300px / 2);}
    .btn-bottom-group a div span{font-size: calc(24px / 2);}
    .btn-bottom-group a div p{font-size: calc(40px / 2); margin: calc(10px / 2) 0 calc(30px / 2);}

    .diagram{margin-top: calc(100px / 2); padding-top: calc(80px / 2); padding-left: calc(40px / 2); padding-right: calc(40px / 2);}
    .diagram ul{}
    .diagram ul li{}
    .diagram ul li img{}
    .diagram ul li > div{position: relative;}
    .diagram ul li p{}

    .img-list{margin-top: calc(80px / 2);}
    .img-list li{padding: calc(90px /2) 0; flex-direction: column;}
    .img-list li.reverse{flex-direction: column-reverse;}
    .img-list li > div{flex: 1;}
    .img-list li .desc{max-width: 100%;}
    .img-list li .desc h3{}
    .img-list li .desc p{font-size: 12px !important;}
    .img-list li .img-wrap{margin-top: calc(60px / 2); max-width: 320px;}
    .img-list li.reverse .img-wrap{}

}