/*Noto Sans / font weight
-Thin(100)
-Light(300)
-Regular(400)
-Medium(500)
-Bold(700)
-Black(900)
*/
@font-face {
    font-family: 'noto_sans_kr';
    font-style: 'normal';
    src: url('../noto_sans_kr.woff'); 
}

/*-----Common-----*/
.landingpage{clear: both; width: 100%; position: relative; margin: 0;}
.landingpage .wrap{width: 100%; position: relative; margin: 0; text-align: center;}
.landingpage .inner_content{margin: 0 auto; position: relative;}
.landingpage .bolder{font-weight: 700;}
.landingpage .font_medium{font-weight: 500; font-weight: 800;}
.landingpage .main_title{width: 100%; text-align: center; font-family: 'noto_sans_kr'; font-weight: 400; color: #202020; animation: fadeIn 0.5s ease-in-out;} @keyframes fadeIn {from{opacity: 0; transform: translateY(20px);} to{opacity: 3; transform: none;}}
.landingpage .point_white{color:#ffffff; font-weight: 700}
.landingpage .point_deepblue{color:#0333c5; font-weight: 700}
.landingpage .point_blue{color: #0e41dd;}
.landingpage .point_black{color: #111111;}
.landingpage .point_yellow{color: #fffc00; font-weight: 700}
.landingpage .point_red{color: #ff0600;}
.landingpage .point_green{color: #01fc9e;}
.landingpage .point_skyblue{color: #77fffc;}
.landingpage .inner_content .text_box{width: 100%; text-align: center;}
.landingpage .inner_content .subtitle{font-family: 'noto_sans_kr'; font-weight: 300; color: #3f3f3f;}
.landingpage .content01 .inner_content ul li{box-sizing: border-box; float: left; background:rgba(255, 255, 255, 0.5); border-radius: 50%; font-family: 'noto_sans_kr'; font-weight: 500; color: #333; animation: fadeIn 0.7s ease-in-out;} @keyframes fadeIn {from{opacity: 0; transform: translateY(5px);} to{opacity: 1; transform: none;}}
.landingpage .content02 .inner_content .data_table{display: flex; justify-content: space-around; box-sizing: border-box; background-color: #031055; overflow: visible; align-items: center;}
.landingpage .content02 .inner_content .data_table li div {display: inline-block; vertical-align: top;}
.landingpage .content02 .inner_content .data_table .subject {color: #ffffff; font-family: 'noto_sans_kr'; font-weight: 500;}
.landingpage .content02 .inner_content .data_table .sub_data { font-family: 'noto_sans_kr'; font-weight: 700;}
.landingpage .content02 .inner_content .data_table li.line {width: 0px; border-right: 1px solid #fff;}
.landingpage .content02 .inner_content .wrap_pentagon_box .factor{width:fit-content; text-align: left; font-family: 'noto_sans_kr'; font-weight: 400; color: #555;}
.landingpage .content02 .inner_content table{border-collapse: collapse; font-family: 'noto_sans_kr'; font-weight: 400; color: #3f3f3f;}
.landingpage .content02 .inner_content table tr.subject_line{padding: 0; border-top: 2px solid #afafaf; border-bottom: 2px solid #afafaf;}
.landingpage .content02 .inner_content table tr{border-bottom: 1px solid #cecece;}
.landingpage .content02 .inner_content table tr.subject_line th{text-align: center;}
.landingpage .content02 .inner_content table tr td{text-align: left;}
.landingpage .content03 .wrap_reason .main_text{color: #202020; font-family: 'noto_sans_kr'; font-weight: 500;}
.landingpage .content03 .wrap_reason .sub_text{color: #666666; font-family: 'noto_sans_kr'; font-weight: 400;}
.landingpage .btn_common {outline: none; border: 0; padding: 0; font-family: 'noto_sans_kr'; font-weight: 500; cursor: pointer; transition: all 0.3s;}
.landingpage .btn_common .button-text {width:fit-content ; color: #3f3f3f; text-align: left;}
input::-webkit-inner-spin-button {appearance: none; -moz-appearance: none; -webkit-appearance: none;}


/*----------Landingpage----------*/
#landing_ad{height: 3862px;}
#landing_ad .wrap{min-width: 1200px;}
#landing_ad .inner_content{width: 1200px;}
#landing_ad .inner_content .subtitle{font-size: 40px; word-spacing: 0px; letter-spacing: -3px;}
/*header*/
.innerHeader {width: 1200px; height: 100px; line-height: 100px;  margin:auto;}
.innerHeader .logo {float: left;}
.innerHeader .logo a{display: block; width: 100%; height: 100%;}
/*Menu*/
.innerHeader .mainMenu {float: right; padding-top: 40px;}
.innerHeader .mainMenu a {display: block; border-radius: 40px; background: #031055; color: #fff; width: 140px; height: 35px; line-height: 35px; text-align: center;}
/*---Content01---*/
#landing_ad .content01{height: 649px; background: url(../images/bg_landing_ad_ctx01.png) repeat 50% 0; overflow: hidden;}
#landing_ad .content01 .inner_content{height: 649px;}
/*text / title*/
#landing_ad .content01 .inner_content .main_title{height: 140px; position: absolute; top: 147px; font-size: 52px; line-height: 70px; word-spacing: -4px; letter-spacing: -4px;}
/*text / 4 points*/
#landing_ad .content01 .inner_content ul{width: 800px; height: 180px; position: absolute; top: 358px; left: 250px; }
#landing_ad .content01 .inner_content ul li{width: 180px; height: 180px; padding-top: 60px; margin-left: -20px; font-size: 21px; line-height: 28px; font-weight: 600;}
#landing_ad .content01 .inner_content ul li:first-child{margin-left: 0;}
#landing_ad .content01 .inner_content .text_box{height: 25px; position: absolute; top: 548px;}
#landing_ad .content01 .inner_content .text_box .text_lt{height: 25px; font-size: 18px; line-height: 25px; color: #555;}
#landing_ad .content01 .inner_content .text_box .icon_scope{width: 17px; height: 25px; padding-top: 8px;}
/*---Content02---*/
#landing_ad .content02{height: 977px;}
#landing_ad .content02 .inner_content{height: 977px;}
/*subtitle*/
#landing_ad .content02 .inner_content .subtitle{height: 95px; position: absolute; top: 110px; line-height: 45px; letter-spacing: -5px;}
/*table / data*/
#landing_ad .content02 .inner_content .data_table{width: 1000px; height: 90px; position: absolute; top: 203px; left: 100px; padding: 30px 40px; border-radius: 10px;}
#landing_ad .content02 .inner_content .data_table li div{height: 38px; line-height: 34px;}
#landing_ad .content02 .inner_content .data_table li .subject{font-size: 22px; margin-right: 20px;}
#landing_ad .content02 .inner_content .data_table li .sub_data{font-size: 38px; letter-spacing: -1px;}
#landing_ad .content02 .inner_content .data_table li.line{height: 30px;}
/*text*/
#landing_ad .content02 .inner_content .text_box.text_lower{height: 120px; position: absolute; top: 332px; font-size: 25px; font-weight: 400; color: #3f3f3f; line-height: 38px; word-spacing: -2px; letter-spacing: -2px;}
/*graph*/
#landing_ad .content02 .inner_content .wrap_graph_box{width: 474px; height: 407px; position: absolute; top: 492px; left: 100px; background: url(../images/graph_landing_ad.gif) no-repeat center/cover;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor{height: 20px; font-size: 28px; line-height: 30px; font-weight: 600; letter-spacing: -2.5px;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_01{position: absolute; top: 45px; left: 30px;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_02{position: absolute; top: 75px; left: 30px; font-size: 22px; font-weight: 300;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_03{position: absolute; top: 110px; left: 30px; font-size: 35px;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_04{position: absolute; top: 113px; left: 120px; font-size: 23px;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_05{position: absolute; top: 150px; left: 335px; animation: fadeIn 7s ease-in-out;animation-iteration-count: infinite;} 
@keyframes fadeIn {from{opacity: 0; transform: translateY(20px);} to{opacity: 3; transform: none;}}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_06{position: absolute; top: 287px; left: 68px; font-size: 15px; letter-spacing: -1px; font-weight: 200;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_07{position: absolute; top: 305px; left: 150px; font-size: 15px; letter-spacing: -1px; font-weight: 200;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_08{position: absolute; top: 320px; left: 220px; font-size: 15px; letter-spacing: -1px; font-weight: 200;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_09{position: absolute; top: 338px; left: 288px; font-size: 15px; letter-spacing: -1px; font-weight: 200;}
#landing_ad .content02 .inner_content .wrap_graph_box .factor.factor_10{position: absolute; top: 355px; left: 360px; font-size: 18px; letter-spacing: -1px;}
/*review table*/
#landing_ad .content02 .inner_content table{width: 500px; height: fit-content; position: absolute; top: 492px; left: 600px;}
#landing_ad .content02 .inner_content table tr.subject_line{height: 41px;}
#landing_ad .content02 .inner_content table tr{height: 39px;}
#landing_ad .content02 .inner_content table tr.subject_line th{font-size: 18px; line-height: 41px;}
#landing_ad .content02 .inner_content table tr td:first-child{width: 140px;}
#landing_ad .content02 .inner_content table tr td:last-child{width: 280px;}
#landing_ad .content02 .inner_content table tr td{padding: 0 0 0 20px; font-size: 16px; line-height: 39px;}
/*---Content03---*/
#landing_ad .content03{height: 1510px; background: url(../images/bg_landing_ad_ctx02.png) no-repeat 50% 0;}
#landing_ad .content03 .inner_content{height: 1510px;}
/*subtitle*/
#landing_ad .content03 .inner_content .subtitle{height: 45px; position: absolute; top: 105px; line-height: 70px; font-size: 55px; 
text-shadow: 1px 1px 2px #081a7d, 0 0 1em #273689, 0 0 0.1em #273689; animation: up-down 1.4s infinite ease-in-out alternate;}
@keyframes up-down{from{transform: translatey(0px);} to{transform: translatey(-20px);}}
#landing_ad .content03 .inner_content .wrap_reason{height: 272px; padding-top: 5px;}
#landing_ad .content03 .inner_content .wrap_reason .main_text{width: 100%; height: 35px; font-size: 30px; line-height: 35px; font-weight: 700;}
#landing_ad .content03 .inner_content .wrap_reason .sub_text{width: 100%; height: 80px; margin-top: 55px; font-size: 23px; line-height: 38px; }
#landing_ad .content03 .inner_content .wrap_reason.wrap_reason_01{height: 327px; padding-top: 40px; position: absolute; top: 340px;}
#landing_ad .content03 .inner_content .wrap_reason.wrap_reason_02{position: absolute; top: 770px;}
#landing_ad .content03 .inner_content .wrap_reason.wrap_reason_03{position: absolute; top: 1160px;}
/*---Content04---*/
#landing_ad .content04{height: 661px;}
#landing_ad .content04 .inner_content{height: 800px; background: url(../images/bg_landing_ad_ctx03.png) no-repeat center / cover;}
/*subtitle*/
#landing_ad .content04 .inner_content .subtitle{font-size: 45px; height: 45px; position: absolute; top: 400px; line-height: 65px; font-weight: 600; color: #ffffff; text-shadow: 1px 1px 2px #000, 0 0 1em #000, 0 0 0.1em #000; animation: up-down 1.4s infinite ease-in-out alternate;} 
@keyframes up-down{from{transform: translatey(0px);} to{transform: translatey(-20px);}}


/*----------Fixed bar / bottom----------*/
#bottom_bar_gnb{width: 100%; height: 80px; position: fixed; bottom: 0; background-color: #0c3bca; cursor: pointer; transition: all 0.3s;}
#bottom_bar_gnb:hover{background-color: #022db1;}
#bottom_bar_gnb .wrap{width: 1200px; height: 80px; margin: 0 auto; position: relative;}
/*text*/
#bottom_bar_gnb .wrap .text_box{width: 590px; height: 23px; position: absolute; top: 16px; left: 0; text-align: left; font-size: 25px; font-family: 'noto_sans_kr'; font-weight: 700; color: #fff; line-height: 23px; word-spacing: -2.2px; letter-spacing: -1px;}
#bottom_bar_gnb .wrap .text_box span.point_yellow{color: #fffc00;}
#bottom_bar_gnb .wrap .text_box span.point_green{color: #13ff13;}


/*checkbox*/
#bottom_bar_gnb .wrap label {width: 590px; height: 20px; position: absolute; top: 46px; left: 0px; padding: 0;}
#bottom_bar_gnb .wrap label input[type="checkbox"]{width: 16px; height: 16px; position: absolute; top: 2px; left: 0px; margin: 0; border: none; outline: none;}
#bottom_bar_gnb .wrap label div.text_checkbox{width: fit-content; position: absolute; top: 0; left: 26px; font-size: 15px; font-family: 'noto_sans_kr'; font-weight: 400; color: #fff; line-height: 18px; word-spacing: -1.5px; letter-spacing: -1px;}
#bottom_bar_gnb .wrap label div.text_checkbox span{color: #fff; cursor: pointer; transition: all 0.2s;}
#bottom_bar_gnb .wrap label div.text_checkbox span:hover{color: #13ff13;}



/*input box*/
#bottom_bar_gnb .wrap input{box-sizing: border-box; height: 48px; resize: none; padding-left: 10px; position: absolute; top: 16px; border: none; outline: none; text-decoration: none; text-align: left; font-size: 16px; font-family: 'noto_sans_kr'; font-weight: 400; color: #555; line-height: 48px; word-spacing: -1px; letter-spacing: -0.5px;}
#bottom_bar_gnb .wrap input::placeholder{font-size: 16px; color: #999;}
#bottom_bar_gnb .wrap input[type="text"]{width: 180px; position: absolute; left: 450px;}
#bottom_bar_gnb .wrap input[type="number"]{width: 250px; position: absolute; left: 640px;}
/*button / reserve a consult*/
#bottom_bar_gnb .wrap .btn_consult{width: 290px; height: 80px; position: absolute; top: 0; right: 0; background-color: #202020; cursor: pointer; transition: all 0.2s;}
#bottom_bar_gnb .wrap .btn_consult .text{width: fit-content; height: 80px; position: absolute; right: 85px; text-align: right; font-size: 23px; font-family: 'noto_sans_kr'; font-weight: 700; color: #fffc04; line-height: 80px; word-spacing: -1px; letter-spacing: -1px;}
#bottom_bar_gnb .wrap .btn_consult .icon_arrows{display: inline-block; width: 52px; height:23px; position: absolute; top: 28px; right: 25px; background: url(../images/icon_arrows.gif) no-repeat center / cover;}


/*---floating banner---*/
#landing_ad .floating_banner{width: 310px; height: 480px; background:url(../images/bg_layer_popup.png) no-repeat center / cover; position: fixed; top: 350px; left: 52%; transform: translateX(600px); -webkit-box-shadow: 2px 5px 10px 0px rgba(85,85,85,0.3); box-shadow: 2px 5px 10px 0px rgba(85,85,85,0.3);} /*scroll시 위에서부터 835px인 지점부터 나타나게 해주세요 ->작업하실 때 확인바랍니다! */
#landing_ad .floating_banner .text_box{width: 280px; text-align: left; font-family: 'noto_sans_kr'; font-weight: 400; position: absolute; left: 15px;}
#landing_ad .floating_banner .title{height: 40px; position: absolute; top: 30px; font-size: 27px; font-weight: 700; color: #ffffff; line-height: 35px; word-spacing: -2px; letter-spacing: -2px; text-align: center;}
#landing_ad .floating_banner input{padding-left: 10px; box-sizing: border-box; height: 40px; resize: none; border: 1px solid #cecece; line-height: 30px; font-size: 16px; color: #555; text-decoration: none;}
#landing_ad .floating_banner input::placeholder{font-size: 15px; color: #999;}
#landing_ad .floating_banner input[name="company"]{position: absolute; top: 138px;}
#landing_ad .floating_banner input[name="companynumber"]{position: absolute; top: 183px;}
#landing_ad .floating_banner input[name="name2"]{position: absolute; top: 228px;}
#landing_ad .floating_banner input[name="phone2"]{position: absolute; top: 273px;}


/*checkbox*/
#landing_ad .floating_banner label {width: 250px; height: 18px; position: absolute; top: 348px; left: 40px; padding: 0;}
/* #landing_ad .floating_banner label input[type="checkbox"]{width: 16px; height: 16px; position: absolute; top: 2px; left: 0px; margin: 0; border-color: #666; outline: none;} */
/* #landing_ad .floating_banner label div{width: fit-content; position: absolute; top: 0; left: 19px; font-size: 13px; font-family: 'noto_sans_kr'; font-weight: 400; color: #333; line-height: 18px; word-spacing: -1.1px; letter-spacing: -1.1px;} */
/* #landing_ad .floating_banner label div span{cursor: pointer; transition: all 0.2s;} */
/* #landing_ad .floating_banner label div span:hover{color: #064bfb;} */

/*checkbox*/
#landing_ad .floating_banner label {width: 250px; height: 18px; position: absolute; top: 348px; left: 40px; padding: 0;}
#landing_ad .floating_banner label input[type="checkbox"]{width: 16px; height: 16px; position: absolute; top: 2px; left: 0px; margin: 0; border-color: #666; outline: none;}
#landing_ad .floating_banner label div.text_checkbox{width: fit-content; position: absolute; top: 0; left: 19px; font-size: 13px; font-family: 'noto_sans_kr'; font-weight: 400; color: #333; line-height: 18px; word-spacing: -1.1px; letter-spacing: -1.1px;}
#landing_ad .floating_banner label div.text_checkbox span{cursor: pointer; transition: all 0.2s;}
#landing_ad .floating_banner label div.text_checkbox span:hover{color: #064bfb;}



/*button_reserve a consult*/
#landing_ad .floating_banner .btn_consult{width: 250px; height: 50px; position: absolute; top: 385px; left: 29px; background-color: #333333; border-radius: 40px; text-align: center; font-size: 18px; font-weight: 700; color: #fff; line-height: 50px;}
#landing_ad .floating_banner .btn_consult:hover{background-color: #043b79;}
/*button_up*/
#landing_ad .floating_banner .btn_up{width: 300px; height: 45px; position: absolute; bottom: 0; left: 0; text-align: center; font-size: 14px; color: #626262; line-height: 50px;}
#landing_ad .floating_banner .btn_up .icon_up{width: 20px; height: 12px; display: inline-block; background: url(../images/icon_up.png) no-repeat center / cover; transition: all 0.3s;}
#landing_ad .floating_banner .btn_up:hover{color: #000;}
#landing_ad .floating_banner .btn_up:hover .icon_up{background: url(../images/icon_up_on.png) no-repeat center / cover;}


/*policy popup*/
.popup{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4);}
.popup-content{background-color:#fefefe;margin:5% auto;width:70%;max-width:700px;border:1px solid #000;padding:20px;box-shadow:0 0 10px rgba(0,0,0,0.1);}
.popup-content h1{background-color:#0047ab;color:white;padding:10px;}
.content{margin-top:20px;}
.content p{margin:10px 0;text-indent:-20px;padding-left:20px;}
.content ul{margin:10px 20px;padding-left:0;}
.content ul li{margin:5px 0;text-indent:-20px;padding-left:20px;}
.close-btn{display:block;width:100px;margin:20px auto;padding:10px;background-color:#0047ab;color:white;text-align:center;cursor:pointer;}