@charset "utf-8";

/*
 * File       : rwd_main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * SUMMARY:
 * 01) introduce custom rwd
 * 02) min-width: 1024px
 * 03) 1800px
 * 04) 1640px
 * 05) 1500px
 * 06) 1380px
 * 07) 1200px
 * 08) min-width: 1024px / max-height: 755px
 * 09) 1023px
 * 10) 768px
 * 11) 680px
 * 12) 540px
 */



/* **************************************** *
 * introduce custom rwd
 * **************************************** */

@media (min-width: 1024px) {
    .main_introduce .main_section_circle {left: -99px;right: auto;}
    .main_introduce .main_section_content.secondary {width: 40%;margin-left: auto;}
}

@media (max-width: 1800px) and (min-width: 1024px) {
    .main_introduce .main_section_content.secondary {width: 45%;}
}

@media (max-width: 1640px) and (min-width: 1024px) {
    .main_introduce .main_section_circle {left: auto;right: 50%;}
    .main_introduce .main_section_content.secondary {width: 40%;}
}

@media (max-width: 1500px) and (min-width: 1024px) {
    .main_introduce .main_section_content.secondary {width: 50%;}
    .main_introduce .main_section_content.secondary .main_content_cover_inner {padding-right: 0;padding-left: 15%;}
}

@media (max-width: 1200px) and (min-width: 1024px) {
    .main_introduce .main_section_circle {right: 52%;}
}



/* **************************************** *
 * min-width: 1024px
 * **************************************** */
@media (min-width: 1024px){
    /* reset layout style (fullpage type) */
    .body_home .main_container {padding-top: 0;}
    .body_home .go_top {opacity: 0;z-index: -1;}

    /* bottom */
    .body_home.fp-viewing-4 .main_bottom_overlay {opacity: 1;visibility: visible;}
    .body_home.fp-viewing-4 #footer {z-index: 3;}
    .body_home.fp-viewing-4 .go_top {opacity: 1;z-index: 999;}
}



/* **************************************** *
 * 1800px
 * **************************************** */
@media (max-width: 1800px){
    /* global */
    .main_section_circle {width: 640px;height: 640px;right: -50px;}

    /* visual */
    .main_visual_state {left: 0;}
}



/* **************************************** *
 * 1640px
 * **************************************** */
@media (max-width: 1640px){
    /* fullpage */
    #fp-nav.right {right: 24px;}

    /* global */
    .main_section_circle {width: 50%;height: auto;padding-top: 50%;right: auto;left: 50%;}

    .main_txt_wrap > h2 {font-size: 43px;}

    /* visual */
    .main_visual_slider_wrap .cycle_prev {left: -105px;}
}



/* **************************************** *
 * 1500px
 * **************************************** */
@media (max-width: 1500px){
    /* global */
    .main_section_circle {width: 44%;padding-top: 44%;}

    .main_content_cover_inner {padding: 0 7.5%;}
    .main_section_content.secondary .main_content_cover_inner {padding-left: 15%;}

    .main_txt_wrap.secondary {margin-bottom: 40px;}
    .main_txt_wrap > h2 {font-size: 40px;}
    .main_txt_wrap > span {margin-bottom: 12px;}

    /* visual */
    .main_visual_content_inner {padding-left: 15%;padding-right: 36px;}
    .main_visual_content .main_txt_wrap > h2 {font-size: 36px;}
    .main_visual_content .main_txt_wrap > h2 br {display: none;}

    .main_visual_state {left: 7.5%;}

    .main_visual_slider_wrap .cycle_prev {left: -20px;}

    /* media */
    .main_media_list {margin-left: -8px;margin-right: -8px;}
    .main_media_item {padding: 0 8px;}
}



/* **************************************** *
 * 1380px
 * **************************************** */
@media (max-width: 1380px){
    /* global */
    .main_section {padding-top: 90px;}

    .main_txt_wrap.secondary {margin-bottom: 30px;}
    .main_txt_wrap > h2 {font-size: 38px;}
    .main_txt_wrap > p {padding: 12px 0 20px;}

    /* visual */
    .main_visual_slider_wrap .cycle_prev {left: -10px;}

    /* media */
    .main_media_txt {padding-top: 20px;}
    .main_media_txt p {margin-top: 6px;}
    .main_media_type {width: 42px;height: 42px;font-size: 22px;line-height: 42px;}
    .main_media_type.sound {font-size: 26px;}
}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){
    /* fullpage */
    #fp-nav ul li {padding: 18px 0;}
    #fp-nav ul li .fp-tooltip {height: 42px;margin-top: -21px;}
    #fp-nav ul li .fp-tooltip span {line-height: 42px;}

    /* global */
    .main_section_circle {width: 42%;padding-top: 42%;left: 52%;}

    .main_section_content.secondary .main_content_cover_inner {padding-right: 0;}

    .main_txt_wrap > h2 {font-size: 34px;}

    /* visual */
    .main_visual_content .main_txt_wrap > h2 {font-size: 34px;}

    .main_visual_slider_wrap .cycle_next {right: 27px;}
}



/* **************************************** *
 * min-width: 1024px / max-height: 755px
 * **************************************** */
