@charset "UTF-8";

main{width: 100%;}
.cont-wrap{width: 100%; padding-top: 100px; padding-bottom: 50px; background: url(../images/main/bg_ic_road2.png) center 68% no-repeat; background-size: contain;}
.info-txt-wrap{text-align: center;}
.info-txt-wrap h3{font-family: 'br_rregular'; font-size: 54px;}
.info-txt-wrap ul {padding: 25px;}
.info-txt-wrap ul > li{font-size: 20px; line-height: 28px; word-break: keep-all;}
.info-txt-wrap ul > li b{font-weight: 700;}
.info-cont-wrap{width: 1310px; margin: 0 auto;}
.info-cont-wrap .info-cont{display: flex; justify-content: center; padding: 30px 0;}
.info-cont-wrap .info-cont >div{width: 410px; box-sizing: border-box; margin-right: 70px;}
.info-cont-wrap .info-cont >div.info-namguro{margin-top: 40px;}
.info-cont-wrap .info-cont >div:last-child{margin-right: 0;}
.info-cont-wrap .info-cont >div a{width: 100%; height: auto; box-sizing: border-box; border-radius: 205px 205px 0 0; position: relative; margin-bottom: 60px;}
.info-cont-wrap .info-cont >div a > .imgbox{width: 100%; height: 400px; box-sizing: border-box; border-radius: 205px 205px 0 0; background-position: center; background-repeat: no-repeat; transition: all 0.3s; border: 6px solid #0068cf00;}
.info-cont-wrap .info-cont >div a > .gu-imgbox{background-image: url(../images/main/market_img_guro.png);}
.info-cont-wrap .info-cont >div a > .nam-imgbox{background-image: url(../images/main/market_img_namguro.png);}
.info-cont-wrap .info-cont >div a > .go-imgbox{background-image: url(../images/main/market_img_gocheok.png);}
.info-cont-wrap .info-cont >div a > .info-in{width: 320px; height: 64px; box-sizing: border-box; position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 32px; display: flex; align-items: center; justify-content: center;}
.info-cont-wrap .info-cont >div a > .info-in h4{font-size: 20px; font-weight: 600; background-image: url(../images/main/info_ic_in.png); background-repeat: no-repeat; background-position: right center; padding-right: 30px;}
.info-cont-wrap .info-cont >div a:hover .imgbox, .info-cont-wrap .info-cont >div a:focus .imgbox, .info-cont-wrap .info-cont >div a:hover .imgbox, .info-cont-wrap .info-cont >div.active a .imgbox{border: 6px solid #0069cf;}
.info-cont-wrap .info-cont >div a:hover .info-in, .info-cont-wrap .info-cont >div a:focus .info-in, .info-cont-wrap .info-cont >div a:hover .info-in, .info-cont-wrap .info-cont >div.active a .info-in{background-color: #0069cf;}
.info-cont-wrap .info-cont >div a:hover > .info-in h4, .info-cont-wrap .info-cont >div a:focus > .info-in h4, .info-cont-wrap .info-cont >div a:hover > .info-in h4, .info-cont-wrap .info-cont >div.active a .info-in > h4{color: #fff; background-image: url(../images/main/info_ic_in2.png);}
.info-txtbox .txtbox-list li{font-size: 18px; display: flex; align-items: center; margin-bottom: 10px;}
.info-txtbox .txtbox-list li:last-child{margin-bottom: 0;}
.info-txtbox .txtbox-list li span{font-weight: 700; display: flex; justify-content: space-between; width: 60px; padding: 4px 12px; border-radius: 13px; box-sizing: content-box; background-color: #ddd; margin-right: 10px;}

@media all and (max-width: 1400px){
    .info-txt-wrap h3{font-size: 50px;}
    .info-txt-wrap ul > li{font-size: 18px;}
    .cont-wrap{background-size: cover; padding-top: 80px;}
    .info-cont-wrap{width: 100%; padding:0 50px;}
    .info-cont-wrap .info-cont >div{width: calc(100% / 3 ); margin-right: 3.5%;}
    .info-cont-wrap .info-cont >div a > .info-in{width: 70%; height: 50px; bottom: -5%;}
    .info-cont-wrap .info-cont >div a > .info-in h4{font-size: 18px; padding-right: 24px;}
    .info-txtbox .txtbox-list li{font-size: 16px;}
}

@media all and (max-width: 1120px){
   .info-cont-wrap .info-cont >div a > .info-in h4{font-size: 17px; }
}

@media all and (max-width: 1000px){
    .info-cont-wrap{padding:0 25px;}
    .info-cont-wrap .info-cont{flex-wrap: wrap;}
    .info-cont-wrap .info-cont >div{width: calc(100% / 2 - 5%); margin-right: 5%;}
    .info-cont-wrap .info-cont >div:nth-child(2){margin-right: 0;}
    .info-cont-wrap .info-cont >div:nth-child(3){margin-right: 0; margin-top: 40px;}
    .info-cont-wrap .info-cont >div.info-namguro{margin-top: 0;}
    .info-cont-wrap .info-cont >div a{margin-bottom: 45px;}
}


@media all and (max-width: 740px){
    .info-cont-wrap{padding:0px;}
    .info-txt-wrap h3{font-size: 46px;}
    .cont-wrap{padding-top: 60px; padding-bottom: 40px; background: none;}
    .info-cont-wrap .info-cont >div a > .info-in h4{font-size: 16px; line-height: 1; background-size: contain;}
    .info-cont-wrap .info-cont >div a > .info-in{height: 35px; bottom: -4%;}
    .info-cont-wrap .info-cont >div a{margin-bottom: 30px;}
    .info-txtbox .txtbox-list li{font-size: 14px; margin-bottom: 7px;}

}

@media all and (max-width: 600px){
    .info-cont-wrap{padding:0px 30px;}
    .info-cont-wrap .info-cont{padding: 20px 0;}
    .info-txt-wrap h3{font-size: 40px;}
    .info-txt-wrap ul{padding: 20px;}
    .info-txt-wrap ul > li{font-size: 16px;}
    .info-cont-wrap .info-cont >div a > .imgbox{border-radius: 300px 300px 0 0; height: 400px;}
    .info-cont-wrap .info-cont >div:nth-child(2){margin-top: 40px;}
    .info-cont-wrap .info-cont >div{width: calc(100% - 30px); margin-right: 0;}
    .info-cont-wrap .info-cont >div a > .info-in{width: 50%; height: 40px;}
}


@media all and (max-width: 500px){
    .cont-wrap{padding-top: 40px; padding-bottom: 30px;}
    .info-txt-wrap h3{font-size: 32px;}
    .info-txt-wrap ul{padding: 10px 20px; padding-top: 20px;}
    .info-txt-wrap ul > li{font-size: 15px; line-height: 1.5em;}
    .info-cont-wrap .info-cont >div a > .info-in h4{font-size: 15px;}
    .info-cont-wrap .info-cont >div a > .info-in{width: 70%}
}

@media all and (max-width: 400px){
    .info-cont-wrap .info-cont >div a > .imgbox{height: 320px;}
    .info-cont-wrap .info-cont >div a > .info-in{bottom: -5.5%;}
}