@import url("/font/GmarketSans/fonts.css"); 

/* fullpage layout */
.fp-watermark{ display: none;}
.fp-overflow{ overflow-x: hidden;}
.fp-responsive .fp-is-overflow.fp-section{ min-height: 0px !important; overflow:hidden;}
.fp-responsive #wrap .MC_wrap1 .fp-overflow{ padding-top:6rem;}
.fp-responsive #wrap.upPop.open .MC_wrap1 .fp-overflow{ padding-top:12rem;}
.fp-responsive #wrap.upPop.open .MC_wrap2 .fp-overflow,
.fp-responsive #wrap.upPop.open .MC_wrap3 .fp-overflow{ padding-top:0;}
.fp-responsive #wrap.upPop.open .MC_wrap2 .cont_wrap,
.fp-responsive #wrap.upPop.open .MC_wrap3 .cont_wrap{ min-height:0px; display: block;}
.fp-responsive .section .fp-overflow{ display: block; min-height:0px; padding:0; height:auto;}
.fp-responsive .MC_box1 { height:30rem;} 


.MC_wrap1 .fp-overflow{ display: block;}

#topPop{ position:fixed; left:0; top:0; z-index: 99;}
#header{ position:fixed; left:0; top:0; z-index: 99;}

#container .section .container{ max-width:80rem; padding:0;} 
.section{ transition: all 0.3s; }
.section .fp-overflow{ height:100vh; padding-top:6rem; }
 
#wrap.upPop.open #header{ top:6rem;}
#wrap.upPop.open .fp-overflow { padding-top:13rem;}

/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%; }
#container *{ scrollbar-arrow-color: #ddd; scrollbar-Track-Color: #ddd; scrollbar-base-color: #aaa; scrollbar-Face-Color: #aaa; scrollbar-3dLight-Color: #aaa; scrollbar-DarkShadow-Color: #aaa; scrollbar-Highlight-Color: #aaa; scrollbar-Shadow-Color: #aaa;}
#container ::-webkit-scrollbar { width: 5px; }
#container ::-webkit-scrollbar-thumb { background-color: #aaa; border-radius:10px; }
#container ::-webkit-scrollbar-track { background-color: #ddd; border-radius:10px; }

.container { max-width: 80rem; margin: 0 auto;}

.MC_wrap1 .fp-overflow{ display: flex; flex-direction: column;}
.MC_wrap1 .con_wrap { position:relative; width:100%; display: flex; align-items: center; flex:1;  z-index: 1;}
.MC_wrap2 { position: relative; } 
.MC_wrap2 .cont_wrap { min-height:calc(100vh - 6rem); position: relative; display: flex; align-items: center; flex-wrap: wrap; align-content: center;} 
.MC_wrap2 .cont_wrap::before { content: ''; display: block; width: 16.5rem; height: 8.95rem; background: url(/images/web/iphak/main/section2_bg02.png) no-repeat center / contain; position: absolute; top: 16.5rem; right: -11.95rem; z-index: 1;}
.MC_wrap2 .cont_wrap .content { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin-top: 3rem;}

