article {
    display : flex;
    flex-direction : column;
}

.quiz{
    display : none;
}

.total{
    display : none;
}

.question{
    display : none;
}

.introduce{
    display : none;
}

.result{
    display : none;
}

#img {
    width : 100%;
    height : auto;
    margin : 0 auto;
}

.share {
    margin : 0 auto;
}

.image {
    width : 100%;
    height : auto;
    margin : 0 auto;
}

#intro1 {
    font-weight: 500;
    font-size : 16pt;
    color : #2B2B2B;
}

#intro2 {
    font-size : 18pt;
    color : #2B2B2B;
    font-family: 'KOTRA_BOLD-Bold';
}

#startbutton {
    font-family: 'KOTRA_BOLD-Bold';
    font-size : 14pt;
    color : #FFFFFF;
}

#intro3 {
    font-size : 13pt;
    color : #2B2B2B;
}

#intro4 {
    font-size : 11pt;
    color : #727171;
}

.orange {
    font-weight: 900;
}

.yellow {
    color:#F39800;
}

#startbutton{
    width : 230px;
    height : 60px;
    border-radius : 30px;
    margin : 0 auto;
    vertical-align : middle;
}

#A, #B, #C, #D {
    padding : 0;
    width : 150px;
    height : 150px;
    margin : 0 auto;
}

#block1, #block2 {
    text-align : center;
}

#imageA, #imageB, #imageC, #imageD {
    width : 150px;
    height : 150px;
}

#imageA, #imageC {
    margin-left : 8px;
}

#imageA, #imageB {
    margin-top : 5px;
}

#imagequiz {
    width : 320px;
    height : auto;
    margin : 0 auto;
}

#quiz {
    padding : 0;
    margin : 0 auto;
    width : 100%;
    height : 100%;
}

.container {
    padding : 0;
    width : 100%;
    height : 100%;
}

.start{
    background-size : 100%;
    width : 100%;
    height : 100%;
    background : white;
}

.title1 {
    line-height : 90%;
    font-size : 12pt;
}

.title2 {
    font-size : 13pt;
    font-family: 'KOTRA_BOLD-Bold';
}

#titlea, #titleb, #titlec, #titled, #titlee, #titlef {
    background-color: white;
    padding-top : 10px;
    padding-bottom : 15px;
    margin-bottom : 0px;
}

#E {
    width : 320px;
    height : auto;
    margin : 0 auto;
    padding-bottom : 0px;
    border-bottom : 0px;
}

#imageE {
    padding-left : 5px;
}

.red {
    color : #FF5A57;
}
.ora {
    color : #FFCA00;
}
.gre {
    color : #74DB2B;
}
.blu {
    color : #4FE2FF;
}
.pur {
    color : #B47DFF;
}
.whi {
    color : #FFFFFF;
}

#intro4 {
    margin-bottom : 0px;
}

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

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

.nanumsquare {
    font-family : 'NanumSquare', sans-serif !important;
}

#sentence1, #sentence2 {
    font-family: 'Noto Sans KR', sans-serif;
    font-size : 33pt;
    line-height : 60pt;
}

.wait {
    font-size: 16pt;
    color : #FF4F5B;
    font-weight : 900;
}

.betest {
    font-size : 14pt;
    color : #3E3E3E;
}
.bold {
    font-weight : 900;
}
.step {
    font-size : 17pt;
    color : #2CA9DB;
}
.unstep {
    font-size : 16pt;
    color : #000000;
    font-weight : 900;
}
.realint {
    font-size : 12pt;
    color : #2B2B2B;
    font-weight : 500;
}
.bol {
    font-weight : 900;
}
.stbu {
    width : 230px;
    height : 60px;
    border-radius : 30px;
    margin : 0 auto;
    vertical-align : middle;
    font-family: 'KOTRA_BOLD-Bold';
    font-size : 14pt;
    color : #FFFFFF;
}
.back {
    width : 230px;
    height : 60px;
    border-radius : 30px;
    margin : 0 auto;
    vertical-align : middle;
    font-family: 'KOTRA_BOLD-Bold';
    font-size : 14pt;
    color : #2CA9DB;
    margin-bottom : 0px;
}
#intimg {
    width : auto;
    height : 180px;
    margin : 0 auto;
}

.share {
    font-size : 11pt;
}

.kakao_ad {
    width : 320px;
    margin : 0 auto;
}

.kakao_ad2 {
    width : 300px;
    margin : 0 auto;
    margin-bottom : 50px;
}

.link {
    width : 75%;
    height : auto;
    margin : 0 auto;
}

#linkbutton {
    width : 250px;
    height : 46px;
    border-radius : 23px;
    margin : 0 auto;
    vertical-align : middle;
    font-family : 'KOTRA_BOLD-Bold';
    font-size : 11pt;
}

#resetbutton, #charlist, #resetbutton1, #back1{
    width : 250px;
    height : 46px;
    border-radius : 23px;
    margin : 0 auto;
    vertical-align : middle;
    font-family : 'KOTRA_BOLD-Bold';
    font-size : 11pt;
}

.char{
    width : 100%;
    height : auto;
    margin : 0 auto;
}

#license {
    font-size : 8pt;
}

.licen {
    margin-bottom : 20px;
}

#movebutton{
    color : #FFFFFF;
    background-color : #347EED;
    border-color : #FFFFFF;
    width : 250px;
    height : 46px;
    border-radius : 23px;
    margin : 0 auto;
    vertical-align : middle;
    font-family : 'KOTRA_BOLD-Bold';
    font-size : 11pt;
}