/* 
12px = 0.75rem
18px = 1.125rem
20px = 1.25rem
30px = 1.875rem
32px = 2rem
40px = 2.5rem
50px = 3.125rem
60px = 3.75rem
90px = 5.625rem

color : #003889,#392A5B,#222,#333333,
*/

/* * {outline: 1px solid rgba(255, 0, 0, 0.2);} */
body main {
    min-width:1920px;
    margin:0 auto;
}
main {}
main #main_container {}
/* main_bnr ==========================================================*/
main #main_container #main_bnr {
    /* background-color: lightblue; */
    max-width: 1920px;
    margin: 0 auto;
    height: 900px;
    overflow: hidden;
    position:relative;
}
main #main_container #main_bnr .main_wrap {}
main #main_container #main_bnr .main_wrap .bnr {
    width: 1300px;
    height: 759px;
    margin: 0 auto;
    display: block;
    border-radius: 400px 0 0 0;
    background-image: url(../images/bnr.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position:absolute;
    right:0;
    top:72px;
    z-index: 1;
}
main #main_container #main_bnr .main_wrap .bnr img {}
main #main_container #main_bnr .main_wrap > .title {
    position:absolute;
    top:100px;
    left:100px;
}
main #main_container #main_bnr .main_wrap > .title h1 {
    font-size: 3.125rem;
    letter-spacing:0.3rem;
    font-weight: 600;
    line-height: 1.3;
    animation: titleani 1s;
}
main #main_container #main_bnr .main_wrap > .title p {
    animation: titleani 1s both;
    animation-delay: 0.5s;
    margin-top:30px;
    font-size:1.25rem;
    line-height: 1.5;
}
main #main_container #main_bnr .main_wrap > .title p em {font-weight: 600; color:#003889;}
main #main_container #main_bnr .main_wrap > .title p span {font-weight: 600; color:#392A5B;}
main #main_container #main_bnr .main_wrap .bnr_deco {
    width: 443px;
    position:absolute;
    left:0;
    top:600px;
    animation: ballspin 30s infinite linear; 
}
main #main_container #main_bnr .main_wrap .bnr_deco img {width: 100%;}
/* bnr animaiton */
@keyframes titleani {
    0% {transform: translateY(30px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

@keyframes ballspin {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

/* solution ==========================================================*/
main #main_container #solution {
    width:100%;
    height:1000px;
    background: url(../images/solution_background.png) no-repeat center;
    background-color: #003889;
    overflow: hidden;
}
main #main_container #solution .solution_wrap {
    max-width:1920px;
    margin: 0 auto;
    position: relative;
}
main #main_container #solution .solution_wrap h2 {
    font-size: 2.5rem;font-weight: 600;color:#fff;
    text-align: center; padding:200px 0 100px 0;
}
main #main_container #solution .solution_wrap .container {
    display: flex;
    flex-flow:row nowrap;
    gap:100px;
    justify-content: center;
}
main #main_container #solution .solution_wrap .container .solution_contents {
    width: 650px; height: 450px;
    background-color: #fff;
    border-radius: 50px;
    padding:100px 0 0 70px;
    position:relative;
    z-index: 20;
    transition:all 0.5s;
}
main #main_container #solution .solution_wrap .container .solution_contents:hover {
    box-shadow: inset 0 0 10px #333
}
main #main_container #solution .solution_wrap .container .solution_contents p {
    font-size: 1.875rem;
    font-weight: 600;
    color:#222;
}
main #main_container #solution .solution_wrap .container .solution_contents p:nth-child(2) {
    width: 330px;
    line-height: 1.5;
    font-size: 1rem;
    margin:40px 0 36px 0;
}
main #main_container #solution .solution_wrap .container .solution_contents p span {font-weight: 600;}
main #main_container #solution .solution_wrap .container .solution_contents a {}
main #main_container #solution .solution_wrap .container .solution_contents > img {
    position:absolute;
    right:50px;
    bottom: 50px;
}
main #main_container #solution .solution_wrap .container .left p span {color:#003889;}
main #main_container #solution .solution_wrap .container .right p span {color:#392A5B;}
main #main_container #solution .solution_wrap .solution_deco {
    position:absolute;
    bottom: -200px;
    right:0;
    z-index: 1;
    animation: ballspin 30s infinite linear; 
    opacity: 0.5;
    /* background-color: yellow; */
}
main #main_container #solution .solution_wrap .solution_deco img {width: 100%;}
/* skill ==========================================================*/
main #main_container #skill {
    width: 100%;
    /* background-color: wheat; */
    background-image: url(../images/skill_background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
main #main_container #skill .skill_wrap {
    max-width:1920px;
    margin: 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    position: relative;
}
main #main_container #skill .skill_wrap .skill_intro {
    /* background-color: white; */
    width:640px;
    height: 1000px;
    /* background-color: #003889; */
    transition: all 0.5s;
}
main #main_container #skill .skill_wrap .skill_intro .txt_box {
    /* background-color: #003889; */
    width: 439px;
    height: 191px;
    overflow: hidden;
    position:absolute;
    transition:all 1s;
}
main #main_container #skill .skill_wrap .skill_intro .txt_box h2 {
    font-size: 2.5rem;
    font-weight: 600;
    color:#fff;
    margin-bottom:35px;
    transition:all 1s;
}
main #main_container #skill .skill_wrap .skill_intro .txt_box p {
    color:#fff;
    font-size: 1.25rem;
    line-height: 1.5;
    /* opacity: 0; */
    max-height: 0;
    overflow: hidden;
    transform: translateY(0); 
    transition: 
    max-height 0.5s ease,
    opacity 0.5s ease,
    transform 0.5s ease;
}
main #main_container #skill .skill_wrap .first {}
main #main_container #skill .skill_wrap .first:hover {background-color:rgba(0,0,0,0.5);}
main #main_container #skill .skill_wrap .first:hover .txt_box {}
main #main_container #skill .skill_wrap .second {background-color:rgba(0,0,0,0.2);}
main #main_container #skill .skill_wrap .second:hover {background-color:rgba(0,0,0,0.5);}
main #main_container #skill .skill_wrap .third {background-color:rgba(0,0,0,0.4);}
main #main_container #skill .skill_wrap .third:hover {background-color:rgba(0,0,0,0.5);}
main #main_container #skill .skill_wrap .first .txt_box {bottom: 100px;left:100px;}
main #main_container #skill .skill_wrap .second  .txt_box  {bottom:150px;left:740px;}
main #main_container #skill .skill_wrap .third  .txt_box  {bottom: 200px;right:100px;}