@media (min-width: 1024px) and (max-height: 755px){
    /* visual */
    .main_visual_content_inner {padding-bottom: 55px;}
    .main_visual_state {bottom: 55px;}
}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){
    /* fullpage */
    #fp-nav {display: none !important;}

    .main_section {padding-top: 65px;padding-bottom: 65px;height: auto !important;}
    .main_content_cover_inner {padding: 0;}
    .main_section_circle {width: 420px;padding-top: 420px;margin: 0 auto;position: relative;left: auto;top: auto;-webkit-transform: none;-ms-transform: none;transform: none;}

    .main_section_content.secondary {width: 100%;}
    .main_section_content.secondary .main_content_cover_inner {padding-left: 0;}

    /* .main_txt_wrap > span {padding: 7px 14px 6px;font-size: 12px;} CSS 삭제 */
	/* CSS 추가 시작 */
    .main_txt_wrap > span {font-size: 12px;}
	/* CSS 추가 끝 */

    /* visual */
    .main_visual.main_section {padding-top: 30px;}
    .main_visual .main_section_circle {display: none;}

    .main_visual_slider {width: 100%;}
    .main_visual_image {display: block;width: 420px;padding-top: 420px;margin: 0 auto;position: relative;border-radius: 50%;overflow: hidden;}
    .main_visual_image img {width: 125%;height: 125%;position: absolute;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
    .main_visual_content_inner {padding-left: 0;padding-right: 0;padding-top: 52px;vertical-align: top;}

    .main_visual_content .main_txt_wrap > h2 br {display: block;}

    .main_visual_slider_wrap .cycle_control {margin-top: 0;top: -180px;}
    .main_visual_slider_wrap .cycle_prev {left: 0;}
    .main_visual_slider_wrap .cycle_next {right: 0;}

    .main_visual_state {left: 0;top: 424px;bottom: auto;}

    /* media */
    .main_media .main_section_circle {margin-left: 0;}
    .main_media .main_section_content.secondary {width: 55%;margin-left: auto;}

    /* project */
    .main_project .main_section_circle {margin-left: 0;}
    .main_project .main_section_content.secondary {width: 55%;margin-left: auto;}

    .main_character .main_section_circle {margin-left: 0;}
    .main_character .main_section_content.secondary {width: 55%;margin-left: auto;}

    /* bottom */
    .main_bottom {padding-top: 13%;}
    .main_bottom_overlay {display: none;}
}



/* **************************************** *
 * 768px
 * **************************************** */
@media (max-width: 768px){
    /* global */
    .main_txt_wrap > p {font-size: 15px;}

    /* media */
    .main_media_type {width: 36px;height: 36px;font-size: 18px;line-height: 36px;}
	.main_media_txt {padding: 20px 0 0;}
}



/* **************************************** *
 * 680px
 * **************************************** */
@media (max-width: 680px){
    /* global */
    .main_section_content.secondary {padding-top: 30px;}

    .main_txt_wrap > h2 {font-size: 30px;}
    /* .main_txt_wrap > span {margin-bottom: 10px;padding: 6px 12px 5px;font-size: 11px;} CSS 삭제 */
	/* CSS 추가 시작 */
    .main_txt_wrap > span {margin-bottom: 10px;font-size: 11px;}
	/* CSS 추가 끝 */

    /* visual */
    .main_visual_content .main_txt_wrap > h2 {font-size: 30px;}

    .main_visual_state {width: 100%;top: 450px;text-align: center;}
    .main_visual_state .cycle_caption, .main_visual_state .cycle_progress_wrap, .main_visual_state .cycle_state {display: none !important;}
    .main_visual_state .cycle_pager {display: block;}

    .main_media_list {margin-left: 0;margin-right: 0;}
    .main_media_item {width: 100%;padding: 0;}
    .main_media_thumb img {width: 100%;}
    .main_media_item + .main_media_item {margin-top: 36px;}

    .main_project .main_section_circle {margin-left: auto;}
    .main_project .main_section_content.secondary {width: 100%;}

    /* character */

    .main_character .main_section_circle {margin-left: auto;}
    .main_character .main_section_content.secondary {width: 100%;}
}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){
    /* global */
    .main_section {padding-top: 57px;padding-bottom: 57px;}

    .main_section_circle {width: 80%;padding-top: 80%;}

    .main_txt_wrap.secondary {margin-bottom: 27px;}
    .main_txt_wrap > h2 {font-size: 26px;}
    .main_txt_wrap > p {padding: 10px 0 20px;font-size: 15px;line-height: 1.6;}
    .main_txt_wrap > h2 br, .main_txt_wrap > p br {display: none;}
    /* .main_txt_wrap > span {font-size: 10px;} CSS 삭제 */

    .home_container .jt_btn_icon {padding: 19px 28px 18px;}
    html.ios .home_container .jt_btn_icon {padding-top: 18px;}

    /* visual */
    .main_visual_image {width: 80%;padding-top: 80%;}

    .main_visual_content .main_txt_wrap > h2 {font-size: 26px;}
    .main_visual_content .main_txt_wrap > h2 br,
    .main_visual_content .main_txt_wrap > p br {display: none;}

    .main_visual_slider_wrap .cycle_control, .main_visual_state {top: 0;opacity: 0;-webkit-transition: opacity 400ms;transition: opacity 400ms;}
    .main_visual_slider_wrap .cycle_control.loaded, .main_visual_state.loaded {opacity: 1;}
    .main_visual_slider_wrap .cycle_btn {font-size: 18px;background: none;}
    .main_visual_slider_wrap .cycle_prev {left: -23px;}
    .main_visual_slider_wrap .cycle_prev:after {content: '\e93e';}
    .main_visual_slider_wrap .cycle_next {right: -23px;}
    .main_visual_slider_wrap .cycle_next:after {content: '\e93f';}

    /* media */

    .main_media_item + .main_media_item {margin-top: 30px;}
    .main_media_txt {padding-top: 16px;}
    .main_media_txt h3 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 3.24em;white-space: normal;font-size: 16px;line-height: 1.62;}
    .main_media_txt p {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 3.2em;white-space: normal;font-size: 14px;line-height: 1.6;}

    /* bottom */
    .main_bottom {padding-top: 18%;}
}