@charset "utf-8";
/* CSS Document */
body{ font-size:16px}
.box0{ margin:0 5em;}
.box1{ width:1260px; margin:0 auto; max-width:95%}

.PC{ display:block !important}
.PHONE{ display:none !important}

#header .top_wrap,
#header .top_wrap .va_wrap{ height:4em}
#header .top_wrap{ background:#fff}
#header .top_wrap .gnb_wrap .gnb > li .dp1{ display:block; position:relative; padding:0 2em; color:#333; margin-left:2em}
#header .top_wrap .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; left:0; top:50%; height:1px; width:1.5em; background:#1d43b4; transform:scaleX(0); transform-origin:left top; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.188em; font-weight:500}
#header .top_wrap .gnb_wrap .gnb > li .dp1:hover{ color:#1d43b4}
#header .top_wrap .gnb_wrap .gnb > li .dp1:hover:after{ transform:scaleX(1)}
#header .top_wrap .all_wrap{ padding:0 1em;}
#header .top_wrap .all_wrap .btn{ font-size:1.6em;}
#header .headerWrap{ visibility:hidden; opacity:0; transition:.3s}
#header .headerWrap .headerBg{ transform:scaleX(0); transition:.3s; transform-origin:right top}
#header .headerWrap .menu_wrap{ transform:scaleX(0); transition:.3s; transform-origin:left top}

#header{ position: fixed; left:0; top:0; width:100%; z-index:1000}
#header .gnb_wrap .gnb{ text-align:center;}
#header .gnb_wrap .gnb > li{ position:relative}
#header .gnb_wrap .gnb > li:before,
#header .gnb_wrap .gnb > li:before{ left:50%}
#header .gnb_wrap .gnb > li:after{ right:50%}
#header .gnb_wrap .gnb > li .dp1{ color:#333; display:block; padding:0 2em; min-width:6.5em; font-weight:500; position:relative; transition:.3s}
#header .gnb_wrap .gnb > li .dp1 .va{ position:relative; z-index:1; font-size:1.25em}
#header .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; margin-left:-4.5rem; width:11rem; opacity:0; visibility:hidden; border:1px solid #ddd;  background:#fff;}
#header .gnb_wrap .gnb > li .dp2 > li{ display:block}
#header .gnb_wrap .gnb > li .dp2 > li > a{ height:auto; color:#888; text-align:center; padding:.8em .5em; border-top:1px dotted #bbb;}
#header .gnb_wrap .gnb > li .dp2 > li:first-child > a{ border-top:none}
#header .gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:1em; position:relative;}
#header .gnb_wrap .gnb > li:hover .dp1,
#header .gnb_wrap .gnb > li.on .dp1{}
#header .gnb_wrap .gnb > li:hover:before,
#header .gnb_wrap .gnb > li.on:before,
#header .gnb_wrap .gnb > li:hover:after,
#header .gnb_wrap .gnb > li.on:after{ opacity:1; width:50%}
#header .gnb_wrap .gnb > li:hover .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ opacity:1}
#header .gnb_wrap .gnb > li:hover .dp2{ opacity:1; visibility:visible}
#header .gnb_wrap .gnb > li .dp2 > li:hover > a{ color:#1d43b4}
#header .gnb_wrap .gnb > li .dp2:after{ content:""; position:absolute; left:0; top:-3px; width:0; height:3px; background:#1d43b4; z-index:1; transition:.3s;}
#header .gnb_wrap .gnb > li:hover .dp2:after,
#header .gnb_wrap .gnb > li.on .dp2:after{ width:100%;}
#header .gnb_wrap .gnb > li .dp3{ display:none;}