.MC_wrap3 .cont_wrap{ min-height:calc(100vh - 6rem); display: flex; align-items: center; justify-content: space-between;transform: translateY(-4rem); position: relative;} 
.MC_wrap3 .cont_wrap::before { content: ''; display: block; width: 89.95rem; height: 2.95rem; background: url(/images/web/iphak/main/section3_bg.png) no-repeat center / contain; position: absolute; top: 97%; left: 50%; transform: translateX(-50%);z-index: -1;}
#wrap.upPop.open .MC_wrap2 .cont_wrap,
#wrap.upPop.open .MC_wrap3 .cont_wrap{ min-height:calc(100vh - 13rem);} 
.MC_box1 {position:relative;width:100%;height: 100%;} 
.MC_box2 { position:absolute; width:100%; height:11rem;bottom: 0; right: 0; }
.MC_box2:before{ content:''; position:absolute; right: -1.5rem; top:-1.5rem; width:100vw; height:calc(100% + 1.5rem); border-radius: 0 3rem 0 0; background: rgba(255,255,255,0.4);}
.MC_box3 { width: 53%;}
.MC_box4 { width: 44.5%;}
.MC_wrap2 .right { width: 44.5%;}
.MC_box7 { position: relative; width: calc(100% - 25.25rem);}
.MC_box7:before { content: ''; display: block; height: 33.4rem; width: 500%; background: #005090; border-radius: 0 5rem 5rem 0; position: absolute; right: -2rem; top: -5rem; z-index: -1;}
.MC_box8 {position: relative;width: 21rem;margin-top: 1.5rem;}/*250723*/
/* fullpage break */ 
@media screen and (max-width: 1820px) {
    
    #wrap.upPop.open #header{ top:6rem;}
    #wrap.upPop.open .MC_wrap2 .cont_wrap, 
    #wrap.upPop.open .MC_wrap3 .cont_wrap{ min-height:calc(100vh - 12rem);}
    #wrap.upPop.open .fp-overflow { padding-top:12rem;}
 
}

@media screen and (max-width: 1660px){
    #container .section .container{ padding:0 1rem;} 

    .MC_box2:before {right: 0;}

}

@media screen and (min-width: 1281px) and (max-width: 1800px){
    #container .section .container{ padding-left: 5rem;} 

    .MC_wrap2 .right {width: 37%;}
    
    .MC_box3 {width: 60%;}
    .MC_box4 {width: 37%;}

}
 
@media screen and (max-width: 1280px){
    #footer .container { padding: 0 1rem !important;}
    .MC_wrap2 .cont_wrap::before { display: none;}
    .MC_wrap2 .cont_wrap { min-height: auto;}
    .fp-responsive .fp-is-overflow.fp-section { min-height: auto; height: auto !important;}
    .fp-responsive .section .fp-overflow { min-height: auto;}
    #wrap.upPop.open .fp-overflow{ padding-top:0;}

    .section{ display: block !important;}
    .section .fp-overflow{ height:auto; display: block !important;}

    #container .section.MC_wrap2 .container { padding: 1.4rem 1rem 1.5rem;}
    #container .section.MC_wrap3 .container { padding: 0rem 1rem 5rem;}
    
    .MC_wrap2 .cont_wrap,
    .MC_wrap3 .cont_wrap{ min-height:auto;}
    .MC_wrap2 { background:#fff;} 
    .MC_wrap2 .right { width: 100%; display: flex; justify-content: space-between; margin-top: 1.5rem;}
    .MC_wrap2 .cont_wrap .content {flex-direction: column;flex-wrap: wrap; width: 100%; margin-top: 1.5rem;}
    .MC_wrap3 .cont_wrap {transform: none;}
    .MC_wrap3 .cont_wrap::before { bottom: -2px; top: auto;}


    .MC_box1{ height:auto !important;} 
    .MC_box2 { position:relative; width:100%; height:auto;bottom: 0; right: 0; }
    .MC_box2:before{ display: none;} 
    .MC_box3 { width: 100%;} 
    .MC_box4 { width: 49%;}
    .MC_box5 { width: 49%;} 
    .MC_box6 { width: 49%;}
    .MC_box7 {height: 19rem;margin-bottom: 5.5rem;}
    .MC_box7:before {height: calc(100% + 6rem);border-radius: 0 1rem 4.5rem 0;top: -3.4rem;}
    .MC_box8 {/* margin-top: 8rem; */} 
}

@media screen and (max-width: 1024px){

    #wrap.upPop.open #header{ top:0;}
 
    .MC_wrap1 .fp-overflow{ padding-top:6rem !important;}
    .MC_wrap2:before{ left:-5rem; width:17rem; height:19rem;}
    .MC_wrap2 .right { flex-direction: column;}

    .MC_box5 { width: 100%;} 
    .MC_box6 { width: 100%;} 
}

@media screen and (max-width: 920px){
    #container .section.MC_wrap2 .container { padding-top: 0;}
    #container .section.MC_wrap3 .container { padding-bottom: 3rem;}
    .MC_wrap3 .cont_wrap::before { width: 55rem; bottom: -11px;}

    .MC_wrap1 .con_wrap{ display: block;}
    .MC_wrap2 .cont_wrap .content { margin-top: 1.5rem;}
    .MC_wrap3 .cont_wrap { flex-direction: column;}
    .MC_box4 { width: 100%;}
    .MC_box7 {width: 100%;padding-top: 1rem;height: 20rem;margin-bottom: 0;}
    .MC_box7:before {height: calc(100% + 3rem);border-radius: 0 0 2rem 0;right: -1rem;top: -3.2rem;}
    .MC_box8 { width: 100%; margin-top: 0.7rem;}
}

@media screen and (max-width: 768px){

    .MC_wrap1 .fp-overflow{ padding-top:4rem !important;}
    #container .section.MC_wrap2 .container { padding-bottom: 1rem;}
    .MC_box2 { height: auto;}
} 
@media screen and (max-width: 420px){

    .MC_box7 { height: 20.5rem;}
}