@import url("comm.css");


/*** S::메인비주얼 ***/
#visual{background:url('/resources/img/renew/main_bg.png') no-repeat center/cover; padding:60px 0;}
#visual .visual_in{display:flex; }

#visual .visualRollWrap{width:calc(100% - 390px); margin-right:30px;border-radius:20px; overflow:hidden; position:relative; }
.visualRollWrap .vRoll{position:relative; display:block; background-size:cover; background-position:right bottom; width:100%; height:100%; overflow:hidden; }
.visualRollWrap .vRoll .bgObj{position:absolute; right:0; bottom:0; display:block; width:100%; height:100%; background-size:100% auto; background-repeat:no-repeat; background-position:right bottom; }
.visualRollWrap .vRoll.vR01{background-image:url("/resources/img/renew/v01_bg.png");}
.visualRollWrap .vRoll.vR01 .bgObj{background-image:url("/resources/img/renew/v01_obj.png");}
.visualRollWrap .vRoll.vR02{background-image:url("/resources/img/renew/v02_bg.png");}
.visualRollWrap .vRoll.vR02 .bgObj{background-image:url("/resources/img/renew/v02_obj.png");}
.visualRollWrap .vRoll.vR03{background-image:url("/resources/img/renew/v03_bg.png");}
.visualRollWrap .vRoll.vR03 .bgObj{background-image:url("/resources/img/renew/v03_obj.png");}

