/*
File Name: style.css
Author: IVYNET
Version: 1.0.0
* SUMMARY:
*     1) Reset
*     2) Promotion Style
*     3) Accessible Accordion Aria
*
*/

/* ************************************** *
* Reset
* ************************************** */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,p,iframe,figure,a, input{margin:0;padding:0;font-size:inherit;word-break:keep-all;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;}
header,hgroup,footer,section,article,aside,nav,canvas,figure,figcaption{display:block}
table{font-size:inherit;border-collapse:separate;;border-spacing:0;table-layout:fixed}
th, td{word-wrap:break-word;word-break:break-all;font-weight:normal}
fieldset, iframe{border:0;vertical-align:top}
img{border:0;font-size:0;vertical-align:top;outline:0}
li,dd{list-style:none;word-break:keep-all;line-height:1.4;}
hr{display:block;clear:both;width:0;height:0;margin:0;padding:0;border:0;}
caption,figcaption{overflow:hidden;width:100%;height:1px;font-size:0;line-height:0;text-indent:-9999px;margin-top:-1px}
legend{display:block;position:absolute;left:-9999px;text-indent:9999px;width:0;height:0;overflow:hidden;font-size:0;line-height:0;white-space:nowrap}
button{padding:0;border:0;cursor:pointer;background:none;vertical-align:middle;appearance:none;-moz-appearance:none;font-family:dotum,'돋움';font-weight:400;}
h1, h2, h3, h4, h5, h6{font-weight:normal;line-height:1.3;font-size:100%}
p{line-height:1.4;}
a{color:#666;text-decoration:none}
a:hover,
a:focus{text-decoration:none}
em, i{font-style:normal}
img{margin:0;padding:0;}
strong{font-weight:inherit;}
select{height:22px;*height:auto;font-size:16px;color:#888;line-height:22px;vertical-align:middle;font-family:dotum,'돋움',sans-serif;}
select::-ms-expand{display:none}
input{margin:0;padding:0;font-size:inherit;color:#333;line-height:17px;vertical-align:middle;-webkit-border-radius:0;font-weight:400;}
input[type='text'], input[type='password']{border:1px solid #D3D2D2;-webkit-appearance:none}
input[type='text']:focus,
input[type='password']:focus{border-color:#222}
input[type='text']:disabled,
input[type='password']:disabled{background-color:#f7f7f7}
input[type='radio']{width:13px;height:13px;vertical-align:-1px;*margin-right:-3px}
input[type='checkbox']{width:13px;height:13px;vertical-align:-2px;*vertical-align:0px}
input:checked[type='checkbox']{background-color:#fff;-webkit-appearance:checkbox}
input[type='number']{-moz-appearance:textfield;-webkit-appearance:none;-webkit-border-radius:0;-moz-border-radius: 0;-ms-border-radius:0;border-radius:0;}
textarea{width:100%;padding:0; color:#666; background-color:#fff; box-sizing:border-box; resize: vertical; -webkit-appearance:none; -webkit-border-radius:0; border:none;}


/* ************************************** *
* Promotion Style
* ************************************** */

.promotion-frame{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-size: 100%;
    max-width: 480px;
    background-color: #e9e9e9;
}

.promotion-frame img{
    display: block;
    max-width: 100%;
}

.blind-text{
    position: absolute;
    width: 1px;
    height: 1px;
    top: -99999px;
    left: -99999px;
    font-size: 0;
    text-indent: -99999px;
}


/* ************************************** *
* Accessible Accordion Aria
* ************************************** */

div#accordion_0 {
    background-color: #e9e9e9;
}

.accordion-01 {
    padding-left: 3.0555%;
    padding-right: 3.0555%;
    padding-bottom: 6.25%;
}

.accordion-02 {
    padding-left: 1.8055%;
    padding-right: 3.0555%;
    padding-bottom: 8.0555%;
}

.accordion-03 {
    padding-left: 3.0555%;
    padding-right: 3.0555%;
    padding-bottom: 8.0555%;
}

.accordion-04 {
    padding-left: 1.8055%;
    padding-right: 3.0555%;
    padding-bottom: 8.6111%;
}

.js-accordion__panel[aria-hidden=true] {
    display: none;
}

.js-accordion__panel[role='tabpanel'] .js-accordion__header {
    display: none;
}

.js-accordion__header {
    display: block;
    position: relative;
    cursor: pointer;
}

button.js-accordion__header {
    background: none;
    color: inherit;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.js-accordion__header:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 13.8888%;
    width: 12.2222%;
    height: 16.42%;
    background-image: url(update-btn-up.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: -webkit-transform .5s;
    -webkit-transform: translate3d(0, -50%, 0) rotate(180deg);
    -ms-transform: translate3d(0, -50%, 0) rotate(180deg);
    transform: translate3d(0, -50%, 0) rotate(180deg);
    z-index: 1;
    box-shadow: 0px -4px 8px rgb(0 0 0 / 0.18);
    border-radius: 50%;
}

/*.js-accordion__header:after{
    content: '';
    position: absolute;
    top: 50%;
    right: 5.5%;
    width: 11.5%;
    height: 70%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    }*/

/*.js-accordion > .js-accordion__header:nth-of-type(1):after{
    background-color: #ff4337;
}

.js-accordion > .js-accordion__header:nth-of-type(2):after{
    background-color: #ff782f;
}

.js-accordion > .js-accordion__header:nth-of-type(3):after{
    background-color: #ffc925;
}

.js-accordion > .js-accordion__header:nth-of-type(4):after{
    background-color: #69ad12;
}

.js-accordion > .js-accordion__header:nth-of-type(5):after{
    background-color: #0077c8;
}

.js-accordion > .js-accordion__header:nth-of-type(6):after{
    background-color: #844cc7;
}
*/

.accordion-02 .js-accordion__footer {
    padding-left: 1.38%;
}

.js-accordion__header[aria-expanded='false']:before {
    transition: transform .5s;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    box-shadow: 0px 4px 8px rgb(0 0 0 / 0.18);
}

.title-image-01 {
    padding-left: 1.7%;
    padding-right: 1.7%;
}

.title-image-02 {
    padding-left: 1.7%;
    padding-right: 1.7%;
}

.button-image {
    padding-left: 1.7%;
    padding-right: 1.7%;
}

button.js-accordion__header {
    margin-bottom: -11.5%;
    z-index: 1;
}

.accordion-02 button.js-accordion__header {
    margin-bottom: -12.7%;
}

.accordion-03 button.js-accordion__header {
    margin-bottom: -12.8%;
}

.accordion-04 button.js-accordion__header {
    margin-bottom: -8.84%;
}


.accordion-02 .accordion__panel {
    margin-left: 1.3%;
}

.accordion-02 .js-accordion__header:before {
    bottom: 2%;
    right: 10.5555%;
    left: auto;
    width: 12.062%;
    height: 16.852%;
}

.accordion-03 .js-accordion__header:before {
    width: 12.2222%;
    height: 17.13%;
    bottom: 1%;
}

.accordion-04 .js-accordion__header:before {
    bottom: -13px;
    right: 10.5555%;
    left: auto;
    width: 12.06222%;
    height: 18.3608%;
}

.gif-image {
    padding-left: 1.7277%;
    padding-right: 1.7277%;
}

.accordion__panel {
    display: block;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: visibility 0s ease, max-height .5s ease, opacity .5s ease ;
    transition: visibility 0s ease, max-height .5s ease, opacity .5s ease ;
    magic number for max-height = enough height 
    visibility: visible;
    transition-delay: 0s;
    margin: 0;
    padding: 0;
    background-image: url(update-bg.png);
    background-size: 100%;
}

[aria-hidden=true].accordion__panel {
    display: block;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition-delay: .5s, 0s, 0s;
    margin: 0;
    padding: 0;

}