/* ====================
Layout
 ==================== */
@media screen and (max-width: 1080px)
{
    .l-in__container
    {
        padding-top: 36px;
    }
}

@media screen and (max-width: 1080px)
{
    .l-in__header
    { width: 84%;
        margin-bottom: 0; 
    }
}

@media screen and (max-width: 1080px)
{
    .l-in__title
    {
        display: block;  width: 138px;
 margin: 0; 
    }
    .l-in__title img
    {
        height: auto;
    }
}

/* ====================
Project
 ==================== */
.p-world
{
    position: relative;  width: 100%;
 margin: 0 auto; 
}

.p-world__header
{
    position: relative;  width: 100%;
 margin: 0 auto 108px; 
}

.p-world__header::after
{
    display: block;  visibility: hidden;  clear: both;  height: 0;  content: '.';
}

@media screen and (max-width: 1080px)
{
    .p-world__header
    {
        margin-bottom: 58px;  padding-bottom: 55px;
    }
}

.p-world__header::before
{ position: absolute;  z-index: -1;  top: 0;  left: 0; 

    display: block;  width: 100%;  height: 100%;  content: '';
 background: #fff;  -webkit-box-shadow: 0 0 10px 10px white;                  box-shadow: 0 0 10px 10px white; 
}

@media screen and (min-width: 1080px)
{
    .p-world__header::before
    {
        top: -240px;  height: calc(100% + 240px);
    }
}

.p-world__mv
{
    position: relative;  z-index: -1;  width: 72%;
 margin-top: -220px; 
}

@media screen and (min-width: 1080px)
{
    .p-world__mv
    {
        float: right;  min-width: 870px;  max-width: 1200px;
    }
}

@media screen and (min-width: 1080px) and (min-width: 2000px)
{
    .p-world__mv
    {
        max-width: 1300px;
    }
}

@media screen and (max-width: 1080px)
{
    .p-world__mv
    { width: 100%;
        margin-top: -60px;  margin-bottom: 34px; 
    }
}

.p-world__mv img
{
    width: 100%;
}

.p-world__prologue
{
    width: 85%;
}

@media screen and (min-width: 1080px)
{
    .p-world__prologue
    {
        position: absolute;  top: 0;  left: 50%;  max-width: 1600px;
 -webkit-transform: translate(-50%, 0);          -ms-transform: translate(-50%, 0);                  transform: translate(-50%, 0); 
    }
}

@media screen and (min-width: 1080px) and (min-width: 2000px)
{
    .p-world__prologue
    {
        min-width: 1800px;
    }
}

@media screen and (max-width: 1080px)
{
    .p-world__prologue
    {
        position: relative;  width: 82%;  max-width: 560px;
 margin: 0 auto; 
    }
}

.p-world__prologue::after
{ position: absolute; 

    display: block;  width: 450px;  height: 240px;  content: '';
 background: url('../img/world/bg.png') no-repeat left top;  background-size: contain; 
}

@media screen and (min-width: 1080px)
{
    .p-world__prologue::after
    {
        top: -240px;  left: -8%;  -webkit-transform: scale(-1, 1);          -ms-transform: scale(-1, 1);                  transform: scale(-1, 1);
    }
}

@media screen and (max-width: 1080px)
{
    .p-world__prologue::after
    {
        top: -40px;  right: -8%;  width: 220px;  height: 120px;
    }
}

.p-world__prologue-in
{
    position: relative;  width: 35%;
}

@media screen and (max-width: 1080px)
{
    .p-world__prologue-in
    {
        position: relative;  width: 100%;
 margin: 0 auto; 
    }
}

.p-world__prologue-cap
{ position: relative; 

    display: block;  width: 108px;
}

@media screen and (min-width: 1080px) and (min-width: 2000px)
{
    .p-world__prologue-cap
    {
        width: 140px;
    }
}

@media screen and (max-width: 1080px)
{
    .p-world__prologue-cap
    {
        width: 90px;
    }
}

.p-world__prologue-cap img
{
    width: 100%;
}

.p-world__prologue-text
{
    position: relative;  width: 140%;  max-width: 580px;
 margin-top: 10px;  padding-top: 45px; 
}

@media screen and (min-width: 1080px) and (min-width: 2000px)
{
    .p-world__prologue-text
    {
        max-width: 780px;
    }
}

@media screen and (max-width: 1080px)
{
    .p-world__prologue-text
    { width: 100%;
        margin-top: 10px;  padding-top: 35px; 
    }
}

.p-world__prologue-text img
{
    width: 100%;
}

