@charset "utf-8";

/* Font */
@font-face{font-family:Noto Sans;font-style:normal;font-weight:300;src:local('��'),url(../fonts/NotoSans-Light.woff2) format('woff2'),url(../fonts/NotoSans-Light.woff) format('woff')}
@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;src:local('��'),url(../fonts/NotoSans-Regular.woff2) format('woff2'),url(../fonts/NotoSans-Regular.woff) format('woff')}
@font-face{font-family:Noto Sans;font-style:normal;font-weight:500;src:local('��'),url(../fonts/NotoSans-Medium.woff2) format('woff2'),url(../fonts/NotoSans-Medium.woff) format('woff')}
@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;src:local('��'),url(../fonts/NotoSans-Bold.woff2) format('woff2'),url(../fonts/NotoSans-Bold.woff) format('woff')}

body, input, select, textarea{font-family:Noto Sans,Dotum;font-size:13px}
h1, h2, h3, h4, h5, h6{font-family:Noto Sans,Dotum;margin:0}
a[target="_blank"]{color:#284885;text-decoration:underline;font-weight:400}
#header{position:relative;border-bottom:0;padding:25px 0 0 0;margin:0 10px;text-align:center;overflow:hidden}
#header .icons{position:absolute;right:0;background:url('../images/icon_location_home.png') no-repeat center;width:20px;height:20px}
hr.major{margin:18px 0;border:0}
hr.major:before{content:'';display:block;width:calc(100% - 20px);height:5px;margin:0 auto;background:#109e84}
ul.icons li .icon{display:block}
ul.icons li:last-child{display:block}
.material-icons span{font-size:0}
#main > .inner{padding:0}
.logo-box{background-color:#f5f5f5;border-bottom:solid 1px #e1e1e1;text-align:center}
.logo-box h1{height:54px;line-height:53px;font-size:0}
.logo-box img{vertical-align:middle;width:120px}
#main > .inner > section{padding:18px 0}
section .row:first-child{margin:0 10px}
section .row:first-child .\36 u, .\36 u\24{width:100%;padding:0}
.\31 0u, .\31 0u\24{width:100%}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea{border:solid 5px #eeeeee;border-radius:0;padding:13px 15px;height:auto;font-size:15px;color:#333;font-weight:500}
#sb_jjselect{text-align:justify;text-align-last:center;-moz-text-align-last:center}
#SelfQuestion>div[id^="qus_"]:first-child{padding-top:0}
#SelfQuestion>div[id^="qus_"]{padding-top:15px;padding-bottom:10px}
#SelfQuestion>div[id^="qus_"]:not(:first-of-type){border-top:dashed 1px #d7d7d7}
.select-wrapper:before{content:'';background:url('../images/icon_select_arrow.png') no-repeat center center; width:50px;height:60px}
.select-wrapper.on:before{transform:rotate(180deg)}
.ex-q-tit{color:#333;font-weight:500;font-size:18px}
div[id^="qus_"]{display:block !important}
div[id^="qus_"]>h4{margin-bottom:15px;font-size:14px;font-weight:500;color:#333}
div[id^="qus_"]>h4 .button{display:none;background:url('../images/icon_application_q-mark_pc.png')
no-repeat center / 15px;padding:0;box-shadow:none;width:20px;height:20px;vertical-align:top}
input[type="checkbox"]:focus, input[type="radio"]:focus{outline-color:yellow}
input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before{background:url('../images/bg_radioBox_on.png') no-repeat 3px 50% / 15px;content:'';}
input[type="checkbox"] + label:before, input[type="radio"] + label:before{background:url('../images/bg_radioBox_off.png') no-repeat 3px 50% / 15px;border:none}
input[type="checkbox"] + label, input[type="radio"] + label{padding-left:28px;color:#666;margin-bottom:5px}
ol{padding:0 10px}
.box{border:solid 1px #d7d7d7;border-radius:0;background-color:#f5f5f5;padding:15px 15px;margin-bottom:15px}
strong, b{font-weight:500}

@media screen and (min-width: 980px){ 
body{font-size:15px}
.logo-box h1{height:76px;line-height:75px}
.logo-box img{width:180px}
#header{margin:0 25px;padding-top:45px}
section .row:first-child{margin:0 25px}
ol{padding:0 25px}
.\31 0u, .\31 0u\24{width:78%}
hr.major{margin:28px 0}
hr.major:before{width:calc(100% - 50px)}
.select-wrapper:before{content:'';background:url('../images/icon_select_arrow.png') no-repeat center center; width:65px;height:71px}
.ex-q-tit{font-size:28px}
#SelfQuestion>div[id^="qus_"]{padding-top:20px}
input[type="checkbox"] + label, input[type="radio"] + label{margin-bottom:10px}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea{padding:16px 20px;font-size:18px}
div[id^="qus_"]{padding-bottom:20px;padding-bottom:15px}
div[id^="qus_"]>h4{font-size:16px}
div[id^="qus_"]>h4 .button{background-size:19px;height:24px;margin-left:5px}
.box{padding:15px 25px}

}

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

#header h2{font-size:16px;padding:0 50px;word-break:keep-all}
hr.major{margin:17px 0}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea{font-size:14px}
}