/*sb_aggro*/

@font-face {
    font-family: 'sb_aggro';
    font-style: normal;
    font-weight: 300;
    src: url('../font/sb_aggro_L.woff2') format('woff2'),
    url('../font/sb_aggro_L.woff') format('woff'),
    url('../font/sb_aggro_L.otf') format('opentype');
}

@font-face {
    font-family: 'sb_aggro';
    font-style: normal;
    font-weight: 500;
    src: url('../font/sb_aggro_M.woff2') format('woff2'),
    url('../font/sb_aggro_M.woff') format('woff'),
    url('../font/sb_aggro_M.otf') format('opentype');
}

@font-face {
    font-family: 'sb_aggro';
    font-style: normal;
    font-weight: 700;
    src: url('../font/sb_aggro_B.woff2') format('woff2'),
    url('../font/sb_aggro_B.woff') format('woff'),
    url('../font/sb_aggro_B.otf') format('opentype');
}


/*Pretendard*/

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100;
    src: url('../font/Pretendard-Thin.woff2') format('woff2'),
    url('../font/Pretendard-Thin.woff') format('woff'),
    url('../font/Pretendard-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200;
    src: url('../font/Pretendard-ExtraLight.woff2') format('woff2'),
    url('../font/Pretendard-ExtraLight.woff') format('woff'),
    url('../font/Pretendard-ExtraLight.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    src: url('../font/Pretendard-Light.woff2') format('woff2'),
    url('../font/Pretendard-Light.woff') format('woff'),
    url('../font/Pretendard-Light.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url('../font/Pretendard-Regular.woff2') format('woff2'),
    url('../font/Pretendard-Regular.woff') format('woff'),
    url('../font/Pretendard-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url('../font/Pretendard-Medium.woff2') format('woff2'),
    url('../font/Pretendard-Mediumt.woff') format('woff'),
    url('../font/Pretendard-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-style:ormal;
    font-weight: 600;
    src: url('../font/Pretendard-SemiBold.woff2') format('woff2'),
    url('../font/Pretendard-SemiBold.woff') format('woff'),
    url('../font/Pretendard-SemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-style:ormal;
    font-weight: 700;
    src: url('../font/Pretendard-Bold.woff2') format('woff2'),
    url('../font/Pretendard-Bold.woff') format('woff'),
    url('../font/Pretendard-Bold.otf') format('opentype');
}


@font-face {
    font-family: 'Pretendard';
    font-style:ormal;
    font-weight: 800;
    src: url('../font/Pretendard-ExtraBold.woff2') format('woff2'),
    url('../font/Pretendard-ExtraBold.woff') format('woff'),
    url('../font/Pretendard-ExtraBold.otf') format('opentype');
}


@font-face {
    font-family: 'Pretendard';
    font-style:ormal;
    font-weight: 900;
    src: url('../font/Pretendard-Black.woff2') format('woff2'),
    url('../font/Pretendard-Black.woff') format('woff'),
    url('../font/Pretendard-Black.otf') format('opentype');
}




/* reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,textarea,p,blockquote,th,td,input,select,textarea,button,option{margin:0;padding:0}
fieldset,img,abbr,acronym{border:0 none}
dl,ul,ol,menu,li{list-style:none}
table{border-collapse:collapse;border-spacing:0;border:0 none}
blockquote,q{quotes: none}
blockquote:before,blockquote:after,q:before,q:after{content:''}
input,select,textarea,button{vertical-align:middle}
hr{display:none}
button{border:0 none;background-color:transparent;cursor:pointer}
body, html {line-height:normal; position: relative;  padding:0; margin:0; font-size: 14px; font-weight:400; font-family:'sb_aggro', 'Pretendard', '돋움', Dotum,'굴림',Gulim,Helvetica,sans-serif; }
img,iframe{vertical-align:middle}
legend{*display:none}
a{color:#333;text-decoration:none; cursor: pointer;}
a:active,a:hover{text-decoration:none}
address,cite,code,dfn,em,var,strong,em{font-style:normal;font-weight:normal}
caption{font-size:0;width:0;height:0;line-height:0;text-indent:-9999px}
strong{font-weight:bold}
ins{text-decoration:none}
del{text-decoration:line-through}
input,select{font-family:'sb_aggro', 'Pretendard', '돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif; font-size:15px; font-weight:400; color:#666;}
span, em {font-size: inherit;font-weight: inherit;color: inherit;}

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:none}


/* 플로팅 */
.fr {float:right !important;}
.fl {float:left !important;}
.fc {float:center !important;}
.fn {float:none !important;}
.clear:after {display:block; clear:both; content:"";}
.block {display:block;}
.cl_b {width:0;height:0;font-size:0;line-height:0;clear:both}
.hide {display:none}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
.txtL{text-align:left !important;}
.txtC{text-align:center !important;}
.txtR{text-align:right !important;}
.vm {vertical-align:middle !important}
.vt {vertical-align:top !important}

/*[class*=btn] {display: inline-flex; justify-content: center; align-items: center; position: relative; height: 60px; font-weight: 400; text-align: center; letter-spacing: -0.08rem;}

*/

input{padding-left: 10px; font-family: 'Pretendard'; height: 48px; line-height: 48px; font-size: 15px; font-weight: 300; border: 1px solid #bbb;}
input::placeholder { color: #aaa; font-size: 14px; font-weight: 300;}

.hidden { position: absolute; z-index: -1;width: 1px; height: 1px; margin: -1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(.content%); overflow: hidden;}

html,body{height: 100%}

/*intro*/
.intro_wrap{position: relative; height: 110%; background: url(../images/intro_bg.png); background-size: cover;}
.intro_wrap > .header{width: 100%; font-size: 40px; line-height: 1.2; color: #fff; text-align: center; padding: 130px 0 50px 0 }

.intro_wrap .name_wrap{padding: 50px 0 }
.intro_wrap .name_wrap:after{content: ''; position: absolute; top:220px; left: 3%; right: 3%; height: 3px; border-radius: 100px; background:#7cb9e8 }
.intro_wrap .name_wrap > p{ font-size: 30px; text-align: center; color: #fff}

.brn_wrap{margin-top: 30px; width: 100%; text-align: center;}
.btn_ok{display: inline-block; padding: 15px 0 26px 0; width: 300px; font-size: 27px;  color: #000; text-align: center; background: url(../images/btn_on.png); background-repeat: no-repeat; background-size: contain;}

.btn_ok:hover, .btn_ok:active{ font-weight: 700;}


.btn_ok_01{display: inline-block; padding: 20px 0 26px 0; width: 300px; font-size: 27px;  color: #000; text-align: center; background: url(../images/btn_on.png); background-repeat: no-repeat; background-size: contain;}

.btn_ok_01:hover, .btn_ok_01:active{ font-weight: 700;}


.btn_ok_02{display: inline-block; padding: 15px 0 26px 20px; width: 156px; font-size: 27px;  color: #000; text-align: left; background: url(../images/btn_on_02.png); background-repeat: no-repeat; background-size: contain;}
.btn_ok_02:hover, .btn_ok_02:active{ font-weight: 700;}

.btn_ok_02.off{background: url(../images/btn_off_02.png); background-repeat: no-repeat; background-size: contain;}

.btn_ok_03{display: inline-block; padding: 15px 0 26px 20px; width: 220px; font-size: 27px;  color: #000; text-align: left; 
background: url(../images/btn_on_03.png); background-repeat: no-repeat; background-size: contain;}

.btn_ok_03:hover, .btn_ok_02:active{ font-weight: 700;}

.btn_ok_03.off{background: url(../images/btn_off_03.png); background-repeat: no-repeat; background-size: contain;s}


.btn_ok_04{display: inline-block; padding: 15px 0 26px 0; width: 300px; font-size: 27px;  color: #000; text-align: center; background: url(../images/btn_on.png); background-repeat: no-repeat; background-size: contain;}
.btn_ok_04:hover, .btn_ok_04:active{ font-weight: 700;}
.btn_ok_04.off{background: url(../images/btn_off.png); background-repeat: no-repeat; }


.btn_ok_01.off{display: inline-block; padding: 20px 0 26px 0; width: 300px; font-size: 27px;  color: #000; text-align: center; background: url(../images/btn_off_01.png); background-repeat: no-repeat; background-size: contain;}

.s_header{width: 100%; font-size: 30px; line-height: 1.2; color: #fff; text-align: center; padding: 50px 0 30px 0 }
.s_header:after{content: ''; position: absolute; top:560px; left: 3%; right: 3%; height: 3px; border-radius: 100px; background:#7cb9e8 }

.textarea_wrap{width: 100%; text-align: center; padding: 0 20px 0 20px}
.intro_wrap .textarea_wrap:after{content: ''; position: absolute; top:2025px; left: 3%; right: 3%; height: 3px; border-radius: 100px; background:#7cb9e8 }
.textarea_wrap textarea{ border: none; font-family: 'Pretendard'; padding: 10px; width: 100%; height: 400px; font-size: 19px; border-radius:5px; margin:15px 0 20px 0; overflow: hidden; line-height: 1.4}
.intro_wrap .textarea_wrap > table {margin-top:10px; border:2px solid #0056a2; width: 100%; text-align: left; height: 100px; margin-bottom: 15px; background: #fff}
.intro_wrap .textarea_wrap  td {border: 1px solid  #0056a2; padding: 10px; font-size: 15px;}
.intro_wrap .textarea_wrap  td:first-child{     color: #004f5a;   background: #bff8ff;}
.intro_wrap .textarea_wrap  td:last-child{     color: #333;     font-size: 15px;  font-weight:300;}
.intro_wrap .textarea_wrap > p{ font-size: 20px; font-weight:200; line-height:1.3; text-align:left; color: #fff;word-break: keep-all;}

.intro_wrap .textarea_wrap > p.bold{ font-size: 19px; font-weight:700;}
/*page*/
.wrap{height: 100%; }
.wrap > .header{padding: 20px 0 20px 0; text-align: center;  font-size: 40px; line-height: 1.2; color: #fff; background: #207ed0}
.header .step_wrap{width: 100%; text-align: center;}
.header .step_wrap ul{display: inline-block; position: relative;}
.header .step_wrap ul:after{content: ''; position:absolute; top:28px; left: 10px; right: 10px; height: 3px; background:#fff; z-index:1 }
.header .step_wrap li { display: inline-block; width: 40px; height: 40px; font-size: 15px; letter-spacing: -0.045em; line-height: 40px; color: #9dcaf2; border-radius: 100px; background: #fff;
                           position: inherit; z-index: 2}

.header .step_wrap li.now{color: #2c69f5; background:#ffd91e }
.header .step_wrap li.past{background: #104e84; }

.content{ padding:20px;background: #fff}
.title{position: relative;}
.title > span{display: inline-block; padding: 0 5px; position: absolute; left: 0;  top:0;  height: 40px; font-size: 21px; color: #fff; text-align: center; line-height: 43px; border-radius: 10px; background: #2c69f5}
.title{padding-left: 60px; font-size: 25px; line-height: 1.1}


.answer{padding: 30px 0; text-align: center;}

.btn_yes{position: relative; display: inline-block;    margin-top:20px;  padding: 15px 0 15px 15px; width: 90%; font-size: 25px;  color: #000; text-align: left; border: 4px solid #000; border-radius: 100px; 
          background:#ffd91e 0 0 no-repeat; box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.5);-webkit-box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.5);}

.btn_no{margin-top: 20px; position: relative; display: inline-block; padding: 15px 0 15px 15px; width: 90%; font-size: 25px;  color: #000; text-align: left; border: 4px solid #000; border-radius: 100px; 
          background:#ccc 0 0 no-repeat; box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.5);-webkit-box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.5);}


.btn_yes:active, .btn_no:active{background: #f3b100; box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.0);-webkit-box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.0); -moz-box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.0);}

.btn_yes img, .btn_no img{margin-right: 5px; vertical-align: middle;}


.btn_wrap{position: fixed; bottom: 0; padding: 30px 0; width: 100%; text-align: center; background: rgba( 193, 237, 255, 0.7 ) }

.btn_wrap > a{display:inline-block; padding: 18px 0 22px 0; font-size: 27px; color: #fff;  width: 155px; height: 65px; vertical-align: middle; background: url(../images/img_btn_bg.png) 0 0 no-repeat;}
.btn_wrap > a > img{vertical-align: middle;}
.btn_wrap > a.no{background: url(../images/img_btn_bg_01.png) 0 0 no-repeat;}

.answer textarea{width: 90%; border:3px solid #000; border-radius: 10px; padding:10px; font-family: 'Pretendard'; height: 100px; font-size: 19px; }
.answer .tit{margin-bottom: 10px; text-align: left; font-size: 25px; line-height: 34px}
.answer .sbtn_search{float: right; width: 34px; height: 34px; vertical-align: middle; background: url(../images/img_sch.png) 0 0 no-repeat; overflow:hidden; text-indent:-9999px }
.answer .img_list li{margin-bottom: 30px;  }
.answer .img_list .img{border-radius: 15px; overflow:hidden; }
.answer .img_list .img img{width: 100%}

.answer .img_list > li > .sbtn_wrap > a{width: 100%;}
.sbtn_wrap{margin-top:20px;}

.sbtn_wrap > .btn_yes{ padding: 15px 20px; width: auto;}


.end_wrap{position: relative; height: 100%; text-align: center; background: url(../images/end_bg.png) 0 0 no-repeat; background-size: cover;}
.end_wrap .end_txt{position: absolute; top: 40%; left: 5%; right: 5%; transform: translateY(-50%); font-size: 34px; color: #fff}
.end_wrap .stxt_01{margin-bottom: 20px; font-size: 24px; color: #ffdb28; line-height: 1}
.end_wrap .stxt_02{line-height: 1.3}
.end_wrap .stxt_03{margin: 30px 0}
.end_wrap .stxt_04{font-size: 23px; }


.content.list > .q01_wrap{margin-top: 20px; padding:20px;background: #fff}
.answer_list{margin: 10px auto 0 60px; padding: 15px; font-size: 20px; color: #0642ca; border-radius: 15px; background: #e1e1e1}
.s_img{margin-top: 10px; font-size: 20px; color: #000; text-align: left;}
.answer_list > li > p > img{width: 100%}
.answer_list > li > .img {border-radius: 15px; overflow: hidden;}

.answer_list > li {margin-bottom: 20px}
.btn_go{display: inline-block; padding: 11px 0 15px 0; float:right; width:80px; height: 40px; font-size: 19px; letter-spacing: -0.085em; text-align: center; color: #000; background: url(../images/btn_go.png) 0 0 no-repeat;}
.btn_go:active{color: #fff; background: url(../images/btn_go_active.png) 0 0 no-repeat;}
.title:after{ content:""; display:block; clear:both}
.check{margin-right: 5px; display: inline-block; width:37px; height:37px; vertical-align: middle; background:url(../images/check.png) 0 0 no-repeat; overflow: hidden; text-indent: -9999px; }
.check.on, .check:active {display: inline-block; width:37px; height:37px; background:url(../images/check_on.png) 0 0 no-repeat; }
.check2{margin-right: 5px; display: inline-block; width:37px; height:37px; vertical-align: middle; background:url(../images/check.png) 0 0 no-repeat; overflow: hidden; text-indent: -9999px; }
.check2.on, .check:active {display: inline-block; width:37px; height:37px; background:url(../images/check_on.png) 0 0 no-repeat; }
.btn_perv{margin-right: 10px}


.intro{background: #207ed0}
.answer .img_list.list_01 > li { margin-bottom: 30px; border-bottom: 2px dotted #555;  padding-bottom: 35px;}

.h1_wrap{width:100%;text-align: center; margin-bottom: 15px}
.logo{display: inline-block; width: 118px; height: 31px; overflow: hidden; text-indent: -999px; background: url(../images/logo.png) 0 0 no-repeat;}
.star_txt{position: relative; padding-left: 20px; font-size: 20px; color: #ca0000}
.star_txt > span{position: absolute; top:2px; left: 0; line-height: 1;  display:block; font-size: 30px; font-weight: 300;}


.img{position:relative;}
.sbtn_close{  overflow: hidden; text-indent: -9999px; position: absolute;  width: 55px; height: 55px; border-radius: 10px;  top: 10px;  right: 10px; background:rgba(0,0,0,0.5) url(../images/close.png) 50% 50% no-repeat}
.map_open{  overflow: hidden; text-indent: -9999px; position: absolute;  width: 55px; height: 55px; border-radius: 10px;  top: 10px;  left: 10px; background:rgba(0,0,0,0.5) url(../images/img_sch.png) 50% 50% no-repeat}