.p-world__prologue-text::before
{ position: absolute;  top: 0;  left: 0; 

    display: block;  width: 100%;  height: 1px;  content: '';
 background: -webkit-gradient(linear, left top, right top, color-stop(60%, #dadac0), to(rgba(218, 218, 192, 0)));  background: linear-gradient(to right, #dadac0 60%, rgba(218, 218, 192, 0) 100%); 
}

.p-keyword
{
    position: relative;  width: 75%;  max-width: 840px;
 margin: 0 auto;  padding: 50px 60px 66px;  -webkit-transform: translateY(20px);          -ms-transform: translateY(20px);                  transform: translateY(20px);  opacity: 0;  border-radius: 10px;  background: rgba(255, 255, 255, .9) url('../img/common/bg_pattern.png') repeat left top;  background-size: auto;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; 
}

@media screen and (max-width: 1080px)
{
    .p-keyword
    { width: 90%;
        padding: 24px 17px; 
    }
}

.p-keyword + .p-keyword
{
    margin-top: 50px;
}

@media screen and (max-width: 1080px)
{
    .p-keyword + .p-keyword
    {
        margin-top: 22px;
    }
}

.p-keyword.is-active
{ -webkit-transition: opacity .85s cubic-bezier(.5, 1, .89, 1), -webkit-transform .85s cubic-bezier(.5, 1, .89, 1);                transition: opacity .85s cubic-bezier(.5, 1, .89, 1), -webkit-transform .85s cubic-bezier(.5, 1, .89, 1);                transition: opacity .85s cubic-bezier(.5, 1, .89, 1), transform .85s cubic-bezier(.5, 1, .89, 1);                transition: opacity .85s cubic-bezier(.5, 1, .89, 1), transform .85s cubic-bezier(.5, 1, .89, 1), -webkit-transform .85s cubic-bezier(.5, 1, .89, 1);
    -webkit-transform: translateY(0);              -ms-transform: translateY(0);                      transform: translateY(0);  opacity: 1;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; 
}

.p-keyword__header
{
    position: relative;  width: 100%;
 margin: 0 auto 40px;  padding-bottom: 34px;  border-bottom: 1px solid #6c6c6c; 
}

@media screen and (max-width: 1080px)
{
    .p-keyword__header
    {
        margin-bottom: 14px;  padding-bottom: 20px;
    }
}

.p-keyword__cat
{ font-size: 12px;  position: relative; 

    display: table;  margin-bottom: 20px;  padding: 2px 12px;  -webkit-transform: translateY(10px);          -ms-transform: translateY(10px);                  transform: translateY(10px);  letter-spacing: 1.2px;
 opacity: 0;  color: #fff;  background: #b39851;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; 
}

@media screen and (max-width: 1080px)
{
    .p-keyword__cat
    { font-size: 10px;

        margin-bottom: 16px; 
    }
}

.is-active .p-keyword__cat
{ -webkit-transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .2s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .2s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .2s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .2s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .2s, transform .8s cubic-bezier(.5, 1, .89, 1) .2s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .2s, transform .8s cubic-bezier(.5, 1, .89, 1) .2s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .2s;
    -webkit-transform: translateY(0);              -ms-transform: translateY(0);                      transform: translateY(0);  opacity: 1;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; 
}

.p-keyword__title
{
    position: relative;  width: 100%;
 margin: 0 auto;  -webkit-transform: translateY(10px);          -ms-transform: translateY(10px);                  transform: translateY(10px);  opacity: 0;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; 
}

@media screen and (min-width: 1080px)
{
    .p-keyword__title img
    {
        height: 42px;
    }
}

@media screen and (max-width: 1080px)
{
    .p-keyword__title img
    {
        height: 25px;
    }
}

.is-active .p-keyword__title
{ -webkit-transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .25s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .25s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .25s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .25s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .25s, transform .8s cubic-bezier(.5, 1, .89, 1) .25s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .25s, transform .8s cubic-bezier(.5, 1, .89, 1) .25s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .25s;
    -webkit-transform: translateY(0);              -ms-transform: translateY(0);                      transform: translateY(0);  opacity: 1;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; 
}

.p-keyword__img
{
    position: absolute;  top: -60px;  right: -70px;  width: 270px;
 -webkit-transform: scale(.8);          -ms-transform: scale(.8);                  transform: scale(.8);  opacity: 0;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; 
}

@media screen and (max-width: 1080px)
{
    .p-keyword__img
    {
        top: -35px;  right: -25px;  width: 48%;  max-width: 270px;
    }
}

.is-active .p-keyword__img
{ -webkit-transition: opacity .5s cubic-bezier(.5, 1, .89, 1) .1s, -webkit-transform .35s cubic-bezier(.5, 1, .89, 1) .1s;                transition: opacity .5s cubic-bezier(.5, 1, .89, 1) .1s, -webkit-transform .35s cubic-bezier(.5, 1, .89, 1) .1s;                transition: opacity .5s cubic-bezier(.5, 1, .89, 1) .1s, transform .35s cubic-bezier(.5, 1, .89, 1) .1s;                transition: opacity .5s cubic-bezier(.5, 1, .89, 1) .1s, transform .35s cubic-bezier(.5, 1, .89, 1) .1s, -webkit-transform .35s cubic-bezier(.5, 1, .89, 1) .1s;
    -webkit-transform: scale(1);              -ms-transform: scale(1);                      transform: scale(1);  opacity: 1;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; 
}

.p-keyword__text
{ font-size: 16px;  line-height: 2;

    -webkit-transform: translateY(10px);              -ms-transform: translateY(10px);                      transform: translateY(10px);  opacity: 0;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; 
}

@media screen and (max-width: 1080px)
{
    .p-keyword__text
    {
        font-size: 13px;  line-height: 1.8;
    }
}

.is-active .p-keyword__text
{ -webkit-transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .4s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .4s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .4s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .4s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .4s, transform .8s cubic-bezier(.5, 1, .89, 1) .4s;                transition: opacity .65s cubic-bezier(.5, 1, .89, 1) .4s, transform .8s cubic-bezier(.5, 1, .89, 1) .4s, -webkit-transform .8s cubic-bezier(.5, 1, .89, 1) .4s;
    -webkit-transform: translateY(0);              -ms-transform: translateY(0);                      transform: translateY(0);  opacity: 1;  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; 
}

/* ====================
COMPONENT
 ==================== */