#header .all_wrap{ float:left}
#header .all_wrap .allBtn{ width:3em; text-align:center;}
#header .all_wrap .allBtn .va{ font-size:1.6em; color:#111}
#header .all_wrap .all{ position: fixed; z-index:1; right:0; top:0; width:100%; height:100%; opacity:0; visibility:hidden; transition:.3s}
#header .all_wrap .all:before{ content:""; position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:.5}
#header .all_wrap .all .in{ position: absolute; top:-100%; width:100%; height:100%; background:#fff; transition:.3s; padding:10em 0 10em 0; }
#header .all_wrap.on .all{ opacity:1; visibility:visible}
#header .all_wrap.on .all .in{ top:0}
#header .all_wrap .gnb > li{ width:25%; position:relative; box-sizing:border-box; padding:0 .3em;}
#header .all_wrap .gnb > li:before,
#header .all_wrap .gnb > li:after { content:""; position:absolute; top:0; left:4%; width:92%; height:8px; transform:skew(-45deg); transition:.5s;}
#header .all_wrap .gnb > li:before{ background:#ccc;}
#header .all_wrap .gnb > li:after { background:#2c2f91; width:0;}
#header .all_wrap .gnb > li:hover:after { width:96%;}
#header .all_wrap .gnb > li .dp1{ height:70px; font-size:1.250em;}
#header .all_wrap .gnb > li .dp2{ margin:0 8px; padding:1rem 0; background:#fff; border:1px solid #ddd; box-shadow:1px 1px 5px rgba(0,0,0,.1); height:450px;}
#header .all_wrap .gnb > li .dp2 .va_wrap{ height:inherit;}
#header .all_wrap .gnb > li .dp2 li{ display:block;}
#header .all_wrap .gnb > li .dp2 li > a{ padding-left:10px !important;}
#header .all_wrap .gnb > li .dp2 > li{ padding:1em 1.5em;}
#header .all_wrap .gnb > li .dp2 > li > a{ position:relative; font-size:.938em; transition:.2s; text-align: left;}
#header .all_wrap .gnb > li .dp2 > li > a:after{ content:""; position:absolute; left:0; top:.5em; width:4px; height:2px; background:#999;}
#header .all_wrap .gnb > li .dp2 > li:hover > a{ margin-left:.3em;}
#header .all_wrap .gnb li:hover > a{ color:#2c2f91;} 
#header .all_wrap .gnb li:hover .dp2{ background:#fcfcfc; border-color:#ccc; transition:.2s;}
#header .all_wrap .tit_wrap .allClose{ position:absolute; top:1%; right:4%; font-size:1.8em; color:#999; transition:.3s;}
#header .all_wrap .tit_wrap .allClose:hover{ color:#2c2f91;}

#header .logo{ position:relative; height:4em; box-sizing:border-box}
#header .logo > a{ display:block;}


#footer{background:#1b2435;}
#footer:after{ display:block; clear:both; content:'';}
#footer .info_wrap{ padding:1.5em 0;}
#footer .info_wrap .f_logo{ text-align:center; margin-right:7.5em; margin-left:6em;}
#footer .info_wrap .info{ text-align:left; margin-top:.5em;}
#footer .info_wrap .info:after{ display:block; clear:both; content:'';}
#footer .info_wrap .info > li{ margin:0 1.5em; color:#fff; opacity:.8; line-height:1.6; letter-spacing:0; font-size:.938em; margin-bottom:5px; display:inline-block; font-weight:300;}
#footer .etc{ width:13em; margin-top:.5em;}
#footer .site_wrap{ position:relative;}
#footer .site_wrap .siteBtn{ font-family:'Ms'; border:1px solid rgba(255,255,255,.2); line-height:3em; /*width:13em;*/ font-size:.813em; padding:0 1em 0 1.5em; color:#fff; transition:.3s; background:#1b252e;  text-transform:uppercase;}
#footer .site_wrap .site{ position:absolute; left:0; z-index:10; bottom:-2.25em; margin-bottom:-.25em; width:100%; text-align:left; background:#263641; opacity:0; visibility:hidden; transition:.3s}
#footer .site_wrap:hover .site{ opacity:1; visibility:visible}
#footer .site_wrap .site > li{ border-bottom:1px solid rgba(255,255,255,.1);}
#footer .site_wrap .site > li > a{ display:block; font-size:.813em; padding:.75em 1.5em; padding-right:3em; font-weight:300; color:#fff; overflow:hidden; position:relative; opacity:.7; transition:.3s}
#footer .site_wrap .site > li > a .icon:before{ content:"\e980"; font-size:.813em; margin-right:.125em}
#footer .site_wrap .site > li > a:after{ content:"\e907"; font-family:xeicon!important; position:absolute; right:-2em; top:50%; margin-top:-.5em; transition:.3s}
#footer .site_wrap:hover .siteBtn,
#footer .site_wrap .site > li:hover > a{ background:rgba(0,0,0,.3); opacity:1}
#footer .site_wrap .site > li:hover > a:after{ right:1.5em}