/* simul ==========================================================*/
main #main_container #simul {width: 100%;}
main #main_container #simul .simul_wrap {
    height:1000px;
    text-align: center;
    background-image: url(../images/simul_background.png);
    background-position:center;
    background-size: cover;
}
main #main_container #simul .simul_wrap h2 {font-size: 2.5rem;font-weight: 600;margin:209px 0 31px 0;}
main #main_container #simul .simul_wrap > p {font-size: 1.125rem;line-height: 1.5;margin-bottom: 150px;}
main #main_container #simul .simul_wrap .simul_contents {
    background-image: url(../images/simul_sub_background.jpg);
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
main #main_container #simul .simul_wrap .simul_contents .simul {
    width: 430px;height: 300px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap:72px;
}
main #main_container #simul .simul_wrap .simul_contents .simul p {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    position:relative;
}

main #main_container #simul .simul_wrap .simul_contents .simul p span {
    font-size: 1.125rem;
    font-weight: 600;
    color:#fff;
}
main #main_container #simul .simul_wrap .simul_contents .simul p span::after {
    content: '';
    display: block;
    /* width: 205px; */
    height: 2px;
    position:absolute;
    top:-40px;right:27%;
    background-color: #fff;
}
main #main_container #simul .simul_wrap .simul_contents .simul:hover p span::after {
    width: 205px;
    animation: simul 1s both;
}

@keyframes simul{
    0% {width: 0;}
    100% {width: 205px;}
}

/* 개별 선택자 */
main #main_container #simul .simul_wrap .simul_contents .simul_test {background:url(../images/simul_001.png);}
main #main_container #simul .simul_wrap .simul_contents .simul_test p {}
main #main_container #simul .simul_wrap .simul_contents .simul_test p span {}
main #main_container #simul .simul_wrap .simul_contents .simul_sci {background:url(../images/simul_002.png);}
main #main_container #simul .simul_wrap .simul_contents .simul_sci p {}
main #main_container #simul .simul_wrap .simul_contents .simul_sci p span {}
main #main_container #simul .simul_wrap .simul_contents .simul_product {background:url(../images/simul_002.png);}
main #main_container #simul .simul_wrap .simul_contents .simul_product p {}
main #main_container #simul .simul_wrap .simul_contents .simul_product p span {}
/* guides ==========================================================*/
main #main_container #guides {
    width: 100%;
    /* background-color: wheat; */
    margin:0 auto;
}
main #main_container #guides .guides_wrap {
    height: 1000px;
    margin:0 auto;
    position: relative;
}
main #main_container #guides .guides_wrap .img_ani {
    position: absolute;
    top:50px; right:500px;
    z-index: 10;
}
main #main_container #guides .guides_wrap .img_ani .big {
    width: 889px;
    animation:bigspin 40s linear infinite;
}
main #main_container #guides .guides_wrap .img_ani .big img {width: 100%;}
main #main_container #guides .guides_wrap .img_ani .small {
    position: absolute;
    top:100px;right:95px;
    width: 705px;
    animation: smallspin 35s linear infinite;
}
main #main_container #guides .guides_wrap .img_ani .small img {width: 100%;}
main #main_container #guides .guides_wrap .img_ani .center {
    width: 200px;
    position: absolute;
    top:350px;right:350px;
}
main #main_container #guides .guides_wrap .img_ani .center img {width: 100%;}
main #main_container #guides .guides_wrap > .contents {position:relative;}
main #main_container #guides .guides_wrap > .contents .guides_deco {}
main #main_container #guides .guides_wrap > .contents .top {
    position:absolute;
    top:100px; left:300px;
    z-index: 50;
}
main #main_container #guides .guides_wrap > .contents .middle {
    position:absolute;
    top:350px; right:200px;
    z-index: 50;
}
main #main_container #guides .guides_wrap > .contents .btm {
    position:absolute;
    top:700px; left:300px;
    z-index: 50;
}
main #main_container #guides .guides_wrap > .contents .guides_deco p:first-of-type {
    width: 50px; height: 50px;
}
main #main_container #guides .guides_wrap > .contents .top p:first-of-type {
    position:absolute;
    top:-50px; left:-50px;
}
main #main_container #guides .guides_wrap > .contents .middle p:first-of-type {
    position:absolute;
    top:-50px; right:-50px;
}
main #main_container #guides .guides_wrap > .contents .btm p:first-of-type {
    position:absolute;
    top:-50px; left:-50px;
}
main #main_container #guides .guides_wrap > .contents .guides_deco p img {width: 100%;}
main #main_container #guides .guides_wrap > .contents .guides_deco h2 {
    font-size: 1.875rem;
    text-transform: uppercase;
    font-weight: 600;
    color:#003889;
}
main #main_container #guides .guides_wrap > .contents .btm h2 {color:#392A5B;}
main #main_container #guides .guides_wrap > .contents .guides_deco > .sub {padding:20px 0;}
main #main_container #guides .guides_wrap > .contents .guides_deco .arrow {width: 106px;}
main #main_container #guides .guides_wrap > .contents .guides_deco .arrow img {width: 100%;}
/* guides 애니메이션 효과 */

