@charset "UTF-8";

/*
    ********** 공통 레이아웃
*/

.orange {color: #ff681d;}
.pageOutWrap {overflow: hidden;}
.contentWrap {max-width: 1320px; width: 100%; margin: 0 auto;}

.header {z-index: 5; position: fixed; top: 0; left: 0; width: 100%; height: 150px; transition: all 1s; background-color: transparent;}
.header .headerInner {display: flex; justify-content: space-between; align-items: center; height: inherit;}
.header h1  {padding: 0 15px; background-color: #ff681d; height: inherit; box-sizing: border-box;}
.header h1 > a {display: block; height: inherit;}

.header .mainMenu {padding: 75px 0 50px;}
.header .mainMenu a {margin-right: 35px; color: #202020; font-size: 25px; font-family: 'SUIT-Medium';cursor: pointer;}
.header .mainMenu a:last-child {margin-right: 0;}
.header .mainMenu a:hover {color: #ff681d; transition: all .5s;}

/*header scroll 진행시*/
.header.scroll {background-color: rgba(255, 104, 29, 0.95); height: 95px; transition: all 1s;}
.header.scroll .headerInner {align-items: flex-start;}
.header.scroll h1 {margin-top: -33px; background-color: transparent;}
.header.scroll h1 a img {display: block;}
.header.scroll .headerInner .mainMenu {padding: 32px 0;}
.header.scroll .headerInner .mainMenu a {color: #fff;}

/*
    ********** content
*/
/*이미지가 있는 경우 imgCon으로 감싼다.*/
.mainContainer .imgCon {font-size: 0;}
.mainContainer .imgCon > img {width: 100%;}

.con01 {position: relative;}

/*회전이미지 단독*/
.circle {z-index: 2; position: absolute; bottom: -15%; right: 4.9%;}
.circle > img {animation: rotate_image 12s linear infinite;transform-origin: 50% 50%;}
@keyframes rotate_image{ 100% { transform: rotate(360deg); } }

.con02 {background-image: url('../images/mainCon_02_bg_change.jpg');
        background-repeat: no-repeat; background-size: cover; background-position: center;}
.con02 .txtBox {width: 100%; text-align: center; padding: 150px 0 293px; background-color: transparent;}
.con02 .txtBox .innerTxt {margin-bottom: 18px; font-family: 'SUIT-Medium'; font-size: 65px; color: #fff;}
.con02 .txtBox .innerTxt:nth-child(4) {margin-bottom: 50px; font-family: 'SUIT-Regular'; font-size: 25px; color: #fff;}


.con03 {position: relative; top: -197px;}
.con03 .swiper-slide {}
.con03 .swiper-slide img {max-width: 1200px; width: 100%; margin: 0 auto;}
.con03 .type01 {width: 100%; height: 100%; display: flex; justify-content: center;}
.con03 .type02 {display: none;}

.con03 .type01 .hoverLft,
.con03 .type01 .hoverRgt {position: relative; display: flex; align-items: center; width: 100%; padding-top: 150px;}
.con03 .type01 .hoverLft {justify-content: flex-end; background-color: #ff681d;}
.con03 .type01 .hoverRgt {justify-content: flex-start; background-color: #fff;}


.con03 .type01 .box {width: 600px;}
.con03 .type01 .box > img {display: block; width: 35%; margin-bottom: 40px;}
.con03 .type01 .box .bottomEx {width: 100%; padding: 60px 0 90px;}
.con03 .type01 .box .bottomEx .monbaiti {font-size:65px; font-family: 'monbaiti-R';}
.con03 .type01 .box .bottomEx .monbaiti:nth-child(2) {margin-bottom: 60px;}
.con03 .type01 .box .bottomEx .suitTxt {font-size: 25px; font-family: 'SUIT-Medium';}


.con03 .type01 .box.lft {opacity: 0; z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); right: 60px; background-color: rgba(255,255,255,0.9);
    padding: 90px 60px 30px; box-sizing: border-box;}
.con03 .type01 .box.lft .bottomEx {border-top: 1px solid #ff681d; text-align: right; }
.con03 .type01 .box.lft .bottomEx li {color: #202020;}


.con03 .type01 .box.rgt {opacity: 0; z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); left: 60px; background-color: rgba(251,126,10,0.9);
    padding: 90px 60px 30px; box-sizing: border-box;}
.con03 .type01 .box.rgt > img { margin-left: auto;}
.con03 .type01 .box.rgt .bottomEx {border-top: 1px solid #fff; text-align: left;}
.con03 .type01 .box.rgt .bottomEx li {color: #fff;}

/* hover작업 */
.con03 .type01 .hoverRgt:hover .box.rgt,
.con03 .type01 .hoverLft:hover .box.lft { opacity: 1; transition: all 1s;}


.con04 {background-color: #f5f5f5;}
.con04 .contentWrap {padding-bottom: 150px;}
.con04 h2 {padding: 150px 0 50px; font-size: 65px; color: #202020; font-family: 'monbaiti-R'; font-weight: lighter;}
.con04 .detailImgWrapper {/*display: flex;*/width:1320px; font-size:0; margin:0 auto;}



.youtubeWrap { width: 100%;margin-bottom: 150px; }
.youtubeBannerWrap { position: relative;background: url("../images/youtubeBanner.png") center no-repeat; height: 950px; background-size: cover; }
.youtubeContainer { width: 870px;/*padding: 150px 240px; */box-sizing: border-box; height: 100%; margin-left: 240px; display: flex; align-items: center; justify-content: center;  }
.youtubeIframeWrap { position: relative; width: 870px; height: auto; padding-top: 56.25%; }
.youtubeContainer iframe { z-index: 1; position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

/*
    ****************************** 그래프영역 추가작업
*/
.con04 .detailGraphArea {display:inline-block; width: 50%; height:1290px; padding: 60px 30px; background-color: #fff; box-sizing: border-box; vertical-align: middle;}
.con04 .detailGraphArea .graphList {/*width: 100%;*/ /*padding: 0 30px;*/ border-bottom: 1px solid #ccc; margin-bottom: 29px; box-sizing: border-box;}
.con04 .detailGraphArea .graphList:last-child {border-bottom: none; margin-bottom: 0;}
.con04 .detailGraphArea .graphList .label:before {content: 'ㆍ'; color: #202020; display: inline-block; }
.con04 .detailGraphArea .graphList .label {display: inline-block; /*padding: 7px 0;*/ margin-bottom: 25px;
    font-size: 22px; font-family: 'SUIT-Medium'; color: #202020;}


.con04 .detailGraphArea .graphWrapper {/*width:540px; margin: 10px 0;*/ width:600px; margin-bottom: 29px; padding: 0 30px; box-sizing: border-box;}
.con04 .detailGraphArea .graphWrapper div {margin-bottom: 5px; font-family: 'SUIT-Light'; font-size: 20px;}
.con04 .detailGraphArea .graphWrapper div:last-child {margin-bottom: 0;}
.con04 .detailGraphArea .graphWrapper .flexBetween {display: flex; justify-content: space-between;}
.con04 .detailGraphArea .graphWrapper .percent .orange {font-family: 'SUIT-Bold';}
.con04 .detailGraphArea .graphWrapper .graphBg {position: relative; width: 100%; height: 30px;  background-color: #eee;}
.con04 .detailGraphArea .graphWrapper .graphBg:before {content: ''; position: absolute; top: -4px; display: block; width: 1px; height: 40px;
    background-color: #ff681d;}
.con04 .detailGraphArea .graphWrapper .graphBg:after {content: ''; z-index: 2; position: absolute; top: -4px; left: 50%; transform: translateX(50%);
    display: block; width: 1px; height: 40px; background-color: #ff681d;}
.con04 .detailGraphArea .graphWrapper .graphTxt {color: #808080;}

.con04 .detailGraphArea .graphWrapper .graphBg .ani {
    animation-name: graph;
    display: block;
    height: inherit;
    background-color: #ff681d;
    animation-duration:3s;
    animation-direction:normal;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes graph {
    0% { width: 0; }
    100% { width: 100%; }
}

.con04 .detailGraphArea .graphWrapper .graphBg .ani.graph01 {max-width: 83.33333333333%;}
.con04 .detailGraphArea .graphWrapper .graphBg .ani.graph02 {max-width: 77.77777777777%;}
.con04 .detailGraphArea .graphWrapper .graphBg .ani.graph03 {max-width: 61.11111111111%;}
.con04 .detailGraphArea .graphWrapper .graphBg .ani.graph04 {max-width: 88.88888888888%;}
.con04 .detailGraphArea .graphWrapper .graphBg .ani.graph05 {max-width: 66.66666666666%;}
.con04 .detailGraphArea .graphWrapper .graphBg .ani.graph06 {max-width: 85.55555555555%;}

.con04 .detailImg {display:inline-block; width: 50%; vertical-align: middle;}

.con04 .subTail {margin-top: 5px; font-family: 'SUIT-Light'; font-size: 15px; color: #aaa;}

/*
    ****************************** 그래프영역 추가작업 끝
*/

.con05 {max-width: 1320px; width: 100%; margin: 0 auto; padding-top: 150px;}


/*Q&A*/
.youthealQna {padding-top:150px; padding-bottom:150px;}
.youthealQna .contentWrap {display:flex;}
.youthealQna .contentWrap .imgArea {width:660px; margin-right:90px;}
.youthealQna .contentWrap .qnaArea {flex:1;}
.youthealQna .contentWrap .qnaArea .titleCell {font-size:65px; color:#202020; font-family:SUIT-Light; line-height:1.2; margin-bottom:30px;}
.youthealQna .contentWrap .qnaArea .titleCell .bold {font-family:SUIT-Medium;}
.youthealQna .contentWrap .qnaArea .qnaListBox {border-top:solid 1px #cccccc;}
.youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell {display:flex; align-items:center; height:100px; font-size:25px; color:#202020; font-family:SUIT-Regular; border-bottom:solid 1px #cccccc; cursor:pointer;}
.youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell .text {flex:1;}
.youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell .num {display:flex; justify-content: center; align-items: center; width:60px; height:60px; color:#ffffff; border-radius:50%; margin:0 30px; background-color:#ff681d;}
.youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell .arrow {margin-left:10px;}
.youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .aCell {display:none; font-size:20px; color:#404040; font-family:SUIT-Light; padding:15px 30px; border-bottom:solid 1px #cccccc;}

.youthealQna .contentWrap .qnaArea .qnaListBox .qnaList.on .qCell .arrow {transform: rotateX(180deg);}

/*하단배너*/
.youthealBottomBanner {position: relative; background-image:url("../images/boosterBg_change.jpg"); background-size:cover; background-position:center center;}
.youthealBottomBanner .blackBg {display: flex; justify-content: flex-end; width: 50%; height: 100%; padding: 152px 10vw 152px 0; background-color: rgba(0,0,0,0.9);
    box-sizing: border-box;}

.youthealBottomBanner .blackBg .bannerInner {}

.youthealBottomBanner .textCell {font-size:35px; color:#ffffff; font-family:SUIT-Light;}
.youthealBottomBanner .subTextCell {font-size: 65px; color: #fff;}
.youthealBottomBanner .textCell .bold {font-family:SUIT-Medium;}
.youthealBottomBanner .textCell .orange {color:#ff681d;}
.youthealBottomBanner .vBar {height:55px; width:1px; margin-left: 14px; margin: 30px 0; background-color:#dc771a;}


/*하단정보*/
.youthealBottomInfo {padding-top:100px; padding-bottom:45px;}
.youthealBottomInfo .contentWrap {display:flex; align-items: flex-start;}
.youthealBottomInfo .infoBox {flex:1; min-height:220px; margin-right:60px; border:solid 1px #cccccc; padding:25px; box-sizing: border-box;}
.youthealBottomInfo .infoBox:last-child {margin-right:0;}
.youthealBottomInfo .infoBox .boxTitle {font-size:20px; color:#808080; font-family:SUIT-Medium; margin-bottom:20px;}
.youthealBottomInfo .infoBox .boxContent {font-size:15px; color:#808080; font-family:SUIT-Light;}


/*카피라이트*/
.copyright {padding-bottom:100px;}
.copyright .contentWrap {font-size:14px; color:#404040; font-family:SUIT-Light; text-align:right;}

/*
    ******************** media screen
*/
@media(max-width:1600px) {

    /*con02 세부조정*/
    .con02 .txtBox .innerTxt {margin-bottom: 18px; font-size: 45px;}
    .con02 .txtBox .innerTxt:nth-child(4) {margin-bottom: 30px; font-size: 20px;}

    /*con03 세부조정*/
    .con03 .type01 .box {width: 40vw;}
    .con03 .type01 .box .bottomEx {padding: 30px 0 45px;}

    .con03 .type01 .box.lft {padding: 45px 30px 15px;}
    .con03 .type01 .box.rgt {padding: 45px 30px 15px;}

}


@media(max-width:1320px) {
    .contentWrap {width: 100%; padding: 0 15px; box-sizing: border-box;}

    .con02 .txtBox {padding: 120px 0 220px; /*293px*/}
    .con02 .txtBox .innerTxt {font-size: 35px;line-height: 35px;}
    .con02 .txtBox .innerTxt:nth-child(4) {margin-bottom: 20px;/*5px;*/}
    /*.con02 .txtBox .imgCon .pcVerTxt {width: 80%;}*/
    /*회전이미지 단독*/
    .circle {z-index: 2; position: absolute; bottom: -15%; right: 4.9% }
    .circle > img {animation: rotate_image 12s linear infinite;transform-origin: 50% 50%; width: 35vw;}

    .con03 .type01 .hoverLft,
    .con03 .type01 .hoverRgt {padding-top: 100px;}

    .con03 .type01 .hoverLft > img {width: 100%;}
    .con03 .type01 .hoverRgt > img {width: 100%;}

    .con03 .type01 .box .bottomEx .monbaiti {font-size: 45px;}
    .con03 .type01 .box .bottomEx .monbaiti:nth-child(2) {margin-bottom: 20px;}
    .con03 .type01 .box .bottomEx .suitTxt {font-size: 20px;}

    .con04 .contentWrap {padding-bottom: 100px;}
    .con04 h2 {padding: 100px 0 50px;}

    .con05 {padding-top: 100px;}


    .youtubeContainer { margin-left: 100px; }

    /*Q&A*/
    .youthealQna {padding-top:120px; padding-bottom:120px;}
    .youthealQna .contentWrap .imgArea {width:45%; margin-right:40px;}
    .youthealQna .contentWrap .imgArea > img {width:100%;}
    .youthealQna .contentWrap .qnaArea .titleCell {font-size:45px; margin-bottom:20px;}
    .youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell {height:80px; font-size:20px;}
    .youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell .num {width:50px; height:50px; margin:0 20px;}
    .youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .aCell {font-size:18px; padding:15px 20px;}


    /*하단배너*/

    .youthealBottomBanner .blackBg {padding: 120px 10vw 120px 0; /*152px 10vw 152px 0;*/}
    .youthealBottomInfo .contentWrap {display:block;}
    .youthealBottomInfo .infoBox {min-height:auto; margin-right: 0;}
    .youthealBottomBanner .textCell {font-size:30px; }
    .youthealBottomBanner .vBar {height:55px; margin-left:25px;}
    .youthealBottomBanner .subTextCell {font-size: 60px;}

}

@media(max-width:1200px) {
    /*con03 세부조정*/
    .con03 {top: -15.7vw;}
    .con03 .swiper-slide {padding: 0 15px; box-sizing: border-box;}



}



/*세부조정작업*/
@media(max-width:1024px) {
    /*con03 세부조정*/
    .con03 .type01 .box > img {margin-bottom: 20px; width: 107px;}
    .con03 .type01 .box .bottomEx .monbaiti {font-size: 40px;}
    .con03 .type01 .box .bottomEx .suitTxt {font-size: 15px; letter-spacing: -1px;}
    .con03 .type01 .box.lft {padding: 30px 15px 5px; right: 30px;}
    .con03 .type01 .box.rgt {padding: 30px 15px 5px; left: 30px;}


    .youtubeContainer { width: 100%; margin: 0; padding: 0 20px; box-sizing: border-box; }
}



/*
    ******************** media screen :: 모바일
*/
@media(max-width:768px) {

    .header {height: 68px;}
    .header .headerInner {position: relative; height: inherit;}
    .header .mainMenu {padding: 0;}
    .header .mainMenu a {margin-right: 4px; padding: 26px 0; font-size: 14px; letter-spacing: -1px;}
    .header h1  {padding: 0 5px; height: inherit;}
    .header h1 > a {display: block; height: inherit; font-size: 14px;}
    .header h1 > a img {width: 75px; height: auto;}
    /*header scroll 진행시*/
    .header.scroll {height: 52px;}
    .header.scroll h1 {margin-top: 2px; height: inherit;}
    .header.scroll h1 a img{width: 75px; height: auto; margin-top: -7px;}

    .header.scroll .headerInner .mainMenu {padding: 17px 0;}

    .header.scroll .mainMenu a {padding: 15px 0; font-size: 14px; margin-right: 4px;}

    .con02 {background-image: url('../images/m_mainCon_02_bg_change.jpg');}
    .con02 .txtBox {padding: 70px 0 28vw;}
    .con02 .txtBox .innerTxt {font-size: 30px;}
    .con02 .txtBox .innerTxt:last-child {font-size: 25px;}

    /*회전이미지 단독*/
    .circle {bottom: -8%;right: -4.9%;}


    .con03 {top: -23vw;}

    .con03 .swiper-slide img {max-width: 100%; width: 100%; margin: 0 auto;}
    .con03 .type01 {display: none;}
    /*모바일버전*/
    .con03 .type02 {display: block;}
    .con03 .type02 {width: 100%; height: 100%; display: flex; justify-content: center;}

    .con03 .type02 .boxWrapper {z-index: 5; position: relative; top: -30.5vw; left: 50%; transform: translateX(-50%);  padding: 0 30px; box-sizing: border-box;}
    .con03 .type02 .box {position: relative; width: 100%; padding: 3.9063vw; background-color: rgba(255,255,255,0.9); margin-bottom: -80px; box-sizing: border-box;}
    .con03 .type02 .box .logoBg {display: flex; align-items: center; margin: 15px 0; box-sizing: border-box;}
    .con03 .type02 .box .logoBg > img {display: block; width: 35%;}


    .con03 .type02 .box .bottomEx {position: relative; width: 100%; margin: 30px 0 45px; padding-top: 20px; border-top: 1px solid #ff681d; text-align: right; }
    .con03 .type03 .box .bottomEx li {color: #202020;}
    .con03 .type02 .box .bottomEx .monbaiti {font-size: 8.4635vw; font-family: 'monbaiti-R';}
    .con03 .type02 .box .bottomEx .monbaiti:nth-child(2) {margin-bottom: 15px;}
    .con03 .type02 .box .bottomEx .suitTxt {font-size: 3.2552vw; font-family: 'SUIT-Medium';}

    .con03 .type02 .box.orangeBg {background-color: rgba(251, 133,22, 1);}
    .con03 .type02 .box.orangeBg .logoBg {justify-content: flex-end;}
    .con03 .type02 .box.orangeBg .bottomEx {border-top: 1px solid #fff; color: #fff; text-align: left;}

    .youtubeBannerWrap { position: relative;background: url("../images/youtubeBanner_m.png") center no-repeat; height: 80vw; background-size: cover; }

    /*pagenation btn 색상 변경*/
    .swiper-pagination-bullet {width:10px !important; height:10px !important; opacity:1 !important; margin-left:6px !important; margin-right:6px !important;  background:#ffffff !important;
    border: 1px solid #ff681d !important;}
    .swiper-pagination-bullet-active {background: #ff681d !important;}
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:40px}

    .con04 h2 {padding: 75px 0 25px; font-size: 33px;}
    .con04 .detailImgWrapper {display: block; width: 100%;}

    /*Q&A*/
    .youthealQna {padding-top:50px; padding-bottom:50px;}
    .youthealQna .contentWrap {display:block;}
    .youthealQna .contentWrap .imgArea {width:100%; height:auto; margin-right:0;}
    .youthealQna .contentWrap .qnaArea {flex:auto;}
    .youthealQna .contentWrap .qnaArea .titleCell {font-size:30px; margin-bottom:20px; margin-top:20px;}
    .youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell {height:60px; font-size:18px;}
    .youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell .num {width:40px; height:40px; margin:0 15px;}
    .youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .qCell .arrow {width:15px; margin-right:10px;}
    .youthealQna .contentWrap .qnaArea .qnaListBox .qnaList .aCell {font-size:14px; padding:15px 15px;}


    /*하단배너*/
    .youthealBottomBanner {background-position: center right;}
    .youthealBottomBanner .blackBg {width: 60%; padding: 100px 70px 100px 0;}
    .youthealBottomBanner {background-image:url("../images/m_boosterBg_change.jpg");}
    .youthealBottomBanner .textCell {font-size: 4vw; text-align:left;}
    .youthealBottomBanner .subTextCell {font-size: 25px;}
    .youthealBottomBanner .vBar {height:35px; margin: 10px 0;}

    /*하단정보*/
    .youthealBottomInfo {padding-top:50px; padding-bottom:20px;}
    .youthealBottomInfo .contentWrap {flex-direction: column;}
    .youthealBottomInfo .infoBox {padding:15px;}
    .youthealBottomInfo .infoBox:first-child {margin-right:0; margin-bottom:20px;}
    .youthealBottomInfo .infoBox .boxTitle {font-size:16px; margin-bottom:15px;}
    .youthealBottomInfo .infoBox .boxContent {font-size:12px;}


    /*카피라이트*/
    .copyright {padding-bottom:50px;}
    .copyright .contentWrap {font-size:11px; letter-spacing: -1px;}


    /*
        ****************************** 그래프영역 추가작업
    */
    .con04 .contentWrap {padding-bottom: 75px;}
    .con04 .detailImgWrapper {display: flex;flex-direction: column-reverse;}
    .con04 .detailGraphArea {width: 100%; padding: 30px 15px 15px 15px; height:auto;}
    .con04 .detailGraphArea .graphWrapper {width: 100%; /*margin: 0;*/ margin-bottom: 20px; padding: 0 15px;}
    .con04 .detailGraphArea .graphWrapper div {font-size: 16px;}
    .con04 .detailGraphArea .graphList {padding: 0; margin-bottom: 20px;}
    .con04 .detailGraphArea .graphList .label {font-size: 16px; margin-bottom: 15px;}
    .con04 .detailGraphArea .graphWrapper .graphBg {height: 25px;}
    .con04 .detailGraphArea .graphWrapper .graphBg:before {height: 35px;}
    .con04 .detailGraphArea .graphWrapper .graphBg:after {height: 35px;}

    .con04 .detailImg {display: block; width: 100%; flex: 0 0 auto;}
    .con04 .detailImg img {width:100%;}

    .con04 .subTail {font-size: 10px;}

    .con05 {padding-top: 75px;}
}