#footer .copyright{ padding:10px 0; color:rgba(255,255,255,.6); background:rgba(0,0,0,0.1); font-size:.7em; text-align:center; font-weight:300; font-family:'Ms'}



#contents{}
#contents .sub_visual_wrap{ position:relative}
#contents .sub_visual_wrap .va_wrap{ position:relative; height:7em; overflow:hidden}
#contents .sub_visual_wrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; background-color:#aaa; transform:scale(1,1); transition:2s}
#contents .sub_visual_wrap .slogan{ position:relative;}
#contents .sub_visual_wrap .slogan .tit{ font-size:1.5em; font-weight:600; color:#fff; margin-right:5em; opacity:0; transition:1s;}
#contents .sub_visual_wrap .slogan .nav{ font-size:.813em; color:#fff; opacity:0; line-height:1.5; transition:1s; transition-delay:.5s; font-family:'Ms';}
.load #contents .sub_visual_wrap .slogan .tit{ margin-right:0; opacity:1}
.load #contents .sub_visual_wrap .slogan .nav{ opacity:.8}

#contents .subNav_wrap{  z-index:inherit; width:100%; font-size:.938em; padding:.7em 0; border-bottom:1px solid #eee;}
#contents .subNav_wrap .tt{ display:block; height:40px; line-height:40px; color:#333; transition:.2s;}
#contents .subNav_wrap .nav{  width:100%;}
#contents .subNav_wrap .nav > div{ float:left; position:relative; z-index:999;}
#contents .subNav_wrap .nav .tt{ border-radius:50px;}
#contents .subNav_wrap .nav .home .tt{ width:40px; height:40px; line-height:40px; border-radius:50%; text-align:center; background:#3b3f56; color:#fff;}
#contents .subNav_wrap .nav .home .tt .xi{ font-size:1.438em;}
#contents .subNav_wrap .nav div[class^="depth"]{ border:1px solid #ddd; border-radius:50px; margin-left:5px; width: calc(100% - 50px);}
#contents .subNav_wrap .nav div[class^="depth"] .tt{ padding:0 60px 0 30px; cursor:pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#contents .subNav_wrap .nav div[class^="depth"] .tt:after{ content:"\e942"; font-family:xeicon !important; font-style:normal; font-size:1.438em; color:#888; position:absolute; top:0; right:20px;}
#contents .subNav_wrap .nav div[class^="depth"]:hover .tt{ background:#f4f4f4;}
#contents .subNav_wrap .nav .gnb{ display:none;}
#contents .subNav_wrap .nav .gnb{ position:absolute; top:100%; left:0; right:0;}
#contents .subNav_wrap .nav .gnb li{ width:100%; box-sizing:border-box;}
#contents .subNav_wrap .nav .gnb li > a{ text-align:left; display:block; border:1px solid #ddd; background:#fff; border-radius:5px; margin-top:2px; padding:10px 20px 10px 30px; color:#333; transition:.3s; height:auto; font-size:.813em;}
#contents .subNav_wrap .nav .gnb li:hover > a{ background-color:#f4f4f4;}
#contents .subNav_wrap .nav .gnb li.on > a{ background-color:#3b3f56; color:#fff;}



#contents .doc{ padding:2em 0 6em 0}

.agree_wrap{ padding:.5em; font-size:.875em; line-height:1.5}
.agree_wrap strong{ vertical-align:inherit; font-weight:bold;}

.sub #header{ position: relative; box-shadow:1px 3px 3px rgba(0,0,0,0.1);}
.sub #contents .sub_visual_wrap .sub_gnb_wrap .gnb{ display:block;}



/*======================================================================sub======================================================================*/