@keyframes bigspin {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}
@keyframes smallspin {
    0% {transform: rotate(0);}
    100% {transform: rotate(-360deg);}
}
/* notice =========================================================*/
main #main_container #notice {background-color:#fff;margin-top:200px;}
main #main_container #notice .notice_wrap {
    margin:0 auto;
    display: flex;
}
main #main_container #notice .notice_wrap .recruit {
    width: calc(1920px / 2);
    /* background-color: wheat; */
    background: url(../images/recruit_background.png);
    margin:0 auto;
}
main #main_container #notice .notice_wrap .recruit h2 {font-size: 3.75rem; font-weight: 600; margin:155px 0 20px 155px;}
main #main_container #notice .notice_wrap .recruit p {line-height: 1.5;margin: 0 0 287px 155px}
main #main_container #notice .notice_wrap .recruit .recruit_info {
    display: flex;
    justify-content: center;
    padding-bottom: 200px;
}
main #main_container #notice .notice_wrap .recruit .recruit_info li {
    width: 150px;
    height: 200px;
    background-color: #fff;
    margin:10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.2);
}
main #main_container #notice .notice_wrap .recruit .recruit_info li:nth-child(2) a span {opacity: 0.6;}
main #main_container #notice .notice_wrap .recruit .recruit_info li:nth-child(3) a span {opacity: 0.6;}
main #main_container #notice .notice_wrap .recruit .recruit_info li a {
    margin-top:46.5px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
main #main_container #notice .notice_wrap .recruit .recruit_info li a span {
    width: 50px; height: 50px;
}
main #main_container #notice .notice_wrap .recruit .recruit_info li a span img {width: 100%;}
main #main_container #notice .notice_wrap .recruit .recruit_info li a em {margin-top:30px;}
main #main_container #notice .notice_wrap .notice {
    width: calc(1920px / 2);
    /* background-color:lightblue; */
}
main #main_container #notice .notice_wrap .notice h2 {font-size: 3.75rem; font-weight: 600; margin:155px 0 20px 100px;}
main #main_container #notice .notice_wrap .notice > p {line-height: 1.5;margin: 0 0 50px 100px}
main #main_container #notice .notice_wrap .notice > p::after {
    content:'';
    display: inline-block;
    width: 760px; height: 2px;
    background-color: #222;
    margin-top:40px;
}
main #main_container #notice .notice_wrap .notice .notice_info {margin:100px 0 0 100px;}
main #main_container #notice .notice_wrap .notice .notice_info li {
    border-bottom: 2px solid #eee;
    width: 760px;
    padding:20px 150px 40px 0;
    margin-top:40px;
    /* background-color: yellow; */
}
main #main_container #notice .notice_wrap .notice .notice_info li a {
    display: flex;
    flex-flow: row nowrap;
    gap:80px;
    text-align: center;
    align-items: center;
}
main #main_container #notice .notice_wrap .notice .notice_info li a .date {}
main #main_container #notice .notice_wrap .notice .notice_info li a .date p:first-child {
    color:#003889;
    font-weight: 600;
    font-size: 2.5rem;
}
main #main_container #notice .notice_wrap .notice .notice_info li a .date p:last-child {}
main #main_container #notice .notice_wrap .notice .notice_info li a .news {
    text-align: left;
}
main #main_container #notice .notice_wrap .notice .notice_info li a .news h3 {
    font-size: 1.125rem; font-weight: 600;
    margin-bottom: 10px;
}
main #main_container #notice .notice_wrap .notice .notice_info li a .news p {}