.visualRollWrap .vRoll .txt{padding:65px 0 0 60px; display:block; width:100%; box-sizing:border-box; }
.visualRollWrap .vRoll .txt h4{font-family:"NexonLv2Gothic","Pretendard Variable", sans-serif; color:#fff; font-weight:300; font-size:2.5rem;}
.visualRollWrap .vRoll .txt h4 b{font-weight:700; line-height:inherit; letter-spacing:inherit;}
.visualRollWrap .vRoll .txt p{color:rgba(255,255,255,0.8); font-weight:300; font-size:1.25rem; margin:12px 0 0;}

.visualRollWrap .vBtns{position:absolute; right:20px; bottom:20px; width:145px; height:50px; background:rgba(0,0,0,0.5); z-index:900; border-radius:25px;}
.visualRollWrap .vBtns .varrow{position:absolute; left:30px; top:50% !important; margin:0; transform:translateY(-50%); width:10px; height:15px; background-size:100% auto; background-position:center; background-repeat:none; z-index:910;}
.visualRollWrap .vBtns .varrow::after{display:none; }
.visualRollWrap .vBtns .swiper-button-prev{background-image:url("/resources/img/renew/v_arrow_prev.png");}
.visualRollWrap .vBtns .swiper-button-next{left:auto; right:30px;background-image:url("/resources/img/renew/v_arrow_next.png");}
.visualRollWrap .vBtns .swiper-pagination{font-weight:300; color:rgba(255,255,255,0.5); margin:0 auto; padding:1px 0 0; line-height:1; top:50% !important; transform:translateY(-50%); z-index:905}
.visualRollWrap .vBtns .swiper-pagination .swiper-pagination-current{color:#fff; font-weight:700; margin-right:5px}

/*#visual .loginBox{width:360px; background:#fff; border-radius:20px; padding:45px 30px 0; height:420px; box-sizing:border-box; }*/
#visual .loginBox{position:relative; width:380px; background:#fff; border-radius:20px; padding:35px 25px 0; height:420px; box-sizing:border-box; }

#visual .loginBox dl{margin:15px 0 0;}
#visual .loginBox dd > input{height:50px; border-radius:5px; background-color:#EDF0F9; padding:0; border:none; margin:0; box-sizing:border-box; width:100%; padding:0 15px 0 55px; margin:0 0 10px; background-repeat:no-repeat;}
#visual .loginBox dd > input.email{background-image:url('/resources/img/renew/login_mail_ico.png'); background-position:20px center;}
#visual .loginBox dd > input.psw{background-image:url('/resources/img/renew/login_psw_ico.png'); background-position:24px center;}
#visual .loginBox dd > input::-webkit-input-placeholder {color:#ACB5CF; letter-spacing:-0.2pt;}
#visual .loginBox dd > input:-ms-input-placeholder {color:#ACB5CF; letter-spacing:-0.2pt;}
#visual .loginBox dd > input::placeholder {color:#ACB5CF; letter-spacing:-0.2pt;}

#visual .loginBox dd ol{font-size:0; margin:5px 0 20px;}
#visual .loginBox dd ol li{display:inline-block; vertical-align:top; line-height:120%;}
#visual .loginBox dd ol li:first-child::after{content:""; display:inline-block; vertical-align:top; line-height:inherit; margin:4px 9px 0; width:1px; height:10px; background:#DDDDDD; }
#visual .loginBox dd ol li a{font-size:0.94rem; letter-spacing:-0.2pt; line-height:120%;}
#visual .loginBox dd ol li.join{font-weight:700; color:#4671E9; float:right;}
#visual .loginBox dt input{width:100%; margin:0; padding:0; border:none; background:#4671E9; border-radius:5px; color:#fff; font-weight:700; text-align:center; line-height:50px; font-size:1.13rem; cursor:pointer; transition:all 0.3s linear;}
#visual .loginBox dt input:hover{box-shadow:0 8px 15px rgba(70,113,233,0.15); transition:all 0.3s linear;}

#visual .loginBox .sns{display:flex; align-items: center; justify-content: space-between; margin:20px 0 0;}
#visual .loginBox .sns h6{color:#222222; font-size:1rem; font-weight:400; letter-spacing:-0.2pt; padding-left:25px}
#visual .loginBox .sns p{font-size:0; padding-right:5px;}
#visual .loginBox .sns p a{display:inline-block; font-size:1rem; margin-right:20px; border-radius:50%;}
#visual .loginBox .sns p a.kakao:hover{box-shadow:0 8px 15px rgba(249,219,0,0.2);}
#visual .loginBox .sns p a.naver:hover{box-shadow:0 8px 15px rgba(84,171,52,0.2);}
/*** E:: 메인비주얼 ***/

/*** 타이틀 ***/
#contents{padding:58px 0 110px;}
h4.title{font-family:"NexonLv2Gothic","Pretendard Variable", sans-serif; font-weight:700; text-align:Center; color:#222; font-size:2.15rem; line-height:120%;}
h4.title + p{text-align:center; font-size:1.125rem; margin:8px 0 0;}

h5.sTitle{font-family:"NexonLv2Gothic","Pretendard Variable", sans-serif; font-weight:700;  color:#222; font-size:1.5rem; line-height:120%;}

/*** S::자주 찾는 서비스 ***/
.service_cont{}
.service_cont ul{font-size:0; margin:31px 0 0;text-align:center; }
/*.service_cont ul li{display:inline-block; font-size:1.125rem; margin:0 35px;text-align:center;}*/
.service_cont ul li{display:inline-block; font-size:1.125rem; margin:0 26px; text-align:center;}
/*.service_cont ul li span{display:block; width:117px; height:117px; background:#F1F5FA; border:1px solid #F1F5FA; border-radius:30px; position:relative;  margin:0 0 20px; transition:all 0.3s linear;}*/
.service_cont ul li span{display:block; width:110px; height:110px; background:#F1F5FA; border:1px solid #F1F5FA; border-radius:30px; position:relative;  margin:0 0 20px; transition:all 0.3s linear;}
.service_cont ul li span img{position:absolute; left:50%; top:50%; transform:translateX(-50%); margin-top:-28px}
.service_cont ul li a{color:#222222;letter-spacing:-0.2pt;}
.service_cont ul li a:hover{}
.service_cont ul li a:hover span{border-color:#4671E9; box-shadow:0 8px 15px rgba(70,113,233,0.13); transition:all 0.3s linear;}
#orange_box {display:inline-block; font-size:1.125rem; margin:0 26px; text-align:center;}
#orange_box span{display:block; width:110px; height:110px; background:#faf4f1; border:1px solid #faf4f1; border-radius:30px; position:relative;  margin:0 0 20px; transition:all 0.3s linear;}
#orange_box a:hover span{border-color: #f9873b; box-shadow:0 8px 15px rgba(233, 127, 70, 0.13); transition:all 0.3s linear;}
/*** E::자주 찾는 서비스 ***/

/*** S::게시판 ***/
.board_cont{display:flex; margin-top:93px;}
.board_cont .boardZone{width:calc(100% - 490px); box-sizing:border-box; margin-right:50px; position:relative;}
.board_cont .boardZone .tabZone{font-size:0; border-bottom:1px solid #E5E7EE;}
.board_cont .boardZone .tabZone li{display:inline-block; margin-right:50px; font-size:1.5rem; font-family:"NexonLv2Gothic","Pretendard Variable", sans-serif; color:#ACB5CF; font-weight:500; cursor:pointer; position:relative; padding:0 0 20px; transition:color 0.2s linear;}
.board_cont .boardZone .tabZone li:hover{color:#222222; transition:color 0.2s linear;}
.board_cont .boardZone .tabZone li.on{font-weight:700; color:#222222;}
.board_cont .boardZone .tabZone li.on::after{content:""; display:block; width:100%; height:4px; background:#4671E9; position:absolute; bottom:-1px; z-index:1; ;}
.board_cont .boardZone .boardList{display:none;}
.board_cont .boardZone .boardList.on{display:block; }
.board_cont .boardZone .boardList a.moreBtn{position:absolute; right:0; top:-8px; width:48px; height:48px; background:url('/resources/img/renew/moreBtn.png') no-repeat center/15px auto, #EDF0F9; border-radius:50%; overflow:hidden; font-size:0;transition:all 0.2s linear;}
.board_cont .boardZone .boardList a.moreBtn:hover{transition:all 0.2s linear;transform:rotate(180deg); }
.board_cont .boardZone .boardList ul{margin:25px 0 0;}
.board_cont .boardZone .boardList li{ border-bottom:1px solid #E5E7EE; padding:18px 0 17px;}
.board_cont .boardZone .boardList li:hover{ background-color: #F1F5FA }
.board_cont .boardZone .boardList li a{position:relative; display:flex; align-items: center; font-size:1.125rem; }
.board_cont .boardZone .boardList li a::before{content:""; display:block; position:absolute; left:0; top:11px; width:6px; height:6px; background:#4671E9; border-radius:50%; margin-left: 20px;}
.board_cont .boardZone .boardList li a p{font-size:1.125rem; letter-spacing:-0.2pt; color:#444444; padding-left:40px; width:calc(100% - 180px); white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
.board_cont .boardZone .boardList li a span{margin-left:auto; font-weight:300; color:#999999; margin-right: 20px;}


.board_cont .csZone{width:440px; min-height:382px; box-sizing:border-box; background:url('/resources/img/renew/cs_bg.jpg') no-repeat center/cover; padding:50px 40px 0; border-radius:20px; box-sizing:border-box;}
.board_cont .csZone article{text-align:center; }
.board_cont .csZone article > img{display:block; margin:14px auto 0; }
.board_cont .csZone article > dl{display:inline-block; text-align:left; width:auto;}
.board_cont .csZone article > dl dt{color:#4671E9; font-family:"NexonLv2Gothic","Pretendard Variable", sans-serif; font-weight:700; font-size:2.5rem; line-height:1; padding:20px 0 16px}
.board_cont .csZone article > dl dd{position:relative; padding:0 0 7px 100px; color:#444444; }
.board_cont .csZone article > dl dd::before{content:""; display:block; position:absolute; left:0; top:9px; width:4px; height:4px; background:#444444; border-radius:50%;}
.board_cont .csZone article > dl dd span{position:absolute; left:13px; color:#444444; }
/*** E::게시판 ***/

.inline-flex {display: -webkit-inline-flex;display: -moz-inline-flex;display: -ms-inline-flex;display: inline-flex}

.flex-direction-column {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
}


/*******************************************************************************
    @media ~1200px
*******************************************************************************/
@media all and (max-width:1200px){




    /*** S::메인비주얼 ***/
    #visual{padding:50px 0;}

    #visual .visualRollWrap{width:calc(100% - 360px); }
    .visualRollWrap .vRoll .txt{padding:55px 0 0 50px; }

    /*#visual .loginBox{width:330px; padding:45px 25px 0; }*/


    /*** E:: 메인비주얼 ***/

    /*** 컨텐츠 ***/
    #contents{padding:50px 0 90px;}

    /*** S::자주 찾는 서비스 ***/
    .service_cont{}
    /*.service_cont ul li{ margin:0 10px;}*/
    .service_cont ul li{ margin:0 13px;}
    /*** E::자주 찾는 서비스 ***/

    /*** S::게시판 ***/
    .board_cont{}
    .board_cont .boardZone{width:calc(100% - 450px);}
    .board_cont .boardZone .tabZone li{ margin-right:40px;}
    .board_cont .boardZone .boardList li{ padding:15px 0 14px;}
    .board_cont .boardZone .boardList li a p{padding-left:16px;}
    .board_cont .boardZone .boardList li a::before{top:10px; width:4px; height:4px;}

    .board_cont .csZone{width:400px; min-height:344px; padding:48px 35px 0; }
    .board_cont .csZone article > img{width:80px; }
    .board_cont .csZone article > dl dt{font-size:2.3rem; padding:15px 0 12px}

    /*** E::게시판 ***/



}