#main_content{} 
#main_content .main_visual{ background-image:url(../images/inc/visual.jpg); background-repeat:no-repeat; background-position:center; background-size:cover;}
#main_content .main_visual .slogan{ padding:6em 0 2.5em; text-align:center; color:#fff;}
#main_content .main_visual .slogan .t_name{font-family:'Ms'; font-size:.938em;}
#main_content .main_visual .slogan .line{ width:30px; height:1px; background:#fff; margin:10px auto 10px;}
#main_content .main_visual .slogan .t1{ font-weight:600; font-size:1.7em; text-shadow: 1px 1px 3px rgb(0 0 0 / 40%)}
#main_content .main_visual .slogan .t2{ opacity:.9; margin-top:3px; font-family:'Ms'; text-shadow: 1px 1px 3px rgb(0 0 0 / 30%)}

#main_content .main_list{ margin-top:2em; margin-bottom:3em;}
#main_content .main_list li .in{ display:block; padding:.8em 1.5em; margin-bottom:7px; border-radius:10px;}
#main_content .main_list li.st1 .in{padding:1.5em 1.5em; border:4px solid #2780d2;}
#main_content .main_list li.st1 .in .in_tt{ font-size:1.375em;}
#main_content .main_list li.st1 .in .xi-check{ width:1.5em; line-height:1.5em; background:#fff; border-radius:50%; margin-right:10px; color:#3990e0; text-align:center; font-size:1.068em;}
#main_content .main_list li .in .in_tt{ font-size:1.25em; color:#fff; font-weight:500;}
#main_content .main_list li .in .in_tt.va_wrap{ height:3.9em;}
#main_content .main_list li .in .in_icon{  text-align:center; background:#fff; border-radius:50%; box-sizing:border-box;}
#main_content .main_list li .in .in_icon.va_wrap{width:4.8em; height:4.8em;}

.page_tt{ font-size:1.45em; font-weight:600; text-align:center;}
.page_en{ color:#333; margin-top:3px; text-align:center;}
.tbox{ border:1px solid #ddd; background:#f9f9f9; box-sizing:border-box; padding:1em; text-align:center;}
.p_btn{ padding:.8em 1em; text-align:center; background:#086cd1; border-radius:5px; display:block; color:#fff !important; margin-top:1em; font-size:1.068em;}

.sur_total{ margin-bottom:10px; margin-top:-1em;}
.sur_total .total_nb{ vertical-align:baseline; font-size:1.375em; font-weight:600; color:#555; margin-left:5px;}
.sur_total .total_nb .nb_on{ color:#138b45; vertical-align:baseline;}
.sur_wrap{ border:1px solid #ddd; box-sizing:border-box; padding:1.5em; border-radius:8px;}
.sur_wrap .sur_box{ border-bottom:2px dashed #ccc; padding-bottom:1.5em; margin-bottom:1.5em;}
.sur_wrap .sur_box:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0;}
.sur_wrap .sur_box .sur_tt{ font-size:1.125em; margin-bottom:5px;}
.sur_wrap .sur_box .sur_tt .nb{ font-size:1.25em; font-weight:600; vertical-align:baseline; font-family:'Ms'; color:#0772ba;}
.sur_wrap .sur_box .label_wrap li{ margin-bottom:-7px;}
.sur_wrap .sur_box .label_wrap .label_st .xi{ margin-right:5px;}
.st_w{min-width:100px;}
.st_w.input_st .xi{ font-size:1.25em;}

.sur_score{ font-size:1.25em; color:#555;}
.sur_score .score_nb{ vertical-align:baseline; margin-left:5px;}
.sur_score .score_nb .st_co{ vertical-align:baseline; font-weight:600; font-size:1.5em}
.sur_score .score_nb .st_co.st1{ color:#d70505;}
.sur_score .score_nb .st_co.st2{ color:#2d8bf6;}
.score_tw{ background:#fff; border:1px solid #ddd; margin-top:1em; box-sizing:border-box; padding:1em; position:relative; font-size:1.068em;}
.score_tw:before{ content:''; width:14px; height:14px; border-top:3px solid #003f87; border-left:3px solid #003f87; position:absolute; top:-2px; left:-2px;}
.score_tw:after{ content:''; width:14px; height:14px; border-bottom:3px solid #003f87; border-right:3px solid #003f87; position:absolute; bottom:-2px; right:-2px;}
.score_tw .in_t{ font-size:1.25em; color:#003f87; font-weight:500; margin-bottom:15px; border-bottom:7px solid #cbe0f8; display:inline-block;}