@charset "utf-8";
@import "base.css";
@import "font.css";
/* CSS Document */

.BtnLang {position:fixed; right:30px; top:15px; width:55px; height:38px; border-radius: 38px; border:1px solid #c8c8c8; background:#efefef; color:#252525; transition:all 0.2s; opacity: 0.7;}
.BtnLang:hover,
.BtnLang:focus { box-shadow:0 1px 7px rgba(0 0 0/0.2); opacity: 1;}

@media (max-width:500px) {
    .BtnLang {right:20px; top:10px; width:55px; height:31px;}
}

/******** 인트로 *******************/
body[data-layout="intro"] {background:#f7f3e9 url(../../images/selfPortrait/common/intro_line_bg.png) no-repeat center calc(0% + 70px); background-size:auto; display: flex; flex-direction: column; overflow-x: hidden;}
body[data-layout="intro"]>header {display: flex; width: 100%; justify-content: center; padding-bottom:30px;}
body[data-layout="intro"]>header h1 a {display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top:50px; font-family: Jalnan; font-weight: 100; font-size:22px; color:#323332;}
body[data-layout="intro"]>header h1 a img {margin-bottom: 7px;width:75px;}

body[data-layout="intro"]>section {display: flex; align-items: center; position:relative; margin-bottom: 110px;}
body[data-layout="intro"]>section::before {
    display: block;
    content: "";
    width:100vw;
    height:340px;
    background: url(../../images/selfPortrait/common/intro_bg1.png) no-repeat calc(50% + 170px);
    background-size:contain;
    position:absolute;
    left:0;
    bottom: -180px;
    }
.introBox {width:500px; height:500px; border-radius: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background:linear-gradient( to left, #4450d9, #5d44d9 ); margin:auto; padding:0;}
.introBox h2 {font-family: Jalnan; color:#ffd602; font-size:64px; font-weight: 300; line-height: 90px; margin-bottom:40px;}
.introBox h2 span {display: block; font-size:30px; color:#fffc00; line-height:30px; margin-bottom:20px;}
.introBox>button {max-width:200px; width:100%; height:65px; border-radius: 65px; font-size:20px; color:#494ed9; display: flex; justify-content: center; align-items: center; background:#fff; z-index: 10;}
.introBox>button:hover {box-shadow: #bbaea2 0px 0px 13px;}

.keywordbox {display: flex; width:645px; height:475px;  position:absolute; right:30px; bottom:-30px;}
.keywordbox ul {display: block; width:100%; height:100%; position: relative;}
.keywordbox li {display: flex; justify-content: center; align-items: center; padding:10px; border-radius: 100%; position:absolute; z-index: 1;}
.keywordbox li span {font-size:20px;line-height:23px;font-weight: 600;width:100%;height:100%;padding:10px;display: flex;justify-content: center;align-items: center;text-align: center;z-index: 1;}
.keywordbox li:nth-child(1) {width:115px; height:115px; background:#bbaea2; left:123px; top:17px; color:#14100c;}
.keywordbox li:nth-child(1)::before {display: block; content: ""; width:30px; height:30px; background: url(../../images/selfPortrait/sub/tail01.png) no-repeat; position:absolute; right:0; bottom:0; z-index: 0;}
.keywordbox li:nth-child(2) {width:90px; height:90px; background:#e1d3b0; left:65px; top:155px; color: #5a4d2e;}
.keywordbox li:nth-child(2)::before {display: block; content: ""; width:24px; height:24px; background: url(../../images/selfPortrait/sub/tail02.png) no-repeat; position:absolute; right:0; bottom:0; z-index: 0;}
.keywordbox li:nth-child(3) {width:105px; height:105px; background:#5f6b82; left:500px; top:0; color: #fff;}
.keywordbox li:nth-child(3)::before {display: block; content: ""; width:28px; height:28px; background: url(../../images/selfPortrait/sub/tail03.png) no-repeat; position:absolute; left:0; bottom:0; z-index: 0;}
.keywordbox li:nth-child(4) {width:75px; height:75px; background:#df9682; left:362px; top:152px; color: #1a0904;}
.keywordbox li:nth-child(4)::before {display: block; content: ""; width:20px; height:20px; background: url(../../images/selfPortrait/sub/tail04.png) no-repeat; position:absolute; left:0; bottom:0; z-index: 0;}

                                                                                                                                                                                                                                                                                                                                                                                                                              
/* 푸터영역 s */
[data-layout="intro"] footer {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color:#676767; height:100px; min-height:100px; text-align: center; padding:0 15px;}
[data-layout="intro"] footer img {height:40px; margin-right:10px;}
/* 푸터영역 e */

@media (max-width:1180px) {
    body[data-layout="intro"] {background-size:calc(100% + 1900px);}
    .introBox {width:420px; height:420px; border-radius: 420px;}
    .introBox h2 {font-size:54px; line-height: 70px; margin-bottom:30px;}
    .introBox h2 span {font-size:26px; line-height:26px; margin-bottom:15px;}
    .introBox>button {max-width:200px; width:100%; height:65px; border-radius: 65px; font-size:20px; color:#494ed9; display: flex; justify-content: center; align-items: center; background:#fff;}

    body[data-layout="intro"]>section {display: flex;align-items: center;margin-bottom: 110px;}
    body[data-layout="intro"]>section::before {
        display: block;
        content: "";
        width:100vw;
        height:280px;
        background: url(../../images/selfPortrait/common/intro_bg1.png) no-repeat calc(50% + 135px);
        background-size:contain;
        position:absolute;
        left:0;
        bottom: -170px;
        }
}

@media (max-width:1024px) {
    .introBox {width:420px; height:420px; border-radius: 420px;}
    .introBox h2 {font-size:54px; line-height: 70px; margin-bottom:30px;}
    .introBox h2 span {font-size:26px; line-height:26px; margin-bottom:15px;}
    .introBox>button {max-width:200px; width:100%; height:65px; border-radius: 65px; font-size:20px; color:#494ed9; display: flex; justify-content: center; align-items: center; background:#fff;}


}


@media (max-width:768px) {
    body[data-layout="intro"] {background-size:calc(100% + 1800px);}
    body[data-layout="intro"]>header h1 a {margin-top: 50px;}

    .introBox {width:400px; height:400px; border-radius: 400px; margin-top:20px;}
    .introBox h2 {font-size:48px; line-height: 60px; margin-bottom:25px;}
    .introBox h2 span {font-size:24px; line-height:24px; margin-bottom:12px;}
    .introBox>button {max-width:200px; width:100%; height:65px; border-radius: 65px; font-size:20px; color:#494ed9; display: flex; justify-content: center; align-items: center; background:#fff;}

    body[data-layout="intro"]>section {display: flex;align-items: center;margin-bottom: 70px;}
    body[data-layout="intro"]>section::before {
        display: block;
        content: "";
        width:100vw;
        height:250px;
        background: url(../../images/selfPortrait/common/intro_bg1.png) no-repeat calc(50% + 135px);
        background-size:contain;
        position:absolute;
        left:0;
        bottom: -135px;
        }
}


@media (max-width:500px) {

    .introBox {width:340px; height:340px; border-radius: 340px; margin-top:10px;}
    .introBox h2 {font-size:40px; line-height: 50px; margin-bottom:25px;}
    .introBox h2 span {font-size:20px; line-height:20px; margin-bottom:12px;}
    .introBox>button {max-width:160px; height:50px; font-size:18px;}

    body[data-layout="intro"]>header h1 a {margin-top: 40px;}
    
    body[data-layout="intro"]>section {margin-bottom:60px;}
    body[data-layout="intro"]>section::before {
        display: block;
        content: "";
        width:100vw;
        height:180px;
        background: url(../../images/selfPortrait/common/intro_bg1.png) no-repeat calc(50% + 95px);
        background-size:contain;
        position:absolute;
        left:0;
        bottom: -100px;
        }
    
    /* 푸터영역 s */
    [data-layout="intro"] footer {height:auto; min-height:auto; padding:15px; margin-top:10px; font-size:13px;}
    [data-layout="intro"] footer img {height:34px;}
    /* 푸터영역 e */
}



@media (max-width:410px) {
    body[data-layout="intro"] {background-size:calc(100% + 1300px);}
    body[data-layout="intro"]>header {padding-bottom:20px;}
    body[data-layout="intro"]>header h1 a {margin-top: 40px;font-size:20px;}
    body[data-layout="intro"]>header h1 a img {margin-bottom: 5px;}

    .introBox {width:300px; height:300px; border-radius: 300px; padding:20px;}
    .introBox h2 {font-size:34px; line-height: 44px; margin-bottom:20px;}
    .introBox h2 span {font-size:18px; line-height:18px; margin-bottom:10px;}
    .introBox>button {max-width:140px; height:45px; font-size:16px;}

    body[data-layout="intro"]>section::before {
        height:160px;
        background: url(../../images/selfPortrait/common/intro_bg1.png) no-repeat calc(50% + 75px);
        background-size:contain;
        position:absolute;
        left:0;
        bottom: -90px;
        }
  
    
    /* 푸터영역 s */
    [data-layout="intro"] footer {height:auto; min-height:auto; padding:15px; margin-top:10px; font-size:13px;}
    [data-layout="intro"] footer img {height:34px;}
    /* 푸터영역 e */
}