@charset "UTF-8";

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{margin: 0; padding: 0; font-family: 'GmarketSansMedium';}
body li{list-style: none;}


header{
    width: 1011px; margin: 0 auto; padding: 25px 44px 23px 35px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
}
header h1{height: 47px;}
.top_text{
    background: url('/cf/image/top_icon.png') no-repeat left center;
    padding-left: 53px; box-sizing: border-box;
}
.top_text ul li:first-of-type{font-family: 'GmarketSansBold'; font-size: 18px;}
.top_text ul li:first-of-type span:first-of-type{font-family: 'GmarketSansBold'; color: #25abda;}
.top_text ul li:first-of-type span:last-of-type{font-family: 'GmarketSansBold'; color: #20ac0d;}
.top_text ul li:last-of-type{font-size: 17px;}
/* header */



.popup_wrap{display: none; position: relative; z-index: 10;}
.popup_box{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.4);}
.personal_infoBox{
    position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
    width: 500px; height: 526px; background-color: #fff; border-radius: 10px; padding: 20px;
}
.personal_infoBox h2{text-align: center; font-size: 20px; margin: 25px 0;}
.personal_info{
    overflow-y: scroll; width: 410px; height: 360px; background-color: #fff; padding: 25px; margin: 0 auto;
    border: 1px solid #ddd; font-size: 14px;
}
.personal_info table{border: 1px solid #ddd; margin: 10px 0;}
.personal_info table tbody tr >*{padding: 5px 10px;}
.personal_info table tbody tr:not(:last-of-type) > *{border-bottom: 1px solid #ddd;}
.personal_info table tbody tr th{border-right: 1px solid #ddd; text-align: left;}
.close_btn{position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; cursor: pointer;}
.close_btn img{width: 100%;}


.m_ver{display: none;}
.main_banner{width: 100%; background-color: #0099ff; color: #fff;}
.main_banner img{width: 100%;}
.main_text{
    width: 820px; margin: 0 auto; padding: 45px 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
}
.csCenter{background: url('/cf/image/cs_icon.png') no-repeat left center; padding-left: 80px;}
.main_text ul li{font-size: 14px;}
.main_text ul li:first-of-type p{font-size: 22px;}
.main_text ul li:first-of-type p span{font-family: 'GmarketSansBold';}
.main_text ul:last-of-type li:nth-of-type(2),
.main_text ul:last-of-type li:nth-of-type(3){font-size: 16px;}
/* banner section */


.price_wrap{padding: 55px 0 70px; box-sizing: border-box;}
.price_box{
    width: 1005px; margin: 0 auto; border: 3px solid #0099ff; border-radius: 20px;
    padding: 60px 0; box-sizing: border-box;
}
.price_box h2{font-size: 30px; text-align: center; margin-bottom: 40px; color: #333;}
.price_box h2 span{font-family: 'GmarketSansBold';}
.price_box form{width: 610px; margin: 0 auto;}
.price_form{width: 562px; margin: 0 auto 33px;}
.price_form ul li,
.agree_box ul{display: flex; align-items: center;}
.price_form ul li:not(:last-of-type){margin-bottom: 15px;}
.price_form ul li label{font-size: 24px; color: #333;}
.price_form ul li input[type="text"]{
    border: none; outline: none; background-color: #e5f5ff; border-radius: 15px;
    width: 475px; height: 45px; padding: 0 20px; box-sizing: border-box; margin-left: 15px;
    font-size: 22px; color: #003366;
}
.agree_box{color: #666; font-size: 14px; margin-bottom: 23px;}
.agree_box ul{justify-content: space-between;}
.agree_box ul li input[type="checkbox"]{display: none;}
.agree_box ul li label{font-size: 14px; color: #666; cursor: pointer;}
.agree_box ul li label span{width: 15px; height: 15px; display: inline-block; border: 2px solid #696969; vertical-align: text-bottom; margin-right: 4px;}
.agree_box ul li label strong{border: none; background-color: transparent; vertical-align: bottom; margin-left: 4px; position: relative; z-index: 1; font-weight: normal;}
/* .agree_box ul li label strong::after{content: ''; display: block; width: 27px; height: 2px; background-color: #adadad; float: right; position: absolute; bottom: 0; right: 0;} */
.agree_box ul li label span.active_check{
    width: 5px; border-color: transparent #00beff #00beff transparent; transform: rotate(45deg);
    margin-left: 5px; position: relative; bottom: 3px; left: 0; z-index: 1;
}
.request_btn{
    width: 575px; margin: 25px auto; background-color: #0099ff; color: #fff; font-size: 24px;  border-radius: 15px;
    font-family: 'GmarketSansBold'; display: flex; align-items: center; justify-content: center; height: 63px; cursor: pointer;
}
.clean_box{width: 525px; margin: 0 auto; display: flex; justify-content: space-between;}
.clean_box p{font-size: 20px; color: #333;}
.clean_box ul{width: 280px; display: flex; align-items: center; justify-content: space-between;}
.clean_box ul li input[type="radio"]{display: none;}
.clean_box ul li:not(:first-of-type){margin-left: 13px;}
.clean_box ul li label{font-size: 20px; color: #666; cursor: pointer;}
.clean_box ul li label span{
    width: 23px; height: 23px; display: inline-block; border: 2px solid #999; border-radius: 50%;
    vertical-align: middle; margin-right: 5px; position: relative; z-index: 1;
}
.clean_box ul li label span::after{
    content: ''; display: none; position: absolute; top: 4px; left: 4px; background-color: #0099ff;
    width: 15px; height: 15px; border-radius: 50%; z-index: 1;
}
.clean_box ul li label.check_radio span{border-color: #0099ff;}
.clean_box ul li label.check_radio span::after{display: block;}
/* price section */


.select_wrap{width: 100%; background-color: #f4f4f4; padding: 90px 0 100px; box-sizing: border-box;}
.select_wrap h2{text-align: center; font-size: 30px; color: #666; margin-bottom: 35px;}
.select_wrap h2 strong{font-family: 'GmarketSansBold'; color: #0099ff;}
.select_wrap h2 span{font-family: 'GmarketSansBold'; color: #000;}
.select_box{display: flex; justify-content: center; width: 960px; margin: 0 auto; flex-wrap: wrap;}
.select_box div{
    width: 470px; background-color: #fff; border: 2px solid #e1e1e1; border-radius: 20px;
    padding: 18px 20px 18px 130px; box-sizing: border-box; background-repeat: no-repeat;
    background-position: left+20px center; box-sizing: border-box;
}
.select01{background-image: url('/cf/image/select_con01.png'); margin-bottom: 22px;}
.select02{background-image: url('/cf/image/select_con02.png'); margin-left: 18px; margin-bottom: 22px;}
.select03{background-image: url('/cf/image/select_con03.png');}
.select04{background-image: url('/cf/image/select_con04.png'); margin-left: 18px;}
.select_box div ul li{font-size: 16px; color: #666;}
.select_box div ul li p{color: #000; margin-bottom: 10px; font-family: 'GmarketSansBold';}
/* select section */


.moving_wrap{padding: 63px 0 105px; box-sizing: border-box; margin: 0 auto; max-width: 1194px;}
.moving_wrap h2{font-size: 35px; color: #666; margin-bottom: 30px; text-align: center;}
.moving_wrap h2 span{color: #333;}
.moving_wrap ul{display: flex; justify-content: center;}
.moving_wrap ul li{width: 260px; padding-top: 230px; font-size: 18px; text-align: center; background-repeat: no-repeat; background-position: center top;}
.moving_wrap ul li:not(:first-of-type){margin-left: 20px;}
.moving_wrap ul li:first-of-type{background-image: url('/cf/image/sample01.png');}
.moving_wrap ul li:nth-of-type(2){background-image: url('/cf/image/sample02.png');}
.moving_wrap ul li:nth-of-type(3){background-image: url('/cf/image/sample03.png');}
.moving_wrap ul li:last-of-type{background-image: url('/cf/image/sample04.png');}
.moving_wrap ul li span{font-family: 'GmarketSansBold';}
.moving_wrap ul li p{color: #666;}
/* moving section */



.process_wrap{background-color: #b4c9e9; padding: 85px 0; box-sizing: border-box; text-align: center;}
.process_wrap h2{font-size: 30px; color: #17335d; margin-bottom: 20px;}
.process_wrap h2 span{font-family: 'GmarketSansBold';}
/* process section */


.comparison_wrap{padding: 115px 0 105px; box-sizing: border-box;}
.comparison_text{background: url('/cf/image/landing_con02.png') no-repeat right bottom; width: 860px; margin: 0 auto; padding-bottom: 285px;}
.comparison_text h2{font-size: 30px; font-family: 'GmarketSansBold';}
.comparison_text h2 strong{color: #0099ff;}
.comparison_text ul li{color: #666;}
.comparison_text ul li span{font-family: 'GmarketSansBold'; color: #000;}
/* comparison_section */


.contents_wrap{width: 100%; background-color: #25abda; padding: 60px 0 66px; box-sizing: border-box;}
.contents_box{
    background: url('/cf/image/landing_con03.png') no-repeat left top; width: 906px; margin: 0 auto;
    padding: 42px 0 70px 82px; box-sizing: border-box; line-height: 1.3;
}
.contents_box h2{margin-left: 76px; font-size: 18px; color: #fff; background-color: #0d87b2; padding: 10px 15px; box-sizing: border-box; width: 275px; border-radius: 20px; margin-bottom: 10px;}
.contents_box > ul{background: url('/cf/image/landing_con03_icon01.png') no-repeat left center; padding-left: 77px; margin-bottom: 68px;}
.contents_box ul li{font-size: 25px; color: #666;}
.contents_box ul li span{color: #000; position: relative; z-index: 1;}
.contents_box ul li span::after{
    content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 16px;
    background-color: #c1f0ff; z-index: -1;
}
.contents_con ul{background: url('/cf/image/landing_con03_icon02.png') no-repeat left top; padding-left: 60px;}
.contents_con ul:first-of-type{margin-bottom: 40px;}
/* contents section */


.review{padding: 100px 0 120px; text-align: center;}
.review h2{font-family: 'GmarketSansBold'; margin-bottom: 40px; font-size: 30px;}
.review h2 strong{color: #0099ff;}
.moving_price{
    color: #fff; font-size: 30px; background-color: #1134a4; border-radius: 20px; cursor: pointer;
    height: 88px; display: flex; align-items: center; justify-content: center; width: 870px; margin: 75px auto 0;
}
/* review section */



.footer_wrap{width: 100%; background-color: #808080; color: #fff; padding: 80px 0 100px; box-sizing: border-box;}
footer{width: 907px; margin: 0 auto;}
footer ul{margin-bottom: 30px;}
/* footer */




@media screen and (max-width: 1023px){


    header{padding: 33px 0 30px; width: 90%;}

    .m_ver{display: block;}
    .pc_ver{display: none;}

    /* header*/


    .main_text,
    .price_box,
    .select_box,
    .moving_wrap,
    .comparison_text,
    .contents_box,
    .review img{width: 90%;}

    .select02,
    .select04{margin-left: 0;}    
    .select03{margin-bottom: 22px;}

    .moving_wrap ul li{background-size: 100%; padding-top: 180px;}

    .comparison_text{background-image: url('/cf/image/m_landing_con02.png'); background-size: contain; text-align: center; padding-bottom: 360px;}

    .contents_box{background-size: 100%; padding: 22px 0 50px 40px;}
    .contents_box > ul{margin-bottom: 30px;}
    .contents_con ul:first-of-type{margin-bottom: 20px;}
    .contents_box ul li{font-size: 20px;}

    .moving_price{width: 80%;}

    footer{width: 90%;}
}



@media screen and (max-width: 768px){


    header{padding: 12px 0 0; align-items: flex-start;}
    header h1{width: 60px; padding-top: 5px; height: auto;}
    header h1 a img{width: 100%;}
    .top_text{background-size: 24px; padding-left: 26px;}
    .top_text ul li:first-of-type,
    .top_text ul li:last-of-type{font-size: 14px;}
    /* header */


    .personal_infoBox{width: 80%; height: 300px;}
    .personal_info{width: 80%; height: 210px; font-size: 10px; padding: 10px;}
    .personal_infoBox h2{font-size: 15px; margin: 15px 0;}


    .m_br{display: block; text-indent: -9999px; height: 0;}
    .main_text{display: block; padding: 20px 0;}
    .csCenter{background-size: 50px 45px; padding-left: 63px; width: 75%; margin: 0 auto 20px;}
    .main_text ul:last-of-type{width: 75%; margin: 0 auto; padding-left: 63px;}
    .main_text ul li:first-of-type p{font-size: 18px;}
    .main_text ul li{font-size: 12px;}
    .main_text ul:last-of-type li:first-of-type p{font-size: 18px;}
    .main_text ul:last-of-type li:nth-of-type(2),
    .main_text ul:last-of-type li:nth-of-type(3){font-size: 14px;}

    .price_box{padding: 30px 0;}
    .price_box h2{font-size: 20px; margin-bottom: 20px;}
    .price_box form{width: 100%;}
    .price_form{margin: 0 auto 20px; width: 90%;}
    .price_form ul li:not(:last-of-type){margin-bottom: 10px;}
    .price_form ul li label{font-size: 14px;}
    .price_form ul li input[type="text"]{width: 80%; height: 30px; font-size: 14px;}
    .agree_box{width: 90%; margin: 0 auto 20px;}
    .agree_box ul{display: block;}
    .agree_box ul li:not(:last-of-type){margin-bottom: 5px;}
    .agree_box ul li label{font-size: 12px;}
    .agree_box ul li label span{width: 10px; height: 10px;}
    .agree_box ul li label.active_check span{width: 7px; margin-left: 3px;}
    .request_btn{width: 80%; font-size: 16px; height: 35px; margin: 20px auto;}
    .clean_box{width: 90%; margin: 0 auto; display: block;}
    .clean_box p{font-size: 18px; margin-bottom: 5px;}
    .clean_box ul{width: 100%; justify-content: flex-start;}
    .clean_box ul li label{font-size: 14px;}
    .clean_box ul li label span{width: 15px; height: 15px;}
    .clean_box ul li label span::after{width: 9px; height: 9px; top: 3px; left: 3px;}

    .select_wrap{padding: 40px 0 65px;}
    .select_wrap h2{font-size: 20px; margin-bottom: 25px;}
    .select_box div{width: 100%; padding: 15px 18px 15px 100px; background-size: 60px;}
    .select_box div ul li{font-size: 11px;}
    .select_box div ul li p{margin-bottom: 5px;}
    .select01, .select02, .select03{margin-bottom: 15px;}

    .moving_wrap{padding: 30px 0 50px;}
    .moving_wrap h2{font-size: 20px; margin-bottom: 20px;}
    .moving_wrap ul{flex-wrap: wrap;}
    .moving_wrap ul li{width: 47%; font-size: 14px; background-size: 130px; line-height: 1.2; padding-top: 110px;}
    .moving_wrap ul li:not(:first-of-type){margin-left: 10px;}
    .moving_wrap ul li:nth-of-type(3){margin-left: 0;}
    .moving_wrap ul li:first-of-type,
    .moving_wrap ul li:nth-of-type(2){margin-bottom: 20px;}

    .process_wrap{padding: 40px 0;}
    .process_wrap h2{font-size: 20px; margin-bottom: 20px;}
    .process_wrap img{width: 90%;}

    .comparison_wrap{padding: 40px 0;}
    .comparison_wrap h2{font-size: 20px;}
    .comparison_wrap ul{font-size: 12px;}
    .comparison_text{background-size: 330px; background-position: center bottom; padding-bottom: 200px;}

    .contents_wrap{padding: 30px 0;}
    .contents_box{padding: 10px 0 10px 20px; border-radius: 20px; background-position: center;}
    .contents_box h2{font-size: 12px; padding: 5px 8px; width: 180px; margin-left: 0;}
    .contents_box > ul{background-size: 25px; padding-left: 30px; margin-bottom: 15px;}
    .contents_box ul li{font-size: 10px;}
    .contents_box ul li span::after{height: 8px;}
    .contents_con ul{background-size: 20px; padding-left: 25px;}
    .contents_con ul:first-of-type{margin-bottom: 10px;}

    .review{padding: 50px 0 60px;}
    .review h2{font-size: 20px; margin-bottom: 20px;}
    .moving_price{font-size: 20px; height: 50px; margin: 30px auto 0;}




    .footer_wrap{padding: 40px 0 50px;}
    footer{font-size: 10px;}
    footer ul{margin-bottom: 15px;}




}